<template>
|
<el-container>
|
<!-- 顶端按钮 -->
|
|
<!-- 侧边栏树 -->
|
<el-container>
|
<el-aside style="width: 20%;">
|
<basic-container class="businessTreeContainer">
|
<div class="app">
|
<div style="display: flex;margin-bottom: 10px;">
|
<el-button v-if="permissionList.addBtn" plain size="mini" type="primary" @click="linkTypeAdd">
|
新增
|
</el-button>
|
<el-button v-if="permissionList.editBtn" plain size="mini" type="primary" @click="linkTypeEdit">
|
修改
|
</el-button>
|
</div>
|
<avue-tree :data="treeData" :option="treeOption" class="businessTree"
|
@node-click="nodeClick">
|
<template slot-scope="{ node, data }" class="el-tree-node__label">
|
|
<el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" effect="dark"
|
open-delay="250"
|
placement="bottom">
|
<span>
|
<i class="el-icon-star-on"></i>
|
{{ (node || {}).label }}
|
</span>
|
</el-tooltip>
|
</template>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-aside>
|
<el-container>
|
<el-main>
|
<basic-container>
|
<p style="margin-top: 10px;font-weight: 570;font-size: 19px">基本信息</p>
|
<el-descriptions :column="2" border class="margin-top" size="medium">
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.id"></i>
|
英文名称
|
</template>
|
{{ obj.id }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.name"></i>
|
中文名称
|
</template>
|
{{ obj.name }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.tableName"></i>
|
数据库表名
|
</template>
|
{{ obj.tableName }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.domain"></i>
|
所属领域
|
</template>
|
<el-tag v-if="obj.domainText" size="small">
|
{{ obj.domainText }}
|
</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="2" border class="margin-top" direction="vertical">
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.from"></i>
|
From端类型
|
</template>
|
<span v-for="item in obj.fromBtmTypes" style="margin-left:2px;">
|
<el-tag effect="plain" size="small" style="margin-top: 2px;">
|
{{ item.id + '（' + item.name + '）' }}
|
</el-tag>
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.to"></i>
|
To段类型
|
</template>
|
<span v-for="item in obj.toBtmTypes" style="margin-left:2px">
|
<el-tag effect="plain" size="small" style="margin-top: 2px;">
|
{{ item.id + '（' + item.name + '）' }}
|
</el-tag>
|
</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<el-descriptions :column="2" border class="margin-top" size="medium">
|
<!--
|
<el-descriptions-item :labelStyle="descriptionOption.labelStyle"
|
:contentStyle="descriptionOption.contentStyle">
|
<template slot="label">
|
<i :class="icons.main"></i>
|
主类型
|
</template>
|
{{ obj.fromBtmTypeName }}
|
</el-descriptions-item>
|
<el-descriptions-item :labelStyle="descriptionOption.labelStyle"
|
:contentStyle="descriptionOption.contentStyle">
|
<template slot="label">
|
<i :class="icons.main"></i>
|
主类型
|
</template>
|
{{ obj.toBtmTypeName }}
|
</el-descriptions-item>
|
-->
|
<el-descriptions-item labelStyle="text-align:center;width:120px" span='2'>
|
<template slot="label">
|
<i :class="icons.desc"></i>
|
描述
|
</template>
|
{{ obj.description }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</basic-container>
|
<!-- 属性列表-->
|
<basic-container>
|
<p style="margin-top: 10px;font-weight: 570;font-size: 19px">属性列表</p>
|
<avue-crud v-model="obj" :data="obj.attributes" :option="loadOption" class="attributeCrud">
|
<template slot="attrDataTypeText" slot-scope="{row}">
|
<el-tag>{{ row.attrDataTypeText }}</el-tag>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</el-main>
|
</el-container>
|
</el-container>
|
<link-type-add ref="linkAdd" :domainOption="domainOptions" :icons="icons" :linkStatus="linkStatus"
|
:linkType="addOption.linkType"
|
@refreshTable="initTreeOnLoad">
|
</link-type-add>
|
|
</el-container>
|
</template>
|
|
<script>
|
import {
|
initTree,
|
refOnLoad,
|
getDomain,
|
saveFromTable,
|
getDetail
|
} from "@/api/omd/linkType"
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "LinkType",
|
data() {
|
return {
|
linkStatus: '',
|
addOption: {
|
linkType: {
|
attributes: []
|
},
|
},
|
domain: null,
|
domainOptions: [],
|
icons: {
|
id: 'el-icon-finished',
|
name: 'el-icon-tickets',
|
tableName: 'el-icon-date',
|
domain: 'el-icon-folder-opened',
|
from: 'el-icon-sort-down',
|
to: 'el-icon-sort-up',
|
main: 'el-icon-warning-outline',
|
desc: 'el-icon-chat-line-square'
|
},
|
treeData: [],
|
descriptionOption: {
|
labelStyle: 'text-align:center;width:120px',
|
contentStyle: 'width:240px;text-align:center;word-break;break-all;'
|
},
|
loadOption: {
|
border: true,
|
height: 'auto',
|
editBtn: false,
|
addBtn: false,
|
menu: false,
|
highlightCurrentRow: true,
|
refreshBtn: false,
|
columnBtn: false,
|
column: [
|
{
|
label: '英文名称',
|
prop: 'id',
|
align: 'center'
|
}, {
|
label: '中文名称',
|
prop: 'name',
|
align: 'center'
|
},
|
{
|
label: '类型',
|
prop: 'attrDataTypeText',
|
align: 'center',
|
slot: true
|
},
|
{
|
label: '默认值',
|
prop: 'defaultValue',
|
align: 'center'
|
},
|
{
|
label: '说明',
|
prop: 'description',
|
align: 'center'
|
}
|
]
|
},
|
obj: {},
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: true,
|
title: '链接类型树',
|
addBtn: false,
|
props: {
|
labelText: '',
|
label: 'label',
|
value: 'oid',
|
children: 'childList',
|
}
|
},
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_add, false),
|
editBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_edit, false),
|
}
|
}
|
},
|
created() {
|
this.initTreeOnLoad();
|
this.initDomainOption();
|
},
|
|
methods: {
|
// 树点击
|
nodeClick(data) {
|
getDetail(data.oid).then(res => {
|
this.obj = res.data.data;
|
})
|
},
|
// 添加按钮点击事件
|
linkTypeAdd() {
|
this.$refs.linkAdd.linkType = {};
|
this.linkStatus = 'add';
|
this.$refs.linkAdd.showSubmitDialog = true;
|
},
|
// 编辑按钮点击事件
|
linkTypeEdit() {
|
var linktype = this.obj;
|
linktype.fromBtmValues = this.obj.fromBtmTypes;
|
linktype.toBtmValues = this.obj.toBtmTypes;
|
linktype.attributes = this.obj.attributes;
|
var json = JSON.stringify(linktype);
|
this.addOption.linkType = JSON.parse(json);
|
this.$refs.linkAdd.linkType = this.addOption.linkType;
|
this.linkStatus = 'edit';
|
this.$refs.linkAdd.showSubmitDialog = true;
|
},
|
// 从已有中获取按钮点击事件
|
selectFromTable() {
|
|
},
|
// 加载服务树
|
initTreeOnLoad() {
|
initTree().then(res => {
|
this.treeData = res.data.data;
|
});
|
},
|
// 加载服务下拉框
|
initDomainOption() {
|
getDomain().then(res => {
|
this.domainOptions = res.data.data;
|
})
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.attributeCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
|
display: none !important;
|
}
|
|
.app {
|
overflow: auto;
|
height: 84.3vh;
|
}
|
|
.app::-webkit-scrollbar {
|
height: 15px; // 纵向滚动条 必写
|
background: white;
|
border: white;
|
width: 10px;
|
|
}
|
|
// 滚动条的滑块
|
.app::-webkit-scrollbar-thumb {
|
width: 10px;
|
height: 10px;
|
background-color: #ececec;
|
border-radius: 20px;
|
border: #ececec;
|
}
|
|
|
</style>
|
