1404/11/04- first
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div :class="[prefixCls]">
|
||||
<div
|
||||
class="w-[96px] h-[96px] overflow-hidden border border-solid border-blue-600 bg-gray-50 rounded-md p-2"
|
||||
>
|
||||
<AUpload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
list-type="picture-card"
|
||||
:showUploadList="true"
|
||||
:multiple="false"
|
||||
:action="uploadURL"
|
||||
:headers="fileHeader"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<div v-if="fileList.length === 0">
|
||||
<loading-outlined v-if="loading"></loading-outlined>
|
||||
<BaseIcon v-else icon="vuesax-linear:add" color="#6B7280" />
|
||||
<div class="text-gray-500 text-center text-xs font-normal">تصویر شاخص</div>
|
||||
</div>
|
||||
</AUpload>
|
||||
<AModal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</AModal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { uploadURL } from '@root/config'
|
||||
import { getToken } from '@/utils'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const { prefixCls } = usePrefix('index-image-uploader')
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = ref('')
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const fileHeader = {
|
||||
Authorization: `Bearer ${getToken()}`
|
||||
}
|
||||
|
||||
interface Props {
|
||||
fileList?: Array<FileList>
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const emits = defineEmits(['update:fileList', 'ok', 'delete'])
|
||||
|
||||
const fileList = computed({
|
||||
get() {
|
||||
return props.fileList || ([] as Array<FileList>)
|
||||
},
|
||||
set(value) {
|
||||
emits('update:fileList', value)
|
||||
}
|
||||
})
|
||||
|
||||
const handlePreview = async (file: UploadProps['fileList'][number]) => {
|
||||
previewImage.value = file.src
|
||||
previewVisible.value = true
|
||||
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
previewTitle.value = ''
|
||||
}
|
||||
|
||||
const beforeUpload = (file: UploadProps['fileList'][number]) => {
|
||||
const isLt100k = file.size / 1024 / 1024 < 0.2
|
||||
if (!isLt100k) {
|
||||
message.error('حداکثر حجم بارگذاری 200 کیلو بایت میباشد')
|
||||
}
|
||||
return isLt100k
|
||||
}
|
||||
|
||||
function handleChange(info: UploadChangeParam) {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false
|
||||
fileList.value = []
|
||||
message.error('خطا در بارگذاری')
|
||||
}
|
||||
|
||||
if (info.file.status === 'done') {
|
||||
loading.value = false
|
||||
message.success('تصویر شاخص با موفقیت بارگذاری شد')
|
||||
emits('ok', info.file.response.id)
|
||||
}
|
||||
if (info.file.status === 'removed') {
|
||||
emits('delete', info.file.uid)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix: ~'@{prefixCls}-index-image-uploader';
|
||||
|
||||
.@{prefix} {
|
||||
.ant-upload-rtl.ant-upload.ant-upload-select-picture-card {
|
||||
margin: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
.ant-upload {
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
background-color: #eff6ff;
|
||||
border: dashed 1px #93c5fd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ant-upload-list-picture-card-container {
|
||||
margin: 0;
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
}
|
||||
.ant-upload-list-picture-card .ant-upload-list-item {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.ant-upload-list-picture-card .ant-upload-list-item-info {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div :class="[prefixCls]">
|
||||
<div class="border border-solid border-blue-600 bg-gray-50 w-full rounded-md p-2">
|
||||
<div class="flex">
|
||||
<AUpload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
list-type="picture-card"
|
||||
:show-upload-list="false"
|
||||
:action="uploadURL"
|
||||
:headers="fileHeader"
|
||||
:showUploadList="true"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div>
|
||||
<BaseIcon icon="vuesax-linear:add" color="#6B7280" />
|
||||
<div class="text-gray-500 text-center text-xs font-normal">بارگذاری فایل</div>
|
||||
</div>
|
||||
</AUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'
|
||||
import { uploadURL } from '@root/config'
|
||||
import { getToken } from '@/utils'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const { prefixCls } = usePrefix('product-image-uploader')
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
const fileHeader = {
|
||||
Authorization: `Bearer ${getToken()}`
|
||||
}
|
||||
|
||||
interface Props {
|
||||
fileList?: Array<FileList>
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const emits = defineEmits(['update:fileList', 'ok', 'delete'])
|
||||
|
||||
const fileList = computed({
|
||||
get() {
|
||||
return props.fileList || ([] as Array<FileList>)
|
||||
},
|
||||
set(value) {
|
||||
emits('update:fileList', value)
|
||||
}
|
||||
})
|
||||
|
||||
const beforeUpload = (file: UploadProps['fileList'][number]) => {
|
||||
const isLt100k = file.size / 1024 / 1024 < 0.24
|
||||
if (!isLt100k) {
|
||||
message.error('حداکثر حجم بارگذاری 240 کیلو بایت میباشد')
|
||||
}
|
||||
return isLt100k
|
||||
}
|
||||
|
||||
function handleChange(info: UploadChangeParam) {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false
|
||||
message.error('خطا در بارگذاری')
|
||||
}
|
||||
|
||||
if (info.file.status === 'done') {
|
||||
loading.value = false
|
||||
message.success('تصویر با موفقیت بارگذاری شد')
|
||||
emits('ok', info.file.response.id)
|
||||
}
|
||||
if (info.file.status === 'removed') {
|
||||
emits('delete', info.file.uid)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix: ~'@{prefixCls}-product-image-uploader';
|
||||
|
||||
.@{prefix} {
|
||||
width: 100%;
|
||||
|
||||
.ant-upload-rtl.ant-upload.ant-upload-select-picture-card {
|
||||
margin: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
.ant-upload-picture-card-wrapper {
|
||||
width: fit-content;
|
||||
}
|
||||
.ant-upload {
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
background-color: #eff6ff;
|
||||
border: dashed 1px #93c5fd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ant-upload-list-picture-card-container {
|
||||
margin: 0;
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
}
|
||||
.ant-upload-list-picture-card .ant-upload-list-item {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.ant-upload-list-picture-card .ant-upload-list-item-info {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ant-upload-list {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div :class="[prefixCls]">
|
||||
<div class="w-[78px] h-[78px] flex rounded parent">
|
||||
<img class="w-[78px] h-[78px] rounded" :src="props.src" alt="test" />
|
||||
<div class="child">
|
||||
<div class="flex justify-center gap-2 !z-20">
|
||||
<Icon
|
||||
class="cursor-pointer"
|
||||
icon="vuesax-linear:trash"
|
||||
size="18"
|
||||
color="white"
|
||||
@click="emit('remove')"
|
||||
/>
|
||||
<Icon
|
||||
class="cursor-pointer"
|
||||
icon="vuesax-linear:eye"
|
||||
size="18"
|
||||
color="white"
|
||||
@click="() => setVisible(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AImage
|
||||
:src="props.src"
|
||||
style="display: none"
|
||||
:preview="{ visible, onVisibleChange: setVisible }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
|
||||
interface Props {
|
||||
src: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void
|
||||
}>()
|
||||
|
||||
const { prefixCls } = usePrefix('upload-image')
|
||||
const visible = ref<boolean>(false)
|
||||
const setVisible = (value: boolean) => {
|
||||
visible.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix: ~'@{prefixCls}-upload-image';
|
||||
.@{prefix} {
|
||||
.parent:hover {
|
||||
cursor: pointer;
|
||||
.child {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.child {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
transition: ease-in-out 1ms;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user