<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"
|
:rules="rules" @resetFields="resetForm" status-icon="true">
|
<el-form-item label="英文名称" label-width="100px" required="true" prop="id">
|
<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" prop="domain" class="domainSelect">
|
<el-select v-model="btmType.bizDomain" :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" class="viewInput">
|
<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">
|
<template slot-scope="scope" slot="menuLeft">
|
<el-button type="danger"
|
icon="el-icon-plus"
|
size="small"
|
@click="rowAdd()">属性选择
|
</el-button>
|
</template>
|
<template slot="attrDataTypeText" slot-scope="{row}">
|
<el-tag>{{ row.attrDataTypeText }}</el-tag>
|
</template>
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button icon="el-icon-edit" size="small" type="text" v-if="!row.$cellEdit" @click="cellEditClick(row)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" v-if="!row.$cellEdit"
|
@click="removeFormAttrTable(row,index)">移除
|
</el-button>
|
<el-button icon="el-icon-check" size="small" type="text" v-if="row.$cellEdit" @click="cellEditSave(row,index)">
|
保存
|
</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"
|
v-loading="attrRef.loading">
|
<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 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
|
}
|
},
|
watch: {
|
btmType: {
|
handler(newval, oldval) {
|
console.log('监听', newval, oldval)
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
form: {},
|
showSubmitDialog: false,
|
option: {
|
height: "330px",
|
selection: false,
|
headerAlign: 'center',
|
border: true,
|
index: true,
|
rowKey: 'id',
|
tabs: true,
|
menu: true,
|
editBtn: false,
|
delBtn: false,
|
columnBtn: false,
|
menuWidth: 150,
|
addBtn: false,
|
highlightCurrentRow: true,
|
column: [
|
{
|
label: '英文名称',
|
prop: 'id',
|
align: 'center'
|
}, {
|
label: '中文名称',
|
prop: 'name',
|
align: 'center',
|
cell: true
|
},{
|
label: "类型",
|
prop: "attrDataTypeText",
|
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,
|
},
|
loading: false,
|
key: null,
|
option: {
|
height: 360,
|
addBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
selection: true,
|
menu: false,
|
border: true,
|
reserveSelection: true,
|
searchMenuSpan: 8,
|
highlightCurrentRow: true,
|
rowKey: 'id',
|
column: [
|
{
|
label: '英文名称',
|
prop: 'id',
|
align: 'left',
|
search: true,
|
width: 230
|
}, {
|
label: '中文名称',
|
prop: 'name',
|
align: 'center',
|
},
|
{
|
label: "类型",
|
prop: "typeValue",
|
align: 'center',
|
slot: true,
|
},
|
{
|
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: ''
|
},
|
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"
|
}
|
]
|
},
|
},
|
rules: {
|
id: [
|
{required: true, message: '请输入业务类型编号', trigger: 'blur'},
|
{pattern: /^[A-Za-z]+$/, message: '业务类型编号只能为英文', trigger: 'blur'},
|
{min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur'}
|
],
|
name: [
|
{required: true, message: '请输入业务类型中文名称', trigger: 'blur'}
|
],
|
domain: [
|
{required: true, message: '请选择所属领域', trigger: 'blur'}
|
]
|
},
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
// 关闭组件弹窗
|
closeSubmitDialog() {
|
this.showSubmitDialog = false;
|
this.btmType.attributes = [];
|
this.btmType = {};
|
this.attrRef.selectData = [];
|
this.attrRef.queryNotIn = null;
|
this.resetForm();
|
},
|
// 关闭属性池查询弹窗
|
closeAttrDialog() {
|
this.attrRef.visible = false;
|
},
|
// 属性选择添加
|
async rowAdd() {
|
await this.attrRefOnLoad();
|
this.attrRef.visible = true;
|
},
|
// 属性池加载
|
attrRefOnLoad() {
|
if (this.attrRef.queryNotIn != '' && this.btmType.attributes !== undefined && this.btmType.attributes.length > 0) {
|
this.attrRef.queryNotIn = '';
|
this.btmType.attributes.forEach(item => {
|
this.attrRef.queryNotIn += (item.id + ",")
|
})
|
}
|
this.attrRef.loading = true;
|
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;
|
});
|
setTimeout(() => {
|
this.attrRef.loading = false;
|
}, 600)
|
this.$nextTick(() => {
|
this.$refs.attrRef.refreshTable();
|
});
|
},
|
// 属性池检索
|
attrRefSearch(form, done) {
|
this.attrRef.key = form.id;
|
this.attrRefOnLoad();
|
done();
|
this.attrRef.key = null;
|
},
|
// 从属性池中移除
|
removeFormAttrTable(row, index) {
|
this.btmType.attributes.splice(index, 1);
|
this.attrRef.queryNotIn = "";
|
this.btmType.attributes.forEach(item => {
|
this.attrRef.queryNotIn += (item.id + ",")
|
})
|
},
|
// 属性池勾选事件
|
selectionChange(list) {
|
this.attrRef.selectData = list;
|
},
|
// 确认属性池勾选
|
confirmSelectAttr() {
|
if (!this.btmType.attributes) {
|
this.btmType.attributes = [];
|
}
|
console.log(this.attrRef.selectData);
|
this.attrRef.selectData.forEach(item => {
|
this.btmType.attributes.push({
|
id: item.id,
|
name: item.name,
|
attrDataType: item.typeKey,
|
attrDataTypeText: item.typeValue,
|
defaultValue: item.defaultValue,
|
description: item.description,
|
attributeLength: item.maxLength,
|
referBtmTypeId: item.referTypeCode,
|
referBtmTypeName: item.referToName,
|
enumId: item.dictCode,
|
});
|
this.attrRef.queryNotIn += (item.id + ",")
|
});
|
this.attrRef.data = [];
|
this.closeAttrDialog();
|
},
|
// 取消属性池勾选
|
cancleSelectAttr() {
|
this.attrRef.selectData = [];
|
this.closeAttrDialog();
|
},
|
// 添加业务类型
|
submitBtmType() {
|
console.log(this.btmType);
|
if (!this.btmType.attributes){
|
this.$message.warning("还没有为业务类型选择属性");
|
return;
|
}else{
|
let nullFlag = false;
|
this.btmType.attributes.forEach(item => {
|
if (!item.name){
|
this.$message.warning("第" + (item.$index+1) + "行的中文名称不能为空");
|
nullFlag = true;
|
return;
|
}
|
})
|
if (nullFlag){
|
return;
|
}
|
|
}
|
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) {
|
console.log(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');
|
},
|
resetForm() {
|
this.btmType = {};
|
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;
|
}
|
|
.btmTypeForm > .el-form-item > .el-form-item__content > .el-input > .el-input__inner {
|
width: 200px;
|
}
|
|
.domainSelect > .el-form-item__content > .el-select > .el-input > .el-input__inner {
|
width: 200px;
|
}
|
|
.viewFlag {
|
width: 305px;
|
}
|
|
.viewInput > .el-form-item__content > .el-input > .el-input__inner {
|
width: 200px;
|
}
|
|
.descClass > .el-input__inner {
|
width: 57vw
|
}
|
|
#descId {
|
width: 57vw;
|
}
|
</style>
|
