<template>
|
<basic-container>
|
<avue-crud
|
ref="userCrud"
|
:data="tableData"
|
:option="option"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="handleRefresh"
|
@search-change="handleSearch"
|
@search-reset="handleReset"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler"
|
>
|
|
<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>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadTemplateHandler">下载导入模板
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadHandler">导出</el-button>
|
<el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadUser">导入</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>
|
<!-- 创建编辑自定义对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="dialogLoading"
|
:title="dialogType === 'add' ? ' 创建' : '编辑'"
|
:visible.sync="dialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="70%"
|
@close="dialogClose"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-row>
|
<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.enumValueDataType" placeholder="请选择类型">
|
<el-option label="String" value="String"></el-option>
|
<el-option label="Integer" value="Integer"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="长度：">
|
<el-input-number v-model="form.length" :max="999" :min="1" label="描述文字"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<avue-crud
|
ref="dialogCrud"
|
:data="dialogData"
|
:option="dialogOption"
|
@row-save="rowSaveDialogHandler"
|
@row-update="rowUpdateDialogHandler"
|
@row-del="rowDeleteDialogHandler"
|
>
|
</avue-crud>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="rowSaveHandler">确 定</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 查看使用范围 -->
|
<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>
|
|
<!--导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
|
@updata="getTableList"></upload-file>
|
</basic-container>
|
</template>
|
|
<script>
|
import basicOption from '@/util/basic-option'
|
import {
|
getEnumTypeList,
|
addEnumType,
|
updateEnumType,
|
deleteEnumTypes,
|
getUsedEnumList,
|
download,
|
downloadEnumTemplate
|
} from "@/api/modeling/enumType/api";
|
import func from "@/util/func";
|
import {deleteUser} from "@/api/system/user/api";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
tipList: [
|
"导入模板中标明红色字体的为必输项",
|
"*注意*:第二行开始的数据为示例数据，导入前请将其删除，当导入的枚举下具备多个枚举项时，应按照示例enum2的写法",
|
"枚举项名称(当前枚举下有枚举项时必填)",
|
"枚举值(当前枚举下有枚举项时必填)",
|
"导入一个枚举下的多个枚举项时，请将枚举名、标签、返回类型、等信息填写一致，再填写不同的枚举项"
|
],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/webEnumController/importEnumTypes',
|
checkViewOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
searchMenuSpan: 8,
|
refreshBtn: false,
|
selection: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'enumName',
|
sortable: true,
|
},
|
{
|
label: '来源',
|
prop: 'source',
|
sortable: true,
|
search: true
|
},
|
{
|
label: '说明',
|
prop: 'desc',
|
}
|
]
|
},
|
checkViewData: [],
|
checkViewDataSearch: [],
|
checkViewVisible: false,
|
checkViewLoading: false,
|
editRow: {},
|
dialogType: '',
|
dialogData: [],
|
dialogOption: {
|
...basicOption,
|
refreshBtn: false,
|
selection: false,
|
column: [
|
{
|
label: '枚举项名',
|
prop: 'name',
|
sortable: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入枚举项名',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '枚举值',
|
prop: 'value',
|
sortable: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入枚举值',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
sortable: true,
|
},
|
]
|
},
|
rules: {
|
id: [
|
{required: true, message: '请输入枚举项名', trigger: 'blur'},
|
{validator: this.validateEnglishOnly, trigger: 'blur'}
|
],
|
},
|
form: {
|
id: '',
|
name: '',
|
enumValueDataType: 'String',
|
length: 50
|
},
|
dialogLoading: false,
|
dialogVisible: false,
|
tableData: [],
|
option: {
|
...basicOption,
|
calcHeight: -60,
|
searchMenuSpan: 8,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column: [
|
{
|
label: '枚举名称',
|
prop: 'id',
|
sortable: true,
|
search: true
|
},
|
{
|
label: '标签',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '返回类型',
|
prop: 'enumValueDataTypeText',
|
sortable: true,
|
}
|
]
|
},
|
tableLoading: false,
|
selectList: [],
|
searchParams: {}
|
}
|
},
|
methods: {
|
//表格查询请求
|
getTableList() {
|
this.tableLoading = true;
|
getEnumTypeList(this.searchParams).then(res => {
|
const data = res.data.data;
|
this.tableData = data;
|
this.tableLoading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 表格头部刷新
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 搜索
|
handleSearch(params, done) {
|
this.searchParams = {
|
enumName: params.id
|
};
|
this.getTableList()
|
done();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.searchParams = {};
|
this.getTableList();
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
this.$refs.userCrud.toggleRowSelection(row);
|
},
|
|
// 关闭对话框
|
dialogClose() {
|
this.dialogData = [];
|
this.form = {
|
id: '',
|
name: '',
|
enumValueDataType: 'String',
|
length: 50
|
}
|
},
|
|
// 创建按钮点击
|
rowSaveHandlerClick() {
|
this.dialogType = 'add';
|
this.dialogVisible = true;
|
this.dialogData = [];
|
this.form = {
|
id: '',
|
name: '',
|
enumValueDataType: 'String',
|
length: 50
|
}
|
},
|
|
// 编辑按钮点击
|
editBtnClick(row) {
|
this.dialogType = 'edit';
|
const {id, name, length, enumValueDataType} = row;
|
this.form = {id, name, length, enumValueDataType};
|
this.dialogData = row.items;
|
this.dialogVisible = true;
|
this.editRow = row;
|
},
|
|
// 删除按钮点击
|
rowDeleteHandler(row) {
|
let params = {
|
oid: row.oid,
|
name: row.id,
|
ts: row.ts
|
}
|
let data = [params];
|
this.$confirm('您确定要删除当前的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteEnumTypes(data).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 多选删除
|
allDelHandler() {
|
let data = this.selectList.map(item => {
|
return {
|
oid: item.oid,
|
name: item.id,
|
ts: item.ts
|
}
|
})
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteEnumTypes(data).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
|
|
},
|
|
// 对话框枚举保存
|
rowSaveHandler() {
|
const lengthStatus = this.dialogData.some(item => item.value.length > this.form.length)
|
if (lengthStatus) {
|
this.$message.error('请检查枚举值是否超过最大长度！')
|
return;
|
}
|
|
if (this.form.enumValueDataType === "Integer") {
|
// 判断是否包含非数字字符
|
const integerStatus = this.dialogData.some(item => {
|
if (!/^\-?\d+$/.test(item.value)) {
|
return true;
|
}
|
})
|
|
// 判断是否是integer格式
|
const integerNumStatus = this.dialogData.some(item => {
|
let numValue = parseInt(item.value);
|
if (isNaN(numValue) || !Number.isInteger(numValue)) {
|
return true;
|
}
|
})
|
|
if (integerStatus || integerNumStatus) {
|
this.$message.error('枚举值必须是Integer类型');
|
return;
|
}
|
}
|
|
if (this.dialogType === 'add') {
|
let params = {
|
...this.form,
|
items: this.dialogData
|
}
|
addEnumType(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.dialogVisible = false;
|
this.getTableList();
|
}
|
})
|
} else if (this.dialogType === 'edit') {
|
let params = {
|
...this.form,
|
items: this.dialogData,
|
oid: this.editRow.oid,
|
ts: this.editRow.ts
|
}
|
updateEnumType(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.dialogVisible = false;
|
this.getTableList();
|
}
|
})
|
}
|
},
|
|
// 枚举项新增
|
rowSaveDialogHandler(row, done, loading) {
|
const status = this.dialogData.some(item => item.name === row.name);
|
if (status) {
|
this.$message.error('枚举项名称不能重复添加！')
|
loading();
|
} else {
|
if (this.form.enumValueDataType === "Integer") {
|
let numValue = parseInt(row.value);
|
// 判断原始字符串是否包含非数字字符
|
if ((isNaN(numValue) || !Number.isInteger(numValue)) || !/^\-?\d+$/.test(row.value)) {
|
// 判断 numValue 是否是 NaN 或者不是Integer类型
|
this.$message.error('枚举值必须是Integer类型');
|
return loading();
|
}
|
}
|
if (row.value.length > this.form.num) {
|
this.$message.error('枚举值超过最大长度！')
|
return loading();
|
}
|
|
this.dialogData.push(row);
|
done();
|
}
|
},
|
|
// 枚举项修改
|
rowUpdateDialogHandler(row, index, done, loading) {
|
if (this.form.enumValueDataType === "Integer") {
|
let numValue = parseInt(row.value);
|
// 判断原始字符串是否包含非数字字符
|
if ((isNaN(numValue) || !Number.isInteger(numValue)) || !/^\-?\d+$/.test(row.value)) {
|
// 判断 numValue 是否是 NaN 或者不是Integer类型
|
this.$message.error('枚举值必须是Integer类型');
|
return loading();
|
}
|
}
|
if (row.value.length > this.form.length) {
|
this.$message.error('枚举值超过最大长度！')
|
return loading();
|
}
|
|
this.dialogData.splice(index, 1, row);
|
done();
|
},
|
|
// 枚举项删除
|
rowDeleteDialogHandler(row, index) {
|
this.dialogData.splice(index, 1);
|
},
|
|
|
// 只能输入英文正则校验
|
validateEnglishOnly(rule, value, callback) {
|
if (!value) {
|
return callback(new Error('请输入枚举项名'));
|
}
|
if (!/^[A-Za-z]+$/.test(value)) {
|
return callback(new Error('只能输入英文字母'));
|
}
|
callback(); // 验证通过
|
},
|
|
// 查看使用范围
|
chekView() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请至少选择一条数据');
|
return;
|
}
|
if (this.selectList.length > 1) {
|
this.$message.warning('只能选择一条数据进行查看');
|
return;
|
}
|
|
getUsedEnumList({enumName: 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;
|
},
|
|
// 导出
|
downloadHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请至少选择一条数据进行导出');
|
return;
|
}
|
|
let enumNames = this.selectList.map(item => item.id).join(',');
|
download({enumNames: enumNames}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 下载导入模板
|
downloadTemplateHandler() {
|
downloadEnumTemplate().then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('下载成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
uploadUser() {
|
this.$refs.upload.visible = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
