<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
|
<div class="headerCon">
|
<el-button icon="el-icon-plus" plain size="small" type="primary">创建
|
</el-button>
|
<el-button icon="el-icon-edit" plain size="small" type="primary">修改
|
</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger">删除
|
</el-button>
|
<el-button icon="el-icon-view" plain size="small" type="primary">查看
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary">导出
|
</el-button>
|
<el-button icon="el-icon-upload2" plain size="small" type="primary">导入
|
</el-button>
|
<el-button icon="el-icon-circle-plus-outline" plain size="small"
|
type="primary">创建视图
|
</el-button>
|
<el-button icon="el-icon-menu" plain size="small"
|
type="primary">一致性检查
|
</el-button>
|
</div>
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 300px);">
|
<avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<div>
|
<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>
|
{{ nodeRow.name }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.name"></i>
|
标签
|
</template>
|
{{ nodeRow.tag }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.tableName"></i>
|
实现类
|
</template>
|
{{ nodeRow.implClass }}
|
</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="nodeRow.shape" size="small">
|
{{ nodeRow.shape }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.desc"></i>
|
描述
|
</template>
|
{{ nodeRow.description }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<el-descriptions :column="3" 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 nodeRow.btmItemsFrom" style="margin-left:2px;">
|
<el-tag effect="plain" size="small" style="margin-top: 2px;">
|
{{ item }}
|
</el-tag>
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.from"></i>
|
Form端主类型
|
</template>
|
<el-tag v-if="nodeRow.primitivesFrom" effect="plain" size="small">
|
{{ nodeRow.primitivesFrom === '请选择' ? nodeRow.btmItemsFrom[0] : nodeRow.primitivesFrom }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.from"></i>
|
From端对应关系
|
</template>
|
<el-tag v-if="nodeRow.relationFrom" effect="plain" size="small">{{ nodeRow.relationFrom }}</el-tag>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions :column="3" border class="margin-top" direction="vertical">
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.to"></i>
|
To端类型
|
</template>
|
<span v-for="item in nodeRow.btmItemsTo" style="margin-left:2px;">
|
<el-tag effect="plain" size="small" style="margin-top: 2px;">
|
{{ item }}
|
</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>
|
<el-tag v-if="nodeRow.primitivesTo" effect="plain" size="small">
|
{{ nodeRow.primitivesTo === '请选择' ? nodeRow.btmItemsTo[0] : nodeRow.primitivesTo }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.to"></i>
|
To端对应关系
|
</template>
|
<el-tag v-if="nodeRow.relationTo" effect="plain" size="small">{{ nodeRow.relationTo }}</el-tag>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
</div>
|
<div style="margin-top: 20px">
|
<h3>属性池列表</h3>
|
<avue-crud
|
:data="tableData"
|
:option="tableOption"
|
></avue-crud>
|
</div>
|
</basic-container>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
import {gridLink} from "@/api/modeling/linkType/api";
|
import basicOption from '@/util/basic-option'
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: false,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'name',
|
value: 'name',
|
children: 'children'
|
}
|
},
|
treeData: [],
|
tableData: [],
|
tableOption: {
|
...basicOption,
|
editBtn: false,
|
refreshBtn: false,
|
selection: false,
|
// index:false,
|
column: [
|
{
|
label: '属性名',
|
prop: 'attributeName',
|
sortable: true,
|
},
|
{
|
label: '属性类型',
|
prop: 'source',
|
sortable: true,
|
},
|
{
|
label: '初始值',
|
prop: 'source',
|
sortable: true,
|
},
|
{
|
label: '说明',
|
prop: 'desc',
|
}
|
]
|
},
|
nodeRow: {},
|
descriptionOption: {
|
labelStyle: 'text-align:center;width:120px',
|
contentStyle: 'width:240px;text-align:center;word-break;break-all;'
|
},
|
icons: {
|
id: 'el-icon-finished',
|
name: 'el-icon-tickets',
|
tableName: 'el-icon-date',
|
domain: 'el-icon-connection',
|
from: 'el-icon-sort-down',
|
to: 'el-icon-sort-up',
|
main: 'el-icon-warning-outline',
|
desc: 'el-icon-chat-line-square'
|
},
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
mounted() {
|
|
},
|
methods: {
|
// 树onLoad请求
|
getTreeList() {
|
gridLink().then(res => {
|
const data = res.data.data;
|
this.treeData = data;
|
this.tableLoading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 树点击事件
|
nodeClick(row) {
|
console.log(row);
|
this.nodeRow = row;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
}
|
|
.headerCon {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 5px;
|
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
|
.el-button {
|
margin-top: 5px;
|
}
|
}
|
|
.headerCon > .el-button:nth-child(4) {
|
margin-left: 0;
|
}
|
|
.headerCon > .el-button:nth-child(7) {
|
margin-left: 0;
|
}
|
</style>
|
