From 660454e318a57cc82811908389cd4056fbfce1f7 Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期五, 25 八月 2023 16:55:05 +0800 Subject: [PATCH] 修改样式,修改编码规则 --- Source/UBCS-WEB/src/components/FormTemplate/index.vue | 563 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 521 insertions(+), 42 deletions(-) diff --git a/Source/UBCS-WEB/src/components/FormTemplate/index.vue b/Source/UBCS-WEB/src/components/FormTemplate/index.vue index 10b6e40..dc27ede 100644 --- a/Source/UBCS-WEB/src/components/FormTemplate/index.vue +++ b/Source/UBCS-WEB/src/components/FormTemplate/index.vue @@ -1,42 +1,521 @@ -<template> - <div> - </div> -</template> - -<script> - import { getFormTemplate } from '../../api/common'; - export default { - name: 'FormTemplate', - props: { - visible: { - type: Boolean, - default: false - }, - }, - 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); - }) - } - } - } -</script> - -<style lang='less' scoped> - -</style> \ No newline at end of file +<template> + <el-dialog + :visible.sync="dialogVisible" + v-if="dialogVisible" + v-dialogDrag + top="-5vh" + class="avue-dialog avue-dialog--top" + :title="title" + :width="width" + append-to-body + @opened="openDialog" + > + <FormTemplate + v-bind="$attrs" + :type="type" + :rowOid="rowOid" + :templateOid="templateOid" + v-if="dialogVisible" + ref="FormTemplate" + @getFormData="getFormData" + ></FormTemplate> + <div + class="tab_box" + v-if=" + type !== 'detail' && + dialogVisible && + (showCodeApply || showResembleQuery) && + type !== 'preview' + " + > + <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> + <el-tab-pane label="鐮佸�肩敵璇�" name="codeApply" v-if="showCodeApply"> + <FormTemplate + v-bind="$attrs" + :type="type" + :selfColumnType="selfColumnType" + :selfColumnConfig="selfColumnConfig" + ref="CodeApply" + @getFormData="getCodeApplyFormData" + @referConfigDataUpdate="referConfigDataUpdate" + ></FormTemplate> + </el-tab-pane> + <el-tab-pane + label="鐩镐技椤规煡璇�" + name="resembleQuery" + v-if="showResembleQuery" + > + <ResembleQuery + v-bind="$attrs" + ref="resembleQueryRef" + :hasResemble="this.hasResemble" + :column="this.resembleTableColumn" + :codeClassifyOid="codeClassifyOid" + :form="this.form" + :templateOid="templateOid" + ></ResembleQuery> + </el-tab-pane> + </el-tabs> + </div> + <template #footer> + <div class="" v-if="type !== 'detail'"> + <el-button @click="close()" size="small">鍙� 娑�</el-button> + <el-button + @click="submit()" + type="primary" + :loading="submitBtnLoading" + size="small" + >{{ submitText }}</el-button + > + <el-button + @click="resembleQuerySubmit" + type="primary" + size="small" + v-if="showResembleQuery" + >鐩镐技鍍忔煡璇�</el-button + > + </div> + </template> + </el-dialog> +</template> + +<script> +import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js"; +import FormTemplate from "./FormTemplate"; +import ResembleQuery from "./ResembleQuery"; +export default { + name: "FormTemplateDialog", + components: { ResembleQuery, FormTemplate }, + props: { + visible: { + type: Boolean, + default: false, + }, + type: { + type: String, + default: "add", + }, + title: { + type: String, + default: "缂栫爜鐢宠", + }, + width: { + type: String, + default: "80%", + }, + rowOid: "", + codeClassifyOid: { + type: String, + default: "", + }, + templateOid: { + type: String, + default: "", + }, + submitText: { + type: String, + default: "纭� 瀹�", + }, + setForm: { + type: Object, + default: () => ({}), + }, + }, + data() { + return { + loading: false, + submitBtnLoading: false, + hasResemble: false, + resembleTableColumn: [], + secVOList: [], + form: {}, + codeApplyForm: {}, + activeName: "codeApply", + showCodeApply: false, + showResembleQuery: false, + selfColumnType: { + codefixedsec: "combox",//鍥哄畾鐮佹 + codeclassifysec: "refer",//鍒嗙被鐮佹 + codevariablesec: "text",//鍙彉鐮佹 + coderefersec: "refer"//寮曠敤鐮佹 + }, + selfColumnConfig: { + function: { + required: this.isRequired, + dicData: this.getOptionList, + type: this.getType, + referConfig: this.getReferConfig, + readOnly: this.getDisabled, + }, + exchange: { + text: "name", + field: "oid", + prop: "oid", + showField: "name", + parentClassifySecOid: "parentClassifySecOid", + label: "name", + maxlength: "codeSecLength", + data: "fixedValueVOList", + dateFormate: "codeDateFormatStr" + }, + directVoluation: { + search: true, + props: { + label: "id", + value: "id", + }, + }, + }, + defaultKeys: [ + "oid", + "id", + "name", + "description", + "revisionoid", + "nameoid", + "btmname", + "lastr", + "firstr", + "lastv", + "firstv", + "creator", + "createtime", + "lastModifier", + "lastmodifytime", + "revisionrule", + "revisionseq", + "revisionvalue", + "versionrule", + "versionseq", + "versionvalue", + "lcstatus", + "ts", + "owner", + "checkinby", + "checkintime", + "checkoutby", + "checkouttime", + "copyfromversion", + "secretgrade", + ], + codeRuleOid: "", + }; + }, + created() {}, + computed: { + dialogVisible: { + get() { + return this.visible; + }, + set(val) { + this.$emit("update:visible", val); + }, + }, + }, + methods: { + openDialog() { + this.getFormTemplate(); + if (this.type === "add") { + this.getCodeRule(); + } + }, + close() { + this.dialogVisible = false; + }, + // 鎺ュ彛鑾峰彇琛ㄥ崟鏁版嵁 + 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; + } else { + this.showResembleQuery = false; + } + console.log(this.hasResemble, "this.hasResemblethis.hasResemble"); + this.$nextTick(() => { + this.$refs.FormTemplate.templateRender( + res.data.formDefineVO.items + ); + if (Object.keys(this.setForm).length > 0) { + this.$refs.FormTemplate.form = this.setForm; + } + }); + } + }) + .catch(() => { + this.loading = false; + }); + }, + // 鑾峰彇鐮佸�肩敵璇锋暟鎹� + getCodeRule() { + getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => { + if (res.data && res.data.code === 200) { + this.codeRuleOid = res.data.data.oid; + const typeList = [ + //鍥哄畾鐮佹 + "codefixedsec", + //鍒嗙被鐮佹 + "codeclassifysec", + //鍙彉鐮佹 + "codevariablesec", + //寮曠敤鐮佹 + "coderefersec" + ]; + this.secVOList = (res.data.data.secVOList || []).filter((item) => + typeList.includes(item.secType) + ); + if (this.secVOList.length > 0 && this.type === "add") { + this.showCodeApply = true; + this.activeName = "codeApply"; + this.$nextTick(() => { + this.$refs.CodeApply.templateRender(this.secVOList); + }); + } else { + this.showCodeApply = false; + } + } + console.log(' this.secVOList',this.secVOList) + console.log(' res.data.data.secVOList',res.data.data.secVOList) + }); + }, + getFormData(form) { + this.form = form; + }, + getCodeApplyFormData(codeApplyForm) { + this.codeApplyForm = codeApplyForm; + }, + // 鍙傜収缁勪欢鏁版嵁鍙樻洿 + referConfigDataUpdate(data) { + const { field } = data; + this.secVOList = this.secVOList.map((item) => { + if (item.parentClassifySecOid === field) { + this.$refs.CodeApply.form[item.oid] = undefined; + this.$refs.CodeApply.form[item.name] = undefined; + item.readOnly=false; + item.referConfig.extraParams.parentClassifyValueOid=data.value; + } + return item; + }); + this.$refs.CodeApply.templateRender(this.secVOList); + }, + resembleQuerySubmit() { + this.activeName = "resembleQuery"; + this.$refs.resembleQueryRef.resembleQuery(this.form); + }, + handleClick() { + if (this.activeName === "resembleQuery") { + this.resembleQuerySubmit(); + } + }, + async submit() { + // 杩涜琛ㄥ崟鏍¢獙 + const formValidate = await this.$refs.FormTemplate.validate(); + if (!formValidate) return; + let codeValidate = true; + // 杩涜鐮佸�肩敵璇锋牎楠� + // if (this.showCodeApply) { + // codeValidate = await this.$refs.CodeApply.validate(); + // if (!codeValidate) { + // this.activeName = "codeApply"; + // return false; + // } + // } + let resembleQueryList = []; + if (this.$refs.resembleQueryRef) { + // 杩涜鐩镐技椤规煡璇� + resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery( + this.form + ); + } + if (resembleQueryList.length > 0) { + await this.$confirm( + `璇ョ墿鏂欏凡鏈�${resembleQueryList.length}鏉$浉浼兼暟鎹紝鏄惁缁х画淇濆瓨锛焋, + "闇�瑕佹偍纭", + { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + } + ); + } + // 鎺掗櫎涓�浜涘瓧娈� + const noData = [ + "jiliangdwname", + "materialtypeText", + "morengongysname", + "$caigouwl", + "$xiaoshouwl", + "$shifoupihaoguanli", + "lcstatus_text", + "hesuanfenleiname", + "$kucunwl", + "oldcode", + "lastmodifier" + ]; + let resForm = {}; + const { defaultValue, formValue } = this.getDefaultValueAndFormValues( + this.form + ); + noData.forEach((item) => { + this.$delete(formValue, item); + }); + const keys = Object.keys(formValue); + debugger + keys.forEach((item, index) => { + keys.forEach((itm, idx) => { + if ((item === ('$' + itm)) && idx !== index) { + this.$delete(formValue, keys[index]); + } + }) + }); + + resForm.data = formValue; + resForm = Object.assign({}, resForm, defaultValue); + resForm.secDTOList = this.secVOList.map((item) => { + return { + secOid: item.oid, + secValue: this.codeApplyForm[item.oid], + }; + }); + resForm.codeClassifyOid = this.codeClassifyOid; + resForm.codeRuleOid = this.codeRuleOid; + resForm.templateOid = this.templateOid; + this.$emit("submit", resForm); + }, + getDefaultValueAndFormValues(form) { + let defaultValue = {}; + let formValue = {}; + for (const key in form) { + if (Object.hasOwnProperty.call(form, key)) { + const element = form[key]; + if (this.defaultKeys.includes(key)) { + defaultValue[key] = element; + } else { + formValue[key] = element; + } + } + } + return { + defaultValue, + formValue, + }; + }, + getType(item) { + return this.selfColumnType[item.secType]; + }, + getReferConfig(item) { + let params = {}; + if (item.secType == "codeclassifysec") { + //鍒嗙被鐮佹 + params = { + isMuti: false, + type: "grid", + tableConfig: { + limit: -1, + cols: [ + { + field: "id", + title: "鑻辨枃鍚嶇О", + sort: true, + width: 150, + }, + { + field: "name", + title: "涓枃鍚嶇О", + sort: true, + width: 150, + }, + { + field: "description", + title: "鎻忚堪", + width: 250, + }, + ], + queryColumns: [ + { + field: "id", + title: "鑻辨枃鍚嶇О", + }, + { + field: "name", + title: "涓枃鍚嶇О", + }, + ], + }, + url: "api/ubcs-code/ubcs-code/mdmEngineController/listCodeClassifyValueBySecOid", + extraParams: { + classifySecOid: item.oid, + parentClassifyValueOid: item.parentClassifySecOid + ? this.codeApplyForm[item.parentClassifySecOid] + : "", + }, + }; + } else if (item.secType == "coderefersec") { + //寮曠敤鐮佹 + params = JSON.parse(item.referValueInfo); + } + return params; + }, + getDisabled(item) { + if (item.secType === "codeclassifysec") { + if (item.parentClassifySecOid) { + if (!this.codeApplyForm[item.parentClassifySecOid]) { + return true; + } else { + return false; + } + } + } + }, + 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> + +<style lang="scss" scoped> +.key_attr_icon { + font-size: 24px; + position: relative; + top: 2px; + color: red; +} +// 瑙e喅swich缁勪欢涓嶅瀭鐩村眳涓殑闂 +/deep/ .el-switch { + vertical-align: baseline; +} +</style> -- Gitblit v1.9.3