From 94c63100679fdbdd41118ff3b08a10abf42535ea Mon Sep 17 00:00:00 2001
From: fujunling <2984387807@qq.com>
Date: 星期五, 26 五月 2023 18:55:33 +0800
Subject: [PATCH] 动态表单
---
Source/UBCS-WEB/src/components/FormTemplate/index.vue | 597 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 284 insertions(+), 313 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/FormTemplate/index.vue b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
index 3f10469..108f8a0 100644
--- a/Source/UBCS-WEB/src/components/FormTemplate/index.vue
+++ b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
@@ -8,31 +8,54 @@
:width="dialogOptions.width"
append-to-body
>
- <avue-form :option="option" v-loading="loading" ref="form">
- <template :slot="item.prop + 'Label'" v-for="item in option.column"">
- <div>
- <span>{{ item.label }}</span>
- <el-tooltip
- v-if="item.keyAttr"
- class="item"
- effect="dark"
- content="鍏抽敭灞炴��"
- placement="top-start"
- >
- <i class="el-icon-star-on key_attr_icon"></i>
- </el-tooltip>
- </div>
+ <avue-form
+ v-model="form"
+ :option="option"
+ v-loading="loading"
+ ref="form"
+ :key="index"
+ >
+ <template :slot="item.prop + 'Label'" v-for="item in option.column">
+ <span>{{ item.label }} </span>
+ <el-tooltip
+ v-if="item.keyAttr"
+ class="item"
+ effect="dark"
+ content="璇ュ睘鎬т负鍏抽敭灞炴��"
+ placement="top-start"
+ >
+ <i class="el-icon-star-on key_attr_icon"></i>
+ </el-tooltip>
+ <el-tooltip
+ v-if="item.tip"
+ class="item"
+ effect="dark"
+ :content="item.tip"
+ placement="top-start"
+ >
+ <i class="el-icon-warning"></i>
+ </el-tooltip>
</template>
</avue-form>
<div class="avue-dialog__footer">
<el-button @click="close()">鍙� 娑�</el-button>
<el-button @click="close()" type="primary">纭� 瀹�</el-button>
</div>
+ <el-dialog title="娴嬭瘯鍙傜収" :visible.sync="visible2" append-to-body>
+ <div style="height: 100px;">
+ <p>閮ㄩ棬鏁版嵁 {depName: '鎴戞槸閮ㄩ棬鍚嶇О', depId: '鎴戞槸閮ㄩ棬id'}</p>
+ </div>
+ <div class="avue-dialog__footer">
+ <el-button @click="visible2 = false">鍙� 娑�</el-button>
+ <el-button @click="czSubmit" type="primary">纭� 瀹�</el-button>
+ </div>
+ </el-dialog>
</el-dialog>
</template>
<script>
import { getFormTemplate } from "../../api/common";
+import { getDictionary } from "../../api/system/dict";
export default {
name: "FormTemplate",
props: {
@@ -40,9 +63,15 @@
type: Boolean,
default: false,
},
+ disabledProp: {
+ type: Array,
+ default: () => ["id"],
+ },
},
data() {
return {
+ index: 0,
+ form: {},
loading: false,
dialogOptions: {
width: "60%",
@@ -59,8 +88,12 @@
combox: "select",
truefalse: "switch",
number: "number",
+ textarea: "textarea",
datetime: "datetime",
+ date: "date",
+ file: "upload",
},
+ // 鍋囨暟鎹�
testItems: [
{
comboxKey: null,
@@ -72,31 +105,6 @@
extendAttrMap: null,
extendAttrString: null,
field: "id",
- hidden: true,
- keyAttr: false,
- prefix: "",
- readOnly: false,
- referConfig: null,
- required: false,
- selectLibFlag: "",
- showField: null,
- suffix: "",
- text: "浠ｅ彿",
- tooltips: "",
- type: "text",
- unique: false,
- verify: "",
- },
- {
- comboxKey: "wupin${lcstatus}",
- customClass: null,
- data: null,
- dateFormate: "",
- defaultValue: "",
- displayExtension: null,
- extendAttrMap: null,
- extendAttrString: null,
- field: "lcstatus",
hidden: false,
keyAttr: false,
prefix: "",
@@ -106,7 +114,31 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鐘舵��",
+ text: "浼犲�肩鐢ㄥ姛鑳�",
+ tooltips: "",
+ type: "combox",
+ unique: false,
+ verify: "",
+ },
+ {
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "state",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: true,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鎺ュ彛绂佺敤鍔熻兘",
tooltips: "",
type: "combox",
unique: false,
@@ -131,7 +163,7 @@
selectLibFlag: "",
showField: null,
suffix: "鏂囨湰鍚庣紑娴嬭瘯",
- text: "鍓嶅悗缂�",
+ text: "鍓嶅悗缂�鍔熻兘",
tooltips: "",
type: "text",
unique: false,
@@ -156,14 +188,14 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "姝ｅ垯鏍￠獙",
+ text: "姝ｅ垯鏍￠獙鍔熻兘",
tooltips: "璇疯緭鍏ユ暟瀛�",
type: "text",
unique: false,
verify: "/[0-9]/",
},
{
- comboxKey: "materialclassify_data",
+ comboxKey: null,
customClass: null,
data: [
{
@@ -182,7 +214,7 @@
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
- field: "materialclassify",
+ field: "dataSelect",
hidden: false,
keyAttr: false,
prefix: "",
@@ -192,7 +224,32 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鐗╂枡鍒嗙被",
+ text: "鐩存帴杩斿洖涓嬫媺",
+ tooltips: "",
+ type: "combox",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: "formTemplateTest",
+ customClass: null,
+ data: [],
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "dictSelect",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "瀛楀吀杩斿洖涓嬫媺",
tooltips: "",
type: "combox",
unique: false,
@@ -232,7 +289,7 @@
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
- field: "secondfl",
+ field: "datetime",
hidden: false,
keyAttr: false,
prefix: "",
@@ -242,7 +299,7 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鏃堕棿閫夋嫨鍣�",
+ text: "鏃ユ湡鏃堕棿閫夋嫨鍣�",
tooltips: "",
type: "datetime",
unique: false,
@@ -257,9 +314,9 @@
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
- field: "thrifl",
+ field: "time",
hidden: false,
- keyAttr: true,
+ keyAttr: false,
prefix: "",
readOnly: false,
referConfig: null,
@@ -267,9 +324,9 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鍏抽敭灞炴��",
+ text: "鏃堕棿閫夋嫨鍣�",
tooltips: "",
- type: "text",
+ type: "date",
unique: false,
verify: "",
},
@@ -292,7 +349,7 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "閿�鍞墿鏂�",
+ text: "寮�鍏�",
tooltips: "",
type: "truefalse",
unique: false,
@@ -303,7 +360,7 @@
customClass: null,
data: null,
dateFormate: "",
- defaultValue: "",
+ defaultValue: "鎴戞槸榛樿鍊�",
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
@@ -317,7 +374,7 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鍥惧彿",
+ text: "榛樿鍊煎姛鑳�",
tooltips: "鎻愮ず",
type: "text",
unique: false,
@@ -334,7 +391,7 @@
extendAttrString: null,
field: "xinghaoguige",
hidden: false,
- keyAttr: false,
+ keyAttr: true,
prefix: "",
readOnly: false,
referConfig: null,
@@ -342,7 +399,7 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "瑙勬牸鍨嬪彿锛圕APP锛�",
+ text: "灞炴�у叧閿��",
tooltips: "",
type: "text",
unique: false,
@@ -362,166 +419,87 @@
keyAttr: false,
prefix: "",
readOnly: false,
- referConfig: {
- backPath: "",
- displayTable: null,
- height: null,
- initSort: null,
- loadType: "all",
- mapFields: "",
- method: "GET",
- muti: false,
- onlyLeaf: false,
- paramForFormKey: "",
- parentFieldName: null,
- parentUsedField: null,
- parentValue: null,
- referContent: null,
- referType: "appendix",
- remoteSort: false,
- tableConfig: {
- cols: [
- {
- align: "left",
- colspan: 1,
- comboxKey: null,
- data: [],
- dateFormate: null,
- edit: null,
- editConfig: null,
- event: null,
- field: "id",
- fieldType: "text",
- fixed: null,
- hidden: false,
- minWidth: null,
- optionButtons: null,
- optionField: false,
- optionJsMap: null,
- queryField: null,
- referConfig: null,
- rowspan: 1,
- showField: null,
- sort: true,
- sortField: "id",
- style: null,
- templet: null,
- title: "缂栧彿",
- unresize: false,
- width: 150,
- },
- {
- align: "left",
- colspan: 1,
- comboxKey: null,
- data: [],
- dateFormate: null,
- edit: null,
- editConfig: null,
- event: null,
- field: "name",
- fieldType: "text",
- fixed: null,
- hidden: false,
- minWidth: null,
- optionButtons: null,
- optionField: false,
- optionJsMap: null,
- queryField: null,
- referConfig: null,
- rowspan: 1,
- showField: null,
- sort: true,
- sortField: "name",
- style: null,
- templet: null,
- title: "鍚嶇О",
- unresize: false,
- width: 180,
- },
- ],
- oid: null,
- page: {
- limit: 15,
- page: 1,
- },
- queryColumns: [
- {
- align: "left",
- colspan: 1,
- comboxKey: null,
- data: [],
- dateFormate: null,
- edit: null,
- editConfig: null,
- event: null,
- field: "id",
- fieldType: "text",
- fixed: null,
- hidden: false,
- minWidth: null,
- optionButtons: null,
- optionField: false,
- optionJsMap: null,
- queryField: null,
- referConfig: null,
- rowspan: 1,
- showField: null,
- sort: true,
- sortField: "id",
- style: null,
- templet: null,
- title: "缂栧彿",
- unresize: false,
- width: 150,
- },
- {
- align: "left",
- colspan: 1,
- comboxKey: null,
- data: [],
- dateFormate: null,
- edit: null,
- editConfig: null,
- event: null,
- field: "name",
- fieldType: "text",
- fixed: null,
- hidden: false,
- minWidth: null,
- optionButtons: null,
- optionField: false,
- optionJsMap: null,
- queryField: null,
- referConfig: null,
- rowspan: 1,
- showField: null,
- sort: true,
- sortField: "name",
- style: null,
- templet: null,
- title: "鍚嶇О",
- unresize: false,
- width: 180,
- },
- ],
- },
- textField: "name",
- type: "default",
- url: "",
- useFormKey: "",
- valueField: "oid",
- where: {
- materialname: "璁￠噺鍗曚綅",
- },
- },
+ tip: "鎴戞槸鎻愮ず鍔熻兘",
required: false,
selectLibFlag: "",
showField: "jiliangdwname",
suffix: "",
- text: "璁￠噺鍗曚綅",
+ text: "鎻愮ず鍔熻兘",
tooltips: "",
- type: "refer",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "fun1",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鍙傛暟1娴嬭瘯js",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "fun2",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ required: false,
+ selectLibFlag: "",
+ showField: "hesuanfenleiname",
+ suffix: "",
+ text: "鍙傛暟2娴嬭瘯js",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "sum",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: true,
+ required: false,
+ selectLibFlag: "",
+ showField: "",
+ suffix: "",
+ text: "鍙傛暟1鍙傛暟2姹傚拰",
+ tooltips: "",
+ type: "text",
unique: false,
verify: "",
},
@@ -534,7 +512,7 @@
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
- field: "chukufangshi",
+ field: "textarea",
hidden: false,
keyAttr: false,
prefix: "",
@@ -544,9 +522,9 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "鍑哄簱鏂瑰紡",
+ text: "鏂囨湰鍩�",
tooltips: "",
- type: "text",
+ type: "textarea",
unique: false,
verify: "",
},
@@ -569,9 +547,9 @@
selectLibFlag: "",
showField: null,
suffix: "",
- text: "澶囨敞璇存槑",
+ text: "鏂囦欢鍔熻兘",
tooltips: "",
- type: "text",
+ type: "file",
unique: false,
verify: "",
},
@@ -584,102 +562,27 @@
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
- field: "hesuanfenlei",
+ field: "cz",
hidden: false,
keyAttr: false,
prefix: "",
- readOnly: false,
- referConfig: {
- backPath: "",
- displayTable: null,
- height: null,
- initSort: null,
- loadType: "all",
- mapFields: "",
- method: "GET",
- muti: false,
- onlyLeaf: false,
- paramForFormKey: "",
- parentFieldName: "PARENTCODECLASSIFYOID",
- parentUsedField: "oid",
- parentValue:
- "\\IN(SELECT oid from PLATFORMBTM_CODECLASSIFY where id ='hesuanfenlei')",
- referContent: null,
- referType: "codeclassify",
- remoteSort: false,
- tableConfig: null,
- textField: "name",
- type: "tree",
- url: "",
- useFormKey: "",
- valueField: "oid",
- where: null,
- },
+ readOnly: true,
+ referConfig: true,
required: false,
selectLibFlag: "",
- showField: "hesuanfenleiname",
+ showField: "depId",
suffix: "",
- text: "鏍哥畻鍒嗙被",
+ text: "鍙傜収",
tooltips: "",
- type: "refer",
- unique: false,
- verify: "",
- },
- {
- comboxKey: "Eummaterialtype",
- customClass: null,
- data: null,
- dateFormate: "",
- defaultValue: "1001",
- displayExtension: null,
- extendAttrMap: null,
- extendAttrString: null,
- field: "materialtype",
- hidden: false,
- keyAttr: false,
- prefix: "",
- readOnly: false,
- referConfig: null,
- required: false,
- selectLibFlag: "",
- showField: null,
- suffix: "",
- text: "鐗╂枡绫诲瀷",
- tooltips: "",
- type: "combox",
- unique: false,
- verify: "",
- },
- {
- comboxKey: "myDataSecret",
- customClass: null,
- data: null,
- dateFormate: "",
- defaultValue: "",
- displayExtension: null,
- extendAttrMap: null,
- extendAttrString: null,
- field: "secretgrade",
- hidden: false,
- keyAttr: false,
- prefix: "",
- readOnly: false,
- referConfig: null,
- required: false,
- selectLibFlag: "",
- showField: null,
- suffix: "",
- text: "secretGrade",
- tooltips: "",
- type: "combox",
+ type: "text",
unique: false,
verify: "",
},
],
+ visible2: false,
};
},
created() {
- this.preOrSufFixShow();
},
computed: {
dialogVisible: {
@@ -714,16 +617,23 @@
});
},
templateRender() {
- const items = this.testItems;
// const items = this.templateData.formDefineVO.items;
+ const items = this.testItems;
+ let column = [];
+ let dictKeys = [];
items.forEach((item) => {
// 闅愯棌琛ㄥ崟鍏冪礌
if (item.hide) {
return;
}
- // if (item.field === 'id' || item.field === 'lcstatus') {
- // item.readOnly = true
- // }
+ // 鎵嬫満瀛楀吀key缁熶竴寮傛璇锋眰鑾峰彇
+ if (!this.$utilFunc.isEmpty(item.comboxKey)) {
+ dictKeys.push({ dictKey: item.comboxKey, field: item.field });
+ }
+ // 绂佺敤閮ㄥ垎灞炴��
+ if (this.disabledProp.includes(item.field)) {
+ item.disabled = true;
+ }
// 璁剧疆琛ㄥ崟鏍￠獙鐨勮鍒欙紝鏂囨湰
let message = "璇烽�夋嫨";
let trigger = "change";
@@ -736,10 +646,11 @@
let columnItem = {
label: item.text,
labelslot: true,
- prop: item.field,
+ prop: item.referConfig ? item.showField : item.field,
type: this.columnType[item.type],
- dicData: this.getDictData(item.type, item.dicData),
- disabled: item.readOnly,
+ dicData: this.getDataList(item.type, item.data),
+ disabled: item.disabled,
+ readonly: item.readOnly,
prepend: this.preOrSufFixShow("text", item.prefix),
append: this.preOrSufFixShow("text", item.suffix),
prefixIcon: this.preOrSufFixShow("icon", item.prefix),
@@ -747,7 +658,21 @@
valueFormat: item.dateFormate,
format: item.dateFormate,
keyAttr: item.keyAttr,
- value: 1,
+ value: item.defaultValue,
+ tip: item.tip,
+ comboxKey: item.comboxKey,
+ change: ({ value, column }) => {
+ this.changeFun(value, column, item.displayExtension);
+ },
+ click: this.clickFun(item.referConfig),
+ // action:
+ // item.type === "file"
+ // ? "/api/ubcs-resource/oss/endpoint/put-file"
+ // : "",
+ // propsHttp: {
+ // res: "data",
+ // url: "link",
+ // },
rules: [
{
required: item.required,
@@ -755,7 +680,8 @@
trigger,
},
{
- pattern: item.verify,
+ // 濡傛灉娌℃湁姝ｅ垯鍒欏尮閰嶄换浣曞瓧绗�
+ pattern: item.verify ? item.verify : /[\s\S.]*/g,
message: item.tooltips,
trigger,
},
@@ -765,8 +691,29 @@
value: "key",
},
};
- console.log(this.$refs.form, "form");
- this.option.column.push(columnItem);
+ column.push(columnItem);
+ this.$set(this.option, "column", column);
+ });
+ this.index++;
+ this.geDictData(dictKeys);
+ },
+ changeFun(value, column, jsCode) {
+ if (typeof jsCode === "string" && jsCode.length > 0) {
+ eval(jsCode);
+ }
+ },
+ clickFun(referConfig) {
+ if (referConfig) {
+ return () => {
+ this.visible2 = true
+ }
+ }
+ },
+ czSubmit() {
+ this.visible2 = false
+ this.form = Object.assign(this.form, {
+ depName: "鎴戞槸閮ㄩ棬鍚嶇О",
+ depId: "鎴戞槸閮ㄩ棬id",
});
},
close() {
@@ -780,23 +727,43 @@
return val;
}
},
- // 鑾峰彇瀛楀吀鏁版嵁
- getDictData(type, dicData) {
+ // 鑾峰彇swich鍜屽凡鎷垮埌鐨勪笅鎷夋暟鎹�
+ getDataList(type, dicData) {
if (type === "truefalse") {
return [
{
+ key: false,
value: "鍚�",
- key: 0,
},
{
+ key: true,
value: "鏄�",
- key: 1,
},
];
} else if (type === "combox") {
return dicData;
}
return [];
+ },
+ // 鑾峰彇瀛楀吀鏁版嵁
+ geDictData(dictKeys) {
+ dictKeys.forEach((dictObj) => {
+ getDictionary({ code: dictObj.dictKey }).then((res) => {
+ if (res.data && res.data.code === 200) {
+ this.option.column = this.option.column.map((item) => {
+ if (item.field === dictObj.field) {
+ let dictData = (res.data.data || []).map((itm) => {
+ itm.value = itm.dictValue;
+ itm.key = itm.dictKey;
+ return itm;
+ });
+ item.dicData = dictData;
+ }
+ return item;
+ });
+ }
+ });
+ });
},
},
watch: {
@@ -816,4 +783,8 @@
top: 2px;
color: red;
}
+// 瑙ｅ喅swich缁勪欢涓嶅瀭鐩村眳涓殑闂
+/deep/ .el-switch {
+ vertical-align: baseline;
+}
</style>
--
Gitblit v1.9.3