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

@@ -1,111 +1,362 @@
<template>
  <div>
    <avue-form :model="form" :rules="rules">
      <avue-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </avue-form-item>
      <avue-form-item label="学历" prop="education">
        <el-select v-model="form.education" placeholder="请选择">
          <el-option label="博士" value="博士"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="大专" value="大专"></el-option>
          <el-option label="中专" value="中专"></el-option>
        </el-select>
      </avue-form-item>
      <avue-form-item label="工作经历">
        <table class="table">
          <thead>
          <tr>
            <th>公司</th>
            <th>职位</th>
            <th>起止时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in form.workExperience" :key="index">
            <td>
              <el-input v-model="item.company"></el-input>
            </td>
            <td>
              <el-input v-model="item.position"></el-input>
            </td>
            <td>
              <el-date-picker
                v-model="item.dateRange"
                range-separator="至"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </td>
          </tr>
          </tbody>
        </table>
      </avue-form-item>
    </avue-form>
  </div>
  <el-container>
    <el-header>
      <el-button type="primary" @click="businessAdd">新增</el-button>
      <el-button type="primary" @click="businessEdit">修改</el-button>
      <el-button type="primary" @click="selectFromTable">从已有中获取</el-button>
    </el-header>
    <el-container>
      <el-aside width="240px">
        <basic-container>
          <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick">
            <span class="el-tree-node__label" slot-scope="{ node, data }">
              <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="3" :size="size" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-finished"></i>
                  英文名称
                </template>
                {{ obj.id }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-info"></i>
                  中文名称
                </template>
                {{ obj.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-date"></i>
                  数据库表名
                </template>
                {{ obj.tableName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-folder-opened"></i>
                  所属领域
                </template>
                {{ obj.domain }}
              </el-descriptions-item>
              <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-ticket"></i>
              标签
            </template>
            {{obj.hashtag}}
          </el-descriptions-item> -->
              <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-arrow-up"></i>
              继承自
            </template>
            {{ obj.sss }}
          </el-descriptions-item> -->
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-s-check"></i>
                  版本规则
                </template>
                {{ obj.versionRule }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-refresh-right"></i>
                  生命周期
                </template>
                {{ obj.lifeCycleId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-view"></i>
                  视图
                </template>
                {{ obj.viewFlag }}
              </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>
                <template slot="label">
                  <i class="el-icon-chat-line-square"></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" @row-save="loadSave"></avue-crud>
          </basic-container>
        </el-main>
        <el-dialog :visible="ref.visible" title="从数据库中添加" width="700px" append-to-body @close="dialoghandelfalse">
          选择领域：
          <el-select v-model="domain" placeholder="请选择" @change="refOnLoad">
            <el-option v-for="item in domainOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <avue-crud class="businessCrud" v-model="ref.form" :option="ref.option" :data="ref.data" @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>
        </el-dialog>
      </el-container>
    </el-container>
    <business-add ref="btmAdd" :btmType="addOption.btmType" :domainOption="domainOptions">
  </business-add>
  </el-container>
</template>

<script>



import {
  initTree,
  refOnLoad,
  getDomain,
  saveFromTable,
  getDetail
} from "@/api/omd/btmType"
export default {
  name: "Business",

  data(){
  data() {
    return {
      form: {
        name: "",
        education: "",
        workExperience: [
          { company: "", position: "", dateRange: [] },
          { company: "", position: "", dateRange: [] },
        ],
      //生命周期对话框状态
      packageLifeBox: false,
      //版本规则状态
      rulesFalg: false,
      obj: {},
      selectionList: [],
      treeData: [],
      treeOption: {
        defaultExpandAll: true,
        title: '业务类型树',
        props: {
          labelText: '',
          label: 'name',
          value: 'oid',
          children: 'childList',
        }
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        education: [{ required: true, message: "请选择学历", trigger: "change" }],
        "workExperience.0.company": [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        "workExperience.0.position": [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        "workExperience.0.dateRange": [
          { required: true, message: "请选择起止时间", trigger: "change" },
        ],
        "workExperience.1.company": [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        "workExperience.1.position": [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        "workExperience.1.dateRange": [
          { required: true, message: "请选择起止时间", trigger: "change" },
        ],
      addOption:{
        btmType:{},
      },
      loadOption: {
        border: true,
        height: 466,
        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: "attrDataType",
            align: 'center'
          },
          {
            label: "默认值",
            prop: "defaultValue",
            align: 'center'
          },
          {
            label: "说明",
            prop: "description",
            align: 'center'
          }
        ]
      },
      domain: null,
      domainOptions: [],
      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: [{
          tableName: '1',
          description: '2'
        }]
      }
    }
  }
  },
  created() {
    this.initTreeOnLoad();
    this.initDomainOption();
  },
  methods: {
    //生命周期对话框取消点击事件
    dialoghandelfalse() {
      this.packageLifeBox = false
    },
    //生命周期对话框确定点击事件
    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;
      }
    },
    nodeClick(data) {
      getDetail(data.oid).then(res => {
        this.obj = res.data.data;
      })
    },
    //  基本信息添加
    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() {
      console.log('获取');
      this.ref.visible = true;
    },
    refOnLoad(domain) {
      refOnLoad(domain).then(res => {
        this.ref.data = res.data.data;
      })
    },
    initTreeOnLoad() {
      initTree().then(res => {
        console.log('123');
        this.treeData = res.data.data;
      });
    },
    initDomainOption() {
      getDomain().then(res => {
        this.domainOptions = res.data.data;
      })
    },
    selectionChange(list) {
      this.selectionList = list;
      console.log(this.selectionList);
    },
    dialoghandelfalse() {
      this.ref.visible = false;
      this.selectionList = [];
      this.domain = null;
    },
    dialoghandeltrue() {
      saveFromTable(this.selectionList, this.domain).then(res => {
        this.$message.success('保存成功');
        this.dialoghandelfalse();
        this.initTreeOnLoad();
      })
    },
    businessAdd(){
      this.$refs.btmAdd.showSubmitDialog = true;
      console.log('添加');
    },
    businessEdit(){
      this.addOption.btmType = this.obj;
      this.$refs.addOption.showSubmitDialog = true;
      console.log('编辑');
    }
  },
}
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
<style lang="scss">
#basic {
  height: 770px;
  border-radius: 10px;
}

.table th,
.table td {
  padding: 10px;
  border: 1px solid #ccc;
}

.table th {
  background-color: #f0f0f0;
  font-weight: bold;
}
.businessCrud > .el-card > .el-card__body > .avue-crud_menu{
        display: none!important;
    }
</style>