ele-admin-plus 1.1.8 → 1.1.9-beta.10

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

@@ -1,34 +1,33 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createVNode, toDisplayString, createElementBlock, Fragment, normalizeClass, createCommentVNode, renderList, mergeProps } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, createElementBlock, Fragment, createVNode, normalizeClass, createCommentVNode, toDisplayString, createTextVNode, renderList, mergeProps } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { ElAutocomplete, ElInput, ElButton, ElIcon, ElEmpty } from "element-plus";
-import { PlusOutlined, EnvironmentOutlined, CheckCircleOutlined, CheckOutlined, SearchOutlined } from "../../icons";
-import { useLicense } from "../../ele-config-provider/receiver";
+import { PlusOutlined, EnvironmentOutlined, CheckCircleOutlined, SearchOutlined } from "../../icons";
 import EleLoading from "../../ele-loading/index";
 import { mapProps } from "../props";
-const ICON_CLASS = "ele-map-view-main-icon";
+const ICON_CLASS = "ele-map-view-body-icon";
 const _sfc_main = defineComponent({
   name: "MapView",
   components: {
-    EleLoading,
     ElAutocomplete,
     ElInput,
     ElButton,
     ElIcon,
     ElEmpty,
+    EleLoading,
     PlusOutlined,
     EnvironmentOutlined,
     CheckCircleOutlined,
-    CheckOutlined,
     SearchOutlined
   },
   props: mapProps,
   emits: {
-    done: (_result) => true,
-    mapDone: (_ins) => true
+    mapDone: (_ins) => true,
+    select: (_selected) => true,
+    done: (_result) => true
   },
   setup(props, { emit }) {
-    const { authenticated } = useLicense();
     const mapRef = ref(null);
+    const autocompleteRef = ref(null);
     const loading = ref(true);
     const poiLoading = ref(false);
     const confirmLoading = ref(false);
@@ -37,7 +36,9 @@ const _sfc_main = defineComponent({
     const centerIconClass = ref([ICON_CLASS]);
     const keywords = ref("");
     const selected = ref(null);
-    const disabled = computed(() => props.required && !selected.value);
+    const confirmDisabled = computed(() => props.required && !selected.value);
+    const keywordMode = computed(() => "keyword" === props.mode);
+    const poiMode = computed(() => "poi" === props.mode);
     const state = {
       /** 上次输入建议关键字 */
       lastSuggestion: "",
@@ -84,17 +85,32 @@ const _sfc_main = defineComponent({
         });
         state.mapIns.on("complete", () => {
           loading.value = false;
-          const { lng, lat } = state.mapIns.getCenter();
-          searchPOI(lng, lat);
+          if (poiMode.value || keywordMode.value) {
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+          }
         });
         state.mapIns.on("moveend", () => {
-          if (state.isItemClickMove) {
+          if (state.isItemClickMove || !poiMode.value) {
             state.isItemClickMove = false;
-          } else if (!props.keywordMode) {
-            bounceIcon();
-            const { lng, lat } = state.mapIns.getCenter();
-            searchPOI(lng, lat);
+            return;
+          }
+          bounceIcon();
+          const { lng, lat } = state.mapIns.getCenter();
+          searchPOI(lng, lat);
+        });
+        state.mapIns.on("click", (e) => {
+          if (poiMode.value || keywordMode.value) {
+            return;
+          }
+          if (e.lnglat == null || typeof e.lnglat !== "object") {
+            console.error(e);
+            return;
           }
+          const { lng, lat } = e.lnglat;
+          setSelected({ location: { lng, lat } });
+          setMapCenter(lng, lat, props.selectedZoom);
+          showCenterMarker(lng, lat);
         });
         state.centerMarker = new AMap.Marker({
           icon: new AMap.Icon({
@@ -115,19 +131,19 @@ const _sfc_main = defineComponent({
         return;
       }
       state.lastSuggestion = value;
-      if (props.keywordMode) {
+      if (keywordMode.value) {
         poiLoading.value = true;
       }
       searchKeywords(value).then((result) => {
-        if (props.keywordMode) {
+        if (keywordMode.value) {
           data.value = result;
-          selected.value = null;
           poiLoading.value = false;
+          setSelected(null);
           removeCenterMarker();
-        } else {
-          suggestionData.value = result;
-          callback && callback(suggestionData.value);
+          return;
         }
+        suggestionData.value = result;
+        callback && callback(suggestionData.value);
       }).catch((e) => {
         console.error(e);
         poiLoading.value = false;
@@ -135,31 +151,41 @@ const _sfc_main = defineComponent({
       });
     };
     const onSearchSelect = (item) => {
+      autocompleteRef.value && autocompleteRef.value.blur();
       if (!item || !item.location) {
         return;
       }
-      if (!data.value.length || data.value[0].name !== item.name) {
-        data.value = [item, ...data.value];
-        selected.value = item;
+      const { lng, lat } = item.location;
+      if (poiMode.value) {
+        if (!data.value.length || data.value[0].name !== item.name) {
+          data.value = [item, ...data.value];
+        }
+        setSelected(data.value[0]);
+      } else {
+        setSelected(item);
+        showCenterMarker(lng, lat);
       }
-      setMapCenter(item.location.lng, item.location.lat, props.selectedZoom);
+      setMapCenter(lng, lat, props.selectedZoom);
       state.selectedSuggestion = item;
     };
     const onItemClick = (item) => {
       state.isItemClickMove = true;
-      selected.value = item;
+      setSelected(item);
       const { lng, lat } = item.location;
       setMapCenter(lng, lat, props.selectedZoom);
-      if (!props.keywordMode) {
+      if (poiMode.value) {
         bounceIcon();
-      } else {
-        showCenterMarker(lng, lat);
+        return;
       }
+      showCenterMarker(lng, lat);
     };
-    const onConfirm = () => {
-      if (!authenticated.value) {
-        return;
+    const setSelected = (item) => {
+      if (selected.value !== item) {
+        selected.value = item;
+        emit("select", selected.value);
       }
+    };
+    const onConfirm = () => {
       if (!selected.value) {
         confirmLoading.value = true;
         getMapCenter(props.returnRegions).then((result2) => {
@@ -174,7 +200,7 @@ const _sfc_main = defineComponent({
       }
       const result = {
         ...selected.value.location,
-        name: selected.value.name,
+        name: selected.value.name || "",
         address: selected.value.address || ""
       };
       if (props.returnRegions) {
@@ -230,20 +256,20 @@ const _sfc_main = defineComponent({
         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];
           }
+          setSelected(data.value[0]);
         } else {
           data.value = result;
-          selected.value = null;
+          setSelected(null);
         }
         poiLoading.value = false;
       }).catch((e) => {
         console.error(e);
-        data.value = [];
-        selected.value = null;
+        const selectedSuggestion = state.selectedSuggestion;
+        data.value = selectedSuggestion ? [selectedSuggestion] : [];
+        setSelected(selectedSuggestion ? selectedSuggestion : null);
         poiLoading.value = false;
       });
     };
@@ -332,16 +358,16 @@ const _sfc_main = defineComponent({
         }
       });
     };
-    const changeMapStyle = (value) => {
+    const changeMapStyle = (style) => {
       if (state.mapIns) {
-        if (typeof value === "boolean") {
-          if (value) {
+        if (typeof style === "boolean") {
+          if (style) {
             state.mapIns.setMapStyle("amap://styles/dark");
           } else {
             state.mapIns.setMapStyle("amap://styles/normal");
           }
-        } else if (value) {
-          state.mapIns.setMapStyle(value);
+        } else if (style) {
+          state.mapIns.setMapStyle(style);
         }
       }
     };
@@ -354,13 +380,13 @@ const _sfc_main = defineComponent({
     };
     const destroyAll = () => {
       destroyMap();
-      data.value = [];
-      suggestionData.value = [];
-      selected.value = null;
-      keywords.value = "";
       state.lastSuggestion = "";
       state.selectedSuggestion = null;
       state.isItemClickMove = false;
+      data.value = [];
+      suggestionData.value = [];
+      keywords.value = "";
+      setSelected(null);
     };
     const getMapIns = () => {
       return state.mapIns;
@@ -382,17 +408,26 @@ const _sfc_main = defineComponent({
       }
     );
     watch(
-      () => props.keywordMode,
-      (keywordMode) => {
+      () => props.mode,
+      (mode) => {
         keywords.value = "";
         suggestionData.value = [];
         state.selectedSuggestion = null;
         state.lastSuggestion = "";
         removeCenterMarker();
-        if (keywordMode && selected.value) {
+        if (mode !== "poi" && selected.value) {
           const { lng, lat } = selected.value.location;
           showCenterMarker(lng, lat);
         }
+        if (!data.value.length && (mode === "poi" || mode === "keyword")) {
+          if (selected.value) {
+            const { lng, lat } = selected.value.location;
+            searchPOI(lng, lat);
+          } else {
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+          }
+        }
       }
     );
     watch(
@@ -409,7 +444,9 @@ const _sfc_main = defineComponent({
       destroyAll();
     });
     return {
+      SearchOutlined,
       mapRef,
+      autocompleteRef,
       loading,
       poiLoading,
       confirmLoading,
@@ -418,7 +455,9 @@ const _sfc_main = defineComponent({
       centerIconClass,
       keywords,
       selected,
-      disabled,
+      confirmDisabled,
+      keywordMode,
+      poiMode,
       onSearch,
       onSearchSelect,
       onItemClick,
@@ -434,73 +473,80 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-map-view-search" };
-const _hoisted_2 = { class: "ele-map-suggest-title" };
-const _hoisted_3 = { class: "ele-map-suggest-text" };
-const _hoisted_4 = { class: "ele-map-view-main" };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = { class: "ele-map-view-list" };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "ele-map-view-item-title" };
-const _hoisted_9 = {
+const _hoisted_1 = { class: "ele-map-view-body" };
+const _hoisted_2 = {
+  ref: "mapRef",
+  style: { "height": "100%" }
+};
+const _hoisted_3 = ["src"];
+const _hoisted_4 = { class: "ele-map-suggest-item" };
+const _hoisted_5 = { class: "ele-map-suggest-title" };
+const _hoisted_6 = { class: "ele-map-suggest-text" };
+const _hoisted_7 = {
+  key: 0,
+  class: "ele-map-view-message"
+};
+const _hoisted_8 = { class: "ele-map-view-list" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "ele-map-view-item-body" };
+const _hoisted_11 = { class: "ele-map-view-item-title" };
+const _hoisted_12 = {
   key: 0,
   class: "ele-map-view-item-text"
 };
-const _hoisted_10 = {
+const _hoisted_13 = {
   key: 0,
   class: "ele-map-view-empty"
 };
-const _hoisted_11 = {
+const _hoisted_14 = { class: "ele-map-view-extra" };
+const _hoisted_15 = {
   key: 0,
-  class: "ele-map-view-extra"
+  class: "ele-map-view-message"
 };
-const _hoisted_12 = { class: "ele-map-view-message" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_SearchOutlined = resolveComponent("SearchOutlined");
+  const _component_PlusOutlined = resolveComponent("PlusOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_ElInput = resolveComponent("ElInput");
+  const _component_SearchOutlined = resolveComponent("SearchOutlined");
   const _component_ElAutocomplete = resolveComponent("ElAutocomplete");
-  const _component_CheckOutlined = resolveComponent("CheckOutlined");
   const _component_ElButton = resolveComponent("ElButton");
-  const _component_PlusOutlined = resolveComponent("PlusOutlined");
+  const _component_ElInput = resolveComponent("ElInput");
   const _component_EnvironmentOutlined = resolveComponent("EnvironmentOutlined");
   const _component_CheckCircleOutlined = resolveComponent("CheckCircleOutlined");
   const _component_ElEmpty = resolveComponent("ElEmpty");
   const _component_EleLoading = resolveComponent("EleLoading");
   return openBlock(), createBlock(_component_EleLoading, {
     loading: _ctx.loading,
-    class: "ele-map-view"
+    class: "ele-map-view",
+    style: normalizeStyle({ height: _ctx.height })
   }, {
     default: withCtx(() => [
-      createElementVNode("div", {
-        class: "ele-map-view-header",
-        style: normalizeStyle(_ctx.headerStyle)
-      }, [
-        createElementVNode("div", _hoisted_1, [
-          _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_SearchOutlined)
-                ]),
-                _: 1
-              })
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, null, 512),
+        _ctx.poiMode ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(_component_ElIcon, { class: "ele-map-view-icon-plus" }, {
+            default: withCtx(() => [
+              createVNode(_component_PlusOutlined)
             ]),
             _: 1
-          }, 8, ["modelValue", "placeholder", "onChange"])) : (openBlock(), createBlock(_component_ElAutocomplete, {
-            key: 1,
-            clearable: "",
+          }),
+          createElementVNode("img", {
+            src: _ctx.markerSrc,
+            class: normalizeClass(_ctx.centerIconClass)
+          }, null, 10, _hoisted_3)
+        ], 64)) : createCommentVNode("", true),
+        _ctx.filterable && !_ctx.keywordMode ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "ele-map-view-search",
+          style: normalizeStyle(_ctx.searchStyle)
+        }, [
+          createVNode(_component_ElAutocomplete, {
+            ref: "autocompleteRef",
+            clearable: true,
             modelValue: _ctx.keywords,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
-            fetchSuggestions: _ctx.onSearch,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
             placeholder: _ctx.searchPlaceholder,
+            popperClass: "ele-map-suggest-popper",
+            fetchSuggestions: _ctx.onSearch,
             onSelect: _ctx.onSearchSelect
           }, {
             prefix: withCtx(() => [
@@ -512,95 +558,100 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               })
             ]),
             default: withCtx(({ item }) => [
-              createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1),
-              createElementVNode("span", _hoisted_3, "(" + toDisplayString(item.district) + ")", 1)
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, toDisplayString(item.label), 1),
+                createElementVNode("div", _hoisted_6, toDisplayString(item.district), 1)
+              ])
             ]),
             _: 1
-          }, 8, ["modelValue", "fetchSuggestions", "placeholder", "onSelect"]))
-        ]),
-        createVNode(_component_ElButton, {
-          type: "primary",
-          disabled: _ctx.disabled,
-          loading: _ctx.confirmLoading,
-          class: "ele-map-view-btn-ok",
-          onClick: _ctx.onConfirm
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_ElIcon, null, {
-              default: withCtx(() => [
-                createVNode(_component_CheckOutlined)
-              ]),
-              _: 1
-            }),
-            createElementVNode("span", null, toDisplayString(_ctx.okText), 1)
+          }, 8, ["modelValue", "placeholder", "fetchSuggestions", "onSelect"])
+        ], 4)) : createCommentVNode("", true),
+        !_ctx.poiMode && !_ctx.keywordMode ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          _ctx.confirmDisabled && _ctx.clickMessage ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.clickMessage), 1)) : (openBlock(), createBlock(_component_ElButton, {
+            key: 1,
+            type: "primary",
+            loading: _ctx.confirmLoading,
+            disabled: _ctx.confirmDisabled,
+            class: "ele-map-view-btn-ok",
+            onClick: _ctx.onConfirm
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.okText), 1)
+            ]),
+            _: 1
+          }, 8, ["loading", "disabled", "onClick"]))
+        ], 64)) : createCommentVNode("", true)
+      ]),
+      _ctx.keywordMode || _ctx.poiMode ? (openBlock(), createBlock(_component_EleLoading, {
+        key: 0,
+        loading: _ctx.poiLoading,
+        class: "ele-map-view-side"
+      }, {
+        default: withCtx(() => [
+          _ctx.keywordMode ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-map-view-search",
+            style: normalizeStyle(_ctx.searchStyle)
+          }, [
+            createVNode(_component_ElInput, {
+              clearable: true,
+              modelValue: _ctx.keywords,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
+              prefixIcon: _ctx.SearchOutlined,
+              placeholder: _ctx.searchPlaceholder,
+              onChange: _ctx.onSearch
+            }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onChange"])
+          ], 4)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_8, [
+            (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_EnvironmentOutlined)
+                  ]),
+                  _: 1
+                }),
+                createElementVNode("div", _hoisted_10, [
+                  createElementVNode("div", _hoisted_11, toDisplayString(item.name), 1),
+                  item.address ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(item.address), 1)) : createCommentVNode("", true)
+                ]),
+                createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_CheckCircleOutlined)
+                  ]),
+                  _: 1
+                })
+              ], 10, _hoisted_9);
+            }), 128)),
+            !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_13, [
+              createVNode(_component_ElEmpty, mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
+            ])) : createCommentVNode("", true)
           ]),
-          _: 1
-        }, 8, ["disabled", "loading", "onClick"])
-      ], 4),
-      createElementVNode("div", {
-        class: "ele-map-view-body",
-        style: normalizeStyle({ height: _ctx.height })
-      }, [
-        createElementVNode("div", _hoisted_4, [
-          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" }, {
+          createElementVNode("div", _hoisted_14, [
+            _ctx.confirmDisabled && _ctx.message ? (openBlock(), createElementBlock("div", _hoisted_15, toDisplayString(_ctx.message), 1)) : (openBlock(), createBlock(_component_ElButton, {
+              key: 1,
+              type: "primary",
+              loading: _ctx.confirmLoading,
+              disabled: _ctx.confirmDisabled,
+              class: "ele-map-view-btn-ok",
+              onClick: _ctx.onConfirm
+            }, {
               default: withCtx(() => [
-                createVNode(_component_PlusOutlined)
+                createTextVNode(toDisplayString(_ctx.okText), 1)
               ]),
               _: 1
-            }),
-            createElementVNode("img", {
-              src: _ctx.markerSrc,
-              class: normalizeClass(_ctx.centerIconClass)
-            }, null, 10, _hoisted_5)
-          ], 64)) : createCommentVNode("", true)
+            }, 8, ["loading", "disabled", "onClick"]))
+          ])
         ]),
-        createVNode(_component_EleLoading, {
-          loading: _ctx.poiLoading,
-          class: "ele-map-view-side"
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_6, [
-              (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_EnvironmentOutlined)
-                    ]),
-                    _: 1
-                  }),
-                  createElementVNode("div", _hoisted_8, toDisplayString(item.name), 1),
-                  item.address ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(item.address), 1)) : createCommentVNode("", true),
-                  createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
-                    default: withCtx(() => [
-                      createVNode(_component_CheckCircleOutlined)
-                    ]),
-                    _: 1
-                  })
-                ], 10, _hoisted_7);
-              }), 128)),
-              !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_10, [
-                createVNode(_component_ElEmpty, mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
-              ])) : createCommentVNode("", true)
-            ]),
-            _ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_11, [
-              createElementVNode("div", _hoisted_12, toDisplayString(_ctx.message), 1)
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["loading"])
-      ], 4)
+        _: 1
+      }, 8, ["loading"])) : createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["loading"]);
+  }, 8, ["loading", "style"]);
 }
 const mapView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {