FE-V2-PC/src/views/comprehensive/personnel/onDutyConfiguration/infoPage.vue

<template>
  <div class="onDutyConfigurationInfo">
    <div class="onDutyConfigurationInfo-title-box">
      <p>{{propsData.time}}值班安排</p>
      <p class="add-button-one-90" @click="outButton">返回</p>
    </div>
    <div class="list-max-big-box scrollbar-box">
      <div class="for-list-max-big-box" v-for="(item,index) in listData" :key="index">
        <p class="for-title-p">{{item.subjectName}}</p>
        <el-table v-loading="loading" border :data="item.dutyList">
          <el-table-column label="值班人员" align="left" prop="userName" show-overflow-tooltip/>
          <el-table-column label="类别" align="left" prop="data2" show-overflow-tooltip width="230">
            <template slot-scope="scope">
              <span>{{scope.row.userType == 11?'教职工':'学生'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话" align="left" prop="userPhone" show-overflow-tooltip width="200"/>
          <el-table-column label="部门" align="left" prop="deptName" show-overflow-tooltip width="300"/>
          <el-table-column label="指派日期" align="left" prop="createTime" show-overflow-tooltip width="300"/>
          <el-table-column label="操作" align="left" width="210" v-if="tableButtonType && !propsData.type">
            <template slot-scope="scope">
              <div class="button-box">
                <p class="table-min-button" style="color:#0183FA;margin-left:0!important;" @click="delUserButton(scope.row)">移除</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="padding:0 20px 10px 20px;">
      <pagination :page-sizes="[5, 10, 15, 20]"
                  :total="total"
                  layout="total, prev, pager, next, sizes, jumper"
                  :page.sync="param.pageNum"
                  :limit.sync="param.pageSize"
                  @pagination="getListPlan"
      />
    </div>
  </div>
</template>

<script>
  import { getInfoByDate,delXxpDuty } from '@/api/laboratory/onDutyConfiguration'
  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        tableButtonType:this.hasPermiDom(['laboratory:plan:query','laboratory:planjoin:edit','laboratory:distribution:list','laboratory:plan:query','laboratory:plan:edit','laboratory:plan:remove']),
        listData:[],
        loading:false,
        param:{
          pageNum:1,
          pageSize:5,
        },
        total:0,
      }
    },
    created(){
      this.getListPlan();
    },
    mounted(){

    },
    methods:{
      outButton(){
        this.$parent.goPage('get')
      },
      getListPlan(){
        this.loading = true;
        let obj = {
          pageNum:this.param.pageNum,
          pageSize:this.param.pageSize,
          deptId:this.propsData.checkTreeId,
          dutyTime:this.propsData.time,
        }
        console.log(obj);
        getInfoByDate(obj).then(response => {
          this.loading = false;
          if(response.rows[0]){
            this.$set(this,'total',response.total);
            this.$set(this,'listData',response.rows);
          }else{
            this.outButton();
          }
        })
      },
      delUserButton(row){
        let self = this;
        this.$confirm('是否确认删除该流程?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          delXxpDuty(row.id).then(response => {
            self.msgSuccess(response.msg);
            self.getListPlan()
          })
        }).then(() => {
        }).catch(() => {});
      },
    }
  }
</script>

<style scoped lang="scss">
  .onDutyConfigurationInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
      padding:0;
    }
    .onDutyConfigurationInfo-title-box{
      display: flex;
      height: 80px;
      border-bottom:1px solid #E0E0E0;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        margin-left:20px;
        color:#0045AF;
        font-size:16px;
        font-weight:900;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .list-max-big-box{
      flex:1;
      padding:0 20px 20px;
      .for-list-max-big-box{
        .for-title-p{
          height:80px;
          line-height:80px;
          font-size:16px;
          color:#0045AF;
        }
      }
    }
  }
</style>
<style lang="scss">
  .onDutyConfigurationInfo{
    .el-table__empty-text{
      font-size: 12px;
      background: none;
      color:#909399;
    }
  }
</style>