<!-- * @Author: zwq * @Date: 2021-11-18 14:16:25 * @LastEditors: DY * @LastEditTime: 2023-11-06 17:08:22 * @Description: --> <template> <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="50%"> <small-title slot="title" :no-padding="true"> {{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }} </small-title> <div class="content"> <div> <h2>工单编码:{{ dataForm.code }}</h2> </div> <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true"> 基本信息 </small-title> <div class="formContent"> <el-row :gutter="20"> <el-col :span="8">工单名称:{{ dataForm.name }}</el-col> <el-col :span="8">工单来源:{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}</el-col> <el-col :span="8">所属订单: <span v-for="(item, index) in orderArray" :key="index" style="margin-right: 10px">{{ item.name }}</span> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">产品名称:{{ dataForm.productName }}</el-col> <el-col :span="8">规 格:{{ dataForm.specifications }}</el-col> <el-col :span="8">计划生产数量:{{ dataForm.planQuantity }}</el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">预计用时(小时):{{ dataForm.expectedTime }}</el-col> <el-col :span="8">计划投入数量:{{ dataForm.planAssignQuantity }}</el-col> <el-col :span="8">优先级:{{ fitlerP(dataForm.priority) }}</el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">负责人:{{ dataForm.workers }}</el-col> <el-col :span="8">关联产线:{{ dataForm.productLineNames }}</el-col> <el-col :span="8">物料计算方式:{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展' : '' }}</el-col> </el-row> </div> <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true"> 生产信息 </small-title> <div class="formContent"> <el-row :gutter="20"> <el-col :span="8">订单创建时间: <span v-for="(item, index) in orderArray" :key="index" style="margin-right: 10px">{{ item.createTime }}</span> </el-col> <el-col :span="8">计划开始时间:{{ dataForm.planStartTime }}</el-col> <el-col :span="8">计划完成时间:{{ dataForm.planFinishTime }}</el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">预计结束时间:{{ dataForm.computeFinishTime }}</el-col> <el-col :span="8">实际开始时间:{{ dataForm.startProduceTime }}</el-col> <el-col :span="8">实际完成时间:{{ dataForm.finishProduceTime }}</el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">工单状态:{{ fitlerS(dataForm.status) }}</el-col> <el-col :span="8">实际投入数量:{{ dataForm.assignQuantity }}</el-col> <el-col :span="8">实际生产数量:{{ dataForm.actualQuantity }}</el-col> </el-row> <el-row :gutter="20"> <el-col :span="8">废片数量:{{ dataForm.nokQuantity }}</el-col> <el-col :span="8">检测瑕疵数:{{ 0 }}</el-col> </el-row> </div> <div class="attr-list"> <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true"> 订单相关信息 </small-title> <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="orderList"> <method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn" @clickBtn="handleClick" /> </base-table> <!-- <pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" /> --> </div> <div class="attr-list"> <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true"> 预计用料信息 </small-title> <base-table :table-props="tableProps1" :page="listQuery1.pageNo" :limit="listQuery1.pageSize" :table-data="materialList" /> <!-- <pagination v-show="listQuery1.total > 0" :total="listQuery1.total" :page.sync="listQuery1.pageNo" :limit.sync="listQuery1.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" /> --> </div> <div class="drawer-body__footer"> <el-button type="primary" @click="goback()">关闭</el-button> </div> </div> </el-drawer> </template> <script> // import basicAdd from '../../core/mixins/basic-add'; import { getCoreWO, getMaterialBomPage, getConOrderList } from "@/api/base/coreWorkOrder"; import { orderList } from "@/api/base/orderManage"; import SmallTitle from './SmallTitle'; import { publicFormatter } from "@/utils/dict"; const tableBtn = [ { type: 'edit', btnName: '编辑', }, { type: 'delete', btnName: '删除', }, ]; const tableProps = [ { prop: 'orderName', label: '订单名称', }, { prop: 'orderCode', label: '订单编码', }, { prop: 'priority', label: '优先级', filter: (val) => ['', '低', '正常', '高'][val] }, { prop: 'planAssignmentQuantity', label: '计划分配数量', }, { prop: 'actualAssignmentQuantity', label: '实际分配数量', } ]; const tableProps1 = [ { prop: 'materialName', label: '原料名称' }, { prop: 'unit', label: '单位', filter: publicFormatter('unit_dict') }, { prop: 'num', label: '剩余生产预计消耗' }, ]; export default { components: { SmallTitle }, data() { return { tableBtn, tableProps, tableProps1, addOrUpdateVisible: false, urlOptions: { infoURL: getCoreWO }, listQuery: { pageSize: 10, pageNo: 1, total: 0, }, listQuery1: { pageSize: 10, pageNo: 1, total: 0, }, dataForm: {}, orderList: [], materialList: [], orderArray: [], visible: false, isdetail: false, }; }, mounted() {}, methods: { fitlerP(val) { if (val) { if (val === 1) { return '低' } else if (val === 2) { return '正常' } else { return '高' } } }, fitlerS(val) { if (val) { if (val === 1) { return '等待' } else if (val === 2) { return '激活' } else if (val === 3) { return '暂停' } else if (val === 4) { return '完成' } else { return '作废' } } }, initData() { this.orderList.splice(0); this.materialList.splice(0); }, handleClick(raw) { if (raw.type === 'delete') { this.$confirm( `确定对${ raw.data.attrName ? '[名称=' + raw.data.attrName + ']' : '[序号=' + raw.data._pageIndex + ']' }进行删除操作?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) .then(() => { deleteCoreProductAttr(raw.data.id).then(({ data }) => { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.getList(); }, }); }); }) .catch(() => {}); } else { this.addNew(raw.data.id); } }, getList() { // 获取订单列表 getConOrderList({ workOrderId: this.dataForm.id, }).then((response) => { this.orderList = response.data; // this.listQuery.total = response.data.total; }); // 获取预使用原料列表 if (this.dataForm.planProductId) { getMaterialBomPage({ productId: this.dataForm.planProductId, }).then((response) => { this.materialList = response.data; // this.listQuery.total = response.data.length; }); } // 获取订单相关信息 orderList({ workOrderId: this.dataForm.id }).then((response) => { this.orderArray = response.data; // this.listQuery.total = response.data.total; }); }, init(id, isdetail) { this.initData(); this.isdetail = isdetail || false; this.dataForm.id = id || undefined; this.visible = true; this.$nextTick(() => { if (this.dataForm.id) { // 获取工单详情 this.urlOptions.infoURL(id).then(response => { this.dataForm = response.data // 获取订单列表和用料列表 this.getList(); }); } else { if (this.urlOptions.isGetCode) { this.getCode() } } }); }, goback() { this.visible = false; this.$emit('refreshDataList'); // this.initData(); }, goEdit() { this.isdetail = false; }, // 新增 / 修改 addNew(id) { this.addOrUpdateVisible = true; this.$nextTick(() => { this.$refs.addOrUpdate.init(id); }); } } }; </script> <style scoped> .drawer >>> .el-drawer { border-radius: 8px 0 0 8px; display: flex; flex-direction: column; } .drawer >>> .el-form-item__label { padding: 0; } .drawer >>> .el-drawer__header { margin: 0; padding: 32px 32px 24px; border-bottom: 1px solid #dcdfe6; } .drawer >>> .el-drawer__body { flex: 1; height: 1px; display: flex; flex-direction: column; } .drawer >>> .content { padding: 10px 24px; flex: 1; display: flex; flex-direction: column; /* height: 100%; */ } .drawer >>> .visual-part { flex: 1 auto; max-height: 76vh; overflow: hidden; overflow-y: scroll; padding-right: 10px; /* 调整滚动条样式 */ } .drawer >>> .el-form, .drawer >>> .attr-list { padding: 0 16px; } .drawer-body__footer { display: flex; justify-content: flex-end; padding: 18px; } .formContent { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .action_btn { float: right; margin: 5px 15px; font-size: 14px; } .add { color: #0b58ff; } </style>