ele-admin-plus 1.0.0-beta.1

package/es/ele-map-picker/components/map-view.js

@@ -0,0 +1,594 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, normalizeStyle, createElementBlock, Fragment, normalizeClass, createCommentVNode, renderList, mergeProps } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { ElAutocomplete, ElInput, ElButton, ElIcon, ElEmpty } from "element-plus";
+import { Plus, Location, CircleCheck, Search, Check } from "@element-plus/icons-vue";
+import EleLoading from "../../ele-loading/index";
+import { useLicense, UNAUTHORIZED_TIP } from "../../utils/license-util";
+import { mapViewProps } from "../props";
+const ICON_CLASS = "ele-map-view-main-icon";
+const _sfc_main = defineComponent({
+  name: "MapView",
+  components: {
+    EleLoading,
+    ElAutocomplete,
+    ElInput,
+    ElButton,
+    ElIcon,
+    ElEmpty,
+    Plus,
+    Location,
+    CircleCheck,
+    Search
+  },
+  props: mapViewProps,
+  emits: {
+    done: (_result) => true,
+    mapDone: (_ins) => true
+  },
+  setup(props, { emit }) {
+    const { authenticated } = useLicense();
+    const mapRef = ref(null);
+    const loading = ref(true);
+    const poiLoading = ref(false);
+    const confirmLoading = ref(false);
+    const data = ref([]);
+    const suggestionData = ref([]);
+    const centerIconClass = ref([ICON_CLASS]);
+    const keywords = ref("");
+    const selected = ref(null);
+    const disabled = computed(() => props.required && !selected.value);
+    const state = {
+      // 上次输入建议关键字
+      lastSuggestion: "",
+      // 选中的输入建议
+      selectedSuggestion: null,
+      // 是否是点击POI列表移动的地图
+      isItemClickMove: false,
+      // 地图实例
+      mapIns: null,
+      // POI检索实例
+      placeSearchIns: null,
+      // 输入建议实例
+      autoCompleteIns: null,
+      // 地图中心标记点
+      centerMarker: null
+    };
+    const renderMap = () => {
+      if (!props.mapKey || state.mapIns) {
+        return;
+      }
+      AMapLoader.load({
+        key: props.mapKey,
+        version: props.mapVersion,
+        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"]
+      }).then((AMap) => {
+        destroyAll();
+        state.autoCompleteIns = new AMap.AutoComplete({
+          city: props.suggestionCity
+        });
+        state.placeSearchIns = new AMap.PlaceSearch({
+          type: props.poiType,
+          pageSize: props.poiLimit,
+          pageIndex: 1
+        });
+        state.mapIns = new AMap.Map(mapRef.value, {
+          zoom: props.zoom,
+          // 初缩放级别
+          center: props.center,
+          // 初始中心点
+          resizeEnable: true,
+          // 监控地图容器尺寸变化
+          mapStyle: props.mapStyle ? props.mapStyle : props.darkMode ? "amap://styles/dark" : void 0
+        });
+        state.mapIns.on("complete", () => {
+          loading.value = false;
+          const { lng, lat } = state.mapIns.getCenter();
+          searchPOI(lng, lat);
+        });
+        state.mapIns.on("moveend", () => {
+          if (state.isItemClickMove) {
+            state.isItemClickMove = false;
+          } else if (!props.keywordMode) {
+            bounceIcon();
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+          }
+        });
+        state.centerMarker = new AMap.Marker({
+          icon: new AMap.Icon({
+            image: props.markerSrc,
+            size: new AMap.Size(26, 36.5),
+            imageSize: new AMap.Size(26, 36.5)
+          }),
+          offset: new AMap.Pixel(-13, -36.5)
+        });
+        emit("mapDone", state.mapIns);
+      }).catch((e) => {
+        console.error(e);
+      });
+    };
+    const onSearch = (value, callback) => {
+      if (!value || state.lastSuggestion === value) {
+        callback && callback(suggestionData.value);
+        return;
+      }
+      state.lastSuggestion = value;
+      if (props.keywordMode) {
+        poiLoading.value = true;
+      }
+      searchKeywords(value).then((result) => {
+        if (props.keywordMode) {
+          data.value = result;
+          selected.value = null;
+          poiLoading.value = false;
+          removeCenterMarker();
+        } else {
+          suggestionData.value = result;
+          callback && callback(suggestionData.value);
+        }
+      }).catch((e) => {
+        console.error(e);
+        poiLoading.value = false;
+        callback && callback(suggestionData.value);
+      });
+    };
+    const onSearchSelect = (item) => {
+      if (!item || !item.location) {
+        return;
+      }
+      if (!data.value.length || data.value[0].name !== item.name) {
+        data.value = [item, ...data.value];
+        selected.value = item;
+      }
+      setMapCenter(item.location.lng, item.location.lat, props.selectedZoom);
+      state.selectedSuggestion = item;
+    };
+    const onItemClick = (item) => {
+      state.isItemClickMove = true;
+      selected.value = item;
+      const { lng, lat } = item.location;
+      setMapCenter(lng, lat, props.selectedZoom);
+      if (!props.keywordMode) {
+        bounceIcon();
+      } else {
+        showCenterMarker(lng, lat);
+      }
+    };
+    const onConfirm = () => {
+      if (!authenticated.value) {
+        console.warn(UNAUTHORIZED_TIP);
+        return;
+      }
+      if (!selected.value) {
+        confirmLoading.value = true;
+        getMapCenter(props.returnRegions).then((result2) => {
+          confirmLoading.value = false;
+          emit("done", result2);
+        }).catch((e) => {
+          console.error(e);
+          confirmLoading.value = false;
+          emit("done", {});
+        });
+        return;
+      }
+      const result = {
+        ...selected.value.location,
+        name: selected.value.name,
+        address: selected.value.address || ""
+      };
+      if (props.returnRegions) {
+        confirmLoading.value = true;
+        setMapCenter(result.lng, result.lat);
+        getMapCenter(true).then(({ city }) => {
+          confirmLoading.value = false;
+          result.city = city;
+          emit("done", result);
+        }).catch((e) => {
+          console.error(e);
+          confirmLoading.value = false;
+          emit("done", result);
+        });
+        return;
+      }
+      emit("done", result);
+    };
+    const searchKeywords = (value) => {
+      return new Promise((resolve, reject) => {
+        if (!state.autoCompleteIns) {
+          reject(new Error("AutoComplete instance is null"));
+          return;
+        }
+        state.autoCompleteIns.search(value, (status, result) => {
+          if (status === "error") {
+            reject(
+              new Error(status + " " + (result ? JSON.stringify(result) : ""))
+            );
+            return;
+          }
+          if (!(result == null ? void 0 : result.tips)) {
+            resolve([]);
+            return;
+          }
+          const data2 = result.tips.filter((d) => !!d.location).map((d) => {
+            const label = `${d.name}(${d.district})`;
+            return {
+              ...d,
+              label,
+              value: label,
+              key: d.id || label,
+              address: Array.isArray(d.address) ? d.address[0] : d.address
+            };
+          });
+          resolve(data2);
+        });
+      });
+    };
+    const searchPOI = (lng, lat) => {
+      poiLoading.value = true;
+      searchNearBy(lng, lat).then((result) => {
+        if (state.selectedSuggestion) {
+          if (result.length === 0 || result[0].name !== state.selectedSuggestion.name) {
+            data.value = [state.selectedSuggestion, ...result];
+            selected.value = state.selectedSuggestion;
+          } else {
+            data.value = result;
+            selected.value = result[0];
+          }
+        } else {
+          data.value = result;
+          selected.value = null;
+        }
+        poiLoading.value = false;
+      }).catch((e) => {
+        console.error(e);
+        data.value = [];
+        selected.value = null;
+        poiLoading.value = false;
+      });
+    };
+    const searchNearBy = (lng, lat) => {
+      return new Promise((resolve, reject) => {
+        if (!state.placeSearchIns) {
+          reject(new Error("PlaceSearch instance is null"));
+          return;
+        }
+        state.placeSearchIns.searchNearBy(
+          props.poiKeywords,
+          [lng, lat],
+          props.poiRadius,
+          (status, result) => {
+            var _a;
+            if (status === "complete" && ((_a = result == null ? void 0 : result.poiList) == null ? void 0 : _a.pois)) {
+              const data2 = result.poiList.pois.filter((d) => !!d.location).map((d, i) => {
+                return { ...d, key: d.id || `${d.name}-${i}` };
+              });
+              resolve(data2);
+            } else if (status === "no_data") {
+              resolve([]);
+            } else {
+              reject(
+                new Error(
+                  status + " " + (result ? JSON.stringify(result) : "")
+                )
+              );
+            }
+          }
+        );
+      });
+    };
+    const bounceIcon = () => {
+      centerIconClass.value = [ICON_CLASS];
+      nextTick(() => {
+        setTimeout(() => {
+          centerIconClass.value = [ICON_CLASS, "ele-map-view-anim-bounce"];
+        }, 0);
+      });
+    };
+    const removeCenterMarker = () => {
+      if (state.centerMarker && state.mapIns) {
+        state.mapIns.remove(state.centerMarker);
+      }
+    };
+    const showCenterMarker = (lng, lat) => {
+      if (!state.centerMarker) {
+        console.error("centerMarker is null");
+        return;
+      }
+      if (!state.mapIns) {
+        console.error("map instance is null");
+        return;
+      }
+      if (lng != null && lat != null) {
+        state.centerMarker.setPosition([lng, lat]);
+        state.mapIns.add(state.centerMarker);
+      } else {
+        removeCenterMarker();
+      }
+    };
+    const setMapCenter = (lng, lat, zoom) => {
+      if (state.mapIns && lng != null && lat != null) {
+        if (zoom == null) {
+          state.mapIns.setCenter([lng, lat]);
+        } else {
+          state.mapIns.setZoomAndCenter(zoom, [lng, lat]);
+        }
+      }
+    };
+    const getMapCenter = (returnRegions) => {
+      return new Promise((resolve, reject) => {
+        if (!state.mapIns) {
+          reject(new Error("map instance is null"));
+          return;
+        }
+        const result = state.mapIns.getCenter();
+        if (returnRegions) {
+          state.mapIns.getCity((city) => {
+            result.city = city;
+            resolve(result);
+          });
+        } else {
+          resolve(result);
+        }
+      });
+    };
+    const changeMapStyle = (value) => {
+      if (state.mapIns) {
+        if (typeof value === "boolean") {
+          if (value) {
+            state.mapIns.setMapStyle("amap://styles/dark");
+          } else {
+            state.mapIns.setMapStyle("amap://styles/normal");
+          }
+        } else if (value) {
+          state.mapIns.setMapStyle(value);
+        }
+      }
+    };
+    const destroyMap = () => {
+      state.mapIns && state.mapIns.destroy();
+      state.centerMarker = null;
+      state.placeSearchIns = null;
+      state.autoCompleteIns = null;
+      state.mapIns = null;
+    };
+    const destroyAll = () => {
+      destroyMap();
+      data.value = [];
+      suggestionData.value = [];
+      selected.value = null;
+      keywords.value = "";
+      state.lastSuggestion = "";
+      state.selectedSuggestion = null;
+      state.isItemClickMove = false;
+    };
+    const getMapIns = () => {
+      return state.mapIns;
+    };
+    watch(
+      () => props.darkMode,
+      (darkMode) => {
+        if (!props.mapStyle) {
+          changeMapStyle(darkMode);
+        }
+      }
+    );
+    watch(
+      () => props.mapStyle,
+      (mapStyle) => {
+        if (mapStyle) {
+          changeMapStyle(mapStyle);
+        }
+      }
+    );
+    watch(
+      () => props.keywordMode,
+      (keywordMode) => {
+        keywords.value = "";
+        suggestionData.value = [];
+        state.selectedSuggestion = null;
+        state.lastSuggestion = "";
+        removeCenterMarker();
+        if (keywordMode && selected.value) {
+          const { lng, lat } = selected.value.location;
+          showCenterMarker(lng, lat);
+        }
+      }
+    );
+    watch(
+      () => props.mapKey,
+      () => {
+        destroyAll();
+        renderMap();
+      }
+    );
+    onMounted(() => {
+      renderMap();
+    });
+    onBeforeUnmount(() => {
+      destroyAll();
+    });
+    return {
+      Check,
+      mapRef,
+      loading,
+      poiLoading,
+      confirmLoading,
+      data,
+      suggestionData,
+      centerIconClass,
+      keywords,
+      selected,
+      disabled,
+      onSearch,
+      onSearchSelect,
+      onItemClick,
+      onConfirm,
+      getMapIns
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-map-view-header" };
+const _hoisted_2 = { class: "ele-map-view-search" };
+const _hoisted_3 = { class: "ele-map-view-main" };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = { class: "ele-map-view-side" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "ele-map-view-item-title" };
+const _hoisted_8 = {
+  key: 0,
+  class: "ele-map-view-item-text"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "ele-map-view-empty"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "ele-map-view-extra"
+};
+const _hoisted_11 = { class: "ele-map-view-message" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Search = resolveComponent("Search");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_ElAutocomplete = resolveComponent("ElAutocomplete");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_Plus = resolveComponent("Plus");
+  const _component_Location = resolveComponent("Location");
+  const _component_CircleCheck = resolveComponent("CircleCheck");
+  const _component_ElEmpty = resolveComponent("ElEmpty");
+  const _component_EleLoading = resolveComponent("EleLoading");
+  return openBlock(), createBlock(_component_EleLoading, {
+    loading: _ctx.loading,
+    class: "ele-map-view"
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _ctx.keywordMode ? (openBlock(), createBlock(_component_ElInput, {
+            key: 0,
+            clearable: "",
+            modelValue: _ctx.keywords,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
+            placeholder: _ctx.searchPlaceholder,
+            onChange: _ctx.onSearch
+          }, {
+            prefix: withCtx(() => [
+              createVNode(_component_ElIcon, { class: "el-input__icon" }, {
+                default: withCtx(() => [
+                  createVNode(_component_Search)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "onChange"])) : (openBlock(), createBlock(_component_ElAutocomplete, {
+            key: 1,
+            clearable: "",
+            modelValue: _ctx.keywords,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
+            fetchSuggestions: _ctx.onSearch,
+            placeholder: _ctx.searchPlaceholder,
+            onSelect: _ctx.onSearchSelect
+          }, {
+            prefix: withCtx(() => [
+              createVNode(_component_ElIcon, { class: "el-input__icon" }, {
+                default: withCtx(() => [
+                  createVNode(_component_Search)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue", "fetchSuggestions", "placeholder", "onSelect"]))
+        ]),
+        createVNode(_component_ElButton, {
+          icon: _ctx.Check,
+          type: "primary",
+          disabled: _ctx.disabled,
+          loading: _ctx.confirmLoading,
+          class: "ele-map-view-btn-ok",
+          onClick: _ctx.onConfirm
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.okText), 1)
+          ]),
+          _: 1
+        }, 8, ["icon", "disabled", "loading", "onClick"])
+      ]),
+      createElementVNode("div", {
+        class: "ele-map-view-body",
+        style: normalizeStyle({ height: _ctx.height })
+      }, [
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("div", {
+            ref: "mapRef",
+            style: normalizeStyle({ height: _ctx.height })
+          }, null, 4),
+          !_ctx.keywordMode ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createVNode(_component_ElIcon, { class: "ele-map-view-icon-plus" }, {
+              default: withCtx(() => [
+                createVNode(_component_Plus)
+              ]),
+              _: 1
+            }),
+            createElementVNode("img", {
+              src: _ctx.markerSrc,
+              class: normalizeClass(_ctx.centerIconClass)
+            }, null, 10, _hoisted_4)
+          ], 64)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          createVNode(_component_EleLoading, {
+            loading: _ctx.poiLoading,
+            class: "ele-map-view-list"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.key,
+                  class: normalizeClass(["ele-map-view-item", { "is-active": item === _ctx.selected }]),
+                  onClick: ($event) => _ctx.onItemClick(item)
+                }, [
+                  createVNode(_component_ElIcon, { class: "ele-map-view-item-icon" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_Location)
+                    ]),
+                    _: 1
+                  }),
+                  createElementVNode("div", _hoisted_7, toDisplayString(item.name), 1),
+                  item.address ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(item.address), 1)) : createCommentVNode("", true),
+                  createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_CircleCheck)
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_6);
+              }), 128)),
+              !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                createVNode(_component_ElEmpty, mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["loading"]),
+          _ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_11, toDisplayString(_ctx.message), 1)
+          ])) : createCommentVNode("", true)
+        ])
+      ], 4)
+    ]),
+    _: 1
+  }, 8, ["loading"]);
+}
+const mapView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  mapView as default
+};