epmet-work-pc/src/views/modules/base/visitor.vue

<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="fmData"
        class="demo-form-inline"
      >
        <el-form-item label="填写时间" prop="startTime">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            clearable
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="diy-button--search"
            size="small"
            @click="handleSearch"
            >查询</el-button
          >
          <el-button
            class="diy-button--reset"
            size="small"
            @click="resetForm('searchForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="resi-table"
        :height="tableHeight"
      >
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column
          prop="address"
          width="240"
          label="目的地"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          width="150"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="mobile"
          width="180"
          label="手机号"
          align="center"
        />
        <el-table-column
          prop="idCard"
          width="240"
          label="身份证号"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="comeReason"
          width="320"
          label="来访事由"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="faceImg"
          min-width="120"
          align="center"
          label="人脸"
        >
        <template slot-scope="scope">
          <el-image 
            style="max-width: 100px"
            :src="scope.row.faceImg" 
            :preview-src-list="[scope.row.faceImg]">
            <div slot="error" class="image-slot">
              <!-- <i class="el-icon-picture-outline"></i> -->
            </div>
          </el-image>
        </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="parseInt(pageSize)"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      openSearch: false,

      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,

      tableData: [],
      timeRange: "",
      fmData: {
        startTime: "",
        endTime: "",
      },
    }
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight() {
      const h = this.clientHeight - 360 + this.iframeHeigh
      const _h = this.clientHeight - 360
      return this.$store.state.inIframe ? h : _h
    }
  },
  watch: {
    timeRange(val) {
      if (Array.isArray(val) && val.length == 2) {
        this.fmData.startTime = val[0]
        this.fmData.endTime = val[1]
      } else {
        this.fmData.startTime = ""
        this.fmData.endTime = ""
      }
    },
  },
  mounted() {
    this.getTableData()
  },
  methods: {  
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      window.localStorage.setItem("pageSize", val)
      this.getTableData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getTableData()
    },

    handleSearch(val) {
      console.log(this.fmData)
      this.pageNo = 1
      this.getTableData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.timeRange = ""
      this.fmData.startTime = ""
      this.fmData.endTime = ""
      this.handleSearch()
    },
    async getTableData() {
      const url = "/epmetuser/icResiCollectVisitor/list"
      const { pageSize, pageNo, fmData } = this
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...fmData,
      })
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！")
        this.total = data.total || 0
        this.tableData = data.list
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
.wd50 {
  min-width: 200px;
}
.badge {
  display: block;
  color: #F1F2E5;
  background-color: #D7000F;
  border-radius: 12px;
  width: 70px;
}
</style>