feat: 客户详情内容图片支持点击放大查看
desc_collect 富文本中的图片(如WhatsApp导入截图)点击后用 el-image-viewer 全屏放大(支持滚轮缩放/旋转,点击遮罩关闭), 图片加 cursor:zoom-in 提示可点击。 覆盖:业务端客户列表/公海、管理后台客户/公海/回收站/审核,共6处。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -85,7 +85,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog v-model="detailDialogVisible" title="详情">
|
<el-dialog v-model="detailDialogVisible" title="详情">
|
||||||
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
|
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
|
||||||
|
<el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog v-model="audetDialogVisible" title="审核" width="700px">
|
<el-dialog v-model="audetDialogVisible" title="审核" width="700px">
|
||||||
<!-- 客户标记无效 原因与附件回显 -->
|
<!-- 客户标记无效 原因与附件回显 -->
|
||||||
@@ -327,9 +328,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
@@ -145,7 +145,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dtitle">详情内容</div>
|
<div class="dtitle">详情内容</div>
|
||||||
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
|
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
|
||||||
|
<el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 分配跟单对话框 -->
|
<!-- 分配跟单对话框 -->
|
||||||
<el-dialog v-model="zyDialogVisible" title="分配" width="360px">
|
<el-dialog v-model="zyDialogVisible" title="分配" width="360px">
|
||||||
@@ -348,9 +349,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
@@ -238,7 +238,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
|
<div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
|
||||||
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
|
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
|
||||||
|
<el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 转移跟单对话框 -->
|
<!-- 转移跟单对话框 -->
|
||||||
<el-dialog v-model="zyDialogVisible" title="转移" width="360px">
|
<el-dialog v-model="zyDialogVisible" title="转移" width="360px">
|
||||||
@@ -528,9 +529,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
@@ -144,7 +144,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
|
<div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
|
||||||
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
|
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
|
||||||
|
<el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 图片预览对话框 -->
|
<!-- 图片预览对话框 -->
|
||||||
<el-image-viewer
|
<el-image-viewer
|
||||||
@@ -237,9 +238,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
@@ -341,7 +341,14 @@
|
|||||||
v-if="detailRow.desc_collect != '' && detailRow.desc_collect != 'null'"
|
v-if="detailRow.desc_collect != '' && detailRow.desc_collect != 'null'"
|
||||||
v-html="detailRow.desc_collect"
|
v-html="detailRow.desc_collect"
|
||||||
class="detils-content"
|
class="detils-content"
|
||||||
|
@click="onDescImgClick"
|
||||||
></div>
|
></div>
|
||||||
|
<el-image-viewer
|
||||||
|
v-if="descViewerUrl"
|
||||||
|
:url-list="[descViewerUrl]"
|
||||||
|
hide-on-click-modal
|
||||||
|
@close="descViewerUrl = ''"
|
||||||
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog v-model="reportDialogVisible" title="标记无效" width="600px">
|
<el-dialog v-model="reportDialogVisible" title="标记无效" width="600px">
|
||||||
<el-form :model="reportForm" label-width="80px">
|
<el-form :model="reportForm" label-width="80px">
|
||||||
@@ -701,9 +708,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
@@ -78,7 +78,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog v-model="detailDialogVisible" title="详情">
|
<el-dialog v-model="detailDialogVisible" title="详情">
|
||||||
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
|
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
|
||||||
|
<el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -204,9 +205,18 @@
|
|||||||
doc.querySelectorAll('img').forEach((img) => {
|
doc.querySelectorAll('img').forEach((img) => {
|
||||||
img.style.maxWidth = '100%'
|
img.style.maxWidth = '100%'
|
||||||
img.style.height = 'auto'
|
img.style.height = 'auto'
|
||||||
|
img.style.cursor = 'zoom-in'
|
||||||
})
|
})
|
||||||
return doc.body.innerHTML
|
return doc.body.innerHTML
|
||||||
}
|
}
|
||||||
|
// 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
|
||||||
|
const descViewerUrl = ref('')
|
||||||
|
function onDescImgClick(e: MouseEvent) {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target.tagName === 'IMG') {
|
||||||
|
descViewerUrl.value = (target as HTMLImageElement).src
|
||||||
|
}
|
||||||
|
}
|
||||||
function onDetail(row: any) {
|
function onDetail(row: any) {
|
||||||
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
row.desc_collect = processImages(row.desc_collect) // 处理图片
|
||||||
detailRow.value = row
|
detailRow.value = row
|
||||||
|
|||||||
Reference in New Issue
Block a user