index.vue

<template>
  <div class="container">
    <direct-search
      ref="form"
      :label-position="'right'"
      :forms="searchList"
      :style="{ textAlign: 'left' }"
      @handleSearch="handleFormSearch"
    />
    <el-table-self
      style="margin-top: 20px"
      ref="table"
      default-expand-all
      row-key="id"
      :table-data="tableData"
      :columns="columns"
      :list-loading="listLoading"
    />
    <dialog-form
      width="750px"
      :close-modal="false"
      ref="dialog"
      :title="title"
      :form-edit="formEdit"
      :form-data="formData"
      @handleConfirm="handleConfirm"
    ></dialog-form>
  </div>
</template>

<script>
import paginationMixin from "@/components/TabComponents/mixin"
import { getMenuPage, delMenu, addMenu } from "@/api/menu"
import { translateListToTree } from "@/utils/handleRoutes"

export default {
  name: "menuIndex",
  data() {
    const menuTypeList = [
      {
        label: "菜单",
        value: 2,
      },
      {
        label: "按钮",
        value: 3,
      },
    ]
    return {
      listLoading: false,
      isAdd: false,
      id: null,
      // 查询列表
      searchList: [
        {
          label: "菜单名称",
          type: "input",
          prop: "name",
          placeholder: "请输入菜单名称",
        },
        {
          type: "button",
          value: "查询",
          icon: "el-icon-search",
        },
        {
          type: "button",
          color: "primary",
          icon: "el-icon-plus",
          value: "添加",
          func: this.handleAdd,
        },
      ],
      columns: [
        {
          label: "菜单名称",
          minWidth: 200,
          value: "name",
        },
        {
          label: "菜单类型",
          minWidth: 100,
          value: "menuType",
          formatter(row) {
            let obj = menuTypeList.find((_) => _.value === row.menuType)
            return (obj && obj.label) || ""
          },
        },
        {
          label: "路由名称",
          minWidth: 200,
          value: "route",
        },
        {
          label: "path",
          minWidth: 120,
          value: "path",
        },
        {
          label: "页面路径",
          minWidth: 180,
          value: "component",
        },
        {
          label: "排序",
          minWidth: 100,
          value: "sortIdx",
        },
        {
          label: "缓存",
          minWidth: 60,
          value: "keepAlive",
          formatter({ keepAlive }) {
            return keepAlive ? "是" : "否"
          },
        },
        {
          label: "备注",
          minWidth: 120,
          value: "note",
        },
        {
          label: "操作",
          width: 280,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.handleAdd,
              formatter(row) {
                return {
                  label: "新增",
                  type: "primary",
                }
              },
            },
            {
              func: this.handleEdit,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "primary",
                }
              },
            },
            {
              func: this.handleDel,
              formatter(row) {
                return {
                  label: "删除",
                  type: "warning",
                }
              },
            },
          ],
        },
      ],
      tableData: [],
      cacheForm: {},
      title: "",
      formData: [
        {
          type: "input",
          label: "菜单名称",
          prop: "name",
          placeholder: "请输入菜单名称",
          rules: [{ required: true, message: "请输入菜单名称" }],
          spanCount: 12,
        },
        {
          type: "select",
          label: "菜单类型",
          prop: "menuType",
          placeholder: "请选择菜单类型",
          spanCount: 12,
          rules: [{ required: true, message: "请选择菜单类型" }],
          opts: menuTypeList,
        },
        {
          type: "input",
          label: "路由名称",
          prop: "route",
          placeholder: "user",
          spanCount: 12,
          rules: [{ required: true, message: "请输入路由名称" }],
        },
        {
          type: "input",
          label: "path",
          prop: "path",
          placeholder: "/index",
          spanCount: 12,
          rules: [{ required: true, message: "请输入path" }],
        },
        {
          type: "input",
          label: "页面路径",
          prop: "component",
          spanCount: 12,
          placeholder: "index/index",
        },
        {
          type: "input",
          label: "排序",
          prop: "sortIdx",
          placeholder: "01或者15",
          spanCount: 12,
          rules: [{ required: true, message: "请输入排序" }],
        },
        {
          type: "select",
          label: "是否缓存",
          prop: "keepAlive",
          placeholder: "请选择是否缓存",
          spanCount: 12,
          opts: [
            {
              label: "是",
              value: true,
            },
            {
              label: "否",
              value: false,
            },
          ],
        },
        {
          type: "input",
          label: "图标",
          prop: "icon",
          spanCount: 12,
          placeholder: "user",
        },
        {
          type: "input",
          label: "备注",
          prop: "note",
          spanCount: 12,
          placeholder: "请输入备注",
        },
      ],
      formEdit: {},
    }
  },
  mixins: [paginationMixin],
  methods: {
    handleDel(row) {
      this.$confirm(`是否删除【${row.name}】?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMenu(row.id).then((res) => {
            if (res.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              this.handleSearch()
            }
          })
        })
        .catch(() => {})
    },
    handleAdd({ id }) {
      this.title = "新增"
      this.formEdit = { parentId: id, keepAlive: false }
      this.$refs.dialog.open()
    },
    handleEdit({
      id,
      name,
      menuType,
      route,
      path,
      sortIdx,
      icon,
      note,
      parentId,
      component,
      keepAlive,
    }) {
      this.title = "编辑"
      this.formEdit = {
        id,
        name,
        menuType,
        route,
        path,
        sortIdx,
        icon,
        note,
        parentId,
        component,
        keepAlive,
      }
      this.$refs.dialog.open()
    },
    handleConfirm(form) {
      const data = Object.assign({}, form)
      const msg = data.id ? "编辑成功" : "新增成功"
      addMenu(data).then((res) => {
        if (res.code === 1) {
          this.$message.success(msg)
          this.handleSearch()
          this.$refs.dialog.close()
        }
      })
    },
    // 查询
    handleFormSearch(form) {
      this.pageIndex = 1
      this.handleSearch(form)
    },
    handleSearch(form) {
      const params = Object.assign(this.cacheForm, form)
      this.listLoading = true
      for (let key in params) {
        if (params[key] === "") {
          delete params[key]
        }
      }
      params.current = this.pageIndex
      params.size = 100
      getMenuPage(params).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData =
            translateListToTree(
              d.records.sort((a, b) => {
                return a.sortIdx - b.sortIdx
              })
            ) || []
          this.total = Number(d.total)
        }
      })
    },
  },
  created() {
    this.handleFormSearch()
  },
}
</script>