cms-web/src/views/gaf/role.vue

<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统角色管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="adduser">添加角色</el-button>
      </div>
      <div class="main">
        <naf-grid class="grid" ref="grid" @edit="edit" @delete="deleterole" :data="roleList" :meta="meta" :total="total" @query="query"></naf-grid>
      </div>
    </el-card>
    <dialog-drawer type="dialog" :visible="visible" :title="isNew ? '修改角色' : '添加角色'" @close="close" :width="'30%'">
      <template v-slot:content>
        <naf-form v-if="visible" ref="ruleForm" @save="save" :meta="formmeta" :rules="rules" :data="is_data"></naf-form>
      </template>
    </dialog-drawer>
  </div>
</template>

<script>
import nafGrid from '@naf/data/tables/naf-grid'
import dialogDrawer from '@naf/data/dialog -drawer'
import nafForm from '@naf/data/form'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('role')
export default {
  components: {
    nafGrid,
    dialogDrawer,
    nafForm
  },
  data () {
    return {
      is_data: {},
      visible: false,
      meta: [
        { name: 'name', title: '角色名称', filter: true },
        { name: 'code', title: '角色编码', filter: true },
        { name: 'state', title: '状态', formatter: 'state' }
      ],
      formmeta: [
        { name: 'name', title: '角色名称' },
        { name: 'code', title: '角色编码', disabled: false },
        { name: 'state', title: '状态', formatter: 'state' }
      ],
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入角色编码', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请输入状态', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['rolequery', 'rolecreate', 'roleupdate', 'roledelete']),
    // 添加
    adduser () {
      this.is_data = {}
      this.visible = true
      // eslint-disable-next-line no-return-assign
      this.formmeta.map(p => p.name === 'code' ? p.disabled = false : true)
    },
    // 删除
    async deleterole (e) {
      this.$confirm('请确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.roledelete(e)
        // eslint-disable-next-line eqeqeq
        if (res.errcode == 0) {
          this.$message.success('操作成功')
          this.query()
          this.$refs.grid.resetpage(-1)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改
    edit (e) {
      this.is_data = e
      this.visible = true
      // eslint-disable-next-line no-return-assign
      this.formmeta.map(p => p.name === 'code' ? p.disabled = true : false)
    },
    // 查询
    async query ({ filter = {}, paging = {} } = {}) {
      await this.rolequery({ filter, paging })
    },
    // 保存按钮
    async save (e) {
      let res
      if (this.isNew) {
        // 修改
        res = await this.roleupdate(e)
      } else {
        // 添加
        res = await this.rolecreate(e)
      }
      // eslint-disable-next-line eqeqeq
      if (res.errcode == 0) {
        this.$message.success('操作成功')
        this.query()
        this.visible = false
        this.$refs.grid.resetpage(-1)
      }
    },
    // 关闭弹窗
    close () {
      this.visible = false
    }
  },
  async mounted () {
    this.query()
  },
  computed: {
    ...mapState(['total', 'roleList']),
    isNew () {
      return Boolean(this.is_data && this.is_data._id)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}
.box-card {
  height: 100%;
}
</style>