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: {
    // 树onLoad请求
    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(); // 强制刷新表格 解决表格错行
      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>