RoleMg.vue

<template>
  <div class="pomentWrap">
    <el-row class="topBar">
          <el-col>
            <el-form :inline="true" :model="searchData">
              <el-form-item label>
                <el-input v-model="searchData.roleName" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchFun()">
                  <i class="el-icon-search"></i> 搜索
                </el-button>
                <el-button type="primary" @click="resetFun()">
                  <i class="el-icon-refresh"></i> 重置
                </el-button>
              </el-form-item>
              <el-form-item class="fr">
                <el-button plain type="primary" @click="addFun()">
                  <i class="el-icon-plus"></i> 新增
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table
          :data="tableData.pageData"
          stripe
          border
          style="width:100%;"
          v-loading="loading"
        >
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column prop="roleName" label="角色名称"></el-table-column>
          <el-table-column prop="roleCode" label="角色代码"></el-table-column>
          <el-table-column prop="roleStatus" label="角色状态">
            <template slot-scope="scope">
              <font :class="{'jinColor': scope.row.roleStatus == '1'}">{{scope.row.roleStatus == '1' ? '禁用' : '启用'}}</font>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="270" align="center">
            <template slot-scope="scope">
              <el-button type="success" @click="editFun(scope.row)" size="small" plain><i class="el-icon-edit"></i> 编辑</el-button>
              <el-button type="danger" @click="delFun(scope.row)" size="small" plain><i class="el-icon-delete"></i> 删除</el-button>
              <el-button type="warning" @click="quanFun(scope.row)" size="small" plain><i class="el-icon-setting"></i> 权限</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="PAGE.page"
          :page-size="PAGE.size"
        ></el-pagination>
        
    <RoleMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData"
      :key="zjKey"
    ></RoleMgEdit>
    <Quan
    v-if="qxdialogVisible"
    :qxdialogVisible="qxdialogVisible"
    :roleID="roleID"
    :roleName="roleName"
    @QXdialogFun="qxcloseDialog"
    @confirm="qxconfirm"
    ></Quan>
  </div>
</template>
<style lang="scss">

</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import RoleMgEdit from "./RoleMgEdit.vue";
import Quan from "@/components/quan.vue";
import METHOD from '@/utils/methods'
@Component({
  components: { RoleMgEdit, Quan }
})
export default class RoleMg extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { roleName: "" };
  @Provide() loading: boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;
  @Provide() qxdialogVisible: Boolean = false;
  @Provide() roleID: String = '';
  @Provide() roleName: String = '';
  getTableData() {
    let that = this,
      param = Object.assign({}, that.PAGE, that.searchData);
    that.loading = true;
    (this as any).$axios
      .get(`/role/getRoleList?roleName=${param.roleName}&page=${param.page}&size=${param.size}`)
      .then((res: any) => {
        that.loading = false;
        if( res.code == 0 ) that.tableData = res.data;
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData.roleName = "";
    this.getTableData();
  }
  addFun() {
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this as any;
    METHOD.deleteFun(that, `/role/delRoleInfoById/${row.id}`,function(){
      that.getTableData();
    } )
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    this.dialogVisible = false;
    this.formData = {};
  }
  quanFun(row: any){
    let that = this;
    that.qxdialogVisible = true;
    that.roleID = row.id;
    that.roleName = row.roleName;
  }
  cahngeQuan(param: any) {
    let that = this;
    (this as any).$axios
      .post(`role/addOrEditRoleResources`, param)
      .then((res: any) => {
        if( res.code == 0 ){
          (that as any).$message({
            type: "success",
            message: "操作成功!"
          })
          that.qxcloseDialog()
        }
      });
  }
  qxcloseDialog() {
    this.qxdialogVisible = false;
  }
  qxconfirm(cs:any){
    this.cahngeQuan(cs)
  }
  created() {
    this.getTableData();
  }
}
</script>