index.vue

<template>
  <div class="template-box content_div_main">
    <el-row class="">
      <el-form :inline="true" class="search-form" size="small">
        <el-form-item label="考点名称：" label-width="82px">
            <el-select v-model="examinationId" placeholder="请选择" @change="changeExamination">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="人员类型：">
            <el-select v-model="typeId" placeholder="请选择">
                <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  class="search-btn" @click="searchUser" icon="el-icon-download"
          :disabled="buttonDisable()">获取考生列表</el-button>
          <el-button  class="search-btn ml10"  @click="getAllUserList"
          :disabled="buttonDisable()">获取考生照片</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
        <div class="line"></div>
    </el-row>
    <el-row>
        <el-form :inline="true" class="search-form" size="small">
            <el-form-item label="身份证号："> 
                <el-input type="text" class="bla bra br0" v-model="idCard" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button  class="search-btn" @click="getUserList"
                :disabled="examinationId === '' || typeId === ''">查询</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-row>
      <el-table :data="systableData" 
       :v-loading="pictLoading"
       element-loading-background = "rgba(0, 0, 0, 0.5)"
       element-loading-text = "数据正在加载中"
       element-loading-spinner = "el-icon-loading"
       style="width:98%;margin:20px auto;"  class="table_m_type" height="700">
         <div slot="empty">
          <div class="no-data-box">
            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
            <div>暂无数据</div>
          </div>
        </div>
        <el-table-column type="index" width=""></el-table-column>
        <!-- <el-table-column prop="tabOrder" label="序号" width=""></el-table-column> -->
        <el-table-column prop="idCard" label="身份证号" width=""></el-table-column>
        <el-table-column label="照片" align="center">
            <template slot-scope="scope">
                <el-popover placement="left" trigger="hover">
                    <div class="face-img-box" slot="reference">
                        <img
                            :src="dealCardImg(scope.row)"
                            width="50"
                            height="50"
                            alt
                            class="face-img"
                            :onerror="defaultImg"
                        />
                    </div>
                    <img
                    :src="dealCardImg(scope.row)"
                    :alt="dealCardImg(scope.row)"
                    width="200"
                    height="200"
                    class="zoomout-img"
                    :onerror="defaultImg"
                    />
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope" align="center">
              <div class="tab-btn-box">
                <span class="table-btn"  @click="getItemUserImg(scope.$index, scope.row)">获取照片</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
        <div style="display: flex; flex-direction:row-reverse ">
            <el-pagination
                class="mt10"
                @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="limit"
                background
                layout="prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </el-row>
    <el-dialog title="考生照片获取进度" :visible.sync="progressDialog" width="40%">
        <div class="progress-content">
            <div>{{ `第${nowNumber}条` }}</div>
            <div>{{ `共计${allUserList.length}条` }}</div>
        </div>
        <el-progress :text-inside="true" :stroke-width="14" :percentage="parseInt(nowNumber/allUserList.length * 100)"></el-progress>
    </el-dialog>

  </div>
</template>
<script>
const { picUrls = '' } = window.SECURITY_CONF
import defaultImg from "@/assets/img/default.png";

export default {
  data() {
    return {
        options: [],
        examinationId: "",
        typeId: "",
        systableData: [],
        progressDialog: false,
        types: [],
        successCount: "",
        idCard: null,
        total:0,
        currentPage:1,
        limit:20,
        pictLoading: false,
        accountId:localStorage.getItem("accountId"),
        allUserList: [],
        picUrls,
        defaultImg,
        nowNumber: 0
    }
  },
  methods: {
      searchUser () {
        this.axios.get(this.API.url+`/persons/socialSecurity/getStudentInfo`, {
          params: {
            mallId: this.examinationId,
            personType: this.typeId
          }
        }).then(response => {
            if (response.data.code === 200) {
                this.successCount = response.data.data.successCount
                this.userDataSuccess()
                this.getUserList()
            }
        });
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.getUserList();
      },
      // 获取所有用户
      async getAllUserList () {
        try {
            const allPerson = await this.axios.get(this.API.url+`/persons`, {
                params: {
                    mallId: this.examinationId,
                    type: this.typeId,
                }
            });
            if (allPerson.data && allPerson.data.data && allPerson.data.data.length > 0) {
                const { data } = allPerson.data;
                this.allUserList = data
                this.progressDialog = true
                this.editUserInfo()
            } else {
                
            }
        } catch (err) {
            
        }
      },
      dealCardImg(row) {
        let img_path = "";
        if (!row.personPic) {
            img_path = this.defaultImg;
        } else {
            img_path = this.picUrls + "/" + row.personPic;
        }
        return img_path;
        },
      async editUserInfo () {
        const { nowNumber } = this
        if (nowNumber >= this.allUserList.length) {
            return;
        }
        if (nowNumber === this.allUserList.length - 1) {
            this.getUserList()
        }
        if (nowNumber < this.allUserList.length) {
            await this.setUserPhoto(() => {
                this.nowNumber = this.nowNumber + 1;
                this.editUserInfo()
            })
        }
      },
      // 获取考生照片
      async setUserPhoto (callback) {
          const { allUserList, nowNumber } = this
          try {
            await this.axios.get(this.API.url+`/persons/socialSecurity/getPictures/${allUserList[nowNumber].id}`)
            callback()
          } catch (err) {
            callback()
          }
      },
      // 获取担任考生照片
      getUserList () {
        this.axios.get(this.API.url+`/persons`, {
            params: {
                mallId: this.examinationId,
                type: this.typeId,
                idCard: this.idCard === "" ? null : this.idCard,
                page:this.currentPage,
                pageSize: this.limit,
            }
        }).then(response => {
            if (response.data && response.data.data && response.data.data.list) {
                // response.data.data.list.forEach((item, index) => {
                //     item.tabOrder = ++index;
                // });
                this.systableData = response.data.data.list
                this.total = response.data.data.total || 0
            } else {
                this.systableData = []
            }
        });
      },    
      getTypes () {
        this.axios.get(this.API.url+"/personTypes", {
            params: {
                accountId: this.accountId,
                mallId: this.examinationId,
            }
        }).then(response => {
            if (response && response.data && response.data.data) {
                this.types = response.data.data
            } else {
                this.types = []
            }
        });
      },
      buttonDisable () {
          if (this.typeId === "" || this.examinationId === "") {
              return true
          }
          return false
      },
      async getItemUserImg (index, row) { // 单条获取照片
        const { systableData } = this
        try {
          const data = await this.axios.get(this.API.url+`/persons/socialSecurity/getPictures/${row.id}`)
          if (data && data.data && data.data.data) {
              systableData[index].personPic = data.data.data.personPic
          }
        } catch (err) {
        }
      },
      userDataSuccess () {
        this.$alert(`考试列表获取成功！共计${this.successCount}条信息更新`, '', {
            confirmButtonText: '确定'
        });
      },
      getMalls () {
        this.axios.get(this.API.url+`/malls`, {
            params: {
                accountId: this.accountId,
                status: 1,
                type: 1

            }
        }).then(response => {
            if (response && response.data && response.data.data) {
                this.options = response.data.data
            } else {
                this.options = []
            }
        });
      },
      changeExamination () {
          if (this.examinationId !== '') {
              this.getTypes()
          }
      }
  },
  created() {
      this.getMalls()
  },
};
</script>
<style lang="stylus" scoped>
    .progress-content {
        width 100%;
        display flex;
        justify-content space-between;
        align-items center;
        box-sizing border-box;
        padding-right 18px; 
        margin-bottom 10px;
    }
    .line {
        width 100%;
        height 1px;
        background-color #efefef;
    }
    .face-img-box {
        position relative;
        width 50px;
        height 50px;
        border 1px solid #dcdcdc;
        margin 0px auto;
        cursor zoom-in;
    }

    .pic-popover {
        margin 5px 0;
        padding 10px;
        background #fff;
        border 1px solid #ebeef5;
        box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius 4px;
    }
    .face-img {
        width 50px;
        height 50px;
    }

    .zoomout-img {
        width auto;
        height 200px;
    }
</style>