feat: 恢复重建H5 添加加载状态
This commit is contained in:
parent
db10d94b16
commit
ea1dc1afc4
@ -1,40 +1,47 @@
|
||||
<template>
|
||||
<PageContainer title="恢复重建" @click-back="handleClickBack">
|
||||
<SearchInput v-model="searchValue" />
|
||||
<PageContainer title="恢复重建" @click-back="handleClickBack">
|
||||
<SearchInput v-model="searchValue" />
|
||||
|
||||
<CurrentSite />
|
||||
<CurrentSite />
|
||||
|
||||
<div class="list-panel">
|
||||
<CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`"
|
||||
@click="handleClickItem(item)">
|
||||
<template #headerExtra>
|
||||
<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="list-panel">
|
||||
<van-list :loading="loading" :finished="finished" finished-text="没有更多了">
|
||||
<CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`" @click="handleClickItem(item)">
|
||||
<template #headerExtra>
|
||||
<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.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" />
|
||||
</div>
|
||||
</div>
|
||||
</CardItem>
|
||||
<div class="content">
|
||||
<div class="left-info">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</CardItem>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
|
||||
</div>
|
||||
<!-- 空状态提示 -->
|
||||
<!-- <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" /> -->
|
||||
</van-list>
|
||||
</div>
|
||||
|
||||
<van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice">
|
||||
项目填报
|
||||
</van-button>
|
||||
</PageContainer>
|
||||
<van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice"> 项目填报 </van-button>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -45,30 +52,34 @@ 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";
|
||||
import { request } from '../../../../shared/utils/request'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
getData()
|
||||
})
|
||||
|
||||
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 params = {
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
}
|
||||
if (searchValue.value) {
|
||||
params.districtName = searchValue.value
|
||||
}
|
||||
loading.value = true
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/recovery/list',
|
||||
method: 'GET',
|
||||
params,
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
list.value = res.data.records
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 搜索关键词
|
||||
@ -77,83 +88,83 @@ const searchValue = ref('')
|
||||
// 预警列表数据
|
||||
const list = ref([])
|
||||
|
||||
|
||||
const handleClickBack = () => {
|
||||
router.push('/')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const handleClickItem = (item) => {
|
||||
router.push({
|
||||
name: 'RebuildDetails',
|
||||
params: {
|
||||
data: encodeURIComponent(JSON.stringify(item.id))
|
||||
}
|
||||
})
|
||||
router.push({
|
||||
name: 'RebuildDetails',
|
||||
params: {
|
||||
data: encodeURIComponent(JSON.stringify(item.id)),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handleAddDevice = () => {
|
||||
router.push('/rebuild-add')
|
||||
// router.push({
|
||||
// name: "RebuildAdd",
|
||||
// params: {
|
||||
// data: encodeURIComponent(JSON.stringify(11)),
|
||||
// },
|
||||
// });
|
||||
router.push('/rebuild-add')
|
||||
// router.push({
|
||||
// name: "RebuildAdd",
|
||||
// params: {
|
||||
// data: encodeURIComponent(JSON.stringify(11)),
|
||||
// },
|
||||
// });
|
||||
}
|
||||
|
||||
watch(() => searchValue.value, () => {
|
||||
watch(
|
||||
() => searchValue.value,
|
||||
() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #aaa;
|
||||
}
|
||||
.value {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
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>
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PageContainer title="项目填报" @click-back="handleClickBack">
|
||||
<div class="content">
|
||||
<PanelItem>
|
||||
<PanelItem v-if="!loading">
|
||||
<div class="detail">
|
||||
<div class="header">
|
||||
<div class="header-title">{{ data.projectName }}</div>
|
||||
@ -26,7 +26,7 @@
|
||||
<div class="item">恢复重建预估费用： {{ data.estimatedCost }}</div>
|
||||
</div>
|
||||
</PanelItem>
|
||||
<PanelItem title="附件">
|
||||
<PanelItem v-if="!loading" title="附件">
|
||||
<div class="fileArea">
|
||||
<van-image v-for="(item, index) in data?.fileList" :key="index" :src="item.fileUrl" fit="cover"
|
||||
width="100px" height="100px" style="margin: 10px" @click="showImage(item.fileUrl)"></van-image>
|
||||
@ -56,6 +56,7 @@ const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const data = ref({})
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (route.params.data) {
|
||||
@ -69,6 +70,7 @@ onMounted(() => {
|
||||
|
||||
const getDetaillData = async (id) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/recovery/getById',
|
||||
method: 'GET',
|
||||
@ -82,6 +84,8 @@ const getDetaillData = async (id) => {
|
||||
} catch (error) {
|
||||
showToast('获取详情失败，请稍后重试')
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user