<template>
|
<el-container>
|
<!-- <el-header class="businessHeader" style="height: 40px;padding:0 8px">-->
|
|
<!-- </el-header>-->
|
<el-container>
|
<el-aside style="width: 20%">
|
<basic-container class="businessTreeContainer">
|
<div class="app">
|
<div style="display: flex;margin-bottom: 10px;justify-content: space-around;">
|
<el-button v-if="permissionList.addBtn" size="mini" type="primary" @click="businessAdd" plain style="width: 60px">
|
新增
|
</el-button>
|
<el-button v-if="permissionList.editBtn" size="mini" type="primary" @click="businessEdit" plain style="width: 60px">
|
修改
|
</el-button>
|
<el-button v-if="permissionList.table" size="mini" type="primary"
|
@click="selectFromTable" plain> 从已有中获取
|
</el-button>
|
</div>
|
<avue-tree :data="treeData" :option="treeOption" class="businessTree" @node-click="nodeClick" style="width: fit-content;">
|
<template slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<i :class="(node || {}).level === 2 ? 'el-icon-star-off' : 'el-icon-folder-opened'"></i>
|
{{ (node || {}).label }}
|
</span>
|
</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="3" :size="size" border class="margin-top">
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.key"></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>
|
<template slot="label" :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<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>
|
<span v-else></span>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.revisionRule"></i>
|
版本规则
|
</template>
|
{{ obj.revisionRuleName ? obj.revisionRuleName + '(' + obj.revisionRuleId + ')' : '' }}
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.lifeCycle"></i>
|
生命周期
|
</template>
|
{{ obj.lifeCycleName ? obj.lifeCycleName + '(' + obj.lifeCycleId + ')' : '' }}
|
</el-descriptions-item>
|
<!-- <el-descriptions-item :contentStyle="descriptionOption.contentStyle"-->
|
<!-- :labelStyle="descriptionOption.labelStyle">-->
|
<!-- <template slot="label">-->
|
<!-- <i :class="icons.view"></i>-->
|
<!-- 视图-->
|
<!-- </template>-->
|
<!-- <el-tag v-if="obj.viewText" size="small">-->
|
<!-- {{ obj.viewText }}-->
|
<!-- </el-tag>-->
|
<!-- <span v-else></span>-->
|
<!-- </el-descriptions-item>-->
|
<!-- <el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-arrow-down"></i>
|
实现类
|
</template>
|
{{ obj.implClass }}
|
</el-descriptions-item> -->
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<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-dialog :visible="ref.visible" append-to-body title="从数据库中添加" width="700px" @close="dialoghandelfalse" top="9vh">
|
选择领域：
|
<el-select v-model="domain" placeholder="请选择" size="small" @change="refOnLoad">
|
<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<div class="sep" style="height:7px">
|
|
</div>
|
<avue-crud ref="businessCrud" v-model="ref.form" :data="ref.data" :option="ref.option" class="businessCrud"
|
@selection-change="selectionChange">
|
</avue-crud>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialoghandelfalse">取 消</el-button>
|
<el-button type="primary" @click="dialoghandeltrue">确 定</el-button>
|
</span>
|
</el-dialog>
|
</el-container>
|
</el-container>
|
<business-add ref="btmAdd" :btmType="addOption.btmType" :domainOption="domainOptions" :icons="icons" :type="type"
|
@refreshTable="initTreeOnLoad">
|
</business-add>
|
</el-container>
|
</template>
|
<script>
|
import {
|
initTree,
|
refOnLoad,
|
getDomain,
|
saveFromTable,
|
getDetail
|
} from "@/api/omd/btmType"
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "Business",
|
data() {
|
return {
|
type:"",
|
//生命周期对话框状态
|
packageLifeBox: false,
|
//版本规则状态
|
rulesFalg: false,
|
obj: {},
|
selectionList: [],
|
treeData: [],
|
treeOption: {
|
defaultExpandAll: false,
|
title: '业务类型树',
|
addBtn: false,
|
menu: false,
|
props: {
|
labelText: '',
|
label: 'label',
|
value: 'oid',
|
children: 'childList',
|
}
|
},
|
addOption: {
|
btmType: {},
|
},
|
loadOption: {
|
height:'auto',
|
border: true,
|
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'
|
}
|
]
|
},
|
descriptionOption: {
|
labelStyle: 'text-align:center;width:120px',
|
contentStyle: 'width:240px;text-align:center;word-break;break-all;'
|
},
|
domain: null,
|
domainOptions: [],
|
icons: {
|
key: 'el-icon-finished',
|
name: 'el-icon-tickets',
|
tableName: 'el-icon-date',
|
domain: 'el-icon-folder-opened',
|
revisionRule: 'el-icon-s-check',
|
lifeCycle: 'el-icon-refresh-right',
|
view: 'el-icon-view',
|
desc: 'el-icon-chat-line-square',
|
referType: 'el-icon-search'
|
},
|
ref: {
|
// 从表中选择dialog状态
|
visible: false,
|
form: {},
|
option: {
|
height: "550px",
|
selection: true,
|
headerAlign: 'center',
|
border: true,
|
index: true,
|
rowKey: 'id',
|
tabs: true,
|
addBtn: false,
|
menu: false,
|
highlightCurrentRow: true,
|
column: [
|
{
|
label: '表名',
|
prop: 'tableName',
|
align: 'center',
|
display: false
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
align: 'center',
|
display: false
|
}
|
]
|
},
|
data: [],
|
}
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.modeling_Business.Business_add, false),
|
table: this.vaildData(this.permission.modeling_Business.Business_table, false),
|
editBtn: this.vaildData(this.permission.modeling_Business.Business_edit, false),
|
}
|
}
|
},
|
created() {
|
this.initTreeOnLoad();
|
this.initDomainOption();
|
},
|
methods: {
|
nodeClick(data, node, leaf) {
|
if (data.oid) {
|
getDetail(data.oid).then(res => {
|
this.obj = res.data.data;
|
})
|
} else {
|
this.$message.warning('请点击子节点');
|
}
|
},
|
// 基本信息添加
|
basicSave(row, done, loading) {
|
add(Object.assign({
|
createUser: this.userInfo.name
|
}, row)).then(() => {
|
this.$message.success('新增成功')
|
done();
|
this.getList();
|
}).catch(() => {
|
loading()
|
})
|
},
|
//属性添加
|
loadSave(row, done, loading) {
|
add(Object.assign({
|
createUser: this.userInfo.name
|
}, row)).then(() => {
|
this.$message.success('新增成功')
|
done();
|
this.getList();
|
}).catch(() => {
|
loading()
|
})
|
},
|
selectFromTable() {
|
this.ref.visible = true;
|
},
|
refOnLoad(domain) {
|
refOnLoad(domain).then(res => {
|
this.ref.data = res.data.data;
|
})
|
},
|
initTreeOnLoad() {
|
initTree().then(res => {
|
this.treeData = res.data.data;
|
});
|
},
|
initDomainOption() {
|
getDomain().then(res => {
|
this.domainOptions = res.data.data;
|
})
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
dialoghandelfalse() {
|
this.ref.visible = false;
|
this.$refs.businessCrud.toggleSelection()
|
this.selectionList = [];
|
this.domain = null;
|
},
|
dialoghandeltrue() {
|
if (this.selectionList.length < 1) {
|
this.$message.warning('请选择数据');
|
return false;
|
}
|
saveFromTable(this.selectionList, this.domain).then(res => {
|
this.$message.success('保存成功');
|
this.dialoghandelfalse();
|
this.initTreeOnLoad();
|
})
|
},
|
businessAdd() {
|
this.$refs.btmAdd.showSubmitDialog = true;
|
this.$refs.btmAdd.btmType = {};
|
this.type = 'add';
|
this.ifRefreshBtmAddRefresh();
|
},
|
businessEdit() {
|
if (!this.obj.oid) {
|
this.$message.warning("请选择一条叶子节点的业务类型");
|
return;
|
}
|
const json = JSON.stringify(this.obj);
|
this.$refs.btmAdd.btmType = JSON.parse(json);
|
this.$refs.btmAdd.showSubmitDialog = true;
|
this.type = 'edit'
|
this.ifRefreshBtmAddRefresh();
|
},
|
ifRefreshBtmAddRefresh() {
|
// this.$refs.btmAdd.refreshAttrTable();
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.businessCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
|
display: none !important;
|
}
|
|
.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>
|
