| <template> | 
|   <div class="app-container"> | 
|     <!-- <el-col> --> | 
|     <el-form | 
|       :model="queryParams" | 
|       ref="queryRef" | 
|       :inline="true" | 
|       v-show="showSearch" | 
|       label-position="left" | 
|     > | 
|       <el-row :gutter="20"> | 
|         <el-col :span="8"> | 
|           <el-form-item :style="{ width: '100%'  }" :label="$t('plan.query.workOrderNo')" prop="num"> | 
|             <el-input | 
|               v-model="queryParams.workOrderNo" | 
|               :placeholder="`${$t('common.common.placeholder')}${$t( | 
|                 'plan.query.workOrderNo' | 
|               )}`" | 
|               clearable | 
|               @keyup.enter="handleQuery" | 
|             /> | 
|           </el-form-item> | 
|         </el-col> | 
|         <el-col :span="16" style="text-align: right"> | 
|           <el-form-item class="column-with-margin"> | 
|             <el-button type="primary" icon="Search" @click="handleQuery">{{ | 
|               $t("common.common.query") | 
|             }}</el-button> | 
|             <el-button icon="Refresh" @click="resetQuery">{{ | 
|               $t("common.common.reset") | 
|             }}</el-button> | 
|           </el-form-item> | 
|         </el-col> | 
|       </el-row> | 
|     </el-form> | 
|     <el-row :gutter="10" class="mb8"> | 
|       <el-col :span="1.5"> | 
|         <el-button | 
|           type="warning" | 
|           plain | 
|           icon="Download" | 
|           @click="handleExport" | 
|           v-hasPermi="['apsPlateProcessStat: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="['apsPlateProcessStat:edit']" | 
|           >{{ $t("common.common.update") }}</el-button | 
|         > | 
|       </el-col> | 
|   | 
|       <right-toolbar | 
|         v-model:showSearch="showSearch" | 
|         @queryTable="getList" | 
|       ></right-toolbar> | 
|     </el-row> | 
|   | 
|     <HxlhTable | 
|       style="width: 100%" | 
|       :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 { listPlateStat, updateStat } from "@/api/mainPlan/plateProcessStat"; | 
| import HxlhTable from "@/components/HxlhTable/index.vue"; | 
| import { getToken } from "@/utils/auth"; | 
| import { ref } from "vue"; | 
| // import { ElMessage } from "element-plus"; | 
| const { proxy } = getCurrentInstance(); | 
| import { useI18n } from "vue-i18n"; //要在js中使用国际化 | 
| const { t, locale } = useI18n(); | 
| const aps_plate_process_statList = 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 - 220 + "px;"); | 
|   | 
| 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 { queryParams, rules } = toRefs(data); // form | 
|   | 
| // 表格配置 | 
| const columns = ref([]); | 
|   | 
| watch( | 
|   locale, | 
|   (newLocale) => { | 
|     columns.value = [ | 
|       /*  { type: 'seq', title: '序号', width: 60 },*/ | 
|       { | 
|         title: t("plan.table.workOrderNo"), | 
|         field: "workOrderNo", | 
|         width: "180" | 
|       }, | 
|       { | 
|         title: t("plan.table.processName"), | 
|         field: "processName", | 
|         width: "auto", | 
|       }, | 
|       { | 
|         title: t("plan.table.processNumber"), | 
|         field: "routeProcessNumberTxt", | 
|         width: "auto", | 
|       }, | 
|       { | 
|         title: t("plan.table.currentProcessNumber"), | 
|         field: "currentProcessNumberTxt", | 
|         width: "auto", | 
|       }, | 
|       { | 
|         title: t("plan.table.productionQuantity"), | 
|         field: "productionQuantity", | 
|         width: "auto", | 
|       }, | 
|       { | 
|         title: t("plan.table.standardTime"), | 
|         field: "standardTime", | 
|         width: 100, | 
|       }, | 
|       { | 
|         title: t("plan.table.totalWorkingHoursOfProcess"), | 
|         field: "processTotalTime", | 
|         width: 100, | 
|       }, | 
|       { | 
|         title: t("plan.table.planStartDay"), | 
|         field: "processPlanStartDaytxt", | 
|         width: 160, | 
|         type: "html", | 
|       }, | 
|       { | 
|         title: t("plan.table.planEndDayDate"), | 
|         field: "processPlanEndDaytxt", | 
|         width: 160, | 
|         type: "html", | 
|       }, | 
|       { | 
|         title: t("plan.table.OrderCompletionDate"), | 
|         field: "orderPlanEndDay", | 
|         width: 160, | 
|         format: "YYYY-MM-DD HH:mm:ss", | 
|       }, | 
|       { | 
|         title: t("plan.table.abnormalState"), | 
|         field: "exceptionStatus", | 
|         width: "auto", | 
|       } | 
|     ]; | 
|   }, | 
|   { immediate: true, deep: true } | 
| ); | 
|   | 
| /** 查询钣金统计列表 */ | 
| function getList() { | 
|   loading.value = true; | 
|   listPlateStat(queryParams.value).then((response) => { | 
|     const listValue = response.rows; | 
|     listValue.forEach((listItem) => { | 
|       listItem[`processPlanStartDaytxt`] = listItem.warning | 
|         ? `<font color="red">${listItem.processPlanStartDay}</font>` | 
|         : listItem.processPlanStartDay; | 
|       listItem[`processPlanEndDaytxt`] = listItem.warning | 
|         ? `<font color="red">${listItem.processPlanEndDay}</font>` | 
|         : listItem.processPlanEndDay; | 
|       listItem[`routeProcessNumberTxt`] = listItem.routeProcessNumber | 
|         .toString() | 
|         .padStart(3, "0"); | 
|       listItem[`currentProcessNumberTxt`] = listItem.currentProcessNumber | 
|         .toString() | 
|         .padStart(3, "0"); | 
|     }); | 
|     aps_plate_process_statList.value = listValue; | 
|     console.log(aps_plate_process_statList.value,"aps_plate_process_statList.value") | 
|     total.value = response.total; | 
|     loading.value = false; | 
|   }); | 
| } | 
|   | 
| // // 取消按钮 | 
| // 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) { | 
|   // reset(); | 
|   loading.value = true; | 
|   updateStat().then((response) => { | 
|     // form.value = response.data; | 
|     loading.value = false; | 
|     ElMessage({ | 
|       message: t("plan.message.update"), | 
|       type: "success", | 
|     }); | 
|     getList(); | 
|   }); | 
| } | 
|   | 
| /** 提交按钮 */ | 
| // function submitForm() { | 
| //   proxy.$refs["aps_plate_process_statRef"].validate((valid) => { | 
| //     if (valid) { | 
| //       if (form.value.id != null) { | 
| //         updateAps_plate_process_stat(form.value).then((response) => { | 
| //           proxy.$modal.msgSuccess("修改成功"); | 
| //           open.value = false; | 
| //           getList(); | 
| //         }); | 
| //       } else { | 
| //         addAps_plate_process_stat(form.value).then((response) => { | 
| //           proxy.$modal.msgSuccess("新增成功"); | 
| //           open.value = false; | 
| //           getList(); | 
| //         }); | 
| //       } | 
| //     } | 
| //   }); | 
| // } | 
|   | 
| /** 删除按钮操作 */ | 
| // function handleDelete(row) { | 
| //   const _ids = row.id || ids.value; | 
| //   proxy.$modal | 
| //     .confirm('是否确认删除钣金统计编号为"' + _ids + '"的数据项?') | 
| //     .then(function () { | 
| //       return delAps_plate_process_stat(_ids); | 
| //     }) | 
| //     .then(() => { | 
| //       getList(); | 
| //       proxy.$modal.msgSuccess("删除成功"); | 
| //     }) | 
| //     .catch(() => {}); | 
| // } | 
|   | 
| /** 导出按钮操作 */ | 
| function handleExport() { | 
|   proxy.download( | 
|     "/aps/plateProcessStat/export", | 
|     { | 
|       ...queryParams.value, | 
|     }, | 
|     `aps_plate_process_stat_${new Date().getTime()}.xlsx` | 
|   ); | 
| } | 
| // const headerCellClassName = ({ column }) => { | 
| //   if (column.field === "name") { | 
| //     return "col-blue"; | 
| //   } | 
| //   return null; | 
| // }; | 
| // const rowClassName = ({ rowIndex }) => { | 
| //   if ([2, 3, 5].includes(rowIndex)) { | 
| //     return "row-green"; | 
| //   } | 
| //   return null; | 
| // }; | 
| // const cellClassName = ({ row, column }) => { | 
| //   if ( | 
| //     column.field === "processPlanStartDay" || | 
| //     column.field === "processPlanEndDay" | 
| //   ) { | 
| //     if (row.warning) { | 
| //       return "col-orange"; | 
| //     } | 
| //   } | 
| //   return null; | 
| // }; | 
| // getList(); | 
| </script> | 
| <style lang="scss" scoped> | 
| .column-with-margin { | 
|   margin-right: 0px; | 
| } | 
| ::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> |