From 8ba2dae74ee8f263c828bb6493b8f8899ac7d25b Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Wed, 22 Mar 2023 14:01:51 +0800
Subject: [PATCH] feat: tenant menu

---
 src/utils/tree.ts                             | 34 -------------------
 .../tenantPackage/TenantPackageModal.vue      | 32 +++++++++++++++--
 .../tenantPackage/tenantPackage.data.ts       | 20 ++---------
 3 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/src/utils/tree.ts b/src/utils/tree.ts
index 7340002..298c306 100644
--- a/src/utils/tree.ts
+++ b/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
-}
diff --git a/src/views/system/tenantPackage/TenantPackageModal.vue b/src/views/system/tenantPackage/TenantPackageModal.vue
index adcc701..3b6c64a 100644
--- a/src/views/system/tenantPackage/TenantPackageModal.vue
+++ b/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 {
diff --git a/src/views/system/tenantPackage/tenantPackage.data.ts b/src/views/system/tenantPackage/tenantPackage.data.ts
index fd6e7df..c0aec05 100644
--- a/src/views/system/tenantPackage/tenantPackage.data.ts
+++ b/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: '状态',