wangyifang
/
mkw-visit-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改照片信息

Browse Source
master
linyongLynn 2 months ago
parent 74ea9bc7a0
commit dcf8c39d46
3 changed files with 175 additions and 60 deletions
Show Stats Download Patch File Download Diff File

74
src/views/visit/check.vue
Unescape View File

@ -1,11 +1,11 @@
<template> <template>
<div style="padding: 0 20px"> <div style="padding: 0 20px">
<div ref="lxHeader"> <div ref="lxHeader">
<lx-header icon="md-apps" text="拜访记录管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px"> <lx-header icon="md-apps" text="拜访记录审核" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot> <slot>
<div style="display: flex;align-items: center;" class="selector"> <div style="display: flex;align-items: center;" class="selector">
<!-- 模拟数据开关 --> <!-- 模拟数据开关 -->
<div style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;"> <div v-if="false" style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;">
<span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span> <span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span>
<el-switch <el-switch
v-model="useMockData" v-model="useMockData"
@ -109,8 +109,8 @@
data() { data() {
return { return {
visible: false, visible: false,
// 模拟数据开关 // 模拟数据开关（隐藏，默认使用真实数据）
useMockData: true, useMockData: false,
select: { select: {
page: 1, page: 1,
page_size: 10, page_size: 10,
@ -173,9 +173,21 @@
end_date: '2024-10-14 18:00:00', end_date: '2024-10-14 18:00:00',
created_at: '2024-10-13 15:30:00', created_at: '2024-10-13 15:30:00',
admin: { name: '管理员A' }, admin: { name: '管理员A' },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=11', description: '访客正面照' }, {
{ url: 'https://picsum.photos/300/400?random=12', description: '访客侧面照' } id: 2001,
url: 'https://picsum.photos/300/400?random=11',
original_name: '访客正面照.png',
extension: 'png',
size: 2544
},
{
id: 2002,
url: 'https://picsum.photos/300/400?random=12',
original_name: '访客侧面照.png',
extension: 'png',
size: 2231
}
] ]
}, },
{ {
@ -196,8 +208,14 @@
end_date: '2024-10-15 20:00:00', end_date: '2024-10-15 20:00:00',
created_at: '2024-10-13 16:00:00', created_at: '2024-10-13 16:00:00',
admin: { name: '管理员B' }, admin: { name: '管理员B' },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=13', description: '施工人员照片' } {
id: 2003,
url: 'https://picsum.photos/300/400?random=13',
original_name: '施工人员照片.png',
extension: 'png',
size: 2784
}
] ]
}, },
{ {
@ -218,9 +236,21 @@
end_date: '2024-10-14 16:00:00', end_date: '2024-10-14 16:00:00',
created_at: '2024-10-13 14:20:00', created_at: '2024-10-13 14:20:00',
admin: { name: '管理员C' }, admin: { name: '管理员C' },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/400/300?random=14', description: '车辆前方照片' }, {
{ url: 'https://picsum.photos/400/300?random=15', description: '车辆侧面照片' } id: 2004,
url: 'https://picsum.photos/400/300?random=14',
original_name: '车辆前方照片.png',
extension: 'png',
size: 2686
},
{
id: 2005,
url: 'https://picsum.photos/400/300?random=15',
original_name: '车辆侧面照片.png',
extension: 'png',
size: 2544
}
] ]
}, },
{ {
@ -241,8 +271,14 @@
end_date: '2024-10-16 17:00:00', end_date: '2024-10-16 17:00:00',
created_at: '2024-10-14 08:30:00', created_at: '2024-10-14 08:30:00',
admin: { name: '管理员D' }, admin: { name: '管理员D' },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=16', description: '访客证件照' } {
id: 2006,
url: 'https://picsum.photos/300/400?random=16',
original_name: '访客证件照.png',
extension: 'png',
size: 2544
}
] ]
}, },
{ {
@ -263,8 +299,14 @@
end_date: '2024-10-15 19:00:00', end_date: '2024-10-15 19:00:00',
created_at: '2024-10-13 17:15:00', created_at: '2024-10-13 17:15:00',
admin: { name: '管理员E' }, admin: { name: '管理员E' },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=17', description: '施工人员照片' } {
id: 2007,
url: 'https://picsum.photos/300/400?random=17',
original_name: '施工人员照片.png',
extension: 'png',
size: 2784
}
] ]
} }
], ],

56
src/views/visit/component/showVisit.vue
Unescape View File

@ -351,28 +351,26 @@
<!-- 照片列表 --> <!-- 照片列表 -->
<template v-slot:photos> <template v-slot:photos>
<div class="xy-table-item" v-if="form.photos && form.photos.length > 0"> <div class="photo-full-width" v-if="form.vehicle_images_detail && form.vehicle_images_detail.length > 0">
<div class="xy-table-item-content" style="width:100%"> <div class="photo-list">
<div class="photo-list"> <div class="photo-item" v-for="(photo, index) in form.vehicle_images_detail" :key="index">
<div class="photo-item" v-for="(photo, index) in form.photos" :key="index"> <div class="photo-wrapper">
<div class="photo-wrapper"> <el-image
<el-image :src="photo.url"
:src="photo.url" :preview-src-list="form.vehicle_images_detail.map(p => p.url)"
:preview-src-list="form.photos.map(p => p.url)" :initial-index="index"
:initial-index="index" fit="cover"
fit="cover" class="photo-image">
class="photo-image"> <div slot="error" class="image-slot">
<div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i>
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="photo-overlay">
<i class="el-icon-zoom-in"></i>
<span>点击预览</span>
</div> </div>
</el-image>
<div class="photo-overlay">
<i class="el-icon-zoom-in"></i>
<span>点击预览</span>
</div> </div>
<div class="photo-desc">{{ photo.description }}</div>
</div> </div>
<div class="photo-desc">{{ photo.original_name }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -446,7 +444,7 @@
accompany_id:"", accompany_id:"",
accept_goods_admin_id: "", accept_goods_admin_id: "",
photoinfo: "", photoinfo: "",
photos: "", photos: [],
checkRecord: '', checkRecord: '',
checkForm: {}, checkForm: {},
checkText: '' checkText: ''
@ -714,12 +712,30 @@
font-size: 32px; font-size: 32px;
} }
// 照片全宽容器样式
.photo-full-width {
width: 100% !important;
max-width: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
// 突破xy-dialog的布局限制
position: relative;
left: -50%;
width: 200% !important;
margin-left: 50% !important;
}
// 照片列表样式 // 照片列表样式
.photo-list { .photo-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px; gap: 15px;
margin-top: 5px; margin-top: 5px;
width: 100%;
justify-content: flex-start;
max-width: 100%;
.photo-item { .photo-item {
display: flex; display: flex;

105
src/views/visit/record.vue
Unescape View File

@ -5,7 +5,7 @@
<slot> <slot>
<div style="display: flex;align-items: center;" class="selector"> <div style="display: flex;align-items: center;" class="selector">
<!-- 模拟数据开关 --> <!-- 模拟数据开关 -->
<div style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;"> <div v-if="false" style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;">
<span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span> <span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span>
<el-switch <el-switch
v-model="useMockData" v-model="useMockData"
@ -192,17 +192,17 @@
</el-row> </el-row>
<!-- 照片信息 --> <!-- 照片信息 -->
<el-row :gutter="20" class="detail-row" v-if="currentDetail.photos && currentDetail.photos.length > 0"> <el-row :gutter="20" class="detail-row" v-if="currentDetail.vehicle_images_detail && currentDetail.vehicle_images_detail.length > 0">
<el-col :span="24"> <el-col :span="24">
<div class="detail-item detail-photos"> <div class="detail-item detail-photos">
<span class="detail-label">照片信息：</span> <span class="detail-label">照片信息：</span>
<div class="detail-value"> <div class="detail-value">
<div class="photo-list"> <div class="photo-list">
<div class="photo-item" v-for="(photo, index) in currentDetail.photos" :key="index"> <div class="photo-item" v-for="(photo, index) in currentDetail.vehicle_images_detail" :key="index">
<div class="photo-wrapper"> <div class="photo-wrapper">
<el-image <el-image
:src="photo.url" :src="photo.url"
:preview-src-list="currentDetail.photos.map(p => p.url)" :preview-src-list="currentDetail.vehicle_images_detail.map(p => p.url)"
:initial-index="index" :initial-index="index"
fit="cover" fit="cover"
class="photo-image"> class="photo-image">
@ -215,7 +215,7 @@
<span>点击预览</span> <span>点击预览</span>
</div> </div>
</div> </div>
<div class="photo-desc">{{ photo.description }}</div> <div class="photo-desc">{{ photo.original_name }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -247,8 +247,8 @@
data() { data() {
return { return {
visible: false, visible: false,
// 模拟数据开关（开发时可设为true，生产环境设为false） // 模拟数据开关（隐藏，默认使用真实数据）
useMockData: true, useMockData: false,
// 详情弹窗控制 // 详情弹窗控制
detailVisible: false, detailVisible: false,
currentDetail: null, currentDetail: null,
@ -321,9 +321,21 @@
admin: { admin: {
name: '管理员A' name: '管理员A'
}, },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=1', description: '访客正面照' }, {
{ url: 'https://picsum.photos/300/400?random=2', description: '访客侧面照' } id: 1001,
url: 'https://picsum.photos/300/400?random=1',
original_name: '访客正面照.png',
extension: 'png',
size: 2544
},
{
id: 1002,
url: 'https://picsum.photos/300/400?random=2',
original_name: '访客侧面照.png',
extension: 'png',
size: 2231
}
] ]
}, },
{ {
@ -349,8 +361,14 @@
admin: { admin: {
name: '管理员B' name: '管理员B'
}, },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=3', description: '施工人员照片' } {
id: 1003,
url: 'https://picsum.photos/300/400?random=3',
original_name: '施工人员照片.png',
extension: 'png',
size: 2784
}
] ]
}, },
{ {
@ -379,10 +397,28 @@
admin: { admin: {
name: '管理员C' name: '管理员C'
}, },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/400/300?random=4', description: '车辆前方照片' }, {
{ url: 'https://picsum.photos/400/300?random=5', description: '车辆侧面照片' }, id: 1004,
{ url: 'https://picsum.photos/400/300?random=6', description: '车牌号照片' } url: 'https://picsum.photos/400/300?random=4',
original_name: '车辆前方照片.png',
extension: 'png',
size: 2686
},
{
id: 1005,
url: 'https://picsum.photos/400/300?random=5',
original_name: '车辆侧面照片.png',
extension: 'png',
size: 2544
},
{
id: 1006,
url: 'https://picsum.photos/400/300?random=6',
original_name: '车牌号照片.png',
extension: 'png',
size: 2231
}
] ]
}, },
{ {
@ -408,8 +444,14 @@
admin: { admin: {
name: '管理员D' name: '管理员D'
}, },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/300/400?random=7', description: '访客证件照' } {
id: 1007,
url: 'https://picsum.photos/300/400?random=7',
original_name: '访客证件照.png',
extension: 'png',
size: 2544
}
] ]
}, },
{ {
@ -434,7 +476,8 @@
created_at: '2024-10-11 17:15:00', created_at: '2024-10-11 17:15:00',
admin: { admin: {
name: '管理员E' name: '管理员E'
} },
vehicle_images_detail: []
}, },
{ {
id: 6, id: 6,
@ -458,7 +501,8 @@
created_at: '2024-10-10 10:00:00', created_at: '2024-10-10 10:00:00',
admin: { admin: {
name: '管理员F' name: '管理员F'
} },
vehicle_images_detail: []
}, },
{ {
id: 7, id: 7,
@ -485,9 +529,21 @@
admin: { admin: {
name: '管理员G' name: '管理员G'
}, },
photos: [ vehicle_images_detail: [
{ url: 'https://picsum.photos/400/300?random=8', description: '货车照片' }, {
{ url: 'https://picsum.photos/300/400?random=9', description: '司机照片' } id: 1008,
url: 'https://picsum.photos/400/300?random=8',
original_name: '货车照片.png',
extension: 'png',
size: 2686
},
{
id: 1009,
url: 'https://picsum.photos/300/400?random=9',
original_name: '司机照片.png',
extension: 'png',
size: 2544
}
] ]
}, },
{ {
@ -512,7 +568,8 @@
created_at: '2024-10-12 10:30:00', created_at: '2024-10-12 10:30:00',
admin: { admin: {
name: '管理员H' name: '管理员H'
} },
vehicle_images_detail: []
} }
], ],
table: [{ table: [{

Write Preview
Loading…
Cancel
Save