zsxt_nbzs_h5/Web/src/pages/system/menu/index.vue

<template>
  <container>
    <br />
    <a-alert type="error">
      <template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
    </a-alert>
    <br />
    <a-card :bordered="false">
      <yo-table :columns="columns" :load-data="loadData" ref="table">
        <Auth auth="sysMenu:add" slot="operator">
          <a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
        </Auth>
        <span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
        <span slot="icon" slot-scope="text">
          <div v-if="text">
            <a-icon :type="text" />
          </div>
        </span>
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
            <Auth auth="sysMenu:add" v-if="record.type < 2">
              <a @click="onOpen('add-form', record)">新增子菜单</a>
            </Auth>
            <Auth auth="sysMenu:edit">
              <a @click="onOpen('edit-form', record)">编辑</a>
            </Auth>
            <Auth auth="sysMenu:delete">
              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
                <a>删除</a>
              </a-popconfirm>
            </Auth>
          </yo-table-actions>
        </span>
      </yo-table>
    </a-card>
    <br />
    <add-form @ok="onReloadData" ref="add-form" />
    <edit-form @ok="onReloadData" ref="edit-form" />
  </container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';

export default {
  components: {
    AddForm,
    EditForm,
  },
  data() {
    return {
      query: {},
      columns: [
        {
          title: '菜单名称',
          width: '220px',
          dataIndex: 'name',
        },
        {
          title: '菜单类型',
          width: '100px',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '图标',
          width: '100px',
          dataIndex: 'icon',
          scopedSlots: { customRender: 'icon' },
        },
        {
          title: '前端组件',
          width: '220px',
          dataIndex: 'component',
          ellipsis: true,
        },
        {
          title: '权限标识',
          width: '220px',
          dataIndex: 'permission',
          ellipsis: true,
        },
        {
          title: '排序',
          width: '100px',
          dataIndex: 'sort',
        },
      ],
      codes: [
        {
          code: 'menu_type',
          values: [],
        },
        {
          code: 'menu_weight',
          values: [],
        },
        {
          code: 'open_type',
          values: [],
        },
      ],
    };
  },
  created() {
    this.onLoadCodes();

    const flag = this.$auth({
      sysApp: [['edit'], ['delete']],
    });

    if (flag) {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      });
    }
  },
  methods: {
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return this.$api
        .getMenuList({
          ...params,
          ...this.query,
        })
        .then((res) => {
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 加载字典数据时的必要方法
     */
    onLoadCodes() {
      this.$api
        .$queue([
          this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
          this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
          this.$api.sysDictTypeDropDownWait({ code: 'open_type' }),
        ])
        .then(([menuType, menuWerght, openType]) => {
          this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
          this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
          this.codes.find((p) => p.code === 'open_type').values = openType.data;
        });
    },
    bindCodeValue(code, name) {
      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    /**
     * 有编辑新增功能的必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
      this.$refs[formName].onOpen(record);
    },

    onResult(success, successMessage) {
      if (success) {
        this.$message.success(successMessage);
        this.onReloadData();
      }
      this.$refs.table.onLoaded();
    },

    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api.sysMenuDelete(record).then(({ success }) => {
        this.onResult(success, '删除成功');
      });
    },
  },
};
</script>