From 053ba6029e3c97a4ce8de972bc287a0411890ea0 Mon Sep 17 00:00:00 2001
From: fujunling <2984387807@qq.com>
Date: 星期五, 26 五月 2023 00:08:32 +0800
Subject: [PATCH] 动态表单
---
Source/UBCS-WEB/src/components/FormTemplate/index.vue | 841 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
Source/UBCS-WEB/src/api/common.js | 2
Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue | 17
Source/UBCS-WEB/src/main.js | 3
4 files changed, 827 insertions(+), 36 deletions(-)
diff --git a/Source/UBCS-WEB/src/api/common.js b/Source/UBCS-WEB/src/api/common.js
index e221159..de9b26e 100644
--- a/Source/UBCS-WEB/src/api/common.js
+++ b/Source/UBCS-WEB/src/api/common.js
@@ -14,7 +14,7 @@
export const getFormTemplate = (params) => {
return request({
- url: '/ubcs-code/ubcs-code/mdmEngineController/getFormDefineByTemplateOid',
+ url: 'api/ubcs-code/ubcs-code/mdmEngineController/getFormDefineByTemplateOid',
method: 'get',
params
})
diff --git a/Source/UBCS-WEB/src/components/FormTemplate/index.vue b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
index 10b6e40..3f10469 100644
--- a/Source/UBCS-WEB/src/components/FormTemplate/index.vue
+++ b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
@@ -1,42 +1,819 @@
<template>
- <div>
- </div>
+ <el-dialog
+ :visible.sync="dialogVisible"
+ v-dialogDrag
+ top="0vh"
+ title="鎻愮ず"
+ class="avue-dialog avue-dialog--top"
+ :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>
+ </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>
</template>
<script>
- import { getFormTemplate } from '../../api/common';
- export default {
- name: 'FormTemplate',
- props: {
- visible: {
- type: Boolean,
- default: false
+import { getFormTemplate } from "../../api/common";
+export default {
+ name: "FormTemplate",
+ props: {
+ visible: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ loading: false,
+ dialogOptions: {
+ width: "60%",
+ },
+ option: {
+ emptyBtn: false,
+ submitBtn: false,
+ labelWidth: "120",
+ column: [],
+ },
+ templateData: {},
+ columnType: {
+ text: "input",
+ combox: "select",
+ truefalse: "switch",
+ number: "number",
+ datetime: "datetime",
+ },
+ testItems: [
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ 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: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鐘舵��",
+ tooltips: "",
+ type: "combox",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "oldcode",
+ hidden: false,
+ keyAttr: false,
+ prefix: "el-icon-search",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "鏂囨湰鍚庣紑娴嬭瘯",
+ text: "鍓嶅悗缂�",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "materialname",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: true,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "姝ｅ垯鏍￠獙",
+ tooltips: "璇疯緭鍏ユ暟瀛�",
+ type: "text",
+ unique: false,
+ verify: "/[0-9]/",
+ },
+ {
+ comboxKey: "materialclassify_data",
+ customClass: null,
+ data: [
+ {
+ attributes: {},
+ key: "model_type",
+ value: "妯″瀷",
+ },
+ {
+ attributes: {},
+ key: "part_type",
+ value: "闆朵欢",
+ },
+ ],
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "materialclassify",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鐗╂枡鍒嗙被",
+ tooltips: "",
+ type: "combox",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "firstfl",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鏁板瓧杈撳叆妗�",
+ tooltips: "",
+ type: "number",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "yyyy-MM-dd HH:mm:ss",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "secondfl",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鏃堕棿閫夋嫨鍣�",
+ tooltips: "",
+ type: "datetime",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "thrifl",
+ hidden: false,
+ keyAttr: true,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鍏抽敭灞炴��",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "false",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "xiaoshouwl",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "閿�鍞墿鏂�",
+ tooltips: "",
+ type: "truefalse",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "tuhao",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鍥惧彿",
+ tooltips: "鎻愮ず",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "xinghaoguige",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "瑙勬牸鍨嬪彿锛圕APP锛�",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "jiliangdw",
+ 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: 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: "璁￠噺鍗曚綅",
+ },
+ },
+ required: false,
+ selectLibFlag: "",
+ showField: "jiliangdwname",
+ suffix: "",
+ text: "璁￠噺鍗曚綅",
+ tooltips: "",
+ type: "refer",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "chukufangshi",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "鍑哄簱鏂瑰紡",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "beizhushuoming",
+ hidden: false,
+ keyAttr: false,
+ prefix: "",
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: "",
+ showField: null,
+ suffix: "",
+ text: "澶囨敞璇存槑",
+ tooltips: "",
+ type: "text",
+ unique: false,
+ verify: "",
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "",
+ defaultValue: "",
+ displayExtension: null,
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "hesuanfenlei",
+ 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,
+ },
+ required: false,
+ selectLibFlag: "",
+ showField: "hesuanfenleiname",
+ suffix: "",
+ 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",
+ unique: false,
+ verify: "",
+ },
+ ],
+ };
+ },
+ created() {
+ this.preOrSufFixShow();
+ },
+ computed: {
+ dialogVisible: {
+ get() {
+ return this.visible;
+ },
+ set(val) {
+ this.$emit("update:visible", val);
},
},
- created() {
- this.getFormTemplate()
- },
- data() {
- return {
- load: false
- }
- },
- methods: {
- getFormTemplate() {
- this.load = true
- getFormTemplate({
- templateOid: '78B8C7C5-A042-0B96-FE6D-65421451782A',
- codeClassifyOid: '4524E801-6CC6-92E8-1AC3-2AB9604E8F96'
- }).then(res => {
- console.log(res);
- }).catch(err => {
- console.log(err);
+ },
+ methods: {
+ getFormTemplate() {
+ this.loading = true;
+ getFormTemplate({
+ templateOid: "78B8C7C5-A042-0B96-FE6D-65421451782A",
+ codeClassifyOid: "4524E801-6CC6-92E8-1AC3-2AB9604E8F96",
+ page: 1,
+ limit: 30,
+ })
+ .then((res) => {
+ if (res.status === 200) {
+ this.templateData = res.data;
+ this.templateRender();
+ }
+ this.loading = false;
+ console.log(res.data);
})
+ .catch((err) => {
+ this.loading = false;
+ console.log(err);
+ });
+ },
+ templateRender() {
+ const items = this.testItems;
+ // const items = this.templateData.formDefineVO.items;
+ items.forEach((item) => {
+ // 闅愯棌琛ㄥ崟鍏冪礌
+ if (item.hide) {
+ return;
+ }
+ // if (item.field === 'id' || item.field === 'lcstatus') {
+ // item.readOnly = true
+ // }
+ // 璁剧疆琛ㄥ崟鏍￠獙鐨勮鍒欙紝鏂囨湰
+ let message = "璇烽�夋嫨";
+ let trigger = "change";
+ if (item.type === "text") {
+ message = "璇疯緭鍏�";
+ trigger = "blur";
+ } else if (item.type === "file") {
+ message = "璇蜂笂浼�";
+ }
+ let columnItem = {
+ label: item.text,
+ labelslot: true,
+ prop: item.field,
+ type: this.columnType[item.type],
+ dicData: this.getDictData(item.type, item.dicData),
+ disabled: item.readOnly,
+ prepend: this.preOrSufFixShow("text", item.prefix),
+ append: this.preOrSufFixShow("text", item.suffix),
+ prefixIcon: this.preOrSufFixShow("icon", item.prefix),
+ suffixIcon: this.preOrSufFixShow("icon", item.suffix),
+ valueFormat: item.dateFormate,
+ format: item.dateFormate,
+ keyAttr: item.keyAttr,
+ value: 1,
+ rules: [
+ {
+ required: item.required,
+ message: `璇�${message}${item.text}`,
+ trigger,
+ },
+ {
+ pattern: item.verify,
+ message: item.tooltips,
+ trigger,
+ },
+ ],
+ props: {
+ label: "value",
+ value: "key",
+ },
+ };
+ console.log(this.$refs.form, "form");
+ this.option.column.push(columnItem);
+ });
+ },
+ close() {
+ this.dialogVisible = false;
+ },
+ // 鍓嶅悗缂�
+ preOrSufFixShow(type, val) {
+ if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return;
+ const isIcon = val.slice(0, 8) === "el-icon-";
+ if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {
+ return val;
}
- }
- }
+ },
+ // 鑾峰彇瀛楀吀鏁版嵁
+ getDictData(type, dicData) {
+ if (type === "truefalse") {
+ return [
+ {
+ value: "鍚�",
+ key: 0,
+ },
+ {
+ value: "鏄�",
+ key: 1,
+ },
+ ];
+ } else if (type === "combox") {
+ return dicData;
+ }
+ return [];
+ },
+ },
+ watch: {
+ visible(newV) {
+ if (newV) {
+ this.getFormTemplate();
+ }
+ },
+ },
+};
</script>
-<style lang='less' scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+.key_attr_icon {
+ font-size: 24px;
+ position: relative;
+ top: 2px;
+ color: red;
+}
+</style>
diff --git a/Source/UBCS-WEB/src/main.js b/Source/UBCS-WEB/src/main.js
index df2be16..eed0da5 100644
--- a/Source/UBCS-WEB/src/main.js
+++ b/Source/UBCS-WEB/src/main.js
@@ -41,6 +41,9 @@
import referConfigFormDialog from "@/components/code-dialog-page/referConfigFormDialog"
import businessAdd from "@/views/modeling/BusinessAdd"
+// 灏嗗伐鍏峰嚱鏁版坊鍔犲埌鍏ㄥ眬
+import utilFunc from './util/func'
+Vue.prototype.$utilFunc = utilFunc
// 娉ㄥ唽鍏ㄥ眬crud椹卞姩
window.$crudCommon = crudCommon;
// 鍔犺浇Vue鎷撳睍
diff --git a/Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue b/Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue
index 253facd..54823a7 100644
--- a/Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue
+++ b/Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue
@@ -1,11 +1,22 @@
<template>
- <div></div>
+ <div>
+ <el-button @click="visible = true">娴嬭瘯</el-button>
+ <FormTemplate :visible.sync="visible"></FormTemplate>
+ </div>
</template>
<script>
-
+import FormTemplate from '../../components/FormTemplate/index'
+export default {
+ name: 'FormTempalteTest',
+ components: { FormTemplate },
+ data() {
+ return {
+ visible: false
+ }
+ }
+}
</script>
-
<style lang='less' scoped>
</style>
\ No newline at end of file
--
Gitblit v1.9.3