修改菜单

2023-08-09 14:37:16 +08:00
parent f2251e6c65
commit b38fd5ee11
12 changed files with 137 additions and 63 deletions
--- a/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
@@ -15,16 +15,16 @@
      <a-form :model="formModel"
              ref="formRef"
              label-align="right"
-              :style="{ width: '440px' }"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 19 }"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        <!-- 上级菜单 -->
        <a-form-item field="parentId" label="上级菜单">
-          <menu-tree-selector v-model="formModel.parentId"
-                              :disabled="!!(isAddHandle && formModel.id)" />
+          <menu-tree-selector v-model:model-value="formModel.parentId"
+                              :disabled="formModel.type === MenuTypeEnum.PARENT_MENU.value" />
        </a-form-item>
-        <!-- 名称 -->
+        <!-- 菜单名称 -->
        <a-form-item field="name" label="菜单名称">
          <a-input v-model="formModel.name" placeholder="请输入菜单名称" />
        </a-form-item>
@@ -35,7 +35,9 @@
                         :options="toOptions(MenuTypeEnum)" />
        </a-form-item>
        <!-- 菜单图标 -->
-        <a-form-item field="icon" label="菜单图标">
+        <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
+                     field="icon"
+                     label="菜单图标">
          <icon-picker v-model:icon="formModel.icon">
            <template #iconSelect>
              <a-input v-model="formModel.icon" placeholder="请选择菜单图标" />
@@ -43,19 +45,26 @@
          </icon-picker>
        </a-form-item>
        <!-- 菜单权限 -->
-        <a-form-item field="permission" label="菜单权限">
+        <a-form-item v-if="formModel.type === MenuTypeEnum.FUNCTION.value"
+                     field="permission"
+                     label="菜单权限">
          <a-input v-model="formModel.permission"
                   placeholder="菜单权限 infra:system-menu:query"
                   allow-clear />
        </a-form-item>
        <!-- 外链地址 -->
-        <a-form-item field="path" label="外链地址">
+        <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
+                     field="path"
+                     label="外链地址"
+                     tooltip="输入组件名称后则不会生效">
          <a-input v-model="formModel.path"
                   placeholder="外链地址与组件名称二选一"
                   allow-clear />
        </a-form-item>
        <!-- 组件名称 -->
-        <a-form-item field="component" label="组件名称">
+        <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
+                     field="component"
+                     label="组件名称">
          <a-input v-model="formModel.component"
                   placeholder="路由组件名称"
                   allow-clear />
@@ -67,14 +76,20 @@
                          :style="{ width: '120px' }"
                          allow-clear />
        </a-form-item>
-        <!-- 可见状态 -->
-        <a-form-item field="type" label="可见状态">
+        <!-- 是否可见 -->
+        <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
+                     field="type"
+                     label="是否可见"
+                     tooltip="选择隐藏后不会在菜单以及 tab 中显示 但是可以访问">
          <a-radio-group type="button"
                         v-model="formModel.visible"
                         :options="toOptions(MenuVisibleEnum)" />
        </a-form-item>
-        <!-- 缓存状态 -->
-        <a-form-item field="type" label="缓存状态">
+        <!-- 是否缓存 -->
+        <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
+                     field="type"
+                     label="是否缓存"
+                     tooltip="选择缓存后则会使用 keep-alive 缓存组件">
          <a-radio-group type="button"
                         v-model="formModel.cache"
                         :options="toOptions(MenuCacheEnum)" />
@@ -91,7 +106,7 @@
 </script>

 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, watch, watchEffect } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
  import formRules from '../type/form.rules';
@@ -100,6 +115,7 @@
  import IconPicker from '@sanqi377/arco-vue-icon-picker';
  import MenuTreeSelector from '@/views/system/menu/components/menu-tree-selector.vue';
  import { createMenu, updateMenu } from '@/api/system/menu';
+  import { keysIn } from 'lodash';

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();
@@ -107,28 +123,39 @@
  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);

+  const defaultForm = () => {
+    return {
+      id: undefined,
+      parentId: 0,
+      name: undefined,
+      type: MenuTypeEnum.PARENT_MENU.value,
+      permission: undefined,
+      sort: 10,
+      visible: MenuVisibleEnum.SHOW.value,
+      cache: MenuCacheEnum.SHOW.value,
+      icon: undefined,
+      path: undefined,
+      component: undefined,
+    };
+  };
+
  const formRef = ref<any>();
-  const formModel = reactive<Record<string, any>>({
-    id: undefined,
-    parentId: undefined,
-    name: undefined,
-    type: undefined,
-    permission: undefined,
-    sort: undefined,
-    visible: undefined,
-    cache: undefined,
-    icon: undefined,
-    path: undefined,
-    component: undefined,
-  });
+  const formModel = reactive<Record<string, any>>(defaultForm());

  const emits = defineEmits(['added', 'updated']);

+  // 选择根目录 parentId就是 0
+  watch(() => formModel.type, () => {
+    if (formModel.type === MenuTypeEnum.PARENT_MENU.value) {
+      formModel.parentId = 0;
+    }
+  });
+
  // 打开新增
  const openAdd = (record: any) => {
    title.value = '添加菜单';
    isAddHandle.value = true;
-    renderForm(record);
+    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
  };

@@ -136,12 +163,10 @@
  const openUpdate = (record: any) => {
    title.value = '修改菜单';
    isAddHandle.value = false;
-    renderForm(record);
+    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
  };

-  defineExpose({ openAdd, openUpdate });
-
  // 渲染表单
  const renderForm = (record: any) => {
    Object.keys(formModel).forEach(k => {
@@ -149,6 +174,8 @@
    });
  };

+  defineExpose({ openAdd, openUpdate });
+
  // 确定
  const handlerOk = async () => {
    setLoading(true);
@@ -161,14 +188,14 @@
      if (isAddHandle.value) {
        // 新增
        await createMenu(formModel as any);
-        emits('added', { ...formModel });
+        emits('added');
      } else {
        // 修改
        await updateMenu(formModel as any);
-        emits('updated', { ...formModel });
+        emits('updated');
      }
      // 清空
-      // handlerClear();
+      handlerClear();
    } catch (e) {
      return false;
    } finally {
@@ -185,7 +212,6 @@
  const handlerClear = () => {
    setLoading(false);
    setVisible(false);
-    renderForm({});
  };

 </script>
--- a/orion-ops-ui/src/views/system/menu/components/menu-table.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
@@ -97,7 +97,8 @@
            {{ getEnumValue(record.status, MenuStatusEnum) }}
          </a-tag>
          <!-- 显示状态 -->
-          <a-tag :color="getEnumValue(record.visible, MenuVisibleEnum,'color')">
+          <a-tag v-if="(record.visible || record.visible === 0) && record.type !== MenuTypeEnum.FUNCTION.value"
+                 :color="getEnumValue(record.visible, MenuVisibleEnum,'color')">
            {{ getEnumValue(record.visible, MenuVisibleEnum) }}
          </a-tag>
        </a-space>
@@ -110,7 +111,7 @@
                    size="mini"
                    v-if="record.type !== MenuTypeEnum.FUNCTION.value"
                    v-permission="['infra:system-menu:create']"
-                    @click="emits('openAdd', { id: record.id, parentId: record.id })">
+                    @click="emits('openAdd', { parentId: record.id })">
            新增
          </a-button>
          <!-- 修改 -->
@@ -192,13 +193,13 @@
  };

  // 添加后回调
-  const addedCallback = (record: any) => {
-    console.log('addCallback', record);
+  const addedCallback = () => {
+    loadMenuData();
  };

  // 更新后回调
-  const updatedCallback = (record: any) => {
-    console.log('updateCallback', record);
+  const updatedCallback = () => {
+    loadMenuData();
  };

  defineExpose({
--- a/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue
@@ -1,11 +1,10 @@
 <template>
-  <a-tree-select :default-value="modelValue"
+  <a-tree-select v-model:model-value="value"
                 :data="treeData"
                 :disabled="disabled"
                 :allow-search="true"
                 :filter-tree-node="filterTreeNode"
-                 placeholder="请选择上级菜单"
-                 @change="onChange" />
+                 placeholder="请选择上级菜单" />
 </template>

 <script lang="ts">
@@ -16,12 +15,23 @@

 <script lang="ts" setup>
  import { useMenuStore } from '@/store';
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    modelValue: Number,
+    disabled: Boolean
+  });

-  defineProps(['modelValue', 'disabled']);
  const emits = defineEmits(['update:modelValue']);
-  const onChange = (e: any) => {
-    emits('update:modelValue', e);
-  };
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });

  // 树数据
  const menuStore = useMenuStore();
--- a/orion-ops-ui/src/views/system/menu/index.vue
+++ b/orion-ops-ui/src/views/system/menu/index.vue
@@ -6,8 +6,8 @@
                @openUpdate="(e) => modal.openUpdate(e)" />
    <!-- 添加修改框 -->
    <menu-form-modal ref="modal"
-                     @added="(e) => table.addedCallback(e)"
-                     @updated="(e) => table.updatedCallback(e)" />
+                     @added="() => table.addedCallback()"
+                     @updated="() => table.updatedCallback()" />
  </div>
 </template>

--- a/orion-ops-ui/src/views/system/menu/type/form.rules.ts
+++ b/orion-ops-ui/src/views/system/menu/type/form.rules.ts
@@ -1,11 +1,44 @@
 import { FieldRule } from '@arco-design/web-vue';

+export const parentId = [{
+  required: true,
+  message: '请选择父菜单'
+}] as FieldRule[];
+
 export const name = [{
  required: true,
+  message: '请输入菜单名称'
+}, {
+  maxLength: 32,
+  message: `菜单名称长度不能大于32位`
+}] as FieldRule[];

+export const type = [{
+  required: true,
+  message: '请选择菜单类型'
+}] as FieldRule[];
+
+export const sort = [{
+  required: true,
+  message: '请输入菜单排序'
+}] as FieldRule[];
+
+export const visible = [{
+  required: true,
+  message: '请选择是否可见'
+}] as FieldRule[];
+
+export const cache = [{
+  required: true,
+  message: '请选择是否缓存'
 }] as FieldRule[];


 export default {
-  name
+  parentId,
+  name,
+  type,
+  sort,
+  visible,
+  cache,
 } as Record<string, FieldRule | FieldRule[]>;