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

@@ -1,74 +1,164 @@
<template>

  <el-container>
    <el-aside width="240px">
      <basic-container>
        <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick">
        </avue-tree>
      </basic-container>
    </el-aside>
    <el-main>
      <!--        基本信息-->
      <basic-container>
        <p style="margin-top: 10px;font-weight: 570;font-size: 19px">基本信息</p>
        <avue-crud
          v-model="objs"
          :data="basicData"
          :option="basicOption"
          @row-save="basicSave"
        >
          <!--           版本规则-->
          <template slot="rulesForm" slot-scope="{disabled,size}">
            <div>
              <el-input v-if="rulesFalg==false" v-model="objs.tex" :size="size" placeholder="请输入版本号规则"
                        style="width: 290px"></el-input>
              <el-select v-if="rulesFalg" v-model="objs.select" placeholder="请选择版本号规则" style="max-width: 300px">
                <el-option label="测试1" value="1"></el-option>
                <el-option label="测试2" value="2"></el-option>
                <el-option label="测试3" value="3"></el-option>
              </el-select>
              <el-button style="margin-bottom: 5px;margin-left: 10px" type="primary" @click="handelRules">
                {{ rulesFalg == false ? "选择版本号规则" : "手动输入" }}
<!--    <el-header class="businessHeader" style="height: 40px;padding:0 8px">-->

<!--    </el-header>-->
    <el-container>
      <el-aside style="width: 20%">
        <basic-container class="businessTreeContainer">
          <div class="app">
            <div style="display: flex;margin-bottom: 10px;justify-content: space-around;">
              <el-button v-if="permissionList.addBtn"  size="mini" type="primary" @click="businessAdd" plain style="width: 60px">
                新增
              </el-button>
              <el-button v-if="permissionList.editBtn"  size="mini" type="primary" @click="businessEdit" plain style="width: 60px">
                修改
              </el-button>
              <el-button v-if="permissionList.table"  size="mini" type="primary"
                         @click="selectFromTable" plain> 从已有中获取
              </el-button>
            </div>
          </template>
          <!--            生命周期-->
          <template slot="lifeCycleForm">
            <el-select v-model="objs.select" placeholder="请选择生命周期" style="max-width: 300px">
              <el-option label="测试1" value="1"></el-option>
              <el-option label="测试2" value="2"></el-option>
              <el-option label="测试3" value="3"></el-option>
            </el-select>
            <el-button style="margin-bottom: 5px;display: inline-block;margin-left: 10px" type="primary"
                       @click="handelLife">生命周期列表
            </el-button>
          </template>
        </avue-crud>
        <el-dialog :visible.sync="packageLifeBox"
                   append-to-body
                   title="查看使用范围"
                   width="1000px">
          <Businpackage></Businpackage>
            <avue-tree :data="treeData" :option="treeOption" class="businessTree" @node-click="nodeClick" style="width: fit-content;">
            <template slot-scope="{ node, data }" class="el-tree-node__label">
              <span>
                <i :class="(node || {}).level === 2 ? 'el-icon-star-off' : 'el-icon-folder-opened'"></i>
                {{ (node || {}).label }}
              </span>
            </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="3" :size="size" border class="margin-top">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.key"></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>
                <template slot="label" :contentStyle="descriptionOption.contentStyle"
                          :labelStyle="descriptionOption.labelStyle">
                  <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>
                <span v-else></span>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.revisionRule"></i>
                  版本规则
                </template>
                {{ obj.revisionRuleName ? obj.revisionRuleName + '(' + obj.revisionRuleId + ')' : '' }}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  <i :class="icons.lifeCycle"></i>
                  生命周期
                </template>
                {{ obj.lifeCycleName ? obj.lifeCycleName + '(' + obj.lifeCycleId + ')' : '' }}
              </el-descriptions-item>
<!--              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"-->
<!--                                    :labelStyle="descriptionOption.labelStyle">-->
<!--                <template slot="label">-->
<!--                  <i :class="icons.view"></i>-->
<!--                  视图-->
<!--                </template>-->
<!--                <el-tag v-if="obj.viewText" size="small">-->
<!--                  {{ obj.viewText }}-->
<!--                </el-tag>-->
<!--                <span v-else></span>-->
<!--              </el-descriptions-item>-->
              <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-arrow-down"></i>
              实现类
            </template>
            {{ obj.implClass }}
          </el-descriptions-item> -->
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <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-dialog :visible="ref.visible" append-to-body title="从数据库中添加" width="700px" @close="dialoghandelfalse" top="9vh">
          选择领域：
          <el-select v-model="domain" placeholder="请选择" size="small" @change="refOnLoad">
            <el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div class="sep" style="height:7px">

          </div>
          <avue-crud ref="businessCrud" v-model="ref.form" :data="ref.data" :option="ref.option" class="businessCrud"
                     @selection-change="selectionChange">
          </avue-crud>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialoghandelfalse">取 消</el-button>
            <el-button type="primary" @click="dialoghandeltrue">确 定</el-button>
  </span>
          </span>
        </el-dialog>
      </basic-container>
      <!--        属性列表-->
      <basic-container>
        <p style="margin-top: 10px;font-weight: 570;font-size: 19px">属性列表</p>
        <avue-crud
          v-model="obj"
          :data="loadData"
          :option="loadOption"
          @row-save="loadSave"
        ></avue-crud>
      </basic-container>
    </el-main>
      </el-container>
    </el-container>
    <business-add ref="btmAdd" :btmType="addOption.btmType" :domainOption="domainOptions" :icons="icons"
                  @refreshTable="initTreeOnLoad">
    </business-add>
  </el-container>
</template>
<script>
import {
  initTree,
  refOnLoad,
  getDomain,
  saveFromTable,
  getDetail
} from "@/api/omd/btmType"
import {mapGetters} from "vuex";

export default {
  name: "Business",
  data() {
@@ -78,357 +168,251 @@
      //版本规则状态
      rulesFalg: false,
      obj: {},
      treeData: [{
        value: 0,
        label: '业务类型树',
        children: [
          {
            value: 1,
            label: 'A',
          },
          {
            value: 2,
            label: 'B',
          },
          {
            value: 3,
            label: 'C',
          },
          {
            value: 4,
            label: 'D',
          },
          {
            value: 5,
            label: 'E',
          }
        ]
      }],
      selectionList: [],
      treeData: [],
      treeOption: {
        defaultExpandAll: true,
        defaultExpandAll: false,
        title: '业务类型树',
        addBtn: false,
        menu: false,
        props: {
          labelText: '',
          label: 'label',
          value: 'oid',
          children: 'childList',
        }
      },
      loadData: [],
      loadData1: [
        {
          name: '张三',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        },
        {
          name: '李四',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        }
      ],
      loadData2: [
        {
          name: '王五',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        },
        {
          name: '宋六',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        }
      ],
      addOption: {
        btmType: {},
      },
      loadOption: {
        height:'auto',
        border: true,
        height: 422,
        editBtn: false,
        addBtn: false,
        menu: false,
        highlightCurrentRow: true,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: '属性名',
            prop: 'name'
            label: '英文名称',
            prop: 'id',
            align: 'center'
          }, {
            label: '中文名称',
            prop: 'name',
            align: 'center'
          },
          {
            label: '业务类型',
            prop: 'business'
          },
          {
            label: "属性类型",
            prop: "attrType"
            label: "类型",
            prop: "attrDataTypeText",
            align: 'center',
            slot: true
          },
          {
            label: "默认值",
            prop: "default",
            prop: "defaultValue",
            align: 'center'
          },
          {
            label: "说明",
            prop: "explain"
            prop: "description",
            align: 'center'
          }
        ]
      },
      //基本信息
      objs: {
        tex: "",
        select: "",
        lifeTex: ""
      descriptionOption: {
        labelStyle: 'text-align:center;width:120px',
        contentStyle: 'width:240px;text-align:center;word-break;break-all;'
      },
      basicData: [],
      basicData1: [
        {
          typeName: "测试1",
          tag: "客户",
          inherit: "测试",
          implement: "测试",
          lifeCycle: "周期",
          desc: "这是一个描述"
        }
      ],
      basicData2: [
        {
          typeName: "测试2",
          tag: "客户",
          inherit: "测试",
          implement: "测试",
          lifeCycle: "周期",
          desc: "这是一个描述"
        }
      ],
      basicOption: {
        border: true,
        height: 88,
        tabs: true,
        column: [
          {
            label: "类型名称",
            prop: "typeName",
            display: false
          },
          {
            label: "标签",
            prop: "tag",
            display: false
          },
          {
            label: "继承自",
            prop: "inherit",
            display: false
          },
          {
            label: "实现类",
            prop: "implement",
            display: false
          },
          {
            label: "描述",
            prop: "desc",
            display: false
          }
        ],
        group: [
          {
            label: "基本信息",
            column: [
              {
                label: "类型名称",
                prop: "typeName"
              },
              {
                label: "标签",
                prop: "tag"
              },
              {
                label: "继承自",
                prop: "inherit"
              },
              {
                label: "是否实例化",
                prop: "case",
                type: "switch",
                align: "center",
                hide: true,
                labelWidth: 90,
                dicData: [
                  {
                    label: "否",
                    value: 0
                  },
                  {
                    label: "是",
                    value: 1
                  }
                ],
              },
              {
                label: "描述",
                prop: "desc",
                type: "textarea"
              },
              {
                label: "实现类",
                prop: "implement"
              },

            ]
          },
          {
            label: "版本规则",
            column: [
              {
                label: '版本规则',
                prop: 'radio',
                type: 'radio',
                button: true,
                change: this.radioChange,
                value: 0,
                dicData: [{
                  label: '不可修订',
                  value: 0
                }, {
                  label: '采用一级版本管理',
                  value: 1
                }, {
                  label: '采用二级版本管理',
                  value: 2
                }]
              },
              {
                label: "版本号规则",
                prop: "rules",
                display: true,
                formslot: true,
              },
              {
                label: "分隔符",
                prop: "interval",
                type: "select",
                display: true,
                dicData: [
                  {
                    label: ".",
                    value: 0
                  },
                  {
                    label: "-",
                    value: 1
                  },
                  {
                    label: " ",
                    value: 2
                  }
                ]
              },
              {
                label: '版次号规则',
                prop: 'radioRules',
                type: 'radio',
                display: true,
                dicData: [{
                  label: '1.2.3...',
                  value: 0
                }, {
                  label: 'a.b.c...',
                  value: 1
                }, {
                  label: '0.1.2...',
                  value: 2
                }]
              },
            ]
          },
          {
            label: "生命周期",
            column: [
              {
                label: "生命周期",
                prop: "lifeCycle"
              }
            ]
          }
        ]
      domain: null,
      domainOptions: [],
      icons: {
        key: 'el-icon-finished',
        name: 'el-icon-tickets',
        tableName: 'el-icon-date',
        domain: 'el-icon-folder-opened',
        revisionRule: 'el-icon-s-check',
        lifeCycle: 'el-icon-refresh-right',
        view: 'el-icon-view',
        desc: 'el-icon-chat-line-square',
        referType: 'el-icon-search'
      },

      ref: {
        // 从表中选择dialog状态
        visible: false,
        form: {},
        option: {
          height: "550px",
          selection: true,
          headerAlign: 'center',
          border: true,
          index: true,
          rowKey: 'id',
          tabs: true,
          addBtn: false,
          menu: false,
          highlightCurrentRow: true,
          column: [
            {
              label: '表名',
              prop: 'tableName',
              align: 'center',
              display: false
            },
            {
              label: '描述',
              prop: 'description',
              align: 'center',
              display: false
            }
          ]
        },
        data: [],
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.modeling_Business.Business_add, false),
        table: this.vaildData(this.permission.modeling_Business.Business_table, false),
        editBtn: this.vaildData(this.permission.modeling_Business.Business_edit, false),
      }
    }
  },
  created() {
    this.loadData = this.loadData1;
    this.basicData = this.basicData1
    this.initTreeOnLoad();
    this.initDomainOption();
  },
  methods: {
    //生命周期对话框取消点击事件
    nodeClick(data, node, leaf) {
      if (data.oid) {
        getDetail(data.oid).then(res => {
          this.obj = res.data.data;
        })
      } else {
        this.$message.warning('请点击子节点');
      }
    },
    //  基本信息添加
    basicSave(row, done, loading) {
      add(Object.assign({
        createUser: this.userInfo.name
      }, row)).then(() => {
        this.$message.success('新增成功')
        done();
        this.getList();
      }).catch(() => {
        loading()
      })
    },
    //属性添加
    loadSave(row, done, loading) {
      add(Object.assign({
        createUser: this.userInfo.name
      }, row)).then(() => {
        this.$message.success('新增成功')
        done();
        this.getList();
      }).catch(() => {
        loading()
      })
    },
    selectFromTable() {
      this.ref.visible = true;
    },
    refOnLoad(domain) {
      refOnLoad(domain).then(res => {
        this.ref.data = res.data.data;
      })
    },
    initTreeOnLoad() {
      initTree().then(res => {
        this.treeData = res.data.data;
      });
    },
    initDomainOption() {
      getDomain().then(res => {
        this.domainOptions = res.data.data;
      })
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    dialoghandelfalse() {
      this.packageLifeBox = false
      this.ref.visible = false;
      this.$refs.businessCrud.toggleSelection()
      this.selectionList = [];
      this.domain = null;
    },
    //生命周期对话框确定点击事件
    dialoghandeltrue() {
      this.packageLifeBox = false
    },
    //选择生命周期对话框
    handelLife() {
      this.packageLifeBox = true
    },
    //版本规则手动输入和选择框的状态取反
    handelRules() {
      this.rulesFalg = !this.rulesFalg
    },
    //版本规则三个按钮的显示隐藏
    radioChange(val) {
      if (val.value == 0) {
        this.basicOption.group[1].column[1].display = false;
        this.basicOption.group[1].column[2].display = false;
        this.basicOption.group[1].column[3].display = false;
      } else if (val.value == 1) {
        this.basicOption.group[1].column[1].display = true;
        this.basicOption.group[1].column[2].display = true;
        this.basicOption.group[1].column[3].display = false;
      } else if (val.value == 2) {
        this.basicOption.group[1].column[1].display = true;
        this.basicOption.group[1].column[2].display = true;
        this.basicOption.group[1].column[3].display = true;
      if (this.selectionList.length < 1) {
        this.$message.warning('请选择数据');
        return false;
      }
      saveFromTable(this.selectionList, this.domain).then(res => {
        this.$message.success('保存成功');
        this.dialoghandelfalse();
        this.initTreeOnLoad();
      })
    },
    nodeClick(data) {
      if (data.value == 1) {
        this.loadData = this.loadData1;
        this.basicData = this.basicData1
      } else if (data.value == 2) {
        this.loadData = this.loadData2;
        this.basicData = this.basicData2
    businessAdd() {
      this.$refs.btmAdd.showSubmitDialog = true;
      this.$refs.btmAdd.btmType = {};
      this.ifRefreshBtmAddRefresh();
    },
    businessEdit() {
      if (!this.obj.oid) {
        this.$message.warning("请选择一条叶子节点的业务类型");
        return;
      }
      this.$message.success(JSON.stringify(data))
      const json = JSON.stringify(this.obj);
      this.$refs.btmAdd.btmType = JSON.parse(json);
      this.$refs.btmAdd.showSubmitDialog = true;
      this.ifRefreshBtmAddRefresh();
    },
    ifRefreshBtmAddRefresh() {
      // this.$refs.btmAdd.refreshAttrTable();
    }
  },
//  基本信息添加
  basicSave(row, done, loading) {
    add(Object.assign({
      createUser: this.userInfo.name
    }, row)).then(() => {
      this.$message.success('新增成功')
      done();
      this.getList();
    }).catch(() => {
      loading()
    })
  },
  //属性添加
  loadSave(row, done, loading) {
    add(Object.assign({
      createUser: this.userInfo.name
    }, row)).then(() => {
      this.$message.success('新增成功')
      done();
      this.getList();
    }).catch(() => {
      loading()
    })
  }
}
</script>

<style lang="scss">
#basic {
  height: 770px;
  border-radius: 10px;
<style lang="scss" scoped>

.businessCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
  display: none !important;
}

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