xt_vue/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">
      <!-- <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-add-role="didAddRole" @did-edit-role="didModifyRole"></edit-role>
      <permission-settings ref="permission_settings"></permission-settings>
      <div class="roleBox">
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px" @click="onClick">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc1.png" alt />
            <p class="avatarname">子管理员</p>
          </div>
          <div class="roleTip">子管理员角色具备平台全部功能的使用权限,请谨慎配置...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc2.png" alt />
            <p class="avatarname">医生</p>
          </div>
          <div class="roleTip">医生角色能够进行建立患者档案，制定和调整患者透析治疗方案，定期评价病人的透析质量等...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc3.png" alt />
            <p class="avatarname">护士</p>
          </div>
          <div class="roleTip">护士角色能够进行病人透析管理，以及医院的感染控制与消毒记录等...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc2.png" alt />
            <p class="avatarname">技师</p>
          </div>
          <div class="roleTip">技师角色能够进行设备的管理，日常维护维修记录等...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc2.png" alt />
            <p class="avatarname">运营</p>
          </div>
          <div class="roleTip">运营角色能够在SCRM中管理微网站、使用营销工具、做会员管理和分销商品经营的操作...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc4.png" alt />
            <p class="avatarname">库存</p>
          </div>
          <div class="roleTip">库存角色负责透析耗材的日常管理，对耗材的入库、出库、退库的登记操作...</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
        <div class="roleOne">
          <div class="setting">
            <i class="el-icon-setting"></i>
            <span style="margin-right:20px">权限配置</span>
          </div>
          <div class="avatar">
            <img src="../../assets/img/pc5.png" alt />
            <p class="avatarname">院长</p>
          </div>
          <div class="roleTip">院长角色了解血透患者血液透析质量和相关的大数据，以及掌握透析中心整体运营情况</div>
          <div class="roleTxt">
            该角色目前已配置
            <span style="color:#4A8AF3">0</span> 个员工
          </div>
          <div class="btnBox">
            <el-button>新增用户</el-button>
            <el-button>用户管理</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    EditRole,
    BreadCrumb,
    PermissionSettings
  },
  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: {
    requestRoleWithPage: function(page) {
      this.roles.splice(0, this.roles.length);
      this.loading_roles = true;
      getRoles(page)
        .then(rs => {
          this.loading_roles = false;
          const resp = rs.data;
          if (resp.state === 1) {
            this.roles.push(...resp.data.roles);
            this.role_total_count = resp.data.total_count;
          } 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.edit_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) {
      this.roles.push({ id: id, name: name, intro: intro, status: status });
    },
    didModifyRole: function(id, name, intro) {
      this.roles.forEach(role => {
        if (role.id === id) {
          role.name = name;
          role.intro = intro;
          return false;
        }
      });
    },
    pageChange: function(nextPage) {
      this.requestRoleWithPage(nextPage);
    },
    ///

    onClick() {
      this.$refs.permission_settings.show();
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0 !important;
}
.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>