From f37b3eceb7e962d32ebe420bb8b931ea4dae4fe2 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期四, 28 三月 2024 17:56:33 +0800 Subject: [PATCH] 表单参照 --- Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 162 insertions(+), 5 deletions(-) diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue index 41cbbad..8326916 100644 --- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue +++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue @@ -18,13 +18,34 @@ <template slot="menuForm"> <dynamic-button type="form" :butttonList="componentVO.buttons" @buttonClick="buttonClick"></dynamic-button> </template> + + <template v-for="item in slotData" :slot="item.prop + ''"> + <vciWebRefer v-if="item.type == 'refer'" + :key="item.prop" + referType="master" + :data-key="item.prop" + :disabled="item.disabled || false" + :display="item.display || true" + :referConfig="item.referConfig || {}" + :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''" + :text="item.referConfig.showProp" + :value="item.prop || item.value" + @setReferValue="setReferValue" + :ref="'referFormRef'+item.prop"> + + </vciWebRefer> + </template> </avue-form> </div> </template> <script> +import vciWebRefer from '@/components/refer/vciWebRefer' +import VciWebRefer from "@/components/refer/vciWebRefer"; +import {verifyNull, verifySlash} from "@/util/validate"; export default { name: "dynamic-form", + components: {VciWebRefer}, props: { componentVO: { type: Object, @@ -61,6 +82,7 @@ data() { return { form: {}, + ruleForm:{} } }, mounted() { @@ -71,11 +93,11 @@ submitBtn: false, emptyBtn: false, height: 300, - column: this.getColumnData(0) + column: this.getColumnData() } }, slotData() { - return this.getColumnData(0) + return this.getColumnData() } }, watch:{ @@ -87,26 +109,66 @@ } } }, + watch:{ + slotData:{ + handler(newV){ + this.getDictList(newV) + }, + immediate: true, + }, + ruleForm: { + handler(val) { + if (val) { + if (Array.isArray(val)) { // 妫�鏌� val 鏄惁涓烘暟缁� + for (let code of val) { + if ( + code.type == "refer" && + code.referConfig && + code.referConfig.useFormKey + ) { + code.referConfig.formValues = val; + // code.referConfigTemp.options = code.referConfig; + } + } + } else if (typeof val === 'object') { // 妫�鏌� val 鏄惁涓哄璞� + // 杩唬瀵硅薄鐨勯�昏緫 + } + this.$emit("input", val); + } + }, + deep: true, + immediate: true, + }, + }, methods: { //杞寲鏁版嵁 formColumn(formList) { return formList.map(item => { const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type; + const focusFunc = item.type === 'refer' ? (i) => { + + } : undefined; + + return { label: item.text, prop: item.field, type: typeValue, + labelWidth:item.text.length >= 6 ? 115 : 90, value: item.defaultValue, dicData: item.type === 'combox' ? item.dicData : item.dicUrl, readonly: item.readOnly, disabled: item.disabled, + display: !item.hidden, labelSuffix: item.suffix, suffixIcon: item.prefix, placeholder: item.placeholder, clearable: item.clearable, tip: item.tooltips, keyAttr: item.keyAttr, + focus:focusFunc, + referConfig:item.referConfig, rules: [{ required: item.required, message: `璇疯緭鍏�${item.text}!`, @@ -117,9 +179,9 @@ }, //鏁版嵁鍒ょ┖ - getColumnData(index) { - if (this.componentVO && this.componentVO.tableDefineVO && this.componentVO.tableDefineVO.cols && this.componentVO.tableDefineVO.cols.length > 0) { - return this.formColumn(this.componentVO.tableDefineVO.cols[index]) + getColumnData() { + if (this.componentVO && this.componentVO.formDefineVO && this.componentVO.formDefineVO.items && this.componentVO.formDefineVO.items.length > 0) { + return this.formColumn(this.componentVO.formDefineVO.items) } else { return null; } @@ -128,6 +190,101 @@ buttonClick(item) { console.log(item.id) }, + async getDictList(val) { + for (let code of val) { + if (!verifyNull(code.dictData) && code.type == "select") { + if ( + verifySlash(code.dictCode) && + Object.prototype.hasOwnProperty.call(code, "dictCode") + ) { + const res = await getlistByCode(code.dictCode); + if (res.success) { + const dic = res.data; + code.dictData = dic.map((d) => { + return { + label: d.name, + key: d.code, + value: d.id, + }; + }); + } + } else { + this.getDicts(code.dictCode) + .then((res) => { + if (res.success) { + const dic = res.obj.datas; + code.dictData = dic.map((d) => { + return { + label: d.name, + key: d.code, + value: d.code, + }; + }); + } + }) + .catch(() => { + this.$message.error(` 鏁版嵁瀛楀吀${code.dictCode}閿欒`); + }); + } + } + if (code.type == "refer") { + if (code.referConfig && code.referConfig.useFormKey) { + if (verifyNull(code.referConfig.formValuesKey)) { + code.referConfig.formValuesKey = "ruleForm"; + } + code.referConfig.formValues = this[code.referConfig.formValuesKey]; + } + code.referConfigTemp = { + title: code.label, + showProp: + code.showProp || code.referConfig.showProp || code.prop + "Name", + prop: code.prop, + propMap: code.propMap || {}, + placeholder: code.placeholder + ? code.placeholder + : ` 璇烽�夋嫨` + code.label, + options: code.referConfig, + }; + } + } + this.formTemplateData = val; + }, + setReferValue(data) { + if (data.prop) { + this.ruleForm[data.prop] = data.value || ""; + this.ruleForm[data.showProp] = data.text || ""; + if (data.propMap) { + //璇存槑闇�瑕佹槧灏� + for (let key in data.propMap) { + let mapFields = data.propMap[key].split(","); + let value = []; + data.rawData.forEach((_item) => { + var temp; + if (!_item.extendData) { + _item.extendData = {}; + } + if (mapFields.length == 1) { + var mapField = mapFields[0]; + temp = _item[mapField] || _item["extendData"][mapField]; + } else { + //鏈夊涓� + var mutiTemp = []; + mapFields.forEach((_itemField) => { + mutiTemp.push( + _item[_itemField] || _item["extendData"][_itemField] + ); + }); + temp = mutiTemp.join(" "); + } + if (temp != null && temp != "") { + value.push(temp); + } + }); + this.ruleForm[key] = value.join(","); + } + } + } + }, } } </script> -- Gitblit v1.9.3