<template>
|
<el-container>
|
<el-main>
|
<basic-container>
|
<avue-crud
|
ref="userCrud"
|
:data="tableData"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="handleRefresh"
|
@search-change="handleSearch"
|
@search-reset="handleReset"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
>
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="rowSaveHandlerClick">创建</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="allDelHandler">删除</el-button>
|
<el-button icon="el-icon-view" plain size="small" type="primary" @click="chekView">查看使用范围</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="scope">
|
<el-button icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
|
</el-button>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</el-main>
|
|
<el-aside width="30%">
|
<basic-container>
|
<div style="height: 85vh; overflow-y: auto">
|
<el-descriptions :column="1" border size="medium" title="属性项">
|
<el-descriptions-item>
|
<template slot="label">
|
名称
|
</template>
|
{{ lastItem.id }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
标签
|
</template>
|
{{ lastItem.name }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
描述
|
</template>
|
{{ lastItem.description }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
操作类型
|
</template>
|
{{ lastItem.attributeDataType }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- 值域 -->
|
<el-descriptions v-if="!isSpecialDataType" :column="1" :title="lastItem.attributeDataType" border
|
class="margin-top"
|
size="medium">
|
<el-descriptions-item>
|
<template slot="label">
|
允许为空
|
</template>
|
<el-tag :type="lastItem.nullableFlag ? 'success' : 'danger'">
|
{{ lastItem.nullableFlag ? '是' : '否' }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item v-if="accuracy">
|
<template slot="label">
|
精度
|
</template>
|
精度
|
</el-descriptions-item>
|
<el-descriptions-item v-if="length">
|
<template slot="label">
|
长度
|
</template>
|
{{ lastItem.attrLength }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
默认值
|
</template>
|
{{ lastItem.defaultValue }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- VTString -->
|
<el-descriptions v-if="lastItem.attributeDataType === 'VTString' || !lastItem.attributeDataType"
|
:column="1" border class="margin-top" size="medium" title="值域">
|
<el-descriptions-item>
|
<template slot="label">
|
当前类型
|
</template>
|
{{ lastItem.version ? '链接类型' : '业务类型' }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
当前类型值
|
</template>
|
{{ lastItem.version ? lastItem.linkTypeName : lastItem.btmTypeId }}
|
</el-descriptions-item>
|
<el-descriptions-item v-if="lastItem.version">
|
<template slot="label">
|
当前版本次
|
</template>
|
{{ lastItem.version }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
使用枚举
|
</template>
|
<el-tag :type="lastItem.enumId ? 'success' : 'danger'">
|
{{ lastItem.enumId ? '是' : '否' }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
枚举类型
|
</template>
|
{{ lastItem.enumId }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
取值范围
|
</template>
|
<div style="width: 330px; height: 80px;overflow: auto">
|
<el-tag v-for="item in rangeList" plain style="margin: 5px">{{ item }}</el-tag>
|
</div>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
<!-- VTInteger && VTInteger -->
|
<el-descriptions
|
v-if="lastItem.attributeDataType === 'VTInteger' || lastItem.attributeDataType === 'VTInteger'"
|
:column="1" border class="margin-top" size="medium" title="值域">
|
|
<el-descriptions-item>
|
<template slot="label">
|
使用枚举
|
</template>
|
<el-tag :type="lastItem.enumId ? 'success' : 'danger'">
|
{{ lastItem.enumId ? '是' : '否' }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
枚举类型
|
</template>
|
{{ lastItem.enumId }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
取值范围
|
</template>
|
<div style="width: 330px; height: 80px;overflow: auto">
|
<el-tag v-for="item in rangeList" plain style="margin: 5px">{{ item }}</el-tag>
|
</div>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
<!-- VTDouble -->
|
<el-descriptions v-if="lastItem.attributeDataType === 'VTDouble'"
|
:column="1" border class="margin-top" size="medium" title="值域">
|
|
<el-descriptions-item>
|
<template slot="label">
|
取值范围
|
</template>
|
<div style="width: 330px; height: 80px;overflow: auto">
|
<el-tag v-for="item in rangeList" plain style="margin: 5px">{{ item }}</el-tag>
|
</div>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
<!-- VTDate VTTime VTDateTime VTNote VTFilePath VTClob均不显示 VTBoolean不显示值域 只显示类型 -->
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<!-- 查看使用范围 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="checkViewLoading"
|
:visible.sync="checkViewVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="查看使用范围"
|
width="70%"
|
>
|
<avue-crud
|
ref="checkViewCrud"
|
:data="checkViewData"
|
:option="checkViewOption"
|
@search-change="checkHandleSearch"
|
@search-reset="checkHandleReset"
|
>
|
|
</avue-crud>
|
</el-dialog>
|
|
<!-- 新增对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="addLoading"
|
:visible.sync="addVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="创建"
|
width="65%"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
<el-row>
|
<div class="addDialog">
|
<div>
|
|
<h3>属性项</h3>
|
|
<el-col :span="12">
|
<el-form-item label="名称：" prop="id">
|
<el-input v-model="form.id"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标签：">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="属性类型：">
|
<el-select v-model="form.attributeDataType" placeholder="请选择属性类型" @change="attributeDataTypeChange">
|
<el-option v-for="item in typeSelectList" :label="item" :value="item"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="描述：">
|
<el-input v-model="form.description" :rows="2" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
|
</div>
|
<div v-if="!hideType" class="addDialogBottom">
|
<div class="left">
|
<h3>{{ form.attributeDataType }}</h3>
|
|
<el-form-item
|
v-if="form.attributeDataType !== 'VTInteger' && form.attributeDataType !== 'VTLong'
|
&& form.attributeDataType !== 'VTDouble' && form.attributeDataType !== 'VTBoolean'"
|
label="长度：">
|
<el-input v-model="form.attrLength"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="form.attributeDataType === 'VTDouble'" label="精度：">
|
<el-input v-model="form.precisionLength"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="form.attributeDataType === 'VTDouble'" label="长度：">
|
<el-input v-model="form.scaleLength"></el-input>
|
</el-form-item>
|
|
|
<el-form-item v-if="form.attributeDataType !== 'VTBoolean'" label="默认值：">
|
<el-input v-model="form.defaultValue"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="form.attributeDataType === 'VTBoolean'" label="默认值：">
|
<el-select>
|
<el-option label="false" value="false"></el-option>
|
<el-option label="true" value="true"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="允许为空：">
|
<el-switch v-model="form.nullableFlag"></el-switch>
|
</el-form-item>
|
|
</div>
|
<el-divider direction="vertical"></el-divider>
|
<!-- VTString -->
|
<div v-if="form.attributeDataType === 'VTString'" class="right">
|
<h3>值域</h3>
|
<el-form-item label="当前值域类型：">
|
<el-select v-model="form.attributeSelectType" placeholder="请选择属性类型" @change="attributeSelectTypeChange">
|
<el-option label="业务类型" value="business"></el-option>
|
<el-option label="链接类型" value="link"></el-option>
|
</el-select>
|
</el-form-item>
|
|
|
<el-form-item label="选择参照类型：">
|
<el-input v-model="form.attrLength"></el-input>
|
</el-form-item>
|
|
|
<el-form-item label="使用枚举：">
|
<el-switch v-model="form.enumSwitch" @change="switchEnumChange"></el-switch>
|
</el-form-item>
|
|
|
<el-form-item :label="form.enumSwitch ? '枚举选择：' : '添加枚举值：'">
|
<el-select v-if="form.enumSwitch" v-model="form.attributeDataTypePick" placeholder="请选择枚举类型"
|
@change="enumSelectChange">
|
<el-option v-for="(item,index) in attributeDataTypePickList" :key="index" :label="item.key"
|
:value="item.key"></el-option>
|
</el-select>
|
<el-input v-if="!form.enumSwitch" v-model="form.enumAddValue">
|
</el-input>
|
</el-form-item>
|
<el-form-item v-if="!form.enumSwitch" label="运算符：">
|
<div>
|
<el-button size="mini" @click="enumAddHandler"> =</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="当前枚举值：">
|
<textarea v-model="form.range"
|
style="width: 330px; height: 80px; border: 1px solid #DCDFE6; overflow: auto; text-align: left;resize: none;">
|
</textarea>
|
</el-form-item>
|
</div>
|
<!-- VTInteger VTLong -->
|
<div v-if="form.attributeDataType === 'VTInteger' || form.attributeDataType === 'VTLong' " class="right">
|
<h3>值域</h3>
|
|
<el-form-item label="使用枚举：">
|
<el-switch v-model="form.enumSwitch" @change="switchEnumChange"></el-switch>
|
</el-form-item>
|
|
|
<el-form-item :label="form.enumSwitch ? '枚举选择：' : '添加枚举值：'">
|
<el-select v-if="form.enumSwitch" v-model="form.attributeDataTypePick" placeholder="请选择枚举类型"
|
@change="enumSelectChange">
|
<el-option v-for="(item,index) in attributeDataTypePickList" :key="index" :label="item.key"
|
:value="item.key"></el-option>
|
</el-select>
|
<el-input v-if="!form.enumSwitch" v-model="form.enumAddValue">
|
</el-input>
|
</el-form-item>
|
<el-form-item v-if="!form.enumSwitch" label="运算符：">
|
<div>
|
<el-button size="mini"> ></el-button>
|
<el-button size="mini"> <</el-button>
|
<el-button size="mini"> >=</el-button>
|
<el-button size="mini"> <=</el-button>
|
<el-button size="mini"> =</el-button>
|
<el-button size="mini"> !=</el-button>
|
<el-button size="mini"> ( )</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="当前枚举值：">
|
<textarea v-model="form.range"
|
style="width: 330px; height: 80px; border: 1px solid #DCDFE6; overflow: auto; text-align: left;resize: none;">
|
</textarea>
|
</el-form-item>
|
</div>
|
<!-- VTDouble -->
|
<div v-if="form.attributeDataType === 'VTDouble'" class="right">
|
<h3>值域</h3>
|
|
|
<el-form-item label="添加枚举值：">
|
<el-input v-model="form.enumAddValue">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="运算符：">
|
<div>
|
<el-button size="mini"> ></el-button>
|
<el-button size="mini"> <</el-button>
|
<el-button size="mini"> >=</el-button>
|
<el-button size="mini"> <=</el-button>
|
<el-button size="mini"> =</el-button>
|
<el-button size="mini"> !=</el-button>
|
<el-button size="mini"> ( )</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="当前枚举值：">
|
<textarea v-model="form.range"
|
style="width: 330px; height: 80px; border: 1px solid #DCDFE6; overflow: auto; text-align: left;resize: none;">
|
</textarea>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
</el-row>
|
</el-form>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import {gridAttribute, getUsedAttributeList, getEnumMapByType} from "@/api/modeling/attributePool/api";
|
import basicOption from '@/util/basic-option';
|
import {column} from "./option"
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
tableData: [],
|
option: {
|
...basicOption,
|
searchMenuSpan: 8,
|
calcHeight: -60,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column
|
},
|
tableLoading: false,
|
page: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizes: [10, 30, 50, 100],
|
},
|
searchParams: {},
|
selectList: [],
|
checkViewData: [],
|
checkViewDataSearch: [],
|
checkViewVisible: false,
|
checkViewLoading: false,
|
checkViewOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
searchMenuSpan: 8,
|
refreshBtn: false,
|
selection: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'attributeName',
|
sortable: true,
|
},
|
{
|
label: '来源',
|
prop: 'source',
|
sortable: true,
|
search: true
|
},
|
{
|
label: '说明',
|
prop: 'desc',
|
}
|
]
|
},
|
addVisible: false,
|
addLoading: false,
|
form: {
|
id: "",
|
name: "",
|
attributeDataType: "VTString",
|
description: "",
|
nullableFlag: true,
|
attrLength: 50,
|
enumId: false,
|
enumSwitch: false,
|
attributeDataTypePick: "",
|
enumAddValue: '',
|
range: ''
|
},
|
defaultForm: {
|
id: "",
|
name: "",
|
attributeDataType: "VTString",
|
description: "",
|
nullableFlag: true,
|
attrLength: 50,
|
enumId: false,
|
enumSwitch: false,
|
attributeDataTypePick: "",
|
enumAddValue: '',
|
range: '',
|
attributeSelectType:'business'
|
},
|
rules: [],
|
typeSelectList: ['VTString', 'VTInteger', 'VTLong', 'VTDouble', 'VTBoolean', 'VTDate', 'VTTime', 'VTDateTime', 'VTNote', 'VTFilePath', 'VTClob'],
|
attributeDataTypePickList: [],
|
enumAddListChange: []
|
}
|
},
|
computed: {
|
lastItem() {
|
return this.selectList.length > 0 ? this.selectList[this.selectList.length - 1] : {};
|
},
|
isSpecialDataType() {
|
// 定义一个包含所有需要比较的类型的数组
|
const specialTypes = ['VTDate', 'VTTime', 'VTDateTime', 'VTNote', 'VTFilePath', 'VTClob'];
|
// 判断 lastItem.attributeDataType 是否在这个数组中
|
return specialTypes.includes(this.lastItem.attributeDataType);
|
},
|
rangeList() {
|
if (this.lastItem.range) {
|
return this.lastItem.range.split(';');
|
}
|
},
|
accuracy() {
|
return this.lastItem.attributeDataType === 'VTDouble';
|
},
|
length() {
|
return this.lastItem.attributeDataType === 'VTString' || this.lastItem.attributeDataType === 'VTDoubule';
|
},
|
// 等于其中以下值 不展示枚举
|
hideType() {
|
return this.form.attributeDataType === 'VTNote' ||
|
this.form.attributeDataType === 'VTDate' ||
|
this.form.attributeDataType === 'VTTime' ||
|
this.form.attributeDataType === 'VTClob' ||
|
this.form.attributeDataType === 'VTDateTime' ||
|
this.form.attributeDataType === 'VTFilePath';
|
}
|
},
|
methods: {
|
//表格查询请求
|
getTableList() {
|
this.tableLoading = true;
|
gridAttribute(this.page.currentPage, this.page.pageSize, this.searchParams).then(res => {
|
const data = res.data.data;
|
this.tableData = data;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 表格头部刷新
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 搜索
|
handleSearch() {
|
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
this.$refs.userCrud.toggleRowSelection(row);
|
console.log(row);
|
},
|
|
// 条数
|
sizeChange(val) {
|
this.page.pageSize = val;
|
},
|
|
// 页码
|
currentChange(val) {
|
this.page.currentPage = val;
|
},
|
|
// 创建打开对话框
|
rowSaveHandlerClick() {
|
this.addVisible = true;
|
this.form = this.defaultForm;
|
this.getEnumMapByTypeHandler('VTString');
|
},
|
|
allDelHandler() {
|
|
},
|
|
// 查看使用范围
|
chekView() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请至少选择一条数据');
|
return;
|
}
|
if (this.selectList.length > 1) {
|
this.$message.warning('只能选择一条数据进行查看');
|
return;
|
}
|
|
getUsedAttributeList({attributeName: this.selectList[0].id}).then(res => {
|
if (res.data.code === 200) {
|
this.checkViewVisible = true;
|
this.checkViewData = res.data.data;
|
this.checkViewDataSearch = res.data.data;
|
}
|
})
|
},
|
|
// 查看使用范围查询
|
checkHandleSearch(params, done) {
|
const {source} = params;
|
|
if (!params.source) {
|
this.checkViewData = this.checkViewDataSearch;
|
return done();
|
}
|
;
|
|
this.checkViewData = this.checkViewData.filter(item => {
|
return item.source && item.source.includes(source);
|
});
|
|
done();
|
|
},
|
|
// 查看使用范围重置
|
checkHandleReset() {
|
this.checkViewData = this.checkViewDataSearch;
|
},
|
|
|
editBtnClick() {
|
|
},
|
|
rowDeleteHandler() {
|
|
},
|
|
// 属性类型下拉框change
|
attributeDataTypeChange(val) {
|
this.getEnumMapByTypeHandler(val);
|
this.form.enumSwitch = false;
|
},
|
|
// 属性类型下拉框数据处理
|
getEnumMapByTypeHandler(val) {
|
const enumType = {
|
VTString: 'String',
|
VTInteger: 'Integer',
|
VTLong: 'Integer',
|
};
|
if (enumType[val]) {
|
const string = enumType[val];
|
getEnumMapByType({enumType: string}).then(res => {
|
const data = res.data.data;
|
this.attributeDataTypePickList = data.flatMap(obj =>
|
Object.entries(obj).map(([key, values]) => ({
|
key: key,
|
values: values
|
}))
|
);
|
})
|
}
|
},
|
|
// 使用枚举时 枚举选择下拉框change事件
|
enumSelectChange(val) {
|
const list = this.attributeDataTypePickList.find(item => item.key === val).values;
|
this.form.range = list.join('\n');
|
},
|
|
// 使用枚举switch滑块change事件
|
switchEnumChange(status) {
|
if (status) {
|
this.form.attributeDataTypePick = this.attributeDataTypePickList[0].key;
|
const list = this.attributeDataTypePickList[0].values;
|
this.form.range = list.join('\n');
|
} else {
|
this.form.range = "";
|
}
|
},
|
|
// 不使用枚举 手动添加枚举值
|
enumAddHandler() {
|
// 检查和转换 this.form.range 为数组，同时排除空值
|
let currentRangeArray = this.form.range ? this.form.range.split('\n').filter(item => item.trim() !== '') : [];
|
|
let newValue = this.form.enumAddValue.trim();
|
if (currentRangeArray.includes(newValue)) {
|
this.$message.error('该值域规则已经存在！')
|
return;
|
}
|
|
currentRangeArray.push(newValue);
|
this.enumAddListChange = currentRangeArray;
|
this.form.range = currentRangeArray.join('\n');
|
this.form.enumAddValue = "";
|
},
|
|
// 值域类型切换
|
attributeSelectTypeChange(){
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.margin-top {
|
margin-top: 25px;
|
}
|
|
.left {
|
width: 45%;
|
height: 100%;
|
margin-right: 60px;
|
}
|
|
.right {
|
height: 100%;
|
width: auto;
|
margin-left: 60px;
|
}
|
|
.addDialogBottom {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
}
|
|
.addDialogBottom > .el-divider--vertical {
|
width: 2px;
|
height: 78%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -10%);
|
}
|
</style>
|
