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

@@ -0,0 +1,194 @@
+<template>
+  <container>
+    <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: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>