<template>
|
<el-container>
|
<el-dialog title="元数据" :visible.sync="showSubmitDialog" append-to-body @close="closeSubmitDialog" width="50%"
|
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">
|
</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">
|
</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;
|
}
|
</style>
|
