proofreading.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 label="校对结果：">
            <el-select v-model="proofrendResut" placeholder="请选择">
                <el-option
                v-for="item in snapshots"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="身份证号："> 
            <el-input type="text" class="bla bra br0" v-model="idCard" placeholder="" style="width: 192px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button  class="search-btn" @click="getUserList" :disabled="examinationId === '' || typeId === ''">查询</el-button>
          <el-button  class="search-btn ml10"  @click="upLoadData" :disabled="examinationId === '' || typeId === ''">上传校对结果</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="systableData" 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="" label="序号"></el-table-column>
        <!-- <el-table-column prop="" label="序号" width=""></el-table-column> -->
        <el-table-column prop="idCard" label="身份证号" width=""></el-table-column>
        <el-table-column prop="" label="校对结果" width="">
            <template slot-scope="scope">
                <div>{{ scope.row.snapshotCount > 0 ? '认证通过' : '认证不通过' }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="" 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 prop="" label="抓拍照片" 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-row>
      <statusdetails ref="detail"></statusdetails>
    </el-row>
  </div>
</template>
<script>
const { picUrls = '' } = window.SECURITY_CONF
import defaultImg from "@/assets/img/default.png";
import statusdetails from './detail'

export default {
  components:{
    statusdetails
  },
  data() {
    return {
        options: [],
        examinationId: "",
        systableData: [],
        total:0,
        currentPage:1,
        limit:20,
        proofrendResut: '全部',
        types: [],
        typeId: "",
        idCard: null,
        accountId:localStorage.getItem("accountId"),
        snapshots: [
            {
                value: '全部',
                lable: '全部'
            },
            {
                value: 'snapshotCount',
                label: '认证不通过'
            },
            {
                value: 'snapshotCount_gt',
                label: '认证通过'
            }
        ],
        picUrls,
        defaultImg,
    }
  },
  methods: {
      async upLoadData () {
        try {
            const response = await this.axios.get(this.API.url+`/persons/socialSecurity/sendComparisonResults`, {
                params: {
                    mallId: this.examinationId,
                    personType: this.typeId
                }
            });
            this.$alert(response.data.msg, '', {
                confirmButtonText: '确定'
            });
        } catch (err) {
            this.$message.error("上传校队失败");
        }
      },
      userDataSuccess () {
          this.$alert('这是一段内容', '标题名称', {
            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 = []
            }
        });
      },
      // 获取所有用户
      getUserList () {
        const { proofrendResut } = this 
        let data = {}
        if (proofrendResut === '全部') {
            data = {
                snapshotCount: null
            }
        } else if (proofrendResut === 'snapshotCount') {
            data = {
                snapshotCount: 0
            }
        } else if (proofrendResut === 'snapshotCount_gt') {
            data = {
                snapshotCount_gt: 0
            }
        }
        this.axios.get(this.API.url+`/persons`, {
            params: {
                mallId: this.examinationId,
                idCard: this.idCard === "" ? null : this.idCard,
                page:this.currentPage,
                pageSize: this.limit,
                ...data
            }
        }).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 = []
            }
        });
      },
      changeExamination () {
          if (this.examinationId !== '') {
              this.getTypes()
          }
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.getUserList();
      },
      dealCardImg(row) {
        let img_path = "";
        if (!row.personPic) {
            img_path = this.defaultImg;
        } else {
            img_path = this.picUrls + "/" + row.personPic;
        }
        return img_path;
      },
      getItemUserImg (index, row) { // 单条获取照片
        this.$refs.detail.initImg(row)
      },
  },
  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>