userjuris-cms/src/views/permission/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
        <el-col :span="24" class="container info">
          <el-col :span="24" class="list">
            <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @query="search"></data-table>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="增加权限" :visible.sync="dialog" width="50%" @close="toClose" :destroy-on-close="true">
      <data-form :data="form" :fields="formFields" @save="turnSave">
        <template #custom="{item, form}">
          <el-checkbox-group v-model="form.menus">
            <el-checkbox v-for="(i, index) in menuList" :key="index" :label="i.id">{{ i.role_name }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from '@c/common/breadcrumb.vue';
import dataTable from '@/components/frame/filter-page-table.vue';
import dataForm from '@/components/frame/form.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: authUser } = createNamespacedHelpers('authUser');
const { mapActions: role } = createNamespacedHelpers('role');
const { mapActions: loginMenu } = createNamespacedHelpers('login');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    breadcrumb,
    dataTable,
    dataForm,
  },
  data: function() {
    return {
      opera: [
        {
          label: '修改',
          method: 'edit',
        },
      ],
      fields: [
        { label: '用户名', prop: 'name' },
        { label: '机构名称', prop: 'deptname' },
      ],
      list: [],
      total: 0,
      dialog: false,
      formFields: [
        { label: '用户名', model: 'name', type: 'text' },
        { label: '机构名称', model: 'deptname', type: 'text' },
        { label: '权限', model: 'menus', custom: true },
      ],
      form: {},
      menuList: [],
    };
  },
  async created() {
    await this.getOtherList();
    await this.search();
  },
  methods: {
    ...authUser(['fetch', 'query', 'update']),
    ...role({ getRoleList: 'query' }),
    ...loginMenu(['toGetMenu']),
    // 查询列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, pid: this.user.uid, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 修改
    async toEdit({ data }) {
      const res = await this.fetch({ id: data.id });
      if (this.$checkRes(res)) {
        let menus = res.data.menus;
        this.$set(this, 'form', { ...data, menus: menus.map(i => i.id) });
      }
      this.dialog = true;
    },
    // 保存
    async turnSave({ data }) {
      let res;
      let msg;
      if (data.id) {
        res = await this.update(data);
        msg = '修改成功';
      } else {
        res = await this.create(data);
        msg = '创建成功';
      }
      if (this.$checkRes(res, msg, res.errmsg)) {
        this.toClose();
        this.search();
      }
    },
    // 取消增加
    toClose() {
      this.form = {};
      this.dialog = false;
    },
    async getOtherList() {
      if (this.user.role == '0') {
        const res = await this.getRoleList({ id: this.user.uid });
        if (this.$checkRes(res)) this.$set(this, `menuList`, res.data.reverse());
      } else if (this.user.role == '1') {
        const res = await this.toGetMenu({ id: this.user.uid });
        if (this.$checkRes(res)) this.$set(this, `menuList`, res.data.menus.reverse());
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.main {
  .info {
    .top {
      text-align: right;
      margin: 15px 0;
    }
  }
}
</style>