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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,456 @@
<template>
    <el-container>
        <el-dialog title="元数据" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="700px"
            style="height: 115vh;">
            <!-- å…ƒæ•°æ®çš„增改弹窗 -->
            <el-form ref="form" :model="attribute" show-message="true" inline size="medium" label-suffix=":"
                class="attributeForm" :rules="rules" @resetFields="resetAttributeForm" status-icon="true">
                <el-form-item label="属性编号" label-width="100px" prop="id">
                    <el-input v-model="attribute.id" maxlength="15" show-word-limit type="text"></el-input>
                </el-form-item>
                <el-form-item label="属性名称" label-width="100px" prop="name">
                    <el-input v-model="attribute.name"></el-input>
                </el-form-item>
                <el-form-item label="属性类型" label-width="100px" prop="typeValue">
                    <el-select v-model="attribute.typeValue" placeholder="请选择属性类型" @change="typeSelectChange">
                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签" label-width="100px">
                    <el-input v-model="attribute.hashtag"></el-input>
                </el-form-item>
                <el-form-item label="默认值" label-width="100px">
                    <el-input v-model="attribute.defaultValue"></el-input>
                </el-form-item>
                <el-form-item label="允许为空" label-width="100px">
                    <el-switch v-model="attribute.nullable" active-text="允许" inactive-text="不允许"></el-switch>
                </el-form-item>
                <el-form-item label="长度" label-width="100px" prop="maxLength">
                    <el-input-number v-model="attribute.maxLength" :min="1" :max="4000" :step="1" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="精度" label-width="100px" v-if="attribute.typeValue == 'VTDouble'">
                    <el-input-number v-model="attribute.precision" :min="1" :max="20" :step="1" controls-position="right" @change="changeNumber"></el-input-number>
                </el-form-item>
                <el-form-item label="描述" label-width="100px">
                    <el-input v-model="attribute.description" type="text"></el-input>
                </el-form-item>

                <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
                    <el-tab-pane label="参照" name="referTab">
                        <el-form-item label="参照类型" label-width="100px">
                            <el-select v-model="attribute.referTypeKey" @change="referTypeSelectChange">
                                <el-option v-for="item in btmRefer.referTypeList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="参照名称" label-width="100px">
                            <el-input v-model="attribute.referToName" @focus="openReferConfig" clearable="true"
                                :disabled="referToFlag" @clear="clearReferTo">
                                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="枚举" name="enumTab">
                        <el-form-item label="枚举" label-width="100px">
                            <el-input v-model="attribute.dictValue" @focus="openEnumConfig" clearable="true">
                                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="枚举项" label-width="100px">
                            
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAttribute">确定</el-button>
                <el-button @click="cancleSubmit">取消</el-button>
            </div>
            <!-- é€‰æ‹©å‚照时的弹窗 -->
            <el-dialog title="参照列表" :visible.sync="btmRefer.show" append-to-body @close="closeReferDialog" width="80%"
                style="height: 115vh;">
                <el-container>
                    <el-aside>
                        <basic-container>
                           <span class="el-dialog__title"> {{ domain.treeOption.title }} </span>
                            <div style="height:20px;"></div>
                            <avue-tree id="domain" :data="domain.data" :option="domain.treeOption" @node-click="nodeClick"
                                class="businessTree" style="height: 418px">
                                <span class="el-tree-node__label" slot-scope="{ node, data }">
                                    <span>
                                        <i class="el-icon-star-on"></i>
                                        {{ (node || {}).label }}
                                    </span>
                                </span>
                            </avue-tree>
                        </basic-container>
                    </el-aside>
                    <el-main>
                        <basic-container>
                            <avue-crud ref="btmTable" :option="btmRefer.option" :data="btmRefer.data" class="btmTable" @row-click="btmReferClick">
                                <template slot="radio" slot-scope="{row}">
                                    <el-radio v-model="btmRefer.selectRow" :label="row.$index">&nbsp;
                                    </el-radio>
                                </template>
                            </avue-crud>
                        </basic-container>
                    </el-main>

                </el-container>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirmBtm" size="small">确定</el-button>
                    <el-button @click="cancleBtm" size="small">取消</el-button>
                </div>
            </el-dialog>
            <!-- é€‰æ‹©æžšä¸¾æ—¶çš„弹窗 -->
            <el-dialog title="枚举列表" :visible.sync="enumRefer.show" append-to-body @close="closeEnumDialog" width="70%" 
                style="height: 115vh;">
                <avue-crud ref="eunmTable" :option="enumRefer.option" :data="enumRefer.data" class="enumTable" @row-click="enumReferClick" :page.sync="enumRefer.enumPage">
                    <template slot="radio" slot-scope="{row}">
                        <el-radio v-model="enumRefer.selectRow" :label="row.$index">&nbsp;
                        </el-radio>
                    </template>
                </avue-crud>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirmEnum" size="small">确定</el-button>
                    <el-button @click="cancleEnum" size="small">取消</el-button>
                </div>
            </el-dialog>
        </el-dialog>

    </el-container>
</template>

<script>
import { getDictionary,getParentList } from '@/api/omd/enum'
import { initTree,btmPage } from '@/api/omd/btmType'
import { add} from '@/api/omd/OmdAttribute'
export default {
    name: 'originalAdd',
    props: {
        attribute: {
            type: Object
        },
    },
    data() {
        return {
            showSubmitDialog: false,
            // é»˜è®¤çš„页签
            activeName: 'referTab',
            // å±žæ€§ç±»åž‹ä¸‹æ‹‰æ¡†æ•°æ®
            typeList: [],
            // å‚照下拉框是否可用
            referToFlag: true,
            // è¡¨å•æ ¡éªŒè§„则
            rules: {
                id: [
                    { required: true, message: '请输入属性编号', trigger: 'blur' },
                    { pattern: /^[A-Za-z]+$/, message: '属性编号只能为英文', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在2到15个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入属性名称', trigger: 'blur' }
                ],
                typeValue: [
                    { required: true, message: '请选择属性类型', trigger: 'change' }
                ],
                maxLength: [
                    { required: true, message: '需要指定长度', trigger: 'blur' }
                ]
            },
            // å‚照页面表格配置
            btmRefer: {
                show: false,
                btmPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 100
                },
                option: {
                    height: 405,
                    addBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    menu: false,
                    border: true,
                    reserveSelection: true,
                    searchMenuSpan: 32,
                    searchShowBtn: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                        label: '',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },
                    {
                        label: '英文名称',
                        prop: 'id',
                        align: 'center',
                        searchSpan:8,
                        search: true,
                    }, {
                        label: '中文名称',
                        prop: 'name',
                        align: 'center',
                        searchSpan:8,
                        search: true,
                    }]
                },
                // å‚照页面表格数据
                data: [],
                selectRow: '',
                selectItem: {},
                referTypeList: []
            },
            // æžšä¸¾å‚照表格配置
            enumRefer: {
                show: false,
                enumPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 100
                },
                option: {
                    height: 360,
                    addBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    selection: true,
                    menu: false,
                    border: true,
                    reserveSelection: true,
                    searchMenuSpan: 32,
                    searchShowBtn: false,
                    highlightCurrentRow: true,
                    column: [{
                        label: '',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },{
                        label: '枚举代号',
                        prop: 'name',
                        align: 'center',
                        searchSpan:8,
                        search: true,
                    }, {
                        label: '枚举名称',
                        prop: 'label',
                        align: 'center',
                        searchSpan:8,
                        search: true,
                    }]
                },
                // æžšä¸¾å‚照表格数据
                data: [],
                enumDictionary: [],
                // é€‰å®šè¡Œ
                selectRow: '',
                selectItem: {}
            },
            domain: {
                data: [],
                treeOption: {
                    defaultExpandAll: true,
                    title: '领域服务树',
                    props: {
                        labelText: '',
                        label: 'name',
                        value: 'oid',
                    }
                }
            }
        }
    },
    created() {
        this.initAttributeTypeList();
        this.initAttributeReferTypeList();
    },
    methods: {
        closeSubmitDialog() {
            this.resetAttributeForm();
            this.showSubmitDialog = false;
        },
        resetAttributeForm() {
            this.attribute = {
                nullable: true,
                referTypeKey: '',
            };
            this.referToFlag = true;
            this.$refs.form.resetFields();
        },
        submitAttribute() { 
            add(this.attribute).then(res => {
                this.$message.success("保存成功");
                this.showSubmitDialog = false;
                this.attribute = {};
                this.$emit('refreshTable');
            });
            
        },
        cancleSubmit() {
            this.closeSubmitDialog();
        },
        closeEnumDialog() {
            this.cancleEnum();
         },
        closeReferDialog() { 
            this.cancleBtm();
        },
        confirmBtm() { 
            this.attribute.referToId = this.btmRefer.selectItem.oid;
            this.attribute.referToName = this.btmRefer.selectItem.name;
            this.btmRefer.show = false;
        },
        cancleBtm() { 
            this.btmRefer.selectItem = {};
            this.btmRefer.show = false;
            this.btmRefer.selectRow = '';
        },
        confirmEnum() {
            this.attribute.usingDict = true;
            this.attribute.dictCode = this.enumRefer.selectItem.name;
            this.attribute.dictValue = this.enumRefer.selectItem.label;
            this.enumRefer.show = false;
         },
        cancleEnum() { 
            this.enumRefer.selectItem = {};
            this.enumRefer.show = false;
            this.enumRefer.selectRow = '';
        },
        // å‚照名称输入框获取焦点时的事件
        openReferConfig() {
            if (!this.attribute.referTypeKey) {
                this.$message.warning('请先选择参照的类型');
                this.referToFlag = true;
                return;
            }
            this.domain.data = [];
            this.btmRefer.data = [];
            initTree().then(res => {
                this.domain.data = res.data.data;
            })
            this.btmRefer.show = true;

        },
        // å‚照类型树的点击事件
        nodeClick(data) {
            // åŒºåˆ†ä¸šåŠ¡ç±»åž‹çš„查询和链接类型的查询
            if(this.attribute.referTypeKey == 'btmType'){
                btmPage(this.btmRefer.btmPage.currentPage,this.btmRefer.btmPage.pageSize,{domain:data.id}).then(res => {
                    this.btmRefer.data = res.data.data.records;
                    this.btmRefer.btmPage.total = res.data.data.total;
                })
            }
            if(this.attribute.referTypeKey == 'linkType'){

            }
        },
        // æžšä¸¾ç±»åž‹è¾“入框获得焦点时的事件
        openEnumConfig() {
            getParentList(this.enumRefer.enumPage.currentPage,this.enumRefer.enumPage.pageSize).then(res => {
                this.enumRefer.enumPage.total = res.data.data.total;
                this.enumRefer.data = res.data.data.records;
            })
            this.enumRefer.show = true;
        },
        // å±žæ€§ç±»åž‹ä¸‹æ‹‰æ¡†é€‰æ‹©äº‹ä»¶
        typeSelectChange(value) {
            if (value == 'VTString') {
                this.$set(this.attribute,"maxLength",150)
            } else if (value == 'VTInteger') {
                this.$set(this.attribute,"maxLength",50)
            } else if (value == 'VTBoolean') {
                this.$set(this.attribute,"maxLength",5)
            } else if (value == 'VTDouble') {
                this.$set(this.attribute,"maxLength",26)
                this.$set(this.attribute,"precision",8)
            } else if (value == 'VTLong') {
                this.$set(this.attribute,"maxLength",150)
            } else if (value == 'VTDate' || value == 'VTTime' || value == 'VTDateTime') {
                this.$set(this.attribute,"maxLength",6)
            } else {
                this.$set(this.attribute,"maxLength",50)
            }
            this.attribute.typeCode = 'attributeType';
            this.attribute.typeKey = value;
        },
        referTypeSelectChange(value) {
            this.attribute.referTypeCode = 'attributeReferType';
            this.attribute.referTypeKey = value;
            this.referToFlag = false;
        },
        initAttributeTypeList() {
            getDictionary({ code: 'attributeType' }).then(res => {
                res.data.data.forEach(element => {
                    this.typeList.push(
                        { value: element.itemValue, label: element.itemName }
                    )
                });
            }).catch(() => {
                this.$message.error('属性类型没找到或者未定义')
            })
        },
        initAttributeReferTypeList(){
            getDictionary({ code: 'attributeReferType' }).then(res => {
                res.data.data.forEach(element => {
                    this.btmRefer.referTypeList.push(
                        { value: element.itemValue, label: element.itemName }
                    )
                });
            }).catch(() => {
                this.$message.error('参照类型没找到或者未定义')
            })
        },
        btmReferClick(row){
            this.btmRefer.selectItem = row;
            this.btmRefer.selectRow = row.$index;
        },
        enumReferClick(row){
            this.enumRefer.selectItem = row;
            this.enumRefer.selectRow = row.$index;
        },
        // å‚照名称点击清除数据
        clearReferTo(){
            this.$delete(this.attribute,'referToId');
            this.$delete(this.attribute,'referToName');
            this.btmRefer.selectItem = {};
            this.btmRefer.selectRow = '';
        },
        handleClick(tab){
            // å› ä¸ºåªèƒ½å‚照和枚举二选一。所以在切换的时候把属性给清空。
            this.$delete(this.attribute,'referTypeCode');
            this.$delete(this.attribute,'referTypeKey');
            this.$delete(this.attribute,'referTypeValue');
            this.$delete(this.attribute,'referToId');
            this.$delete(this.attribute,'referToName');
            this.$delete(this.attribute,'dictCode');
            this.$delete(this.attribute,'dictKey');
            this.$delete(this.attribute,'dictValue');
            this.$delete(this.attribute,'usingDict');
        }
    }
}
</script>

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

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

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

.attributeForm>.el-form-item>.el-form-item__content> .el-select>.el-input>.el-input__inner {
    width: 200px;
}
</style>