dy_app/src/pages/collectPage/collectAndAdd.vue

<script setup>
import emitter from "@/utils/eventBus";
import TopNav from "@/components/topNav.vue";
import {onMounted, ref} from "vue";
import CustomPopup from "@/pages/collectPage/copmonents/customPopup.vue";
import GdMap from "@/components/GdMap/index.vue"
import {addSaveData} from "@/api/collectPage";
import {hintToast} from "@/utils/tools";
import router from "@/router";

const loading = ref(false)
const disabled = ref(false)
const visible = ref(false)
const formData = ref({})

const onSubmit = async (data) => {
  try {
    loading.value = true;
    const res = await addSaveData(formData.value)
    if (res) {
      hintToast(res?.msg || '新增成功')

      setTimeout(async () => {
        await router.push(`/collectPage`)
      }, 500)
    }
  } catch (error) {
    console.log(error)
    hintToast(error?.msg || "新增失败")
  } finally {
    setTimeout(() => {
      loading.value = false
    }, 1000)
  }
}

// 获取方格
const handleChange = (val) => {
  formData.value.mc = val?.mc
  formData.value.fgdwId = val?.id
}

onMounted(() => {
  // 获取经纬度
  emitter.emit("getMapClickCoordinates");

  // 更新地图标注位置
  emitter.on("mapClickCoordinates", async (res) => {
    emitter.emit("deletePointArea")

    formData.value.jd = res.lng
    formData.value.wd = res.lat

    emitter.emit("addPointArea", {
      coords: [{ jd: res.lng, wd: res.lat }],
      coordinates: res?.coordinates,
      icon: require("../../assets/lz/dw.png"),
      sizeX: 30,
      sizeY: 35
    });
  })
})
</script>

<template>
  <div>
    <TopNav navTitle="必到点采集新增" :showLeft="true" />

    <div class="formWrapper">
      <van-form @submit="onSubmit" class="form" :disabled="disabled">
<!--        <van-field-->
<!--          v-model="formData.cjsbQk"-->
<!--          readonly-->
<!--          label="所属部门"-->
<!--          placeholder="请输入必到点名称"-->
<!--        />-->
        <van-field
           v-model="formData.bddMc"
           name="bddMc"
           required
           label="必到点名称"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
        />
        <van-field
           v-model="formData.mc"
           name="mc"
           required
           is-link
           readonly
           label="所属方格"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
           @click="visible = true"
        />
        <van-field
           v-model="formData.bddDz"
           name="bddDz"
           required
           label="地址"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
        />
        <van-field
           v-model="formData.jd"
           name="jd"
           required
           label="经度"
           placeholder="请输入经度"
           :rules="[{ required: true, message: '请输入经度' }]"
        />
        <van-field
           v-model="formData.wd"
           name="wd"
           required
           label="纬度"
           placeholder="请输入纬度"
           :rules="[{ required: true, message: '请输入纬度' }]"
        />
       <div class="mapWrapper">
         <div class="label">地图选点</div>
         <div style="height: 40vh; margin-top: 2vw">
           <gd-map />
         </div>
       </div>

        <div class="btn">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
            loading-type="spinner"
            loading-text="保存中..."
          >保存</van-button>
        </div>
      </van-form>
    </div>

    <custom-popup v-model="visible" @change="handleChange" />
  </div>
</template>

<style scoped lang="scss">
.formWrapper {
  margin-top: 13vw;

  .mapWrapper {
    padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
    font-size: var(--van-cell-font-size);
    color: var(--van-field-label-color);

    .label {
      margin-right: var(--van-field-label-margin-right);
      width: var(--van-field-label-width);
    }

    .context {
      margin-top: 2vw;
    }
  }

  .btn {
    position: fixed;
    padding: 2vw;
    bottom: 0;
    left: 0;
    width: calc(100% - 4vw);
  }
}
</style>