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

@@ -1,546 +1,812 @@
<template>
    <el-dialog
  <el-dialog
    title="业务类型"
    :visible.sync="showSubmitDialog"
    append-to-body
    @close="closeSubmitDialog"
    width="70%"
    style="height: 115vh;"
  >
    <el-form ref="form" :model="btmType" show-message="true" inline size="medium" label-suffix=":" class="btmTypeForm"
             :rules="rules" @resetFields="resetForm" status-icon="true">
      <el-form-item label="英文名称" label-width="100px" required="true" prop="id">
        <el-input v-model="btmType.id" :prefix-icon="icons.key"></el-input>
      </el-form-item>
      <el-form-item label="中文名称" label-width="100px">
        <el-input v-model="btmType.name" :prefix-icon="icons.name"></el-input>
      </el-form-item>
      <el-form-item label="数据库表名" label-width="100px">
        <el-input v-model="btmType.tableName" :prefix-icon="icons.tableName"></el-input>
      </el-form-item>
      <el-form-item label="所属领域" label-width="100px" prop="domain" class="domainSelect">
        <el-select v-model="btmType.bizDomain" :prefix-icon="icons.domain">
          <el-option v-for="item in domainOption"
                     :label="item.label" :value="item.value" :key="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本规则" label-width="100px">
        <el-input v-model="btmType.revisionRuleName" :prefix-icon="icons.revisionRule" class="revisionRule"
                  @focus="openRevision" clearable @clear="clearRevision">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="生命周期" label-width="100px">
        <el-input v-model="btmType.lifeCycleName" :prefix-icon="icons.lifeCycle" class="lifeCycle" @focus="openLifeCycle" clearable @clear="clearLifeCycle">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-form-item>
      <div>
        <el-form-item label="开启视图" label-width="100px" class="viewFlag">
          <el-switch v-model="btmType.viewFlag" active-color="#13ce66" @change="viewChange"></el-switch>
        </el-form-item>
        <el-form-item label="视图语句" label-width="100px" class="viewInput">
          <el-input v-model="btmType.view" :prefix-icon="icons.view" :disabled="!btmType.viewFlag"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="描述" label-width="100px" class="description">
        <el-input v-model="btmType.description"
                  :prefix-icon="icons.desc"
                  class="descClass"
                  id="descId"
        ></el-input>
      </el-form-item>
    </el-form>
    <avue-crud :option="option"
               :data="btmType.attributes"
               :page.sync="page"
               ref="attrTable">
      <template slot-scope="scope" slot="menuLeft">
        <el-button type="danger"
                   icon="el-icon-plus"
                   size="small"
                   @click="rowAdd()">属性选择
        </el-button>
      </template>
      <template slot="attrDataTypeText" slot-scope="{row}">
        <el-tag>{{ row.attrDataTypeText }}</el-tag>
      </template>
      <template slot="menu" slot-scope="{row,index}">
        <el-button icon="el-icon-edit" size="small" type="text" v-if="!row.$cellEdit" @click="cellEditClick(row)">编辑
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" v-if="!row.$cellEdit"
                   @click="removeFormAttrTable(row,index)">移除
        </el-button>
        <el-button icon="el-icon-check" size="small" type="text" v-if="row.$cellEdit" @click="cellEditSave(row,index)">
          保存
        </el-button>
      </template>
    </avue-crud>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitBtmType">确定</el-button>
      <el-button @click="cancleSubmitBtmType">取消</el-button>
    </div>

    <!-- 属性池的选择 -->
    <el-dialog title="属性池"
               :visible="attrRef.visible"
               append-to-body
               @close="closeAttrDialog"
               width="80%"
    >
        <el-form ref="form" :model="btmType" show-message="true" inline size="medium" label-suffix=":" class="btmTypeForm" :rules="rules" @resetFields="resetForm" status-icon="true">
            <el-form-item label="英文名称" label-width="100px" required="true" prop="id">
                <el-input v-model="btmType.id" :prefix-icon="icons.key"></el-input>
            </el-form-item>
            <el-form-item label="中文名称" label-width="100px">
                <el-input v-model="btmType.name" :prefix-icon="icons.name"></el-input>
            </el-form-item>
            <el-form-item label="数据库表名" label-width="100px">
                <el-input v-model="btmType.tableName" :prefix-icon="icons.tableName"></el-input>
            </el-form-item>
            <el-form-item label="所属领域" label-width="100px" prop="domain">
                <el-select v-model="btmType.domain" :prefix-icon="icons.domain">
                    <el-option v-for="item in domainOption"
                    :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="版本规则" label-width="100px">
                <el-input v-model="btmType.revisionRuleName" :prefix-icon="icons.revisionRule" class="revisionRule"
                @focus="openRevision" clearable @clear="clearRevision">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="生命周期" label-width="100px">
                <el-input v-model="btmType.lifeCycleId" :prefix-icon="icons.lifeCycle">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-form-item>
            <div>
            <el-form-item label="开启视图" label-width="100px" class="viewFlag">
                <el-switch v-model="btmType.viewFlag" active-color="#13ce66" @change="viewChange"></el-switch>
            </el-form-item>
            <el-form-item label="视图语句" label-width="100px">
                <el-input v-model="btmType.view" :prefix-icon="icons.view" :disabled="!btmType.viewFlag"></el-input>
            </el-form-item>
        </div>
            <el-form-item label="描述" label-width="100px" class="description">
                <el-input v-model="btmType.description"
                :prefix-icon="icons.desc"
                class="descClass"
                id="descId"
                ></el-input>
            </el-form-item>
        </el-form>
        <avue-crud :option="option"
        :data="btmType.attributes"
        :page.sync="page"
        ref="attrTable">
            <template slot-scope="scope" slot="menuLeft">
                <el-button type="danger"
                icon="el-icon-plus"
                size="small"
                @click="rowAdd()">属性选择</el-button>
            </template>
          <template slot="menu" slot-scope="{row,index}">
            <el-button icon="el-icon-edit" size="small" type="text" v-if="!row.$cellEdit" @click="cellEditClick(row)">编辑</el-button>
            <el-button icon="el-icon-delete" size="small" type="text" v-if="!row.$cellEdit" @click="removeFormAttrTable(row,index)">移除</el-button>
            <el-button icon="el-icon-check" size="small" type="text" v-if="row.$cellEdit" @click="cellEditSave(row,index)">保存</el-button>
          </template>
        </avue-crud>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitBtmType">确定</el-button>
            <el-button @click="cancleSubmitBtmType">取消</el-button>
        </div>

<!-- 属性池的选择 -->
        <el-dialog title="属性池"
            :visible="attrRef.visible"
            append-to-body
            @close="closeAttrDialog"
            width="80%"
        >
            <avue-crud class="attrRef"
            :option="attrRef.option"
            :data="attrRef.data"
            :page.sync="attrRef.page"
            ref="attrRef"
            @on-load="attrRefOnLoad"
            @search-change="attrRefSearch"
            @selection-change="selectionChange"
            v-loading="attrRef.loading">
                <template slot="typeValue" slot-scope="scope" >
                    <el-tag>{{scope.row.typeValue}}</el-tag>
                </template>
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmSelectAttr">确定</el-button>
                <el-button @click="cancleSelectAttr">取消</el-button>
            </div>
        </el-dialog>
<!-- 版本规则的参照 -->
        <el-dialog title="请选择版本规则"
            :visible.sync="revisionRef.visible"
            append-to-body
            width="80%">

            <avue-crud class="revisionRef"
             :option="revisionRef.option"
             :data="revisionRef.data"
             :page.sync="revisionRef.page"
             ref="revisionRef"
             @row-click="revisionClick">
                <template slot="radio"
                slot-scope="{row}">
                    <el-radio v-model="revisionRef.selectRow"
                        :label="row.$index">&nbsp;
                    </el-radio>
                </template>
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmRevision">确定</el-button>
                <el-button @click="cancelRevision">取消</el-button>
            </div>
        </el-dialog>
      <avue-crud class="attrRef"
                 :option="attrRef.option"
                 :data="attrRef.data"
                 :page.sync="attrRef.page"
                 ref="attrRef"
                 @on-load="attrRefOnLoad"
                 @search-change="attrRefSearch"
                 @selection-change="selectionChange"
                 v-loading="attrRef.loading">
        <template slot="typeValue" slot-scope="scope">
          <el-tag>{{ scope.row.typeValue }}</el-tag>
        </template>
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmSelectAttr">确定</el-button>
        <el-button @click="cancleSelectAttr">取消</el-button>
      </div>
    </el-dialog>
    <!-- 版本规则的参照 -->
    <el-dialog title="请选择版本规则"
               :visible.sync="revisionRef.visible"
               append-to-body
               width="80%">

      <avue-crud class="revisionRef"
                 :option="revisionRef.option"
                 :data="revisionRef.data"
                 :page.sync="revisionRef.page"
                 ref="revisionRef"
                 @row-click="revisionClick"
                 v-loading="revisionRef.loading"
                @search-change="searchRevisionRule"
                 @search-reset="clearSearchRevisionRule">
        <template slot="radio"
                  slot-scope="{row}">
          <el-radio v-model="revisionRef.selectRow"
                    :label="row.$index">&nbsp;
          </el-radio>
        </template>
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmRevision">确定</el-button>
        <el-button @click="cancelRevision">取消</el-button>
      </div>
    </el-dialog>

    <!-- 生命周期的参照 -->
    <el-dialog title="请选择生命周期"
               :visible.sync="lifeCycleRef.visible"
               append-to-body
               width="80%">

      <avue-crud class="lifeCycleRef"
                 :option="lifeCycleRef.option"
                 :data="lifeCycleRef.data"
                 :page.sync="lifeCycleRef.page"
                 ref="lifeCycleRef"
                 @row-click="lifeCycleClick"
                 v-loading="lifeCycleRef.loading"
                @search-change="searchLifeCycle"
                 @search-reset="clearSearchLifeCycle">
        <template slot="radio"
                  slot-scope="{row}">
          <el-radio v-model="lifeCycleRef.selectRow"
                    :label="row.$index">&nbsp;
          </el-radio>
        </template>
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmLifeCycle">确定</el-button>
        <el-button @click="cancelLifeCycle">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>


</template>


<script>

import { add,update } from '@/api/omd/btmType';
import { queryPage } from '@/api/omd/OmdAttribute';
import { getPage } from '@/api/omd/revisionRule';
import {add, update} from '@/api/omd/btmType';
import {queryPage} from '@/api/omd/OmdAttribute';
import {getPage} from '@/api/omd/revisionRule';
import {getList} from '@/api/modeling/cycle';

export default {
    name: 'BusinessAdd',
    props: {
        btmType:{
            type: Object
        },
        domainOption:{
            type: Array
        },
        icons: {
            type: Array
        }
  name: 'BusinessAdd',
  props: {
    btmType: {
      type: Object
    },
    data() {
        return {
            form: {},
            showSubmitDialog : false,
            option: {
                height: "330px",
                selection: false,
                headerAlign: 'center',
                border: true,
                index: true,
                rowKey: 'id',
                tabs: true,
                menu: true,
                editBtn: false,
                delBtn: false,
                menuWidth: 150,
                addBtn:false,
                highlightCurrentRow: true,
                column: [
                    {
                        label: '英文名称',
                        prop: 'id',
                        align: 'center'
                    }, {
                        label: '中文名称',
                        prop: 'name',
                        align: 'center',
                        cell: true
                    },
                    {
                        label: "类型",
                        prop: "attrDataType",
                        align: 'center',
                        slot: true
                    },
                    {
                        label: "默认值",
                        prop: "defaultValue",
                        align: 'center',
                        cell: true
                    },
                    {
                        label: "说明",
                        prop: "description",
                        align: 'center',
                        cell:true
                    }
                ]
            },
            attrRef:{
                visible:false,
                page: {
                    currentPage:1,
                    pageSize:10,
                },
                loading: false,
                key: null,
                option:{
                    height: 360,
                    addBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    selection: true,
                    menu: false,
                    border: true,
                    reserveSelection: true,
                    searchMenuSpan:8,
                    highlightCurrentRow: true,
                    rowKey: 'id',
                    column: [
                        {
                        label: '英文名称',
                        prop: 'id',
                        align: 'left',
                        search: true,
                        width: 230
                    }, {
                        label: '中文名称',
                        prop: 'name',
                        align: 'center',
                    },
                    {
                        label: "类型",
                        prop: "typeValue",
                        align: 'center',
                        slot: true,
                    },
                    {
                        label: "默认值",
                        prop: "defaultValue",
                        align: 'center'
                    },
                    {
                        label: '允许为空',
                        prop: 'nullable',
                        type: 'switch',
                        display: false,
                        hide: true,
                        labelWidth: 132,
                        dicData: [{
                        label: '否',
                        value: 1
                        }, {
                        label: '是',
                        value: 0
                        }]
                    },
                    {
                        label: "说明",
                        prop: "description",
                        cell:true,
                        align: 'center'
                    }
                    ]
                },
                data: [],
                queryNotIn: ''
            },
            revisionRef: {
                visible: false,
                page: {
                    currentPage:1,
                    pageSize: 10
                },
                selectRow:'',
                searchKey: null,
                option:{
                    height: 360,
                    addBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    menu: false,
                    border: true,
                    reserveSelection: true,
                    searchMenuSpan:8,
                    searchShowBtn: false,
                    highlightCurrentRow: true,
                    column:[{
                        label: '选择',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },
                        {
                            label:'英文名称',
                            prop: 'id',
                            search:true
                        },
                        {
                            label:"中文名称",
                            prop:"name",
                            search:true,
                        },
                        {
                            label:"跳跃字符",
                            prop: "skipCode"
                        },
                        {
                            label: "初始值",
                            prop:"startCode"
                        },
                        {
                            label: "步长",
                            prop: "serialStep"
                        },
                        {
                            label: "前缀",
                            prop:"prefixCode"
                        },
                        {
                            label: "后缀",
                            prop: "suffixCode"
                        },
                        {
                            label: "描述",
                            prop:"description",
                            type:"textarea"
                        }
                    ]
                },
            },
            rules: {
                id: [
                    { required: true, message: '请输入业务类型编号', trigger: 'blur' },
                    { pattern: /^[A-Za-z]+$/, message: '业务类型编号只能为英文', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
                ],
                domain: [
                    { required: true, message: '请选择所属领域', trigger: 'blur' }
                ]
            },
        }
    domainOption: {
      type: Array
    },
    created() {

    },
    methods: {
        // 关闭组件弹窗
        closeSubmitDialog(){
            this.showSubmitDialog = false;
            this.btmType.attributes = [];
            this.btmType = {};
            this.attrRef.selectData = [];
            this.attrRef.queryNotIn = null;
            this.resetForm();
        },
        // 关闭属性池查询弹窗
        closeAttrDialog(){
            this.attrRef.visible = false;
        },
        // 属性选择添加
        async rowAdd() {
            await this.attrRefOnLoad();
            this.attrRef.visible = true;
        },
        // 属性池加载
        attrRefOnLoad(){
            if (!this.attrRef.queryNotIn || (this.attrRef.queryNotIn === '' && this.btmType.attributes !== [])){
              this.attrRef.queryNotIn = '';
               this.btmType.attributes.forEach(item => {
                  this.attrRef.queryNotIn += (item.id + ",")
               })
            }
            this.attrRef.loading = true;
            queryPage(this.attrRef.key,this.attrRef.queryNotIn,this.attrRef.page.currentPage, this.attrRef.page.pageSize).then(res => {
                const data = res.data.data;
                this.attrRef.page.total = data.total;
                this.attrRef.data = data.records;
            });
            setTimeout(() => {
              this.attrRef.loading = false;
            },600)
            this.$nextTick(() => {
                this.$refs.attrRef.refreshTable();
            });
        },
        // 属性池检索
        attrRefSearch(form,done){
            this.attrRef.key = form.id;
            this.attrRefOnLoad();
            done();
            this.attrRef.key = null;
        },
        // 从属性池中移除
        removeFormAttrTable(row,index){
          this.btmType.attributes.splice(index,1);
          this.attrRef.queryNotIn = "";
          this.btmType.attributes.forEach(item => {
            this.attrRef.queryNotIn += (item.id + ",")
          })
        },
        // 属性池勾选事件
        selectionChange(list){
            this.attrRef.selectData = list;
        },
        // 确认属性池勾选
        confirmSelectAttr(){
            if(!this.btmType.attributes) {
              this.btmType.attributes = [];
            }
            this.attrRef.selectData.forEach(item => {
                this.btmType.attributes.push({
                    id: item.id,
                    name: item.name,
                    typeValue: item.typeValue,
                    typeKey: item.typeValue,
                    attrDataType : item.typeKey,
                    defaultValue: item.defaultValue,
                    description: item.description,
                    attributeLength: item.maxLength,
                    referBtmTypeId: item.referTypeCode,
                    referBtmTypeName: item.referToName,
                    enumId: item.dictCode,
                    // enumName: item,
                });
                this.attrRef.queryNotIn += (item.id + ",")
            });
            this.attrRef.data = [];
            this.closeAttrDialog();
        },
        // 取消属性池勾选
        cancleSelectAttr(){
            this.attrRef.selectData = [];
            this.closeAttrDialog();
        },
        // 添加业务类型
        submitBtmType(){
            console.log(this.btmType);
            add(this.btmType,true).then(res => {
                // 添加完成，回调父组件的刷新
                this.$message.success('保存成功');
                this.cancleSubmitBtmType();
                this.$emit('refreshTable');
            })
        },
        // 取消添加业务类型
        cancleSubmitBtmType(){
            this.btmType = {};
            this.btmType.attributes = [];
            this.showSubmitDialog = false;
        },
        // 刷新属性列表
        refreshAttrTable(){
            this.$nextTick( () => {
                this.$refs.attrTable.refreshTable();
            })
        },
        //
        viewChange(){

        },
        // 列表编辑
        cellEditClick(cell){
          console.log(cell);
            cell.$cellEdit = true;
        },
        // 列表编辑保存
        cellEditSave(row){
            this.btmType.attributes[row.$index].name = row.name
            this.btmType.attributes[row.$index].defaultValue = row.defaultValue;
            this.btmType.attributes[row.$index].description = row.description;
            row.$cellEdit = false;
        },
        // 打开版本规则参照
        async openRevision(){
            await getPage().then(res => {
                this.revisionRef.data = res.data.data.records;
            });
            this.revisionRef.visible = true;
        },
       // 关闭版本规则参照弹窗
       closeRevisionDialog(){
            this.revisionRef.visible = false;
       },
       // 版本规则参照列表检索
       revisionRefSearch(){

       },
       // 版本规则选中事件
       revisionChange(){},
       // 确认选中版本规则
       confirmRevision(){
            this.btmType.revisionFlag = true;
            this.btmType.revisionRuleId = this.revisionRef.selectData.id;
            this.btmType.revisionRuleName = this.revisionRef.selectData.name;
            this.btmType.inputRevisionFlag = false;
            this.cancelRevision();
       },
       // 取消选中版本规则
       cancelRevision(){
            this.revisionRef.selectRow  = '';
            this.revisionRef.selectData = {};
            this.closeRevisionDialog();
       },
       // 版本规则单选
       revisionClick(row){
            this.revisionRef.selectRow = row.$index;
            this.revisionRef.selectData = {
                id: row.id,
                name: row.name,
            };
       },
       clearRevision(){
            this.$delete(this.btmType,'revisionFlag');
            this.$delete(this.btmType,'revisionRuleId');
            this.$delete(this.btmType,'revisionRuleName');
            this.$delete(this.btmType,'inputRevisionFlag');
       },
       resetForm(){
        this.btmType = {};
        this.$refs.form.resetFields();
       }
    icons: {
      type: Array
    }
  },
  watch: {
    btmType: {
      handler(newval, oldval) {
        console.log('监听', newval, oldval)
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      showSubmitDialog: false,
      option: {
        height: "330px",
        selection: false,
        headerAlign: 'center',
        border: true,
        index: true,
        rowKey: 'id',
        tabs: true,
        menu: true,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        menuWidth: 150,
        addBtn: false,
        highlightCurrentRow: true,
        column: [
          {
            label: '英文名称',
            prop: 'id',
            align: 'center'
          }, {
            label: '中文名称',
            prop: 'name',
            align: 'center',
            cell: true
          },{
            label: "类型",
            prop: "attrDataTypeText",
            align: 'center',
            slot: true
          },
          {
            label: "默认值",
            prop: "defaultValue",
            align: 'center',
            cell: true
          },
          {
            label: "说明",
            prop: "description",
            align: 'center',
            cell: true
          }
        ]
      },
      attrRef: {
        visible: false,
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        loading: false,
        key: null,
        option: {
          height: 360,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          selection: true,
          menu: false,
          border: true,
          reserveSelection: true,
          searchMenuSpan: 8,
          highlightCurrentRow: true,
          rowKey: 'id',
          column: [
            {
              label: '英文名称',
              prop: 'id',
              align: 'left',
              search: true,
              width: 230
            }, {
              label: '中文名称',
              prop: 'name',
              align: 'center',
            },
            {
              label: "类型",
              prop: "typeValue",
              align: 'center',
              slot: true,
            },
            {
              label: "默认值",
              prop: "defaultValue",
              align: 'center'
            },
            {
              label: '允许为空',
              prop: 'nullable',
              type: 'switch',
              display: false,
              hide: true,
              labelWidth: 132,
              dicData: [{
                label: '否',
                value: 1
              }, {
                label: '是',
                value: 0
              }]
            },
            {
              label: "说明",
              prop: "description",
              cell: true,
              align: 'center'
            }
          ]
        },
        data: [],
        queryNotIn: ''
      },
      revisionRef: {
        visible: false,
        page: {
          currentPage: 1,
          pageSize: 10
        },
        loading: false,
        selectRow: '',
        searchKey: null,
        option: {
          height: 360,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menu: false,
          border: true,
          reserveSelection: true,
          searchMenuSpan: 8,
          searchShowBtn: false,
          highlightCurrentRow: true,
          column: [{
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false
          },
            {
              label: '英文名称',
              prop: 'id',
              search: true
            },
            {
              label: "中文名称",
              prop: "name",
              search: true,
            },
            {
              label: "跳跃字符",
              prop: "skipCode"
            },
            {
              label: "初始值",
              prop: "startCode"
            },
            {
              label: "步长",
              prop: "serialStep"
            },
            {
              label: "前缀",
              prop: "prefixCode"
            },
            {
              label: "后缀",
              prop: "suffixCode"
            },
            {
              label: "描述",
              prop: "description",
              type: "textarea"
            }
          ]
        },
      },
      lifeCycleRef: {
        visible: false,
        page: {
          currentPage: 1,
          pageSize: 10
        },
        loading: false,
        selectRow: '',
        searchKey: null,
        option: {
          height: 360,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menu: false,
          border: true,
          reserveSelection: true,
          searchMenuSpan: 8,
          searchShowBtn: false,
          highlightCurrentRow: true,
          column: [{
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false
          },
            {
              label: '英文名称',
              prop: 'id',
              search: true
            },
            {
              label: "中文名称",
              prop: "name",
              search: true,
            },
            {
              label: "跳跃字符",
              prop: "skipCode"
            },
            {
              label: "初始值",
              prop: "startCode"
            },
            {
              label: "步长",
              prop: "serialStep"
            },
            {
              label: "前缀",
              prop: "prefixCode"
            },
            {
              label: "后缀",
              prop: "suffixCode"
            },
            {
              label: "描述",
              prop: "description",
              type: "textarea"
            }
          ]
        },
      },
      rules: {
        id: [
          {required: true, message: '请输入业务类型编号', trigger: 'blur'},
          {pattern: /^[A-Za-z]+$/, message: '业务类型编号只能为英文', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入业务类型中文名称', trigger: 'blur'}
        ],
        domain: [
          {required: true, message: '请选择所属领域', trigger: 'blur'}
        ]
      },
    }
  },
  created() {

  },
  methods: {
    // 关闭组件弹窗
    closeSubmitDialog() {
      this.showSubmitDialog = false;
      this.btmType.attributes = [];
      this.btmType = {};
      this.attrRef.selectData = [];
      this.attrRef.queryNotIn = null;
      this.resetForm();
    },
    // 关闭属性池查询弹窗
    closeAttrDialog() {
      this.attrRef.visible = false;
    },
    // 属性选择添加
    async rowAdd() {
      await this.attrRefOnLoad();
      this.attrRef.visible = true;
    },
    // 属性池加载
    attrRefOnLoad() {
      if (this.attrRef.queryNotIn != '' && this.btmType.attributes !== undefined && this.btmType.attributes.length > 0) {
        this.attrRef.queryNotIn = '';
        this.btmType.attributes.forEach(item => {
          this.attrRef.queryNotIn += (item.id + ",")
        })
      }
      this.attrRef.loading = true;
      queryPage(this.attrRef.key, this.attrRef.queryNotIn, this.attrRef.page.currentPage, this.attrRef.page.pageSize).then(res => {
        const data = res.data.data;
        this.attrRef.page.total = data.total;
        this.attrRef.data = data.records;
      });
      setTimeout(() => {
        this.attrRef.loading = false;
      }, 600)
      this.$nextTick(() => {
        this.$refs.attrRef.refreshTable();
      });
    },
    // 属性池检索
    attrRefSearch(form, done) {
      this.attrRef.key = form.id;
      this.attrRefOnLoad();
      done();
      this.attrRef.key = null;
    },
    // 从属性池中移除
    removeFormAttrTable(row, index) {
      this.btmType.attributes.splice(index, 1);
      this.attrRef.queryNotIn = "";
      this.btmType.attributes.forEach(item => {
        this.attrRef.queryNotIn += (item.id + ",")
      })
    },
    // 属性池勾选事件
    selectionChange(list) {
      this.attrRef.selectData = list;
    },
    // 确认属性池勾选
    confirmSelectAttr() {
      if (!this.btmType.attributes) {
        this.btmType.attributes = [];
      }
      console.log(this.attrRef.selectData);
      this.attrRef.selectData.forEach(item => {
        this.btmType.attributes.push({
          id: item.id,
          name: item.name,
          attrDataType: item.typeKey,
          attrDataTypeText: item.typeValue,
          defaultValue: item.defaultValue,
          description: item.description,
          attributeLength: item.maxLength,
          referBtmTypeId: item.referTypeCode,
          referBtmTypeName: item.referToName,
          enumId: item.dictCode,
        });
        this.attrRef.queryNotIn += (item.id + ",")
      });
      this.attrRef.data = [];
      this.closeAttrDialog();
    },
    // 取消属性池勾选
    cancleSelectAttr() {
      this.attrRef.selectData = [];
      this.closeAttrDialog();
    },
    // 添加业务类型
    submitBtmType() {
      console.log(this.btmType);
      if (!this.btmType.attributes){
         this.$message.warning("还没有为业务类型选择属性");
         return;
      }else{
        let nullFlag = false;
         this.btmType.attributes.forEach(item => {
            if (!item.name){
               this.$message.warning("第" + (item.$index+1) + "行的中文名称不能为空");
               nullFlag = true;
               return;
            }
         })
        if (nullFlag){
          return;
        }

      }
      add(this.btmType, true).then(res => {
        // 添加完成，回调父组件的刷新
        this.$message.success('保存成功');
        this.cancleSubmitBtmType();
        this.$emit('refreshTable');
      })
    },
    // 取消添加业务类型
    cancleSubmitBtmType() {
      this.btmType = {};
      this.btmType.attributes = [];
      this.showSubmitDialog = false;
    },
    // 刷新属性列表
    refreshAttrTable() {
      this.$nextTick(() => {
        this.$refs.attrTable.refreshTable();
      })
    },
    //
    viewChange() {

    },
    // 列表编辑
    cellEditClick(cell) {
      console.log(cell);
      cell.$cellEdit = true;
    },
    // 列表编辑保存
    cellEditSave(row) {
      this.btmType.attributes[row.$index].name = row.name
      this.btmType.attributes[row.$index].defaultValue = row.defaultValue;
      this.btmType.attributes[row.$index].description = row.description;
      row.$cellEdit = false;
    },
    // 打开版本规则参照
     openRevision() {
      this.revisionRef.visible = true;
      this.revisionRuleOnLoad();
    },
    // 版本参照列表的默认查询方法
    revisionRuleOnLoad(){
      this.revisionRef.loading = true;
      getPage().then(res => {
        this.revisionRef.data = res.data.data.records;
      });
      setTimeout(() => {
        this.revisionRef.loading = false;
      }, 600)
      this.$nextTick(() => {
        this.$refs.revisionRef.refreshTable();
      });
    },
    // 打开版本规则参照
    openLifeCycle() {
      this.lifeCycleRef.visible = true;
      this.lifeCycleOnLoad();
    },
    // 生命周期列表的默认查询方法
    lifeCycleOnLoad(){
      this.lifeCycleRef.loading = true;
      getList().then(res => {
        this.lifeCycleRef.data = res.data.data.records;
      });
      setTimeout(() => {
        this.lifeCycleRef.loading = false;
      }, 600)
      this.$nextTick(() => {
        this.$refs.lifeCycleRef.refreshTable();
      });
    },
    // 关闭版本规则参照弹窗
    closeRevisionDialog() {
      this.revisionRef.visible = false;
    },
    // 关闭生命周期参照弹窗
    closeLifeCycleDialog() {
      this.lifeCycleRef.visible = false;
    },
    // 确认选中版本规则
    confirmRevision() {
      this.btmType.revisionFlag = true;
      this.btmType.revisionRuleId = this.revisionRef.selectData.id;
      this.btmType.revisionRuleName = this.revisionRef.selectData.name;
      this.btmType.inputRevisionFlag = false;
      this.cancelRevision();
    },
    // 确认选中生命周期
    confirmLifeCycle() {
      this.btmType.lifeCycleFlag = true;
      this.btmType.lifeCycleId = this.lifeCycleRef.selectData.id;
      this.btmType.lifeCycleName = this.lifeCycleRef.selectData.name;
      this.cancelLifeCycle();
    },
    // 取消选中版本规则
    cancelRevision() {
      this.revisionRef.selectRow = '';
      this.revisionRef.selectData = {};
      this.closeRevisionDialog();
    },
    // 取消选中生命周期
    cancelLifeCycle() {
      this.lifeCycleRef.selectRow = '';
      this.lifeCycleRef.selectData = {};
      this.closeLifeCycleDialog();
    },
    // 版本规则单选
    revisionClick(row) {
      this.revisionRef.selectRow = row.$index;
      this.revisionRef.selectData = {
        id: row.id,
        name: row.name,
      };
    },
    // 生命周期单选
    lifeCycleClick(row) {
      this.lifeCycleRef.selectRow = row.$index;
      this.lifeCycleRef.selectData = {
        id: row.id,
        name: row.name,
      };
    },
    // 取消版本规则
    clearRevision() {
      this.$delete(this.btmType, 'revisionFlag');
      this.$delete(this.btmType, 'revisionRuleId');
      this.$delete(this.btmType, 'revisionRuleName');
      this.$delete(this.btmType, 'inputRevisionFlag');
    },
    // 取消生命周期
    clearLifeCycle() {
      this.$delete(this.btmType, 'lifeCycleFlag');
      this.$delete(this.btmType, 'lifeCycleId');
      this.$delete(this.btmType, 'lifeCycleName');
    },
    // 表单重置
    resetForm() {
      this.btmType = {};
      this.$refs.form.resetFields();
    },
    /**
     * 搜索版本规则
     * @param params 搜索框输入值  {id: '',name: ''} 直接获取就行
     * @param done 执行完成后的回调
     */
    searchRevisionRule(params,done){
      let condition = {};
      if (params.id){
          condition['id_like'] = params.id;
      }
      if (params.name){
          condition['name_like'] = params.name;
      }
      this.revisionRef.loading = true;
      getPage(this.revisionRef.page.currentPage,this.revisionRef.page.pageSize,condition).then(res => {
        this.revisionRef.data = res.data.data.records;
      });
      setTimeout(() => {
        done();
        this.revisionRef.loading = false;
      }, 600);
      this.$nextTick(() => {
        this.$refs.revisionRef.refreshTable();
      });
    },
    /**
     * 搜索生命周期
     * @param params 搜索框输入值
     * @param done 执行完成后的回调
     */
    searchLifeCycle(params,done){
      let condition = {};
      if (params.id){
        condition['id_like'] = params.id;
      }
      if (params.name){
        condition['name_like'] = params.name;
      }
      this.lifeCycleRef.loading = true;
      getList(this.lifeCycleRef.page.currentPage,this.lifeCycleRef.page.pageSize,condition).then(res => {
        this.lifeCycleRef.data = res.data.data.records;
      });
      setTimeout(() => {
        done();
        this.lifeCycleRef.loading = false;
      }, 600);
      this.$nextTick(() => {
        this.$refs.lifeCycleRef.refreshTable();
      });
    },
    // 取消版本规则搜索
    clearSearchRevisionRule(item){
      this.revisionRuleOnLoad();
    },
    // 取消生命周期搜索
    clearSearchLifeCycle(item){
      this.lifeCycleOnLoad();
      console.log(item);
    }
  }
}
</script>

<style>
/* 属性池参照列表 */
.attrRef > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu{
    display: none !important;
.attrRef > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
  display: none !important;
}

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

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

.btmTypeForm > .el-form-item > .el-form-item__content > .el-input > .el-input__inner {
    width: 200px;
  width: 200px;
}

.domainSelect > .el-form-item__content > .el-select > .el-input > .el-input__inner {
  width: 200px;
}

.viewFlag {
    width: 305px;
  width: 305px;
}

.viewInput > .el-form-item__content > .el-input > .el-input__inner {
  width: 200px;
}

.descClass > .el-input__inner {
    width: 57vw
  width: 57vw
}

#descId {
    width: 57vw;
  width: 57vw;
}
</style>