@@ -33,6 +33,9 @@ | |||
:disabled="detailMode" | |||
v-bind="col.elparams" | |||
></el-cascader> | |||
<el-select v-if="col.forceDisabledSelect" disabled v-model="dataForm[col.prop]" clearable v-bind="col.elparams"> | |||
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" /> | |||
</el-select> | |||
<el-select | |||
v-if="col.select" | |||
v-model="dataForm[col.prop]" | |||
@@ -137,6 +140,8 @@ export default { | |||
const dataForm = {}; | |||
const shadowDataForm = {}; | |||
const savedDatalist = {}; | |||
const cachedList = {}; | |||
const watchList = []; | |||
this.configs.form.rows.forEach((row) => { | |||
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 */ | |||
@@ -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", | |||