TaskSystem-admin/src/views/user_menu/edit.vue

<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="90px"
        :rules="formRules"
      >
        <!-- <el-form-item label="菜单类型:" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio :label="MenuEnum.CATALOGUE">目录</el-radio>
            <el-radio :label="MenuEnum.MENU">菜单</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="上级目录" prop="pid">
          <el-tree-select
            class="flex-1"
            v-model="formData.pid"
            :data="previousMenuList"
            clearable
            node-key="id"
            :props="{
              label: 'name',
            }"
            :default-expand-all="true"
            placeholder="请选择父级目录"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input
            v-model="formData.name"
            clearable
            placeholder="请输入菜单名称"
          />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-upload
            class="avatar-uploader"
            style="
              border: 1px dashed var(--el-border-color);
              border-radius: 6px;
              overflow: hidden;
            "
            v-model="formData.icon"
            action="https://worker-task.lihaink.cn/api/upload/image"
            :show-file-list="false"
            :data="{ cid: 1 }"
            :on-success="handleMenuIcon"
          >
            <img v-if="formData.icon" :src="formData.icon" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input
            v-model="formData.sort"
            clearable
            placeholder="请输入菜单排序"
            type="number"
          />
        </el-form-item>
        <el-form-item label="路由地址" prop="paths">
          <el-input
            v-model="formData.paths"
            clearable
            placeholder="请输入路由地址"
          />
        </el-form-item>
        <el-form-item label="路由参数" prop="params">
          <el-input
            v-model="formData.params"
            clearable
            placeholder="请输入路由参数"
          />
        </el-form-item>
        <el-form-item label="是否显示:" prop="is_show">
          <el-radio-group v-model="formData.is_show">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否禁用:" prop="is_disable">
          <el-radio-group v-model="formData.is_disable">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="userMenuEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import {
  apiUserMenuAdd,
  apiUserMenuEdit,
  apiUserMenuDetail,
} from "@/api/user_menu";
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import { MenuEnum } from "@/enums/appEnums";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");

const isDisabled = ref(false);

const handleMenuIcon = (res: any) => {
  formData.icon = res.data.uri;
};

const previousMenuList = reactive([{ id: 0, name: "顶级", children: [] }]);

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑系统菜单表" : "新增系统菜单表";
});

// 表单数据
const formData = reactive({
  id: "",
  pid: "",
  type: MenuEnum.MENU,
  name: "",
  icon: "",
  sort: 0,
  paths: "",
  params: "",
  is_show: 1,
  is_disable: 0,
});

// 表单验证
const formRules = reactive<any>({
  pid: [
    {
      required: true,
      message: "请输入上级菜单",
      trigger: ["blur"],
    },
  ],
  type: [
    {
      required: true,
      message: "请输入权限类型: M=目录，C=菜单，A=按钮",
      trigger: ["blur"],
    },
  ],
  name: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: ["blur"],
    },
  ],
  icon: [
    {
      required: true,
      message: "请输入菜单图标",
      trigger: ["blur"],
    },
  ],
  sort: [
    {
      required: true,
      message: "请输入菜单排序",
      trigger: ["blur"],
    },
  ],
  paths: [
    {
      required: true,
      message: "请输入路由地址",
      trigger: ["blur"],
    },
  ],
  params: [
    {
      required: false,
      message: "请输入路由参数",
      trigger: ["blur"],
    },
  ],
  is_show: [
    {
      required: true,
      message: "请输入是否显示",
      trigger: ["blur"],
    },
  ],
  is_disable: [
    {
      required: true,
      message: "请输入是否禁用",
      trigger: ["blur"],
    },
  ],
});

// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await apiUserMenuDetail({
    id: row.id,
  });
  setFormData(data);
};

// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate();
  const data = { ...formData };
  mode.value == "edit"
    ? await apiUserMenuEdit(data)
    : await apiUserMenuAdd(data);
  popupRef.value?.close();
  emit("success");
};

//打开弹窗
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color) !important;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  /* transition: var(--el-transition-duration-fast); */
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>