yg-yygl 0.0.1

package/src/views/sys/menu/index.vue

@@ -0,0 +1,860 @@
+<script setup lang="ts">
+import type { SearchItemConfig } from '@udp/component-ui';
+
+import type { Menu, MenuFilterParams } from '../../../api/menu/types';
+
+import { computed, h, nextTick, onMounted, ref } from 'vue';
+
+import { Drawer, Icon, Search, Table } from '@udp/component-ui';
+import { useUserStore } from '@udp/stores';
+
+import { downloadFileFromBlob } from '@udp-core/shared/utils';
+
+import { CollectionTag, Plus } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { deleteMenu, exportMenu, getMenuChildren, toggleMenuStatus } from '../../../api/menu';
+import { StatusTag } from '../../../components/custom-tags';
+import { MainContainer } from '../../../components/main-container';
+
+import MenuForm from './menu-form.vue';
+import MenuLabelManage from './menu-label-manage.vue';
+
+// 查询参数
+const searchParams = ref<MenuFilterParams>({});
+// 菜单样式类型：0-Web菜单，1-App菜单
+const menuStyle = ref(0);
+const searchItems: SearchItemConfig[] = [
+  {
+    prop: 'searchKeyword',
+    label: '菜单信息',
+    type: 'input' as const,
+    showInCollapsed: true,
+    placeholder: '请输入菜单名称/标签',
+  },
+];
+
+// 表格列配置
+const columns = [
+  { prop: 'menuName', label: '菜单名称', minWidth: 100 },
+  {
+    prop: 'icon',
+    label: '菜单图标',
+    width: 100,
+    render: ({ row }: { row: any }) =>
+      h(Icon, {
+        name: row.icon,
+      }),
+  },
+  { prop: 'url', label: '路由地址', minWidth: 150 },
+  { prop: 'menuType', label: '类型', slot: 'menuType', width: 100 },
+  {
+    prop: 'permissionType',
+    label: '按钮类型',
+    slot: 'permissionType',
+    width: 100,
+  },
+  { prop: 'orderBy', label: '排序', width: 80 },
+  {
+    prop: 'visual',
+    label: '是否可见',
+    width: 80,
+    render: ({ row }: { row: any }) =>
+      h(StatusTag, {
+        value: row.visual,
+        showDot: false,
+        activeValue: 0,
+        inactiveValue: 1,
+        activeText: '可见',
+        inactiveText: '隐藏',
+      }),
+  },
+  { prop: 'labels', label: '菜单标签', slot: 'labels', minWidth: 150 },
+  {
+    prop: 'stopUse',
+    label: '菜单状态',
+    width: 100,
+    render: ({ row }: { row: any }) =>
+      h(StatusTag, {
+        value: row.stopUse,
+        activeValue: 0,
+        inactiveValue: 1,
+      }),
+  },
+];
+
+// 状态管理
+const loading = ref(false);
+const data = ref<Menu[]>([]);
+const drawerVisible = ref(false);
+const labelDrawerVisible = ref(false);
+const editRow = ref<Menu | null>(null);
+const parentData = ref<Menu | null>(null);
+const menuFormRef = ref();
+const tableRef = ref<InstanceType<typeof Table>>();
+const tableShow = ref(true); // 控制表格组件显示隐藏，用于解决树型懒加载缓存问题
+
+// 计算属性
+const isEdit = computed(() => !!editRow.value?.id);
+
+// 获取菜单类型标签类型
+const getTypeTagType = (menuType: number) => {
+  const typeMap: Record<number, string> = {
+    0: 'primary', // 分类
+    1: 'success', // 菜单
+    2: 'info', // 按钮
+  };
+  return typeMap[menuType] || 'info';
+};
+
+// 获取菜单类型文本
+const getTypeText = (menuType: number) => {
+  const typeMap: Record<number, string> = {
+    0: '分类',
+    1: '菜单',
+    2: '按钮',
+  };
+  return typeMap[menuType] || '-';
+};
+
+// 获取按钮类型文本
+const getPermissionTypeText = (permissionType: string) => {
+  const typeMap: Record<string, string> = {
+    add: '新增',
+    delete: '删除',
+    update: '修改',
+    query: '查询',
+  };
+  return typeMap[permissionType] || '-';
+};
+
+// 加载菜单根节点数据（懒加载）
+const loadData = async () => {
+  try {
+    loading.value = true;
+
+    // 初始加载时传入parentId为0，获取根节点
+    const queryParams = { ...searchParams.value, menuStyle: menuStyle.value };
+    const response = await getMenuChildren(queryParams);
+
+    // 判断是否有搜索条件
+    const hasSearchCondition = !!searchParams.value?.searchKeyword;
+
+    data.value = response || [];
+
+    // 如果有搜索条件，自动展开匹配的节点
+    if (hasSearchCondition) {
+      // 使用模拟点击方式自动展开
+      /*
+      setTimeout(() => {
+        simulateExpandClick();
+      }, 500);
+      */
+    }
+
+    // 加载完数据后显示表格
+    tableShow.value = true;
+  } catch (error) {
+    console.error('获取菜单数据失败:', error);
+    ElMessage.error('获取菜单数据失败');
+    tableShow.value = true; // 错误时也要显示表格
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 懒加载子菜单数据
+const loadChildren = async (row: Menu, treeNode: any, resolve: Function) => {
+  try {
+    // 合并搜索条件和父级ID
+    const queryParams = {
+      ...searchParams.value,
+      parentId: row.id,
+      menuStyle: menuStyle.value,
+    };
+    const response = await getMenuChildren(queryParams);
+    resolve(response || []);
+  } catch (error) {
+    console.error('获取子菜单数据失败:', error);
+    ElMessage.error('获取子菜单数据失败');
+    resolve([]);
+  }
+};
+
+// 搜索
+const search = () => {
+  // 使用v-if重建表格组件解决缓存问题
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 重置
+const reset = () => {
+  searchParams.value = {};
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 刷新
+const refresh = () => {
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 切换菜单类型
+const handleMenuStyleChange = (value: number) => {
+  menuStyle.value = value;
+  loadData();
+};
+
+// 新增菜单
+const handleAdd = () => {
+  editRow.value = null;
+  parentData.value = null;
+  drawerVisible.value = true;
+};
+
+// 新增子菜单
+const handleAddChild = (row: Menu) => {
+  editRow.value = null;
+  parentData.value = row;
+  drawerVisible.value = true;
+};
+
+// 编辑菜单
+const handleEdit = (row: Menu) => {
+  editRow.value = { ...row };
+  parentData.value = null;
+  drawerVisible.value = true;
+};
+
+// 启用停用菜单
+const handleToggleStatus = async (row: Menu) => {
+  try {
+    const action = row.stopUse === 0 ? '停用' : '启用';
+    await ElMessageBox.confirm(
+      `确定要${action}这条数据吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    await toggleMenuStatus(row.id);
+    ElMessage.success(`${action}成功`);
+    refresh();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('操作失败:', error);
+      ElMessage.error('操作失败');
+    }
+  }
+};
+
+// 删除单个菜单
+const deleteRow = async (row: Menu) => {
+  try {
+    let deleteChildren = false;
+
+    // 如果菜单有子菜单，显示包含删除子菜单选项的确认框
+    // if (row.hasChildren) {
+    row.hasChildren
+      ? await ElMessageBox.confirm(
+          h('div', [
+            h(
+              'p',
+              {
+                style: 'margin-bottom: 16px; color: #606266; line-height: 1.5;',
+              },
+              `确定要删除菜单"${row.menuName}"吗？此操作不可恢复！`,
+            ),
+            h(
+              'div',
+              {
+                style:
+                  'display: flex; align-items: center; padding: 12px; background-color: #f5f7fa; border-radius: 4px; border-left: 4px solid #e6a23c; margin-top: 12px;',
+              },
+              [
+                h('input', {
+                  type: 'checkbox',
+                  id: 'deleteChildrenCheckbox',
+                  style: 'margin-right: 8px; transform: scale(1.1);',
+                  onChange: (e: Event) => {
+                    deleteChildren = (e.target as HTMLInputElement).checked;
+                  },
+                }),
+                h(
+                  'label',
+                  {
+                    for: 'deleteChildrenCheckbox',
+                    style:
+                      'cursor: pointer; font-weight: 500; user-select: none;',
+                  },
+                  '一键删除子菜单和按钮，勾选后删除该菜单及其子菜单和按钮',
+                ),
+              ],
+            ),
+          ]),
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            dangerouslyUseHTMLString: false,
+            icon: h('Icon', {
+              name: 'fluent-color:warning-32',
+            }),
+          },
+        )
+      : await ElMessageBox.confirm(
+          '确定要删除这条数据吗？',
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          },
+        );
+    // } else {
+    //   // 如果没有子菜单，显示简单的确认框
+    //   await ElMessageBox.confirm(
+    //     `确定要<b style="color: var(--el-color-danger);">删除</b>菜单"${row.menuName}"吗？此操作不可恢复！`,
+    //     '删除确认',
+    //     {
+    //       confirmButtonText: '确定',
+    //       cancelButtonText: '取消',
+    //       type: 'warning',
+    //       dangerouslyUseHTMLString: true,
+    //     },
+    //   );
+    // }
+
+    await deleteMenu(row.id, deleteChildren);
+    ElMessage.success('删除成功');
+    refresh();
+  } catch (error) {
+    // 用户取消操作时不显示错误信息
+    if (error !== 'cancel') {
+      console.error('删除菜单失败:', error);
+    }
+  }
+};
+
+// 取消操作
+const handleCancel = () => {
+  drawerVisible.value = false;
+};
+
+// 保存操作
+const handleSave = async () => {
+  try {
+    // await menuFormRef.value?.validate();
+    // 触发表单提交
+    const success = await menuFormRef.value?.handleSubmit();
+    if (success) {
+      handleCancel();
+      refresh();
+    }
+  } catch (error) {
+    console.error('表单验证失败:', error);
+  }
+};
+
+// 抽屉关闭
+const handleDrawerClosed = () => {
+  editRow.value = null;
+  parentData.value = null;
+};
+
+// 菜单标签管理
+const handleLabelManage = () => {
+  labelDrawerVisible.value = true;
+};
+
+/**
+ * 通用Excel导出工具函数
+ * @param exportApi 导出API函数
+ * @param params 导出参数
+ * @param options 配置选项
+ * @returns Promise<void>
+ */
+const exportExcelFile = async (
+  exportApi: Function,
+  params: any,
+  options?: {
+    errorMessage?: string;
+    showLoading?: boolean;
+    successMessage?: string;
+  },
+) => {
+  const {
+    showLoading = true,
+    successMessage = '导出成功',
+    errorMessage = '导出失败，请稍后重试',
+  } = options || {};
+
+  // 加载提示
+  let loadingInstance: any;
+
+  try {
+    // 调用导出接口
+    const response = await exportApi(params);
+
+    // 使用downloadFileFromBlob处理blob数据下载
+    downloadFileFromBlob({
+      fileName: params.fileName || 'download.xlsx',
+      source: response,
+    });
+    return true;
+  } catch (error) {
+    console.error('导出失败:', error);
+    return false;
+  } finally {
+    // 关闭加载提示
+    if (showLoading && loadingInstance) {
+      loadingInstance.close();
+    }
+  }
+};
+
+// 处理导出Excel功能
+const handleExport = async () => {
+  try {
+    const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+    // 根据菜单实体类属性定义导出字段
+    const exportParams = {
+      queryCondition: { ...searchParams.value, menuStyle: menuStyle.value },
+      fileName: '菜单数据.xlsx',
+      selectedFields: [
+        ...normalizedColumns
+          .filter((item: any) => !item.hidden)
+          .map((item: any) => item.prop),
+        'menuStyle' // 手动添加菜单风格字段
+      ],
+    };
+
+    // 使用通用导出工具函数
+    await exportExcelFile(exportMenu,exportParams);
+
+    ElMessage.success('导出成功');
+  } catch (error: any) {
+    const errorMsg = error?.message || '导出失败，请重试';
+    ElMessage.error(errorMsg);
+  }
+};
+
+const currentTenantId = computed(() => {
+  return useUserStore().accountInfo?.tenantId;
+});
+
+// 初始化
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<template>
+  <MainContainer>
+    <template #search>
+      <Search
+        v-model="searchParams"
+        :items="searchItems"
+        button-align="left"
+        @search="search"
+        @reset="reset"
+      />
+    </template>
+
+    <!-- 菜单类型切换Tab -->
+    <div class="menu-style-tabs">
+      <el-tabs v-model="menuStyle" @tab-change="handleMenuStyleChange">
+        <el-tab-pane label="Web端菜单" :name="0" />
+        <el-tab-pane label="移动端菜单" :name="1" />
+      </el-tabs>
+    </div>
+
+    <Table
+      ref="tableRef"
+      :data="data"
+      :columns="columns"
+      :loading="loading"
+      v-if="tableShow"
+      show-action
+      :show-layout="false"
+      layout-type="table"
+      action-width="180px"
+      row-key="id"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      :load="loadChildren"
+      lazy
+      @refresh="refresh"
+      :on-edit="(row: any) => handleEdit(row as Menu)"
+      :on-delete="(row: any) => deleteRow(row as Menu)"
+    >
+      <template #top-actions>
+        <el-button type="primary" :icon="Plus" @click="handleAdd">
+          新增菜单
+        </el-button>
+        <el-button :icon="CollectionTag" @click="handleLabelManage">
+          菜单标签
+        </el-button>
+        <el-button @click="handleExport">
+          <template #icon>
+            <Icon name="ant-design:export-outlined" size="18" />
+          </template>
+          导出
+        </el-button>
+      </template>
+
+      <!-- 菜单名称列 -->
+      <template #menuName="{ row }">
+        <div class="flex items-center">
+          <el-icon v-if="row.icon" class="mr-2">
+            <component :is="row.icon" />
+          </el-icon>
+          <span>{{ row.menuName }}</span>
+        </div>
+      </template>
+
+      <!-- 菜单类型列 -->
+      <template #menuType="{ row }">
+        <el-tag :type="getTypeTagType(row.menuType)" size="small">
+          {{ getTypeText(row.menuType) }}
+        </el-tag>
+      </template>
+
+      <!-- 按钮类型列 -->
+      <template #permissionType="{ row }">
+        <span v-if="row.permissionType">
+          {{ getPermissionTypeText(row.permissionType) }}按钮
+        </span>
+        <span v-else></span>
+      </template>
+
+      <!-- 可见状态列 -->
+      <template #visual="{ row }">
+        <el-tag :type="row.visual === 1 ? 'success' : 'info'" size="small">
+          {{ row.visual === 0 ? '可见' : '隐藏' }}
+        </el-tag>
+      </template>
+
+      <!-- 菜单标签列 -->
+      <template #labels="{ row }">
+        <div class="flex gap-1">
+          <el-tag
+            v-for="label in row.labels"
+            :key="label.id"
+            size="small"
+            :color="label.color"
+            effect="light"
+            class="label-tag-limited"
+          >
+            <span class="label-text-truncate">#{{ label.labelName }}</span>
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 自定义操作列 -->
+      <template #action="{ row }">
+        <el-button
+          type="primary"
+          link
+          :disabled="
+            currentTenantId !== '0' && currentTenantId !== row.tenantId
+          "
+          @click="handleEdit(row)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          :type="row.stopUse === 0 ? 'danger' : 'primary'"
+          link
+          :disabled="
+            currentTenantId !== '0' && currentTenantId !== row.tenantId
+          "
+          @click="handleToggleStatus(row)"
+        >
+          {{ row.stopUse === 0 ? '停用' : '启用' }}
+        </el-button>
+        <el-popover
+          placement="bottom"
+          :width="100"
+          trigger="hover"
+          popper-style="min-width: 100px"
+        >
+          <template #reference>
+            <el-button type="primary" link>更多</el-button>
+          </template>
+          <div class="flex flex-col items-center gap-2">
+            <el-button
+              type="danger"
+              link
+              :disabled="
+                currentTenantId !== '0' && currentTenantId !== row.tenantId
+              "
+              @click="deleteRow(row)"
+            >
+              删除
+            </el-button>
+            <el-button
+              type="primary"
+              link
+              :disabled="
+                currentTenantId !== '0' && currentTenantId !== row.tenantId
+              "
+              @click="handleAddChild(row)"
+            >
+              新增下级
+            </el-button>
+          </div>
+        </el-popover>
+      </template>
+    </Table>
+    <!-- 菜单表单抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      :title="isEdit ? '编辑菜单' : '新增菜单'"
+      :type="isEdit ? 'edit' : 'add'"
+      size="808px"
+      @confirm="handleSave"
+      @closed="handleDrawerClosed"
+    >
+      <MenuForm
+        ref="menuFormRef"
+        :edit-data="editRow"
+        :parent-data="parentData"
+        :menu-style="menuStyle"
+      />
+    </Drawer>
+
+    <!-- 菜单标签管理抽屉 -->
+    <Drawer
+      v-model="labelDrawerVisible"
+      title="菜单标签管理"
+      icon="icon-park-solid:tag"
+      size="800px"
+      @close="refresh"
+      :show-confirm-button="false"
+    >
+      <MenuLabelManage @success="refresh" :menu-style="menuStyle" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.text-green-500 {
+  color: #10b981;
+}
+
+.text-red-500 {
+  color: #ef4444;
+}
+
+/* 菜单标签宽度限制 */
+.label-text-truncate {
+  display: inline-block;
+  max-width: 4em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* 菜单类型切换Tab样式 */
+.menu-style-tabs {
+  margin-bottom: 16px;
+  padding: 0 16px;
+  background: var(--background--deep);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.menu-style-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.menu-style-tabs :deep(.el-tabs__nav-wrap) {
+  padding: 0;
+}
+
+.menu-style-tabs :deep(.el-tabs__item) {
+  padding: 0 20px;
+  height: 48px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  transition: all 0.3s ease;
+}
+
+.menu-style-tabs :deep(.el-tabs__item:hover) {
+  color: #409eff;
+}
+
+.menu-style-tabs :deep(.el-tabs__item.is-active) {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.menu-style-tabs :deep(.el-tabs__active-bar) {
+  background-color: #409eff;
+  height: 3px;
+}
+
+/* 抽屉样式 */
+:deep(.menu-drawer) {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+
+.drawer-header {
+  position: relative;
+  height: 80px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px 12px 0 0;
+}
+
+.header-background {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px 12px 0 0;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-section {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.icon-wrapper {
+  position: relative;
+}
+
+.icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  background: rgb(255 255 255 / 20%);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.icon-circle:hover {
+  background: rgb(255 255 255 / 30%);
+}
+
+.close-icon {
+  font-size: 16px;
+  color: white;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.cancel-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: white;
+  background: transparent;
+  border: 1px solid rgb(255 255 255 / 30%);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover {
+  background: rgb(255 255 255 / 10%);
+  border-color: rgb(255 255 255 / 50%);
+}
+
+.save-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #667eea;
+  background: white;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.save-btn:hover {
+  background: #f8f9ff;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  transform: translateY(-1px);
+}
+
+.drawer-body {
+  height: calc(100vh - 80px);
+  padding: 24px;
+  overflow-y: auto;
+}
+</style>