|
|
|
@ -7,7 +7,7 @@ |
|
|
|
<div class="empty-text-sub">等待企业上传材料</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-else-if="Number(taskStatus) === 5"> |
|
|
|
<template v-else-if="Number(taskStatus) === 5 && !taskItemList.some((item) => (item.itemValue || []).length > 0)"> |
|
|
|
<div class="empty-state"> |
|
|
|
<van-image :src="noDataImg" width="151" height="120" /> |
|
|
|
<div class="empty-text-main">暂无资料上传</div> |
|
|
|
@ -20,62 +20,32 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<div |
|
|
|
v-for="(item, index) in taskItemList" |
|
|
|
:key="index" |
|
|
|
class="material-card" |
|
|
|
> |
|
|
|
<div class="material-title"> |
|
|
|
<span class="required-mark">*</span>{{ item.itemName }} |
|
|
|
</div> |
|
|
|
<div v-for="(item, index) in taskItemList" :key="index" class="material-card"> |
|
|
|
<div class="material-title"><span class="required-mark">*</span>{{ item.itemName }}</div> |
|
|
|
|
|
|
|
<div class="material-media"> |
|
|
|
<template v-for="(url, fileIndex) in item.itemValue" :key="fileIndex"> |
|
|
|
<div |
|
|
|
v-if="isVideo(url)" |
|
|
|
class="media-item media-item--video" |
|
|
|
@click="onPreview(url, item.itemValue)" |
|
|
|
> |
|
|
|
<video |
|
|
|
:src="resolveMediaUrl(url)" |
|
|
|
muted |
|
|
|
preload="metadata" |
|
|
|
class="video-thumb" |
|
|
|
></video> |
|
|
|
<div v-if="isVideo(url)" class="media-item media-item--video" @click="onPreview(url, item.itemValue)"> |
|
|
|
<video :src="resolveMediaUrl(url)" muted preload="metadata" class="video-thumb"></video> |
|
|
|
<van-icon name="play-circle-o" class="play-icon" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-else-if="isPdf(url)" |
|
|
|
class="media-item media-item--pdf" |
|
|
|
@click="onPreview(url, item.itemValue)" |
|
|
|
> |
|
|
|
<div v-else-if="isPdf(url)" class="media-item media-item--pdf" @click="onPreview(url, item.itemValue)"> |
|
|
|
<div class="pdf-icon-wrapper"> |
|
|
|
<van-icon name="description" class="pdf-icon" /> |
|
|
|
<span class="pdf-text">PDF</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<van-image |
|
|
|
v-else |
|
|
|
:src="resolveMediaUrl(url)" |
|
|
|
fit="cover" |
|
|
|
class="media-item" |
|
|
|
@click="onPreview(url, item.itemValue)" |
|
|
|
/> |
|
|
|
<van-image v-else :src="resolveMediaUrl(url)" fit="cover" class="media-item" @click="onPreview(url, item.itemValue)" /> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-field |
|
|
|
v-if="Number(taskStatus) >= 2" |
|
|
|
class="audit-field" |
|
|
|
label="审核" |
|
|
|
:required="Number(taskStatus) === 3" |
|
|
|
> |
|
|
|
<van-field v-if="Number(taskStatus) >= 2" class="audit-field" label="审核" :required="Number(taskStatus) === 3"> |
|
|
|
<template #input> |
|
|
|
<van-radio-group v-if="Number(taskStatus) === 3" v-model="item.pass" direction="horizontal" @change="onAuditChange(item)"> |
|
|
|
<van-radio :name="1" icon-size="16px">通过</van-radio> |
|
|
|
<van-radio :name="0" icon-size="16px">有异议</van-radio> |
|
|
|
<van-radio :name="0" icon-size="16px">不通过</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
<span v-else class="readonly-text">{{ item.pass === 1 ? '通过' : (item.pass === 0 ? '有异议' : '') }}</span> |
|
|
|
<span v-else class="readonly-text">{{ item.pass === 1 ? '通过' : item.pass === 0 ? '不通过' : '' }}</span> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
|
|
|
|
@ -86,7 +56,7 @@ |
|
|
|
type="textarea" |
|
|
|
rows="3" |
|
|
|
maxlength="1000" |
|
|
|
show-word-limit |
|
|
|
:show-word-limit="Number(taskStatus) === 3" |
|
|
|
placeholder="请输入" |
|
|
|
label="原因" |
|
|
|
:readonly="Number(taskStatus) !== 3" |
|
|
|
@ -95,150 +65,113 @@ |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="result-card" v-if="Number(taskStatus) >= 2"> |
|
|
|
<div class="result-title">检查结果</div> |
|
|
|
<template v-if="Number(taskStatus) === 3"> |
|
|
|
<template v-if="taskItemList.length > 0 && taskItemList.every(item => item.pass === 1)"> |
|
|
|
<div class="readonly-result-text" style="padding-top: 4px;">检查结果：通过</div> |
|
|
|
<div class="result-card" v-if="Number(taskStatus) >= 2"> |
|
|
|
<div class="result-title">检查结果</div> |
|
|
|
<template v-if="Number(taskStatus) === 3"> |
|
|
|
<template v-if="taskItemList.length > 0 && taskItemList.every((item) => item.pass === 1)"> |
|
|
|
<div class="readonly-result-text" style="padding-top: 4px">检查结果：通过</div> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<van-radio-group v-model="inspectResult.checkResult" class="result-options" @change="onResultTypeChange"> |
|
|
|
<van-radio :name="1" icon-size="16px" v-if="Number(taskTypeId) != 5">转为待核实处置案件</van-radio> |
|
|
|
<van-radio :name="2" icon-size="16px">退回企业补正材料</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
|
|
|
|
<van-field |
|
|
|
v-if="inspectResult.checkResult === 2" |
|
|
|
v-model="inspectResult.deadline" |
|
|
|
class="deadline-field" |
|
|
|
label="补正时限" |
|
|
|
placeholder="请选择" |
|
|
|
readonly |
|
|
|
is-link |
|
|
|
required |
|
|
|
:rules="[{ required: true, message: '请选择补正时限' }]" |
|
|
|
@click="showDatePicker = true" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<van-radio-group v-model="inspectResult.checkResult" class="result-options" @change="onResultTypeChange"> |
|
|
|
<van-radio :name="1" icon-size="16px">转为待核实处置案件</van-radio> |
|
|
|
<van-radio :name="2" icon-size="16px">退回企业补正材料</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
|
|
|
|
<van-field |
|
|
|
v-if="inspectResult.checkResult === 2" |
|
|
|
v-model="inspectResult.deadline" |
|
|
|
class="deadline-field" |
|
|
|
label="补正时限" |
|
|
|
placeholder="请选择" |
|
|
|
readonly |
|
|
|
is-link |
|
|
|
required |
|
|
|
:rules="[{ required: true, message: '请选择补正时限' }]" |
|
|
|
@click="showDatePicker = true" |
|
|
|
/> |
|
|
|
<div class="readonly-result-text" style="padding-top: 4px">检查结果：{{ TASK_STATUS_TEXT[Number(taskStatus)] }}</div> |
|
|
|
<div class="readonly-result-text" v-if="Number(taskStatus) !== 3 && inspectResult.checkResult === 2 && inspectResult.deadline"> |
|
|
|
补正时限：{{ inspectResult.deadline }} |
|
|
|
</div> |
|
|
|
<div class="readonly-result-text" v-else>检查时间：{{ Number(taskStatus) === 4 ? inspectResult.checkTime : overdueCheckTime }}</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<div class="readonly-result-text" style="padding-top: 4px;"> |
|
|
|
检查结果：{{ inspectResult.checkResult === 0 ? '通过' : (inspectResult.checkResult === 1 ? '转为待核实处置案件' : (inspectResult.checkResult === 2 ? '退回企业补正材料' : '')) }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<div class="readonly-result-text" v-if="Number(taskStatus) !== 3 && inspectResult.checkTime"> |
|
|
|
检查时间：{{ inspectResult.checkTime }} |
|
|
|
</div> |
|
|
|
<div class="readonly-result-text" v-if="Number(taskStatus) !== 3 && inspectResult.checkResult === 2 && inspectResult.deadline"> |
|
|
|
补正时限：{{ inspectResult.deadline }} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="cloud-record-card" v-if="Number(taskStatus) === 4 && Number(digitalVoiceLoggingStatus) !== 0"> |
|
|
|
<div class="cloud-record-row"> |
|
|
|
<span class="cloud-record-label">云笔录</span> |
|
|
|
<van-button |
|
|
|
class="btn-view" |
|
|
|
size="small" |
|
|
|
plain |
|
|
|
type="primary" |
|
|
|
@click="onViewCloudRecord" |
|
|
|
> |
|
|
|
查看 |
|
|
|
</van-button> |
|
|
|
|
|
|
|
<div class="cloud-record-card" v-if="Number(taskStatus) === 4 && Number(digitalVoiceLoggingStatus) !== 0"> |
|
|
|
<div class="cloud-record-row"> |
|
|
|
<span class="cloud-record-label">云笔录</span> |
|
|
|
<van-button class="btn-view" size="small" plain type="primary" @click="onViewCloudRecord"> 查看 </van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="evaluate-card" v-if="Number(taskStatus) === 4 && evaluateData"> |
|
|
|
<div class="card-title">评价</div> |
|
|
|
|
|
|
|
<!-- 表情选择 --> |
|
|
|
<div class="emoji-section"> |
|
|
|
<div class="emoji-item" |
|
|
|
:class="{ active: evaluateForm.satisfactionLevel === 3, disabled: true }"> |
|
|
|
<img class="emoji-img" |
|
|
|
:src="evaluateForm.satisfactionLevel === 3 ? veryGoodImg : veryGoodDisImg" alt="满意" /> |
|
|
|
<span class="emoji-label">满意</span> |
|
|
|
|
|
|
|
<div class="evaluate-card" v-if="Number(taskStatus) === 4 && evaluateData"> |
|
|
|
<div class="card-title">评价</div> |
|
|
|
|
|
|
|
<!-- 表情选择 --> |
|
|
|
<div class="emoji-section"> |
|
|
|
<div class="emoji-item" :class="{ active: evaluateForm.satisfactionLevel === 3, disabled: true }"> |
|
|
|
<img class="emoji-img" :src="evaluateForm.satisfactionLevel === 3 ? veryGoodImg : veryGoodDisImg" alt="满意" /> |
|
|
|
<span class="emoji-label">满意</span> |
|
|
|
</div> |
|
|
|
<div class="emoji-item" |
|
|
|
:class="{ active: evaluateForm.satisfactionLevel === 2, disabled: true }"> |
|
|
|
<img class="emoji-img" :src="evaluateForm.satisfactionLevel === 2 ? goodImg : goodDisImg" |
|
|
|
alt="一般" /> |
|
|
|
<span class="emoji-label">一般</span> |
|
|
|
<div class="emoji-item" :class="{ active: evaluateForm.satisfactionLevel === 2, disabled: true }"> |
|
|
|
<img class="emoji-img" :src="evaluateForm.satisfactionLevel === 2 ? goodImg : goodDisImg" alt="一般" /> |
|
|
|
<span class="emoji-label">一般</span> |
|
|
|
</div> |
|
|
|
<div class="emoji-item" |
|
|
|
:class="{ active: evaluateForm.satisfactionLevel === 1, disabled: true }"> |
|
|
|
<img class="emoji-img" :src="evaluateForm.satisfactionLevel === 1 ? badImg : badDisImg" |
|
|
|
alt="不满意" /> |
|
|
|
<span class="emoji-label">不满意</span> |
|
|
|
<div class="emoji-item" :class="{ active: evaluateForm.satisfactionLevel === 1, disabled: true }"> |
|
|
|
<img class="emoji-img" :src="evaluateForm.satisfactionLevel === 1 ? badImg : badDisImg" alt="不满意" /> |
|
|
|
<span class="emoji-label">不满意</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 评价原因 --> |
|
|
|
<div class="reason-section" v-if="evaluateForm.satisfactionLevel === 1 || evaluateForm.satisfactionLevel === 2"> |
|
|
|
<div class="reason-row"> |
|
|
|
<span class="reason-label"><span class="required-mark">*</span>原因：</span> |
|
|
|
<div class="reason-input-wrap"> |
|
|
|
<van-field |
|
|
|
v-model="evaluateForm.commentReason" |
|
|
|
type="textarea" |
|
|
|
rows="3" |
|
|
|
maxlength="300" |
|
|
|
show-word-limit |
|
|
|
placeholder="请输入" |
|
|
|
readonly |
|
|
|
class="reason-field" |
|
|
|
/> |
|
|
|
<!-- 评价原因 --> |
|
|
|
<div class="reason-section" v-if="evaluateForm.satisfactionLevel === 1 || evaluateForm.satisfactionLevel === 2"> |
|
|
|
<div class="reason-row"> |
|
|
|
<span class="reason-label"><span class="required-mark">*</span>原因：</span> |
|
|
|
<div class="reason-input-wrap"> |
|
|
|
<van-field |
|
|
|
v-model="evaluateForm.commentReason" |
|
|
|
type="textarea" |
|
|
|
rows="3" |
|
|
|
maxlength="300" |
|
|
|
show-word-limit |
|
|
|
placeholder="请输入" |
|
|
|
readonly |
|
|
|
class="reason-field" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<van-popup v-model:show="showDatePicker" round position="bottom" teleport="body"> |
|
|
|
<van-date-picker |
|
|
|
v-model="pickerDate" |
|
|
|
title="选择补正时限" |
|
|
|
:min-date="minDate" |
|
|
|
@confirm="onDateConfirm" |
|
|
|
@cancel="showDatePicker = false" |
|
|
|
/> |
|
|
|
<van-date-picker v-model="pickerDate" title="选择补正时限" :min-date="minDate" @confirm="onDateConfirm" @cancel="showDatePicker = false" /> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<!-- 视频预览弹窗（审核播放） --> |
|
|
|
<van-popup |
|
|
|
v-model:show="showVideoPreview" |
|
|
|
class="video-preview-popup" |
|
|
|
teleport="body" |
|
|
|
closeable |
|
|
|
@closed="previewVideoUrl = ''" |
|
|
|
> |
|
|
|
<video |
|
|
|
v-if="previewVideoUrl" |
|
|
|
:src="previewVideoUrl" |
|
|
|
controls |
|
|
|
autoplay |
|
|
|
playsinline |
|
|
|
webkit-playsinline |
|
|
|
class="preview-video" |
|
|
|
></video> |
|
|
|
<van-popup v-model:show="showVideoPreview" class="video-preview-popup" teleport="body" closeable @closed="previewVideoUrl = ''"> |
|
|
|
<video v-if="previewVideoUrl" :src="previewVideoUrl" controls autoplay playsinline webkit-playsinline class="preview-video"></video> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup name="NosDetailMaterialsTab"> |
|
|
|
import { showImagePreview, showToast } from 'vant'; |
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
import noDataImg from '@/assets/images/nos/no-data.png'; |
|
|
|
import { toFullFileUrl } from '@/util/fileUrl'; |
|
|
|
|
|
|
|
import veryGoodImg from '@/assets/images/eval-verygood.png'; |
|
|
|
import veryGoodDisImg from '@/assets/images/eval-verygood-dis.png'; |
|
|
|
import goodImg from '@/assets/images/eval-good.png'; |
|
|
|
import goodDisImg from '@/assets/images/eval-good-dis.png'; |
|
|
|
import badImg from '@/assets/images/eval-bad.png'; |
|
|
|
import badDisImg from '@/assets/images/eval-bad-dis.png'; |
|
|
|
import { showImagePreview, showToast } from 'vant' |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import noDataImg from '@/assets/images/nos/no-data.png' |
|
|
|
import { toFullFileUrl } from '@/util/fileUrl' |
|
|
|
|
|
|
|
import veryGoodImg from '@/assets/images/eval-verygood.png' |
|
|
|
import veryGoodDisImg from '@/assets/images/eval-verygood-dis.png' |
|
|
|
import goodImg from '@/assets/images/eval-good.png' |
|
|
|
import goodDisImg from '@/assets/images/eval-good-dis.png' |
|
|
|
import badImg from '@/assets/images/eval-bad.png' |
|
|
|
import badDisImg from '@/assets/images/eval-bad-dis.png' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
taskStatus: { |
|
|
|
@ -247,110 +180,119 @@ const props = defineProps({ |
|
|
|
}, |
|
|
|
taskDeadline: { |
|
|
|
type: String, |
|
|
|
default: '', |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
taskTypeId: { |
|
|
|
type: [Number, String], |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
evaluateData: { |
|
|
|
type: Object, |
|
|
|
default: null, |
|
|
|
default: null |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
const emit = defineEmits(['view-cloud-record']); |
|
|
|
const emit = defineEmits(['view-cloud-record']) |
|
|
|
|
|
|
|
const onViewCloudRecord = () => { |
|
|
|
emit('view-cloud-record'); |
|
|
|
}; |
|
|
|
emit('view-cloud-record') |
|
|
|
} |
|
|
|
|
|
|
|
const overdueCheckTime = computed(() => props.taskDeadline || ''); |
|
|
|
const overdueCheckTime = computed(() => props.taskDeadline || '') |
|
|
|
const TASK_STATUS_TEXT = { |
|
|
|
1: '企业处理中', |
|
|
|
2: '退回企业补正', |
|
|
|
3: '待审核', |
|
|
|
4: '已办结', |
|
|
|
5: '已办结(超期)', |
|
|
|
6: '转为待核实处置案件' |
|
|
|
} |
|
|
|
|
|
|
|
const evaluateForm = ref({ |
|
|
|
satisfactionLevel: 3, // 3: 满意, 2: 一般, 1: 不满意 |
|
|
|
commentReason: "", |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
watch(() => props.evaluateData, (val) => { |
|
|
|
if (val && val.satisfaction !== undefined) { |
|
|
|
const satMap = { 0: 3, 1: 2, 2: 1 }; |
|
|
|
evaluateForm.value.satisfactionLevel = satMap[val.satisfaction] !== undefined ? satMap[val.satisfaction] : 3; |
|
|
|
|
|
|
|
if (val.commentReason) { |
|
|
|
evaluateForm.value.commentReason = val.commentReason; |
|
|
|
commentReason: '' |
|
|
|
}) |
|
|
|
|
|
|
|
watch( |
|
|
|
() => props.evaluateData, |
|
|
|
(val) => { |
|
|
|
if (val && val.satisfaction !== undefined) { |
|
|
|
const satMap = { 0: 3, 1: 2, 2: 1 } |
|
|
|
evaluateForm.value.satisfactionLevel = satMap[val.satisfaction] !== undefined ? satMap[val.satisfaction] : 3 |
|
|
|
|
|
|
|
if (val.commentReason) { |
|
|
|
evaluateForm.value.commentReason = val.commentReason |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, { immediate: true, deep: true }); |
|
|
|
}, |
|
|
|
{ immediate: true, deep: true } |
|
|
|
) |
|
|
|
|
|
|
|
const taskItemList = defineModel('taskItemList', { type: Array, default: () => [] }); |
|
|
|
const digitalVoiceLoggingStatus = defineModel('digitalVoiceLoggingStatus', { type: [Number, String], default: '' }); |
|
|
|
const taskItemList = defineModel('taskItemList', { type: Array, default: () => [] }) |
|
|
|
const digitalVoiceLoggingStatus = defineModel('digitalVoiceLoggingStatus', { type: [Number, String], default: '' }) |
|
|
|
const inspectResult = defineModel('inspectResult', { |
|
|
|
type: Object, |
|
|
|
default: () => ({ |
|
|
|
checkResult: '', |
|
|
|
deadline: '', |
|
|
|
}), |
|
|
|
}); |
|
|
|
deadline: '' |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
const showDatePicker = ref(false); |
|
|
|
const showVideoPreview = ref(false); |
|
|
|
const previewVideoUrl = ref(''); |
|
|
|
const minDate = new Date(); |
|
|
|
const showDatePicker = ref(false) |
|
|
|
const showVideoPreview = ref(false) |
|
|
|
const previewVideoUrl = ref('') |
|
|
|
const minDate = new Date() |
|
|
|
|
|
|
|
const resolveMediaUrl = (url) => toFullFileUrl(url); |
|
|
|
const resolveMediaUrl = (url) => toFullFileUrl(url) |
|
|
|
|
|
|
|
const pickerDate = ref([ |
|
|
|
String(minDate.getFullYear()), |
|
|
|
String(minDate.getMonth() + 1).padStart(2, '0'), |
|
|
|
String(minDate.getDate()).padStart(2, '0'), |
|
|
|
]); |
|
|
|
const pickerDate = ref([String(minDate.getFullYear()), String(minDate.getMonth() + 1).padStart(2, '0'), String(minDate.getDate()).padStart(2, '0')]) |
|
|
|
|
|
|
|
const onAuditChange = (item) => { |
|
|
|
if (item.pass !== 0) { |
|
|
|
item.reason = ''; |
|
|
|
item.reason = '' |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const onResultTypeChange = () => { |
|
|
|
if (inspectResult.value.checkResult !== 2) { |
|
|
|
inspectResult.value.deadline = ''; |
|
|
|
inspectResult.value.deadline = '' |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const onDateConfirm = ({ selectedValues }) => { |
|
|
|
inspectResult.value.deadline = selectedValues.join('-'); |
|
|
|
showDatePicker.value = false; |
|
|
|
}; |
|
|
|
inspectResult.value.deadline = selectedValues.join('-') |
|
|
|
showDatePicker.value = false |
|
|
|
} |
|
|
|
|
|
|
|
const isVideo = (url) => { |
|
|
|
if (!url) return false; |
|
|
|
return /\.(mp4|webm|ogg|mov)$/i.test(url); |
|
|
|
}; |
|
|
|
if (!url) return false |
|
|
|
return /\.(mp4|webm|ogg|mov)$/i.test(url) |
|
|
|
} |
|
|
|
|
|
|
|
const isPdf = (url) => { |
|
|
|
if (!url) return false; |
|
|
|
return /\.pdf$/i.test(url); |
|
|
|
}; |
|
|
|
if (!url) return false |
|
|
|
return /\.pdf$/i.test(url) |
|
|
|
} |
|
|
|
|
|
|
|
const onPreview = (url, itemValue) => { |
|
|
|
if (!url) return; |
|
|
|
const fullUrl = resolveMediaUrl(url); |
|
|
|
if (!url) return |
|
|
|
const fullUrl = resolveMediaUrl(url) |
|
|
|
if (isVideo(url)) { |
|
|
|
previewVideoUrl.value = fullUrl; |
|
|
|
showVideoPreview.value = true; |
|
|
|
return; |
|
|
|
previewVideoUrl.value = fullUrl |
|
|
|
showVideoPreview.value = true |
|
|
|
return |
|
|
|
} |
|
|
|
if (isPdf(url)) { |
|
|
|
window.open(fullUrl, '_blank'); |
|
|
|
return; |
|
|
|
window.open(fullUrl, '_blank') |
|
|
|
return |
|
|
|
} |
|
|
|
const images = itemValue |
|
|
|
.filter((u) => !isVideo(u) && !isPdf(u)) |
|
|
|
.map((u) => resolveMediaUrl(u)); |
|
|
|
const start = images.indexOf(fullUrl); |
|
|
|
const images = itemValue.filter((u) => !isVideo(u) && !isPdf(u)).map((u) => resolveMediaUrl(u)) |
|
|
|
const start = images.indexOf(fullUrl) |
|
|
|
showImagePreview({ |
|
|
|
images, |
|
|
|
startPosition: start >= 0 ? start : 0, |
|
|
|
}); |
|
|
|
}; |
|
|
|
startPosition: start >= 0 ? start : 0 |
|
|
|
}) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
@ -550,6 +492,7 @@ const onPreview = (url, itemValue) => { |
|
|
|
.video-preview-popup { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
max-width: none !important; |
|
|
|
background-color: #000; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
上官小雨
5 months ago