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";
import {useRoute} from "vue-router";

const navTitle = ref("必到点采集新增")
const loading = ref(false)
const disabled = ref(false)
const visible = ref(false)
const formData = ref({})
const route = useRoute()

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

      setTimeout( () => {
        router.back()
      }, 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
}

const handleVisible = () => {
  if (disabled.value) return
  visible.value = true
}

onMounted(() => {
  if (route.query?.item) {
    // 查看详情禁用处理
    formData.value = JSON.parse(route.query.item)
    console.log(formData.value)
    disabled.value = true

    navTitle.value = '必到点采集详情'

    // 禁用地图
    emitter.emit("setMapInteractions", !disabled.value)
  } else {
    disabled.value = false

    // 获取经纬度
    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="navTitle" :showLeft="true" />

    <div class="formWrapper">
      <van-form @submit="onSubmit" class="form" :readonly="disabled">
<!--        <van-field-->
<!--          v-model="formData.cjsbQk"-->
<!--          readonly-->
<!--          label="所属部门"-->
<!--          placeholder="请输入必到点名称"-->
<!--        />-->
        <van-field
           v-model="formData.bddMc"
           name="bddMc"
           :required="!disabled"
           label="必到点名称"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
        />
        <van-field
           v-model="formData.mc"
           name="mc"
           :required="!disabled"
           is-link
           readonly
           label="所属方格"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
           @click="handleVisible"
        />
        <van-field
           v-model="formData.bddDz"
           name="bddDz"
           :required="!disabled"
           label="地址"
           placeholder="请输入必到点名称"
           :rules="[{ required: true, message: '请输入必到点名称' }]"
        />
        <van-field
           v-model="formData.jd"
           name="jd"
           :required="!disabled"
           label="经度"
           placeholder="请输入经度"
           :rules="[{ required: true, message: '请输入经度' }]"
        />
        <van-field
           v-model="formData.wd"
           name="wd"
           :required="!disabled"
           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" v-if="!disabled">
          <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>