faceTable.vue

<template>
  <div>
    <el-table :data="tableData" style="width: 98%;margin:0 auto;" v-loading.body="loading">
      <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="sex" :formatter="setSex" width="180"></el-table-column>
      <el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
      <el-table-column label="身份证号" property="card_id"></el-table-column>
      <el-table-column label="籍贯" property="provence" :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">
      <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :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: true,
        provenceName: "",
        cityName: "",
        detaildialong: false,
        curData: '',
        cData: '',
      };
    },
    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(FACEWEB + "/faces/" + row.unid, {
                is_active: false
              })
              .then(function (response) {
                Vthis.initTable();
                Athis.$message({
                  type: "success",
                  message: "删除成功!"
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });   
          });
      },
      setCity(row, column, cellValue) {
        return this.showCity(row.province, row.city)
      },
      setSex(row, column, cellValue) {
        var sex = "";
        if (cellValue == "1") sex = "男";
        if (cellValue == "2") sex = "女";
        return sex;
      },
      setBirthday(row, column, cellValue) {
        var data = "";
        if (cellValue) data = cellValue.split(" ")[0];
        return data;
      },
      handleSizeChange(val) {
        alert(val);
      },
      handleCurrentChange(val) {
        this.offset = (val - 1) * this.limit;
        this.initTable();
      },
      initTable() {
        var Vthis = this;
        this.axios
          .get(FACEWEB + "/faces/crucial_faces", {
            params: {
              offset: Vthis.offset,
              limit: this.limit,
              is_crucial: true,
              is_active: true,
              sex: Vthis.facesex,
              name__like: Vthis.facename,
              card_id__like: Vthis.facecardid,
              crucial_type: Vthis.dbname,
              resident_unids: this.communityunid,
            }
          }).then(function (response) {
            Vthis.tableData = response.data.list_data;
            Vthis.total = response.data.total_num;
            Vthis.loading = false;
          });
      }
    },
    components: {
      faceDetail
    },
    computed: {},
    created() {
      this.initTable();
    }
  };

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

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

</style>