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

@@ -1,277 +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>&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">
                <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="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i :class="icons.id"></i>
                                    英文名称
                                </template>
                                {{ obj.id }}
                            </el-descriptions-item>
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i :class="icons.name"></i>
                                    中文名称
                                </template>
                                {{ obj.name }}
                            </el-descriptions-item>
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i :class="icons.tableName"></i>
                                    数据库表名
                                </template>
                                {{ obj.tableName }}
                            </el-descriptions-item>
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i :class="icons.domain"></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="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <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="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="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i :class="icons.to"></i>
                                    To段类型
                                </template>
                                <span v-for="item in obj.toBtmTypes" style="margin-left:2px">
                                    <el-tag size="small" effect="plain" style="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="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 span='2' labelStyle="text-align:center;width:120px">
                                <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 class="attributeCrud" v-model="obj" :data="obj.attributes" :option="loadOption">
                            <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-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 {
            addOption: {
                linkType: {},
            },
            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,
                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: {
                defaultExpandAll: true,
                title: '链接类型树',
                addBtn: false,
                props: {
                    labelText: '',
                    label: 'label',
                    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) {
            getDetail(data.oid).then(res => {
                this.obj = res.data.data;
            })
        },
        // 添加按钮点击事件
        linkTypeAdd() {
            this.$refs.linkAdd.showSubmitDialog = true;
        },
        // 编辑按钮点击事件
        linkTypeEdit() {
            this.addOption.linkType = this.obj;
            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;
            })
        },

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