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

@@ -1,111 +1,435 @@
<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-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-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>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialoghandelfalse">取 消</el-button>
            <el-button type="primary" @click="dialoghandeltrue">确 定</el-button>
  </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>
</template>

<script>



export default {
  name: "Business",

  data(){
  data() {
    return {
      form: {
        name: "",
        education: "",
        workExperience: [
          { company: "", position: "", dateRange: [] },
          { company: "", position: "", dateRange: [] },
        ],
      //生命周期对话框状态
      packageLifeBox: false,
      //版本规则状态
      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',
          }
        ]
      }],
      treeOption: {
        defaultExpandAll: true,
      },
      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" },
        ],
      loadData: [],
      loadData1: [
        {
          name: '张三',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        },
        {
          name: '李四',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        }
      ],
      loadData2: [
        {
          name: '王五',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        },
        {
          name: '宋六',
          business: '测试',
          attrType: "测试",
          default: "测试",
          explain: "测试说明"
        }
      ],
      loadOption: {
        border: true,
        height: 422,
        editBtn: false,
        column: [
          {
            label: '属性名',
            prop: 'name'
          },
          {
            label: '业务类型',
            prop: 'business'
          },
          {
            label: "属性类型",
            prop: "attrType"
          },
          {
            label: "默认值",
            prop: "default",
          },
          {
            label: "说明",
            prop: "explain"
          }
        ]
      },
      //基本信息
      objs: {
        tex: "",
        select: "",
        lifeTex: ""
      },
      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"
              }
            ]
          }
        ]
      },

    }
  },
  created() {
    this.loadData = this.loadData1;
    this.basicData = this.basicData1

  },
  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) {
      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
      }
      this.$message.success(JSON.stringify(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()
    })
  }
}
</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;
}
</style>