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

<template>
    <PageContainer title="项目填报" @click-back="handleClickBack">
        <div class="content">
            <PanelItem>
                <van-form label-align="left" colon>
                    <van-field v-model="form.name" label="区县名称" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写区县名称' }]" />
                    <van-field v-model="form.name" label="线路编号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写线路编号' }]" />
                    <van-field v-model="form.name" label="起点桩号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写起点桩号' }]" />
                    <van-field v-model="form.name" label="止点桩号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写止点桩号' }]" />
                    <van-field v-model="form.name" label="止点桩号" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写止点桩号' }]" />
                    <van-field v-model="form.number" label="实施里程" center placeholder="单位:公里" required type="number"
                        :rules="[{ required: true, message: '请填写实施里程' }]">
                        <template #extra>
                            公里
                        </template>
                    </van-field>
                    <van-field v-model="form.name" label="塌方及损失" center placeholder="(方/万元)" required
                        :rules="[{ required: true, message: '请填写塌方及损失' }]" />
                    <van-field v-model="form.name" label="灾害类型" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写灾害类型' }]" />
                    <van-field v-model="form.name" label="地点路线" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写地点路线' }]" />
                    <van-field v-model="form.name" label="路况位置" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写路况位置' }]" />
                    <van-field v-model="form.name" label="阻断点小地名" center placeholder="请填写" required
                        :rules="[{ required: true, message: '请填写阻断点小地名' }]" />
                    <van-field v-model="form.name" 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="photos" :file-list="fileList"
                                :file-type="['image/jpeg', 'image/png']" :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 } 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'

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

const form = ref({})
const fileList = 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.photos.findIndex((p) => p.photoUrl === file.serverUrl);
        if (index !== -1) {
            form.photos.splice(index, 1);
        }
    }
};

// 文件上传
const afterRead = async (file) => {
    try {
        const toast = showLoadingToast({
            message: "上传中...",
            forbidClick: true,
            duration: 0, // 设置为0表示不会自动关闭
        });
        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") {
            form.photos.push({ photoUrl: res.data });
            const index = fileList.value.findIndex((f) => f.file === file.file);
            if (index !== -1) {
                fileList.value[index].serverUrl = res.data;
            }

            console.log("form.photos", toRaw(form.photos));
            console.log("fileList.value", fileList.value);
        } else {
            throw new Error(res.message);
        }
    } catch (error) {
        toast.close();
        showToast({
            type: "fail",
            message: error.message,
        });
    }
};
</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>