faceTable.vue

<template>
  <div>
    <el-table  class="table_m_type" :data="tableData" height="700">
       <div slot="empty">
          <div class="no-data-box">
            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
            <div>暂无数据</div>
          </div>
        </div>
      <el-table-column label="序号" type="index" width="120"></el-table-column>
      <el-table-column label="姓名" property="name" type="name" width="180"></el-table-column>
      <el-table-column label="年龄" property="age"  width="180"></el-table-column>
      <el-table-column label="性别" property="gender" :formatter="setSex" width="180"></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="籍贯" property="personInfo" :formatter="setCity">
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <div class="tab-btn-box">
            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
            <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑人像</span>
            <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block mt10 ml0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" background
        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div>
      <faceDetail :facedata="curData"  :detaildialong="detaildialong" @closedialong="closedetail"></faceDetail>
    </div>
  </div>
</template>
<script>
  import faceDetail from './faceDetail'
  export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        limit: 20,
        total: 0,
        offset: 0,
        loading: false,
        provenceName: "",
        cityName: "",
        detaildialong: false,
        curData: '',
        cData: '',
        accountId:localStorage.getItem('accountId')
      };
    },
    props: {
      dbname: {
        //库名称
        type: String
      },
      facename: {
        //姓名
        type: String
      },
      facesex: {
        //性别
        type: String
      },
      facecardid: {
        //身份证号
      },
      communityunid: {
        //地区id
      }
    },
    methods: {
      closedetail() {
        this.detaildialong = false;
      },
      handleSee(index, row) {
        this.detaildialong = true;
        this.curData = row;
      },
      handleEdit(index, row) {
        this.$emit("edit", index, row);
      },
      handleDelete(index, row) {
        var Vthis = this;
        var Athis = "";
        var a = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            Athis = this;
            Vthis.axios
              .delete(this.API.url + "/persons/" + row.id)
              .then(function (response) {
                console.log(response)
                Vthis.initTable();
                Athis.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch((err)=>{
                this.$message({
                  type: "error",
                  message: err
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      setCity(row, column, cellValue) {
        if(!row.personInfo){
          return '未知'
        }else{
          return cellValue
        }
      },
      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;
      },
      handleSizeChange(val) {
        alert(val);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initTable();
      },
      initTable() {
        var Vthis = this;
        this.axios
          .get(this.API.url + "/persons", {
            params: {
              page:this.currentPage,
              pageSize: this.limit,
              status: 1,
              accountId: this.accountId,
              gender: Vthis.facesex,
              name_like: `%${Vthis.facename}%`,
              card_id__like: Vthis.facecardid,
              type: Vthis.dbname,
              resident_unids: this.communityunid,
            }
          }).then( (response) =>{
            Vthis.tableData = response.data.data.list;
            Vthis.total = response.data.data.total;
          });
      }
    },
    components: {
      faceDetail
    },
    computed: {},
    created() {
      this.initTable();
    }
  };

</script>
<style lang="stylus" scoped>
  .mb20 {
    margin-bottom: 50px;
  }

  .pages {
    float: right;
    margin: 20px 15px 30px 0;
  }

</style>