From fbaa314196992bdd683be9f412c20961c0a443ef Mon Sep 17 00:00:00 2001
From: fujunling <2984387807@qq.com>
Date: 星期一, 05 六月 2023 16:13:49 +0800
Subject: [PATCH] 动态表单
---
Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue | 271 ++++++++++++++++++++++++++----------------------------
1 files changed, 130 insertions(+), 141 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue b/Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue
index b827c1f..ebb0e9e 100644
--- a/Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue
+++ b/Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue
@@ -1,28 +1,48 @@
+<!-- eslint-disable vue/valid-v-for -->
+<!-- eslint-disable vue/require-v-for-key -->
<template>
- <avue-form v-model="form" :option="option" v-loading="loading" ref="form">
- <template :slot="item.prop + 'Label'" v-for="item in option.column">
- <span>
- <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>
- </span>
- </template>
- </avue-form>
+ <div>
+ <avue-form
+ v-model="form"
+ :option="option"
+ v-loading="loading"
+ ref="form"
+ :style="{ minHeight: loading ? '300px' : '' }"
+ >
+ <template :slot="item.prop + 'Label'" v-for="item in slotColumnList">
+ <span>
+ <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>
+ </span>
+ </template>
+ <template :slot="item.prop + ''" v-for="item in slotColumnList">
+ <vciWebRefer
+ v-if="item.type == 'refer'"
+ :value="item.value"
+ :options="item.referConfig || {}"
+ ></vciWebRefer>
+ </template>
+ </avue-form>
+ </div>
</template>
<script>
-import { getFormTemplate } from "@/api/formTemplate";
+import { getFormTemplate, getFormDetail } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
+import vciWebRefer from "../refer/vciWebRefer.vue";
export default {
name: "FormTemplate",
+ components: { vciWebRefer },
props: {
+ // 榛樿绂佺敤鍏冪礌
disabledProp: {
type: Array,
default: () => ["id"],
@@ -35,22 +55,22 @@
type: String,
default: "",
},
- editForm: {
- type: Object,
- default: () => ({}),
+ // 鍒楄〃鏁版嵁oid
+ rowOid: {
+ type: String,
+ default: "",
},
+ // 琛ㄥ崟绫诲瀷锛坅dd, edit, detail锛�
type: {
type: String,
default: "add",
},
- dialogOpen: {
- type: Boolean,
- default: false,
- },
+ // 鑷畾涔夎〃鍗曠被鍨�
selfColumnType: {
type: Object,
default: () => ({}),
},
+ // 鑷畾涔夎〃鍗曞睘鎬�
selfColumnConfig: {
type: Object,
default: () => ({}),
@@ -63,12 +83,11 @@
option: {
emptyBtn: false,
submitBtn: false,
- labelWidth: "130",
+ labelWidth: "140",
column: [],
group: [],
},
- loading: false,
- templateData: {},
+ loading: true,
columnType: {
text: "input",
combox: "select",
@@ -77,6 +96,7 @@
textarea: "textarea",
datetime: "datetime",
date: "date",
+ refer: "refer",
},
// 鍋囨暟鎹�
testItems: [
@@ -421,79 +441,6 @@
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: "",
- },
- {
- comboxKey: null,
- customClass: null,
- data: null,
- dateFormate: "",
- defaultValue: "",
displayExtension: null,
extendAttrMap: null,
extendAttrString: null,
@@ -527,14 +474,14 @@
keyAttr: false,
prefix: "",
readOnly: true,
- referConfig: true,
+ referConfig: {},
required: false,
selectLibFlag: "",
showField: "depId",
suffix: "",
text: "鍙傜収",
tooltips: "",
- type: "text",
+ type: "refer",
unique: false,
verify: "",
},
@@ -543,41 +490,47 @@
defaultValue: {},
// 琛ㄥ崟灞炴��
attributes: [],
- // 琛ㄥ崟鍏冪礌
- items: [],
+ slotColumnList: [],
};
},
mounted() {
this.handleResize();
},
methods: {
+ // 鍒濆鍖�
+ init(columnList) {
+ if (Array.isArray(columnList)) {
+ this.templateRender(columnList);
+ } else {
+ this.getFormTemplate();
+ }
+ },
+ // 鎺ュ彛鑾峰彇琛ㄥ崟鏁版嵁
getFormTemplate() {
- this.loading = true;
getFormTemplate({
templateOid: this.templateOid,
codeClassifyOid: this.codeClassifyOid,
})
.then((res) => {
if (res.status === 200) {
- this.templateData = res.data;
- // 琛ㄥ崟鍏冪礌锛堣繃婊ら渶瑕侀殣钘忕殑灞炴�э級
- this.items = res.data.formDefineVO.items;
- this.templateRender();
+ this.templateRender(res.data.formDefineVO.items);
this.$emit("getFormTemplateEnd", res.data);
}
- this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
});
},
- templateRender() {
+ // 娓叉煋琛ㄥ崟妯℃澘
+ templateRender(formItemList) {
// 鏃犻渶鍒嗙粍鏁版嵁
let column = [];
let group = [];
let dictKeys = [];
- this.items.forEach((formItem) => {
+ let slotColumnList = [];
+ formItemList.forEach((formItem) => {
+ formItem = this.resetFormConfig(formItem);
if (formItem.type === "line") {
group.push({
label: formItem.text,
@@ -594,10 +547,7 @@
dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field });
}
// 绂佺敤閮ㄥ垎灞炴�э紙澶栭儴浼犲�肩鐢ㄥ拰鍙傜収绂佺敤锛�
- if (
- this.disabledProp.includes(formItem.field) ||
- this.$utilFunc.isValuableObj(formItem.referConfig)
- ) {
+ if (this.disabledProp.includes(formItem.field)) {
formItem.readOnly = true;
}
// 璁剧疆琛ㄥ崟鏍￠獙鐨勮鍒欙紝鏂囨湰
@@ -606,8 +556,6 @@
if (formItem.type === "text") {
message = "璇疯緭鍏�";
trigger = "blur";
- } else if (formItem.type === "file") {
- message = "璇蜂笂浼�";
}
let columnItem = {
label: formItem.text,
@@ -627,16 +575,17 @@
format: formItem.dateFormate,
keyAttr: formItem.keyAttr,
value: formItem.defaultValue,
- tip: formItem.tooltips,
- tipPlacement: "right",
+ // tip: formItem.tooltips,
+ // tipPlacement: "right",
+ placeholder: formItem.inputTip,
comboxKey: formItem.comboxKey,
display: !formItem.hidden,
+ maxlength: formItem.maxlength,
filterable: true,
change: () => {
this.changeFun(formItem.displayExtension, formItem.prop);
},
span: formItem.type === "textarea" ? 24 : this.trendsSpan,
- click: this.clickFun(formItem.referConfig),
rules: [
{
required: formItem.required,
@@ -655,28 +604,53 @@
value: "key",
},
};
- columnItem = this.resetFormConfig(columnItem);
+ slotColumnList.push(columnItem);
if (group.length === 0) {
column.push(columnItem);
} else {
group[group.length - 1]["column"].push(columnItem);
}
});
+ this.slotColumnList = slotColumnList;
this.$set(this.option, "column", column);
this.$set(this.option, "group", group);
this.formIndex++;
+ this.loading = false;
this.geDictData(dictKeys);
+ this.getFormDetail()
},
// 浣跨敤浼犲叆鐨勮〃鍗曟暟鎹厤缃�
resetFormConfig(formItem) {
- for (const key in this.selfColumnConfig) {
- if (Object.hasOwnProperty.call(this.selfColumnConfig, key)) {
- const element = this.selfColumnConfig[key];
- formItem[key] = element;
+ for (const configType in this.selfColumnConfig) {
+ if (Object.hasOwnProperty.call(this.selfColumnConfig, configType)) {
+ const element = this.selfColumnConfig[configType];
+ if (configType === "function") {
+ for (const attr in element) {
+ if (Object.hasOwnProperty.call(element, attr)) {
+ const fun = element[attr];
+ formItem[attr] = fun(formItem);
+ }
+ }
+ } else if (configType === "exchange") {
+ for (const newAttr in element) {
+ if (Object.hasOwnProperty.call(element, newAttr)) {
+ const oldAttr = element[newAttr];
+ formItem[newAttr] = formItem[oldAttr];
+ }
+ }
+ } else if (configType === "directVoluation") {
+ for (const attr in element) {
+ if (Object.hasOwnProperty.call(element, attr)) {
+ const value = element[attr];
+ formItem[attr] = value;
+ }
+ }
+ }
}
}
return formItem;
},
+ // 鏍规嵁灞忓箷鍔ㄦ�侀厤缃〃鍗曞竷灞�
handleResize() {
let windowWidth = document.body.clientWidth;
this.trendsSpan = 24 / Math.floor(windowWidth / 500);
@@ -694,11 +668,6 @@
// executeCode({displayExtension, data: this.form}).then(res => {
// this.form[prop] = res.data.data
// })
- },
- clickFun(referConfig) {
- if (this.type === "detail") {
- return;
- }
},
// 鑾峰彇swich鍜屽凡鎷垮埌鐨勪笅鎷夋暟鎹�
getDataList(type, dicData) {
@@ -718,7 +687,7 @@
}
return [];
},
- // 鑾峰彇瀛楀吀鏁版嵁
+ // 寮傛鑾峰彇瀛楀吀鏁版嵁
geDictData(dictKeys) {
dictKeys.forEach((dictObj) => {
getDictionary({ code: dictObj.dictKey }).then((res) => {
@@ -738,16 +707,30 @@
});
});
},
+ // 琛ㄥ崟鏍￠獙
+ validate() {
+ return new Promise((resolve) => {
+ this.$refs.form.validate((valid, done, msg) => {
+ console.error(msg, valid)
+ if (valid) {
+ resolve(true)
+ } else {
+ resolve(false);
+ }
+ });
+ })
+
+ },
+ // 鑾峰彇琛ㄥ崟鏁版嵁
+ getFormDetail() {
+ if (this.type === 'add') return
+ getFormDetail({templateOid: this.templateOid, oid: this.rowOid}).then(res => {
+ console.log(res, 'res');
+ })
+ }
},
watch: {
- dialogOpen: {
- immediate: true,
- handler(newV) {
- if (newV) {
- this.getFormTemplate();
- }
- },
- },
+ // 琛ㄥ崟鏁版嵁淇敼鍙嶉鍒扮埗缁勪欢
form: {
deep: true,
immediate: true,
@@ -759,4 +742,10 @@
};
</script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped>
+.key_attr_icon {
+ font-size: 20px !important;
+ vertical-align: baseline;
+ color: red;
+}
+</style>
--
Gitblit v1.9.3