<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>
|
|
<!-- 属性池的选择 -->
|
<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,
|
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;
|
}
|
|
.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;
|
}
|
|
.descClass > .el-input__inner {
|
width: 57vw
|
}
|
|
#descId {
|
width: 57vw;
|
}
|
|
.el-tag + .el-tag {
|
margin-top: 2px;
|
}
|
</style>
|