bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 恢复重建app 项目填报

Browse Source
This commit is contained in:
huangchenhao 2026-04-09 11:35:50 +08:00
parent c1a05ab71d
commit 71a66f34b1
2 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/mobile/src/views/Rebuild/Rebuild.vue
View File

@ -5,20 +5,21 @@
<CurrentSite />
<div class="list-panel">
<CardItem v-for="(item, index) in list" :key="index" :title="`${item.area} ${item.rNumber} ${item.type}`"
<CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`"
@click="handleClickItem(item)">
<template #headerExtra>
<van-tag v-if="item.status === '审批通过'" type="success" plain size="medium">{{ item.status }}</van-tag>
<van-tag v-else-if="item.status === '审批驳回'" type="danger" plain size="medium">{{ item.status
}}</van-tag>
<van-tag v-else type="warning" plain size="medium">{{ item.status }}</van-tag>
<van-tag v-if="item.approvalStatus === 3 || item.approvalStatus === 1" type="success" plain size="medium">审批通过</van-tag>
<van-tag v-else-if="item.approvalStatus === 2 || item.approvalStatus === 4" type="danger" plain size="medium">审批驳回</van-tag>
<van-tag v-else type="warning" plain size="medium">待审批</van-tag>
</template>
<div class="content">
<div class="left-info">
<div><span class="label">起止桩号：</span><span class="value">{{ item.stationNumber }}</span></div>
<div><span class="label">路况位置：</span><span class="value">{{ item.position }}</span></div>
<div><span class="label">提交日期：</span><span class="value">{{ item.publishTime }}</span></div>
<div><span class="label">起止桩号：</span><span class="value">{{ `${item.startStakeNo} -
${item.endStakeNo}`}}</span>
</div>
<div><span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span></div>
<div><span class="label">提交日期：</span><span class="value">{{ item.submitTime }}</span></div>
</div>
<div class="right-arrow" @click.stop="handleClickItem(item)">
<van-icon name="arrow" />
@ -44,6 +45,7 @@ import SearchInput from '@/components/SearchInput.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import CardItem from '@/components/CardItem.vue'
import EmptyBox from '@/components/EmptyBox.vue'
import { request } from "../../../../shared/utils/request";
const router = useRouter()
@ -52,44 +54,28 @@ onMounted(() => {
})
const getData = async () => {
const params = {
pageNum: 1,
pageSize: 999,
}
if (searchValue.value) {
params.districtName = searchValue.value
}
const res = await request({
url: '/snow-ops-platform/recovery/list',
method: 'GET',
params
})
if (res.code === '00000') {
list.value = res.data.records
}
}
// 搜索关键词
const searchValue = ref('')
// 预警列表数据
const list = ref([
{
id: 1,
area: '彭水',
rNumber: 'G211',
type: '发生水毁道路崩塌恢复重建',
stationNumber: 'K1674.16-1678.84',
position: '徐家镇村口南分叉路口',
publishTime: '2025-05-20',
status: '审批通过'
},
{
id: 2,
area: '巴南',
rNumber: 'S303',
type: '道路发生边坡坍塌',
stationNumber: 'K1674.16-1678.84',
position: '徐家镇村口南分叉路口',
publishTime: '2025-05-20',
status: '审批驳回'
},
{
id: 3,
area: '彭水',
rNumber: 'G211',
type: '道路崩塌改造工程',
stationNumber: 'K1674.16-1678.84',
position: '徐家镇村口南分叉路口',
publishTime: '2025-05-20',
status: '审批通过'
},
])
const list = ref([])
const handleClickBack = () => {
@ -115,6 +101,10 @@ const handleAddDevice = () => {
// });
}
watch(() => searchValue.value, () => {
getData()
})
</script>

126
packages/mobile/src/views/Rebuild/RebuildAdd.vue
View File

@ -2,34 +2,32 @@
<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
<van-form ref="formRef" label-align="left" colon>
<van-field v-model="form.project.districtName" label="区县名称" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写区县名称' }]" />
<van-field v-model="form.name" label="线路编号" center placeholder="请填写" required
<van-field v-model="form.project.routeNo" label="线路编号" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写线路编号' }]" />
<van-field v-model="form.name" label="起点桩号" center placeholder="请填写" required
<van-field v-model="form.project.startStakeNo" label="起点桩号" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写起点桩号' }]" />
<van-field v-model="form.name" label="止点桩号" center placeholder="请填写" required
<van-field v-model="form.project.endStakeNo" 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: '请填写实施里程' }]">
<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.name" label="塌方及损失" center placeholder="(方/万元)" required
<van-field v-model="form.project.earthworkLoss" label="塌方及损失" center placeholder="(方/万元)" required
:rules="[{ required: true, message: '请填写塌方及损失' }]" />
<van-field v-model="form.name" label="灾害类型" center placeholder="请填写" required
<van-field v-model="form.project.disasterType" label="灾害类型" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写灾害类型' }]" />
<van-field v-model="form.name" label="地点路线" center placeholder="请填写" required
<van-field v-model="form.project.locationRoute" label="地点路线" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写地点路线' }]" />
<van-field v-model="form.name" label="路况位置" center placeholder="请填写" required
<van-field v-model="form.project.roadLocation" label="路况位置" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写路况位置' }]" />
<van-field v-model="form.name" label="阻断点小地名" center placeholder="请填写" required
<van-field v-model="form.project.blockedPointName" label="阻断点小地名" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写阻断点小地名' }]" />
<van-field v-model="form.name" label="恢复重建预估费用" center placeholder="请填写" required
<van-field v-model="form.project.estimatedCost" label="恢复重建预估费用" center placeholder="请填写" required
:rules="[{ required: true, message: '请填写恢复重建预估费用' }]">
<template #extra>
万元
@ -37,9 +35,8 @@
</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" />
<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>
@ -56,17 +53,34 @@
<script setup>
import { ref, onMounted, watch } from 'vue'
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";
const router = useRouter()
const route = useRoute()
const form = ref({})
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) {
@ -74,7 +88,7 @@ onMounted(() => {
console.log('@@@@data', data);
// todo 在有传参的时候 调用接口去获取数据 并且初始化表单
} else {
console.log('无传入数据');
// console.log('无传入数据');
}
})
@ -89,21 +103,21 @@ const handleClickBack = () => {
// 文件删除
const handleDelete = (file) => {
if (file.serverUrl) {
const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
const index = form.fileList.findIndex((p) => p.fileUrl === file.serverUrl);
if (index !== -1) {
form.photos.splice(index, 1);
form.fileList.splice(index, 1);
}
}
};
// 文件上传
const afterRead = async (file) => {
const toast = showLoadingToast({
message: "上传中...",
forbidClick: true,
duration: 0, // 设置为0表示不会自动关闭
});
try {
const toast = showLoadingToast({
message: "上传中...",
forbidClick: true,
duration: 0, // 设置为0表示不会自动关闭
});
const formData = new FormData();
formData.append("file", file.file);
const res = await request({
@ -113,14 +127,23 @@ const afterRead = async (file) => {
});
toast.close();
if (res.code === "00000") {
form.photos.push({ photoUrl: res.data });
// 根据文件类型设置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.photos", toRaw(form.photos));
console.log("fileList.value", fileList.value);
// console.log("form.fileList", toRaw(form.fileList));
// console.log("fileList.value", fileList.value);
} else {
throw new Error(res.message);
}
@ -132,6 +155,45 @@ const afterRead = async (file) => {
});
}
};
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('请检查并完善表单信息');
}
}
</script>
<style scoped lang="scss">