81 lines
3.1 KiB
Vue
81 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="image-container">
|
|
<a @click="open()"><img :src="image" style="max-height: 86vh !important;"></a>
|
|
<div class="image-label">
|
|
<span class="is-clickable" @click="copyImage()" v-if="display.findIndex(v=>v==='copy')>=0">
|
|
<SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 20}"></SvgIcon>
|
|
</span>
|
|
<span class="is-clickable ml-5" @click="download()" v-if="display.findIndex(v=>v==='download')>=0">
|
|
<SvgIcon v-bind="{name: 'download.svg', type: 'primary', size: 20}"></SvgIcon>
|
|
</span>
|
|
<span class="is-clickable ml-5" @click="askConfirm()" v-if="display.findIndex(v=>v==='delete')>=0">
|
|
<SvgIcon v-bind="{name: 'bin1.svg', type: 'danger', size: 18}"></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Modal @close="showmodal=undefined" @remove="remove" @confirm="remove()" v-bind="showmodal" v-if="showmodal"></Modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { useStore } from '~/stores/index'
|
|
export default {
|
|
setup() {
|
|
const store = useStore()
|
|
return { store }
|
|
},
|
|
props: ['row', 'api', 'pagename', 'file', 'image', 'show', 'extend'],
|
|
data() {
|
|
return {
|
|
showmodal: undefined,
|
|
display: this.show || []
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
if(!this.file || this.extend===false) return
|
|
this.showmodal = {title: this.file.file__name, component: 'media/ChipImage',
|
|
vbind: {extend: false, show: this.show, file: this.file,
|
|
image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`}}
|
|
},
|
|
info() {
|
|
if(!this.file) return
|
|
this.showmodal = {vbind: {file: this.file}, component: 'media/ImageAttr',
|
|
title: 'Thông tin trích xuất từ hình ảnh', width: '35%', height: '50vh'}
|
|
},
|
|
find() {
|
|
this.showmodal = {vbind: {row: this.row, api: this.api, pagename: this.pagename}, component: 'ekyc/IDcheck',
|
|
title: 'Kiểm tra CMT / CCCD / HC / GPLX / CMT-CA / CMT-QD', width: '90%', height: '70vh'}
|
|
},
|
|
download() {
|
|
let name = this.file? this.file.file__name || this.file.name : 'download'
|
|
let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
|
|
this.$download(path, name)
|
|
},
|
|
askConfirm() {
|
|
let text = this.store.lang==='en'? 'Do you agree to delete this image' : `Bạn có đồng ý <b>xóa hình ảnh</b> này không?`
|
|
this.showmodal = {component: `dialog/Confirm`,title: this.store.lang==='en'? 'Confirm' : 'Xác nhận', width: '500px', height: '100px',
|
|
vbind: {content: text, duration: 10}}
|
|
},
|
|
remove() {
|
|
this.showmodal = undefined
|
|
this.$emit('modalevent', {name: 'remove'})
|
|
this.$emit('remove')
|
|
},
|
|
async copyImage() {
|
|
try {
|
|
const response = await fetch(`${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`);
|
|
const blob = await response.blob()
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({
|
|
[blob.type]: blob
|
|
})
|
|
])
|
|
this.$snackbar('Copied to clipboard')
|
|
} catch (err) {
|
|
console.error(err.name, err.message)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |