| <template> | 
|   <div class="app-container"> | 
|     <!-- <el-row :gutter="20"> | 
|       <el-col> | 
|         <el-form | 
|           :model="queryParams" | 
|           ref="queryRef" | 
|           :inline="true" | 
|           v-show="showSearch" | 
|           label-width="90px" | 
|         > | 
|           <el-row :gutter="20"> | 
|             <el-col :span="12"> | 
|               <el-form-item label="工单号" prop="num"> | 
|                 <el-input | 
|                   v-model="queryParams.workOrderNo" | 
|                   placeholder="请输入钣金计划工单号" | 
|                   clearable | 
|                   @keyup.enter="handleQuery" | 
|                 /> | 
|               </el-form-item> | 
|             </el-col> | 
|             <el-col :span="12" style="text-align: right"> | 
|               <el-form-item> | 
|                 <el-button type="primary" icon="Search" @click="handleQuery" | 
|                   >搜索</el-button | 
|                 > | 
|                 <el-button icon="Refresh" @click="resetQuery">重置</el-button> | 
|               </el-form-item> | 
|             </el-col> | 
|           </el-row> | 
|         </el-form> | 
|       </el-col> | 
|     </el-row> --> | 
|     <el-row :gutter="10" class="mb8"> | 
|       <el-col :span="1.5"> | 
|         <el-button | 
|           type="warning" | 
|           plain | 
|           icon="Download" | 
|           @click="handleExport" | 
|           v-hasPermi="['plateProcessShopStat:export']" | 
|           >导出</el-button | 
|         > | 
|       </el-col> | 
|       <el-col :span="1.5"> | 
|         <el-button | 
|           type="success" | 
|           plain | 
|           icon="Edit" | 
|           @click="handleUpdate" | 
|           v-hasPermi="['apsPlateProcessStat:edit']" | 
|           >更新</el-button | 
|         > | 
|       </el-col> | 
|   | 
|       <right-toolbar | 
|         v-model:showSearch="showSearch" | 
|         @queryTable="getList" | 
|       ></right-toolbar> | 
|     </el-row> | 
|   | 
|     <HxlhTable | 
|       style="width: 100%" | 
|       ref="xGrid" | 
|       :key="columnsVersion" | 
|       :columns="columns" | 
|       :data="aps_plate_process_statList" | 
|       :loading="loading" | 
|       :height="height" | 
|     > | 
|     </HxlhTable> | 
|     <!-- 添加或修改钣金统计对话框 --> | 
|     <el-dialog :title="title" v-model="open" width="500px" append-to-body> | 
|       <el-form | 
|         ref="aps_plate_process_statRef" | 
|         :model="form" | 
|         :rules="rules" | 
|         label-width="80px" | 
|       > | 
|         <el-form-item label="排序" prop="num"> | 
|           <el-input v-model="form.num" placeholder="请输入排序" /> | 
|         </el-form-item> | 
|         <el-form-item label="生产数量" prop="productionQuantity"> | 
|           <el-input | 
|             v-model="form.productionQuantity" | 
|             placeholder="请输入生产数量" | 
|           /> | 
|         </el-form-item> | 
|         <el-form-item label="标准工时" prop="standardTime"> | 
|           <el-input v-model="form.standardTime" placeholder="请输入标准工时" /> | 
|         </el-form-item> | 
|         <el-form-item label="工序总工时" prop="processTotalTime"> | 
|           <el-input | 
|             v-model="form.processTotalTime" | 
|             placeholder="请输入工序总工时" | 
|           /> | 
|         </el-form-item> | 
|         <el-form-item label="设计工时" prop="designTimes"> | 
|           <el-input v-model="form.designTimes" placeholder="请输入设计工时" /> | 
|         </el-form-item> | 
|       </el-form> | 
|       <template #footer> | 
|         <div class="dialog-footer"> | 
|           <el-button type="primary" @click="submitForm">确 定</el-button> | 
|           <el-button @click="cancel">取 消</el-button> | 
|         </div> | 
|       </template> | 
|     </el-dialog> | 
|   </div> | 
| </template> | 
|   | 
| <script setup name="Aps_plate_process_stat"> | 
| import { listApsPlateProcessShopStat, listApsPlateProcessShopStatUpdate } from "@/api/mainPlan/apsPlatePlanList"; | 
| import HxlhTable from "@/components/HxlhTable/index.vue"; | 
| import { getToken } from "@/utils/auth"; | 
| import { nextTick, onMounted, ref } from "vue"; | 
| import { ElMessage } from "element-plus"; | 
| const { proxy } = getCurrentInstance(); | 
|   | 
| const aps_plate_process_statList = ref([]); | 
| const dynamicList = ref([]); | 
| const generateColumnList = ref([]); | 
| const open = ref(false); | 
| const loading = ref(true); | 
| const showSearch = ref(true); | 
| const single = ref(true); | 
| const multiple = ref(true); | 
| const total = ref(0); | 
| const title = ref(""); | 
| const height = ref(document.documentElement.clientHeight - 270 + "px;"); | 
| const columnsVersion = ref(0); | 
| const data = reactive({ | 
|   // form: {}, | 
|   // queryParams: { | 
|   //   pageNum: 1, | 
|   //   pageSize: 10, | 
|   //   workOrderNo: null, | 
|   //   processName: null, | 
|   //   num: null, | 
|   //   routeProcessNumber: null, | 
|   //   currentProcessNumber: null, | 
|   //   productionQuantity: null, | 
|   //   standardTime: null, | 
|   //   processTotalTime: null, | 
|   //   processPlanEndDay: null, | 
|   //   computePlanEndDay: null, | 
|   //   designTimes: null, | 
|   //   batchNumber: null, | 
|   // }, | 
|   // rules: {}, | 
| }); | 
| const xGrid = ref(); | 
| const { queryParams, form, rules } = toRefs(data); | 
|   | 
| // 表格配置 | 
| const columns = ref([ | 
|   /*  { type: 'seq', title: '序号', width: 60 },*/ | 
|   { | 
|     title: "主件料号", | 
|     field: "mainPartNumber", | 
|     width: 150, | 
|   }, | 
|   { | 
|     title: "业务类型", | 
|     field: "businessType", | 
|     width: 150, | 
|   }, | 
|   { | 
|     title: "单据号", | 
|     field: "documentNumber", | 
|     width: 200, | 
|   }, | 
|   { | 
|     title: "当前工序号", | 
|     field: "currentProcessNumberTxt", | 
|     width: 150, | 
|   }, | 
|   { | 
|     title: "需求分类", | 
|     field: "requirementType", | 
|     width: 100, | 
|   }, | 
|   { | 
|     title: "单据状态", | 
|     field: "documentStatus", | 
|     width: 100, | 
|   }, | 
|   { | 
|     title: "当前工序", | 
|     field: "workCenter", | 
|     width: 200, | 
|   }, | 
|   { | 
|     title: "计划开工日", | 
|     field: "processPlanStartDaytxt", | 
|     width: 200, | 
|     type: "html", | 
|   }, | 
|   { | 
|     title: "料号", | 
|     field: "itemNumber", | 
|     width: 150, | 
|     type: "html", | 
|   }, | 
|   { | 
|     title: "图号", | 
|     field: "drawingNo", | 
|     width: 150, | 
|     // format: 'YYYY-MM-DD' | 
|   }, | 
|   { | 
|     title: "版本号", | 
|     field: "versionNumber", | 
|     width: 100, | 
|     type: "html", | 
|   }, | 
|   { | 
|     title: "生产数量", | 
|     field: "productionQuantity", | 
|     width: 100, | 
|     type: "html", | 
|   }, | 
|   { | 
|     title: "计划完工日", | 
|     field: "planEndDay", | 
|     width: 150, | 
|     format: "YYYY-MM-DD hh:mm:ss", | 
|   }, | 
| ]); | 
|   | 
| /** 查询钣金统计列表 */ | 
| async function getList() { | 
|   loading.value = true; | 
|   const response = await listApsPlateProcessShopStat(); | 
|   const listValue = response.data; | 
|   const resData = listValue.map((item,index)=>{ | 
|     item.deptPlans.map((n, i) => { | 
|         item[`${i}_startDate`] = n.planStartDate | 
|         item[`${i}_endDate`] = n.planEndDate  | 
|     }); | 
|     return  { | 
|       ...item | 
|     } | 
|   }) | 
|   console.log(resData,'resDataresDataresData') | 
|   dynamicList.value = response.shopNames; | 
|   aps_plate_process_statList.value = listValue; | 
|   total.value = response.total; | 
|   loading.value = false; | 
|   await nextTick(); | 
|   const newArray = dynamicList.value.flatMap((item, index) => [ | 
|     { | 
|       title: `${item}开始时间`, | 
|       field:`${index}_startDate`, | 
|       width: 140, | 
|       formatter: ({ cellValue, row, column }) => { | 
|         let dateStr = ""; | 
|         if (cellValue) { | 
|           row.deptPlans.map((n, i) => { | 
|             if (item === n.shopName) { | 
|               // console.log( | 
|               //   item, | 
|               //   n.shopName, | 
|               //   n.planStartDate, | 
|               //   `${item}开始时间`, | 
|               //   "planStartDate" | 
|               // ); | 
|               dateStr =  n.planStartDate; | 
|             } | 
|           }); | 
|         } | 
|         return dateStr | 
|       }, | 
|     }, | 
|     { | 
|       title: `${item}结束时间`, | 
|       field:`${index}_endDate`, | 
|       width: 140, | 
|       formatter: ({ cellValue, row, column }) => { | 
|         let dateStr = ""; | 
|         if (cellValue) { | 
|           row.deptPlans.map((n, i) => { | 
|             if (item === n.shopName) { | 
|               // console.log( | 
|               //   item, | 
|               //   n.shopName, | 
|               //   n.planStartDate, | 
|               //   `${item}开始时间`, | 
|               //   "planStartDate" | 
|               // ); | 
|               dateStr =  n.planEndDate; | 
|             } | 
|           }); | 
|         } | 
|         return dateStr | 
|       }, | 
|     }, | 
|   ]); | 
|   await nextTick(); | 
|   columns.value = [...columns.value, ...newArray];              // 强制组件重新渲染 | 
|    | 
| } | 
|   | 
| // // 取消按钮 | 
| // function cancel() { | 
| //   open.value = false; | 
| //   reset(); | 
| // } | 
|   | 
| // // 表单重置 | 
| // function reset() { | 
| //   form.value = { | 
| //     id: null, | 
| //     workOrderNo: null, | 
| //     processName: null, | 
| //     num: null, | 
| //     routeProcessNumber: null, | 
| //     currentProcessNumber: null, | 
| //     productionQuantity: null, | 
| //     standardTime: null, | 
| //     processTotalTime: null, | 
| //     processPlanEndDay: null, | 
| //     computePlanEndDay: null, | 
| //     designTimes: null, | 
| //     batchNumber: null, | 
| //     createBy: null, | 
| //     delFlag: null, | 
| //   }; | 
| //   proxy.resetForm("aps_plate_process_statRef"); | 
| // } | 
|   | 
| // /** 搜索按钮操作 */ | 
| // function handleQuery() { | 
| //   queryParams.value.pageNum = 1; | 
| //   getList(); | 
| // } | 
|   | 
| /** 重置按钮操作 */ | 
| // function resetQuery() { | 
| //   queryParams.value.workOrderNo = ""; | 
| //   proxy.resetForm("queryRef"); | 
| //   handleQuery(); | 
| // } | 
|   | 
| // 多选框选中数据 | 
| // function handleSelectionChange(selection) { | 
| //   ids.value = selection.map((item) => item.id); | 
| //   single.value = selection.length != 1; | 
| //   multiple.value = !selection.length; | 
| // } | 
|   | 
| // /** 新增按钮操作 */ | 
| // function handleAdd() { | 
| //   reset(); | 
| //   open.value = true; | 
| //   title.value = "添加钣金统计"; | 
| // } | 
|   | 
| /** 修改按钮操作 */ | 
| function handleUpdate(row) { | 
|   listApsPlateProcessShopStatUpdate().then((response) => { | 
|     // form.value = response.data; | 
|     ElMessage({ | 
|       message: "数据更新成功", | 
|       type: "success", | 
|     }); | 
|     getList(); | 
|   }); | 
| } | 
| /** 导出按钮操作 */ | 
| function handleExport() { | 
|   proxy.download( | 
|     "/aps/plateProcessShopStat/export", | 
|     // { | 
|     //   ...queryParams.value, | 
|     // }, | 
|     `aps_plate_process_shop_stat_${new Date().getTime()}.xlsx` | 
|   ); | 
| } | 
| getList(); | 
| // onMounted(async () => { | 
| // | 
| // }); | 
| </script> | 
| <style lang="scss" scoped> | 
| ::v-deep(.mytable-style.vxe-table .vxe-body--row.row-green) { | 
|   background-color: #187; | 
|   color: #fff; | 
| } | 
| ::v-deep(.mytable-style.vxe-table .vxe-header--column.col-blue) { | 
|   background-color: #2db7f5; | 
|   color: #fff; | 
| } | 
| ::v-deep(.mytable-style.vxe-table .vxe-body--column.col-red) { | 
|   background-color: red; | 
|   color: #fff; | 
| } | 
| </style> |