feat: 租户套餐

apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -21,7 +21,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     fieldName: 'packageId',
   },
   {
-    component: 'Input',
+    component: 'Radio',
     dependencies: {
       show: () => false,
       triggerFields: [''],
@@ -50,6 +50,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     },
     fieldName: 'remark',
     formItemClass: 'items-baseline',
+    label: '备注',
   },
 ];
 

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -1,20 +1,7 @@
 <script setup lang="ts">
-import type { DataNode } from 'ant-design-vue/es/tree';
-import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
-
-import type { Menu } from '#/api/system/menu/model';
-
-import { onMounted, ref } from 'vue';
-
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { filter, listToTree } from '@vben/utils';
 
-import { Card, Tree } from 'ant-design-vue';
-
-import { menuList } from '#/api/system/menu';
-
-import { excludeIds } from './data';
 import tenantPackageDrawer from './tenant-package-drawer.vue';
 
 const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
@@ -25,60 +12,6 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
-
-const menuTree = ref<DataNode[]>([]);
-// checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
-const menuCheckStrictly = ref<boolean>(false);
-const checkedKeys = ref<string[]>([]);
-
-/** 已经选择的所有节点  包括子/父节点 */
-const checkedMenuKeys = ref<(number | string)[]>([]);
-/**
- *
- * @param checkedKeys 已经选中的子节点的ID
- * @param info info.halfCheckedKeys为父节点的ID
- */
-type CheckedState<T = number | string> =
-  | { checked: T[]; halfChecked: T[] }
-  | T[];
-function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
-  // 数组的话为节点关联
-  if (Array.isArray(checkedKeys)) {
-    const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
-    checkedMenuKeys.value = [...halfCheckedKeys, ...checkedKeys];
-  } else {
-    checkedMenuKeys.value = [...checkedKeys.checked];
-  }
-}
-
-/**
- * 不显示租户相关菜单  分配了也没法使用
- * @param menuTree menus
- */
-function transformMenu(menuTree: Menu[]) {
-  return filter(
-    menuTree,
-    (item) => {
-      if (excludeIds.includes(item.menuId)) {
-        return false;
-      }
-      return true;
-    },
-    { id: 'menuId', pid: 'parentId', children: 'children' },
-  );
-}
-
-onMounted(async () => {
-  const resp = await menuList();
-  // 去除租户相关菜单(分配了也无权限)
-  const afterTransform = transformMenu(resp);
-  const tree = listToTree(afterTransform, { id: 'menuId' });
-  menuTree.value = tree;
-});
-
-function test() {
-  console.log(checkedMenuKeys.value);
-}
 </script>
 
 <template>
@@ -86,19 +19,6 @@ function test() {
     <a-button type="primary" @click="handleAdd">
       {{ $t('pages.common.add') }}
     </a-button>
-    <a-button @click="test">获取</a-button>
-    <Card>
-      <Tree
-        v-if="menuTree.length > 0"
-        v-model:check-strictly="menuCheckStrictly"
-        v-model:checked-keys="checkedKeys"
-        :checkable="true"
-        :field-names="{ title: 'menuName', key: 'menuId' }"
-        :selectable="false"
-        :tree-data="menuTree"
-        @check="handleChecked"
-      />
-    </Card>
     <TenantPackageDrawer />
   </Page>
 </template>

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 { cloneDeep, listToTree } from '@vben/utils';
-
-import { Card, Tree } from 'ant-design-vue';
 
 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) {
+async function setupMenuTreeSelect(id?: number | string) {
-  formApi.updateSchema([
+  if (id) {
-    {
+    const resp = await tenantPackageMenuTreeSelect(id);
-      dependencies: {
+    await formApi.setFieldValue('menuIds', resp.checkedKeys);
-        show: () => update,
+  }
-        triggerFields: [''],
+}
-      },
+
-      fieldName: 'clientId',
+const menuTree = ref<any[]>([]);
-    },
+async function setupMenuTree() {
-    {
+  const resp = await menuList();
-      componentProps: {
+  const treeData = listToTree(resp, { id: 'menuId' });
-        disabled: update,
+  // 设置菜单信息
-      },
+  menuTree.value = treeData;
-      fieldName: 'clientKey',
-    },
-    {
-      componentProps: {
-        disabled: update,
-      },
-      fieldName: 'clientSecret',
-    },
-  ]);
 }
 
 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);
+      const record = await packageInfo(id);
-      // 不能禁用id为1的记录
-      formApi.updateSchema([
-        {
-          componentProps: {
-            disabled: record.id === 1,
-          },
-          fieldName: 'status',
-        },
-      ]);
       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">
+        <TreeSelectPanel
-          <Tree v-bind="slotProps" />
+          ref="menuSelectRef"
-        </Card>
+          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>

apps/web-antd/src/views/system/tenantPackage/tree-item.tsx

@@ -0,0 +1,42 @@
+import type { Menu } from '#/api/system/menu/model';
+
+import { computed, defineComponent, type PropType } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+export default defineComponent({
+  name: 'TreeItem',
+  props: {
+    data: {
+      required: true,
+      type: Object as PropType<Menu>,
+    },
+  },
+  setup(props, { expose }) {
+    expose();
+
+    interface TagProp {
+      color: string;
+      text: string;
+    }
+
+    const menuTagProp = computed<TagProp>(() => {
+      // 正则判断是否为链接
+      if (/^https?:\/\/[^\s/$.?#].\S*$/i.test(props.data.path)) {
+        return { color: 'pink', text: '外链' };
+      }
+      const type = props.data.menuType;
+      if (type === 'M') return { color: 'green', text: '目录' };
+      if (type === 'C') return { color: 'blue', text: '菜单' };
+      if (type === 'F') return { color: '', text: '按钮' };
+      return { color: 'error', text: '未知' };
+    });
+
+    return () => (
+      <div class="flex gap-[6px]">
+        <span>{props.data.menuName}</span>
+        <Tag color={menuTagProp.value.color}>{menuTagProp.value.text}</Tag>
+      </div>
+    );
+  },
+});