refactor(tenant): refine menu scope boundaries and document plan/tenant menu design

src/views/system/tenant/index.vue

@@ -57,9 +57,19 @@
         class="table-section__content"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          :selectable="isTenantSelectable"
+        />
         <el-table-column label="租户名称" prop="name" min-width="160" />
         <el-table-column label="租户编码" prop="code" width="140" />
+        <el-table-column label="租户套餐" min-width="140">
+          <template #default="scope">
+            <span>{{ resolvePlanLabel(scope.row.planId) }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="域名" prop="domain" min-width="160" />
         <el-table-column label="联系人" prop="contactName" width="120" />
         <el-table-column label="电话" prop="contactPhone" width="140" />
@@ -73,11 +83,7 @@
               inactive-text="禁用"
               :active-value="1"
               :inactive-value="0"
-              @change="
-                (val) => {
-                  pageData.length > 0 && handleChangeStatus(scope.row.id, Number(val));
-                }
-              "
+              @change="handleStatusChange(scope.row.id, $event)"
             />
             <el-tag v-else :type="scope.row.status === 1 ? 'success' : 'info'">
               {{ scope.row.status === 1 ? "正常" : "禁用" }}
@@ -86,8 +92,19 @@
         </el-table-column>
         <el-table-column label="过期时间" prop="expireTime" width="180" />
         <el-table-column label="创建时间" prop="createTime" width="180" />
-        <el-table-column fixed="right" label="操作" width="180">
+        <el-table-column fixed="right" label="操作" width="260">
           <template #default="scope">
+            <el-button
+              v-if="!isPlatformTenantId(scope.row.id)"
+              v-hasPerm="['sys:tenant:update']"
+              type="primary"
+              size="small"
+              link
+              icon="menu"
+              @click="handleOpenPlanMenuDialog(scope.row)"
+            >
+              方案菜单
+            </el-button>
             <el-button
               v-hasPerm="['sys:tenant:update']"
               type="primary"
@@ -99,6 +116,7 @@
               编辑
             </el-button>
             <el-button
+              v-if="!isPlatformTenantId(scope.row.id)"
               v-hasPerm="['sys:tenant:delete']"
               type="danger"
               size="small"
@@ -145,6 +163,17 @@
           <el-input v-model="formData.domain" placeholder="demo.youlai.tech（可选）" />
         </el-form-item>
 
+        <el-form-item v-if="!isPlatformTenant" label="租户套餐" prop="planId">
+          <el-select v-model="formData.planId" placeholder="请选择租户套餐" style="width: 100%">
+            <el-option
+              v-for="item in planOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="联系人" prop="contactName">
           <el-input v-model="formData.contactName" placeholder="可选" />
         </el-form-item>
@@ -198,6 +227,71 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 方案菜单配置 -->
+    <el-drawer
+      v-model="planMenuDialogVisible"
+      :title="'【' + checkedPlan.name + '】方案菜单配置'"
+      size="600px"
+      @close="handleClosePlanMenuDialog"
+    >
+      <div class="flex-x-between">
+        <el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
+          <template #prefix>
+            <Search />
+          </template>
+        </el-input>
+
+        <div class="flex-center ml-5">
+          <el-button type="primary" size="small" plain @click="toggleMenuTree">
+            <template #icon>
+              <Switch />
+            </template>
+            {{ menuExpanded ? "收缩" : "展开" }}
+          </el-button>
+          <el-checkbox v-model="menuParentChildLinked" class="ml-5" @change="handleMenuLinkChange">
+            父子联动
+          </el-checkbox>
+
+          <el-tooltip placement="bottom">
+            <template #content>
+              如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
+            </template>
+            <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
+              <QuestionFilled />
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <el-tree
+        ref="menuTreeRef"
+        node-key="value"
+        show-checkbox
+        :data="menuPermOptions"
+        :filter-node-method="handleMenuFilter"
+        :default-expand-all="true"
+        :check-strictly="!menuParentChildLinked"
+        class="mt-5"
+      >
+        <template #default="{ data }">
+          {{ data.label }}
+        </template>
+      </el-tree>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            v-hasPerm="['sys:tenant-plan:assign']"
+            type="primary"
+            @click="handlePlanMenuSubmit"
+          >
+            确定
+          </el-button>
+          <el-button @click="planMenuDialogVisible = false">取消</el-button>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
@@ -212,10 +306,15 @@ import { useDebounceFn } from "@vueuse/core";
 import { hasPerm } from "@/utils/auth";
 
 import TenantAPI from "@/api/system/tenant";
+import TenantPlanAPI from "@/api/system/tenant-plan";
+import MenuAPI from "@/api/system/menu";
 import type { TenantCreateForm, TenantForm, TenantQueryParams, TenantItem } from "@/types/api";
+import { MenuScopeEnum } from "@/enums/business";
+import { isPlatformTenantId } from "@/utils/tenant";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
+const menuTreeRef = ref();
 
 const loading = ref(false);
 const ids = ref<number[]>([]);
@@ -229,11 +328,21 @@ const queryParams = reactive<TenantQueryParams>({
 
 const pageData = ref<TenantItem[]>([]);
 
+const menuPermOptions = ref<OptionItem[]>([]);
+
 const dialog = reactive({
   title: "",
   visible: false,
 });
 
+const planMenuDialogVisible = ref(false);
+const checkedPlan = ref<{ id?: number; name?: string }>({});
+const menuKeywords = ref("");
+const menuExpanded = ref(true);
+const menuParentChildLinked = ref(true);
+
+const planOptions = ref<OptionItem[]>([]);
+
 const formData = reactive<TenantForm & TenantCreateForm>({
   id: undefined,
   name: "",
@@ -242,24 +351,57 @@ const formData = reactive<TenantForm & TenantCreateForm>({
   contactName: "",
   contactPhone: "",
   contactEmail: "",
+  planId: undefined,
   remark: "",
   expireTime: undefined,
   status: 1,
   adminUsername: "",
 });
 
+const isPlatformTenant = computed(() => isPlatformTenantId(formData.id));
+
+// 平台租户不允许批量删除
+const isTenantSelectable = (row: TenantItem) => !isPlatformTenantId(row.id);
+
 const rules = reactive({
   name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
   code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
+  planId: [
+    {
+      // 平台租户不绑定套餐
+      validator: (_: unknown, value: number | undefined, callback: (error?: Error) => void) => {
+        if (isPlatformTenant.value) return callback();
+        if (value == null) return callback(new Error("请选择租户套餐"));
+        return callback();
+      },
+      trigger: "change",
+    },
+  ],
 });
 
 const hasPermChangeStatus = computed(() => hasPerm("sys:tenant:change-status"));
 
+function handleStatusChange(tenantId: string | number | undefined, val: string | number | boolean) {
+  if (tenantId == null) return;
+  if (pageData.value.length > 0) {
+    handleChangeStatus(String(tenantId), Number(val));
+  }
+}
+
+function resolvePlanLabel(planId?: number) {
+  if (planId == null) return "-";
+  const matched = planOptions.value.find((item) => Number(item.value) === planId);
+  return matched?.label || String(planId);
+}
+
 function fetchData() {
   loading.value = true;
   TenantAPI.getPage(queryParams)
     .then((res) => {
-      pageData.value = res.data;
+      pageData.value = res.data.map((item) => ({
+        ...item,
+        planId: item.planId != null ? Number(item.planId) : undefined,
+      }));
       total.value = res.page?.total ?? 0;
     })
     .finally(() => {
@@ -267,6 +409,85 @@ function fetchData() {
     });
 }
 
+async function handleOpenPlanMenuDialog(row: TenantItem) {
+  if (isPlatformTenantId(row.id)) {
+    return;
+  }
+  const planId = row.planId;
+  if (!planId) {
+    ElMessage.warning("请先为租户选择套餐");
+    return;
+  }
+
+  planMenuDialogVisible.value = true;
+  loading.value = true;
+  checkedPlan.value = { id: planId, name: resolvePlanLabel(planId) };
+
+  try {
+    // 套餐菜单只允许配置业务菜单
+    const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
+    menuPermOptions.value = menuOptions;
+    const menuIds = await TenantPlanAPI.getPlanMenuIds(planId);
+    await nextTick();
+    menuTreeRef.value?.setCheckedKeys([], false);
+    menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleClosePlanMenuDialog() {
+  planMenuDialogVisible.value = false;
+  menuKeywords.value = "";
+  menuExpanded.value = true;
+  menuParentChildLinked.value = true;
+  menuTreeRef.value?.setCheckedKeys([], false);
+}
+
+function toggleMenuTree() {
+  menuExpanded.value = !menuExpanded.value;
+  if (menuTreeRef.value) {
+    Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (menuExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
+  }
+}
+
+function handleMenuLinkChange(val: boolean) {
+  menuParentChildLinked.value = val;
+}
+
+watch(menuKeywords, (val) => {
+  menuTreeRef.value?.filter(val);
+});
+
+function handleMenuFilter(value: string, data: { [key: string]: any }) {
+  if (!value) return true;
+  return data.label.includes(value);
+}
+
+async function handlePlanMenuSubmit() {
+  const planId = checkedPlan.value.id;
+  if (!planId) return;
+
+  const checkedMenuIds: number[] = menuTreeRef
+    .value!.getCheckedNodes(false, true)
+    .map((node: any) => node.value);
+
+  loading.value = true;
+  try {
+    await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
+    ElMessage.success("方案菜单配置成功");
+    planMenuDialogVisible.value = false;
+  } finally {
+    loading.value = false;
+  }
+}
+
 function handleQuery() {
   queryParams.pageNum = 1;
   fetchData();
@@ -289,6 +510,10 @@ async function handleOpenDialog(tenantId?: string) {
     const data = await TenantAPI.getFormData(tenantId);
     Object.assign(formData, data);
     formData.adminUsername = "";
+    formData.planId = formData.planId != null ? Number(formData.planId) : undefined;
+    if (isPlatformTenant.value) {
+      formData.planId = undefined;
+    }
   } else {
     dialog.title = "新增租户";
     Object.assign(formData, {
@@ -299,6 +524,7 @@ async function handleOpenDialog(tenantId?: string) {
       contactName: "",
       contactPhone: "",
       contactEmail: "",
+      planId: undefined,
       remark: "",
       expireTime: undefined,
       status: 1,
@@ -319,6 +545,7 @@ function handleCloseDialog() {
     contactName: "",
     contactPhone: "",
     contactEmail: "",
+    planId: undefined,
     remark: "",
     expireTime: undefined,
     status: 1,
@@ -342,6 +569,7 @@ const handleSubmit = useDebounceFn(async () => {
         contactName: formData.contactName,
         contactPhone: formData.contactPhone,
         contactEmail: formData.contactEmail,
+        planId: formData.planId,
         remark: formData.remark,
         expireTime: formData.expireTime,
         status: formData.status,
@@ -356,6 +584,7 @@ const handleSubmit = useDebounceFn(async () => {
         contactName: formData.contactName,
         contactPhone: formData.contactPhone,
         contactEmail: formData.contactEmail,
+        planId: formData.planId,
         remark: formData.remark,
         expireTime: formData.expireTime,
         adminUsername: formData.adminUsername,
@@ -413,7 +642,20 @@ async function handleChangeStatus(id: string | undefined, status: number) {
 
 onMounted(() => {
   fetchData();
+  fetchPlanOptions();
 });
+
+async function fetchPlanOptions() {
+  try {
+    const options = await TenantPlanAPI.getOptions();
+    planOptions.value = options.map((item) => ({
+      ...item,
+      value: item.value != null ? Number(item.value) : item.value,
+    }));
+  } catch {
+    planOptions.value = [];
+  }
+}
 </script>
 
 <style scoped lang="scss"></style>