mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 10:18:42 +08:00 
			
		
		
		
	perf: 优化表单校验和查询参数
This commit is contained in:
		| @@ -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[]>([ | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 xingyu
					xingyu