| <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']" | 
|           >{{ $t(`common.common.export`) }}</el-button | 
|         > | 
|       </el-col> | 
|       <el-col :span="1.5"> | 
|         <el-button | 
|           type="success" | 
|           plain | 
|           icon="Refresh" | 
|           @click="handleUpdate" | 
|           :disabled="loading" | 
|           v-hasPermi="['plateProcessShopStat:update']" | 
|           >{{ $t(`common.common.update`) }}</el-button | 
|         > | 
|       </el-col> | 
|   | 
|       <right-toolbar :search="false" @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="ApsPlatePlanList"> | 
| 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"; | 
| import { useI18n } from "vue-i18n"; //要在js中使用国际化 | 
| // import i18n from "@/utils/i18n"; | 
| // const t = i18n.global.t | 
| const { t, locale } = useI18n(); | 
| const { proxy } = getCurrentInstance(); | 
| // console.log(proxy.$i18n.locale, "indexPlanList"); | 
| const aps_plate_process_statList = ref([]); | 
| const dynamicList = ref([]); | 
| const generateColumnList = ref([]); | 
| const open = ref(false); | 
| const loading = ref(false); | 
| 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 - 180 + "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 columns = ref([]); | 
| const xGrid = ref(); | 
| const { queryParams, form, rules } = toRefs(data); | 
| watch(locale, (newLocale) => { | 
|   // 重新获取翻译文本 | 
|   // 表格配置 | 
|   columns.value = [ | 
|     /*  { type: 'seq', title: '序号', width: 60 },*/ | 
|     { | 
|       title: t("plan.table.mainPartCustomer"), | 
|       field: "customer", | 
|       width: "200", | 
|       fixed: "left", | 
|     }, | 
|     { | 
|       title: t("plan.table.mainPartNumber"), | 
|       field: "mainPartNumber", | 
|       width: "120", | 
|       fixed: "left", | 
|     }, | 
|     { | 
|       title: t("plan.table.businessType"), | 
|       field: "businessType", | 
|       width: "auto", | 
|       fixed: "left", | 
|     }, | 
|     { | 
|       title: t("plan.table.documentNumber"), | 
|       field: "documentNumber", | 
|       width: "180", | 
|       fixed: "left", | 
|     }, | 
|     { | 
|       title: t("plan.table.requirementType"), | 
|       field: "requirementType", | 
|       width: "auto", | 
|       fixed: "left", | 
|     }, | 
|     { | 
|       title: t("plan.table.documentStatus"), | 
|       field: "documentStatus", | 
|       width: "auto", | 
|       fixed: "left", | 
|     }, | 
|     // { | 
|     //   title: t("plan.table.updateBy"), | 
|     //   field: "updateBy", | 
|     //   width: "auto", | 
|     // }, | 
|     { | 
|       title: t("plan.table.workCenter"), | 
|       field: "workCenter", | 
|       width: "180", | 
|     }, | 
|     { | 
|       title: t("plan.table.department"), | 
|       field: "department", | 
|       width: "auto", | 
|     }, | 
|     { | 
|       title: t("plan.table.opStatus"), | 
|       field: "opStatus", | 
|       width: "auto", | 
|     }, | 
|     { | 
|       title: t("plan.table.nextOpName"), | 
|       field: "nextOpName", | 
|       width: "auto", | 
|     }, | 
|     { | 
|       title: t("plan.table.nextProcessDeparment"), | 
|       field: "nextProcessDeparment", | 
|       width: "auto", | 
|     }, | 
|     { | 
|       title: t("plan.table.itemNumber"), | 
|       field: "itemNumber", | 
|       width: "auto", | 
|       type: "html", | 
|     }, | 
|     { | 
|       title: t("plan.table.drawingNo"), | 
|       field: "drawingNo", | 
|       width: "auto", | 
|       // format: 'YYYY-MM-DD' | 
|     }, | 
|     { | 
|       title: t("plan.table.versionNumber"), | 
|       field: "versionNumber", | 
|       width: "auto", | 
|       type: "html", | 
|     }, | 
|     { | 
|       title: t("plan.table.cheaperCode"), | 
|       field: "lowOrderCode", | 
|       width: "auto", | 
|     }, | 
|     { | 
|       title: t("plan.table.productionQuantity"), | 
|       field: "productionQuantity", | 
|       width: "auto", | 
|       type: "html", | 
|     }, | 
|     { | 
|       title: t("plan.table.workorderCreationTime"), | 
|       field: "orderCreateTime", | 
|       width: "160", | 
|     }, | 
|     { | 
|       title: t("plan.table.workOrderReviewTime"), | 
|       field: "approveOn", | 
|       width: "160", | 
|     }, | 
|     { | 
|       title: t("plan.table.workOrderStartTime"), | 
|       field: "startWorkDate", | 
|       width: "auto", | 
|     }, | 
|     // { | 
|     //   title: t("plan.table.planworkOrderTime"), | 
|     //   field: "planworkOrderTime", | 
|     //   width: 200, | 
|     // }, | 
|     { | 
|       title: t("plan.table.planEndDay"), | 
|       field: "planEndDay", | 
|       width: "auto", | 
|       format: "YYYY-MM-DD hh:mm:ss", | 
|     }, | 
|   ] | 
| },{immediate:true, deep:true}); | 
| /** 查询钣金统计列表 */ | 
| async function getList() { | 
|   loading.value = true; | 
|   const response = await listApsPlateProcessShopStat(); | 
|   let listValue = response.data; | 
|   dynamicList.value = response.shopNames; | 
|   aps_plate_process_statList.value = listValue; | 
|   console.log(aps_plate_process_statList.value,"aps_plate_process_statList") | 
|   total.value = response.total; | 
|   loading.value = false; | 
|   await nextTick(); | 
|   aps_plate_process_statList.value = aps_plate_process_statList.value.map( | 
|     (item, index) => { | 
|       item.deptPlans.map((n, i) => { | 
|         item[`${i}_startDate`] = n.planStartDate; | 
|         item[`${i}_endDate`] = n.planEndDate; | 
|       }); | 
|       return { | 
|         ...item, | 
|       }; | 
|     } | 
|   ); | 
|   let newArray = []; | 
|   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; | 
|       }, | 
|     }, | 
|   ]); | 
|   // newArray.splice(2, 0, { | 
|   //   title: "焊接件齐套开始时间", | 
|   //   field: "hanjie_startDate", | 
|   //   width: 140, | 
|   // }); | 
|   columns.value = [ | 
|     ...columns.value, | 
|     ...newArray.filter( | 
|       (item) => !columns.value.some((col) => col.field === item.field) | 
|     ), | 
|   ]; | 
|    | 
|   // columns.value = columns.value | 
| } | 
|   | 
| // // 取消按钮 | 
| // 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) { | 
|   loading.value = true; | 
|   listApsPlateProcessShopStatUpdate().then((response) => { | 
|     // form.value = response.data; | 
|     ElMessage({ | 
|       message: t("plan.message.update"), | 
|       type: "success", | 
|     }); | 
|     loading.value = false; | 
|     getList(); | 
|   }); | 
| } | 
| /** 导出按钮操作 */ | 
| function handleExport() { | 
|   proxy.download( | 
|     "/aps/plateProcessShopStat/export", | 
|     {}, | 
|     `aps_plate_plan_list_${new Date().getTime()}.xlsx` | 
|   ); | 
| } | 
| getList(); | 
| // onMounted(async () => { | 
| //   await nextTick(); | 
|    | 
| // }); | 
| </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> |