admin-cms/src/views/menu/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="index">
        <el-col :span="24" class="top">
          <topInfo :topTitle="pageTitle"></topInfo>
          <el-col :span="24" class="topAdd">
            <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i>添加菜单</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="main">
          <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :usePage="false"></data-table>
        </el-col>
      </el-col>
    </el-row>
    <el-drawer title="菜单" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
      <el-form :model="form" size="mini" label-width="120px" style="padding:10px">
        <el-form-item label="名称" prop="role_name">
          <el-input v-model="form.role_name"></el-input>
        </el-form-item>
        <el-form-item label="菜单分级" prop="type">
          <el-select v-model="form.type" @change="clearCode">
            <el-option value="1" label="一级菜单"></el-option>
            <el-option value="2" label="二级菜单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="code" v-if="form.type == 2">
          <el-select v-model="form.code" @change="updateView">
            <el-option v-for="(i, index) in list" :key="index" :label="i.role_name" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="drawerSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import topInfo from '@/layout/public/top.vue';
import dataTable from '@/components/data-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('role');
export default {
  name: 'index',
  props: {},
  components: {
    topInfo,
    dataTable,
  },
  data: () => ({
    drawer: false,
    form: {},
    drawerIsNew: true,
    opera: [
      {
        label: '编辑',
        icon: 'el-icon-edit',
        method: 'edit',
      },
      {
        label: '删除',
        icon: 'el-icon-delete',
        method: 'delete',
        confirm: true,
      },
    ],
    fields: [
      { label: '名称', prop: 'role_name', model: 'role_name' },
      { label: '路由', prop: 'url', model: 'url' },
    ],
    list: [],
    total: 0,
  }),
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'create', 'update', 'delete']),
    // 查询列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ ...info, category: this.category });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data.reverse());
        this.$set(this, `total`, res.total);
      }
    },
    // 添加
    toAdd() {
      this.drawer = true;
    },
    // 创建
    async drawerSave({ data = this.form, isNew = this.drawerIsNew }) {
      let res;
      let msg;
      if (isNew) {
        res = await this.create(data);
        msg = '创建成功';
      } else {
        res = await this.update(data);
        msg = '修改成功';
      }
      if (this.$checkRes(res, msg, res.errmsg)) {
        this.handleClose();
        this.search();
      }
    },
    // 修改
    toEdit({ data }) {
      if (data.code) data.type = '2';
      this.$set(this, 'form', data);
      this.drawer = true;
      this.drawerIsNew = false;
    },
    // 删除
    async toDelete({ data }) {
      const res = await this.delete(data.id);
      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
    },
    handleClose() {
      this.drawer = false;
      this.form = {};
      this.drawerIsNew = true;
    },
    clearCode(data) {
      if (data == '1') this.form.code = undefined;
    },
    updateView() {
      this.$forceUpdate();
    },
  },
  computed: {
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>
<style lang="less" scoped>
.topAdd {
  padding: 10px 20px;
  text-align: right;
}
.main {
  padding: 0 20px;
}
</style>