caseEditor/src/app/fire/view/dispatch/editFire.vue

<template>
  <el-form ref="form" label-width="94px" class="camera-from">
    <div class="def-select-map" ref="mapEl"></div>
    <div class="el-form-item">
      <el-col :span="12">
        <el-form-item label="事件分类" class="mandatory">
          <el-input
            v-model="bindFire.projectSn"
            maxlength="18"
            placeholder="请输入事件分类"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="分类登记" class="mandatory">
          <el-input
            v-model="bindFire.projectName"
            maxlength="50"
            placeholder="请输入分类登记"
          />
        </el-form-item>
      </el-col>
    </div>
    <el-form-item label="详细地址" class="mandatory asdasd">
      <!-- <el-input
        v-model="bindFire.projectAddress"
        maxlength="50"
        placeholder="请输入详细地址"
      /> -->
      <el-input v-model="keyword" placeholder="输入名称搜索" clearable @change="search">
        <template #append>
          <el-button :icon="Search" @click="search" />
        </template>
      </el-input>
      <div class="search-result" v-show="!info" ref="resultEl"></div>
    </el-form-item>
    <el-form-item label="勘验地址" class="mandatory">
      <el-input v-model="bindFire.field1" maxlength="50" placeholder="请输入勘验地址" />
    </el-form-item>
    <el-form-item label="勘验信息" class="mandatory">
      <el-input
        v-model="bindFire.projectSite"
        placeholder="请输入天气情况等标准化勘验信息"
      />
      <!--       
      <el-cascader
        style="width: 100%"
        v-model="projectSite"
        placeholder="天气情况等标准化勘验信息"
        :options="place"
        :props="{ expandTrigger: 'hover' }"
      /> -->
    </el-form-item>
    <el-form-item label="全宗名称" class="mandatory">
      <el-input v-model="bindFire.field2" maxlength="50" placeholder="请输入全宗名称" />
    </el-form-item>

    <div class="el-form-item">
      <el-col :span="12">
        <el-form-item label="承办单位" class="mandatory">
          <companySelect v-model="bindFire.deptId" hideAll :notUpdate="true" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="勘验人员" class="mandatory" placeholder="请输入勘验人员">
          <el-input v-model="bindFire.organizerUsers" maxlength="50" />
        </el-form-item>
      </el-col>
    </div>
    <div class="el-form-item">
      <el-col :span="12">
        <el-form-item label="勘验人姓名" class="mandatory">
          <el-input
            v-model="bindFire.field3"
            maxlength="18"
            placeholder="请输入勘验人姓名"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位、职务" class="mandatory">
          <el-input
            v-model="bindFire.field4"
            maxlength="50"
            placeholder="请输入勘验人单位、职务"
          />
        </el-form-item>
      </el-col>
    </div>
    <div class="el-form-item">
      <el-col :span="12">
        <el-form-item label="勘验日期" class="mandatory" placeholder="请选择勘验日期">
          <el-date-picker
            type="date"
            v-model="accidentDate"
            style="width: 100%"
            :disabled-date="(date) => date.getTime() > new Date().getTime()"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="大屏显示" class="mandatory">
          <el-switch v-model="bindFire.mapShow" :disabled="!bindFire.latlng" />
        </el-form-item>
      </el-col>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import companySelect from "@/components/company-select/index.vue";
import { ref, watchEffect } from "vue";
import { Fire, setFire, addFire } from "@/app/fire/store/fire";
import { reason, place } from "@/app/fire/constant/fire";
import { ElMessage } from "element-plus";
import { dateFormat, debounce } from "@/util";
import { genCascaderValue, getCode } from "@/helper/cascader";
import { QuiskExpose } from "@/helper/mount";
import AMapLoader from "@amap/amap-jsapi-loader";
import { user } from "@/store/user";
import { Search } from "@element-plus/icons-vue";

const props = defineProps<{ fire?: Fire }>();

const bindFire = ref<Fire>(
  props.fire
    ? { ...props.fire }
    : ({
        deptId: user.value.info.deptId,
      } as Fire)
);

const fireReason = genCascaderValue(bindFire, "fireReason");
const projectSite = genCascaderValue(bindFire, "projectSite");
const accidentDate = ref(
  bindFire.value.accidentDate ? new Date(bindFire.value.accidentDate) : new Date()
);
const keyword = ref(bindFire.value.projectAddress || "");
const resultEl = ref<HTMLDivElement>();
const searchAMap = ref<any>();
type MapInfo = { lat: number; lng: number };
const info = ref<MapInfo>();
const mapEl = ref<HTMLDivElement>();

watchEffect(async (onCleanup) => {
  if (!mapEl.value || !resultEl.value) {
    return;
  }
  const AMap = await AMapLoader.load({
    plugins: ["AMap.PlaceSearch"],
    key: "e661b00bdf2c44cccf71ef6070ef41b8",
    version: "2.0",
  });

  const map = new AMap.Map(mapEl.value, {
    WebGLParams: {
      preserveDrawingBuffer: true,
    },
    resizeEnable: true,
  });
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex: 1,
    map: map,
    panel: resultEl.value,
    autoFitView: true,
  });
  placeSearch.on("listElementClick", (e) => {
    bindFire.value.projectAddress =
      e.data.pname + e.data.cityname + e.data.adname + e.data.address;
    keyword.value = bindFire.value.projectAddress;
    console.log(e.data);
    bindFire.value.latAndLong = `${e.data.location.lat},${e.data.location.lng}`;
    bindFire.value.latlng = `${e.data.location.lat},${e.data.location.lng}`;
    info.value = {
      lat: e.data.lat,
      lng: e.data.lng,
    };
  });

  searchAMap.value = placeSearch;
  console.log(placeSearch.listElementClick);
  onCleanup(() => {
    searchAMap.value = null;
    map.destroy();
  });
});

const search = () => {
  info.value = undefined;
  searchAMap.value.search(keyword.value);
};

defineExpose<QuiskExpose>({
  async submit() {
    if (!bindFire.value.projectAddress || !bindFire.value.projectAddress.trim()) {
      ElMessage.error("详细地址不能为空！");
      throw "详细地址不能为空！";
    } else if (!bindFire.value.projectSn || !bindFire.value.projectSn.trim()) {
      ElMessage.error("事件分类不能为空！");
      throw "事件分类不能为空！";
    } else if (!bindFire.value.projectName || !bindFire.value.projectName.trim()) {
      ElMessage.error("分类登记不能为空！");
      throw "分类登记不能为空！";
    } else if (!bindFire.value.projectSite || !bindFire.value.projectSite.trim()) {
      ElMessage.error("天气情况等标准化勘验信息不能为空！");
      throw "天气情况等标准化勘验信息不能为空！";
    } else if (!bindFire.value.deptId || !bindFire.value.deptId.trim()) {
      ElMessage.error("承办单位不能为空！");
      throw "承办单位不能为空！";
    } else if (!bindFire.value.organizerUsers || !bindFire.value.organizerUsers.trim()) {
      ElMessage.error("勘验人员不能为空！");
      throw "勘验人员不能为空！";
    } else if (!accidentDate) {
      ElMessage.error("勘验日期不能为空！");
      throw "勘验日期不能为空！";
    }
    // else if (!bindFire.value.fireReason || !bindFire.value.fireReason.trim()) {
    //   ElMessage.error("火灾原因不能为空！");
    //   throw "火灾原因不能为空！";
    // }

    bindFire.value.accidentDate = dateFormat(accidentDate.value, "yyyy-MM-dd");
    bindFire.value.projectSiteCode = getCode(place, bindFire.value.projectSite);
    bindFire.value.id
      ? await setFire(bindFire.value)
      : await addFire(bindFire.value as any);
  },
});
</script>

<style scoped>
.search-result {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  top: 100%;

  &.show {
    max-height: 450px;
    overflow-y: auto;
  }
}

.def-map-info {
  margin-top: 10px;
  p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    display: inline;
    &:not(:last-child)::after {
      content: ",";
      margin-right: 6px;
    }
  }

  span::after {
    content: "：";
  }
}

.def-select-map {
  position: absolute;
  opacity: 0;
  z-index: -1;
  width: 540px;
  height: 390px;
  z-index: 1;
  left: -100vw;
  top: -100vh;
  display: none;
}

.asdasd {
  position: relative;
  margin-bottom: 15px;
  z-index: 2;
}
</style>