mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-13 04:46:48 +08:00
Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
94
src/components/img/UploadImgHomeWork.vue
Normal file
94
src/components/img/UploadImgHomeWork.vue
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<el-upload
|
||||||
|
ref="imageRef"
|
||||||
|
:file-list="files"
|
||||||
|
:show-file-list="false"
|
||||||
|
:limit="max"
|
||||||
|
:action="FILE_UPLOAD_ANNEX"
|
||||||
|
:auto-upload="false"
|
||||||
|
:on-exceed="exceed"
|
||||||
|
:on-change="handleChange">
|
||||||
|
<template #trigger>
|
||||||
|
<div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, ref, watch } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { FILE_UPLOAD_ANNEX } from "@/api/api";
|
||||||
|
|
||||||
|
const store = useStore();
|
||||||
|
const userInfo = computed(() => store.state.userInfo);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: [],
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits()
|
||||||
|
const files = ref([])
|
||||||
|
const imageRef = ref()
|
||||||
|
|
||||||
|
watch(props.value, () => {
|
||||||
|
props.value.length || (files.value = props.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
function exceed() {
|
||||||
|
ElMessage.error(`只能上传${props.max}个附件`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange(file) {
|
||||||
|
let fileName = userInfo.value.realName + '-' + userInfo.value.userNo + '-' + file.name;
|
||||||
|
let f = new File([file.raw],fileName);
|
||||||
|
f.uid = file.uid;
|
||||||
|
file.raw = f;
|
||||||
|
console.log(file.raw)
|
||||||
|
imageRef.value.submit();
|
||||||
|
|
||||||
|
if (file.response && file.response.code === 200) {
|
||||||
|
file.url = file.response.data
|
||||||
|
}
|
||||||
|
const index = files.value.findIndex(f => f.uid === file.uid)
|
||||||
|
if (index === -1) {
|
||||||
|
files.value.unshift(file)
|
||||||
|
} else {
|
||||||
|
files.value[index] = file
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:value', files.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(i) {
|
||||||
|
files.value.splice(i, 1)
|
||||||
|
console.log(imageRef)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFiles() {
|
||||||
|
imageRef.value.clearFiles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reUpload(i) {
|
||||||
|
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
|
||||||
|
imageRef.value.abort(files.value[i].raw)
|
||||||
|
files.value[i].status = 'abort';
|
||||||
|
} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
|
||||||
|
imageRef.value.handleStart(files.value[i].raw)
|
||||||
|
imageRef.value.submit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function abort(i) {
|
||||||
|
imageRef.value.abort(files.value[i].raw)
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ reUpload, remove, clearFiles })
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -450,7 +450,8 @@ import {
|
|||||||
} from "@/api/api";
|
} from "@/api/api";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import UploadImg from "@/components/img/UploadImg.vue";
|
// import store from "@/store";
|
||||||
|
import UploadImg from "@/components/img/UploadImgHomeWork.vue";
|
||||||
import FileTypeImg from "@/components/FileTypeImg.vue";
|
import FileTypeImg from "@/components/FileTypeImg.vue";
|
||||||
import { useRoute } from "vue-router/dist/vue-router";
|
import { useRoute } from "vue-router/dist/vue-router";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
@@ -482,7 +483,6 @@ const {
|
|||||||
infoId,
|
infoId,
|
||||||
},
|
},
|
||||||
} = useRoute();
|
} = useRoute();
|
||||||
|
|
||||||
const { data } =
|
const { data } =
|
||||||
taskId && taskId !== "undefined"
|
taskId && taskId !== "undefined"
|
||||||
? useRequest(TASK_WORK_DETAIL, { workId, taskId })
|
? useRequest(TASK_WORK_DETAIL, { workId, taskId })
|
||||||
|
|||||||
Reference in New Issue
Block a user