<template>
|
<el-dialog
|
title="业务类型"
|
:visible.sync="showSubmitDialog"
|
append-to-body
|
@close="closeSubmitDialog"
|
width="70%"
|
style="height: 115vh;"
|
>
|
<el-form ref="form" :model="btmType" show-message="true" inline size="medium" label-suffix=":" class="btmTypeForm">
|
|
<el-form-item label="英文名称" label-width="100px" required="true">
|
<el-input v-model="btmType.id" :prefix-icon="icons.key"></el-input>
|
</el-form-item>
|
<el-form-item label="中文名称" label-width="100px">
|
<el-input v-model="btmType.name" :prefix-icon="icons.name"></el-input>
|
</el-form-item>
|
<el-form-item label="数据库表名" label-width="100px">
|
<el-input v-model="btmType.tableName" :prefix-icon="icons.tableName"></el-input>
|
</el-form-item>
|
<el-form-item label="所属领域" label-width="100px">
|
<el-select v-model="btmType.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="版本规则" label-width="100px">
|
<el-input v-model="btmType.revisionRuleName" :prefix-icon="icons.revisionRule" class="revisionRule"
|
@focus="openRevision" clearable @clear="clearRevision">
|
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="生命周期" label-width="100px">
|
<el-input v-model="btmType.lifeCycleId" :prefix-icon="icons.lifeCycle">
|
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</el-form-item>
|
<div>
|
<el-form-item label="开启视图" label-width="100px" class="viewFlag">
|
<el-switch v-model="btmType.viewFlag" active-color="#13ce66" @change="viewChange"></el-switch>
|
</el-form-item>
|
<el-form-item label="视图语句" label-width="100px">
|
<el-input v-model="btmType.view" :prefix-icon="icons.view" :disabled="!btmType.viewFlag"></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="描述" label-width="100px" class="description">
|
<el-input v-model="btmType.description"
|
:prefix-icon="icons.desc"
|
class="descClass"
|
id="descId"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<avue-crud :option="option"
|
:data="btmType.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="submitBtmType">确定</el-button>
|
<el-button @click="cancleSubmitBtmType">取消</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="name" slot-scope="scope" >
|
<el-tag>{{scope}}</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 title="请选择版本规则"
|
:visible.sync="revisionRef.visible"
|
append-to-body
|
width="80%">
|
|
<avue-crud class="revisionRef"
|
:option="revisionRef.option"
|
:data="revisionRef.data"
|
:page.sync="revisionRef.page"
|
ref="revisionRef"
|
@row-click="revisionClick">
|
<template slot="radio"
|
slot-scope="{row}">
|
<el-radio v-model="revisionRef.selectRow"
|
:label="row.$index">
|
</el-radio>
|
</template>
|
</avue-crud>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="confirmRevision">确定</el-button>
|
<el-button @click="cancelRevision">取消</el-button>
|
</div>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
|
<script>
|
|
import { add,update } from '@/api/omd/btmType';
|
import { queryPage } from '@/api/omd/OmdAttribute';
|
import { getPage } from '@/api/omd/revisionRule';
|
export default {
|
name: 'BusinessAdd',
|
props: {
|
btmType:{
|
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: 'key',
|
align: 'left',
|
search: true,
|
width: 230
|
}, {
|
label: '中文名称',
|
prop: 'label',
|
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
|
},
|
revisionRef: {
|
visible: false,
|
page: {
|
currentPage:1,
|
pageSize: 10
|
},
|
selectRow:'',
|
searchKey: null,
|
option:{
|
height: 360,
|
addBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
menu: false,
|
border: true,
|
reserveSelection: true,
|
searchMenuSpan:8,
|
searchShowBtn: false,
|
highlightCurrentRow: true,
|
column:[{
|
label: '选择',
|
prop: 'radio',
|
width: 60,
|
hide: false
|
},
|
{
|
label:'英文名称',
|
prop: 'id',
|
search:true
|
},
|
{
|
label:"中文名称",
|
prop:"name",
|
search:true,
|
},
|
{
|
label:"跳跃字符",
|
prop: "skipCode"
|
},
|
{
|
label: "初始值",
|
prop:"startCode"
|
},
|
{
|
label: "步长",
|
prop: "serialStep"
|
},
|
{
|
label: "前缀",
|
prop:"prefixCode"
|
},
|
{
|
label: "后缀",
|
prop: "suffixCode"
|
},
|
{
|
label: "描述",
|
prop:"description",
|
type:"textarea"
|
}
|
]
|
},
|
},
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
// 关闭组件弹窗
|
closeSubmitDialog(){
|
this.showSubmitDialog = false;
|
this.btmType.attributes = [];
|
this.btmType = {};
|
this.attrRef.selectData = [];
|
this.attrRef.queryNotIn = null;
|
},
|
// 关闭属性池查询弹窗
|
closeAttrDialog(){
|
this.attrRef.visible = false;
|
},
|
// 添加
|
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(){
|
this.btmType.attributes = [];
|
this.attrRef.queryNotIn = "";
|
this.attrRef.selectData.forEach(item => {
|
this.btmType.attributes.push({
|
id: item.key,
|
name: item.label,
|
typeValue: item.typeValue,
|
typeKey: item.typeValue,
|
attrDataType : item.typeValue,
|
defaultValue: item.defaultValue,
|
description: item.description,
|
attributeLength: item.maxLength
|
});
|
this.attrRef.queryNotIn += (item.key + ",")
|
});
|
this.closeAttrDialog();
|
},
|
// 取消属性池勾选
|
cancleSelectAttr(){
|
this.attrRef.selectData = [];
|
this.closeAttrDialog();
|
},
|
// 添加业务类型
|
submitBtmType(){
|
console.log(this.btmType);
|
add(this.btmType,true).then(res => {
|
// 添加完成，回调父组件的刷新
|
this.$message.success('保存成功');
|
this.cancleSubmitBtmType();
|
this.$emit('refreshTable');
|
})
|
},
|
// 取消添加业务类型
|
cancleSubmitBtmType(){
|
this.btmType = {};
|
this.btmType.attributes = [];
|
this.showSubmitDialog = false;
|
},
|
// 刷新属性列表
|
refreshAttrTable(){
|
this.$nextTick( () => {
|
this.$refs.attrTable.refreshTable();
|
})
|
},
|
//
|
viewChange(){
|
|
},
|
// 列表编辑
|
cellEditClick(cell){
|
cell.$cellEdit = true;
|
},
|
// 列表编辑保存
|
cellEditSave(row){
|
this.btmType.attributes[row.$index].name = row.name
|
this.btmType.attributes[row.$index].defaultValue = row.defaultValue;
|
this.btmType.attributes[row.$index].description = row.description;
|
row.$cellEdit = false;
|
},
|
// 打开版本规则参照
|
async openRevision(){
|
await getPage().then(res => {
|
this.revisionRef.data = res.data.data.records;
|
});
|
this.revisionRef.visible = true;
|
},
|
// 关闭版本规则参照弹窗
|
closeRevisionDialog(){
|
this.revisionRef.visible = false;
|
},
|
// 版本规则参照列表检索
|
revisionRefSearch(){
|
|
},
|
// 版本规则选中事件
|
revisionChange(){},
|
// 确认选中版本规则
|
confirmRevision(){
|
this.btmType.revisionFlag = true;
|
this.btmType.revisionRuleId = this.revisionRef.selectData.id;
|
this.btmType.revisionRuleName = this.revisionRef.selectData.name;
|
this.btmType.inputRevisionFlag = false;
|
this.cancelRevision();
|
},
|
// 取消选中版本规则
|
cancelRevision(){
|
this.revisionRef.selectRow = '';
|
this.revisionRef.selectData = {};
|
this.closeRevisionDialog();
|
},
|
// 版本规则单选
|
revisionClick(row){
|
this.revisionRef.selectRow = row.$index;
|
this.revisionRef.selectData = {
|
id: row.id,
|
name: row.name,
|
};
|
},
|
clearRevision(){
|
this.$delete(this.btmType,'revisionFlag');
|
this.$delete(this.btmType,'revisionRuleId');
|
this.$delete(this.btmType,'revisionRuleName');
|
this.$delete(this.btmType,'inputRevisionFlag');
|
}
|
}
|
}
|
</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;
|
}
|
|
.btmTypeForm > .el-form-item > .el-form-item__content > .el-input > .el-input__inner {
|
width: 200px;
|
}
|
|
.viewFlag {
|
width: 305px;
|
}
|
|
.descClass > .el-input__inner {
|
width: 57vw
|
}
|
|
#descId {
|
width: 57vw;
|
}
|
</style>
|
