index.vue 4.64 KB
<template>
  <div class="template-box content_div_main">
      <el-form :inline="true" class="search-form" size="small">
        <el-form-item>
           <el-input type="text" class="bla bra" v-model="search.rolename" placeholder="角色名称"></el-input>
        </el-form-item>
         <el-form-item>
          <el-button class="search-btn" icon="el-icon-search" @click="searchRol()">查询</el-button>
          <el-button class="search-btn" @click="addRole()" icon="el-icon-plus">添加</el-button>
        </el-form-item>
      </el-form>
    <el-row >
      <el-table :data="tableData" v-loading.body="loading" style="width:98%;margin:20px auto;" class="table_m_type" height="700">
        <div slot="empty">
          <div class="no-data-box">
            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
            <div>暂无数据</div>
          </div>
        </div>
        <el-table-column type="index" width="" label="序号"></el-table-column>
        <el-table-column prop="name" label="角色名称" width=""></el-table-column>
        <el-table-column prop="" label="创建时间" width="">
          <template slot-scope="scope">
            {{showLocalTime(scope.row.create_dt)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope">
              <div class="tab-btn-box">
                  <span class="table-btn" size="" @click="editRole(scope.$index, scope.row)">编辑角色</span>
                  <span class="table-btn dengers" size="" @click="deleteRole(scope.$index, scope.row)">删除角色</span>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="">
       <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.limit"
          :current-page.sync="page.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
    </div>
    <el-row>
      <add-role :opaddroledialog="addroledialog" :curData="curData" @closedialong="closeaddroledialong"></add-role>
    </el-row>
  </div>
</template>
<script>
import addRole from "./addRole";
export default {
  data() {
    return {
      addroledialog: false,
      search: {
        rolename: ""
      },
      tableData: [],
      page: {
        pageSize:20,
        limit: 20,
        offset: 0,
        total: 0,
        currentPage: 1
      },
      loading: false,
      curData: "",
      userUnid:localStorage.getItem("user_id")
    };
  },
  methods: {
    closeaddroledialong(state) {
      this.addroledialog = false;
      if (state) this.getRolList();
    },
    searchRol() {
      this.page.currentPage = 0;
      this.page.offset = 0;
      this.getRolList();
    },
    addRole() {
      this.addroledialog = true;
      this.curData = [];
    },
    editRole(index, row) {
      this.addroledialog = true;
      this.curData = row;
    },

    editJurisdiction(index, row) {},
    deleteRole(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          this.axios
            .post(this.API.auth.deleteRole(row.role_unid), { is_active: false, })
            .then(response => {
              this.getRolList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getRolList() {
      this.axios.get(this.API.url+"/auth/api/v1/auth/users/"+this.userUnid+"/roles", {
            params: {
              order: "asc",
              sortby: "create_dt",
              is_active:true,
              limit:this.page.limit,
              offset:this.page.offset
            }
          }).then(response => {
          this.tableData = response.data.list_data;
          this.page.total = response.data.total_num;
        });
    },
    handleCurrentChange(val) {
      this.page.offset = (val - 1) * this.page.limit;
      this.page.currentPage = val;
      this.getRolList();
    },
    handleSizeChange(val){
       this.getRolList();
    }
  },
  created() {
    this.getRolList();
  },
  components: {
    addRole
  }
};
</script>
<style lang="stylus" scoped>
.div_content_ty{
  background #fff
}
.pages {
  float: right;
  margin: 0px 15px 30px 0;
}
</style>