@zpc_npm/vue-iclient-common
Version:
KQGIS iClient for Vue.js
615 lines (508 loc) • 20.7 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"BookmarkViewModel": function() { return /* reexport */ BookmarkViewModel; },
"default": function() { return /* reexport */ Bookmark; }
});
;// CONCATENATED MODULE: external "vue"
var external_vue_namespaceObject = require("vue");
;// CONCATENATED MODULE: external "@element-plus/icons-vue"
var icons_vue_namespaceObject = require("@element-plus/icons-vue");
;// CONCATENATED MODULE: external "xe-utils"
var external_xe_utils_namespaceObject = require("xe-utils");
var external_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_xe_utils_namespaceObject);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/util"
var util_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/util");
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/mitt"
var mitt_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/mitt");
var mitt_default = /*#__PURE__*/__webpack_require__.n(mitt_namespaceObject);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/gis-utils"
var gis_utils_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/gis-utils");
;// CONCATENATED MODULE: ./src/common/bookmark/BookmarkViewModel.js
/*
* Author: Codqd
* Date: 2022-11-23
* LastEditors: Codqd
* LastEditTime: 2023-01-05
* Description: 书签组件逻辑类。
*/
/**
* UI显隐操作时注意同时调用数据设置与清空方法，控制监听事件的添加与删除
*/
class BookmarkViewModel extends (mitt_default()) {
/**
* @param {Object} options - 参数
* @param {string} [options.mapTarget] - 组件绑定的map的id
*/
constructor(options) {
super();
/**
* 组件绑定的map的id
* @type {string}
*/
this.mapTarget = options.mapTarget; // 事件绑定this
this._changeMap = this._changeMap.bind(this);
}
/**
* 注册事件,监听mapview数据变化，监听map切换。
* @private
*/
_registerEvents() {
// 切换监听事件 指定mapTarget时 不需要监听
if (!(this.mapTarget && this.mapTarget !== "")) {
gis_utils_namespaceObject.utils.bindChangeMapEvents(this._changeMap);
}
}
/**
* 移除事件监听
* @private
*/
_removeEvents() {
if (!(this.mapTarget && this.mapTarget !== "")) {
gis_utils_namespaceObject.utils.offChangeMapEvents(this._changeMap);
}
}
/**
* 地图切换监听事件的回调函数，比如二三维切换。
* @param {object} e
* @private
*/
_changeMap(e) {
// 重新获取、设置数据
this._setBookmarkList();
}
/**
* 添加监听，设置书签列表
*/
init() {
this._registerEvents();
this._setBookmarkList();
}
/**
* 设置书签列表
* @private
*/
_setBookmarkList() {
this.mapType = gis_utils_namespaceObject.utils.getMapTypeByMapTarget(this.mapTarget);
this.list = JSON.parse(localStorage.getItem(this.mapType + "_bookmarks")) || [];
this.fire("setData", {
bookmarks: this.list
});
}
/**
* 添加书签项
* @param {string} name 书签名
*/
addBookmarkItem(name) {
const info = gis_utils_namespaceObject.mapViewUtils.getViewPosition(this.mapTarget);
const bookmarkItem = {
name: name,
info: info
};
this.list.push(bookmarkItem);
localStorage.setItem(this.mapType + "_bookmarks", JSON.stringify(this.list));
this.fire("setData", {
bookmarks: [...this.list]
});
}
/**
* 过滤书签
* @param {string} name 书签名
*/
filterBookmarkItem(name) {
let filterList = name ? external_xe_utils_default().filter(this.list, item => item.name.indexOf(name) !== -1) : [...this.list];
this.fire("setData", {
bookmarks: filterList
});
}
/**
* 清空书签列表，去除监听
*/
clearBookmarkList() {
this.list = [];
this.fire("setData", {
bookmarks: []
});
}
/**
* 删除书签项
* @param {number} index 书签索引
*/
removeBookmarkItem(index) {
this.list.splice(index, 1);
if (this.list.length === 0) {
localStorage.removeItem(this.mapType + "_bookmarks");
} else {
localStorage.setItem(this.mapType + "_bookmarks", JSON.stringify(this.list));
}
this.fire("setData", {
bookmarks: [...this.list]
});
}
/**
* 定位书签项视图范围
* @param {object} item 书签项
*/
setPosition(item) {
const view = item.info;
gis_utils_namespaceObject.mapViewUtils.setViewPosition(this.mapTarget, view);
}
/**
* 组件销毁时，执行的函数，删除事件监听
*/
destroy() {
this.off();
this._removeEvents();
}
}
;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/common/bookmark/Bookmark.vue?vue&type=script&setup=true&lang=js
const _hoisted_1 = ["onClick"];
const _hoisted_2 = {
style: {
"padding-left": "8px"
}
};
const _hoisted_3 = {
class: "bookmark-item",
style: {
"padding": "8px 0"
}
};
const _hoisted_4 = /*#__PURE__*/(0,external_vue_namespaceObject.createTextVNode)("添加书签 ");
// 接受组件传参
// vue3.2声明名称暂时只支持这样写 name在绑定组件的时候使用
const __default__ = {
name: "KqBookmark"
};
/* harmony default export */ var Bookmarkvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
props: {
// 每个地图相关组件的必须参数 非必传 指定组件绑定的map对象的div的id
mapTarget: String,
// 组件显示位置
position: [String, Object],
// 是否显示阴影
showShadow: {
type: Boolean,
default: false
}
},
setup(__props, {
expose
}) {
const props = __props; // 组件容器
const boxRef = (0,external_vue_namespaceObject.ref)(null); // list数据源
const dataList = (0,external_vue_namespaceObject.ref)([]); // 是否正在添加书签
const isAddingItem = (0,external_vue_namespaceObject.ref)(false); // 添加按钮是否禁用
const disabledAddBtn = (0,external_vue_namespaceObject.ref)(false); // 书签名
const itemName = (0,external_vue_namespaceObject.ref)(""); // 搜索框绑定值
const filterName = (0,external_vue_namespaceObject.ref)(""); // 添加输入框容器
const ref_inputAdd = (0,external_vue_namespaceObject.ref)(null); // 逻辑类
let viewModel = null;
(0,external_vue_namespaceObject.onMounted)(() => {
(0,util_namespaceObject.updatePosition)(boxRef.value, props);
viewModel = new BookmarkViewModel({
mapTarget: props.mapTarget
}); // 逻辑类监听数据设置事件
viewModel.on("setData", _data => {
dataList.value = _data.bookmarks;
});
viewModel.init();
});
(0,external_vue_namespaceObject.onBeforeUnmount)(() => {
viewModel.destroy();
viewModel = null;
});
expose({
resetBookmark
});
/**
* 添加书签按钮事件
*/
function onClickAdd() {
isAddingItem.value = true;
ref_inputAdd.value.$refs.child.focus();
}
/**
* 清空搜索框事件
*/
function onClickClear() {
viewModel.filterBookmarkItem("");
disabledAddBtn.value = false;
}
/**
* 搜索框点击事件
*/
function onClickSearch() {
viewModel.filterBookmarkItem(filterName.value);
disabledAddBtn.value = filterName.value ? true : false;
}
/**
* 定位书签项视图范围
* @param {object} item 书签项
*/
function setPosition(item) {
viewModel.setPosition(item);
}
/**
* 书签输入框确定事件
*/
function onClickOK() {
viewModel.addBookmarkItem(itemName.value);
onClickCancel();
}
/**
* 书签输入框取消事件
*/
function onClickCancel() {
isAddingItem.value = false;
itemName.value = "";
}
/**
* 删除书签项事件
* @param {number} index 书签项索引
*/
function onClickDelete(index) {
viewModel.removeBookmarkItem(index);
}
/**
* 清空书签列表
*/
function resetBookmark() {
onClickCancel();
viewModel.clearBookmarkList();
}
return (_ctx, _cache) => {
const _component_kq_icon = (0,external_vue_namespaceObject.resolveComponent)("kq-icon");
const _component_kq_button = (0,external_vue_namespaceObject.resolveComponent)("kq-button");
const _component_kq_input = (0,external_vue_namespaceObject.resolveComponent)("kq-input");
const _component_kq_header = (0,external_vue_namespaceObject.resolveComponent)("kq-header");
const _component_kq_empty = (0,external_vue_namespaceObject.resolveComponent)("kq-empty");
const _component_kq_scrollbar = (0,external_vue_namespaceObject.resolveComponent)("kq-scrollbar");
const _component_kq_main = (0,external_vue_namespaceObject.resolveComponent)("kq-main");
const _component_kq_divider = (0,external_vue_namespaceObject.resolveComponent)("kq-divider");
const _component_kq_footer = (0,external_vue_namespaceObject.resolveComponent)("kq-footer");
const _component_kq_container = (0,external_vue_namespaceObject.resolveComponent)("kq-container");
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", {
class: (0,external_vue_namespaceObject.normalizeClass)(["bookmark", __props.showShadow ? 'shadow' : null]),
ref_key: "boxRef",
ref: boxRef
}, [(0,external_vue_namespaceObject.createVNode)(_component_kq_container, {
direction: "vertical"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createCommentVNode)(" S 搜索框 "), (0,external_vue_namespaceObject.createVNode)(_component_kq_header, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_input, {
modelValue: filterName.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => filterName.value = $event),
placeholder: "请输入搜索内容",
onClear: onClickClear,
clearable: ""
}, {
append: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_button, {
onClick: onClickSearch
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
size: 16
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Search))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}, 8
/* PROPS */
, ["modelValue"])]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createCommentVNode)(" E 搜索框 "), (0,external_vue_namespaceObject.createCommentVNode)(" S 书签列表 "), (0,external_vue_namespaceObject.createVNode)(_component_kq_main, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_scrollbar, {
style: {
"padding": "0 6px"
}
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [dataList.value.length === 0 && !isAddingItem.value ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)(_component_kq_empty, {
key: 0,
description: "无书签数据"
})) : ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, {
key: 1
}, [(0,external_vue_namespaceObject.createCommentVNode)(" 空值情况 "), ((0,external_vue_namespaceObject.openBlock)(true), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, (0,external_vue_namespaceObject.renderList)(dataList.value, (item, index) => {
return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("div", {
class: "bookmark-item",
key: index,
onClick: $event => setPosition(item)
}, [(0,external_vue_namespaceObject.createElementVNode)("span", _hoisted_2, (0,external_vue_namespaceObject.toDisplayString)(item.name), 1
/* TEXT */
), (0,external_vue_namespaceObject.createVNode)(_component_kq_button, {
type: "danger",
text: "",
circle: "",
onClick: $event => onClickDelete(index),
class: "bookmark-delete"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
size: 16
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Delete))]),
_: 1
/* STABLE */
})]),
_: 2
/* DYNAMIC */
}, 1032
/* PROPS, DYNAMIC_SLOTS */
, ["onClick"])], 8
/* PROPS */
, _hoisted_1);
}), 128
/* KEYED_FRAGMENT */
))], 64
/* STABLE_FRAGMENT */
)), (0,external_vue_namespaceObject.createCommentVNode)(" 列表 "), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createElementVNode)("div", _hoisted_3, [(0,external_vue_namespaceObject.createVNode)(_component_kq_input, {
ref_key: "ref_inputAdd",
ref: ref_inputAdd,
placeholder: "请输入书签名",
modelValue: itemName.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => itemName.value = $event),
clearable: "",
maxlength: "10"
}, null, 8
/* PROPS */
, ["modelValue"]), (0,external_vue_namespaceObject.createVNode)(_component_kq_button, {
class: "bookmark-btn",
onClick: onClickOK
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
size: 16,
title: "添加"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Check))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createVNode)(_component_kq_button, {
class: "bookmark-btn",
onClick: onClickCancel
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
size: 16,
title: "取消"
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Close))]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
})], 512
/* NEED_PATCH */
), [[external_vue_namespaceObject.vShow, isAddingItem.value]]), (0,external_vue_namespaceObject.createCommentVNode)(" 添加输入框 ")]),
_: 1
/* STABLE */
})]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createCommentVNode)(" E 书签列表 "), (0,external_vue_namespaceObject.createCommentVNode)(" S 添加按钮 "), (0,external_vue_namespaceObject.createVNode)(_component_kq_footer, null, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_divider), (0,external_vue_namespaceObject.createVNode)(_component_kq_button, {
type: "primary",
plain: "",
style: {
"width": "100%"
},
onClick: onClickAdd,
disabled: disabledAddBtn.value
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)(_component_kq_icon, {
size: 16,
style: {
"padding": "8px"
}
}, {
default: (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createVNode)((0,external_vue_namespaceObject.unref)(icons_vue_namespaceObject.Plus))]),
_: 1
/* STABLE */
}), _hoisted_4]),
_: 1
/* STABLE */
}, 8
/* PROPS */
, ["disabled"])]),
_: 1
/* STABLE */
}), (0,external_vue_namespaceObject.createCommentVNode)(" E 添加按钮 ")]),
_: 1
/* STABLE */
})], 2
/* CLASS */
);
};
}
}));
;// CONCATENATED MODULE: ./src/common/bookmark/Bookmark.vue?vue&type=script&setup=true&lang=js
;// CONCATENATED MODULE: ./src/common/bookmark/Bookmark.vue
const __exports__ = Bookmarkvue_type_script_setup_true_lang_js;
/* harmony default export */ var Bookmark = (__exports__);
;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/init.js"
var init_js_namespaceObject = require("@zpc_npm/vue-iclient-common/init.js");
var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_namespaceObject);
;// CONCATENATED MODULE: ./src/common/bookmark/index.js
Bookmark.install = (Vue, opts) => {
init_js_default()(Vue, opts);
Vue.component(Bookmark.name, Bookmark);
};
module.exports = __webpack_exports__;
/******/ })()
;