From cb78b4fbcd31bbee7ed7882c7b5f6f660f20c511 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期一, 20 十月 2025 09:56:19 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/components/business/OperaVisitsDesWindow.vue | 499 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 289 insertions(+), 210 deletions(-)
diff --git a/admin/src/components/business/OperaVisitsDesWindow.vue b/admin/src/components/business/OperaVisitsDesWindow.vue
index 6170e27..225acf7 100644
--- a/admin/src/components/business/OperaVisitsDesWindow.vue
+++ b/admin/src/components/business/OperaVisitsDesWindow.vue
@@ -1,133 +1,191 @@
<template>
- <GlobalWindow
- :title="title"
- width="60%"
- :visible.sync="visible"
- :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">
- <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">鎷滆浜嬬敱锛歿{info.reason}}</div>
- <div class="list_item_val_item">鐢宠浜哄憳锛歿{info.name}} {{info.companyName}}</div>
- <div class="list_item_val_item">鐢宠闂ㄧ锛歿{info.deviceList ? info.deviceList.map(item => item.name).join(',') : ''}}</div>
- <div class="list_item_val_item">鍒涘缓鏃堕棿锛歿{info.createDate}}</div>
- </div>
- </div>
- <div class="list_item">
- <div class="list_item_label">璁垮淇℃伅</div>
- <div class="list_item_info" v-if="info">闅忚杞﹁締锛歿{info.carNos}}</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="name"
- label="濮撳悕">
- </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
- prop="companyName"
- label="鍏徃">
- </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"
export default {
name: 'OperaVisitsWindow',
extends: BaseOpera,
components: { GlobalWindow },
- data () {
+ data() {
return {
list: [],
- info: null
+ info: null,
+ innerVisible: false
}
},
+ created() {
+ },
methods: {
- getAge (val) {
+ getAge(val) {
if (!val) return ''
const currentYear = new Date().getFullYear() // 褰撳墠鐨勫勾浠�
const calculationYear = new Date(val).getFullYear() // 璁＄畻鐨勫勾浠�
@@ -140,116 +198,137 @@
return calculationAge - 1
}
},
- open (title, id) {
+ crateQrcodeShow(div, qrcode1) {
+ if (qrcode1 == null || qrcode1 == '') {
+ return
+ }
+ this.qr = new QRCode(div, {
+ width: 90,
+ height: 90,
+ text: qrcode1
+ })
+ },
+
+ open(title, id) {
this.title = title
this.visible = true
queryById(id)
.then(res => {
console.log(res)
this.info = res
+ this.$nextTick(() => {
+ // this.$refs.qrcode2.innerHTML = ''
+ // this.crateQrcodeShow('qrcode2',res.qrcode)
+ if (this.info.withUserList) {
+ this.info.withUserList.forEach(row => {
+ this.$refs['qrcode' + row.id].innerHTML = ''
+ this.crateQrcodeShow('qrcode' + row.id, row.qrcode)
+ })
+ }
+ })
})
}
}
}
</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>
--
Gitblit v1.9.3