report.vue

<!--活动状态-->
<template>
  <div class="template-box content_div_main">
     <el-form :inline="true" class="search-form" size="small">
        <el-form-item label="人口库：">
          <el-select v-model="dbname" class="br0 bra bla">
            <el-option v-for="item in crucialData"  :key="item.unid" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="姓名：">
          <el-input type="text" class="bla bra br0" v-model="facename" placeholder=""></el-input>
        </el-form-item>
        <!-- <el-form-item label="证件号：">
          <el-input type="text" class="bla" placeholder="请输入证件号" v-model="facecardid"></el-input>
        </el-form-item> -->
         <el-form-item label="性别：">
           <el-select v-model="facesex" class="br0 bra bla">
            <el-option value="" label="全部"></el-option>
            <el-option value="1" label="男"></el-option>
            <el-option value="0" label="女"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item>
          <el-button  class="search-btn" @click="getData" icon="el-icon-search">查询</el-button>
          <!-- <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-upload">导出</el-button> -->
        </el-form-item>
      </el-form>
    <el-row class="table_m_type">
      <el-table :data="tableData" style="width: 100%" height="680" >
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" :formatter="setSex" align="center"></el-table-column>
        <el-table-column label="出生日期" property="email" :formatter="setBirthday"> </el-table-column>
        <el-table-column label="身份证号" property="tel"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <div class="tab-btn-box">
              <span @click="showImg(scope.row)" class="table-btn">抓拍图片</span>
              <!-- <span @click="activityStatus(scope.row)" class="table-btn">活动状态</span> -->
           </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="block">
      <el-pagination
        class="mt10"
        @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-size="limit"
        background
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </el-row>
    <el-row>
      <statusdetails ref="detail"></statusdetails>
    </el-row>
  </div>
</template>

<script>
import statusdetails from './detail'
export default {
  components:{
    statusdetails
  },
  data() {
    return {
      address: "",
      camera: "",
      crucialData: [],
      tableData: [],
      value: "",
      value1: "",
      offset:0,
      limit:20,
      total:0,
      currentPage:1,
      dbname:'',
      facename:'',
      communityunid:'',
      facecardid:'',
      facesex:'',
      accountId:localStorage.getItem('accountId')

    };
  },
  methods: {
    showImg(data){
      this.$refs.detail.initImg(data)
    },
    activityStatus(data){
      this.$refs.detail.initchart(data)
    },
    setSex(row, column, cellValue) {
        var sex = "";
        if (cellValue == "1") sex = "男";
        if (cellValue == "0") sex = "女";
        return sex;
    },
    setBirthday(row, column, cellValue) {
      var data = "";
      if (cellValue) data = cellValue.split(" ")[0];
      return data;
    },
    initDbData(){
        this.axios.get(this.API.url + "/personTypes",{
          params:{
            accountId:this.accountId,
            hasBaseType: 1
          }
        }).then((response)=> {
          this.crucialData= response.data.data.filter(item=>{
             return item.id!==0&&item.id!==1
           })
           this.typeData=JSON.parse(JSON.stringify(this.crucialData));
           this.crucialData.unshift({
             "id":"",
             "name":"全部",
             "unid":"alltype"
           })
        });
     },
    getData() {
        this.axios
          .get(this.API.url + "/persons", {
            params: {
              page:this.currentPage,
              pageSize: this.limit,
              status: 1,
              accountId: this.accountId,
              gender: this.facesex,
              name_like: `%${this.facename}%`,
              type: this.dbname,
              resident_unids: this.communityunid,
            }
          }).then( (response) =>{
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          });
      },
    handleCurrentChange(val){
        this.currentPage = val;
        this.getData();
    }
  },
  created() {
    this.getData();
    this.initDbData();
  }
};
</script>
<style lang="stylus" scoped>
.search-box {
  color: #333;
  background: #fff;
}
.show-img-box{
  height 60px
  width 60px
  img{
    height 100%
    width 100%
  }
}
</style>