FE-V2-PC/src/views/comprehensive/system/role/index.vue

<!--角色管理-->
<template>
  <div class="app-container role">
    <div class="role_n" v-if="pageType==1">
      <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="form-box" >
        <el-form-item label="角色名称" prop="roleName" style="margin-left:20px;">
          <el-input
            v-model="queryParams.roleName"
            placeholder="请输入角色名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="角色状态"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5">
            <p class="add-button-one-120"
               @click="handleAdd"
               v-hasPermi="['system:role:add']"
            ><i class="el-icon-plus"></i>新增角色</p>
          </el-col>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="roleList" class="table-box" v-if="pageType==1">
        <el-table-column label="序号" width="100" align="center"  type="index"/>
        <el-table-column label="名称" prop="roleName" align="center" :show-overflow-tooltip="true" width="200"/>
        <el-table-column label="数据范围" prop="dataScope" align="center" :show-overflow-tooltip="true" width="296">
          <template slot-scope="scope">
            <p v-for="(item,index) in optionsDataList" :key="index" v-if="scope.row.dataScope == item.type">{{item.value}}</p>
          </template>
        </el-table-column>
        <el-table-column label="对应身份" prop="postNameStr" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" v-if="tableButtonType">
          <template slot-scope="scope" v-if="scope.row.roleId !== 1">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="copyButton(scope.row)"
                 v-hasPermi="['system:dict:edit']"
              >复制</p>
              <p class="table-button-p"
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['system:role:edit']"
              >编辑</p>
              <p class="table-button-p"
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['system:role:remove']"
              >删除</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
                  v-if="pageType==1"
                  v-show="total>0"
                  :total="total"
                  layout="total, prev, pager, next, sizes, jumper"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
      />
    </div>
    <!--编辑-->
    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
  </div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
import addPage from "./addPage.vue"

export default {
  components: {
    addPage
  },
  name: "Role",
  data() {
    return {
      tableButtonType:this.hasPermiDom(['system:dict:edit','system:role:edit','system:role:remove']),
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        roleName: null,
        status: null
      },
      roleList:[],
      pageType:1,
      //组件传参数据
      propsData:{},
      //数据范围列表
      optionsDataList:[
        {type: '1', value: "所有数据",},
        {type: '2', value: "本部门及指定部门数据",},
        {type: '3', value: "本部门及下级部门数据",},
        {type: '4', value: "当前账号数据",},
      ],
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    goPage(type){
      if(this.pageType != type){
        if(type == 1){
          this.$set(this,'pageType',type);
        }else if(type == 3){
          this.$set(this,'pageType',1);
          this.resetQuery();
        }
      }
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$set(this,"form",
        {
          pageNum: 1,
          pageSize:20,
          roleName: null,
          status: null
        }
      );
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      let obj = {
        type:1,
        title:"新增角色",
      };
      this.$set(this,'propsData',obj);
      this.$set(this,'pageType',2);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getRole(row.roleId).then(response => {
        let obj = {
          type:2,
          roleId:response.role.roleId,
          name:response.role.roleName,
          key:response.role.roleKey,
          dataScope:response.role.dataScope,
          viewDeptIds:response.role.viewDeptIds,
          list:response.checkedKeys,
          title:"编辑角色",
        };
        this.$set(this,'propsData',obj);
        this.$set(this,'pageType',2);
      });
    },
    /** 复制按钮 */
    copyButton(row){
      getRole(row.roleId).then(response => {
        let obj = {
          type:3,
          dataScope:response.role.dataScope,
          viewDeptIds:response.role.viewDeptIds,
          list:response.checkedKeys,
          title:"复制角色",
        };
        this.$set(this,'propsData',obj);
        this.$set(this,'pageType',2);
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除角色?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delRole(row.roleId);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
  }
};
</script>

<style scoped lang="scss">
  .role {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    .role_n{
      display: flex!important;
      flex-direction: column;
      flex: 1;
      padding:11px 20px 20px!important;
    }
    .form-box{

      margin-top:12px;
     // display: flex;
      .null-p{
        flex:1;
      }
    }
    .button-box{
      width:390px;
      display: flex;
    }
  }
</style>