<template>
|
<div>
|
<a-upload
|
action="/"
|
v-model:fileList="fileList"
|
:auto-upload="false"
|
:accept="xlsx"
|
:limit="props.limit"
|
@change="handleChange"
|
@before-remove="beforeRemove"
|
@before-upload="beforeUpload"
|
image-preview
|
>
|
<template #upload-button>
|
<a-button
|
type="text"
|
style="border-radius: 24px"
|
@click="visibleChange"
|
>
|
<icon-attachment size="28" style="color: #0960bd" />
|
</a-button>
|
</template>
|
</a-upload>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, ref, onMounted, watch, watchEffect } from 'vue';
|
import { uploadAndParse } from '@/api/session';
|
import { useUserStore } from '@/store';
|
import { Message } from '@arco-design/web-vue';
|
import EventBus from '@/utils/EventBus';
|
|
const userStore = useUserStore();
|
const props = defineProps({
|
limit: {
|
type: Number,
|
default: 6,
|
},
|
sessionId: String,
|
action: String, // 上传的服务器地址
|
url: String, //回显的文件地址
|
});
|
|
const emit = defineEmits([
|
'update:fileList',
|
'success',
|
'handleRemove',
|
'selectFileCallback',
|
]);
|
const urls = computed(() => props.url);
|
const fileList = ref([]);
|
const filesData = ref([]);
|
const uploaditemList = ref([]);
|
|
watch(
|
() => [props.url, props.sessionId],
|
([newVal, newSessionId], [oldVal, oldSessionId]) => {
|
// if (newVal) {
|
// fileList.value = newVal.split(',').map((item) => ({
|
// uid: item,
|
// name: item,
|
// status: 'done',
|
// url: item,
|
// }));
|
// }
|
},
|
{
|
deep: true, // 开启深度监听
|
}
|
);
|
|
onMounted(() => {
|
if (urls.value) {
|
fileList.value = urls.value.split(',').map((item) => ({
|
uid: item,
|
name: item,
|
status: 'done',
|
url: item,
|
}));
|
}
|
EventBus.on('queryAgent', (eventData) => {
|
// 更新组件的数据
|
if (fileList.value.length == 1) {
|
fileList.value = [];
|
} else {
|
fileList.value.forEach((item) => {
|
if (item.name != eventData.name) {
|
fileList.value = [];
|
fileList.value.push(item);
|
}
|
});
|
}
|
});
|
});
|
|
const beforeRemove = (file) => {
|
emit('handleRemove');
|
fileList.value = [];
|
};
|
|
const handleChange = (fileList) => {
|
const dataFile = compareArr(uploaditemList.value, fileList).uniqueToSecond;
|
uploaditemList.value = fileList.map((item, index) => {
|
return {
|
index: index,
|
name: item.name,
|
size: (item.file.size / 1024).toFixed(2) + 'K',
|
onFileSelectedLoading: false,
|
textName: '',
|
};
|
});
|
|
filesData.value = fileList;
|
emit('selectFileCallback', uploaditemList.value, dataFile);
|
fileList.value = [];
|
};
|
|
//数组比较
|
const compareArr = (arr1, arr2) => {
|
const uniqueToFirst = arr1.filter(
|
(item1) => !arr2.some((item2) => item1.name == item2.name)
|
);
|
|
const uniqueToSecond = arr2.filter(
|
(item2) => !arr1.some((item1) => item1.name == item2.name)
|
);
|
|
return {
|
uniqueToFirst,
|
uniqueToSecond,
|
};
|
};
|
|
function beforeUpload(resolve) {
|
let name = ['xlsx', 'xls'];
|
let fileName = resolve.name.split('.');
|
let fileExt = fileName[fileName.length - 1];
|
let isTypeOk = name.indexOf(fileExt) >= 0;
|
if (!isTypeOk) {
|
Message.warning('只支持上传：xlsx,xls');
|
} else {
|
return new Promise((resolve) => {
|
resolve(true);
|
});
|
}
|
}
|
</script>
|
