下发任务 修改任务处理

src/pages/collectPage/collectAndAdd.vue

@@ -0,0 +1,172 @@
+<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>