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 {*} 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]

View File

@ -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: '执行时长',

View File

@ -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: '异常名',

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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',

View File

@ -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)]
}
} }
}, },
{ {

View File

@ -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[]>([
{ {

View File

@ -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"

View File

@ -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[]>([

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 () => {

View File

@ -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[]>([

View File

@ -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"
} }

View File

@ -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" }],
} }
}; };
}, },