remuneration/src/views/system/menu/index.vue

<template>
  <div class="pa-3 white">
    <m-table
      v-loading="loading"
      row-key="id"
      :items="items"
      :headers="headers"
      :page-size="total"
      :page-current="1"
      :total="total"
      :default-sort="{ prop: 'sort', order: 'ascending' }"
    >
      <template #actions-header>
        操作
        <m-button class="ml-3" type="orange" icon="el-icon-plus" size="small" @click="onAdd">
          新增
        </m-button>
      </template>
      <template v-slot:hidden="{ row }">
        <el-tag
          size="small"
          :type="row.hidden ? 'success' : 'danger'"
          text-color="white"
        >
          {{ row.hidden ? '已开启' : '已关闭' }}
        </el-tag>
      </template>
      <template #icon="scope">
        <i class="mdi" :class="scope.row.icon"></i>
      </template>
      <template #actions="scope">
        <m-button type="primary" class="pa-0" text @click="onEdit(scope.row)">编辑</m-button>
        <m-button type="primary" class="pa-0" text @click="onCopy(scope.row)">复制</m-button>
        <m-button type="danger" class="pa-0" text @click="onDelete(scope.row)">删除</m-button>
      </template>
    </m-table>
    <menuEdit ref="menuEdit" :title="title" @refresh="initPage"></menuEdit>
  </div>
</template>

<script>
import menuEdit from './menuEdit.vue'
import { getRouters, getRoutersDetail } from '@/api/menu'
export default {
  name: 'route-manage',
  components: { menuEdit },
  data () {
    return {
      headers: [
        { label: '菜单名称', prop: 'label', width: 300 },
        { label: '图标', prop: 'icon', width: 50 },
        { label: '排序', prop: 'sort', width: 50 },
        { label: '状态', prop: 'hidden', width: 100, align: 'center' },
        { label: '组件路径', prop: 'component', width: 300 },
        { label: '权限标识', prop: 'code', width: 300 },
        { label: '备注', prop: 'remark' },
        { label: '操作', prop: 'actions', width: 200, fixed: 'right' }
      ],
      items: [],
      showParents: false,
      show: false,
      title: '',
      header: [],
      total: 0,
      orders: [],
      loading: true,
      itemData: {},
      uploadLoading: false,
      downloadLoading: false
    }
  },

  created () {
    this.initPage()
  },
  methods: {
    async initPage () {
      this.loading = true
      try {
        const { data } = await getRouters({})
        this.items = data
        this.total = data.length
        this.loading = false
      } catch (error) {
        this.$message.error(error)
      }
    },
    onAdd () {
      this.title = '添加菜单'
      this.itemData = {}
      this.$refs.menuEdit.open({
        parentId: 0,
        label: null,
        type: 0,
        path: null,
        component: null,
        name: null,
        code: null,
        sort: 0,
        hidden: 1,
        keepAlive: true,
        panorama: false
      }, this.items, null)
    },
    async onEdit ({ id }) {
      try {
        const { data } = await getRoutersDetail({ id })
        this.title = '编辑菜单'
        this.itemData = data
        const meta = JSON.parse(data.metastr)
        this.$refs.menuEdit.open({
          parentId: data.parentId,
          label: data.label,
          type: data.type,
          path: data.path,
          component: data.component,
          name: data.name,
          icon: data.icon,
          code: data.code,
          sort: data.sort,
          hidden: data.hidden,
          window: meta?.window ?? false,
          keepAlive: meta?.keepAlive ?? false,
          panorama: meta?.panorama ?? false
        }, this.items, data.id)
      } catch (error) {
        this.$message.error(error)
      }
    },
    async onCopy ({ id }) {
      try {
        const { data } = await getRoutersDetail({ id })
        this.title = '添加菜单'
        this.itemData = data
        const meta = JSON.parse(data.metastr)
        this.$refs.menuEdit.open({
          parentId: data.parentId,
          label: data.label,
          type: data.type,
          path: data.path,
          component: data.component,
          name: data.name,
          icon: data.icon,
          code: data.code,
          sort: data.sort,
          hidden: data.hidden,
          window: meta?.window ?? false,
          keepAlive: meta?.keepAlive ?? false
        }, this.items, null)
      } catch (error) {
        this.$message.error(error)
      }
    },
    onDelete (item) {
      this.$confirm(`是否确定删除该选项 ${item.label} 包括所以子项`, '提示')
        .then(async () => {
          try {
            await this.$store.dispatch('menu/deleteMenu', { id: item.id })
            this.$message.success('删除成功')
            this.initPage()
          } catch (error) {
            this.$message.error(error)
          }
        })
        .catch(_ => {})
    },
    async handleCopy ({ id }) {
      try {
        const { data } = await getRoutersDetail({ id })
        const { id: _id, ...obj } = data
        this.title = '复制'
        this.show = true
        this.itemData = obj
      } catch (error) {
        this.$message.error(error)
      }
    }
    // 导出菜单 数据有问题
    // async exportMenu () {
    //   const date = new Date()
    //   const time = date.toLocaleString()
    //   try {
    //     this.downloadLoading = true
    //     const { data } = await exportMenu()
    //     const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
    //     FileSaver.saveAs(blob, `菜单${time}`)
    //   } catch (error) {
    //     this.$message.error(error)
    //   } finally {
    //     this.downloadLoading = false
    //   }
    // },
    // // 导入菜单
    // async importMenu (file) {
    //   // console.log(file)
    //   const formData = new FormData()
    //   formData.append('file', file)
    //   this.uploadLoading = true
    //   try {
    //     await importMenu(formData)
    //     this.$message.success('导入成功')
    //   } catch (error) {
    //     this.$message.error(error)
    //   } finally {
    //     this.uploadLoading = false
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.mdi {
  font-size: 1.5em;
}
</style>