dy_web/src/views/backOfficeSystem/service/taskPage/collectPage/AddFgFormDialog.vue

<template>
  <div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button v-if="!infoActive" type="primary" size="small" @click="submit" :loading="btnLoading">保存</el-button>
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>

      <div class="dialogWrapper">
        <el-form ref="formRef" :model="form" :rules="rules" :inline="true" :disabled="infoActive">
          <el-form-item prop="bddMc" label="必到点名称:">
            <el-input style="width: 80%" min="0" placeholder="请填写必到点名称" v-model="form.bddMc"></el-input>
          </el-form-item>
          <el-form-item prop="fgdwId" label="所属方格:">
            <el-select :disabled="typeStatus === 'del'" placeholder="请选择所属方格" filterable clearable v-model="form.fgdwId"
              @change="handleChange">
              <el-option v-for="item in fgList" :key="item?.id" :label="item?.mc" :value="item?.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="bddDz" label="必到点地址:">
            <el-input placeholder="请填必到点地址" clearable v-model="form.bddDz"></el-input>
          </el-form-item>
          <el-form-item prop="dkjgsj" label="必到点间隔时间/分钟为单位:">
            <el-input placeholder="请填写必到点间隔时间/分钟为单位" v-model="form.dkjgsj"></el-input>
          </el-form-item>
          <el-form-item prop="jd" label="经度:">
            <el-input disabled placeholder="请填写经度" v-model="form.jd"></el-input>
          </el-form-item>
          <el-form-item prop="wd" label="纬度:">
            <el-input disabled placeholder="请填写纬度" v-model="form.jd"></el-input>
          </el-form-item>
        </el-form>

        <div style="height: calc(100vh - 336px)">
          <gd-map />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed, onMounted } from "vue";
import {
  fetchTbZdxlFgdwSelectList,
  fetchTbZdxlFgdwBddSave,
  fetchTbZdxlFgdwBddUpdate,
  fetchTbZdxlFgdwId
} from "@/api/service/taskProgress";
const { proxy } = getCurrentInstance();
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus";
const btnLoading = ref(false); //按钮截流
const title = ref("新增必到点采集");
const formRef = ref(null);
const infoActive = ref(true);
const visible = ref(false);
const fgList = ref([]);
const typeStatus = ref("");

//级联选择器配置
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:modelValue", "ok"]);
const dialogFormVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    if (!infoActive.value && typeStatus?.value !== "del") {
      // 获取经纬度
      setTimeout(() => {
        emitter.emit("getMapClickCoordinates");
        // 更新地图标注位置
        emitter.on("mapClickCoordinates", async (res) => {
          emitter.emit("deletePointArea");
          form.value.jd = res.lng;
          form.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
          });
        });
      }, 500);
    } else {
      emitter.off("getMapClickCoordinates");
    }
    emits("update:modelValue", val);
  }
});

//表单数据
const form = ref({
  bddList: []
});
//表单验证
const rules = reactive({
  bddMc: [
    {
      required: true,
      message: "请填写必到点名称",
      trigger: "change"
    }
  ],
  fgdwId: [
    {
      required: true,
      message: "请选择所属方格",
      trigger: "change"
    }
  ],
  bddDz: [
    {
      required: true,
      message: "请填必到点地址",
      trigger: "change"
    }
  ],
  jd: [
    {
      required: true,
      message: "请填写经度",
      trigger: "change"
    }
  ],
  wd: [
    {
      required: true,
      message: "请填写纬度",
      trigger: "change"
    }
  ]
});

// 获取方格
const getFgList = async () => {
  const res = await fetchTbZdxlFgdwSelectList();
  if (res && res?.length > 0) {
    fgList.value = res;
  }
};

// 获取方格详情
const getFgDetails = async (id, type) => {
  const res = await fetchTbZdxlFgdwId(id);
  if (res) {
    setMap(res, type);
  }
};

//新增
function open(row = {}, type) {
  typeStatus.value = type;
  infoActive.value = type === "view";
  form.value = { ...row, xfbbName: row?.xfxz };
  if (type === "view") {
    title.value = "查看信息";
  } else if (type === "del") {
    title.value = "编辑必到点采集";
  } else {
    title.value = "新增必到点采集";
  }

  if (type === "view" || type === "del") {
    getFgDetails(form?.value?.fgdwId, !(type === "view" || type === "del"));
  }
  dialogFormVisible.value = true;
}

//关闭弹窗
function close() {
  formRef.value.resetFields();
  dialogFormVisible.value = false;
}

const handleChange = (val) => {
  const data = fgList?.value?.find((i) => i?.id === val);
  setMap(data);
};

const setMap = (data, type = true) => {
  emitter.emit("deletePointArea", "addfg");
  const {
    x1 = "",
    y1 = "",
    x2 = "",
    y2 = "",
    id = "",
    zxX = "",
    zxY = "",
    mc = ""
  } = data;
  const centerPoint = [zxX, zxY];
  const position = [
    [Number(x1), Number(y1)],
    [Number(x2), Number(y2)]
  ];
  const text = mc;
  const obj = [{ position: position, text, id, userData: data }];
  emitter.emit("echoPlane", {
    fontColor: "#12fdb8",
    coords: obj,
    type: "rectangle",
    flag: "addfg",
    color: "rgba(2,20,51,0.5)",
    linecolor: "#1C97FF"
  });
  emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
  // 更新地图标注位置
  if (type) return;
  emitter.emit("deletePointArea");
  emitter.emit("addPointArea", {
    coords: [{ jd: form.value?.jd, wd: form.value?.wd }],
    coordinates: [form.value?.jd, form.value?.wd],
    icon: require("@/assets/lz/dw.png"),
    sizeX: 30,
    sizeY: 35
  });
};

//提交
const submit = async () => {
  try {
    await formRef.value.validate();
    if (!form.value?.id) {
      await fetchTbZdxlFgdwBddSave(form.value);
    } else {
      await fetchTbZdxlFgdwBddUpdate(form.value);
    }
    proxy.$message({
      type: "success",
      message: "修改成功"
    });
    dialogFormVisible.value = false;
    emits("ok");
  } catch (error) {
    console.log(error);
  }
};

onMounted(() => {
  getFgList();
});

defineExpose({ open });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.dialog {
  .dialogWrapper {
    margin: 20px 20px 0 20px;

    .el-form--inline {
      padding: 0 0 0rem 0;
    }
  }
}

.label {
  margin-bottom: 1rem;
}
</style>