feat: 灾毁mobile新增地址选择

This commit is contained in:
niedongsheng 2026-04-28 17:00:01 +08:00
parent b9ad950516
commit 264501ee01
8 changed files with 104 additions and 36 deletions

View File

@ -14,7 +14,7 @@
/>
<!-- 弹出层同时包含日期和时间选择器 -->
<van-popup v-model:show="showPicker" position="bottom" round>
<van-popup v-model:show="showPicker" position="bottom">
<div class="picker-container">
<div class="picker-header">
<span class="picker-cancel" @click="showPicker = false">取消</span>

View File

@ -14,7 +14,7 @@
/>
<!-- 弹出层选择器 -->
<van-popup v-model:show="showPicker" position="bottom" round>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker
:modelValue="getPickerValue()"
:columns="columns"

View File

@ -6,6 +6,7 @@ import './styles/index.css'
import 'vant/lib/index.css'
import "vant/es/toast/style";
import "vant/es/popup/style";
import "./styles/vant-ui-style.scss"
const app = createApp(App)

View File

@ -0,0 +1 @@
// vant-ui 的样式覆盖均写在这里

View File

@ -64,26 +64,11 @@
</PanelItem>
<PanelItem title="处置情况">
<van-field label="处置措施" label-align="top">
<template #input>
<van-row :gutter="5">
<van-col
v-for="(item, index) in options['iceDisposalMeasures']"
:span="8"
:key="index"
>
<van-button
block
plain
:type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'"
@click="formData.report.disposalMeasures = item.value"
>
{{ item.label }}
</van-button>
</van-col>
</van-row>
</template>
</van-field>
<DisposalMeasuresSelector
v-model="formData.report.disposalMeasures"
:options="options['iceDisposalMeasures']"
label="处置措施"
/>
<BaseDatePicker
v-model="formData.report.expectRecoverTime"
@ -170,6 +155,7 @@ import { ref, computed, onMounted } from 'vue';
import PanelItem from '@/components/PanelItem.vue';
import BasePicker from '@/components/BasePicker.vue';
import BaseDatePicker from '@/components/BaseDatePicker.vue';
import DisposalMeasuresSelector from '../components/DisposalMeasuresSelector.vue';
import PositionPickerMobile from '../components/PositionPickerMobile.vue';
import RoadRoutesPicker from '../components/RoadRoutesPicker.vue';
import MaterialPicker from '../components/MaterialPicker.vue';

View File

@ -66,19 +66,11 @@
<!-- 处置情况 (report) -->
<PanelItem title="处置情况">
<van-field label="处置措施" label-align="top">
<template #input>
<div class="measures-options">
<van-row gutter="10">
<van-col v-for="(item, index) in options['disposalMeasures']" :span="24 / options['disposalMeasures'].length" :key="index">
<van-button block plain :type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'" @click="formData.report.disposalMeasures = item.value">
{{ item.label }}
</van-button>
</van-col>
</van-row>
</div>
</template>
</van-field>
<DisposalMeasuresSelector
v-model="formData.report.disposalMeasures"
:options="options['disposalMeasures']"
label="处置措施"
/>
<!-- 预计恢复时间 (report.expectRecoverTime) -->
<BaseDatePicker v-model="formData.report.expectRecoverTime" label="预计恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
@ -173,6 +165,7 @@ import PanelItem from '@/components/PanelItem.vue'
import BasePicker from '@/components/BasePicker.vue'
import BaseDatePicker from '@/components/BaseDatePicker.vue'
import DisasterFileUpload from '../components/DisasterFileUpload.vue'
import DisposalMeasuresSelector from '../components/DisposalMeasuresSelector.vue'
import PositionPickerMobile from '../components/PositionPickerMobile.vue'
import RoadRoutesPicker from '../components/RoadRoutesPicker.vue'
import LossList from '../components/LossList.vue'

View File

@ -0,0 +1,87 @@
<template>
<van-field :label="label" label-align="top">
<template #input>
<div class="measures-selector">
<button
v-for="item in options"
:key="item[valueKey]"
type="button"
class="measure-chip"
:class="{ 'is-active': item[valueKey] === modelValue }"
@click="handleSelect(item)"
>
{{ item[labelKey] }}
</button>
</div>
</template>
</van-field>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: [String, Number, Boolean],
default: ''
},
options: {
type: Array,
default: () => []
},
label: {
type: String,
default: '处置措施'
},
labelKey: {
type: String,
default: 'label'
},
valueKey: {
type: String,
default: 'value'
}
})
const emit = defineEmits(['update:modelValue', 'change'])
const handleSelect = (item) => {
const value = item?.[props.valueKey]
emit('update:modelValue', value)
emit('change', item)
}
</script>
<style scoped lang="scss">
.measures-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
width: 100%;
}
.measure-chip {
min-height: 44px;
padding: 10px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
color: #323233;
font-size: 14px;
line-height: 1.35;
text-align: center;
word-break: break-word;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.measure-chip.is-active {
border-color: var(--van-primary-color);
color: var(--van-primary-color);
}
.measure-chip:active {
transform: scale(0.98);
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<van-popup v-model:show="showPicker" position="bottom" round>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker :columns="columns" :title="pickerTitle" show-toolbar @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</template>