链接类型添加组件

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,388 @@
<template>
    <el-dialog title="链接类型" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="70%"
        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="fromBtmValues" :value="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="toBtmValues" :value="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>

        </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>
</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",
                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){
            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;
        },
        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;
}

.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 {
    width: 200px;
}

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

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