@web-utils/form-ui 1.0.0-beta9 → 1.0.0-beta91

package/fy-input-map/index.mjs

@@ -0,0 +1,248 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import { t } from "../chunks/V-Js6hNd.mjs";
+import { t as n } from "../chunks/Gh6td4HK.mjs";
+import { n as r, t as i } from "../chunks/CX7Oiw5N.mjs";
+import { ElInput as a } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/input/style/css";
+import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, openBlock as f, withCtx as p } from "vue";
+import { isBlank as m } from "@web-utils/core";
+//#region src/components/avue/fy-from/input-map/FyInputMap.vue
+var h = {
+	name: "FyInputMap",
+	mixins: [r, i],
+	props: {
+		dialogWidth: {
+			type: String,
+			default: "60%"
+		},
+		rows: Number,
+		minRows: {
+			type: Number,
+			default: 1
+		},
+		maxRows: { type: Number }
+	},
+	data() {
+		return {
+			formattedAddress: "",
+			address: "",
+			poi: {},
+			marker: null,
+			map: null,
+			box: !1
+		};
+	},
+	computed: {
+		longitude() {
+			var e;
+			return (e = this.text) == null ? void 0 : e[0];
+		},
+		latitude() {
+			var e;
+			return (e = this.text) == null ? void 0 : e[1];
+		},
+		title() {
+			return this.disabled || this.readonly ? "查看" : "选择";
+		}
+	},
+	watch: {
+		poi(e) {
+			this.formattedAddress = e.formattedAddress;
+		},
+		value(e) {
+			m(e) && (this.poi = {}, this.address = "");
+		},
+		text(e) {
+			m(e) || (this.poi = {
+				longitude: e[0],
+				latitude: e[1],
+				formattedAddress: e[2]
+			}, this.address = e[2]);
+		},
+		box: {
+			handler() {
+				this.box && this.$nextTick(() => this.init(() => {
+					this.longitude && this.latitude && (this.addMarker(this.longitude, this.latitude), this.getAddress(this.longitude, this.latitude));
+				}));
+			},
+			immediate: !0
+		}
+	},
+	unmounted() {
+		this.service = null;
+	},
+	methods: {
+		clear() {
+			this.poi = {}, this.clearMarker();
+		},
+		handleSubmit() {
+			this.setVal(), this.box = !1;
+		},
+		handleClear() {
+			this.text = [], this.poi = {}, this.handleChange(this.text);
+		},
+		setVal() {
+			this.text = [
+				this.poi.longitude,
+				this.poi.latitude,
+				this.poi.formattedAddress
+			], this.handleChange(this.text);
+		},
+		handleShow() {
+			this.$refs.main.blur(), this.box = !0;
+		},
+		addMarker(e, t) {
+			this.clearMarker(), this.marker = new window.AMap.Marker({ position: [e, t] }), this.marker.setMap(this.map);
+		},
+		clearMarker() {
+			this.marker && (this.marker.setMap(null), this.marker = null);
+		},
+		getAddress(e, t) {
+			this.service = new window.AMap.service("AMap.Geocoder", () => {
+				new window.AMap.Geocoder({}).getAddress([e, t], (n, r) => {
+					if (n === "complete" && r.info === "OK") {
+						let n = r.regeocode;
+						this.poi = Object.assign(n, {
+							longitude: e,
+							latitude: t
+						});
+						let i = document.createElement("div"), a = document.createElement("img");
+						a.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", i.appendChild(a);
+						let o = document.createElement("span");
+						o.className = "avue-input-map__marker", o.innerHTML = this.poi.formattedAddress, i.appendChild(o), this.marker.setContent(i);
+					}
+				});
+			});
+		},
+		handleClose() {
+			var e;
+			(e = this.poiPicker) == null || e.clearSearchResults();
+		},
+		addClick() {
+			this.map.on("click", (e) => {
+				if (this.disabled || this.readonly) return;
+				let t = e.lnglat, n = t.P || t.Q, r = t.R;
+				this.addMarker(r, n), this.getAddress(r, n);
+			});
+		},
+		init(e) {
+			this.map = new window.AMap.Map("map__container", {
+				zoom: 13,
+				center: (() => {
+					if (this.longitude && this.latitude) return [this.longitude, this.latitude];
+				})(),
+				...this.params
+			}), this.initPoip(), this.addClick(), e();
+		},
+		initPoip() {
+			window.AMapUI.loadUI(["misc/PoiPicker"], (e) => {
+				let t = new e({
+					input: "map__input",
+					placeSearchOptions: {
+						map: this.map,
+						pageSize: 10
+					},
+					searchResultsContainer: "map__result"
+				});
+				this.poiPickerReady(t);
+			});
+		},
+		poiPickerReady(e) {
+			this.poiPicker = e, e.on("poiPicked", (t) => {
+				this.clearMarker();
+				let n = t.source, r = t.item;
+				this.poi = Object.assign(r, {
+					formattedAddress: r.name,
+					longitude: r.location.R,
+					latitude: r.location.P || r.location.Q
+				}), n !== "search" && e.searchByKeyword(r.name);
+			});
+		}
+	}
+}, g = { class: "avue-input-map" }, _ = { key: 0 }, v = {
+	key: 0,
+	class: "avue-input-map__content"
+};
+function y(e, r, i, m, h, y) {
+	let b = a, x = n, S = t;
+	return f(), c("div", g, [d(b, {
+		ref: "main",
+		modelValue: h.address,
+		"onUpdate:modelValue": r[0] || (r[0] = (e) => h.address = e),
+		size: e.size,
+		clearable: e.clearableVal,
+		rows: i.rows,
+		autosize: {
+			minRows: i.minRows,
+			maxRows: i.maxRows
+		},
+		disabled: e.disabled,
+		type: "textarea",
+		placeholder: e.placeholder,
+		onClear: y.handleClear,
+		onFocus: y.handleShow,
+		onClick: e.handleClick
+	}, null, 8, [
+		"modelValue",
+		"size",
+		"clearable",
+		"rows",
+		"autosize",
+		"disabled",
+		"placeholder",
+		"onClear",
+		"onFocus",
+		"onClick"
+	]), h.box ? (f(), c("div", _, [d(S, {
+		modelValue: h.box,
+		"onUpdate:modelValue": r[2] || (r[2] = (e) => h.box = e),
+		"show-full-screen": "",
+		width: i.dialogWidth,
+		title: e.placeholder,
+		onClose: y.handleClose
+	}, {
+		footer: p(() => [e.disabled || e.readonly ? s("v-if", !0) : (f(), o(x, {
+			key: 0,
+			type: "primary",
+			size: e.size,
+			icon: "el-icon-check",
+			onClick: y.handleSubmit
+		}, {
+			default: p(() => [...r[4] || (r[4] = [u(" 确 定 ", -1)])]),
+			_: 1
+		}, 8, ["size", "onClick"]))]),
+		default: p(() => [h.box ? (f(), c("div", v, [d(b, {
+			id: "map__input",
+			modelValue: h.formattedAddress,
+			"onUpdate:modelValue": r[1] || (r[1] = (e) => h.formattedAddress = e),
+			class: "avue-input-map__content-input",
+			size: e.size,
+			readonly: e.disabled,
+			clearable: "",
+			placeholder: "输入关键字选取地点",
+			onClear: y.clear
+		}, null, 8, [
+			"modelValue",
+			"size",
+			"readonly",
+			"onClear"
+		]), r[3] || (r[3] = l("div", { class: "avue-input-map__content-box" }, [l("div", {
+			id: "map__container",
+			class: "avue-input-map__content-container",
+			tabindex: "0"
+		}), l("div", {
+			id: "map__result",
+			class: "avue-input-map__content-result"
+		})], -1))])) : s("v-if", !0)]),
+		_: 1
+	}, 8, [
+		"modelValue",
+		"width",
+		"title",
+		"onClose"
+	])])) : s("v-if", !0)]);
+}
+var b = /* @__PURE__ */ e(h, [["render", y]]);
+//#endregion
+export { b as default };

package/fy-input-map/style.css

@@ -0,0 +1 @@
+.amap-icon img,.amap-marker-content img{width:25px;height:34px}.avue-input-map__marker{color:#fff;white-space:nowrap;background-color:#25a5f7;border-radius:3px;padding:4px 10px;font-family:"";font-size:12px;position:absolute;top:-20px;right:-118px;box-shadow:1px 1px 1px #0a0a0a33}.avue-input-map__content{flex-direction:column;height:100%;display:flex}.avue-input-map__content-input{margin-bottom:10px}.avue-input-map__content-box{flex:auto;position:relative}.avue-input-map__content-container{width:100%;height:100%;min-height:450px}.avue-input-map__content-result{width:250px;height:450px;position:absolute;top:0;right:-8px;overflow-y:auto;display:block!important}