From e480475d30c1a079a39b6cbf1dd43dc485394e62 Mon Sep 17 00:00:00 2001
From: fujunling <2984387807@qq.com>
Date: 星期二, 06 六月 2023 18:01:32 +0800
Subject: [PATCH] 动态表单
---
Source/UBCS-WEB/src/components/FormTemplate/index.vue | 235 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 192 insertions(+), 43 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/FormTemplate/index.vue b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
index 23edc8f..3977502 100644
--- a/Source/UBCS-WEB/src/components/FormTemplate/index.vue
+++ b/Source/UBCS-WEB/src/components/FormTemplate/index.vue
@@ -13,16 +13,30 @@
v-bind="$attrs"
:visible="visible"
:type="type"
- v-if="dialogVisible"
+ :rowOid="rowOid"
+ :templateOid="templateOid"
ref="FormTempalte"
- @getFormTemplateEnd="getFormTemplate"
@getFormData="getFormData"
></FormTempalte>
- <div class="tab_box" v-if="type !== 'detail' && dialogVisible">
- <el-tabs v-model="activeName" type="card">
+ <div
+ class="tab_box"
+ v-if="
+ type !== 'detail' &&
+ dialogVisible &&
+ (showCodeApply || showResembleQuery)
+ "
+ >
+ <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="鐮佸�肩敵璇�" name="codeApply" v-if="showCodeApply">
- <CodeApply ref="CodeApply" v-bind="$attrs" @getCodeRuleOid="getCodeRuleOid"></CodeApply>
+ <FormTempalte
+ v-bind="$attrs"
+ :type="type"
+ :selfColumnType="selfColumnType"
+ :selfColumnConfig="selfColumnConfig"
+ ref="CodeApply"
+ @getFormData="getFormData"
+ ></FormTempalte>
</el-tab-pane>
<el-tab-pane
label="鐩镐技椤规煡璇�"
@@ -34,18 +48,22 @@
ref="resembleQueryRef"
:hasResemble="this.hasResemble"
:column="this.resembleTableColumn"
+ :codeClassifyOid="codeClassifyOid"
:form="this.form"
- :codeRuleOid="codeRuleOid"
+ :templateOid="templateOid"
></ResembleQuery>
</el-tab-pane>
</el-tabs>
</div>
<div class="avue-dialog__footer" v-if="type !== 'detail'">
<el-button @click="close()">鍙� 娑�</el-button>
- <el-button @click="close()" type="primary" :loading="submitBtnLoading"
+ <el-button @click="submit()" type="primary" :loading="submitBtnLoading"
>纭� 瀹�</el-button
>
- <el-button @click="resembleQuerySubmit" type="primary" v-if="hasResemble"
+ <el-button
+ @click="resembleQuerySubmit"
+ type="primary"
+ v-if="showResembleQuery"
>鐩镐技鍍忔煡璇�</el-button
>
</div>
@@ -53,12 +71,12 @@
</template>
<script>
+import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
import FormTempalte from "./FormTempalte";
import ResembleQuery from "./ResembleQuery";
-import CodeApply from "./CodeApply";
export default {
name: "FormTemplateDialog",
- components: { ResembleQuery, FormTempalte, CodeApply },
+ components: { ResembleQuery, FormTempalte },
props: {
visible: {
type: Boolean,
@@ -70,11 +88,20 @@
},
title: {
type: String,
- default: "琛ㄥ崟妯℃澘",
+ default: "缂栫爜鐢宠",
},
width: {
type: String,
default: "80%",
+ },
+ rowOid: "",
+ codeClassifyOid: {
+ type: String,
+ default: "",
+ },
+ templateOid: {
+ type: String,
+ default: "",
},
},
data() {
@@ -84,9 +111,40 @@
hasResemble: false,
resembleTableColumn: [],
secVOList: [],
- activeName: "resembleQuery",
- codeRuleOid: '',
- form: {}
+ form: {},
+ activeName: "codeApply",
+ showCodeApply: true,
+ showResembleQuery: true,
+ selfColumnType: {
+ codefixedsec: "combox",
+ codeclassifysec: "refer",
+ codevariablesec: "text",
+ coderefersec: "refer",
+ },
+ selfColumnConfig: {
+ function: {
+ required: this.isRequired,
+ dicData: this.getOptionList,
+ type: this.getType,
+ },
+ exchange: {
+ text: "name",
+ field: "oid",
+ prop: "oid",
+ showField: "name",
+ parentClassifySecOid: "parentClassifySecOid",
+ label: "name",
+ maxlength: "codeSecLength",
+ data: "fixedValueVOList",
+ },
+ directVoluation: {
+ search: true,
+ props: {
+ label: "id",
+ value: "id",
+ },
+ },
+ },
};
},
created() {},
@@ -99,49 +157,140 @@
this.$emit("update:visible", val);
},
},
- showCodeApply() {
- if (this.type === "add") {
- if (this.hasResemble && this.secVOList.length === 0) {
- return false;
- }
- } else {
- if (this.hasResemble) {
- return false;
- }
- }
- return true;
- },
- showResembleQuery() {
- return this.hasResemble;
- },
},
methods: {
openDialog() {
- this.$nextTick(() => {
- this.$refs.FormTempalte.init()
- this.$refs.CodeApply.getCodeRule()
- })
+ this.getFormTemplate();
+ if (this.type === 'add') {
+ this.getCodeRule();
+ }
},
close() {
this.dialogVisible = false;
},
- getCodeRuleOid(data) {
- this.codeRuleOid = data.oid
- this.secVOList = data.secVOList
+ // 鎺ュ彛鑾峰彇琛ㄥ崟鏁版嵁
+ getFormTemplate() {
+ getFormTemplate({
+ templateOid: this.templateOid,
+ codeClassifyOid: this.codeClassifyOid,
+ })
+ .then((res) => {
+ if (res.status === 200) {
+ this.hasResemble =
+ res.data.resembleTableVO &&
+ res.data.resembleTableVO.cols &&
+ res.data.resembleTableVO.cols.length > 0;
+ this.resembleTableColumn = res.data.resembleTableVO.cols || [];
+ if (this.hasResemble) {
+ this.activeName = 'resembleQuery'
+ this.showResembleQuery = true
+ }
+ this.$refs.FormTempalte.templateRender(res.data.formDefineVO.items);
+ }
+ })
+ .catch((err) => {
+ this.loading = false;
+ console.log(err);
+ });
},
- getFormTemplate(data) {
- this.hasResemble =
- data.resembleTableVO &&
- data.resembleTableVO.cols &&
- data.resembleTableVO.cols.length > 0;
- this.resembleTableColumn = data.resembleTableVO.cols || [];
+ // 鑾峰彇鐮佸�肩敵璇锋暟鎹�
+ getCodeRule() {
+ getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
+ if (res.data && res.data.code === 200) {
+ const typeList = [
+ "codefixedsec",
+ "codeclassifysec",
+ "codevariablesec",
+ "coderefersec",
+ ];
+ this.secVOList = (res.data.data.secVOList || []).filter((item) =>
+ typeList.includes(item)
+ );
+ this.$nextTick(() => {
+ if (this.secVOList.length > 0 && this.type === 'add') {
+ this.showCodeApply = true
+ this.activeName = 'codeApply'
+ this.$refs.CodeApply.templateRender(this.secVOList);
+ } else {
+ this.showCodeApply = false
+ }
+ });
+ }
+ });
},
getFormData(form) {
- this.form = form
+ this.form = form;
},
resembleQuerySubmit() {
+ this.activeName = "resembleQuery";
this.$refs.resembleQueryRef.resembleQuery(this.form);
},
+ handleClick() {
+ if (this.activeName === "resembleQuery") {
+ this.resembleQuerySubmit();
+ }
+ },
+ async submit() {
+ // 杩涜琛ㄥ崟鏍￠獙
+ const formValidate = await this.$refs.FormTempalte.validate();
+ if (!formValidate) return;
+ let codeValidate = true;
+ // 杩涜鐮佸�肩敵璇锋牎楠�
+ if (this.showCodeApply) {
+ codeValidate = await this.$refs.codeApply.validate();
+ if (!codeValidate) return;
+ }
+ // 杩涜鐩镐技椤规煡璇�
+ const resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
+ this.form
+ );
+ if (resembleQueryList.length === 0) {
+ this.$emit("submit", this.form);
+ } else {
+ this.$confirm(
+ `璇ョ墿鏂欏凡鏈�${resembleQueryList.length}鏉＄浉浼兼暟鎹紝鏄惁缁х画淇濆瓨锛焋,
+ "闇�瑕佹偍纭",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ this.$emit("submit", this.form);
+ })
+ .catch(() => {});
+ }
+ },
+ getType(item) {
+ return this.selfColumnType[item.sectype];
+ },
+ isRequired(item) {
+ return item.nullableFlag != "true";
+ },
+ getOptionList(item) {
+ if (
+ Array.isArray(item.fixedValueVOList) &&
+ item.fixedValueVOList.length > 0
+ ) {
+ const configAttr = {
+ key: "id",
+ value: "id",
+ };
+ const optionList = item.fixedValueVOList.map((item) => {
+ for (const key in configAttr) {
+ if (Object.hasOwnProperty.call(configAttr, key)) {
+ const element = configAttr[key];
+ item[key] = item[element];
+ }
+ }
+ return item;
+ });
+ return optionList;
+ } else {
+ return [];
+ }
+ },
},
};
</script>
--
Gitblit v1.9.3