230 lines
7.7 KiB
Vue
230 lines
7.7 KiB
Vue
|
<template>
|
||
|
|
<div class="sys-codeGenConfig-container">
|
||
|
|
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="800px">
|
||
|
|
<template #header>
|
||
|
|
<div style="color: #fff">
|
||
|
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
|
||
|
|
</el-icon>
|
||
|
|
<span> 编辑规则 </span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
|
||
|
|
<el-row :gutter="35">
|
||
|
|
<el-form-item v-show="false">
|
||
|
|
<el-input v-model="state.ruleForm.id" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||
|
|
<el-form-item label="验证类型" prop="type">
|
||
|
|
<el-select v-model="state.ruleForm.type" placeholder="请选择类型" @change="handleTypeChange">
|
||
|
|
<el-option v-for="(item, index) in validTypeData" :key="index" :label="item.name"
|
||
|
|
:value="item.code" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"
|
||
|
|
v-if="state.ruleForm.type == 'pattern'">
|
||
|
|
<el-form-item label="提示信息" prop="message">
|
||
|
|
<el-input v-model="state.ruleForm.message" placeholder="请输入提示信息" maxlength="128" show-word-limit
|
||
|
|
clearable />
|
||
|
|
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"
|
||
|
|
v-if="state.ruleForm.type == 'length'">
|
||
|
|
<el-form-item label="最小值" prop="min">
|
||
|
|
<el-input-number v-model="state.ruleForm.min" :min="0" :max="100000" />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"
|
||
|
|
v-if="state.ruleForm.type == 'length'">
|
||
|
|
<el-form-item label="最大值" prop="max">
|
||
|
|
<el-input-number v-model="state.ruleForm.max" :min="0" :max="100000" />
|
||
|
|
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"
|
||
|
|
v-if="state.ruleForm.type == 'pattern'">
|
||
|
|
<el-form-item label="正则式" prop="pattern">
|
||
|
|
<el-input v-model="state.ruleForm.pattern" placeholder="请输入正则表达式">
|
||
|
|
<template #append>
|
||
|
|
<el-button @click="openPatternDialog">选择正则</el-button>
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"
|
||
|
|
v-if="state.ruleForm.type == 'pattern'">
|
||
|
|
<el-form-item label="数据类型" prop="dataType">
|
||
|
|
<el-radio-group v-model="state.ruleForm.dataType">
|
||
|
|
<el-radio v-for="(item, index) in dataTypeData" :key="index" :value="item.code" :label="item.name"></el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col> -->
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="cancel">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="submit">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<patternDialog ref="patternDialogRef" @submit-pattern="submitPatternOK" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tool-box {
|
||
|
|
padding-bottom: 20px;
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
align-items: center;
|
||
|
|
// background: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, onUnmounted, reactive, ref, toRaw, isReactive } from 'vue';
|
||
|
|
import patternDialog from '/@/views/system/codeGen/component/patternDialog.vue';
|
||
|
|
import { ElMessage, dialogEmits } from "element-plus";
|
||
|
|
import type { FormRules } from "element-plus";
|
||
|
|
|
||
|
|
const emit = defineEmits(["submitRule"]);
|
||
|
|
//自行添加其他规则
|
||
|
|
const rules = ref<FormRules>({
|
||
|
|
type: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请选择验证类型',
|
||
|
|
trigger: 'change',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
min: [
|
||
|
|
{
|
||
|
|
type: 'integer',
|
||
|
|
required: true,
|
||
|
|
pattern: /[^\d]/g,
|
||
|
|
message: '请输入正确的数字',
|
||
|
|
trigger: 'blur'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
max: [
|
||
|
|
{
|
||
|
|
type: 'integer',
|
||
|
|
required: true,
|
||
|
|
pattern: /[^\d]/g,
|
||
|
|
message: '请输入正确的数字',
|
||
|
|
trigger: 'blur'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
message: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请输入提示信息',
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
pattern: [
|
||
|
|
{ required: true, message: '请输入正则表达式', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
// dataType: [
|
||
|
|
// {
|
||
|
|
// required: true,
|
||
|
|
// message: '请选择数据类型',
|
||
|
|
// trigger: 'change',
|
||
|
|
// },
|
||
|
|
// ]
|
||
|
|
});
|
||
|
|
const ruleFormRef = ref();
|
||
|
|
const patternDialogRef = ref();
|
||
|
|
const validTypeData = ref([
|
||
|
|
{ code: 'required', name: '必填验证' },
|
||
|
|
{ code: 'remote', name: '远程验证' },
|
||
|
|
{ code: 'array', name: '数组验证' },
|
||
|
|
{ code: 'pattern', name: '正则模式' },
|
||
|
|
{ code: 'length', name: '长度限制' },
|
||
|
|
]);
|
||
|
|
// const dataTypeData = ref([
|
||
|
|
// { code: 'string', name: '字符串' },
|
||
|
|
// { code: 'integer', name: '数字' },
|
||
|
|
// ]);
|
||
|
|
|
||
|
|
const state = reactive({
|
||
|
|
isShowDialog: false,
|
||
|
|
loading: false,
|
||
|
|
ruleForm: {} as any,
|
||
|
|
id: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 打开弹窗
|
||
|
|
const openDialog = (id: number) => {
|
||
|
|
// const data = JSON.parse(JSON.stringify(row));
|
||
|
|
// state.ruleForm = data;
|
||
|
|
state.id = id;
|
||
|
|
state.isShowDialog = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
const closeDialog = () => {
|
||
|
|
// emit("reloadTable");
|
||
|
|
ruleFormRef.value.resetFields();
|
||
|
|
state.isShowDialog = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
//打开正则选择框
|
||
|
|
const openPatternDialog = () => {
|
||
|
|
|
||
|
|
patternDialogRef.value.openDialog();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 取消
|
||
|
|
const cancel = () => {
|
||
|
|
// state.isShowDialog = false;
|
||
|
|
closeDialog();
|
||
|
|
};
|
||
|
|
|
||
|
|
const submitPatternOK = (data: any) => {
|
||
|
|
// console.log('submitPatternOK', data);
|
||
|
|
state.ruleForm.pattern = data.pattern;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交
|
||
|
|
const submit = async () => {
|
||
|
|
ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
|
||
|
|
if (isValid) {
|
||
|
|
let values = toRaw(state.ruleForm);
|
||
|
|
values.key = toRaw(state.id);
|
||
|
|
emit("submitRule", Object.assign({}, values));
|
||
|
|
closeDialog();
|
||
|
|
} else {
|
||
|
|
ElMessage({
|
||
|
|
message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
|
||
|
|
type: "error",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
//类型发生改变
|
||
|
|
const handleTypeChange=()=>{
|
||
|
|
resetFields();
|
||
|
|
};
|
||
|
|
//重置表单值
|
||
|
|
const resetFields=()=>{
|
||
|
|
state.ruleForm.message="";
|
||
|
|
state.ruleForm.min=0;
|
||
|
|
state.ruleForm.max=10;
|
||
|
|
state.ruleForm.pattern="";
|
||
|
|
// state.ruleForm.dataType=null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 导出对象
|
||
|
|
defineExpose({ openDialog });
|
||
|
|
</script>
|