feat: 灾毁mobile新增地址选择
This commit is contained in:
parent
b9ad950516
commit
264501ee01
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
1
packages/mobile/src/styles/vant-ui-style.scss
Normal file
1
packages/mobile/src/styles/vant-ui-style.scss
Normal file
@ -0,0 +1 @@
|
||||
// vant-ui 的样式覆盖均写在这里
|
||||
@ -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';
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user