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

xingyu
1 parent fa79f422
Showing 23 changed files with 161 additions and 34 deletions
yudao-ui-admin-vue3/src/utils/tree.ts
yudao-ui-admin-vue3/src/views/infra/apiAccessLog/apiAccessLog.data.ts
yudao-ui-admin-vue3/src/views/infra/apiErrorLog/apiErrorLog.data.ts
yudao-ui-admin-vue3/src/views/infra/codegen/codegen.data.ts
yudao-ui-admin-vue3/src/views/infra/config/config.data.ts
yudao-ui-admin-vue3/src/views/infra/dataSourceConfig/dataSourceConfig.data.ts
yudao-ui-admin-vue3/src/views/infra/fileConfig/fileConfig.data.ts
yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts
yudao-ui-admin-vue3/src/views/pay/app/app.data.ts
yudao-ui-admin-vue3/src/views/pay/merchant/merchant.data.ts
yudao-ui-admin-vue3/src/views/pay/order/order.data.ts
yudao-ui-admin-vue3/src/views/pay/refund/refund.data.ts
yudao-ui-admin-vue3/src/views/system/dept/dept.data.ts
yudao-ui-admin-vue3/src/views/system/dept/index.vue
yudao-ui-admin-vue3/src/views/system/dict/dict.data.ts
yudao-ui-admin-vue3/src/views/system/menu/index.vue
yudao-ui-admin-vue3/src/views/system/notice/notice.data.ts
yudao-ui-admin-vue3/src/views/system/post/post.data.ts
yudao-ui-admin-vue3/src/views/system/sms/smsTemplate/sms.template.data.ts
yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -213,7 +213,7 @@ export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) =&gt; {
  * @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&lt;CrudSchema[]&gt;([
   },
   {
     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&lt;CrudSchema[]&gt;([
   },
   {
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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&lt;CrudSchema[]&gt;([
     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)]
+      }
     }
   },
   {
@@ -158,6 +158,22 @@ const crudSchemas = reactive&lt;CrudSchema[]&gt;([
     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',
     width: '270px',
@@ -84,6 +84,15 @@ const crudSchemas = reactive&lt;CrudSchema[]&gt;([
     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)]
+      }
     }
   },
   {
 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 &#39;@/utils/tree&#39;
 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 () =&gt; {
       </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 &#39;@/hooks/web/useCrudSchemas&#39;
 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 &#39;@/api/system/menu/types&#39;
 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&lt;MenuVO&gt;({
   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 &#39;@/hooks/web/useCrudSchemas&#39;
 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" }],
       }
     };
   },