Vue_New/src/xt_pages/role/role.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-circle-plus"
        style="float:right;"
        @click="addRoleAction"
        >新增</el-button
      >
    </div>
    <div class="app-container" v-loading="loading_roles">
      <!-- <el-table
        :data="roles"
        v-loading="loading_roles"
        border
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <el-table-column label="角色名称" prop="name" min-width="20%" align="center"></el-table-column>
        <el-table-column label="角色描述" prop="intro" min-width="25%" align="center"></el-table-column>
        <el-table-column label="状态" min-width="15%" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" style="color: #67C23A; font-size:20px;">
              <li class="el-icon-success"></li>
            </div>
            <div v-else style="color: #F56C6C; font-size:20px;">
              <li class="el-icon-error"></li>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <router-link :to="{ path: '/role/perview', query: { id: scope.row.id } }">
              <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
                <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
              </el-tooltip>
            </router-link>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit-outline"
                @click="modifyRoleAction(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="移除" placement="top">
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                v-if="scope.row.status === 1"
                @click="disableRoleAction(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="恢复" placement="top">
              <el-button
                type="info"
                size="small"
                icon="el-icon-refresh"
                v-if="scope.row.status !== 1"
                @click="recoverRoleAction(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="margin-top: 15px;" v-if="role_total_count > 10">
        <el-col :span="24">
          <el-pagination
            :total="role_total_count"
            :current-page.sync="current_page"
            @current-change="pageChange"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </el-col>
      </el-row>-->

      <edit-role
        ref="edit_role"
        @did-edit-role="didModifyRole"
      ></edit-role>

      <add-role
        ref="add_role"
        @did-add-role="didAddRole"
      ></add-role>

      <permission-settings ref="permission_settings" @delete="deleteRole()"></permission-settings>
      <user-management ref="user_management"></user-management>

      <div class="roleTitle">
        <i class="el-icon-warning warn"></i>
        <p>
          根据员工的职能选择角色，然后新增账号，可以自定义角色，进行权限配置
        </p>
      </div>
      <div class="roleBox">
        <div class="roleOne" v-for="item in this.roles">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px" @click="onClick(item.id)">权限配置</span>
          </div>
          <div class="avatar">
            <img v-if="item.name == '子管理员'" src="../../assets/img/pc1.png" alt=""/>
            <img v-else-if="item.name == '医生'" src="../../assets/img/pc2.png" alt=""/>
            <img v-else-if="item.name == '护士'" src="../../assets/img/pc3.png" alt=""/>
            <img v-else-if="item.name == '库存'" src="../../assets/img/pc4.png" alt=""/>
            <img v-else-if="item.name == '院长'" src="../../assets/img/pc5.png" alt=""/>
            <img v-else-if="item.name == '运营'"  src="../../assets/img/pc6.png" alt=""/>
            <img v-else-if="item.name == '技师'"  src="../../assets/img/pc7.png" alt=""/>
            <img v-else  src="../../assets/img/pc1.png" alt=""/>



            <p class="avatarname">{{item.name}}</p>
          </div>
          <div class="roleTip">
           {{item.intro}}
          </div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">{{item.staff_number}}</span> 个员工
          </div>
          <div class="btnBox">
            <el-button @click="addStaff(item.id)">新增用户</el-button>
            <el-button @click="onClickManagement(item.id)">用户管理</el-button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import EditRole from "./components/EditRole.vue";
import PermissionSettings from "./components/PermissionSettings.vue";
import { getRoles, setRoleStatus,getRolesList } from "@/api/role/role";
import UserManagement from "./components/UserManagement.vue";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import AddRole from './components/AddRole'

export default {
  components: {
    AddRole,
    EditRole,
    BreadCrumb,
    PermissionSettings,
    UserManagement
  },
  data: function() {
    return {
      crumbs: [
        { path: false, name: "权限管理" },
        { path: false, name: "角色管理" }
      ],
      loading_roles: true,
      roles: [],
      role_total_count: 0,
      current_page: 1
    };
  },
  created: function() {
    this.requestRoleWithPage(1);
  },
  methods: {
    addStaff(role_id){
      this.$refs.edit_role.show(role_id);

    },
    requestRoleWithPage: function(page) {
      this.roles.splice(0, this.roles.length);
      this.loading_roles = true;
      getRolesList(page)
        .then(rs => {
          this.loading_roles = false;
          const resp = rs.data;
          if (resp.state === 1) {

            for (let i = 0; i < resp.data.roles.length; i++) {
              if (!resp.data.roles[i].is_super_admin) {
                this.roles.push(resp.data.roles[i])
              }
            }
            // this.roles.push(...resp.data.roles);
          } else {
            this.$message.error(resp.msg);
          }
        })
        .catch(err => {
          this.loading_roles = false;
          this.$message.error(err);
        });
    },
    addRoleAction: function() {
      // 父组件调用子组件方法 https://segmentfault.com/a/1190000009525355
      this.$refs.add_role.show();
    },
    modifyRoleAction: function(row) {
      this.$refs.edit_role.modify(row.id, row.name, row.intro);
    },
    disableRoleAction: function(row) {
      this.$msgbox({
        title: "提示",
        message: "是否确定要移除该角色",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "移除中...";

            setRoleStatus(row.id, false)
              .then(rs => {
                done();
                instance.confirmButtonLoading = false;

                const resp = rs.data;
                if (resp.state === 1) {
                  row.status = 0;
                } else {
                  this.$message.error(resp.msg);
                }
              })
              .catch(err => {
                done();
                this.$message.error(err);
                instance.confirmButtonLoading = false;
              });
          } else {
            done();
          }
        }
      });
    },
    recoverRoleAction: function(row) {
      const loading = this.$loading({
        lock: true,
        text: "正在恢复角色...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      setRoleStatus(row.id, true)
        .then(rs => {
          loading.close();

          const resp = rs.data;
          if (resp.state === 1) {
            row.status = 1;
          } else {
            this.$message.error(resp.msg);
          }
        })
        .catch(err => {
          loading.close();
          this.$message.error(err);
        });
    },
    didAddRole: function(id, name, intro, status,staff_number) {
      this.roles.push({ id: id, name: name, intro: intro, status: status ,staff_number: staff_number});
    },
    didModifyRole: function() {
      this.requestRoleWithPage(1);

    },
    pageChange: function(nextPage) {
      this.requestRoleWithPage(nextPage);
    },
    ///

    onClick(role_id) {
      this.$refs.permission_settings.show(role_id);
    },
    onClickManagement(role_id) {
      this.$refs.user_management.show(role_id);
    },deleteRole(){
      this.$refs.permission_settings.hide();
      this.requestRoleWithPage(1);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0 !important;
}
.roleTitle {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 24px;
  .warn {
    font-size: 18px;
    color: #409eff;
    margin-right: 5px;
  }
}
.roleBox {
  display: flex;
  flex-wrap: wrap;
  .roleOne {
    width: 280px;
    height: 350px;
    margin: 0 15px 20px;
    border: 1px solid rgba(235, 238, 240, 1);
    border-radius: 4px;
    overflow: hidden;
  }
  .setting {
    // float: right;
    text-align: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 100%;
    color: #313234;
  }
  .avatar {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      margin: 10px 0;
    }
    .avatarname {
      font-size: 18px;
    }
  }
  .roleTip {
    width: 82%;
    margin: 20px auto 10px;
    font-size: 14px;
    color: #989898;
  }
  .roleTxt {
    width: 82%;
    margin: 0 auto;
    font-size: 14px;
    color: #666666;
  }
  .btnBox {
    width: 82%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
  }
}
</style>
<style>
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>