zhgdyun/src/views/projectFront/laborManage/visitorsManage.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <!-- :label="$t('message.personnelPosition.beaconManage.workerName')"
      :placeholder="$t('message.personnelPosition.please_enter')"
      -->
        <el-form-item prop="workerName">
          <el-input
            v-model="searchForm.workerName"
            placeholder="请输入人员姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="workerPhone">
          <el-input
            v-model="searchForm.workerPhone"
            placeholder="请输入人员电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="status" placeholder="请选择审核状态">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="toSelect()">
            {{ $t('message.personnelPosition.beaconManage.query') }}
          </el-button>
          <!-- <el-button type="primary" @click="toAdd()">
            {{ $t("message.laborDev.add2") }}
          </el-button> -->
          <el-popover
            placement="bottom"
            title="请扫描二维码添加访客记录"
            width="200"
            trigger="manual"
            content=""
          >
            <div id="qrCode" ref="qrCodeDiv"></div>
            <el-button
              slot="reference"
              @click="showQrCode = !showQrCode"
              style="margin-left: 10px"
              >添加</el-button
            >
            <!-- <i class="el-icon-arrow-down"></i> -->
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="tableData">
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="workerName"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="workerPhone"
          label="电话"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          label="身份证号码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          label="所属单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          label="来访时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          label="核酸状态"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('message.personnelPosition.beaconManage.table.operation')"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="passRcord(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>通过记录</span>
              </div>
              <div @click="pass(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>通过</span>
              </div>
              <div @click="ontPass(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>驳回</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      status: '',
      statusList: [
        {
          id: 1,
          value: '审核中'
        },
        {
          id: 2,
          value: '待审核'
        }
      ],
      searchForm: {
        workerName: '',
        workerPhone: ''
      },
      tableData: [
        {
          workerName: '张三'
        }
      ],
      showQrCode: false,
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getData()
    this.bindQRCode()
  },
  methods: {
    // 获取所有的访客信息
    getData() {},
    // 查询访客信息
    toSelect() {
      this.getData()
    },
    // 添加访客
    toAdd() {},
    // 通行记录
    passRcord() {},
    // 通过
    canPass() {},
    // 驳回
    ontPass() {},
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val
      this.getData()
    },
    //生成访客录入 二维码
    bindQRCode() {
      document.getElementById('qrCode').innerHTML = ''
      let httpUrl = window.location.origin
      let userId = this.$store.state.userInfo.userId
      let projectSn = this.$store.state.projectSn
      new QRCode(this.$refs.qrCodeDiv, {
        // text:  httpUrl+'/doc/h5/index.html?userId='+userId+'&projectSn='+projectSn,
        text: '123',
        width: 200,
        height: 200,
        colorDark: '#333333', //二维码颜色
        colorLight: '#ffffff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      })
    }
  }
}
</script>