| <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="['apsPlateProcessStat: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%" | 
|         :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(); | 
|   | 
| const aps_plate_process_statList = 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 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, form, rules } = toRefs(data); | 
|   | 
|   | 
| // 表格配置 | 
| const columns = ref([ | 
| /*  { type: 'seq', title: '序号', width: 60 },*/ | 
|   { | 
|     title: '工单号', | 
|     field: 'workOrderNo', | 
|     width: 150, | 
|   } , | 
|   { | 
|     title: '工序名称', | 
|     field: 'processName', | 
|   }, | 
|   { | 
|     title: '工序号', | 
|     field: 'routeProcessNumberTxt', | 
|     width: 100, | 
|   }, | 
|   { | 
|     title: '当前工序号', | 
|     field: 'currentProcessNumberTxt', | 
|     width: 100, | 
|   }, | 
|   { | 
|     title: '生产数量', | 
|     field: 'productionQuantity', | 
|     width: 80, | 
|   }, | 
|   { | 
|     title: '标准工时', | 
|     field: 'standardTime', | 
|     width: 80, | 
|   }, | 
|   { | 
|     title: '工序总工时', | 
|     field: 'processTotalTime', | 
|     width: 80, | 
|   | 
|   }, | 
|   { | 
|     title: '计划开工日', | 
|     field: 'processPlanStartDaytxt', | 
|     width: 140, | 
|     type:'html' | 
|   }, | 
|   { | 
|     title: '计划完工日', | 
|     field: 'processPlanEndDaytxt', | 
|     width: 140, | 
|     type:'html' | 
|   }, | 
|   { | 
|     title: '订单完工日', | 
|     field: 'orderPlanEndDay', | 
|     width: 120, | 
|     format: 'YYYY-MM-DD' | 
|   } | 
| ]); | 
|   | 
|   | 
|   | 
| /** 查询钣金统计列表 */ | 
| 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 | 
|     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(); | 
|   updateStat().then(response => { | 
|     form.value = response.data; | 
|     ElMessage({ | 
|       message: '数据更新成功', | 
|       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> | 
| ::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> |