Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/businessType/index.vue

@@ -1,13 +1,283 @@
<template>
  <p>业务类型</p>
  <el-container>
    <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" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="createViewClickHandler">创建视图
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="checkClickHandler">创建索引
            </el-button>
            <el-button icon="el-icon-menu" plain size="small" style="width: 82px;text-align: center;padding-left: 1px"
                       type="primary" @click="checkClickHandler">一致性检查
            </el-button>
            <el-button class="miniBtn" icon="el-icon-delete" plain size="small"
                       type="danger" @click="checkClickHandler">删除数据
            </el-button>
            <el-button class="smallBtn" plain size="small"
                       type="danger" @click="checkClickHandler">删除全部类型
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary">查看使用范围
            </el-button>
          </div>
          <!-- 左侧树 -->
          <div style="height:  calc(100vh - 330px);">
            <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 style="display: flex;justify-content: center">
          <div class="descBox">
            <el-descriptions  :column="1" border class="margin-top" size="medium" title="属性信息">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.name"></i>
                  名称
                </template>
                <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.label"></i>
                  标签
                </template>
                <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.implClass"></i>
                  实现类
                </template>
                <el-tooltip class="item" effect="dark" :content="nodeRow.implClass" placement="top-start">
                  <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag>
                </el-tooltip>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.desc"></i>
                  描述
                </template>
                <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="descBox">
            <el-descriptions  :column="1" border class="margin-top" size="medium" title="属性信息">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.name"></i>
                  名称
                </template>
                <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.label"></i>
                  标签
                </template>
                <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.implClass"></i>
                  实现类
                </template>
                <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.desc"></i>
                  描述
                </template>
                <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="descBox">
            <el-descriptions  :column="1" border class="margin-top" size="medium" title="属性信息">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.name"></i>
                  名称
                </template>
                <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.label"></i>
                  标签
                </template>
                <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.implClass"></i>
                  实现类
                </template>
                <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.desc"></i>
                  描述
                </template>
                <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

      </basic-container>
    </el-main>
  </el-container>
</template>

<script>
import {getBizTypes} from "@/api/modeling/businessType/api"

export default {
  name: "index"
  name: "index",
  data() {
    return {
      form:{

      },
      nodeRow:{},
      treeOption: {
        height: 'auto',
        defaultExpandAll: false,
        menu: false,
        addBtn: false,
        props: {
          label: 'name',
          value: 'name',
          children: 'children'
        }
      },
      treeData: [],
      descriptionOption: {
        labelStyle: 'text-align:center;min-width:80px;',
        contentStyle: 'width:200px;text-align:center;word-break;break-all;'
      },
      icons: {
        id: 'el-icon-finished',
        name: 'el-icon-tickets',
        desc: 'el-icon-chat-line-square'
      },
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    getTreeList() {
      getBizTypes().then(res => {
        const data = res.data.data.map(item => {
          return item.attributes;
        });
        this.treeData = data;
      })
    },

    // 树点击
    nodeClick(row){
      console.log(row);
      this.nodeRow = row;
    },
  }
}
</script>

<style scoped>
<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }

  .el-form-item .el-select {
    width: 100%;
  }

  .headerCon {
    .el-button {
      width: 82px;
    }
  }
}

.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;
}

.headerCon > .el-button:nth-child(10) {
  margin-left: 0;
}

.miniBtn {
  width: 82px;
  text-align: center;
  padding-left: 7px;
}

.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}
.descBox{
  width: 32%;
  margin-left: 20px;
}
</style>