mes-ai-admin-backend-ui/src/view/yunyin/shengchanguanli/shengchanjincheng.vue

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--          按钮部分-->
          <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
            <el-form-item>
              <el-input v-model="searchInfo" placeholder="搜索员工编号或员工姓名" clearable style="width: 200px;margin: 5px"></el-input>
              <el-button type="primary" icon="search" @click="onSubmit" style="margin: 5px">查询</el-button>
			  <!-- <el-button type="primary" icon="edit"   @click="gd_gxcltjonClick"  class="bt" title="工序产量核查">工序产量统计</el-button> -->
			  <el-button type="primary" icon="edit"   @click="cp_gdprintonClick" class="bt" title="打印生产工单" >工单打印</el-button>
			  <el-button type="primary" title="设置工单的状态-->【计划中】 【生产中】 【已完成】" icon="edit" @click="onStatusClick" class="bt">工单状态设置</el-button>
			  <el-button type="primary" icon="edit"   @click="gd_gxclhconClick"  class="bt" title="工序产量核查">工序产量核查</el-button>
            </el-form-item>
          </el-form>
		  
		  <!-- 状态设置【弹窗】-->
		   <el-dialog v-model="onstatuslist" title="工单状态设置" width="30%" style="top: 15%">
			 <div style="width: 100%;height: 100%;">
			   <div style="width: 100%; display: flex; align-items: center;">
				 <el-form-item label="工单编号 :" prop="currentProcess">
				   <el-input v-model="statusformData['gdbh']" placeholder="" />
				 </el-form-item>
			   </div>
			   <div style="width: 100%; display: flex; align-items: center; margin-top: 30px;">
				 <span>状态设置：</span>
				 <el-radio-group v-model="status" style="margin-left: 10px;">
				   <el-radio label="计划中">计划中</el-radio>
				   <el-radio label="生产中">生产中</el-radio>
				   <el-radio label="已完工">已完工</el-radio>
				 </el-radio-group>
			   </div>
			   <div class="dialog-footer" style="text-align: right; margin-top: 40px;">
				 <el-button @click="handleCancel">取消</el-button>
				 <el-button type="primary"  @click="handleConfirm">确认</el-button>
			   </div>
			 </div>
		   </el-dialog>

         <!--工序产量核查【弹窗】-->
          <el-dialog v-model="gd_gxclhclist" title="工序产量核查" style="width: 100%;height: 100%;margin: 0px;padding: 0px">
            <el-button type="" @click="gxclhcCancel">退出</el-button>
            <div style="width: 100%; height: 60px; padding: 0px; margin: 10px 0px 0px 0px; display: flex; align-items: center;">
              <div style="width: 100%; height: 60px; padding: 0px;  display: flex; align-items: center;">
                <el-form-item label="工单编号" prop="currentProcess" style="margin-right: 20px; padding: 0px">
                  <el-input v-model="gxclhcformData['gdbh']"  @keyup.enter="gxclhcProductValue"  />
                </el-form-item>
              </div>
            </div>
            <el-table ref="paichengRef"
                      :show-overflow-tooltip="true"
                      :row-style="{ height: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '0px' }"
                      :header-cell-style="{ padding: '0px' }"
                      style="width: 100%;height: 70vh" border tooltip-effect="dark"
                      highlight-current-row="true"
                      @row-click="gxclhc_tableRowClick"
                      :data="gxclhc_Data" row-key="ID"
                      :cell-class-name="gxclhcCellClass">
              <template v-for="(item, idx) in gxclhc_Columns">
                <el-table-column #default="{ row, column, $index }" align="left" :label="item.label" :width="item.width" >
                  {{row[item.prop]}}
                </el-table-column>
              </template>
            </el-table>
          </el-dialog>

        </div>
      </layout-header>

      <layout>
        <!--    左侧树侧形结构-->
        <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
          <div class="JKWTree-tree" style="height: 200px">
            <h3>生产进程查询</h3>
            <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
            </el-tree>
          </div>
        </layout-sider>

        <!-- 右侧区域 -->
        <layout-content >
        <el-main>
          <div class="gva-table-box">
            <!-- 表格数据 -->
            <el-table ref="multipleTable" style="width: 100%;height: 65vh" tooltip-effect="dark"
                      :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="tableData"  border row-key="ID"
                      size="small"
					  :cell-class-name="gxbgCellClass"
                      highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @selection-change="handleSelectionChange">
             <el-table-column  sortable align="center" label="工单编号" prop="工单编号"  width="120" />
             <el-table-column  sortable align="center" label="印件代号" prop="印件代号"  width="120" />
			 <el-table-column  sortable align="center" label="印件名称" prop="印件名称"  width="200" />
			 <el-table-column  sortable align="center" label="联数" prop="联数"  width="100" />
			 <el-table-column  sortable align="center" label="投料大箱" prop="投料大箱"  width="100" />
			 <el-table-column  sortable align="center" label="计划投料" prop="计划投料"  width="100" />
			 <el-table-column  sortable align="center" label="工序1" prop="工序1"  width="200" />
			 <el-table-column  sortable align="center" label="工序2" prop="工序2"  width="200" />
			 <el-table-column  sortable align="center" label="工序3" prop="工序3"  width="200" />
			 <el-table-column  sortable align="center" label="工序4" prop="工序4"  width="200" />
			 <el-table-column  sortable align="center" label="工序5" prop="工序5"  width="200" />
			 <el-table-column  sortable align="center" label="工序6" prop="工序6"  width="200" />
			 <el-table-column  sortable align="center" label="工序7" prop="工序7"  width="200" />
			 <el-table-column  sortable align="center" label="工序8" prop="工序8"  width="200" />
			 <el-table-column  sortable align="center" label="工序9" prop="工序9"  width="200" />
			 <el-table-column  sortable align="center" label="工序10" prop="工序10"  width="200" />
			 <el-table-column  sortable align="center" label="工序11" prop="工序11"  width="200" />
			 <el-table-column  sortable align="center" label="工序12" prop="工序12"  width="200" />
			 <el-table-column  sortable align="center" label="工序13" prop="工序13"  width="200" />
			 <el-table-column  sortable align="center" label="工序14" prop="工序14"  width="200" />
			 <el-table-column  sortable align="center" label="工序15" prop="工序15"  width="200" />
			 <el-table-column  sortable align="center" label="工序16" prop="工序16"  width="200" />
			 <el-table-column  sortable align="center" label="工序17" prop="工序17"  width="200" />
            </el-table>

            <!-- 分页 -->
            <div class="gva-pagination">
              <el-pagination layout="total" :current-page="page" :page-size="pageSize"
               :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
<!--              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"-->
<!--                             :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />-->
            </div>
          </div>

        </el-main>
      </layout-content>
      </layout>
    </layout>
	<!-- 工单打印 -->
	<PrintPage ref="printPageRef" />
  </div>
</template>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';

import {ref, reactive} from 'vue'
import {
	jcgetTab,
	workOrderDetail,
	getOrderProcessCount
	} from '@/api/yunyin/yunying'
import PrintPage from './components/print.vue'
import {ElMessage} from "element-plus";
defineOptions({name: 'Company'})
// =========== 获取左侧树侧形结构 ===========
const treeData = ref({})
const _department_code = ref(null)
const getDepartmentdata = async () => {
  try {
	const response = await jcgetTab();
	console.log("左侧菜单列表↓");
	console.log(response);
	const formattedData = [];
	for (const category in response.data) {
	  const categoryNode = {
	    label: category, // 使用分类名称作为节点标签
	    children: response.data[category].map(item => ({
	      label: item, // 将客户信息格式化为节点标签
	    }))
	  };
	  formattedData.push(categoryNode);
	}
	treeData.value = formattedData;
  } catch (error) {
    console.error(error)
  }
}
getDepartmentdata();

//点击左侧树形 获取右侧table列表
const tableData = reactive([]);
const _code = ref(null);  //左侧菜单编号
const handleNodeClick = async (node) => {
	if(node.label === '印刷工单'  || node.label === '糊盒工单'){return false;}
	console.log(node.label.substring(0, 5));
	_code.value = node.label.substring(0, 5);
	searchInfo.value = '';  // 清空搜索信息
	_workOrderDetailList();  // 执行获取员工列表的函数
};

//全局调用工单编号
const _Gd_gdbh = ref(null)
//全局调用印件代号
const _Gd_cpdh = ref(null)
const tableRowClick = async (row) => {
  console.log(row.工单编号)
  _Gd_gdbh.value = row.工单编号;
  _Gd_yjdh.value = row.印件代号;
};


//===========工单状态设置按钮=======
const onstatuslist = ref(false);
const statusformData = reactive({gdbh: '',});
const status = ref('计划中'); // 默认选择
const onStatusClick = () => {
  if(_Gd_gdbh.value === null || _Gd_gdbh.value === ''){
    onstatuslist.value = false;
    ElMessage({
      type: 'warning',
      message: '请选择树形后，再操作此功能'
    })
  }else{
    statusformData['gdbh'] = _Gd_gdbh.value;
    onstatuslist.value = true;
  }
};
//工单状态设置【放弃按钮】
const handleCancel = () => {
  onstatuslist.value = false;
};
//工单状态设置【执行按钮】
const handleConfirm = async () => {
  //工单编号
  let workOrder = statusformData['gdbh'];
  //状态
  let statusCode;
  if (status.value === '计划中') {
    statusCode = "3-计划中";
  } else if (status.value === '生产中') {
    statusCode = "2-生产中";
  }else if (status.value === '已完工') {
    statusCode = "1-已完工";
  }
  const StatusEditdata = await StatusEdit({workOrder:workOrder,status:statusCode});
  if (StatusEditdata.code === 0) {
    ElMessage({type: 'success',message: '更新成功'})
  } else {
    ElMessage({type: 'error',message: '更新失败'})
  }
  onstatuslist.value = false;
};

//=========工单打印===========
const printPageRef = ref()
const cp_gdprintonClick = () => {
  printPageRef.value.open(_Gd_gdbh.value)
}

//=========工序产量核查===========
const gd_gxclhclist = ref(false);
const gxclhc_Data = ref([]);
const gxclhc_Columns = ref(
    [
      { label: '印件及工序名称', prop: 'concatenatedData', width: '380' },
      // { label: '印件', prop: 'Gy0_yjno', width: '130' },
      // { label: '工序', prop: 'Gy0_gxh', width: '130' },
      // { label: '名称', prop: 'Gy0_gxmc', width: '130' },
      { label: '工序计划产量', prop: 'Gy0_计划接货数', width: '120' },
      { label: '联数', prop: 'Gy0_ls', width: '70' },
      { label: '折算车头产量', prop: '折算车头产量', width: '120' },
      { label: '实际上报产量', prop: 'sczl_cl', width: '120' },
      { label: '制程废品', prop: 'sczl_zcfp', width: '120' },
      { label: '制程废品率', prop: '制程废品率', width: '120' },
      { label: '来料异常', prop: '来料异常', width: '90' },
      { label: '流程单数', prop: 'process_num', width: '90' },
      { label: '当前设备', prop: 'Gy0_sbbh', width: '120' },
      { label: '工序状态', prop: 'PD_WG', width: '90'},
      { label: '首板生产日期', prop: 'sczl_rq', width: '160' },
    ]
)
const gxclhcformData = reactive({
  gdbh: '',
  gdmc: '',
});
// 工序产量核查按钮
const gd_gxclhconClick = async () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单，在进行操作'})
    return false;
  }
  gxclhcformData['gdbh'] = _Gd_gdbh.value;
  gd_gxclhclist.value = true;
  _getOrderProcessCount();
};
//工序产量核查回车
const gxclhcProductValue = async () => {
	console.log("工序产量核查回车")
  _getOrderProcessCount();
}
//工序产量核查退出
const gxclhcCancel = async () => {
  gd_gxclhclist.value = false;
};
//工序产量核查方法接口
const _getOrderProcessCount = async () => {
  const order = gxclhcformData['gdbh'];
  const getOrderProcessCount_list = await getOrderProcessCount({order:order});
  const concatenatedData = getOrderProcessCount_list.data.map(item => {
    // 优化后的代码，使用模板字符串连接字段值并在单个数字前添加零
    const formattedYjno = item.Gy0_yjno.length === 1 ? `0${item.Gy0_yjno}` : item.Gy0_yjno;
    const formattedGxh = item.Gy0_gxh.length === 1 ? `0${item.Gy0_gxh}` : item.Gy0_gxh;
    const concatenatedValue = `${formattedYjno}-${formattedGxh} ${item.Gy0_gxmc} 【${item.Add_gxmc} 】`;
    return {
      ...item,
      concatenatedData: concatenatedValue, // 使用新属性名
    };
  });
  gxclhc_Data.value = concatenatedData;
};

//工序产量核查
const gxclhcCellClass = ({row, column, rowIndex, columnIndex}) =>{
  if (column.label === '实际上报产量' ||column.label === '制程废品'  || column.label === '制程废品率' ||
      column.label === '来料异常' || column.label === '流程单数' || column.label === '当前设备') {
    return 'lan-plan-usage-lows';
  }
  if (column.label === '折算车头产量') {
    return 'gxclhc—color-column-red';
  }
  // 如果不是 'PD_WG' 列，返回空字符串或其他样式类
  if (column.label === '工序状态'){
    if(row['PD_WG'] === '完工'){
      return 'lan-plan-usage-lowshui';
    }else{
      return 'pczccolor-column-lan';
    }
  }
}
// 表格数据
const gxbgCellClass = ({row, column, rowIndex, columnIndex}) =>{
	// console.log(row)
 for (let i = 1; i <= 17; i++) {
    const key = `工序${i}`;
    if (row[key] && row[key].includes('完工') && columnIndex === i + 5) {
      return 'hui-plan-usage-lows';
    }
  }
  return 'lan-plan-usage-lows';  
}


// 搜索默认为空
const searchInfo = ref('')
//点击【查询】按钮
const onSubmit = () => {
  _department_code.value = '';
  if(searchInfo.value === ''){
    tableData.length = 0;
  }else{
	  _code.value = '';
    _workOrderDetailList();
  }
};

//获取员工信息列表
const _workOrderDetailList = async ()=>{
  let params = {}
  params.search = searchInfo.value;
  params.order = _code.value;
  // params.limit = 200;
  // params.page = 1;
    try {
    const workOrderDetaildata = await workOrderDetail(params);
    console.log(workOrderDetaildata)
    tableData.splice(0,tableData.length,...workOrderDetaildata.data);
    total.value = WorkListdata.data.total;
  } catch (error) {
    console.error(error);
  }
}

// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  _getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  page.value = 10;//默认显示
  pageSize.value = val;
  _getStaffList();
};

// 弹窗控制标记
const dialogFormVisible = ref(false)
//修改
const formDataTest = ref({})






</script>

<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-column {
  /*flex: 1;*/
  margin-right: 15px; /* 调整列之间的间距 */
}

/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
  width: 150px; /* 调整左侧输入框的宽度 */
}

:deep(.hui-plan-usage-lows  div) {
  color: #8c939d !important;
}
:deep(.lan-plan-usage-lows  div) {
  color: blue !important;
  font-weight: bold;
}



/* :deep(.hui-plan-usage-lows.column-0  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-1  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-2  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-3  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-4  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-5  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-6  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-7  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-8  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-9  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-10  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-11  div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-12 div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-13 div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-14 div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-15 div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-16 div) {
  color: #8c939d !important;
}
:deep(.hui-plan-usage-lows.column-17 div) {
  color: #8c939d !important;
}

:deep(.lan-plan-usage-lows.column-0  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-1  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-2  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-3  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-4  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-5  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-6  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-7  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-8  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-9  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-10  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-11  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-12  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-13  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-14  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-15  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-16  div) {
  color: blue !important;
  font-weight: bold;
}
:deep(.lan-plan-usage-lows.column-17  div) {
  color: blue !important;
  font-weight: bold;
} */

/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
  .form-column {
    flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
    margin-right: 0;
  }
}
/*:deep(.el-table td .cell) {*/
/*  line-height: 30px !important;*/
/*}*/
.JKWTree-container {
  display: flex;
}
.JKWTree-tree {
  /*width: 300px;*/
  background-color: #fff;
  padding: 10px;
  margin-right: 20px;
}
.JKWTree-tree h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
}
.JKWTree-content {
  flex: 1;
}
/* 图片上传 */
.upload-box {
  width: 200px;
  height: 200px;
  border: 2px dashed #e2e2e2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-icon {
  font-size: 40px;
  color: #c0c4cc;
}
.file-input {
  display: none;
}
.el-table .warning-row {
  background: oldlace;
}

/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
</style>
<style scoped>
:deep(.el-table td .cell) {
  line-height: 20px !important;
}
:deep(.el-tabs__header){
  margin-bottom: 0;
}
.search{
  margin-left: 0px !important;
  margin-right: 10px !important;
}
.bt{
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
.el-tabs__header{
  margin: 0px !important;
}
.gva-table-box{
  padding: 0px !important;
}
.mab{
  margin-bottom: 5px;
}
</style>