|
|
@@ -0,0 +1,337 @@
|
|
|
+<template>
|
|
|
+ <div class="common-form-container">
|
|
|
+ <van-form @submit="onSubmit" disabled>
|
|
|
+ <!-- 使用 v-for 循环渲染多个表单块 -->
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="common-form-content">
|
|
|
+ <div class="common-form-item">
|
|
|
+ <!-- 其他字段绑定到对应索引的表单数据 -->
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>死亡人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="total.death_toll" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>受伤人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="total.injured_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>失踪人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="total.missing_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>紧急转移:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="total.transfer_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>直接经济损失:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="total.unit_name" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">万元</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ <van-form @submit="onSubmit" disabled>
|
|
|
+ <!-- 使用 v-for 循环渲染多个表单块 -->
|
|
|
+ <div v-for="(form, index) in forms" :key="index" class="form-item">
|
|
|
+ <div class="common-form-content">
|
|
|
+ <div class="common-form-item">
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>行政区划:</div>
|
|
|
+ </div>
|
|
|
+ <van-field
|
|
|
+ v-model="form.fieldValue"
|
|
|
+ class="common-field"
|
|
|
+ :right-icon="selectIcon"
|
|
|
+ readonly
|
|
|
+ placeholder="选择城市"
|
|
|
+ @click="showPicker = true"
|
|
|
+ />
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showPicker"
|
|
|
+ destroy-on-close
|
|
|
+ round
|
|
|
+ position="bottom"
|
|
|
+ >
|
|
|
+ <van-picker
|
|
|
+ :model-value="form.pickerValue"
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onConfirm($event, index)"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ <!-- 其他字段绑定到对应索引的表单数据 -->
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>死亡人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="form.death_toll" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>受伤人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="form.injured_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>失踪人数:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="form.missing_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>紧急转移:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="form.transfer_num" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">人</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="box">
|
|
|
+ <div>直接经济损失:</div>
|
|
|
+ </div>
|
|
|
+ <van-field v-model="form.unit_name" class="common-field">
|
|
|
+ <template #extra>
|
|
|
+ <div class="font-stl">万元</div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import selectIcon from "@/assets/images/selectIcon.png";
|
|
|
+import { ref } from "vue";
|
|
|
+import { PickerConfirmEventParams, showToast } from "vant";
|
|
|
+
|
|
|
+const forms = ref([
|
|
|
+ {
|
|
|
+ fieldValue: "maoming",
|
|
|
+ death_toll: "1",
|
|
|
+ injured_num: "1",
|
|
|
+ missing_num: "1",
|
|
|
+ transfer_num: "1",
|
|
|
+ unit_name: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fieldValue: "xinyi",
|
|
|
+ death_toll: "1",
|
|
|
+ injured_num: "1",
|
|
|
+ missing_num: "1",
|
|
|
+ transfer_num: "1",
|
|
|
+ unit_name: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fieldValue: "xinyi",
|
|
|
+ death_toll: "1",
|
|
|
+ injured_num: "1",
|
|
|
+ missing_num: "1",
|
|
|
+ transfer_num: "1",
|
|
|
+ unit_name: "1"
|
|
|
+ }
|
|
|
+]);
|
|
|
+const total = ref({
|
|
|
+ death_toll: "0",
|
|
|
+ injured_num: "0",
|
|
|
+ missing_num: "0",
|
|
|
+ transfer_num: "0",
|
|
|
+ unit_name: "0"
|
|
|
+});
|
|
|
+const columns = [
|
|
|
+ { text: "茂名市", value: "maoming" },
|
|
|
+ { text: "茂南区", value: "maonan" },
|
|
|
+ { text: "电白区", value: "dianbai" },
|
|
|
+ { text: "高州市", value: "gaozhou" },
|
|
|
+ { text: "信宜市", value: "xinyi" },
|
|
|
+ { text: "化州市", value: "huazhou" }
|
|
|
+];
|
|
|
+watchEffect(() => {
|
|
|
+ const sum = {
|
|
|
+ death_toll: 0,
|
|
|
+ injured_num: 0,
|
|
|
+ missing_num: 0,
|
|
|
+ transfer_num: 0,
|
|
|
+ unit_name: 0
|
|
|
+ };
|
|
|
+ forms.value.forEach(form => {
|
|
|
+ sum.death_toll += Number(form.death_toll) || 0;
|
|
|
+ sum.injured_num += Number(form.injured_num) || 0;
|
|
|
+ sum.missing_num += Number(form.missing_num) || 0;
|
|
|
+ sum.transfer_num += Number(form.transfer_num) || 0;
|
|
|
+ sum.unit_name += Number(form.unit_name) || 0;
|
|
|
+ });
|
|
|
+ total.value.death_toll = String(sum.death_toll);
|
|
|
+ total.value.injured_num = String(sum.injured_num);
|
|
|
+ total.value.missing_num = String(sum.missing_num);
|
|
|
+ total.value.transfer_num = String(sum.transfer_num);
|
|
|
+ total.value.unit_name = String(sum.unit_name);
|
|
|
+});
|
|
|
+const MAX_FORMS = 6;
|
|
|
+const showPicker = ref(false);
|
|
|
+const pickerValue = ref([]);
|
|
|
+
|
|
|
+const onConfirm = (event: PickerConfirmEventParams, index: number) => {
|
|
|
+ const { selectedOptions } = event;
|
|
|
+ forms.value[index].showPicker = false;
|
|
|
+ forms.value[index].fieldValue = selectedOptions[0].text;
|
|
|
+};
|
|
|
+
|
|
|
+const addPart = () => {
|
|
|
+ if (forms.value.length >= MAX_FORMS) {
|
|
|
+ showToast(`最多只能添加${MAX_FORMS}个表单`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ forms.value.push({
|
|
|
+ fieldValue: "",
|
|
|
+ showPicker: false,
|
|
|
+ pickerValue: [],
|
|
|
+ death_toll: "",
|
|
|
+ injured_num: "",
|
|
|
+ missing_num: "",
|
|
|
+ transfer_num: "",
|
|
|
+ unit_name: ""
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 新增事件处理
|
|
|
+const handleSubmit = () => {
|
|
|
+ console.log("提交数据：", forms.value);
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ //清空表单
|
|
|
+ forms.value = [
|
|
|
+ {
|
|
|
+ fieldValue: "",
|
|
|
+ showPicker: false,
|
|
|
+ pickerValue: [],
|
|
|
+ death_toll: "",
|
|
|
+ injured_num: "",
|
|
|
+ missing_num: "",
|
|
|
+ transfer_num: "",
|
|
|
+ unit_name: ""
|
|
|
+ }
|
|
|
+ ];
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.label-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.box {
|
|
|
+ width: 160px;
|
|
|
+}
|
|
|
+.font-stl {
|
|
|
+ color: #cfccd1;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 3px;
|
|
|
+}
|
|
|
+.common-form-container .common-form-item {
|
|
|
+ :deep(.common-field) {
|
|
|
+ border: 1px solid #dce0ee;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 6px 0;
|
|
|
+ .van-field__body {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.dashed-box {
|
|
|
+ border: 2px dashed #dce0ee;
|
|
|
+ padding: 20px;
|
|
|
+ width: 310px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+.button-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin: 20px 16px 0;
|
|
|
+
|
|
|
+ .confirm-btn,
|
|
|
+ .cancel-btn {
|
|
|
+ flex: 1;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ color: #666;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 调整原有+号框间距
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+.disabled-add {
|
|
|
+ opacity: 0.6;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.limit-tip {
|
|
|
+ color: #f56c6c;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
