FE-V2-PC/src/views/comprehensive/personnel/managePermissionTemplates/index.vue

<!--权限管理-->
<template>
  <div class="app-container managePermissionTemplates">
    <div class="managePermissionTemplates-list-page" v-if="pageType == 1">
      <div class="top-button-box">
        <p class="inquire-button-one add-button-box" @click="pageTypeClick(2)" v-hasPermi="['system:permit:add']"><i class="el-icon-plus"></i>新增</p>
        <p class="text-p">管理员在给人员分配权限时，可以直接复制模板中已经设置的权限。</p>
      </div>
      <el-table v-loading="loading" border :data="dataList" ref="multipleTable">
        <el-table-column label="序号"  width="132" align="center"  type="index"/>
        <el-table-column label="权限模板名称" align="left"  prop="name" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color:#0183FA;">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限模板说明" align="left" prop="remark" show-overflow-tooltip width="595"/>
        <el-table-column label="创建日期" align="left" prop="createTime" show-overflow-tooltip width="157"/>
        <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width" v-if="tableButtonType">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" @click="editButton(scope.row)" v-hasPermi="['system:permit:edit']">修改</p>
              <p class="table-button-p" @click="delButton(scope.row)" v-hasPermi="['system:permit:remove']">删除</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin-top:20px!important;"
        v-show="total>0"
        :total="total"
        layout="total, sizes, prev, pager, next, 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 addPage from "./addPage.vue"
  import { getPermitList, delSystemPermit, getPermitInfo } from "@/api/laboratory/managePermissionTemplates";
  export default {
    name: "managePermissionTemplates",
    components: {
      addPage
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['system:permit:edit','system:permit:remove']),
        pageType:1,
        loading:false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
        },
        total:0,
        //数据列表
        dataList:[],
        //组件传输数据
        propsData:{},
      }
    },
    created() {

    },
    mounted(){
      this.getPermitList();
    },
    methods:{
      //编辑按钮
      editButton(row){
        getPermitInfo(row.id).then(response => {
          this.propsData = response.data;
          this.pageType = 2;
        });
      },
      //删除按钮
      delButton(row){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          delSystemPermit(row.id).then(response => {
            self.msgSuccess(response.msg)
            self.getPermitList()
          });
        }).then(() => {}).catch(() => {});
      },
      //获取列表接口
      getPermitList(){
        this.loading = true;
        getPermitList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.rows);
          this.loading = false;
        });
      },
      // 页面状态切换
      pageTypeClick(type){
        if(this.pageType != type){
          if(type == 1){
            this.pageType = 1;
            this.getPermitList();
          }else if(type == 2){
            this.propsData = {};
            this.pageType = 2;
          }
        }
      },
      //获取数据列表
      getList() {
        this.loading = true;
        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.$set(this,'dataList',response.rows);
            this.total = response.total;
            this.loading = false;
          }
        );
      },
    },
  }
</script>

<style scoped lang="scss">
  .managePermissionTemplates{
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
    }
    .managePermissionTemplates-list-page{
      padding:20px!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top-button-box{
        display: flex;
        font-size:14px;
        margin-bottom:20px;
        .add-button-box{
          width:120px;
        }
        .text-p{
          margin-left:24px;
          flex:1;
          line-height:40px;
          color: #999999;
        }
      }
      .button-box{
        display: flex;
      }
    }
  }
</style>