perf: 优化表单校验和查询参数

pull/2/head
xingyu 2022-08-02 10:19:02 +08:00
parent fa79f4226e
commit 93a97cd526
23 changed files with 161 additions and 34 deletions

View File

@ -213,7 +213,7 @@ export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
* @param {*} parentId 'parentId'
* @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 = {
id: id || 'id',
parentId: parentId || 'parentId',
@ -222,7 +222,7 @@ export const handleTree = (data, id?: string, parentId?: string, children?: stri
const childrenListMap = {}
const nodeIds = {}
const tree = []
const tree: any[] = []
for (const d of data) {
const parentId = d[config.parentId]

View File

@ -50,7 +50,16 @@ const crudSchemas = reactive<CrudSchema[]>([
},
{
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: '执行时长',

View File

@ -50,7 +50,16 @@ const crudSchemas = reactive<CrudSchema[]>([
},
{
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: '异常名',

View File

@ -50,6 +50,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -91,6 +91,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -58,6 +58,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -76,6 +76,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -36,6 +36,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -8,9 +8,10 @@ const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
code: [required],
sort: [required],
status: [required]
status: [required],
payNotifyUrl: [required],
refundNotifyUrl: [required],
merchantId: [required]
})
// CrudSchema
@ -53,6 +54,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -7,9 +7,9 @@ const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
no: [required],
name: [required],
code: [required],
sort: [required],
shortName: [required],
status: [required]
})
@ -77,6 +77,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -157,6 +157,22 @@ const crudSchemas = reactive<CrudSchema[]>([
label: '渠道订单号',
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'),
field: 'action',

View File

@ -84,6 +84,15 @@ const crudSchemas = reactive<CrudSchema[]>([
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)]
}
}
},
{

View File

@ -1,5 +1,19 @@
import { required } from '@/utils/formRules'
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[]>([
{

View File

@ -5,7 +5,7 @@ import { handleTree } from '@/utils/tree'
import { onMounted, ref, unref, watch } from 'vue'
import * as DeptApi from '@/api/system/dept'
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 { useMessage } from '@/hooks/web/useMessage'
import { getListSimpleUsersApi } from '@/api/system/user'
@ -159,7 +159,7 @@ onMounted(async () => {
</div>
<div v-if="showForm">
<!-- 操作工具栏 -->
<Form :schema="modelSchema" ref="formRef">
<Form ref="formRef" :schema="modelSchema" :rules="rules">
<template #parentId>
<el-tree-select
node-key="id"

View File

@ -7,9 +7,9 @@ import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const { t } = useI18n()
// 表单校验
export const dictDataRules = reactive({
dictType: [required],
label: [required],
value: [required]
value: [required],
sort: [required]
})
// crudSchemas
export const crudSchemas = reactive<CrudSchema[]>([

View File

@ -25,11 +25,12 @@ import { MenuVO } from '@/api/system/menu/types'
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useMessage } from '@/hooks/web/useMessage'
import { required } from '@/utils/formRules.js'
const message = useMessage()
const { t } = useI18n() //
// ========== ==========
const loading = ref(true)
const menuData = ref([]) //
const menuData = ref<any[]>([]) //
const getList = async () => {
const res = await MenuApi.getMenuListApi(queryParams)
menuData.value = handleTree(res)
@ -44,7 +45,7 @@ const menuProps = {
const menuOptions = ref() //
const getTree = async () => {
const res = await MenuApi.listSimpleMenusApi()
const menu = { id: 0, name: '主类目', children: [] }
const menu = { id: 0, name: '主类目', children: [] as any[] }
menu.children = handleTree(res)
console.info(menu)
menuOptions.value = menu
@ -85,12 +86,12 @@ const menuForm = ref<MenuVO>({
createTime: ''
})
//
const rules = {
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
}
const rules = reactive({
name: [required],
sort: [required],
path: [required],
status: [required]
})
//
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)

View File

@ -8,8 +8,7 @@ const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
title: [required],
type: [required],
status: [required]
type: [required]
})
// CrudSchema

View File

@ -9,8 +9,7 @@ const { t } = useI18n() // 国际化
export const rules = reactive({
name: [required],
code: [required],
sort: [required],
status: [required]
sort: [required]
})
// CrudSchema

View File

@ -8,13 +8,12 @@ const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
type: [required],
status: [required],
code: [required],
name: [required],
content: [required],
apiTemplateId: [required],
channelId: [required],
code: [required],
sort: [required],
status: [required]
channelId: [required]
})
// CrudSchema

View File

@ -63,7 +63,7 @@ const { getList, setSearchParams, delList, exportList } = methods
// ========== ==========
const filterText = ref('')
const deptOptions = ref([]) //
const deptOptions = ref<any[]>([]) //
const searchForm = ref<FormExpose>()
const treeRef = ref<InstanceType<typeof ElTree>>()
const getTree = async () => {

View File

@ -7,8 +7,18 @@ import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const { t } = useI18n()
// 表单校验
export const rules = reactive({
username: [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
const crudSchemas = reactive<CrudSchema[]>([

View File

@ -167,7 +167,7 @@ export default {
],
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: "请输入正确的手机号码",
trigger: "blur"
}

View File

@ -183,8 +183,6 @@ export default {
accountCount: [{ required: true, message: "账号额度不能为空", trigger: "blur" }],
expireTime: [{ required: true, message: "过期时间不能为空", trigger: "blur" }],
domain: [{ required: true, message: "绑定域名不能为空", trigger: "blur" }],
username: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }],
}
};
},