bxztApp/packages/mobile/src/views/Rebuild/RebuildAdd.vue

<template>
    <PageContainer title="项目填报" @click-back="handleClickBack">
        <div class="content">
            <PanelItem>
                <van-form ref="formRef" label-align="left" colon>
                    <van-field v-model="form.project.districtName" label="区县名称" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写区县名称' }]" />
                    <RoadRoutesPicker v-model="form.project.routeNo" label="线路编号" center placeholder="请选择" required
                        :rules="[{ required: true, message: '请选择线路编号' }]" @change="handleRouteNoChange" />
                    <van-field v-model="form.project.startStakeNo" label="起点桩号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写起点桩号' }]" />
                    <van-field v-model="form.project.endStakeNo" label="止点桩号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写止点桩号' }]" />
                    <van-field v-model="form.project.implementMileage" label="实施里程" center placeholder="单位:公里" required
                        type="number" :rules="[{ required: true, message: '请填写实施里程' }]">
                        <template #extra>
                            公里
                        </template>
                    </van-field>
                    <van-field v-model="form.project.earthworkLoss" label="塌方及损失" center placeholder="(方/万元)" required
                        :rules="[{ required: true, message: '请填写塌方及损失' }]" />
                    <van-field v-model="form.project.disasterType" label="灾害类型" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写灾害类型' }]" />
                    <van-field v-model="form.project.locationRoute" label="地点路线" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写地点路线' }]" />
                    <van-field v-model="form.project.roadLocation" label="路况位置" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写路况位置' }]" />
                    <van-field v-model="form.project.blockedPointName" label="阻断点小地名" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写阻断点小地名' }]" />
                    <van-field v-model="form.project.estimatedCost" label="恢复重建预估费用" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写恢复重建预估费用' }]">
                        <template #extra>
                            万元
                        </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>
                </van-form>

            </PanelItem>
        </div>

        <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
            提交
        </van-button>
    </PageContainer>

</template>


<script setup>
import { ref, onMounted, watch, reactive, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
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'

const router = useRouter()
const route = useRoute()

const form = reactive({
    project: {
        districtName: null,
        routeNo: null,
        startStakeNo: null,
        endStakeNo: null,
        implementMileage: null,
        earthworkLoss: null,
        disasterType: null,
        locationRoute: null,
        roadLocation: null,
        blockedPointName: null,
        estimatedCost: null,
    },
    fileList: []
})
const fileList = ref([]);
const formRef = ref();

onMounted(() => {
    if (route.params.data) {
        const data = JSON.parse(decodeURIComponent(route.params.data));
        console.log('@@@@data', data);
        // todo 在有传参的时候 调用接口去获取数据 并且初始化表单
    } else {
        // console.log('无传入数据');
    }
})

const handleClickBack = () => {
    if (route.params.data) {

    } else {
        router.push('/rebuild')
    }
}

// 文件删除
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) {
        showToast('表单初始化失败');
        return;
    }

    try {
        const isValid = await formRef.value.validate();
        // 表单校验通过，继续处理提交逻辑
        const toast = showLoadingToast({
            message: "上报中...",
            forbidClick: true,
            duration: 0, // 设置为0表示不会自动关闭
        });
        console.log('表单校验通过，提交数据:', form);

        const res = await request({
            url: '/snow-ops-platform/recovery/add',
            method: 'POST',
            data: form
        })
        toast.close();
        if (res.code === '00000') {
            showToast('提交成功');
            handleClickBack();
        } else {
            showToast('提交失败, 请稍后重试或联系管理员');
        }
    } catch (error) {
        // console.log('表单校验失败:', error);
        showToast('请检查并完善表单信息');
    }
}


const handleRouteNoChange = (item) => {
    form.project.startStakeNo = item.startStakeNo
    form.project.endStakeNo = item.endStakeNo
}



</script>

<style scoped lang="scss">
.content {
    padding: 20px 0px 80px 0px;
}

.add-btn {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    margin: 0 auto;
    border-radius: 24px;
    font-size: 16px;
    height: 44px;
    z-index: 999;
}
</style>