新增：批量删除菜单功能和复制菜单功能

2024-09-01 01:59:07 +08:00
parent 41ad9a474e
commit bf43bdbab4
22 changed files with 1314 additions and 87 deletions
--- a/src/views/system/menu/components/clone.vue
+++ b/src/views/system/menu/components/clone.vue
@@ -1,7 +1,7 @@
 <!-- 编辑弹窗 -->
 <template>
  <ele-modal
-    :width="540"
+    :width="550"
    :visible="visible"
    :confirm-loading="loading"
    :title="`菜单克隆`"
@@ -15,11 +15,28 @@
      :rules="rules"
      :label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
      :wrapper-col="
-        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+        styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
      "
    >
-      <a-form-item label="选择模板" name="tenantName">
-        <SelectTenant v-model:value="tenantName" @done="onPromoter" />
+      <a-form-item label="操作说明" name="readme">
+        <a-alert
+          description="本功能可以实现一键复制A系统的菜单到B系统的菜单，复制成功后会作为顶级目录出现在B系统的菜单功能上(注意：还需要手动给角色勾选权限才能使用)。菜单ID可以在A系统的菜单管理->修改菜单->是否展示的后面获取。"
+          type="warning"
+        />
+      </a-form-item>
+      <a-form-item label="菜单ID" name="menuId">
+        <a-input
+          allow-clear
+          placeholder="请输入菜单ID"
+          v-model:value="form.menuId"
+        />
+      </a-form-item>
+      <a-form-item label="租户ID" name="tenantId">
+        <a-input
+          allow-clear
+          placeholder="请输入租户ID"
+          v-model:value="form.tenantId"
+        />
      </a-form-item>
    </a-form>
  </ele-modal>
@@ -79,10 +96,18 @@

  // 表单验证规则
  const rules = reactive<Record<string, Rule[]>>({
-    tenantName: [
+    tenantId: [
      {
        required: true,
-        message: '请选择要克隆的模版',
+        message: '请选择要复制的租户ID',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    menuId: [
+      {
+        required: true,
+        message: '请选择要复制的菜单ID',
        type: 'string',
        trigger: 'blur'
      }
--- a/src/views/system/menu/components/delete.vue
+++ b/src/views/system/menu/components/delete.vue
@@ -0,0 +1,175 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="550"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="`批量删除菜单`"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="操作说明" name="readme">
+        <a-alert
+          description="批量删除顶级菜单目录下的所有子菜单（菜单ID可以在菜单管理->修改菜单->是否展示的后面获取）"
+          type="warning"
+        />
+      </a-form-item>
+      <a-form-item label="菜单ID" name="menuId">
+        <a-input
+          allow-clear
+          placeholder="请输入菜单ID"
+          v-model:value="form.menuId"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { isExternalLink } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { deleteParentMenu } from '@/api/system/menu';
+  import type { Menu } from '@/api/system/menu/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Menu | null;
+    // 上级菜单id
+    parentId?: number;
+    // 全部菜单数据
+    menuList: Menu[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Menu>({
+    title: '',
+    icon: '',
+    path: '',
+    component: '',
+    tenantId: undefined,
+    tenantName: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    menuId: [
+      {
+        required: true,
+        message: '请顶级菜单ID，将删除栏目下的所有子菜单',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        deleteParentMenu(form.menuId).then((msg) => {
+          message.success(msg);
+          emit('done');
+          loading.value = false;
+          updateVisible(false);
+        });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 判断是否是目录 */
+  const isDirectory = (d: Menu) => {
+    return !!d.children?.length && !d.component;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          const isExternal = isExternalLink(props.data.path);
+          const isInner = isExternalLink(props.data.component);
+          // menuType 对应的值与后端不一致在前端处理
+          const menuType =
+            props.data.menuType === 1 ? 2 : isDirectory(props.data) ? 0 : 1;
+          assignFields({
+            ...props.data,
+            menuType,
+            openType: isExternal ? 2 : isInner ? 1 : 0,
+            parentId:
+              props.data.parentId === 0 ? undefined : props.data.parentId
+          });
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.parentId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>
--- a/src/views/system/menu/components/menu-edit.vue
+++ b/src/views/system/menu/components/menu-edit.vue
@@ -184,20 +184,25 @@
            />
          </a-form-item>
          <a-form-item label="是否展示">
-            <a-switch
-              checked-children="是"
-              un-checked-children="否"
-              :checked="form.hide === 0"
-              :disabled="form.menuType === 2"
-              @update:checked="updateHideValue"
-            />
-            <a-tooltip
-              title="选择不展示只注册路由不展示在侧边栏, 比如添加页面应该选择不展示"
-            >
-              <question-circle-outlined
-                style="vertical-align: -4px; margin-left: 16px"
-              />
-            </a-tooltip>
+            <div class="flex justify-between">
+              <div class="left">
+                <a-switch
+                  checked-children="是"
+                  un-checked-children="否"
+                  :checked="form.hide === 0"
+                  :disabled="form.menuType === 2"
+                  @update:checked="updateHideValue"
+                />
+                <a-tooltip
+                  title="选择不展示只注册路由不展示在侧边栏, 比如添加页面应该选择不展示"
+                >
+                  <question-circle-outlined
+                    style="vertical-align: -4px; margin-left: 16px"
+                  />
+                </a-tooltip>
+              </div>
+              <a-tag>菜单ID：{{ form.menuId }}</a-tag>
+            </div>
          </a-form-item>
          <a-form-item
            label="选择节点"
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -33,6 +33,9 @@
            <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
              折叠全部
            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="removeBatch">
+              批量删除
+            </a-button>
            <a-button type="dashed" class="ele-btn-icon" @click="cloneMenu">
              一键克隆
            </a-button>
@@ -127,7 +130,8 @@
      :menu-list="menuData"
      @done="reload"
    />
-    <clone v-model:visible="showClone" @done="reload" />
+    <Delete v-model:visible="showRemoveBatch" @done="reload" />
+    <Clone v-model:visible="showClone" @done="reload" />
  </div>
 </template>

@@ -151,6 +155,7 @@
  import type { EleProTable } from 'ele-admin-pro/es';
  import MenuEdit from './components/menu-edit.vue';
  import MenuPlug from './components/menu-plug.vue';
+  import Delete from './components/delete.vue';
  import Clone from './components/clone.vue';
  import { listMenus, removeMenu } from '@/api/system/menu';
  import type { Menu, MenuParam } from '@/api/system/menu/model';
@@ -248,6 +253,7 @@
  const showEdit = ref(false);
  const showPlug = ref(false);
  const showClone = ref(false);
+  const showRemoveBatch = ref(false);
  const token = ref(localStorage.getItem(TOKEN_STORE_NAME));

  // 上级菜单id
@@ -297,6 +303,10 @@
    showPlug.value = true;
  };

+  const removeBatch = () => {
+    showRemoveBatch.value = true;
+  };
+
  /* 一键克隆 */
  const cloneMenu = (row?: Menu | null, id?: number) => {
    current.value = row ?? null;
--- a/src/views/system/profile/index.vue
+++ b/src/views/system/profile/index.vue
@@ -381,8 +381,8 @@ const chooseFile = (data: FileRecord) => {
    url: data.thumbnail,
    status: "done"
  });
-  form.companyLogo = data.thumbnail;
-  updateCompany(form).then(res => {
+  form.companyLogo = data.path;
+  updateCompany(form).then(() => {
    message.success("上传成功");
  });
 };