perf: 提取tree props

xingyu4j
1 parent 61f647b3
Showing 7 changed files with 36 additions and 51 deletions
yudao-ui-admin-vue3/src/utils/tree.ts
yudao-ui-admin-vue3/src/views/infra/codegen/components/GenInfoForm.vue
yudao-ui-admin-vue3/src/views/system/dept/index.vue
yudao-ui-admin-vue3/src/views/system/menu/index.vue
yudao-ui-admin-vue3/src/views/system/role/index.vue
yudao-ui-admin-vue3/src/views/system/tenantPackage/index.vue
yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -8,6 +8,11 @@ const DEFAULT_CONFIG: TreeHelperConfig = {
   children: 'children',
   pid: 'pid'
 }
+export const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id'
+}
  
 const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config)
  
@@ -214,6 +219,10 @@ export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) =&gt; {
  * @param {*} children 孩子节点字段 默认 'children'
  */
 export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => {
+  if (!Array.isArray(data)) {
+    console.warn('data must be an array')
+    return []
+  }
   const config = {
     id: id || 'id',
     parentId: parentId || 'parentId',
@@ -6,7 +6,7 @@ import { onMounted, PropType, reactive, ref, watch } from &#39;vue&#39;
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import { required } from '@/utils/formRules'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { listSimpleMenusApi } from '@/api/system/menu'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
@@ -17,12 +17,6 @@ const props = defineProps({
     default: () => null
   }
 })
-const menuProps = {
-  checkStrictly: true,
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
 const rules = reactive({
   templateType: [required],
   scene: [required],
@@ -104,7 +98,7 @@ const schema = reactive&lt;FormSchema[]&gt;([
     component: 'TreeSelect',
     componentProps: {
       data: menuOptions,
-      props: menuProps,
+      props: defaultProps,
       checkStrictly: true,
       nodeKey: 'id'
     },
@@ -78,7 +78,7 @@
 import { nextTick, onMounted, reactive, ref, unref } from 'vue'
 import { ElSelect, ElTreeSelect, ElOption } from 'element-plus'
 import { VxeGridInstance } from 'vxe-table'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import { required } from '@/utils/formRules.js'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
@@ -115,13 +115,6 @@ const rules = reactive({
   status: [required]
 })
  
-// 下拉框[上级]的配置项目
-const defaultProps = {
-  checkStrictly: true,
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
 const getUserList = async () => {
   const res = await getListSimpleUsersApi()
   userOption.value = res
@@ -103,7 +103,7 @@
         <el-tree-select
           node-key="id"
           v-model="menuForm.parentId"
-          :props="menuProps"
+          :props="defaultProps"
           :data="menuOptions"
           :default-expanded-keys="[0]"
           check-strictly
@@ -237,8 +237,7 @@ import * as MenuApi from &#39;@/api/system/menu&#39;
 import { required } from '@/utils/formRules.js'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
-import { handleTree } from '@/utils/tree'
-import { deepCopy } from 'windicss/utils'
+import { handleTree, defaultProps } from '@/utils/tree'
  
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -253,7 +252,7 @@ const actionType = ref(&#39;&#39;) // 操作按钮的类型
 const actionLoading = ref(false) // 遮罩层
 // 新增和修改的表单值
 const formRef = ref<FormInstance>()
-const menuFormNull = {
+const menuForm = ref<MenuApi.MenuVO>({
   id: 0,
   name: '',
   permission: '',
@@ -266,9 +265,8 @@ const menuFormNull = {
   status: CommonStatusEnum.ENABLE,
   visible: true,
   keepAlive: true,
-  createTime: ''
-}
-const menuForm = ref<MenuApi.MenuVO>(menuFormNull)
+  createTime: new Date()
+})
 // 新增和修改的表单校验
 const rules = reactive({
   name: [required],
@@ -278,13 +276,6 @@ const rules = reactive({
 })
  
 // ========== 下拉框[上级菜单] ==========
-// 下拉框[上级菜单]的配置项目
-const menuProps = {
-  checkStrictly: true,
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
 const menuOptions = ref<any[]>([]) // 树形结构
 // 获取下拉框[上级菜单]的数据
 const getTree = async () => {
@@ -335,7 +326,21 @@ const handleCreate = () =&gt; {
   setDialogTile('create')
   // 重置表单
   formRef.value?.resetFields()
-  menuForm.value = deepCopy(menuFormNull)
+  menuForm.value = {
+    id: 0,
+    name: '',
+    permission: '',
+    type: SystemMenuTypeEnum.DIR,
+    sort: 1,
+    parentId: 0,
+    path: '',
+    icon: '',
+    component: '',
+    status: CommonStatusEnum.ENABLE,
+    visible: true,
+    keepAlive: true,
+    createTime: new Date()
+  }
 }
  
 // 修改操作
@@ -164,7 +164,7 @@ import { FormExpose } from &#39;@/components/Form&#39;
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import { SystemDataScopeEnum } from '@/utils/constants'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { rules, allSchemas } from './role.data'
@@ -259,11 +259,6 @@ const dataScopeForm = reactive({
   dataScope: 0,
   checkList: []
 })
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
 const treeOptions = ref<any[]>([]) // 菜单树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
 const dialogScopeVisible = ref(false)
@@ -66,7 +66,7 @@
 </template>
 <script setup lang="ts" name="TenantPackage">
 import { onMounted, ref, unref } from 'vue'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
@@ -93,12 +93,6 @@ const actionType = ref(&#39;&#39;) // 操作按钮的类型
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
  
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
-
 // 全选/全不选
 const handleCheckedTreeNodeAll = () => {
   treeRef.value!.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
@@ -284,7 +284,7 @@ import {
 } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { VxeGridInstance } from 'vxe-table'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import download from '@/utils/download'
 import { CommonStatusEnum } from '@/utils/constants'
 import { getAccessToken, getTenantId } from '@/utils/auth'
@@ -306,11 +306,6 @@ import {
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
  
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id'
-}
 const queryParams = reactive({
   deptId: null
 })
@@ -327,7 +322,7 @@ const { gridOptions, getList, deleteData, exportList } = useVxeGrid&lt;UserApi.User
 })
 // ========== 创建部门树结构 ==========
 const filterText = ref('')
-const deptOptions = ref<any[]>([]) // 树形结构
+const deptOptions = ref<Tree[]>([]) // 树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
 const getTree = async () => {
   const res = await listSimpleDeptApi()