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

@@ -1,36 +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 type="primary" @click="selectFromTable" size="small">
                    <i class="el-icon-thumb"></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>
@@ -38,88 +32,90 @@
                    <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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-finished"></i>
                                    <i :class="icons.id"></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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.name"></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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-date"></i>
                                    <i :class="icons.tableName"></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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-folder-opened"></i>
                                    <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>
                        </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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-sort-down"></i>
                                    <i :class="icons.from"></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-tag size="small" effect="plain" 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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-sort-up"></i>
                                    <i :class="icons.to"></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;">
                                <span v-for="item in obj.toBtmTypes" style="margin-left:2px">
                                    <el-tag size="small" effect="plain" style="margin-top: 2px;">
                                        {{ item.id + '（' + item.name + '）' }}
                                    </el-tag>
                                </span>
                            </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;">
                       <el-descriptions class="margin-top" :column="2" size="medium" border>
                        <!--
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.main"></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;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.main"></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>
                                    <i :class="icons.desc"></i>
                                    描述
                                </template>
                                {{ obj.description }}
@@ -130,19 +126,21 @@
                    <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 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" :linkType="addOption.linkType" :domainOption="domainOptions" :icons="icons"
            @refreshTable="initTreeOnLoad">
        </link-type-add>

    </el-container>
</template>
  

<script>
import {
    initTree,
@@ -151,17 +149,36 @@
    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" }
            ],
            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: 360,
                height: 'auto',
                editBtn: false,
                addBtn: false,
                menu: false,
@@ -180,7 +197,7 @@
                    },
                    {
                        label: '类型',
                        prop: 'attrDataType',
                        prop: 'attrDataTypeText',
                        align: 'center',
                        slot: true
                    },
@@ -196,68 +213,104 @@
                    }
                ]
            },
            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: '',
            },
            obj: {},
            treeOption: {
                height:'auto',
                defaultExpandAll: true,
                title: '链接类型树',
                addBtn: false,
                props: {
                    labelText: '',
                    label: 'name',
                    label: 'label',
                    value: 'oid',
                    children: 'childList',
                }
            },
        }
    },
    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();
        this.initDomainOption();
    },

    methods: {
        // 树点击
        nodeClick(data) {
            console.log(data);
            getDetail(data.oid).then(res => {
                this.obj = res.data.data;
            })
        },
        // 添加按钮点击事件
        linkTypeAdd() {

            this.$refs.linkAdd.linkType = {};
            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.$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">

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