From 8ef8d32e194d44c51dd460014e05f063b73fa5de Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 31 Mar 2023 17:08:49 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8F=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DialogJustForm.vue | 103 ++++++++++++++++-- .../pms/qualityInspectionRecord/config.js | 75 ++++++++----- 2 files changed, 144 insertions(+), 34 deletions(-) diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue index 0a89dce..59f1f65 100644 --- a/src/components/DialogJustForm.vue +++ b/src/components/DialogJustForm.vue @@ -33,6 +33,9 @@ :disabled="detailMode" v-bind="col.elparams" > + + + { row.forEach((col) => { @@ -147,11 +152,15 @@ export default { savedDatalist[col.prop] = []; } - if (col.fetchData) + if (col.fetchData && typeof col.fetchData === "function") { col.fetchData().then(({ data: res }) => { - console.log("[DialogJustForm fetchData -->]", res.data.list); if (res.code === 0) { if ("list" in res.data) { + if ("injectTo" in col) { + // 保存完整的数据列表 + cachedList[col.prop] = res.data.list; + } + this.$set( col, "options", @@ -165,6 +174,10 @@ export default { this.$set(savedDatalist, col.prop, res.data.list); } } else if (Array.isArray(res.data)) { + if ("injectTo" in col) { + // 保存完整的数据列表 + cachedList[col.prop] = res.data; + } this.$set( col, "options", @@ -183,7 +196,7 @@ export default { } // dataForm[col.prop] = col.default ?? null; // not perfect! }); - else if (col.fetchTreeData) { + } else if (col.fetchTreeData && typeof col.fetchTreeData === "function") { // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点 col.fetchTreeData().then(({ data: res }) => { console.log("[DialogJustForm fetchTreeData -->]", res.data); @@ -205,6 +218,8 @@ export default { dataForm, shadowDataForm, savedDatalist, + cachedList, + watchList, detailMode: false, baseDialogConfig: null, defaultQuillConfig: { @@ -232,8 +247,83 @@ export default { }, }; }, - created() { - // console.log('[dialog] created!!! wouldn\'t create again...') + mounted() { + /** 处理 injectTo 选项 */ + this.configs.form.rows.forEach((row) => { + row.forEach((col) => { + if ("injectTo" in col && Array.isArray(col.injectTo)) { + const valueProp = "optionValue" in col ? col.optionValue : "id"; + const unwatch = this.$watch( + () => this.dataForm[col.prop], + (newVal) => { + const chosenObject = this.cachedList[col.prop].find((i) => i[valueProp] === newVal); + if (chosenObject) { + // 如果找到了 + col.injectTo.map((item) => { + console.log("[setting ---> ]:", item[1], "to", `dataForm[${item[0]}]`); + this.$set(this.dataForm, item[0], chosenObject[item[1]]); + this.$forceUpdate(); + }); + } else { + console.log("DialogJustForm mounted(): 没有找到 injectTo 关联的对象"); + } + }, + { + immediate: false, + } + ); + this.watchList.push(unwatch); + } + + if ("toggleFetchData" in col) { + const unwatch = this.$watch( + () => this.dataForm[col.toggleFetchData], + (carId) => { + col.fetchData(carId).then(({ data: res }) => { + if (res.code === 0) { + if ("list" in res.data) { + if ("injectTo" in col) this.$set(this.cachedList, col.prop, res.data.list); + this.$set( + col, + "options", + res.data.list.map((i) => ({ + label: col.optionLabel ? i[col.optionLabel] : i.name, + value: col.optionValue ? i[col.optionValue] : i.id, + })) + ); + + if ("autoUpdateProp" in col) { + this.$set(savedDatalist, col.prop, res.data.list); + } + } else if (Array.isArray(res.data)) { + if ("injectTo" in col) this.$set(this.cachedList, col.prop, res.data); + this.$set( + col, + "options", + res.data.map((i) => ({ + label: col.optionLabel ? i[col.optionLabel] : i.name, + value: col.optionValue ? i[col.optionValue] : i.id, + })) + ); + if ("autoUpdateProp" in col) { + this.$set(savedDatalist, col.prop, res.data); + } + } + // col.options = res.data.list; + } else { + col.options.splice(0); + } + // dataForm[col.prop] = col.default ?? null; // not perfect! + }); + }, + { + immediate: true, + } + ); + this.watchList.push(unwatch); + } + }); + }); }, computed: { uploadHeaders() { @@ -282,7 +372,6 @@ export default { Object.keys(this.shadowDataForm).forEach((key) => { this.shadowDataForm[key] = null; }); - console.log("[DialogJustForm resetForm()] clearing form..."); this.$refs.dataForm.clearValidate(); this.$emit("dialog-closed"); // 触发父组件销毁自己 }, @@ -367,7 +456,7 @@ export default { return; } - col.onClick.call(this, this.dataForm.id) + col.onClick.call(this, this.dataForm.id); }, /** handlers */ diff --git a/src/views/modules/pms/qualityInspectionRecord/config.js b/src/views/modules/pms/qualityInspectionRecord/config.js index 45c55f0..b784ff3 100644 --- a/src/views/modules/pms/qualityInspectionRecord/config.js +++ b/src/views/modules/pms/qualityInspectionRecord/config.js @@ -2,6 +2,8 @@ import TableOperaionComponent from "@/components/noTemplateComponents/operationC import TableTextComponent from "@/components/noTemplateComponents/detailComponent"; // import StatusComponent from "@/components/noTemplateComponents/statusComponent"; import { timeFilter } from "@/utils/filters"; +import { getDictDataList } from "@/utils"; + export default function () { const tableProps = [ @@ -94,32 +96,39 @@ export default function () { rows: [ [ { - input: true, + select: true, label: "窑车号", prop: "carId", + options: [], + optionLabel: 'code', + optionValue: 'carId', + fetchData: () => this.$http.post("/pms/carHandle/pageView", { page: 1, limit: 999 }), rules: { required: true, message: "必填项不能为空", trigger: "blur" }, - elparams: { placeholder: "请输入批次编码" }, + elparams: { placeholder: "请输入批次编码", filterable: true }, + injectTo: [ + ['posCode', 'posCode'], // TODO + ['carState', 'stateDictValue'] + ] }, { - input: true, + // select: true, + forceDisabled: true, label: "当前位置", + // options: getDictDataList(), prop: "posCode", - rules: { required: true, message: "必填项不能为空", trigger: "blur" }, - elparams: { placeholder: "请入当前位置" }, }, { - select: true, + forceDisabledSelect: true, + // select: true, label: "当前状态", prop: "carState", options: [ - { label: '没有数据', value: 0 }, - { label: '正常窑车', value: 1 }, - { label: '判废窑车', value: 2 }, - { label: '摆渡车', value: 3 }, - { label: '空窑车', value: 4 }, + { label: '没有数据', value: '0' }, + { label: '正常窑车', value: '1' }, + { label: '判废窑车', value: '2' }, + { label: '摆渡车', value: '3' }, + { label: '空窑车', value: '4' }, ], - rules: { required: true, message: "必选项不能为空", trigger: "blur" }, - elparams: { placeholder: "请选择状态" }, }, { select: true, @@ -129,32 +138,44 @@ export default function () { { label: '是', value: 'yes' }, { label: '否', value: 'no', default: true }, ], - rules: { required: true, message: "必选项不能为空", trigger: "blur" }, + // rules: { required: true, message: "必选项不能为空", trigger: "blur" }, elparams: { placeholder: "请选择报废状态" }, }, ], [ { - input: true, + select: true, label: "订单号", prop: "orderId", + options: [], + optionLabel: 'orderCode', + toggleFetchData: 'carId', // 当 carId 改变的时候，也会 fetchData + fetchData: (carId) => this.$http.post("/pms/carHandle/getCurrent", { id: carId ?? null, page: 1, limit: 999 }), rules: { required: true, message: "必选项不能为空", trigger: "blur" }, elparams: { placeholder: "请选择订单" }, + injectTo: [ + ['orderCate', 'orderCate'], // TODO + ['shapeCode', 'shapeCode'], + ['orderQty', 'qty'], + ] }, { - input: true, + forceDisabled: true, label: "子号", - prop: "orderCate" + prop: "orderCate", + elparams: { placeholder: "无" }, }, { - input: true, + forceDisabled: true, label: "砖型", - prop: "shapeCode" + prop: "shapeCode", + elparams: { placeholder: "无" }, }, { - input: true, + forceDisabled: true, label: "订单砖数", prop: "orderQty", + elparams: { placeholder: "无" }, }, ], [ @@ -172,18 +193,18 @@ export default function () { input: true, label: "不合格量", prop: "badqty", - rules: [ - { required: true, message: "必填项不能为空", trigger: "blur" }, - { type: 'number', message: '请输入正确的数字类型', trigger: 'blur', transform: val => Number(val) } - ], + // rules: [ + // { required: true, message: "必填项不能为空", trigger: "blur" }, + // { type: 'number', message: '请输入正确的数字类型', trigger: 'blur', transform: val => Number(val) } + // ], elparams: { placeholder: "请输入不合格量" }, }, { input: true, label: "检测人", prop: "checkPerson", - rules: { required: true, message: "必填项不能为空", trigger: "blur" }, - elparams: { placeholder: "请输入批次编码" }, + // rules: { required: true, message: "必填项不能为空", trigger: "blur" }, + elparams: { placeholder: "请输入检测人" }, }, { datetime: true, @@ -221,7 +242,7 @@ export default function () { fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的 }, urls: { - // base: "/pms/qualityInspectionRecord/pageView", + base: "/pms/qualityInspectionRecord", page: "/pms/qualityInspectionRecord/pageView", pageIsPostApi: true, // subase: "/pms/equipmentTechParam",