feat: 恢复重建H5 附件上传使用封装组件
This commit is contained in:
parent
bf86b7d073
commit
97c8c37669
@ -33,12 +33,7 @@
|
||||
万元
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label="附件" center>
|
||||
<template #input>
|
||||
<van-uploader v-model="fileList" @delete="handleDelete" name="files" :file-list="fileList"
|
||||
accept=".png,.jpg,.mp4" :after-read="afterRead" multiple :max-count="6" />
|
||||
</template>
|
||||
</van-field>
|
||||
<DisasterFileUpload label="附件上传" v-model="form.fileList"></DisasterFileUpload>
|
||||
</van-form>
|
||||
|
||||
</PanelItem>
|
||||
@ -59,7 +54,8 @@ import PageContainer from '@/components/PageContainer.vue'
|
||||
import { showToast, showLoadingToast } from "vant";
|
||||
import PanelItem from '@/components/PanelItem.vue'
|
||||
import { request } from "../../../../shared/utils/request";
|
||||
import RoadRoutesPicker from '../DisasterManagement/RoadRoutesPicker.vue'
|
||||
import RoadRoutesPicker from '../DisasterManagement/components/RoadRoutesPicker.vue'
|
||||
import DisasterFileUpload from '../DisasterManagement/components/DisasterFileUpload.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
@ -106,7 +102,6 @@ const getDetail = async (id) => {
|
||||
form.project.blockedPointName = res.data.event.blockedPointName
|
||||
form.project.estimatedCost = res.data.event.estimatedRecoveryCost
|
||||
form.fileList = res.data.fileList || []
|
||||
fileList.value = res.data.fileList || []
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
@ -137,63 +132,6 @@ const handleClickBack = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 文件删除
|
||||
const handleDelete = (file) => {
|
||||
if (file.serverUrl) {
|
||||
const index = form.fileList.findIndex((p) => p.fileUrl === file.serverUrl);
|
||||
if (index !== -1) {
|
||||
form.fileList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 文件上传
|
||||
const afterRead = async (file) => {
|
||||
const toast = showLoadingToast({
|
||||
message: "上传中...",
|
||||
forbidClick: true,
|
||||
duration: 0, // 设置为0表示不会自动关闭
|
||||
});
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.file);
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/file/upload",
|
||||
method: "post",
|
||||
data: formData,
|
||||
});
|
||||
toast.close();
|
||||
if (res.code === "00000") {
|
||||
// 根据文件类型设置fileType: 1-图片 2-视频
|
||||
console.log('file', file)
|
||||
let fileTypeValue = 1; // 默认图片
|
||||
if (file.file.type.startsWith('video/')) {
|
||||
fileTypeValue = 2; // 视频
|
||||
}
|
||||
form.fileList.push({
|
||||
fileUrl: res.data,
|
||||
fileType: fileTypeValue,
|
||||
fileName: file.file.name,
|
||||
});
|
||||
const index = fileList.value.findIndex((f) => f.file === file.file);
|
||||
if (index !== -1) {
|
||||
fileList.value[index].serverUrl = res.data;
|
||||
}
|
||||
// console.log("form.fileList", toRaw(form.fileList));
|
||||
// console.log("fileList.value", fileList.value);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.close();
|
||||
showToast({
|
||||
type: "fail",
|
||||
message: error.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleAdd = async () => {
|
||||
// 先进行表单校验
|
||||
if (!formRef.value) {
|
||||
|
||||
@ -28,7 +28,7 @@ const drawer = reactive({
|
||||
const dialogRef = ref(null); // 弹窗实例
|
||||
const drawerRef = ref(null); // 抽屉实例
|
||||
|
||||
// 消息推送组织列表(固定六个),增加personList存储该组织的人员数组
|
||||
// 消息推送组织列表(固定六个) personList存储该组织的人员数组
|
||||
const messageOrgList = ref([
|
||||
{ title: '中心领导', orgName: '中心领导', personList: [] },
|
||||
{ title: '法规处', orgName: '法规处', personList: [] },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user