//此js文件是用来自定义扩展业务代码,可以扩展一些自定义页面或者重新配置生成的代码 import http from '@/api/http.js' import { h, createVNode, render, reactive, ref } from 'vue'; import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage, ElSelect, ElOption } from 'element-plus'; import gridBody from './extend/outOrderDetail.vue' import gridHeader from './extend/NoStockOut.vue' import gridFooter from './extend/EmptyTrayOutbound.vue' let extension = { components: { //查询界面扩展组件 gridHeader: gridHeader, gridBody: gridBody, gridFooter: gridFooter, //新建、编辑弹出框扩展组件 modelHeader: '', modelBody: '', modelFooter: '' }, tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写) buttons: { view: [ /* { name: '出库', type: 'primary', value: '出库', onClick: function () { // 修复:用ElMessage替代this.$message const selectedRows = this.$refs.table.getSelected(); if (selectedRows.length === 0) { ElMessage.warning('请先选择要生成任务的行'); return; } if (selectedRows.length > 1) { ElMessage.warning('只能选择一行'); return; } // 所有校验通过,触发主组件打开出库弹窗 console.log('所有校验通过,触发openOutboundDialog事件,单据数据:', selectedRows[0]); this.$emit('openOutboundDialog', { transNo: selectedRows[0].transNo, // 出库单编号 createDate: selectedRows[0].createDate || new Date().toLocaleDateString() // 出库日期 }); } }, */ // { // name: '空托盘出库', // type: 'primary', // value: '空托盘出库', // onClick: function () { // const platformOptions = Array.from({ length: 1 }, (_, i) => { // const num = 1; // return { label: `站台${num}`, value: `1-2` }; // }); // const quantityOptions = Array.from({ length: 6 }, (_, i) => ({ // label: (i + 1).toString(), // value: i + 1 // })); // const warehouseOptions = ref([]); // const isLoadingWarehouses = ref(false); // const getWarehouseList = async () => { // isLoadingWarehouses.value = true; // try { // const { data, status } = await http.post('/api/LocationInfo/GetLocationTypes'); // if (status && Array.isArray(data)) { // // 格式化仓库选项:适配ElSelect的label-value格式 // warehouseOptions.value = data.map(item => ({ // label: item.locationTypeDesc, // value: item.locationType // })); // } else { // ElMessage.error('获取区域列表失败'); // warehouseOptions.value = []; // } // } catch (err) { // ElMessage.error('区域数据请求异常,请稍后重试'); // warehouseOptions.value = []; // } finally { // isLoadingWarehouses.value = false; // } // }; // const mountNode = document.createElement('div'); // document.body.appendChild(mountNode); // const formData = reactive({ // warehouseCode: '', // palletCode: '', // selectedPlatform: platformOptions[0].value, // quantity: 1 // }); // const vnode = createVNode(ElDialog, { // title: '空托盘出库', // width: '500px', // modelValue: true, // appendToBody: true, // onOpened: async () => { // await getWarehouseList(); // const inputRef = vnode.component.refs.boxCodeInput; // inputRef?.focus(); // }, // 'onUpdate:modelValue': (isVisible) => { // if (!isVisible) { // render(null, mountNode); // document.body.removeChild(mountNode); // } // }, // style: { // padding: '20px 0', // borderRadius: '8px' // } // }, { // default: () => h(ElForm, { // model: formData, // rules: { // warehouseCode: [ // { required: true, message: '请选择区域', trigger: ['change', 'blur'] } // ], // palletCode: [ // { type: 'string', message: '料箱号必须为字符串', trigger: 'blur' } // ], // selectedPlatform: [ // { required: true, message: '请选择出库站台', trigger: 'change' } // ], // quantity: [ // { required: true, message: '请选择空箱数量', trigger: 'change' } // ] // }, // ref: 'batchOutForm', // labelWidth: '100px', // style: { // padding: '0 30px', // } // }, // [ // // h(ElFormItem, { // // label: '仓库区域', // // prop: 'warehouseCode', // // style: { // // marginBottom: '24px' // // } // // }, [ // // h(ElSelect, { // // placeholder: '请选择仓库区域', // // modelValue: formData.warehouseCode, // // 'onUpdate:modelValue': (val) => { // // formData.warehouseCode = val; // // }, // // style: { // // width: '100%', // // height: '40px', // // borderRadius: '4px', // // borderColor: '#dcdfe6' // // } // // }, warehouseOptions.value.map(platform => // // h(ElOption, { label: platform.label, value: platform.value }) // // )) // // ]), // h(ElFormItem, { // label: '出库站台', // prop: 'selectedPlatform', // style: { // marginBottom: '24px' // } // }, [ // h(ElSelect, { // placeholder: '请选择出库站台', // modelValue: formData.selectedPlatform, // 'onUpdate:modelValue': (val) => { // formData.selectedPlatform = val; // }, // style: { // width: '100%', // height: '40px', // borderRadius: '4px', // borderColor: '#dcdfe6' // } // }, platformOptions.map(platform => // h(ElOption, { label: platform.label, value: platform.value }) // )) // ]), // // h(ElFormItem,{ // // label:'出库数量', // // prop:'quantity', // // style:{ // // marginBottom:'24px' // // } // // },[h(ElSelect,{ // // placeholder:'请选择空箱数量', // // modelValue:formData.quantity, // // 'onUpdate:modelValue':(val)=>{ // // formData.quantity=val; // // }, // // style:{ // // width:'100%', // // height:'40px', // // borderRadius:'4px', // // borderColor:'#dcdfe6' // // }, // // filterable:false // // }, // // quantityOptions.map(option=> // // h(ElOption,{ // // label:option.label, // // value:option.value // // }) // // ) // // )]), // h(ElFormItem, { // label: '料箱号', // prop: 'palletCode', // style: { // marginBottom: '16px' // } // }, [ // h(ElInput, { // type: 'text', // placeholder: '可选输入料箱号,不填则自动分配空料箱', // modelValue: formData.palletCode, // 'onUpdate:modelValue': (val) => { // formData.palletCode = val; // }, // style: { // width: '100%', // height: '40px', // borderRadius: '4px', // borderColor: '#dcdfe6' // }, // attrs: { // placeholderStyle: 'color: #909399;' // } // }) // ]), // h('div', { // style: { // textAlign: 'right', // marginTop: '8px', // paddingRight: '4px' // } // }, [ // h(ElButton, { // type: 'text', // onClick: () => { // render(null, mountNode); // document.body.removeChild(mountNode); // ElMessage.info('取消出库操作'); // }, // style: { // marginRight: '8px', // color: '#606266' // } // }, '取消'), // h(ElButton, { // type: 'primary', // onClick: async () => { // const formRef = vnode.component.refs.batchOutForm; // try { // await formRef.validate(); // } catch (err) { // return; // } // http.post('/api/Task/PalletOutboundTask?palletCode=' + formData.palletCode + '&endStation=' + formData.selectedPlatform, { // }).then(({ data, status, message }) => { // if (status) { // ElMessage.success(`出库成功`); // this.refresh(); // render(null, mountNode); // document.body.removeChild(mountNode); // } else { // ElMessage.error(message || data?.message || '出库失败'); // } // }).catch(() => { // ElMessage.error('请求失败,请稍后重试'); // }); // }, // style: { // borderRadius: '4px', // padding: '8px 20px' // } // }, '确定') // ]) // ]) // }); // vnode.appContext = this.$.appContext; // render(vnode, mountNode); // } // } ], box: [], detail: [] }, //扩展的按钮 methods: { //下面这些方法可以保留也可以删除 onInit() { //扩展页面初始化操作 this.columns.push({ field: '操作', title: '操作', width: 90, fixed: 'right', align: 'center', formatter: (row) => { return ( '查看明细' ); }, click: (row) => { const table = this.$refs.table.$refs.table; if (table) { table.clearSelection(); table.toggleRowSelection(row, true); } this.$refs.gridBody.open(row); } }); let BatchOrderFeedbackToMesBtn = this.buttons.find(x => x.value == 'BatchOrderFeedbackToMes'); if (BatchOrderFeedbackToMesBtn) { const _this = this; BatchOrderFeedbackToMesBtn.onClick = function () { let selectedRows = _this.$refs.table.getSelected(); // 校验是否有选中数据 if (!selectedRows || selectedRows.length === 0) { return _this.$Message.warning('请先选择需要处理的单据'); } if (selectedRows.length > 1) { return _this.$Message.warning('请选择一条数据'); } // const requestParams = { // orderNos: selectedRows.map(row => row.orderNo), // inout: 2 // }; _this.http .post(`api/MesFeedback/OutboundFeedback?orderNo=${selectedRows[0].orderNo}`, {}, "数据处理中...") .then((x) => { if (x.status) { _this.$Message.success(x.message); _this.refresh(); } else { return _this.$Message.error(x.message); } }) .catch((error) => { // 增加异常捕获,处理网络错误等情况 //_this.$Message.error('请求失败:' + (error.message || '未知错误')); }); }; } let TaskHandCompletedBtn = this.buttons.find(x => x.value == 'NoStockOut'); if (TaskHandCompletedBtn) { TaskHandCompletedBtn.onClick = function () { this.$refs.gridHeader.open(); } } var EmptyTrayOutboundBtn = this.buttons.find(x => x.value == "EmptyTrayOutbound"); if (EmptyTrayOutboundBtn != null) { EmptyTrayOutboundBtn.onClick = () => { this.$refs.gridFooter.open(); } } let OrderOutBtn = this.buttons.find(x => x.value == 'OrderOut'); if (OrderOutBtn) { // 1. 改为箭头函数,确保this指向Vue组件实例(原普通函数this指向按钮本身) OrderOutBtn.onClick = async () => { // 现在this是Vue组件实例,能正确获取$refs let rows = this.$refs.table.getSelected(); if (rows.length == 0) return this.$error("请选择数据!"); if (rows.length > 1) return this.$error("请选择一条数据!"); // 确保选中行有id(根据实际表格数据字段调整,比如rows[0].detailId等) const selectedId = rows[0].id || rows[0].detailId; if (!selectedId) return this.$error("选中数据缺少必要ID字段!"); if(rows[0].orderStatus!=0&&rows[0].orderStatus!=1)return this.$error("该单据已经完成"); const platformOptions = [ { label: "站台2", value: "2-1" }, { label: "站台3", value: "3-1" }, ]; const mountNode = document.createElement("div"); document.body.appendChild(mountNode); const formData = reactive({ selectedPlatform: platformOptions[0].value, }); const vnode = createVNode( ElDialog, { title: "出库操作 - 选择出库站台", width: "500px", modelValue: true, appendToBody: true, "onUpdate:modelValue": (isVisible) => { if (!isVisible) { render(null, mountNode); document.body.removeChild(mountNode); } }, style: { padding: "20px 0", borderRadius: "8px", }, }, { default: () => h( ElForm, { model: formData, rules: { selectedPlatform: [ { required: true, message: "请选择出库站台", trigger: "change" }, ], }, ref: "outboundForm", // 表单ref labelWidth: "100px", style: { padding: "0 30px", }, }, [ h(ElFormItem, { label: "出库站台", prop: "selectedPlatform", style: { marginBottom: "24px", }, }, [ h(ElSelect, { placeholder: "请选择出库站台(3-12)", modelValue: formData.selectedPlatform, "onUpdate:modelValue": (val) => { formData.selectedPlatform = val; }, style: { width: "100%", height: "40px", borderRadius: "4px", borderColor: "#dcdfe6", }, }, platformOptions.map((platform) => h(ElOption, { label: platform.label, value: platform.value }) )), ]), h("div", { style: { textAlign: "right", marginTop: "8px", paddingRight: "4px", }, }, [ h(ElButton, { type: "text", onClick: () => { render(null, mountNode); document.body.removeChild(mountNode); ElMessage.info("取消出库操作"); }, style: { marginRight: "8px", color: "#606266", }, }, "取消"), h(ElButton, { type: "primary", onClick: async () => { // 2. 确保表单ref已挂载(用nextTick避免获取不到) await this.$nextTick(); const formRef = vnode.component.refs.outboundForm; if (!formRef) { ElMessage.error("表单初始化失败,请重试"); return; } try { await formRef.validate(); } catch (err) { return; } var param = rows[0].orderNo; const requestParams = { detailIds: [], outboundTargetLocation: formData.selectedPlatform, outboundQuantity: 1, operator: this.currentOperator || "admin", orderNo: param, stockDetailIds:[] }; try { const x = await this.http.post( "api/Outbound/ProcessPickingOutbound", requestParams, "数据处理中" ); if (!x.status) { ElMessage.error(x.message || "操作失败"); return; } ElMessage.success("操作成功"); this.showDetialBox = false; this.$emit("parentCall", ($vue) => { $vue.getData(); }); } catch (error) { // 5. 打开错误捕获,方便调试 console.error("出库接口请求失败:", error); ElMessage.error("请求失败,请稍后重试"); } finally { // 无论成功失败,都关闭弹窗 render(null, mountNode); document.body.removeChild(mountNode); } }, style: { borderRadius: "4px", padding: "8px 20px", }, }, "确定出库"), ]), ]), } ); vnode.appContext = this.$.appContext; render(vnode, mountNode); }; } }, onInited() { //框架初始化配置后 //如果要配置明细表,在此方法操作 //this.detailOptions.columns.forEach(column=>{ }); }, searchBefore(param) { //界面查询前,可以给param.wheres添加查询参数 //返回false,则不会执行查询 return true; }, searchAfter(result) { //查询后,result返回的查询数据,可以在显示到表格前处理表格的值 return true; }, addBefore(formData) { //新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值 return true; }, updateBefore(formData) { //编辑保存前formData为对象,包括明细表、删除行的Id return true; }, rowClick({ row, column, event }) { //查询界面点击行事件 this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行; }, modelOpenAfter(row) { if (this.currentAction === 'Add') { // 判断当前是新建操作 const currentUser = this.$store.state.userInfo?.userTrueName || 'system'; this.editFormFields.operator = currentUser; } //点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据 //(1)判断是编辑还是新建操作: this.currentAction=='Add'; //(2)给弹出框设置默认值 //(3)this.editFormFields.字段='xxx'; //如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值 //看不懂就把输出看:console.log(this.editFormOptions) } } }; export default extension;