feat: 租户套餐

apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue

@@ -3,14 +3,19 @@ import { computed, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Card, Tree } from 'ant-design-vue';
+import { cloneDeep, listToTree } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter';
-import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
+import { menuList, tenantPackageMenuTreeSelect } from '#/api/system/menu';
+import {
+  packageAdd,
+  packageInfo,
+  packageUpdate,
+} from '#/api/system/tenant-package';
+import { TreeSelectPanel } from '#/components/tree';
 
 import { drawerSchema } from './data';
+import TreeItem from './tree-item';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -29,28 +34,19 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
-function setupForm(update: boolean) {
-  formApi.updateSchema([
-    {
-      dependencies: {
-        show: () => update,
-        triggerFields: [''],
-      },
-      fieldName: 'clientId',
-    },
-    {
-      componentProps: {
-        disabled: update,
-      },
-      fieldName: 'clientKey',
-    },
-    {
-      componentProps: {
-        disabled: update,
-      },
-      fieldName: 'clientSecret',
-    },
-  ]);
+async function setupMenuTreeSelect(id?: number | string) {
+  if (id) {
+    const resp = await tenantPackageMenuTreeSelect(id);
+    await formApi.setFieldValue('menuIds', resp.checkedKeys);
+  }
+}
+
+const menuTree = ref<any[]>([]);
+async function setupMenuTree() {
+  const resp = await menuList();
+  const treeData = listToTree(resp, { id: 'menuId' });
+  // 设置菜单信息
+  menuTree.value = treeData;
 }
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
@@ -61,27 +57,27 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
-    // 初始化
-    setupForm(isUpdate.value);
     if (isUpdate.value && id) {
-      const record = await clientInfo(id);
-      // 不能禁用id为1的记录
-      formApi.updateSchema([
-        {
-          componentProps: {
-            disabled: record.id === 1,
-          },
-          fieldName: 'status',
-        },
-      ]);
+      const record = await packageInfo(id);
       await formApi.setValues(record);
     }
+    /**
+     * 加载菜单树和已勾选菜单
+     */
+    await Promise.all([setupMenuTree(), setupMenuTreeSelect(id)]);
+
     drawerApi.drawerLoading(false);
   },
 });
 
+/**
+ * 这里拿到的是一个数组ref
+ */
+const menuSelectRef = ref();
+
 async function handleConfirm() {
   try {
     drawerApi.drawerLoading(true);
@@ -89,8 +85,12 @@ async function handleConfirm() {
     if (!valid) {
       return;
     }
+    // 这个用于提交
+    const menuIds = menuSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
     const data = cloneDeep(await formApi.getValues());
-    await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
+    data.menuIds = menuIds;
+    await (isUpdate.value ? packageUpdate(data) : packageAdd(data));
     emit('reload');
     await handleCancel();
   } catch (error) {
@@ -104,26 +104,34 @@ async function handleCancel() {
   drawerApi.close();
   await formApi.resetForm();
 }
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleMenuCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('menuCheckStrictly', value);
+}
 </script>
 
 <template>
   <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
     <BasicForm>
       <template #menuIds="slotProps">
-        <Card class="w-full">
-          <Tree v-bind="slotProps" />
-        </Card>
+        <TreeSelectPanel
+          ref="menuSelectRef"
+          v-bind="slotProps"
+          :check-strictly="formApi.form.values.menuCheckStrictly"
+          :expand-all-on-init="true"
+          :field-names="{ title: 'menuName', key: 'menuId' }"
+          :tree-data="menuTree"
+          @check-strictly-change="handleMenuCheckStrictlyChange"
+        >
+          <template #title="data">
+            <TreeItem :data="data" />
+          </template>
+        </TreeSelectPanel>
       </template>
     </BasicForm>
   </BasicDrawer>
 </template>
-
-<style lang="scss" scoped>
-/**
-自定义组件校验失败样式
-*/
-:deep(.form-valid-error .ant-input[name='clientSecret']) {
-  border-color: hsl(var(--destructive));
-  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
-}
-</style>