feat: 优化图片展示方式并新增上传提示
This commit is contained in:
Wei_佳
parent
20d8f155c6
commit
17d275e18c
@ -1,7 +1,18 @@
|
||||
<script setup>
|
||||
import { h, onMounted, ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { NButton, NInput, NTag, NSelect, NDatePicker, useMessage, useDialog } from 'naive-ui'
|
||||
import {
|
||||
NButton,
|
||||
NInput,
|
||||
NTag,
|
||||
NSelect,
|
||||
NDatePicker,
|
||||
NPopover,
|
||||
NImage,
|
||||
NImageGroup,
|
||||
useMessage,
|
||||
useDialog,
|
||||
} from 'naive-ui'
|
||||
|
||||
import CommonPage from '@/components/page/CommonPage.vue'
|
||||
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
||||
@ -92,18 +103,87 @@ const columns = [
|
||||
const urls = list.map((item) => item?.url).filter(Boolean)
|
||||
|
||||
if (!urls.length) return '-'
|
||||
return h(
|
||||
'div',
|
||||
{ style: 'display:flex; gap:6px; justify-content:center; align-items: center;' },
|
||||
urls.slice(0, 3).map((url, idx) =>
|
||||
h('img', {
|
||||
src: url,
|
||||
const maxThumb = 3
|
||||
const extraCount = urls.length - maxThumb
|
||||
|
||||
const triggerNode = () =>
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
style:
|
||||
'width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid #e5e6eb;cursor:pointer;',
|
||||
alt: '付款凭证',
|
||||
onClick: () => window.open(url, '_blank'),
|
||||
})
|
||||
'display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap;',
|
||||
},
|
||||
[
|
||||
...urls.slice(0, maxThumb).map((url, idx) =>
|
||||
h(NImage, {
|
||||
key: `${url}_${idx}`,
|
||||
src: url,
|
||||
width: 40,
|
||||
height: 40,
|
||||
objectFit: 'cover',
|
||||
previewDisabled: true,
|
||||
style:
|
||||
'border-radius:4px;border:1px solid #e5e6eb;cursor:pointer;overflow:hidden;',
|
||||
})
|
||||
),
|
||||
extraCount > 0
|
||||
? h(
|
||||
'div',
|
||||
{
|
||||
style:
|
||||
'width:40px;height:40px;border-radius:4px;border:1px dashed #d3d3d3;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;background:#fafafa;cursor:default;',
|
||||
},
|
||||
`+${extraCount}`
|
||||
)
|
||||
: null,
|
||||
]
|
||||
)
|
||||
|
||||
const popContent = () =>
|
||||
h(
|
||||
'div',
|
||||
{ style: 'padding:8px; max-width:360px;' },
|
||||
[
|
||||
h(
|
||||
NImageGroup,
|
||||
null,
|
||||
{
|
||||
default: () =>
|
||||
urls.map((url, idx) =>
|
||||
h(NImage, {
|
||||
key: `${url}_preview_${idx}`,
|
||||
src: url,
|
||||
width: 120,
|
||||
height: 120,
|
||||
objectFit: 'cover',
|
||||
style:
|
||||
'margin:6px;border-radius:6px;border:1px solid #e5e6eb;overflow:hidden;',
|
||||
})
|
||||
),
|
||||
}
|
||||
),
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
style: 'margin-top:6px;font-size:12px;color:#666;text-align:right;',
|
||||
},
|
||||
`共${urls.length}张，点击图片可预览原图`
|
||||
),
|
||||
]
|
||||
)
|
||||
|
||||
return h(
|
||||
NPopover,
|
||||
{
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
showArrow: false,
|
||||
displayDirective: 'show', // keep content mounted so image preview won't flash close
|
||||
},
|
||||
{
|
||||
trigger: triggerNode,
|
||||
default: popContent,
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
@ -290,22 +290,25 @@
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="24"
|
||||
class="form-item"
|
||||
class="form-item upload-item"
|
||||
label="非遗传承人等级证书"
|
||||
path="inheritor_certificates"
|
||||
>
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.inheritor_certificates"
|
||||
list-type="image-card"
|
||||
@finish="handleFinish3"
|
||||
@remove="delete3"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-row">
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.inheritor_certificates"
|
||||
list-type="image-card"
|
||||
@finish="handleFinish3"
|
||||
@remove="delete3"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
|
||||
<template #label>
|
||||
@ -380,7 +383,7 @@
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="24"
|
||||
class="form-item"
|
||||
class="form-item upload-item"
|
||||
label="非遗资产所用专利的证书"
|
||||
path="patent_certificates"
|
||||
>
|
||||
@ -395,20 +398,28 @@
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.patent_certificates"
|
||||
@finish="handleFinish1"
|
||||
@remove="delete1"
|
||||
list-type="image-card"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-row">
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.patent_certificates"
|
||||
@finish="handleFinish1"
|
||||
@remove="delete1"
|
||||
list-type="image-card"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
|
||||
<n-form-item-gi
|
||||
:span="24"
|
||||
class="form-item upload-item"
|
||||
label="非遗纹样图片"
|
||||
path="pattern_images"
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex items-center gap-4">
|
||||
<span>非遗纹样图片</span>
|
||||
@ -420,18 +431,21 @@
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.pattern_images"
|
||||
@finish="handleFinish2"
|
||||
@remove="delete2"
|
||||
list-type="image-card"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-row">
|
||||
<n-upload
|
||||
:action="actionUrl"
|
||||
:default-file-list="modalForm.pattern_images"
|
||||
@finish="handleFinish2"
|
||||
@remove="delete2"
|
||||
list-type="image-card"
|
||||
>
|
||||
<div>
|
||||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||||
<p style="font-size: 12px">添加图片</p>
|
||||
</div>
|
||||
</n-upload>
|
||||
<div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
|
||||
@ -1821,6 +1835,9 @@ onMounted(async () => {
|
||||
width: 330px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.upload-item {
|
||||
width: 100%;
|
||||
}
|
||||
.form-title-box {
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
@ -1977,6 +1994,18 @@ onMounted(async () => {
|
||||
margin-left: 25px;
|
||||
color: #303133;
|
||||
}
|
||||
.upload-tip {
|
||||
margin-top: 0;
|
||||
font-size: 12px;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
.upload-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 移除number类型输入框的箭头 */
|
||||
input[type='number']::-webkit-outer-spin-button,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user