perf: 优化表单校验和查询参数
parent
fa79f4226e
commit
93a97cd526
|
@ -213,7 +213,7 @@ export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
|
||||||
* @param {*} parentId 父节点字段 默认 'parentId'
|
* @param {*} parentId 父节点字段 默认 'parentId'
|
||||||
* @param {*} children 孩子节点字段 默认 'children'
|
* @param {*} children 孩子节点字段 默认 'children'
|
||||||
*/
|
*/
|
||||||
export const handleTree = (data, id?: string, parentId?: string, children?: string) => {
|
export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => {
|
||||||
const config = {
|
const config = {
|
||||||
id: id || 'id',
|
id: id || 'id',
|
||||||
parentId: parentId || 'parentId',
|
parentId: parentId || 'parentId',
|
||||||
|
@ -222,7 +222,7 @@ export const handleTree = (data, id?: string, parentId?: string, children?: stri
|
||||||
|
|
||||||
const childrenListMap = {}
|
const childrenListMap = {}
|
||||||
const nodeIds = {}
|
const nodeIds = {}
|
||||||
const tree = []
|
const tree: any[] = []
|
||||||
|
|
||||||
for (const d of data) {
|
for (const d of data) {
|
||||||
const parentId = d[config.parentId]
|
const parentId = d[config.parentId]
|
||||||
|
|
|
@ -50,7 +50,16 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '请求时间',
|
label: '请求时间',
|
||||||
field: 'beginTime'
|
field: 'beginTime',
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '执行时长',
|
label: '执行时长',
|
||||||
|
|
|
@ -50,7 +50,16 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '异常发生时间',
|
label: '异常发生时间',
|
||||||
field: 'exceptionTime'
|
field: 'exceptionTime',
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '异常名',
|
label: '异常名',
|
||||||
|
|
|
@ -50,6 +50,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -91,6 +91,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -58,6 +58,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -76,6 +76,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -36,6 +36,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -8,9 +8,10 @@ const { t } = useI18n() // 国际化
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
name: [required],
|
name: [required],
|
||||||
code: [required],
|
status: [required],
|
||||||
sort: [required],
|
payNotifyUrl: [required],
|
||||||
status: [required]
|
refundNotifyUrl: [required],
|
||||||
|
merchantId: [required]
|
||||||
})
|
})
|
||||||
|
|
||||||
// CrudSchema
|
// CrudSchema
|
||||||
|
@ -53,6 +54,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -7,9 +7,9 @@ const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
|
no: [required],
|
||||||
name: [required],
|
name: [required],
|
||||||
code: [required],
|
shortName: [required],
|
||||||
sort: [required],
|
|
||||||
status: [required]
|
status: [required]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -77,6 +77,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -157,6 +157,22 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
label: '渠道订单号',
|
label: '渠道订单号',
|
||||||
field: 'channelOrderNo'
|
field: 'channelOrderNo'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: t('common.createTime'),
|
||||||
|
field: 'createTime',
|
||||||
|
form: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: t('table.action'),
|
label: t('table.action'),
|
||||||
field: 'action',
|
field: 'action',
|
||||||
|
|
|
@ -84,6 +84,15 @@ const crudSchemas = reactive<CrudSchema[]>([
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
form: {
|
form: {
|
||||||
show: false
|
show: false
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,5 +1,19 @@
|
||||||
import { required } from '@/utils/formRules'
|
import { required } from '@/utils/formRules'
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
|
// 表单校验
|
||||||
|
export const rules = reactive({
|
||||||
|
name: [required],
|
||||||
|
sort: [required],
|
||||||
|
email: [required],
|
||||||
|
phone: [
|
||||||
|
{
|
||||||
|
pattern:
|
||||||
|
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '请输入正确的手机号码'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
export const modelSchema = reactive<FormSchema[]>([
|
export const modelSchema = reactive<FormSchema[]>([
|
||||||
{
|
{
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { handleTree } from '@/utils/tree'
|
||||||
import { onMounted, ref, unref, watch } from 'vue'
|
import { onMounted, ref, unref, watch } from 'vue'
|
||||||
import * as DeptApi from '@/api/system/dept'
|
import * as DeptApi from '@/api/system/dept'
|
||||||
import { Form, FormExpose } from '@/components/Form'
|
import { Form, FormExpose } from '@/components/Form'
|
||||||
import { modelSchema } from './dept.data'
|
import { modelSchema, rules } from './dept.data'
|
||||||
import { DeptVO } from '@/api/system/dept/types'
|
import { DeptVO } from '@/api/system/dept/types'
|
||||||
import { useMessage } from '@/hooks/web/useMessage'
|
import { useMessage } from '@/hooks/web/useMessage'
|
||||||
import { getListSimpleUsersApi } from '@/api/system/user'
|
import { getListSimpleUsersApi } from '@/api/system/user'
|
||||||
|
@ -159,7 +159,7 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showForm">
|
<div v-if="showForm">
|
||||||
<!-- 操作工具栏 -->
|
<!-- 操作工具栏 -->
|
||||||
<Form :schema="modelSchema" ref="formRef">
|
<Form ref="formRef" :schema="modelSchema" :rules="rules">
|
||||||
<template #parentId>
|
<template #parentId>
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
node-key="id"
|
node-key="id"
|
||||||
|
|
|
@ -7,9 +7,9 @@ import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const dictDataRules = reactive({
|
export const dictDataRules = reactive({
|
||||||
dictType: [required],
|
|
||||||
label: [required],
|
label: [required],
|
||||||
value: [required]
|
value: [required],
|
||||||
|
sort: [required]
|
||||||
})
|
})
|
||||||
// crudSchemas
|
// crudSchemas
|
||||||
export const crudSchemas = reactive<CrudSchema[]>([
|
export const crudSchemas = reactive<CrudSchema[]>([
|
||||||
|
|
|
@ -25,11 +25,12 @@ import { MenuVO } from '@/api/system/menu/types'
|
||||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
|
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
import { useMessage } from '@/hooks/web/useMessage'
|
import { useMessage } from '@/hooks/web/useMessage'
|
||||||
|
import { required } from '@/utils/formRules.js'
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
// ========== 创建菜单树结构 ==========
|
// ========== 创建菜单树结构 ==========
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
const menuData = ref([]) // 树形结构
|
const menuData = ref<any[]>([]) // 树形结构
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
const res = await MenuApi.getMenuListApi(queryParams)
|
const res = await MenuApi.getMenuListApi(queryParams)
|
||||||
menuData.value = handleTree(res)
|
menuData.value = handleTree(res)
|
||||||
|
@ -44,7 +45,7 @@ const menuProps = {
|
||||||
const menuOptions = ref() // 树形结构
|
const menuOptions = ref() // 树形结构
|
||||||
const getTree = async () => {
|
const getTree = async () => {
|
||||||
const res = await MenuApi.listSimpleMenusApi()
|
const res = await MenuApi.listSimpleMenusApi()
|
||||||
const menu = { id: 0, name: '主类目', children: [] }
|
const menu = { id: 0, name: '主类目', children: [] as any[] }
|
||||||
menu.children = handleTree(res)
|
menu.children = handleTree(res)
|
||||||
console.info(menu)
|
console.info(menu)
|
||||||
menuOptions.value = menu
|
menuOptions.value = menu
|
||||||
|
@ -85,12 +86,12 @@ const menuForm = ref<MenuVO>({
|
||||||
createTime: ''
|
createTime: ''
|
||||||
})
|
})
|
||||||
// 表单校验
|
// 表单校验
|
||||||
const rules = {
|
const rules = reactive({
|
||||||
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
name: [required],
|
||||||
sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
|
sort: [required],
|
||||||
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
|
path: [required],
|
||||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
|
status: [required]
|
||||||
}
|
})
|
||||||
// 设置标题
|
// 设置标题
|
||||||
const setDialogTile = (type: string) => {
|
const setDialogTile = (type: string) => {
|
||||||
dialogTitle.value = t('action.' + type)
|
dialogTitle.value = t('action.' + type)
|
||||||
|
|
|
@ -8,8 +8,7 @@ const { t } = useI18n() // 国际化
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
title: [required],
|
title: [required],
|
||||||
type: [required],
|
type: [required]
|
||||||
status: [required]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// CrudSchema
|
// CrudSchema
|
||||||
|
|
|
@ -9,8 +9,7 @@ const { t } = useI18n() // 国际化
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
name: [required],
|
name: [required],
|
||||||
code: [required],
|
code: [required],
|
||||||
sort: [required],
|
sort: [required]
|
||||||
status: [required]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// CrudSchema
|
// CrudSchema
|
||||||
|
|
|
@ -8,13 +8,12 @@ const { t } = useI18n() // 国际化
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
type: [required],
|
type: [required],
|
||||||
|
status: [required],
|
||||||
|
code: [required],
|
||||||
name: [required],
|
name: [required],
|
||||||
content: [required],
|
content: [required],
|
||||||
apiTemplateId: [required],
|
apiTemplateId: [required],
|
||||||
channelId: [required],
|
channelId: [required]
|
||||||
code: [required],
|
|
||||||
sort: [required],
|
|
||||||
status: [required]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// CrudSchema
|
// CrudSchema
|
||||||
|
|
|
@ -63,7 +63,7 @@ const { getList, setSearchParams, delList, exportList } = methods
|
||||||
|
|
||||||
// ========== 创建部门树结构 ==========
|
// ========== 创建部门树结构 ==========
|
||||||
const filterText = ref('')
|
const filterText = ref('')
|
||||||
const deptOptions = ref([]) // 树形结构
|
const deptOptions = ref<any[]>([]) // 树形结构
|
||||||
const searchForm = ref<FormExpose>()
|
const searchForm = ref<FormExpose>()
|
||||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||||
const getTree = async () => {
|
const getTree = async () => {
|
||||||
|
|
|
@ -7,8 +7,18 @@ import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
// 表单校验
|
// 表单校验
|
||||||
export const rules = reactive({
|
export const rules = reactive({
|
||||||
|
username: [required],
|
||||||
nickname: [required],
|
nickname: [required],
|
||||||
status: [required]
|
email: [required],
|
||||||
|
status: [required],
|
||||||
|
mobile: [
|
||||||
|
{
|
||||||
|
pattern:
|
||||||
|
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '请输入正确的手机号码'
|
||||||
|
}
|
||||||
|
]
|
||||||
})
|
})
|
||||||
// crudSchemas
|
// crudSchemas
|
||||||
const crudSchemas = reactive<CrudSchema[]>([
|
const crudSchemas = reactive<CrudSchema[]>([
|
||||||
|
|
|
@ -167,7 +167,7 @@ export default {
|
||||||
],
|
],
|
||||||
phone: [
|
phone: [
|
||||||
{
|
{
|
||||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
|
||||||
message: "请输入正确的手机号码",
|
message: "请输入正确的手机号码",
|
||||||
trigger: "blur"
|
trigger: "blur"
|
||||||
}
|
}
|
||||||
|
|
|
@ -183,8 +183,6 @@ export default {
|
||||||
accountCount: [{ required: true, message: "账号额度不能为空", trigger: "blur" }],
|
accountCount: [{ required: true, message: "账号额度不能为空", trigger: "blur" }],
|
||||||
expireTime: [{ required: true, message: "过期时间不能为空", trigger: "blur" }],
|
expireTime: [{ required: true, message: "过期时间不能为空", trigger: "blur" }],
|
||||||
domain: [{ required: true, message: "绑定域名不能为空", trigger: "blur" }],
|
domain: [{ required: true, message: "绑定域名不能为空", trigger: "blur" }],
|
||||||
username: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
|
|
||||||
password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }],
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue