perf: 优化表单校验和查询参数
parent
fa79f4226e
commit
93a97cd526
|
@ -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]
|
||||
|
|
|
@ -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: '执行时长',
|
||||
|
|
|
@ -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: '异常名',
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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)]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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[]>([
|
||||
{
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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[]>([
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -8,8 +8,7 @@ const { t } = useI18n() // 国际化
|
|||
// 表单校验
|
||||
export const rules = reactive({
|
||||
title: [required],
|
||||
type: [required],
|
||||
status: [required]
|
||||
type: [required]
|
||||
})
|
||||
|
||||
// CrudSchema
|
||||
|
|
|
@ -9,8 +9,7 @@ const { t } = useI18n() // 国际化
|
|||
export const rules = reactive({
|
||||
name: [required],
|
||||
code: [required],
|
||||
sort: [required],
|
||||
status: [required]
|
||||
sort: [required]
|
||||
})
|
||||
|
||||
// CrudSchema
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -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[]>([
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue