Source/UBCS-WEB/src/views/modeling/LinkType.vue

@@ -1,32 +1,30 @@
<template>
    <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>&nbsp;
                        新增
                    </el-button>
                    <el-button type="primary" @click="linkTypeEdit" size="small">
                        <i class="el-icon-edit"></i>&nbsp;
                        修改
                    </el-button>
                </el-button-group>
            </el-header>

        <!-- 侧边栏树 -->
        <el-container>
            <el-aside width="240px">
            <el-aside style="width: 20%;">
                <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 }">
                  <div class="app">
                    <div style="display: flex;margin-bottom: 10px;">
                      <el-button type="primary" @click="linkTypeAdd" size="mini"  v-if="permissionList.addBtn" plain>
                        新增
                      </el-button>
                      <el-button type="primary" @click="linkTypeEdit" size="mini" v-if="permissionList.editBtn" plain>
                        修改
                      </el-button>
                    </div>
                    <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick"
                               class="businessTree">
                      <template class="el-tree-node__label" slot-scope="{ node, data }">
                            <span>
                                <i class="el-icon-star-on"></i>
                                {{ (node || {}).label }}
                            </span>
                        </span>
                      </template>
                    </avue-tree>
                  </div>
                </basic-container>
            </el-aside>
            <el-container>
@@ -64,7 +62,7 @@
                                    <i :class="icons.domain"></i>
                                    所属领域
                                </template>
                                <el-tag size="small">
                                <el-tag v-if="obj.domainText" size="small">
                                    {{ obj.domainText }}
                                </el-tag>
                            </el-descriptions-item>
@@ -97,7 +95,7 @@
                        </el-descriptions>

                       <el-descriptions class="margin-top" :column="2" size="medium" border>
                        <!-- 
                        <!--
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
@@ -122,7 +120,7 @@
                                </template>
                                {{ obj.description }}
                            </el-descriptions-item>
                        </el-descriptions> 
                        </el-descriptions>
                    </basic-container>
                    <!-- 属性列表-->
                    <basic-container>
@@ -142,7 +140,7 @@

    </el-container>
</template>
  

<script>
import {
    initTree,
@@ -151,12 +149,15 @@
    saveFromTable,
    getDetail
} from "@/api/omd/linkType"
import {mapGetters} from "vuex";
export default {
    name: "LinkType",
    data() {
        return {
            addOption: {
                linkType: {},
                linkType: {
                    attributes:[]
                },
            },
            domain: null,
            domainOptions: [],
@@ -177,7 +178,7 @@
            },
            loadOption: {
                border: true,
                height: 360,
                height: 'auto',
                editBtn: false,
                addBtn: false,
                menu: false,
@@ -214,6 +215,7 @@
            },
            obj: {},
            treeOption: {
                height:'auto',
                defaultExpandAll: true,
                title: '链接类型树',
                addBtn: false,
@@ -225,6 +227,15 @@
                }
            },
        }
    },
    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();
@@ -240,11 +251,17 @@
        },
        // 添加按钮点击事件
        linkTypeAdd() {
            this.$refs.linkAdd.linkType = {};
            this.$refs.linkAdd.showSubmitDialog = true;
        },
        // 编辑按钮点击事件
        linkTypeEdit() {
            this.addOption.linkType = this.obj;
            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.$refs.linkAdd.showSubmitDialog = true;
        },
@@ -268,10 +285,32 @@
    }
}
</script>
  
<style lang="scss">

<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>