From ef5f708fd5863c0c938e39b2ae754fd0c761a639 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期五, 02 八月 2024 11:50:09 +0800 Subject: [PATCH] 链接类型搭建创建对话框以及一致性检查 创建视图 && 版本管理模块所有功能 --- Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue | 573 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 570 insertions(+), 3 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue index e153ed7..4aee662 100644 --- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue +++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue @@ -1,13 +1,580 @@ <template> - <p>閾炬帴绫诲瀷</p> + <el-container v-loading="createViewLoading"> + <el-aside> + <basic-container> + <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> + <div class="headerCon"> + <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">鍒涘缓 + </el-button> + <el-button icon="el-icon-edit" plain size="small" type="primary">淇敼 + </el-button> + <el-button icon="el-icon-delete" plain size="small" type="danger">鍒犻櫎 + </el-button> + <el-button icon="el-icon-view" plain size="small" type="primary">鏌ョ湅 + </el-button> + <el-button icon="el-icon-download" plain size="small" type="primary">瀵煎嚭 + </el-button> + <el-button icon="el-icon-upload2" plain size="small" type="primary">瀵煎叆 + </el-button> + <el-button icon="el-icon-circle-plus-outline" plain size="small" + type="primary" @click="createViewClickHandler">鍒涘缓瑙嗗浘 + </el-button> + <el-button icon="el-icon-menu" plain size="small" + type="primary" @click="checkClickHandler">涓�鑷存�ф鏌� + </el-button> + </div> + <!-- 宸︿晶鏍� --> + <div style="height: calc(100vh - 300px);"> + <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick"> + <span slot-scope="{ node, data }" class="el-tree-node__label"> + <span style="font-size: 15px"> + <i class="el-icon-s-promotion"></i> + {{ (node || {}).label }} + </span> + </span> + </avue-tree> + </div> + </div> + </basic-container> + </el-aside> + + <el-main> + <basic-container> + <div> + <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> + {{ nodeRow.name }} + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.name"></i> + 鏍囩 + </template> + {{ nodeRow.tag }} + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.tableName"></i> + 瀹炵幇绫� + </template> + {{ nodeRow.implClass }} + </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="nodeRow.shape"> + {{ nodeRow.shape }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.desc"></i> + 鎻忚堪 + </template> + {{ nodeRow.description }} + </el-descriptions-item> + </el-descriptions> + + <el-descriptions :column="3" 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 nodeRow.btmItemsFrom" style="margin-left:2px;"> + <el-tag effect="plain" style="margin-top: 2px;"> + {{ item }} + </el-tag> + </span> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.from"></i> + Form绔富绫诲瀷 + </template> + <el-tag v-if="nodeRow.primitivesFrom" effect="plain"> + {{ nodeRow.primitivesFrom === '璇烽�夋嫨' ? nodeRow.btmItemsFrom[0] : nodeRow.primitivesFrom }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.from"></i> + From绔搴斿叧绯� + </template> + <el-tag v-if="nodeRow.relationFrom" effect="plain">{{ nodeRow.relationFrom }}</el-tag> + </el-descriptions-item> + + </el-descriptions> + + <el-descriptions :column="3" border class="margin-top" direction="vertical"> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.to"></i> + To绔被鍨� + </template> + <span v-for="item in nodeRow.btmItemsTo" style="margin-left:2px;"> + <el-tag effect="plain" style="margin-top: 2px;"> + {{ item }} + </el-tag> + </span> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.to"></i> + To绔富绫诲瀷 + </template> + <el-tag v-if="nodeRow.primitivesTo" effect="plain"> + {{ nodeRow.primitivesTo === '璇烽�夋嫨' ? nodeRow.btmItemsTo[0] : nodeRow.primitivesTo }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item :contentStyle="descriptionOption.contentStyle" + :labelStyle="descriptionOption.labelStyle"> + <template slot="label"> + <i :class="icons.to"></i> + To绔搴斿叧绯� + </template> + <el-tag v-if="nodeRow.relationTo" effect="plain">{{ nodeRow.relationTo }}</el-tag> + </el-descriptions-item> + + </el-descriptions> + </div> + <div style="margin-top: 20px"> + <h3>灞炴�ф睜鍒楄〃</h3> + <avue-crud + :data="tableData" + :option="tableOption" + ></avue-crud> + </div> + </basic-container> + </el-main> + + <!-- 鍒涘缓 && 缂栬緫 --> + <el-dialog + v-dialogDrag + :visible.sync="visible" + append-to-body="true" + class="avue-dialog" + title="鍒涘缓" + width="70%" + > + <el-form ref="form" :model="form" :rules="rules" label-width="90px"> + <div class="dialogForm"> + <div class="leftForm"> + <el-form-item label="鍚嶇О锛�" prop="name"> + <el-input v-model="form.name"></el-input> + </el-form-item> + <el-form-item label="鏍囩锛�"> + <el-input v-model="form.tag"></el-input> + </el-form-item> + <el-form-item label="瀹炵幇绫伙細"> + <el-input v-model="form.impClass"></el-input> + </el-form-item> + <el-form-item label="褰㈢姸"> + <el-input v-model="form.shape"></el-input> + </el-form-item> + <el-form-item label="鎻忚堪"> + <el-input v-model="form.description" :rows="2" type="textarea"></el-input> + </el-form-item> + </div> + + <div class="centerForm"> + <el-form-item label="Form绔被鍨嬶細" label-width="110px"> + <el-input v-model="form.btmItemsFrom"></el-input> + </el-form-item> + <el-form-item label="瀵瑰簲鍏崇郴锛�" label-width="110px"> + <el-select v-model="form.relationFrom"> + <el-option label="N" value="N"></el-option> + <el-option label="1" value="1"></el-option> + </el-select> + </el-form-item> + <el-form-item label="涓荤被鍨嬶細" label-width="110px"> + <el-input v-model="form.primitivesFrom"></el-input> + </el-form-item> + </div> + + <div class="rightForm"> + <el-form-item label="To绔被鍨嬶細" label-width="110px"> + <el-input v-model="form.btmItemsTo"></el-input> + </el-form-item> + <el-form-item label="瀵瑰簲鍏崇郴锛�" label-width="110px"> + <el-select v-model="form.relationTo"> + <el-option label="N" value="N"></el-option> + <el-option label="1" value="1"></el-option> + </el-select> + </el-form-item> + <el-form-item label="涓荤被鍨嬶細" label-width="110px"> + <el-input v-model="form.primitivesTo"></el-input> + </el-form-item> + </div> + </div> + </el-form> + + <div class="bottomForm"> + <h3>灞炴�ф睜鍒楄〃</h3> + <avue-crud + :data="dialogBottomData" + :option="dialogBottomOption" + > + <template slot="menuLeft" slot-scope="scope"> + <el-button icon="el-icon-plus" plain size="small" type="primary" @click="dialogAddClickHandler">澧� 鍔� + </el-button> + </template> + </avue-crud> + </div> + <span slot="footer" class="dialog-footer"> + <el-button>鍙� 娑�</el-button> + <el-button type="primary">纭� 瀹�</el-button> + </span> + + <!-- 灞炴�ф睜鍒楄〃 --> + <el-dialog + v-dialogDrag + :visible.sync="attrPollDialogVisible" + append-to-body="true" + class="avue-dialog" + title="灞炴�ф睜" + width="60%" + @close="dialogAttrClose" + > + <avue-crud + ref="dialogAttrCrud" + :key="dialogAttrReload" + :data="dialogAttrData" + :option="dialogAttrOption" + :table-loading="dialogAttrLoading" + @selection-change="dialogAttrSelectChange" + @row-click="dialogAttrRowClickHandler" + > + </avue-crud> + <span slot="footer" class="dialog-footer"> + <el-button @click="dialogAttrClose">鍙� 娑�</el-button> + <el-button type="primary">纭� 瀹�</el-button> + </span> + </el-dialog> + </el-dialog> + + <!-- 涓�鑷存�ф鏌� --> + <el-dialog + v-dialogDrag + :visible.sync="checkVisible" + append-to-body="true" + class="avue-dialog" + title="涓�鑷存�ф鏌�" + width="60%" + > + </el-dialog> + </el-container> </template> <script> +import {gridLink, getByAttributeNames, checkLinkType, createView} from "@/api/modeling/linkType/api"; +import basicOption from '@/util/basic-option' +import {gridAttribute} from "@/api/modeling/attributePool/api"; + export default { - name: "index" + name: "index", + data() { + return { + dialogAttrReload: Math.random(), + dialogAttrSelectList: [], + dialogAttrLoading: false, + dialogAttrData: [], // 灞炴�ф睜鏂板琛ㄦ牸 + dialogAttrOption: { + ...basicOption, + addBtn: false, + menu: false, + refreshBtn: false, + index:false, + highlightCurrentRow: true, + height:450, + column: [ + { + label: '灞炴�у悕', + prop: 'id', + sortable: true, + }, + { + label: '灞炴�х被鍨�', + prop: 'attributeDataType', + sortable: true, + }, + { + label: '鍒濆鍊�', + prop: 'defaultValue', + sortable: true, + }, + { + label: '璇存槑', + prop: 'description', + sortable: true, + overHidden:true + } + ] + }, + attrPollDialogVisible: false, // 瀵硅瘽妗� 灞炴�ф睜鍒楄〃visible + createViewLoading: false, // 鍒涘缓瑙嗗浘 + checkVisible: false, + rules: { + name: [ + {required: true, message: '璇疯緭鍏ュ悕绉�', trigger: 'blur'}, + ], + }, + form: { + name: '', // 鍚嶇О + tag: '', // 鏍囩 + impClass: '', // 瀹炵幇绫� + shape: '', // 褰㈢姸 + description: '', // 鎻忚堪 + btmItemsFrom: '', // From绔被鍨嬪垪琛� + relationFrom: 'N', // form绔搴斿叧绯� + primitivesFrom: '', // form绔富绫诲瀷 + btmItemsTo: '', // to绔被鍨嬪垪琛� + relationTo: 'N', // to绔搴斿叧绯� + primitivesTo: '', // to绔富绫诲瀷 + }, + dialogBottomOption: { + ...basicOption, + editBtn: false, + refreshBtn: false, + selection: false, + height: 300, + addBtn: false, + delBtn: false, + // index:false, + column: [ + { + label: '灞炴�у悕', + prop: 'id', + sortable: true, + }, + { + label: '灞炴�х被鍨�', + prop: 'attributeDataType', + sortable: true, + }, + { + label: '鍒濆鍊�', + prop: 'defaultValue', + sortable: true, + }, + { + label: '璇存槑', + prop: 'description', + } + ] + }, + dialogBottomData: [], + visible: false, + treeOption: { + height: 'auto', + defaultExpandAll: false, + menu: false, + addBtn: false, + props: { + label: 'name', + value: 'name', + children: 'children' + } + }, + treeData: [], + tableData: [], + tableOption: { + ...basicOption, + editBtn: false, + refreshBtn: false, + selection: false, + // index:false, + addBtn: false, + menu: false, + column: [ + { + label: '灞炴�у悕', + prop: 'id', + sortable: true, + }, + { + label: '灞炴�х被鍨�', + prop: 'attributeDataType', + sortable: true, + }, + { + label: '鍒濆鍊�', + prop: 'defaultValue', + sortable: true, + }, + { + label: '璇存槑', + prop: 'description', + } + ] + }, + nodeRow: {}, + descriptionOption: { + labelStyle: 'text-align:center;width:120px', + contentStyle: 'width:240px;text-align:center;word-break;break-all;' + }, + icons: { + id: 'el-icon-finished', + name: 'el-icon-tickets', + tableName: 'el-icon-date', + domain: 'el-icon-connection', + from: 'el-icon-sort-down', + to: 'el-icon-sort-up', + main: 'el-icon-warning-outline', + desc: 'el-icon-chat-line-square' + }, + } + }, + created() { + this.getTreeList(); + }, + mounted() { + + }, + methods: { + // 鏍憃nLoad璇锋眰 + getTreeList() { + gridLink().then(res => { + const data = res.data.data; + this.treeData = data; + this.tableLoading = false; + }).catch(err => { + this.$message.error(err) + }); + }, + + // 鏍戠偣鍑讳簨浠� + nodeClick(row) { + this.nodeRow = row; + this.getAttrPollData(row); // 鑾峰彇灞炴�ф睜鍒楄〃 + }, + + // 鑾峰彇灞炴�ф睜鍒楄〃 + getAttrPollData(row) { + let value = row.attributes.join(','); + getByAttributeNames({attrNames: value}).then(res => { + if (res.data.code === 200) { + this.tableData = res.data.data; + } + }) + }, + + // 鍒涘缓鎸夐挳 + addClickHandler() { + this.visible = true; + }, + + // 涓�鑷存�ф鏌� + checkClickHandler() { + this.checkVisible = true; + checkLinkType().then(res => { + + }).catch(err => { + this.$message.error(err) + }) + }, + + // 鍒涘缓瑙嗗浘 + createViewClickHandler() { + this.createViewLoading = true; + createView().then(res => { + if (res.data.code === 200) { + this.createViewLoading = false; + this.$message.success(res.data.obj) + } + }) + }, + + // 瀵硅瘽妗� 灞炴�ф睜鍒楄〃澧炲姞鎸夐挳 + dialogAddClickHandler() { + this.dialogAttrLoading = true; + this.attrPollDialogVisible = true; + this.dialogAttrReload = Math.random(); // 寮哄埗鍒锋柊琛ㄦ牸 瑙e喅琛ㄦ牸閿欒 + gridAttribute(1, -1, this.searchParams).then(res => { + const data = res.data.data; + this.dialogAttrData = data; + this.dialogAttrLoading = false; + }).catch(err => { + this.$message.error(err) + }); + }, + + // 娣诲姞灞炴�ф睜琛ㄦ牸閫夋嫨妗� + dialogAttrSelectChange(row) { + this.dialogAttrSelectList = row; + }, + + // 娣诲姞灞炴�ф睜 琛岀偣鍑� + dialogAttrRowClickHandler(row) { + this.$refs.dialogAttrCrud.toggleRowSelection(row); + }, + + // 娣诲姞灞炴�ф睜 鍏抽棴瀵硅瘽妗� + dialogAttrClose(){ + this.attrPollDialogVisible = false; + } + } } </script> -<style scoped> +<style lang="scss" scoped> +::v-deep { + .el-scrollbar__wrap { + overflow: auto !important; + } + .el-form-item .el-select { + width: 100%; + } +} + +.headerCon { + display: flex; + flex-wrap: wrap; + margin-bottom: 5px; + + .el-button + .el-button { + margin-left: 5px; + } + + .el-button { + margin-top: 5px; + } +} + +.headerCon > .el-button:nth-child(4) { + margin-left: 0; +} + +.headerCon > .el-button:nth-child(7) { + margin-left: 0; +} + +.dialogForm { + display: flex; + justify-content: space-around; +} + +.dialogForm > div { + width: 28%; + border: 1px solid #eee; + padding: 25px 20px 5px 10px; /* 涓� 鍙� 涓� 宸� */ + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 娣诲姞闃村奖鏁堟灉 */ +} </style> -- Gitblit v1.9.3