厂改园

liukangdong

2024-06-07 ac44819c6bb4e71161c0b042d27a91c4f2c6666e

 admin/src/components/business/OperaVisitsDesWindow.vue

@@ -1,173 +1,191 @@
<template>
    <GlobalWindow
        :title="title"
        width="70%"
        :visible.sync="visible"
        append-to-body
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div class="list">
            <div class="list_item">
                <div class="list_item_label">拜访信息</div>
                <div class="list_item_val" v-if="info" style="display: inline-block">
                    <div class="list_item_val_item">拜访对方：{{info.receptMemberName}} - {{info.receptMemberDepartment}}</div>
                    <div class="list_item_val_item">预约时间：{{info.starttime}} 至 {{info.endtime}}</div>
                    <div class="list_item_val_item" v-if="info.inDate && info.outDate">签到时间：{{info.inDate}} 至 {{info.outDate}}</div>
                    <div class="list_item_val_item" v-else>签到时间：-</div>
                    <div class="list_item_val_item">拜访事由：{{info.reason}}</div>
                    <div class="list_item_val_item">申请人员：{{info.name}} {{info.companyName}}</div>
                    <div class="list_item_val_item">申请门禁：{{info.deviceRoleList ? info.deviceRoleList.map(item => item.name).join(' | ') : '-'}}</div>
                    <div class="list_item_val_item">创建时间：{{info.createDate}}</div>
                </div>
                <div class="list_item_val" v-if="info" style="display: inline-block;float: right">
                  <div class="list_item_val_item"   id="qrcode2" ref="qrcode2"></div>
                </div>
              </div>
            <div class="list_item">
                <div class="list_item_label">访客信息</div>
                <div class="list_item_table" v-if="info">
                    <el-table
                        :data="info.withUserList ? info.withUserList : []"
                        border
                        :header-cell-style="{background: '#dcdde2', color: 'rgb(51, 51, 51)'}"
                        style="width: 100%">
                      <el-table-column prop="status"   label="状态" min-width="100px">
                        <template slot-scope="{row}">
                          <span style="color: rgba(245, 154, 35, 0.996);" v-if="row.status === 0">待提交审批</span>
                          <span v-if="row.status === 1">审批中</span>
                          <span v-if="row.status === 2">审核通过</span>
                          <span style="color: red;" v-if="row.status === 3">审核不通过</span>
                          <span v-if="row.status === 4">取消</span>
                          <span v-if="row.status === 5">预约成功</span>
                          <span v-if="row.status === 6">预约失败</span>
                          <span v-if="row.status === 7">拜访中</span>
                          <span v-if="row.status === 8">已签离</span>
                          <span v-if="row.status === 9">已失效</span>
                        </template>
                      </el-table-column>
                        <el-table-column
                            width="150"
                            label="姓名">
                            <template slot-scope="{row}">
                                <span>{{row.name}}</span>
                                <span style="border-radius: 5px; padding: 2px 5px; box-sizing: border-box; border: 1px solid #0d68ff; color: #0d68ff; margin-left: 5px;" v-if="info.memberId === row.memberId">申请人</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="性别">
                            <template slot-scope="{row}">
                                <span v-if="row.sex === 1">男</span>
                                <span v-if="row.sex === 2">女</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="birthday"
                            label="年龄">
                            <template slot-scope="{row}">
                                <span>{{getAge(row.birthday)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="150"
                            prop="phone"
                            label="手机号">
                        </el-table-column>
                        <el-table-column
                            label="证件类型">
                            <template slot-scope="{row}">
                                <span v-if="row.idcardType === 0">身份证</span>
                                <span v-if="row.idcardType === 1">港澳证件</span>
                                <span v-if="row.idcardType === 2">护照</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="160"
                            prop="idcardDecode"
                            label="身份证号码">
                        </el-table-column>
                        <el-table-column
                            width="150"
                            prop="companyName"
                            label="组织">
                        </el-table-column>
                        <el-table-column
                            width="150"
                            prop="carNos"
                            label="随行车辆">
                        </el-table-column>
                        <el-table-column
                            width="150"
                            label="访客二维码">
                            <template slot-scope="{row}">
                              <div   :id="`qrcode${row.id}`" :ref="`qrcode${row.id}`"></div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="150"
                            label="人脸照片">
                            <template slot-scope="{row}">
                                <el-image
                                    v-if="row.faceImg"
                                    style="width: 100px; height: 100px"
                                    :src="info.prefixUrl + row.faceImg"
                                    :preview-src-list="[info.prefixUrl + row.faceImg]">
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="150"
                            label="健康证">
                            <template slot-scope="{row}">
                                <el-image
                                    v-if="row.imgurl"
                                    style="width: 100px; height: 100px"
                                    :src="info.prefixUrl + row.imgurl"
                                    :preview-src-list="[info.prefixUrl + row.imgurl]">
                                </el-image>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
<!--            <div class="list_item">-->
<!--                <div class="list_item_label">审批流程</div>-->
<!--                <div class="list_item_status">-->
<!--                    <div class="list_item_status_item" v-for="(item, index) in 3" :key="index">-->
<!--                        <div class="dian"></div>-->
<!--                        <div class="xian"></div>-->
<!--                        <div class="status_info">-->
<!--                            <span class="status_info_a">张三提交的劳务入厂申请</span>-->
<!--                            <span class="status_info_b">王经理（已同意）</span>-->
<!--                            <div class="status_info_c">来访参观工厂，望领导批准</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
  <GlobalWindow
    :title="title"
    width="70%"
    :visible.sync="visible"
    append-to-body
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <div class="list">
      <div class="list_item">
        <div class="list_item_label">拜访信息</div>
        <div class="list_item_val" v-if="info" style="display: inline-block">
          <div class="list_item_val_item">
            拜访对方：{{ info.receptMemberName }} -
            {{ info.receptMemberDepartment }}
          </div>
          <div class="list_item_val_item">
            预约时间：{{ info.starttime }} 至 {{ info.endtime }}
          </div>
          <div class="list_item_val_item" v-if="info.inDate && info.outDate">
            签到时间：{{ info.inDate }} 至 {{ info.outDate }}
          </div>
          <div class="list_item_val_item" v-else>签到时间：-</div>
          <div class="list_item_val_item">拜访事由：{{ info.reason }}</div>
          <div class="list_item_val_item">
            申请人员：{{ info.name }} {{ info.companyName }}
          </div>
          <div class="list_item_val_item">
            申请门禁：{{
              info.deviceRoleList
                ? info.deviceRoleList.map((item) => item.name).join(" | ")
                : "-"
            }}
          </div>
          <div class="list_item_val_item">创建时间：{{ info.createDate }}</div>
        </div>
    </GlobalWindow>
        <div
          class="list_item_val"
          v-if="info"
          style="display: inline-block; float: right"
        >
          <div class="list_item_val_item" id="qrcode2" ref="qrcode2"></div>
        </div>
      </div>
      <div class="list_item">
        <div class="list_item_label">访客信息</div>
        <div class="list_item_table" v-if="info">
          <el-table
            :data="info.withUserList ? info.withUserList : []"
            border
            :header-cell-style="{
              background: '#dcdde2',
              color: 'rgb(51, 51, 51)',
            }"
            style="width: 100%"
          >
            <el-table-column prop="status" label="状态" min-width="100px">
              <template slot-scope="{ row }">
                <span
                  style="color: rgba(245, 154, 35, 0.996)"
                  v-if="row.status === 0"
                  >待提交审批</span
                >
                <span v-if="row.status === 1">审批中</span>
                <span v-if="row.status === 2">审核通过</span>
                <span style="color: red" v-if="row.status === 3"
                  >审核不通过</span
                >
                <span v-if="row.status === 4">取消</span>
                <span v-if="row.status === 5">预约成功</span>
                <span v-if="row.status === 6">预约失败</span>
                <span v-if="row.status === 7">拜访中</span>
                <span v-if="row.status === 8">已签离</span>
                <span v-if="row.status === 9">已失效</span>
              </template>
            </el-table-column>
            <el-table-column width="150" label="姓名">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
                <span
                  style="
                    border-radius: 5px;
                    padding: 2px 5px;
                    box-sizing: border-box;
                    border: 1px solid #0d68ff;
                    color: #0d68ff;
                    margin-left: 5px;
                  "
                  v-if="info.memberId === row.memberId"
                  >申请人</span
                >
              </template>
            </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="{ row }">
                <span v-if="row.sex === 1">男</span>
                <span v-if="row.sex === 2">女</span>
              </template>
            </el-table-column>
            <el-table-column prop="birthday" label="年龄">
              <template slot-scope="{ row }">
                <span>{{ getAge(row.birthday) }}</span>
              </template>
            </el-table-column>
            <el-table-column width="150" prop="phone" label="手机号">
            </el-table-column>
            <el-table-column label="证件类型">
              <template slot-scope="{ row }">
                <span v-if="row.idcardType === 0">身份证</span>
                <span v-if="row.idcardType === 1">港澳证件</span>
                <span v-if="row.idcardType === 2">护照</span>
              </template>
            </el-table-column>
            <el-table-column width="160" prop="idcardDecode" label="身份证号码">
            </el-table-column>
            <el-table-column width="150" prop="companyName" label="组织">
            </el-table-column>
            <el-table-column width="150" prop="carNos" label="随行车辆">
            </el-table-column>
            <el-table-column width="150" label="访客二维码">
              <template slot-scope="{ row }">
                <div :id="`qrcode${row.id}`" :ref="`qrcode${row.id}`"></div>
              </template>
            </el-table-column>
            <el-table-column width="150" label="人脸照片">
              <template slot-scope="{ row }">
                <el-image
                  v-if="row.faceImg"
                  style="width: 100px; height: 100px"
                  :src="info.prefixUrl + row.faceImg"
                  :preview-src-list="[info.prefixUrl + row.faceImg]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column width="150" label="健康证">
              <template slot-scope="{ row }">
                <el-image
                  v-if="row.imgurl"
                  style="width: 100px; height: 100px"
                  :src="info.prefixUrl + row.imgurl"
                  :preview-src-list="[info.prefixUrl + row.imgurl]"
                >
                </el-image>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--            <div class="list_item">-->
      <!--                <div class="list_item_label">审批流程</div>-->
      <!--                <div class="list_item_status">-->
      <!--                    <div class="list_item_status_item" v-for="(item, index) in 3" :key="index">-->
      <!--                        <div class="dian"></div>-->
      <!--                        <div class="xian"></div>-->
      <!--                        <div class="status_info">-->
      <!--                            <span class="status_info_a">张三提交的劳务在园申请</span>-->
      <!--                            <span class="status_info_b">王经理（已同意）</span>-->
      <!--                            <div class="status_info_c">来访参观工厂，望领导批准</div>-->
      <!--                        </div>-->
      <!--                    </div>-->
      <!--                </div>-->
      <!--            </div>-->
    </div>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { queryById } from '@/api/business/visits'
import QRCode from "qrcodejs2";
import QRCode from "qrcodejs2"
export default {
  name: 'OperaVisitsWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
  data() {
    return {
      list: [],
      info: null,
      innerVisible:false
      innerVisible: false
    }
  },
  created () {
  created() {
  },
  methods: {
    getAge (val) {
    getAge(val) {
      if (!val) return ''
      const currentYear = new Date().getFullYear() // 当前的年份
      const calculationYear = new Date(val).getFullYear() // 计算的年份
@@ -180,9 +198,9 @@
        return calculationAge - 1
      }
    },
    crateQrcodeShow (div,qrcode1) {
      if(qrcode1 ==null ||qrcode1 ==''){
        return;
    crateQrcodeShow(div, qrcode1) {
      if (qrcode1 == null || qrcode1 == '') {
        return
      }
      this.qr = new QRCode(div, {
        width: 90,
@@ -191,7 +209,7 @@
      })
    },

    open (title, id) {
    open(title, id) {
      this.title = title
      this.visible = true
      queryById(id)
@@ -201,10 +219,10 @@
          this.$nextTick(() => {
            // this.$refs.qrcode2.innerHTML = ''
            // this.crateQrcodeShow('qrcode2',res.qrcode)
            if(this.info.withUserList ){
            if (this.info.withUserList) {
              this.info.withUserList.forEach(row => {
                this.$refs['qrcode'+row.id].innerHTML = ''
                this.crateQrcodeShow('qrcode'+row.id,row.qrcode)
                this.$refs['qrcode' + row.id].innerHTML = ''
                this.crateQrcodeShow('qrcode' + row.id, row.qrcode)
              })
            }
          })
@@ -214,103 +232,103 @@
}
</script>
<style>
    .el-image-viewer__wrapper {
        z-index: 3000 !important;
    }
.el-image-viewer__wrapper {
  z-index: 3000 !important;
}
</style>
<style lang="scss" scoped>
    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        .list_item {
            width: 100%;
            margin-bottom: 30px;
            &:last-child {
                margin-bottom: 0 !important;
            }
            .list_item_label {
                font-size: 18px;
                font-weight: 600;
                color: #000000;
                margin-bottom: 15px;
            }
            .list_item_info {
                font-size: 14px;
                color: #222222;
                margin-bottom: 10px;
            }
            .list_item_status {
                width: 100%;
                display: flex;
                flex-direction: column;
                .list_item_status_item {
                    width: 100%;
                    max-height: 100px;
                    position: relative;
                    margin-bottom: 30px;
                    .dian {
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        background: #ffb447;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translate(0, -50%);
                    }
                    .xian {
                        width: 1px;
                        height: calc(100% + 30px);
                        background: #ffb447;
                        position: absolute;
                        top: 50%;
                        left: 7px;
                        transform: translate(-50%, 0);
                    }
                    .status_info {
                        /*width: 100%;*/
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        margin-left: 30px;
                        box-sizing: border-box;
                        .status_info_a {
                            font-size: 16px;
                            color: black;
                            margin-bottom: 10px;
                        }
                        .status_info_b {
                            font-size: 13px;
                            color: #666666;
                            margin-bottom: 10px;
                        }
                        .status_info_c {
                            padding: 5px 10px;
                            background: #ececec;
                            font-size: 13px;
                            color: black;
                            border-radius: 5px;
                            box-sizing: border-box;
                        }
                    }
                }
            }
            .list_item_val {
                width: 100%;
                margin-bottom: 15px;
                &:last-child {
                    margin-bottom: 0 !important;
                }
                .list_item_val_item {
                    font-size: 14px;
                    color: #222222;
                    margin-bottom: 5px;
                    &:last-child {
                        margin-bottom: 0 !important;
                    }
                }
            }
        }
.list {
  width: 100%;
  display: flex;
  flex-direction: column;
  .list_item {
    width: 100%;
    margin-bottom: 30px;
    &:last-child {
      margin-bottom: 0 !important;
    }
    .list_item_label {
      font-size: 18px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 15px;
    }
    .list_item_info {
      font-size: 14px;
      color: #222222;
      margin-bottom: 10px;
    }
    .list_item_status {
      width: 100%;
      display: flex;
      flex-direction: column;
      .list_item_status_item {
        width: 100%;
        max-height: 100px;
        position: relative;
        margin-bottom: 30px;
        .dian {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background: #ffb447;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
        .xian {
          width: 1px;
          height: calc(100% + 30px);
          background: #ffb447;
          position: absolute;
          top: 50%;
          left: 7px;
          transform: translate(-50%, 0);
        }
        .status_info {
          /*width: 100%;*/
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 30px;
          box-sizing: border-box;
          .status_info_a {
            font-size: 16px;
            color: black;
            margin-bottom: 10px;
          }
          .status_info_b {
            font-size: 13px;
            color: #666666;
            margin-bottom: 10px;
          }
          .status_info_c {
            padding: 5px 10px;
            background: #ececec;
            font-size: 13px;
            color: black;
            border-radius: 5px;
            box-sizing: border-box;
          }
        }
      }
    }
    .list_item_val {
      width: 100%;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0 !important;
      }
      .list_item_val_item {
        font-size: 14px;
        color: #222222;
        margin-bottom: 5px;
        &:last-child {
          margin-bottom: 0 !important;
        }
      }
    }
  }
}
</style>