From 1418642b163ccf13f01070f235e470b115f584ad Mon Sep 17 00:00:00 2001 From: lihang <lihang@vci-tech.com> Date: 星期二, 06 六月 2023 16:49:23 +0800 Subject: [PATCH] 链接类型添加组件 --- Source/UBCS-WEB/src/views/modeling/LinkTypeAdd.vue | 388 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 388 insertions(+), 0 deletions(-) diff --git a/Source/UBCS-WEB/src/views/modeling/LinkTypeAdd.vue b/Source/UBCS-WEB/src/views/modeling/LinkTypeAdd.vue new file mode 100644 index 0000000..8c7753a --- /dev/null +++ b/Source/UBCS-WEB/src/views/modeling/LinkTypeAdd.vue @@ -0,0 +1,388 @@ +<template> + <el-dialog title="閾炬帴绫诲瀷" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="70%" + style="height: 115vh;"> + <el-form ref="form" :model="linkType" show-message="true" inline size="medium" label-suffix=":" + class="linkTypeForm" :rules="rules" @resetFields="resetForm" status-icon="true"> + <el-form-item label="鑻辨枃鍚嶇О" label-width="100px" required="true" prop="id"> + <el-input v-model="linkType.id" :prefix-icon="icons.id" maxlength="15" show-word-limit type="text"></el-input> + </el-form-item> + <el-form-item label="涓枃鍚嶇О" label-width="100px"> + <el-input v-model="linkType.name" :prefix-icon="icons.name"></el-input> + </el-form-item> + <el-form-item label="鏁版嵁搴撹〃鍚�" label-width="100px"> + <el-input v-model="linkType.tableName" :prefix-icon="icons.tableName"></el-input> + </el-form-item> + <el-form-item label="鎵�灞為鍩�" label-width="100px" prop="domain"> + <el-select v-model="linkType.domain" :prefix-icon="icons.domain"> + <el-option v-for="item in domainOption" :label="item.label" :value="item.value" + :key="item.value"></el-option> + </el-select> + </el-form-item> + <el-form-item label="From绔被鍨�" label-width="100px"> + <!-- from绔笟鍔$被鍨嬮�夋嫨 --> + <el-select v-model="fromBtmValues" :value="fromBtmTypes" value-key="oid" placeholder="璇烽�夋嫨From绔被鍨�" filterable multiple collapse-tags @change="fromSelectChange"> + <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name"> + <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name" + :value="item"> + </el-option> + </el-option-group> + </el-select> + </el-form-item> + <el-form-item label="To绔被鍨�" label-width="100px"> + <!-- to绔笟鍔$被鍨嬮�夋嫨 --> + <el-select v-model="toBtmValues" :value="toBtmTypes" value-key="oid" placeholder="璇烽�夋嫨To绔被鍨�" filterable multiple collapse-tags @change="toSelectChange"> + <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name"> + <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name" + :value="item"> + </el-option> + </el-option-group> + </el-select> + </el-form-item> + <el-form-item label="鎻忚堪" label-width="100px" class="description"> + <el-input v-model="linkType.description" :prefix-icon="icons.desc" class="descClass" id="descId"></el-input> + </el-form-item> + </el-form> + <avue-crud :option="option" :data="linkType.attributes" :page.sync="page" ref="attrTable" + @cell-mouse-enter="cellEditClick" @cell-mouse-leave="cellEditSave"> + <template slot-scope="scope" slot="menuLeft"> + <el-button type="danger" icon="el-icon-plus" size="small" @click="rowAdd()">灞炴�ч�夋嫨</el-button> + </template> + + </avue-crud> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="submitlinkType">纭畾</el-button> + <el-button @click="cancleSubmitlinkType">鍙栨秷</el-button> + </div> + + <!-- 灞炴�ф睜鐨勯�夋嫨 --> + <el-dialog title="灞炴�ф睜" :visible="attrRef.visible" append-to-body @close="closeAttrDialog" width="80%"> + <avue-crud class="attrRef" :option="attrRef.option" :data="attrRef.data" :page.sync="attrRef.page" ref="attrRef" + @on-load="attrRefOnLoad" @search-change="attrRefSearch" @selection-change="selectionChange"> + <template slot="typeValue" slot-scope="scope"> + <el-tag>{{ scope.row.typeValue }}</el-tag> + </template> + </avue-crud> + <div slot="footer" class="dialog-footer"> + <el-button @click="confirmSelectAttr">纭畾</el-button> + <el-button @click="cancleSelectAttr">鍙栨秷</el-button> + </div> + </el-dialog> + + </el-dialog> +</template> + + +<script> + +import { add, update } from '@/api/omd/linkType'; +import { queryPage } from '@/api/omd/OmdAttribute'; +import { getPage } from '@/api/omd/revisionRule'; +import { initTree } from "@/api/omd/btmType" +export default { + name: 'LinkTypeAdd', + props: { + linkType: { + type: Object + }, + domainOption: { + type: Array + }, + icons: { + type: Array + } + }, + data() { + return { + form: {}, + showSubmitDialog: false, + option: { + height: "330px", + selection: true, + headerAlign: 'center', + border: true, + index: true, + rowKey: 'id', + tabs: true, + menu: false, + addBtn: false, + highlightCurrentRow: true, + column: [ + { + label: '鑻辨枃鍚嶇О', + prop: 'id', + align: 'center' + }, { + label: '涓枃鍚嶇О', + prop: 'name', + align: 'center', + cell: true + }, + { + label: '绫诲瀷', + prop: 'attrDataType', + align: 'center', + slot: true + }, + { + label: '榛樿鍊�', + prop: 'defaultValue', + align: 'center', + cell: true + }, + { + label: '璇存槑', + prop: 'description', + align: 'center', + cell: true + } + ] + }, + attrRef: { + visible: false, + page: { + currentPage: 1, + pageSize: 10, + }, + key: null, + option: { + height: 360, + addBtn: false, + refreshBtn: false, + columnBtn: false, + selection: true, + menu: false, + border: true, + reserveSelection: true, + searchMenuSpan: 8, + highlightCurrentRow: true, + column: [ + { + label: '鑻辨枃鍚嶇О', + prop: 'id', + align: 'left', + search: true, + width: 230 + }, { + label: '涓枃鍚嶇О', + prop: 'name', + align: 'center', + }, + { + label: '绫诲瀷', + prop: 'typeValue', + align: 'center' + }, + { + label: '榛樿鍊�', + prop: 'defaultValue', + align: 'center' + }, + { + label: '鍏佽涓虹┖', + prop: 'nullable', + type: 'switch', + display: false, + hide: true, + labelWidth: 132, + dicData: [{ + label: '鍚�', + value: 1 + }, { + label: '鏄�', + value: 0 + }] + }, + { + label: '璇存槑', + prop: 'description', + cell: true, + align: 'center' + } + ] + }, + data: [], + queryNotIn: null + }, + fromBtmValues: [], + toBtmValues: [], + domainList: [], + rules: { + id: [ + { required: true, message: '璇疯緭鍏ラ摼鎺ョ被鍨嬬紪鍙�', trigger: 'blur' }, + { pattern: /^[A-Za-z]+$/, message: '閾炬帴绫诲瀷缂栧彿鍙兘涓鸿嫳鏂�', trigger: 'blur' }, + { min: 2, max: 15, message: '闀垮害鍦�2鍒�15涓瓧绗�', trigger: 'blur' } + ], + domain: [ + { required: true, message: '璇烽�夋嫨鎵�灞為鍩�', trigger: 'blur' } + ] + }, + } + }, + created() { + this.initTreeOnLoad(); + }, + methods: { + // 鍏抽棴缁勪欢寮圭獥 + closeSubmitDialog() { + this.showSubmitDialog = false; + this.linkType.attributes = []; + this.linkType = {}; + this.attrRef.selectData = []; + this.attrRef.queryNotIn = null; + this.resetForm(); + }, + // 鍏抽棴灞炴�ф睜鏌ヨ寮圭獥 + closeAttrDialog() { + this.attrRef.visible = false; + }, + initTreeOnLoad() { + initTree().then(res => { + this.domainList = res.data.data; + }); + }, + // 娣诲姞 + rowAdd() { + this.attrRef.visible = true; + this.attrRefOnLoad(); + }, + // 灞炴�ф睜鍔犺浇 + attrRefOnLoad() { + queryPage(this.attrRef.key, this.attrRef.queryNotIn, this.attrRef.page.currentPage, this.attrRef.page.pageSize).then(res => { + const data = res.data.data; + this.attrRef.page.total = data.total; + this.attrRef.data = data.records; + }); + this.$nextTick(() => { + this.$refs.attrRef.refreshTable(); + }); + }, + // 灞炴�ф睜妫�绱� + attrRefSearch(form, done) { + this.attrRef.key = form.key + this.attrRefOnLoad(); + done(); + this.attrRef.key = null; + }, + // 灞炴�ф睜鍕鹃�変簨浠� + selectionChange(list) { + this.attrRef.selectData = list; + }, + // 纭灞炴�ф睜鍕鹃�� + confirmSelectAttr() { + if(!this.linkType.attributes){ + this.linkType.attributes = []; + } + this.attrRef.queryNotIn = ""; + console.log(this.attrRef.selectData); + this.attrRef.selectData.forEach(item => { + this.linkType.attributes.push({ + id: item.id, + name: item.name, + typeValue: item.typeValue, + typeKey: item.typeValue, + attrDataType: item.typeKey, + defaultValue: item.defaultValue, + description: item.description, + attributeLength: item.maxLength + }); + this.attrRef.queryNotIn += (item.id + ",") + }); + this.closeAttrDialog(); + }, + // 鍙栨秷灞炴�ф睜鍕鹃�� + cancleSelectAttr() { + this.attrRef.selectData = []; + this.closeAttrDialog(); + }, + // 娣诲姞涓氬姟绫诲瀷 + submitlinkType() { + add(this.linkType, true).then(res => { + // 娣诲姞瀹屾垚锛屽洖璋冪埗缁勪欢鐨勫埛鏂� + this.$message.success('淇濆瓨鎴愬姛'); + this.cancleSubmitlinkType(); + this.$emit('refreshTable'); + }) + }, + // 鍙栨秷娣诲姞涓氬姟绫诲瀷 + cancleSubmitlinkType() { + this.linkType = {}; + this.linkType.attributes = []; + this.showSubmitDialog = false; + }, + // 鍒锋柊灞炴�у垪琛� + refreshAttrTable() { + this.$nextTick(() => { + this.$refs.attrTable.refreshTable(); + }) + }, + // + viewChange() { + + }, + // 鍒楄〃缂栬緫 + cellEditClick(cell) { + cell.$cellEdit = true; + }, + // 鍒楄〃缂栬緫淇濆瓨 + cellEditSave(row) { + this.linkType.attributes[row.$index].name = row.name + this.linkType.attributes[row.$index].defaultValue = row.defaultValue; + this.linkType.attributes[row.$index].description = row.description; + row.$cellEdit = false; + }, + fromSelectChange(dataList){ + this.linkType.fromBtmTypes = []; + var fromBtmName = ""; + var fromBtmType = ""; + dataList.forEach(data => { + //this.linkType.fromBtmTypes.push(data); + fromBtmName += (data.name + ','); + fromBtmType += (data.id + ','); + }) + this.linkType.fromBtmTypeName = fromBtmName; + this.linkType.fromBtmType = fromBtmType; + }, + toSelectChange(dataList){ + console.log(dataList); + this.linkType.toBtmTypes = []; + var toBtmName = ""; + var toBtmType = ""; + dataList.forEach(data => { + //this.linkType.toBtmTypes.push(data); + toBtmName += (data.name + ','); + toBtmType += (data.id + ','); + }) + this.linkType.toBtmTypeName = toBtmName; + this.linkType.toBtmType = toBtmType; + console.log(this.linkType); + }, + resetForm(){ + this.linkType = {}; + this.$refs.form.resetFields(); + } + } +} +</script> + +<style> +/* 灞炴�ф睜鍙傜収鍒楄〃 */ +.attrRef>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { + display: none !important; +} + +.revisionRef>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { + display: none !important; +} + +.linkTypeForm>.el-form-item>.el-form-item__content>.el-input>.el-input__inner { + width: 200px; +} + +.descClass>.el-input__inner { + width: 57vw +} + +#descId { + width: 57vw; +} +</style> -- Gitblit v1.9.3