sl-sfy-safety/src/views/system/menu/MenuForm.vue

<template>
  <el-form
    :model="formParams"
    :rules="rules"
    ref="formRef"
    label-placement="left"
    :label-width="100"
    require-mark-placement="left"
  >
    <el-divider border-style="dashed" class="mt-0 mb-10">基本设置</el-divider>

    <el-form-item label="类型" prop="menuType">
      <el-radio-group v-model="formParams.menuType" name="menuTypeGroup">
        <el-radio-button :label="0">目录</el-radio-button>
        <el-radio-button :label="1">菜单</el-radio-button>
        <el-radio-button :label="2">按钮</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item :label="`上级${getTypeLable}`" prop="parentId">
      <el-tree-select
        rowKey="key"
        :data="getPermissionList"
        clearable
        v-model="formParams.parentId"
      />
    </el-form-item>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item :label="`${getTypeLable}名称`" prop="menuName">
          <el-input :placeholder="`${getTypeLable}名称`" v-model="formParams.menuName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="`${getTypeLable}图标`" prop="icon">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>
                  {{ getTypeLable }}图标，填写图标组件名称，需在 `src\router\router-icons.ts`
                  中导入并映射
                </template>
              </el-tooltip>
              <span>{{ getTypeLable }}图标</span>
            </div>
          </template>
          <el-input :placeholder="`${getTypeLable}图标映射名称`" v-model="formParams.icon" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item prop="routeUrl" v-if="formParams.menuType != 2">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content> 路由地址，如：user </template>
              </el-tooltip>
              <span>路由地址</span>
            </div>
          </template>
          <el-input placeholder="路由地址" v-model="formParams.routeUrl" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="routeName" v-if="formParams.menuType != 2">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>
                  对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
                </template>
              </el-tooltip>
              <span>路由名称</span>
            </div>
          </template>
          <el-input placeholder="路由名称" v-model="formParams.routeName" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24" v-if="formParams.menuType > 0">
      <el-col :span="12">
        <el-form-item prop="permissionCode">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content> 权限标识，也是权限字符，比如 `system:menu:list` </template>
              </el-tooltip>
              <span>权限标识</span>
            </div>
          </template>
          <el-input placeholder="权限标识 system:user:add" v-model="formParams.permissionCode" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="permissionName">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>权限名称 对应 权限标识 `中文名称`</template>
              </el-tooltip>
              <span>权限名称</span>
            </div>
          </template>
          <el-input placeholder="权限名称" v-model="formParams.permissionName" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col v-if="formParams.menuType != 2" :span="12">
        <el-form-item prop="redirect">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content
                  >默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
                >
              </el-tooltip>
              <span>默认路由</span>
            </div>
          </template>
          <el-input placeholder="默认跳转路由地址" v-model="formParams.redirect" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示排序" prop="orderNum">
          <el-input-number placeholder="显示排序" v-model="formParams.orderNum" class="w-full" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24" v-if="formParams.menuType != 2">
      <el-col>
        <el-form-item prop="component">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>
                  访问的组件路径，如：`/system/menu/menu`，默认在`views`目录下，默认 `LAYOUT`
                  如果是多级菜单 `ParentLayout`
                </template>
              </el-tooltip>
              <span>组件路径</span>
            </div>
          </template>
          <el-input placeholder="组件路径" v-model="formParams.component" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider border-style="dashed" class="mb-10">功能设置</el-divider>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item prop="status">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content> 选择停用则路由将不会出现在侧边栏，也不能被访问 </template>
              </el-tooltip>
              <span>{{ getTypeLable }}状态</span>
            </div>
          </template>
          <el-radio-group v-model="formParams.status" name="statusGroup">
            <el-radio-button :label="0">正常</el-radio-button>
            <el-radio-button :label="1">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formParams.menuType != 2">
        <el-form-item label="根路由" prop="isRoot">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content
                  >如果使用 `顶部混合菜单`，必须传 true，否则左侧会显示异常</template
                >
              </el-tooltip>
              <span>根路由</span>
            </div>
          </template>
          <el-switch v-model="formParams.isRoot" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24" v-if="formParams.menuType != 2">
      <el-col :span="12">
        <el-form-item prop="isVisible">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>选择隐藏则路由将不会出现在侧边栏，但仍然可以访问</template>
              </el-tooltip>
              <span>显示状态</span>
            </div>
          </template>
          <el-radio-group v-model="formParams.isVisible" name="isVisibleGroup">
            <el-radio-button :label="0">显示</el-radio-button>
            <el-radio-button :label="1">隐藏</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="isCache">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content
                  >选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致</template
                >
              </el-tooltip>
              <span>是否缓存</span>
            </div>
          </template>
          <el-radio-group v-model="formParams.isCache" name="isCacheGroup">
            <el-radio-button :label="0">缓存</el-radio-button>
            <el-radio-button :label="1">不缓存</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24" v-if="formParams.menuType != 2">
      <el-col :span="12">
        <el-form-item label="是否外链" prop="isFrame">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content>选择是外部地址需以`http(s)://`开头</template>
              </el-tooltip>
              <span>是否外链</span>
            </div>
          </template>
          <el-radio-group v-model="formParams.isFrame" name="isFrameGroup">
            <el-radio-button :label="0">是</el-radio-button>
            <el-radio-button :label="1">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="简化路由" prop="alwaysShow">
          <template #label>
            <div class="flex items-center">
              <el-tooltip trigger="hover">
                <el-icon :size="18" class="mr-1 text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </el-icon>
                <template #content
                  >取消自动计算根路由模式
                  开启之后，当菜单子菜单只有1个的时候，会直接显示子菜单</template
                >
              </el-tooltip>
              <span>简化路由</span>
            </div>
          </template>
          <el-switch v-model="formParams.alwaysShow" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="formParams.menuType != 2">
      <el-col>
        <el-form-item
          label="外部地址"
          prop="frameSrc"
          v-if="formParams.menuType != 2 && formParams.isFrame === 0"
        >
          <el-input placeholder="内联外部地址" v-model="formParams.frameSrc" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item v-if="isShowSubmit">
      <el-button type="primary" :loading="subLoading" @click="formSubmit">保存修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import { addMenu, editMenu } from '@/api/system/menu';
  import { QuestionCircleOutlined } from '@vicons/antd';
  import { replaceParams } from '@/utils/helper/treeHelper';
  import { cloneDeep } from 'lodash-es';

  const emit = defineEmits(['change']);

  const props = defineProps({
    permissionList: {
      type: Array,
      defalut: () => [],
    },
    isShowSubmit: {
      type: Boolean,
      defalut: false,
    },
  });

  const message = ElMessage;
  const formRef: any = ref(null);
  const subLoading = ref(false);

  const defaultValueRef = () => ({
    id: null,
    parentId: null,
    activeMenu: '',
    affix: false,
    alwaysShow: false,
    icon: '',
    isRoot: 1,
    isCache: 1,
    isFrame: 1,
    isVisible: 0,
    menuName: '',
    menuType: 0,
    openType: 1,
    status: 0,
    orderNum: null,
    permissionCode: '',
    permissionName: '',
    query: '',
    routeUrl: '',
    routeName: '',
    redirect: '',
    component: '', //目录默认 LAYOUT 多级菜单目录 设置 ParentLayout
  });

  const formParams: any = ref(defaultValueRef());

  const getPermissionList = computed(() => {
    return replaceParams(cloneDeep(props.permissionList || []), 'label', 'key');
  });

  const getTypeLable = computed(() => {
    const typsStr = ['目录', '菜单', '按钮'];
    return typsStr[formParams.value.menuType];
  });

  const rules = {
    menuName: {
      required: true,
      message: `${getTypeLable.value}名称`,
      trigger: 'blur',
    },
    routeUrl: {
      required: true,
      message: '路由地址不能为空',
      trigger: 'blur',
    },
    component: {
      required: true,
      message: '组件路径不能为空',
      trigger: 'blur',
    },
    routeName: {
      required: true,
      message: '路由名称不能为空',
      trigger: 'blur',
    },
    frameSrc: {
      required: true,
      message: '外部地址不能为空',
      trigger: 'blur',
    },
  };

  function setData(data) {
    formParams.value = data;
    formRef.value?.resetFields();
  }

  function formSubmit() {
    subLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        if (!formParams.value.id) {
          addMenu(formParams.value)
            .then(() => {
              subLoading.value = false;
              message.success('添加成功');
              handleReset();
              emit('change');
            })
            .catch(() => {
              subLoading.value = false;
            });
        } else {
          editMenu(formParams.value)
            .then(() => {
              subLoading.value = false;
              message.success('修改成功');
              handleReset();
              emit('change');
            })
            .catch(() => {
              subLoading.value = false;
            });
        }
      } else {
        subLoading.value = false;
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.resetFields();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  defineExpose({
    formSubmit,
    handleReset,
    setData,
  });
</script>

<style lang="scss" sctep>
  .submit-form-item {
    margin-left: 100px;
  }
</style>