<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>
|
</template>
|
|
</avue-crud>
|
<el-dialog
|
v-dialogDrag
|
v-loading="dialogLoading"
|
:visible.sync="dialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="新增"
|
width="70%"
|
>
|
<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.type" 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.num" :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>
|
</basic-container>
|
</template>
|
|
<script>
|
import basicOption from '@/util/basic-option'
|
import {getEnumTypeList} from "@/api/modeling/enumType/api";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
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: '',
|
type: 'String',
|
num: 50
|
},
|
dialogLoading: false,
|
dialogVisible: false,
|
tableData: [],
|
option: {
|
...basicOption,
|
calcHeight: -60,
|
searchMenuSpan: 8,
|
addBtn: false,
|
editBtn: false,
|
column: [
|
{
|
label: '枚举名称',
|
prop: 'id',
|
sortable: true,
|
},
|
{
|
label: '标签',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '返回类型',
|
prop: 'enumValueDataTypeText',
|
sortable: true,
|
}
|
]
|
},
|
tableLoading: false,
|
}
|
},
|
methods: {
|
//表格查询请求
|
getTableList() {
|
this.tableLoading = true;
|
getEnumTypeList().then(res => {
|
const data = res.data.data;
|
this.tableData = data;
|
this.tableLoading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 表格头部刷新
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 搜索
|
handleSearch() {
|
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
|
},
|
|
// 选择框
|
selectChange() {
|
|
},
|
|
// 点击行
|
rowClickHandler() {
|
},
|
|
// 新增
|
rowSaveHandlerClick() {
|
this.dialogVisible = true;
|
this.dialogData = [];
|
},
|
|
// 修改
|
rowUpdateHandler() {
|
|
},
|
|
// 枚举项新增
|
rowSaveDialogHandler(row, done, loading) {
|
const status = this.dialogData.some(item => item.name === row.name);
|
if (status) {
|
this.$message.error('枚举项名称不能重复添加！')
|
loading();
|
} else {
|
|
if (this.form.type === "Integer") {
|
if (!/^\-?\d+$/.test(row.value)) {
|
// 如果原始字符串包含非数字字符，则视为无效
|
this.$message.error('枚举值必须是Integer类型');
|
return loading();
|
}
|
|
let numValue = parseInt(row.value);
|
if (isNaN(numValue) || !Number.isInteger(numValue)) {
|
// 如果 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) {
|
this.dialogData.splice(index, 1, row);
|
done();
|
},
|
|
// 枚举项删除
|
rowDeleteDialogHandler(row, index) {
|
this.dialogData.splice(index, 1);
|
},
|
|
// 新增保存
|
rowSaveHandler() {
|
const lengthStatus = this.dialogData.some(item => item.value > this.form.num)
|
if (lengthStatus) {
|
this.$message.error('请检查枚举值是否超过最大长度！')
|
return;
|
}
|
|
if(this.form.type === "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;
|
}
|
}
|
},
|
|
// 只能输入英文正则校验
|
validateEnglishOnly(rule, value, callback) {
|
if (!value) {
|
return callback(new Error('请输入枚举项名'));
|
}
|
if (!/^[A-Za-z]+$/.test(value)) {
|
return callback(new Error('只能输入英文字母'));
|
}
|
callback(); // 验证通过
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
