<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="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>
|
|
</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){
|
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 {
|
width: 200px;
|
}
|
|
.descClass>.el-input__inner {
|
width: 57vw
|
}
|
|
#descId {
|
width: 57vw;
|
}
|
</style>
|
