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

@@ -1,394 +1,409 @@
<template>
    <el-dialog title="链接类型" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="70%"  top="6vh"
        style="height: 115vh;">
        <el-form ref="form" :model="linkType" show-message="true" inline size="medium" label-suffix=":"
            class="linkTypeForm" :rules="rules" @resetFields="resetForm" status-icon="true">
            <el-form-item label="英文名称" label-width="100px" required="true" prop="id">
                <el-input v-model="linkType.id" :prefix-icon="icons.id" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="中文名称" label-width="100px">
                <el-input v-model="linkType.name" :prefix-icon="icons.name"></el-input>
            </el-form-item>
            <el-form-item label="数据库表名" label-width="100px">
                <el-input v-model="linkType.tableName" :prefix-icon="icons.tableName"></el-input>
            </el-form-item>
            <el-form-item label="所属领域" label-width="100px" prop="domain">
                <el-select v-model="linkType.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="From端类型" label-width="100px">
                <!-- from端业务类型选择 -->
                <el-select v-model="linkType.fromBtmValues" :value="linkType.fromBtmTypes" value-key="oid" placeholder="请选择From端类型" filterable multiple collapse-tags @change="fromSelectChange">
                    <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name">
                        <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name"
                            :value="item">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="To端类型" label-width="100px">
                <!-- to端业务类型选择 -->
                <el-select v-model="linkType.toBtmValues" :value="linkType.toBtmTypes" value-key="oid" placeholder="请选择To端类型" filterable multiple collapse-tags @change="toSelectChange">
                    <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name">
                        <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name"
                            :value="item">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" label-width="100px" class="description">
                <el-input v-model="linkType.description" :prefix-icon="icons.desc" class="descClass" id="descId"></el-input>
            </el-form-item>
        </el-form>
        <avue-crud :option="option" :data="linkType.attributes" :page.sync="page" ref="attrTable"
            @cell-mouse-enter="cellEditClick" @cell-mouse-leave="cellEditSave">
            <template slot-scope="scope" slot="menuLeft">
                <el-button type="danger" icon="el-icon-plus" size="small" @click="rowAdd()">属性选择</el-button>
            </template>
  <el-dialog :visible.sync="showSubmitDialog" append-to-body style="height: 115vh;" title="链接类型" top="6vh"
             width="70%"
             @close="closeSubmitDialog">
    <el-form ref="form" :model="linkType" :rules="rules" class="linkTypeForm" inline label-suffix=":"
             show-message="true" size="medium" status-icon="true" @resetFields="resetForm">
      <el-form-item label="英文名称" label-width="100px" prop="id" required="true">
        <el-input v-model="linkType.id" :disabled="this.linkType.hasOwnProperty('id')" :prefix-icon="icons.id" maxlength="15" show-word-limit
                  type="text"></el-input>
      </el-form-item>
      <el-form-item label="中文名称" label-width="100px">
        <el-input v-model="linkType.name" :prefix-icon="icons.name"></el-input>
      </el-form-item>
      <el-form-item label="数据库表名" label-width="100px">
        <el-input v-model="linkType.tableName" :prefix-icon="icons.tableName"></el-input>
      </el-form-item>
      <el-form-item label="所属领域" label-width="100px" prop="domain">
        <el-select v-model="linkType.domain" :prefix-icon="icons.domain">
          <el-option v-for="item in domainOption" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="From端类型" label-width="100px">
        <!-- from端业务类型选择 -->
        <el-select v-model="linkType.fromBtmValues" :value="linkType.fromBtmTypes" collapse-tags
                   filterable multiple placeholder="请选择From端类型" value-key="oid" @change="fromSelectChange">
          <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name">
            <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name"
                       :value="item">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="To端类型" label-width="100px">
        <!-- to端业务类型选择 -->
        <el-select v-model="linkType.toBtmValues" :value="linkType.toBtmTypes" collapse-tags filterable
                   multiple placeholder="请选择To端类型" value-key="oid" @change="toSelectChange">
          <el-option-group v-for="domain in domainList" :key="domain.id" :label="domain.name">
            <el-option v-for="item in domain.childList" :key="item.oid" :label="item.id + item.name"
                       :value="item">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item class="description" label="描述" label-width="100px">
        <el-input id="descId" v-model="linkType.description" :prefix-icon="icons.desc" class="descClass"></el-input>
      </el-form-item>
    </el-form>
    <avue-crud ref="attrTable" :data="linkType.attributes" :option="option" :page.sync="page"
               @cell-mouse-enter="cellEditClick" @cell-mouse-leave="cellEditSave">
      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-plus" size="small" type="danger" @click="rowAdd()">属性选择</el-button>
      </template>

        </avue-crud>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitlinkType">确定</el-button>
            <el-button @click="cancleSubmitlinkType">取消</el-button>
        </div>
    </avue-crud>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitlinkType">确定</el-button>
      <el-button @click="cancleSubmitlinkType">取消</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">
                <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 :visible="attrRef.visible" append-to-body title="属性池" width="80%" @close="closeAttrDialog">
      <avue-crud ref="attrRef" :data="attrRef.data" :option="attrRef.option" :page.sync="attrRef.page" class="attrRef"
                 @on-load="attrRefOnLoad" @search-change="attrRefSearch" @selection-change="selectionChange">
        <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>
</template>


<script>

import { add, update } from '@/api/omd/linkType';
import { queryPage } from '@/api/omd/OmdAttribute';
import { getPage } from '@/api/omd/revisionRule';
import { initTree } from "@/api/omd/btmType"
export default {
    name: 'LinkTypeAdd',
    props: {
        linkType: {
            type: Object
        },
        domainOption: {
            type: Array
        },
        icons: {
            type: Array
        }
    },
    data() {
        return {
            form: {},
            showSubmitDialog: false,
            option: {
                height: "330px",
                tip:false,
                selection: true,
                headerAlign: 'center',
                border: true,
                index: true,
                rowKey: 'id',
                tabs: true,
                menu: false,
                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,
                },
                key: null,
                option: {
                    height: 360,
                    addBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    selection: true,
                    menu: false,
                    border: true,
                    reserveSelection: true,
                    searchMenuSpan: 8,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: '英文名称',
                            prop: 'id',
                            align: 'left',
                            search: true,
                            width: 230
                        }, {
                            label: '中文名称',
                            prop: 'name',
                            align: 'center',
                        },
                        {
                            label: '类型',
                            prop: 'typeValue',
                            align: 'center'
                        },
                        {
                            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: null
            },
            fromBtmValues: [],
            toBtmValues: [],
            domainList: [],
            rules: {
                id: [
                    { required: true, message: '请输入链接类型编号', trigger: 'blur' },
                    { pattern: /^[A-Za-z]+$/, message: '链接类型编号只能为英文', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在2到15个字符', trigger: 'blur' }
                ],
                domain: [
                    { required: true, message: '请选择所属领域', trigger: 'blur' }
                ]
            },
        }
    },
    created() {
        this.initTreeOnLoad();
    },
    methods: {
        // 关闭组件弹窗
        closeSubmitDialog() {
            this.showSubmitDialog = false;
            this.linkType.attributes = [];
            this.linkType = {};
            this.attrRef.selectData = [];
            this.attrRef.queryNotIn = null;
            this.resetForm();
        },
        // 关闭属性池查询弹窗
        closeAttrDialog() {
            this.attrRef.visible = false;
        },
        initTreeOnLoad() {
            initTree().then(res => {
                this.domainList = res.data.data;
            });
        },
        // 添加
        rowAdd() {
            this.attrRef.visible = true;
            this.attrRefOnLoad();
        },
        // 属性池加载
        attrRefOnLoad() {
            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;
            });
            this.$nextTick(() => {
                this.$refs.attrRef.refreshTable();
            });
        },
        // 属性池检索
        attrRefSearch(form, done) {
            this.attrRef.key = form.key
            this.attrRefOnLoad();
            done();
            this.attrRef.key = null;
        },
        // 属性池勾选事件
        selectionChange(list) {
            this.attrRef.selectData = list;
        },
        // 确认属性池勾选
        confirmSelectAttr() {
            if(!this.linkType.attributes){
                this.linkType.attributes = [];
            }
            this.attrRef.queryNotIn = "";
            console.log(this.attrRef.selectData);
            this.attrRef.selectData.forEach(item => {
                this.linkType.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
                });
                this.attrRef.queryNotIn += (item.id + ",")
            });
            this.closeAttrDialog();
        },
        // 取消属性池勾选
        cancleSelectAttr() {
            this.attrRef.selectData = [];
            this.closeAttrDialog();
        },
        // 添加业务类型
        submitlinkType() {
            add(this.linkType, true).then(res => {
                // 添加完成，回调父组件的刷新
                this.$message.success('保存成功');
                this.cancleSubmitlinkType();
                this.$emit('refreshTable');
            })
        },
        // 取消添加业务类型
        cancleSubmitlinkType() {
            this.linkType = {};
            this.linkType.attributes = [];
            this.showSubmitDialog = false;
        },
        // 刷新属性列表
        refreshAttrTable() {
            this.$nextTick(() => {
                this.$refs.attrTable.refreshTable();
            })
        },
        //
        viewChange() {
import {add, update} from '@/api/omd/linkType';
import {queryPage} from '@/api/omd/OmdAttribute';
import {getPage} from '@/api/omd/revisionRule';
import {initTree} from "@/api/omd/btmType"

        },
        // 列表编辑
        cellEditClick(cell) {
            cell.$cellEdit = true;
        },
        // 列表编辑保存
        cellEditSave(row) {
            this.linkType.attributes[row.$index].name = row.name
            this.linkType.attributes[row.$index].defaultValue = row.defaultValue;
            this.linkType.attributes[row.$index].description = row.description;
            row.$cellEdit = false;
        },
        fromSelectChange(dataList){
            console.log(dataList);
            this.linkType.fromBtmTypes = [];
            var fromBtmName = "";
            var fromBtmType = "";
            dataList.forEach(data => {
                //this.linkType.fromBtmTypes.push(data);
                fromBtmName += (data.name + ',');
                fromBtmType += (data.id + ',');
            })
            this.linkType.fromBtmTypeName = fromBtmName;
            this.linkType.fromBtmType = fromBtmType;
            console.log(this.linkType);
        },
        toSelectChange(dataList){
            console.log(dataList);
            this.linkType.toBtmTypes = [];
            var toBtmName = "";
            var toBtmType = "";
            dataList.forEach(data => {
                //this.linkType.toBtmTypes.push(data);
                toBtmName += (data.name + ',');
                toBtmType += (data.id + ',');
            })
            this.linkType.toBtmTypeName = toBtmName;
            this.linkType.toBtmType = toBtmType;
            console.log(this.linkType);
        },
        resetForm(){
            this.linkType = {};
            this.$refs.form.resetFields();
        }
export default {
  name: 'LinkTypeAdd',
  props: {
    linkType: {
      type: Object,
      default: {}
    },
    domainOption: {
      type: Array
    },
    icons: {
      type: Array
    }
  },
  watch: {
    linkType:{
      handler(newval){
        // console.log(newval);
        // console.log( newval.hasOwnProperty('id'))
      }
    }
  },
  data() {
    return {
      form: {},
      showSubmitDialog: false,
      option: {
        height: "330px",
        tip: false,
        selection: true,
        headerAlign: 'center',
        border: true,
        index: true,
        rowKey: 'id',
        tabs: true,
        menu: false,
        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,
        },
        key: null,
        option: {
          height: 360,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          selection: true,
          menu: false,
          border: true,
          reserveSelection: true,
          searchMenuSpan: 8,
          highlightCurrentRow: true,
          column: [
            {
              label: '英文名称',
              prop: 'id',
              align: 'left',
              search: true,
              width: 230
            }, {
              label: '中文名称',
              prop: 'name',
              align: 'center',
            },
            {
              label: '类型',
              prop: 'typeValue',
              align: 'center'
            },
            {
              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: null
      },
      fromBtmValues: [],
      toBtmValues: [],
      domainList: [],
      rules: {
        id: [
          {required: true, message: '请输入链接类型编号', trigger: 'blur'},
          {pattern: /^[A-Za-z]+$/, message: '链接类型编号只能为英文', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在2到15个字符', trigger: 'blur'}
        ],
        domain: [
          {required: true, message: '请选择所属领域', trigger: 'blur'}
        ]
      },
    }
  },
  created() {
    this.initTreeOnLoad();
  },
  methods: {
    // 关闭组件弹窗
    closeSubmitDialog() {
      this.showSubmitDialog = false;
      this.linkType.attributes = [];
      this.linkType = {};
      this.attrRef.selectData = [];
      this.attrRef.queryNotIn = null;
      this.resetForm();
    },
    // 关闭属性池查询弹窗
    closeAttrDialog() {
      this.attrRef.visible = false;
    },
    initTreeOnLoad() {
      initTree().then(res => {
        this.domainList = res.data.data;
      });
    },
    // 添加
    rowAdd() {
      this.attrRef.visible = true;
      this.attrRefOnLoad();
    },
    // 属性池加载
    attrRefOnLoad() {
      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;
      });
      this.$nextTick(() => {
        this.$refs.attrRef.refreshTable();
      });
    },
    // 属性池检索
    attrRefSearch(form, done) {
      this.attrRef.key = form.key
      this.attrRefOnLoad();
      done();
      this.attrRef.key = null;
    },
    // 属性池勾选事件
    selectionChange(list) {
      this.attrRef.selectData = list;
    },
    // 确认属性池勾选
    confirmSelectAttr() {
      if (!this.linkType.attributes) {
        this.linkType.attributes = [];
      }
      this.attrRef.queryNotIn = "";
      console.log(this.attrRef.selectData);
      this.attrRef.selectData.forEach(item => {
        this.linkType.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
        });
        this.attrRef.queryNotIn += (item.id + ",")
      });
      this.closeAttrDialog();
    },
    // 取消属性池勾选
    cancleSelectAttr() {
      this.attrRef.selectData = [];
      this.closeAttrDialog();
    },
    // 添加业务类型
    submitlinkType() {
      add(this.linkType, true).then(res => {
        // 添加完成，回调父组件的刷新
        this.$message.success('保存成功');
        this.cancleSubmitlinkType();
        this.$emit('refreshTable');
      })
    },
    // 取消添加业务类型
    cancleSubmitlinkType() {
      this.linkType = {};
      this.linkType.attributes = [];
      this.showSubmitDialog = false;
    },
    // 刷新属性列表
    refreshAttrTable() {
      this.$nextTick(() => {
        this.$refs.attrTable.refreshTable();
      })
    },
    //
    viewChange() {

    },
    // 列表编辑
    cellEditClick(cell) {
      cell.$cellEdit = true;
    },
    // 列表编辑保存
    cellEditSave(row) {
      this.linkType.attributes[row.$index].name = row.name
      this.linkType.attributes[row.$index].defaultValue = row.defaultValue;
      this.linkType.attributes[row.$index].description = row.description;
      row.$cellEdit = false;
    },
    fromSelectChange(dataList) {
      console.log(dataList);
      this.linkType.fromBtmTypes = [];
      var fromBtmName = "";
      var fromBtmType = "";
      dataList.forEach(data => {
        //this.linkType.fromBtmTypes.push(data);
        fromBtmName += (data.name + ',');
        fromBtmType += (data.id + ',');
      })
      this.linkType.fromBtmTypeName = fromBtmName;
      this.linkType.fromBtmType = fromBtmType;
      console.log(this.linkType);
    },
    toSelectChange(dataList) {
      console.log(dataList);
      this.linkType.toBtmTypes = [];
      var toBtmName = "";
      var toBtmType = "";
      dataList.forEach(data => {
        //this.linkType.toBtmTypes.push(data);
        toBtmName += (data.name + ',');
        toBtmType += (data.id + ',');
      })
      this.linkType.toBtmTypeName = toBtmName;
      this.linkType.toBtmType = toBtmType;
      console.log(this.linkType);
    },
    resetForm() {
      this.linkType = {};
      this.$refs.form.resetFields();
    }
  }
}
</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;
}

.linkTypeForm>.el-form-item>.el-form-item__content>.el-input>.el-input__inner,.linkTypeForm>.el-form-item>.el-form-item__content>.el-select{
    width: 290px;
.linkTypeForm > .el-form-item > .el-form-item__content > .el-input > .el-input__inner, .linkTypeForm > .el-form-item > .el-form-item__content > .el-select {
  width: 290px;
}

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

#descId {
    width: 57vw;
  width: 57vw;
}
.el-tag + .el-tag{

.el-tag + .el-tag {
  margin-top: 2px;
}
</style>