From ef5bf67bac4342cf66c447295ab108cd569735f1 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期二, 16 四月 2024 18:20:08 +0800 Subject: [PATCH] 属性池映射管理 --- Source/UBCS-WEB/src/views/modeling/LinkType.vue | 549 +++++++++++++++++++++++++++++++----------------------- 1 files changed, 310 insertions(+), 239 deletions(-) diff --git a/Source/UBCS-WEB/src/views/modeling/LinkType.vue b/Source/UBCS-WEB/src/views/modeling/LinkType.vue index 18e6791..5e50452 100644 --- a/Source/UBCS-WEB/src/views/modeling/LinkType.vue +++ b/Source/UBCS-WEB/src/views/modeling/LinkType.vue @@ -1,263 +1,334 @@ <template> + <el-container> + <!-- 椤剁鎸夐挳 --> + + <!-- 渚ц竟鏍忔爲 --> <el-container> - <!-- 椤剁鎸夐挳 --> - <el-header class="businessHeader" style="height: 40px;"> - <el-button-group> - <el-button type="primary" @click="linkTypeAdd" size="small"> - <i class="el-icon-plus"></i> - 鏂板 - </el-button> - <el-button type="primary" @click="linkTypeEdit" size="small"> - <i class="el-icon-edit"></i> - 淇敼 - </el-button> - <el-button type="primary" @click="selectFromTable" size="small"> - <i class="el-icon-thumb"></i> - 浠庡凡鏈変腑鑾峰彇 - </el-button> - </el-button-group> - </el-header> - <!-- 渚ц竟鏍忔爲 --> - <el-container> - <el-aside width="240px"> - <basic-container class="businessTreeContainer"> - <p style="margin-top: 10px;font-weight: 570;font-size: 19px">{{ treeOption.title }}</p> - <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick" - class="businessTree"> - <span class="el-tree-node__label" slot-scope="{ node, data }"> - <span> + <el-aside style="width: 20%;"> + <basic-container class="businessTreeContainer"> + <div class="app"> + <div style="display: flex;margin-bottom: 10px;"> + <el-button v-if="permissionList.addBtn" plain size="mini" type="primary" @click="linkTypeAdd"> + 鏂板 + </el-button> + <el-button v-if="permissionList.editBtn" plain size="mini" type="primary" @click="linkTypeEdit"> + 淇敼 + </el-button> + </div> + <avue-tree :data="treeData" :option="treeOption" class="businessTree" + @node-click="nodeClick"> + <template slot-scope="{ node, data }" class="el-tree-node__label"> + + <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" effect="dark" + open-delay="250" + placement="bottom"> + <span> <i class="el-icon-star-on"></i> {{ (node || {}).label }} </span> - </span> - </avue-tree> - </basic-container> - </el-aside> - <el-container> - <el-main> - <basic-container> - <p style="margin-top: 10px;font-weight: 570;font-size: 19px">鍩烘湰淇℃伅</p> - <el-descriptions class="margin-top" :column="2" size="medium" border> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-finished"></i> - 鑻辨枃鍚嶇О - </template> - {{ obj.id }} - </el-descriptions-item> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-info"></i> - 涓枃鍚嶇О - </template> - {{ obj.name }} - </el-descriptions-item> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-date"></i> - 鏁版嵁搴撹〃鍚� - </template> - {{ obj.tableName }} - </el-descriptions-item> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-folder-opened"></i> - 鎵�灞為鍩� - </template> - <el-tag size="small"> - {{ obj.domainText }} - </el-tag> - </el-descriptions-item> - </el-descriptions> - <el-descriptions class="margin-top" direction="vertical" :column="2" border> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-sort-down"></i> - From绔被鍨� - </template> - <span v-for="item in obj.fromBtmTypes" style="margin-left:2px;"> - <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;"> + </el-tooltip> + </template> + </avue-tree> + </div> + </basic-container> + </el-aside> + <el-container> + <el-main> + <basic-container> + <p style="margin-top: 10px;font-weight: 570;font-size: 19px">鍩烘湰淇℃伅</p> + <el-descriptions :column="2" border class="margin-top" size="medium"> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.id"></i> + 鑻辨枃鍚嶇О + </template> + {{ obj.id }} + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.name"></i> + 涓枃鍚嶇О + </template> + {{ obj.name }} + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.tableName"></i> + 鏁版嵁搴撹〃鍚� + </template> + {{ obj.tableName }} + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.domain"></i> + 鎵�灞為鍩� + </template> + <el-tag v-if="obj.domainText" size="small"> + {{ obj.domainText }} + </el-tag> + </el-descriptions-item> + </el-descriptions> + <el-descriptions :column="2" border class="margin-top" direction="vertical"> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.from"></i> + From绔被鍨� + </template> + <span v-for="item in obj.fromBtmTypes" style="margin-left:2px;"> + <el-tag effect="plain" size="small" style="margin-top: 2px;"> {{ item.id + '锛�' + item.name + '锛�' }} </el-tag> </span> - </el-descriptions-item> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-sort-up"></i> - To娈电被鍨� - </template> - <span v-for="item in obj.toBtmTypes" style="height:26px;width:140px;margin-left:2px"> - <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;"> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.to"></i> + To娈电被鍨� + </template> + <span v-for="item in obj.toBtmTypes" style="margin-left:2px"> + <el-tag effect="plain" size="small" style="margin-top: 2px;"> {{ item.id + '锛�' + item.name + '锛�' }} </el-tag> </span> - </el-descriptions-item> - </el-descriptions> + </el-descriptions-item> + </el-descriptions> - <el-descriptions class="margin-top" :column="2" size="medium" border> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-info"></i> - 涓荤被鍨� - </template> - {{ obj.fromBtmTypeName }} - </el-descriptions-item> - <el-descriptions-item labelStyle="text-align:center;width:120px" - contentStyle="width:240px;text-align:center;word-break;break-all;"> - <template slot="label"> - <i class="el-icon-info"></i> - 涓荤被鍨� - </template> - {{ obj.toBtmTypeName }} - </el-descriptions-item> - <el-descriptions-item span='2' labelStyle="text-align:center;width:120px"> - <template slot="label"> - <i class="el-icon-chat-line-square"></i> - 鎻忚堪 - </template> - {{ obj.description }} - </el-descriptions-item> - </el-descriptions> - </basic-container> - <!-- 灞炴�у垪琛�--> - <basic-container> - <p style="margin-top: 10px;font-weight: 570;font-size: 19px">灞炴�у垪琛�</p> - <avue-crud class="attributeCrud" v-model="obj" :data="obj.attributes" :option="loadOption"> - <template slot="attrDataType" slot-scope="{row}"> - <el-tag>{{ row.attrDataType }}</el-tag> - </template> - </avue-crud> - </basic-container> - </el-main> - </el-container> - </el-container> - - + <el-descriptions :column="2" border class="margin-top" size="medium"> + <!-- + <el-descriptions-item :labelStyle="descriptionOption.labelStyle" + :contentStyle="descriptionOption.contentStyle"> + <template slot="label"> + <i :class="icons.main"></i> + 涓荤被鍨� + </template> + {{ obj.fromBtmTypeName }} + </el-descriptions-item> + <el-descriptions-item :labelStyle="descriptionOption.labelStyle" + :contentStyle="descriptionOption.contentStyle"> + <template slot="label"> + <i :class="icons.main"></i> + 涓荤被鍨� + </template> + {{ obj.toBtmTypeName }} + </el-descriptions-item> + --> + <el-descriptions-item labelStyle="text-align:center;width:120px" span='2'> + <template slot="label"> + <i :class="icons.desc"></i> + 鎻忚堪 + </template> + {{ obj.description }} + </el-descriptions-item> + </el-descriptions> + </basic-container> + <!-- 灞炴�у垪琛�--> + <basic-container> + <p style="margin-top: 10px;font-weight: 570;font-size: 19px">灞炴�у垪琛�</p> + <avue-crud v-model="obj" :data="obj.attributes" :option="loadOption" class="attributeCrud"> + <template slot="attrDataTypeText" slot-scope="{row}"> + <el-tag>{{ row.attrDataTypeText }}</el-tag> + </template> + </avue-crud> + </basic-container> + </el-main> + </el-container> </el-container> + <link-type-add ref="linkAdd" :domainOption="domainOptions" :icons="icons" :linkStatus="linkStatus" + :linkType="addOption.linkType" + @refreshTable="initTable"> + </link-type-add> + + </el-container> </template> - + <script> import { - initTree, - refOnLoad, - getDomain, - saveFromTable, - getDetail + initTree, + refOnLoad, + getDomain, + saveFromTable, + getDetail } from "@/api/omd/linkType" +import {mapGetters} from "vuex"; + export default { - name: "LinkType", - data() { - return { - treeData: [ - { id: "1", name: "2", label: "label" }, - { id: "a", name: "b", label: "c" } - ], - loadOption: { - border: true, - height: 360, - editBtn: false, - addBtn: false, - menu: false, - highlightCurrentRow: true, - refreshBtn: false, - columnBtn: false, - column: [ - { - label: '鑻辨枃鍚嶇О', - prop: 'id', - align: 'center' - }, { - label: '涓枃鍚嶇О', - prop: 'name', - align: 'center' - }, - { - label: '绫诲瀷', - prop: 'attrDataType', - align: 'center', - slot: true - }, - { - label: '榛樿鍊�', - prop: 'defaultValue', - align: 'center' - }, - { - label: '璇存槑', - prop: 'description', - align: 'center' - } - ] - }, - obj: { - id: 'linkType', - name: '閾炬帴绫诲瀷', - tableName: 'PLLT_OMD_LINKTYPE', - domain: 'ubcs-omd', - domainText: '瀵硅薄寤烘ā', - fromBtmTypes: [ - { id: 'btm', name: '涓氬姟绫诲瀷' }, - { id: 'btm2', name: '涓氬姟绫诲瀷2' } - ], - toBtmTypes: [{ id: 'btm', name: '涓氬姟绫诲瀷' }, { id: 'btm2', name: '涓氬姟绫诲瀷2' }], - fromBtmTypeName: '', - toBtmTypeName: '', - }, - treeOption: { - defaultExpandAll: true, - title: '閾炬帴绫诲瀷鏍�', - addBtn: false, - props: { - labelText: '', - label: 'name', - value: 'oid', - children: 'childList', - } - }, + name: "LinkType", + data() { + return { + nodeClickOid:'', + linkStatus: '', + addOption: { + linkType: { + attributes: [] + }, + }, + domain: null, + domainOptions: [], + icons: { + id: 'el-icon-finished', + name: 'el-icon-tickets', + tableName: 'el-icon-date', + domain: 'el-icon-folder-opened', + from: 'el-icon-sort-down', + to: 'el-icon-sort-up', + main: 'el-icon-warning-outline', + desc: 'el-icon-chat-line-square' + }, + treeData: [], + descriptionOption: { + labelStyle: 'text-align:center;width:120px', + contentStyle: 'width:240px;text-align:center;word-break;break-all;' + }, + loadOption: { + border: true, + height: 'auto', + editBtn: false, + addBtn: false, + menu: false, + highlightCurrentRow: true, + refreshBtn: false, + columnBtn: false, + column: [ + { + label: '鑻辨枃鍚嶇О', + prop: 'id', + align: 'center' + }, { + label: '涓枃鍚嶇О', + prop: 'name', + align: 'center' + }, + { + label: '绫诲瀷', + prop: 'attrDataTypeText', + align: 'center', + slot: true + }, + { + label: '榛樿鍊�', + prop: 'defaultValue', + align: 'center' + }, + { + label: '璇存槑', + prop: 'description', + align: 'center' + } + ] + }, + obj: {}, + treeOption: { + height: 'auto', + defaultExpandAll: true, + title: '閾炬帴绫诲瀷鏍�', + addBtn: false, + props: { + labelText: '', + label: 'label', + value: 'oid', + children: 'childList', } - }, - created() { - this.initTreeOnLoad(); - // this.initDomainOption(); - }, - - methods: { - // 鏍戠偣鍑� - nodeClick(data) { - console.log(data); - }, - // 娣诲姞鎸夐挳鐐瑰嚮浜嬩欢 - linkTypeAdd() { - - }, - // 缂栬緫鎸夐挳鐐瑰嚮浜嬩欢 - linkTypeEdit() { - - }, - // 浠庡凡鏈変腑鑾峰彇鎸夐挳鐐瑰嚮浜嬩欢 - selectFromTable() { - - }, - initTreeOnLoad() { - initTree().then(res => { - this.treeData = res.data.data; - }); - } - + }, } + }, + computed: { + ...mapGetters(["permission"]), + permissionList() { + return { + addBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_add, false), + editBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_edit, false), + } + } + }, + created() { + this.initTreeOnLoad(); + this.initDomainOption(); + }, + + methods: { + // 鏍戠偣鍑� + nodeClick(data) { + this.nodeClickOid = data.oid; + getDetail(data.oid).then(res => { + this.obj = res.data.data; + }) + }, + initTable(){ + getDetail(this.nodeClickOid).then(res => { + this.obj = res.data.data; + }) + }, + // 娣诲姞鎸夐挳鐐瑰嚮浜嬩欢 + linkTypeAdd() { + this.$refs.linkAdd.linkType = {}; + this.linkStatus = 'add'; + this.$refs.linkAdd.showSubmitDialog = true; + }, + // 缂栬緫鎸夐挳鐐瑰嚮浜嬩欢 + linkTypeEdit() { + var linktype = this.obj; + linktype.fromBtmValues = this.obj.fromBtmTypes; + linktype.toBtmValues = this.obj.toBtmTypes; + linktype.attributes = this.obj.attributes; + var json = JSON.stringify(linktype); + this.addOption.linkType = JSON.parse(json); + this.$refs.linkAdd.linkType = this.addOption.linkType; + this.linkStatus = 'edit'; + this.$refs.linkAdd.showSubmitDialog = true; + }, + // 浠庡凡鏈変腑鑾峰彇鎸夐挳鐐瑰嚮浜嬩欢 + selectFromTable() { + + }, + // 鍔犺浇鏈嶅姟鏍� + initTreeOnLoad() { + initTree().then(res => { + this.treeData = res.data.data; + }); + }, + // 鍔犺浇鏈嶅姟涓嬫媺妗� + initDomainOption() { + getDomain().then(res => { + this.domainOptions = res.data.data; + }) + }, + + } } </script> - -<style lang="scss"> -.attributeCrud>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { - display: none !important; + +<style lang="scss" scoped> +.attributeCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu { + display: none !important; } + +.app { + overflow: auto; + height: 84.3vh; +} + +.app::-webkit-scrollbar { + height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓 + background: white; + border: white; + width: 10px; + +} + +// 婊氬姩鏉$殑婊戝潡 +.app::-webkit-scrollbar-thumb { + width: 10px; + height: 10px; + background-color: #ececec; + border-radius: 20px; + border: #ececec; +} + + </style> - \ No newline at end of file -- Gitblit v1.9.3