manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_mld/src/views/role/role.vue

<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="24">
          <el-button size="small" type="primary" @click="openCreateDialog">新增角色</el-button>
        </el-col>
      </el-row>
      <el-table :data="roles" style="width: 100%" v-loading="loading">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="rolename" label="角色名称" width="160"></el-table-column>
        <el-table-column prop="roleDescribe" label="角色描述"></el-table-column>
        <el-table-column label="操作" width="290">
          <template slot-scope="scope">
            <el-button size="small" @click="openEditDialog(scope.$index)">修改角色</el-button>
            <el-button
              size="small"
              @click="toAuthority(scope.row.id,scope.row.rolename)"
            >修改权限</el-button>
            <el-button
              size="small"
              type="danger"
              @click="deleteRole(scope.row.id,scope.row.rolename)"
            >删除角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加或修改的dialog -->
    <el-dialog :close-on-click-modal="false" :title="(roleForm.id==null?'新增':'修改')+'角色'" :visible.sync="dialogVisible" width="400px">
      <el-form ref="form" :model="roleForm" :rules="rules" label-width="60px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="roleForm.name" ref="name" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="roleForm.description" placeholder="请输入描述" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submitRole">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import util from "../../common/js/util";

export default {
  data() {
    return {
      roles: [],
      loading: false,
      dialogVisible: false,
      roleForm: {
        id: null,
        name: null,
        description: null
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ]
      },
      //权限
      viewPermission:
        store.getters.authorization.indexOf("pc_view_permission") != -1,
      editPermission:
        store.getters.authorization.indexOf("pc_set_permission") != -1
    };
  },
  methods: {
    getRole() {
      this.loading = true;
      request({
        url: "/permission/getRoleList",
        method: "post"
      })
        .then(response => {
          this.roles = response.data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    submitRole() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          request({
            url: "/permission/editRole",
            method: "post",
            params: {
              id: this.roleForm.id,
              name: this.roleForm.name,
              description: this.roleForm.description
            }
          })
            .then(response => {
              this.loading = false;
              if (response.code == 'ok') {
                  this.$message({
                    message: "操作成功",
                    type: "success"
                  });
                  this.dialogVisible = false;
                  this.getRole();
              } else {
                  this.$message({
                    message: response.message,
                    type: "error"
                  });
              }
              
            })
            .catch(error => {
              this.loading = false;
            });
        }
      });
    },
    //删除
    deleteRole(id, name) {
      this.$confirm("是否删除" + name, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning"
      }).then(() => {
        this.loading = true;
        request({
          url: "/permission/deleteRole",
          method: "post",
          params: {
            id: id
          }
        })
          .then(response => {
            this.loading = false;
            this.getRole();
          })
          .catch(error => {
            this.loading = false;
          });
      });
    },

    //打开新建dialog
    openCreateDialog() {
      this.roleForm.id = null;
      this.roleForm.name = "";
      this.roleForm.description = "";
      this.dialogVisible = true;
      this.$nextTick(() => {
          this.$refs.form.clearValidate();
          this.$refs.name.focus();
      },500)
      
    },
    //打开编辑dialog
    openEditDialog(index) {
      this.roleForm.id = this.roles[index].id;
      this.roleForm.name = this.roles[index].rolename;
      this.roleForm.description = this.roles[index].roleDescribe;
      this.dialogVisible = true;
      this.$refs.form.clearValidate();
    },
    toAuthority(id, name) {
      this.$router.push("/authority/" + id + "/" + name);
    }
  },
  mounted() {
    this.getRole();
  }
};
</script>

<style scoped>
</style>