<template>
|
<div>
|
<template v-if="hasFile" v-for="(file, fileKey) of [innerFile || {}]" :key="fileKey">
|
<div class="j-vxe-image-list">
|
<template v-if="!file || !(file['url'] || file['path'] || file['message'])">
|
<a-tooltip :title="'请稍后: ' + JSON.stringify(file) + (file['url'] || file['path'] || file['message'])">
|
<LoadingOutlined />
|
</a-tooltip>
|
</template>
|
<template v-else-if="file['path']">
|
<template v-for="src of imgList">
|
<img class="j-vxe-image" :src="src" alt="图片错误" @click="handleMoreOperation" />
|
</template>
|
</template>
|
<a-tooltip v-else :title="file.message || '上传失败'" @click="handleClickShowImageError">
|
<Icon icon="ant-design:exclamation-circle" style="color: red" />
|
</a-tooltip>
|
</div>
|
</template>
|
<div class="j-vxe-image-upload">
|
<a-upload
|
name="file"
|
:data="{ isup: 1 }"
|
:multiple="false"
|
:action="uploadAction"
|
:headers="uploadHeaders"
|
:showUploadList="false"
|
v-bind="cellProps"
|
@change="handleChangeUpload"
|
>
|
<a-button v-if="!hasFile" preIcon="ant-design:upload">{{ originColumn.btnText || '上传图片' }}</a-button>
|
<div v-if="hasFile && imgList.length < maxCount" class="j-vxe-plus" @click="">
|
<Icon icon="ant-design:plus" />
|
</div>
|
</a-upload>
|
</div>
|
<JUploadModal :value="modalValue" @register="registerModel" @change="onModalChange" />
|
</div>
|
</template>
|
<script lang="ts">
|
import { computed, defineComponent } from 'vue';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
|
import { useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
|
import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
|
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
import { components, enhanced, useFileCell } from '../hooks/useFileCell';
|
|
export default defineComponent({
|
name: 'JVxeImageCell',
|
components: components,
|
props: useJVxeCompProps(),
|
setup(props: JVxeComponent.Props) {
|
const { createErrorModal } = useMessage();
|
const setup = useFileCell(props, UploadTypeEnum.image, { multiple: true });
|
const { innerFile, maxCount } = setup;
|
|
const imgList = computed(() => {
|
if (innerFile.value) {
|
if (innerFile.value['url']) {
|
return [innerFile.value['url']];
|
} else if (innerFile.value['path']) {
|
let paths = innerFile.value['path'].split(',');
|
return paths.map((p) => getFileAccessHttpUrl(p));
|
}
|
}
|
return [];
|
});
|
|
// 弹出上传出错详细信息
|
function handleClickShowImageError() {
|
let file = innerFile.value || null;
|
if (file && file['message']) {
|
createErrorModal({
|
title: '上传出错',
|
content: '错误信息：' + file['message'],
|
maskClosable: true,
|
});
|
}
|
}
|
|
return {
|
...setup,
|
imgList,
|
maxCount,
|
handleClickShowImageError,
|
};
|
},
|
// 【组件增强】注释详见：JVxeComponent.Enhanced
|
enhanced: enhanced,
|
});
|
</script>
|
|
<style scoped lang="less">
|
.j-vxe-image {
|
height: 32px;
|
max-width: 100px !important;
|
cursor: pointer;
|
display: inline-block;
|
margin-right: 4px;
|
vertical-align: top;
|
|
&:hover {
|
opacity: 0.8;
|
}
|
|
&:active {
|
opacity: 0.6;
|
}
|
}
|
|
.j-vxe-plus {
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
background-color: #fafafa;
|
border: 1px dashed #d9d9d9;
|
border-radius: 2px;
|
cursor: pointer;
|
}
|
|
.j-vxe-image-list,
|
.j-vxe-image-upload {
|
display: inline-block;
|
vertical-align: top;
|
}
|
</style>
|
