From 71a4c95e0c4bcef0a3e9f3aee56c00328e0fb0c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Tue, 28 Jun 2022 14:04:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=98=B2=E6=8E=A7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../laborManage/visitorsManage.vue            | 224 ++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 src/views/projectFront/laborManage/visitorsManage.vue

diff --git a/src/views/projectFront/laborManage/visitorsManage.vue b/src/views/projectFront/laborManage/visitorsManage.vue
new file mode 100644
index 00000000..c0d11c42
--- /dev/null
+++ b/src/views/projectFront/laborManage/visitorsManage.vue
@@ -0,0 +1,224 @@
+<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;"
+              >添加<i class="el-icon-arrow-down"></i></el-button
+            >
+          </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="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>