feat: tenant menu

src/utils/tree.ts

@@ -239,37 +239,3 @@ export const handleTree = (data: any[], id?: string, parentId?: string, children
   }
   return tree
 }
-/**
- * 构造树型结构数据
- * @param {*} data 数据源
- * @param {*} id id字段 默认 'id'
- * @param {*} parentId 父节点字段 默认 'parentId'
- * @param {*} children 孩子节点字段 默认 'children'
- * @param {*} rootId 根Id 默认 0
- */
-export const handleTree2 = (data, id, parentId, children, rootId) => {
-  id = id || 'id'
-  parentId = parentId || 'parentId'
-  children = children || 'children'
-  rootId =
-    rootId ||
-    Math.min(
-      ...data.map((item) => {
-        return item[parentId]
-      })
-    ) ||
-    0
-  //对源数据深度克隆
-  const cloneData = JSON.parse(JSON.stringify(data))
-  //循环所有项
-  const treeData = cloneData.filter((father) => {
-    const branchArr = cloneData.filter((child) => {
-      //返回每一项的子级数组
-      return father[id] === child[parentId]
-    })
-    branchArr.length > 0 ? (father.children = branchArr) : ''
-    //返回第一层
-    return father[parentId] === rootId
-  })
-  return treeData !== '' ? treeData : data
-}

src/views/system/tenantPackage/TenantPackageModal.vue

@@ -1,18 +1,36 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #menuIds="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="menuTree"
+          :fieldNames="{ title: 'name', key: 'id' }"
+          checkable
+          toolbar
+          @check="menuCheck"
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 <script lang="ts" setup name="TenantPackageModal">
 import { ref, computed, unref } from 'vue'
-import { BasicModal, useModalInner } from '@/components/Modal'
 import { BasicForm, useForm } from '@/components/Form'
+import { BasicTree, TreeItem } from '@/components/Tree'
+import { BasicModal, useModalInner } from '@/components/Modal'
 import { formSchema } from './tenantPackage.data'
 import { createTenantPackageApi, getTenantPackageApi, updateTenantPackageApi } from '@/api/system/tenantPackage'
+import { listSimpleMenusApi } from '@/api/system/menu'
+import { handleTree } from '@/utils/tree'
 
 const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
 const rowId = ref()
+const menuTree = ref<TreeItem[]>([])
+const menuKeys = ref<(string | number)[]>([])
+const menuHalfKeys = ref<(string | number)[]>([])
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 100,
@@ -25,6 +43,8 @@ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
 })
 
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  menuKeys.value = []
+  menuHalfKeys.value = []
   resetFields()
   setModalProps({ confirmLoading: false })
   isUpdate.value = !!data?.isUpdate
@@ -32,6 +52,8 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   if (unref(isUpdate)) {
     const res = await getTenantPackageApi(data.record.id)
     rowId.value = res.id
+    const menus = await listSimpleMenusApi()
+    menuTree.value = handleTree(menus, 'id')
     setFieldsValue({
       ...res
     })
@@ -40,10 +62,16 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
 
 const getTitle = computed(() => (!unref(isUpdate) ? '新增租户套餐' : '编辑租户套餐'))
 
+function menuCheck(checkedKeys, e) {
+  menuKeys.value = checkedKeys as (string | number)[]
+  menuHalfKeys.value = e.halfCheckedKeys as (string | number)[]
+}
+
 async function handleSubmit() {
   try {
     const values = await validate()
     setModalProps({ confirmLoading: true })
+    values.menuIds = menuKeys.value.concat(menuHalfKeys.value)
     if (unref(isUpdate)) {
       await updateTenantPackageApi(values)
     } else {

src/views/system/tenantPackage/tenantPackage.data.ts

@@ -1,4 +1,3 @@
-import { listSimpleMenusApi } from '@/api/system/menu'
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
@@ -75,22 +74,9 @@ export const formSchema: FormSchema[] = [
   },
   {
     label: '菜单权限',
-    field: 'packageId',
-    required: true,
-    component: 'ApiTree',
-    // TODO
-    componentProps: {
-      api: () => listSimpleMenusApi(),
-      fieldNames: {
-        title: 'name',
-        key: 'id',
-        children: 'children'
-      },
-      handleTree: 'id',
-      checkable: true,
-      multiple: true,
-      checkedKeys: []
-    }
+    field: 'menuIds',
+    slot: 'menuIds',
+    component: 'Input'
   },
   {
     label: '状态',