@mapgis/mapgis-pan-spatial-map-widgets-config-ui 16.0.0

package/docs/.vuepress/config.js

@@ -0,0 +1,81 @@
+// const demoCode = require("vuepress-plugin-demo-code");
+
+module.exports = {
+  title: "ConfigUI",
+  dest: "dist-docs",
+  locales: {
+    "/": {
+      lang: "zh-CN",
+      title: "中地数码",
+      description: "@mapgis/mapgis-pan-spatial-map-widgets-config-ui"
+    }
+  },
+  themeConfig: {
+    locales: {
+      "/": {
+        // 多语言下拉菜单的标题
+        selectText: "选择语言",
+        // 该语言在下拉菜单中的标签
+        label: "简体中文",
+        // 编辑链接文字
+        editLinkText: "在 GitHub 上编辑此页",
+        // Service Worker 的配置
+        serviceWorker: {
+          updatePopup: {
+            message: "发现新内容可用.",
+            buttonText: "刷新"
+          }
+        },
+        // 当前 locale 的 algolia docsearch 选项
+        algolia: {},
+        nav: [
+          {
+            text: "向导",
+            link: "/guide/"
+          },
+          {
+            text: "API",
+            link: "/api/common/MultiImgWithForm.md"
+          },
+        ],
+        sidebar: [
+          {
+            title: "指南",
+            collapsable: false,
+            children: [
+              ["/guide/", "快速上手"],
+              ["/guide/publish.md", "发布流程"],
+            ]
+          },
+          {
+            title: "API",
+            collapsable: false,
+            children: [
+              {
+                title: "公共组件",
+                collapsable: false
+              },
+              ["/api/common/MultiImgWithForm.md", "多类别组件（带缩略图）"],
+              ["/api/common/MultiTypeForm.md", "多类型表单组件"],
+            ]
+          },
+        ]
+      }
+    }
+  },
+  head: [
+    [
+      "script",
+      { src: "https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js" }
+    ],
+    ["script", { src: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js" }]
+  ],
+  plugins: [
+    [
+      "demo-code",
+      {
+        jsLibs: ["https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"]
+      }
+    ]
+  ]
+};

package/docs/.vuepress/public/logo.svg

@@ -0,0 +1,7 @@
+<svg width="163" height="200" viewBox="0 0 163 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163 73.2769C162.805 146.266 81.7143 200 81.7143 200C81.7143 200 -0.195142 146.892 0.000292271 73.6636C0.108582 33.0876 36.7436 0.227932 81.6961 0.00125302C126.649 -0.225426 163.108 32.7009 163 73.2769ZM81.7143 166.861C81.7143 166.861 139.154 129.126 139.154 77.6847C139.154 49.0873 113.396 25.8202 81.7143 25.9048C50.0327 25.9894 24.2744 49.0873 24.2744 77.6848C24.2744 129.296 81.7143 166.861 81.7143 166.861Z" fill="#41B883"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.7143 200C81.7143 200 162.805 146.266 163 73.2769C163.108 32.7009 126.649 -0.225426 81.6961 0.00125302C36.7436 0.227932 0.108582 33.0876 0.000292271 73.6636C-0.195142 146.892 81.7143 200 81.7143 200ZM81.7143 166.861C81.7143 166.861 139.154 129.126 139.154 77.6847C139.154 49.0873 113.396 25.8202 81.7143 25.9048C50.0327 25.9894 24.2744 49.0873 24.2744 77.6848C24.2744 129.296 81.7143 166.861 81.7143 166.861Z" fill="#41B883"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140 77.3929C139.861 129.58 82.1526 168 82.1526 168C82.1526 168 23.8612 130.028 24.0003 77.6694C24.0773 48.6576 50.1489 25.1629 82.1396 25.0008C114.13 24.8388 140.077 48.3811 140 77.3929ZM82.1526 144.306C82.1526 144.306 123.03 117.325 123.03 80.5445C123.03 60.0974 104.699 43.4614 82.1526 43.5219C59.6061 43.5823 41.2751 60.0974 41.2751 80.5445C41.2751 117.446 82.1526 144.306 82.1526 144.306Z" fill="#35495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.1526 168C82.1526 168 139.861 129.58 140 77.3929C140.077 48.3811 114.13 24.8388 82.1396 25.0008C50.1489 25.1629 24.0773 48.6576 24.0003 77.6694C23.8612 130.028 82.1526 168 82.1526 168ZM82.1526 144.306C82.1526 144.306 123.03 117.325 123.03 80.5445C123.03 60.0974 104.699 43.4614 82.1526 43.5219C59.6061 43.5823 41.2751 60.0974 41.2751 80.5445C41.2751 117.446 82.1526 144.306 82.1526 144.306Z" fill="#35495E"/>
+<path d="M81.2756 114.551L90.5236 95.5236L109.551 86.2756L90.5236 77.0276L81.2756 58L72.0276 77.0276L53 86.2756L72.0276 95.5236L81.2756 114.551Z" fill="#41B883"/>
+</svg>

package/docs/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$contentWidth = 70vw;

package/docs/README.md

@@ -0,0 +1,35 @@
+---
+home: true
+heroImage: /logo.svg
+actionText: 快速上手 →
+actionLink: /guide/
+# features:
+#   - title: 稳定
+#     details: 提炼自企业级中后台产品的交互语言和视觉风格。
+
+#   - title: 简单
+#     details: 开箱即用的高质量 Vue 组件。
+
+#   - title: Ant Design
+#     details: 共享Ant Design of React设计工具体系。
+
+footer: MIT Licensed
+---
+
+::: warning
+~ 快速提示，刚接触一定要看完指南部分和自定义插件部分。 熟悉后可以直接查看 API。
+:::
+
+```javascript
+// main.js
+import '@mapgis/mapgis-pan-spatial-map-widgets-config-ui/dist-libs/mapgis-pan-spatial-map-widgets-config-ui.css'
+
+import widgetsConfigUi from '@mapgis/mapgis-pan-spatial-map-widgets-config-ui'
+```
+
+
+::: tip 目的
+
+用于一张图前后台的微件配置UI组件
+
+:::

package/docs/api/common/MultiImgWithForm.md

@@ -0,0 +1,87 @@
+# 带缩略图的多类别展示——如底图管理
+> multi-img-with-form
+
+<img alt="多类别展示示例" src="../images/basemapConfigUI.png" width="100%">
+
+## 何时使用
+
+此组件适用于配置数组，且数组项中包含待展示的缩略图的情况；
+
+组件提供对缩略图的展示，以及数组数据的增删改查。
+
+## 1、组件引用示例
+
+``` javascript
+<template>
+  <multi-img-with-form
+    ref="multiImgWithForm"
+    :config="widgetConfig.baseMapList"
+    :baseApi="baseApi"
+    TitleLabel="name"
+    :imgWidth="200"
+    :imgHeight="133"
+    @editItem="editItem"
+    @deleteItem="deleteItem"
+    @addItem="addItem"
+  />
+</template>
+```
+
+## 2、参数说明
+
+|参数|说明|是否必填|类型|默认值|
+|:---|:---|:---|:---|:---|
+|config|配置项|**必填项**|数组||
+|baseApi|缩略图的基地址|可选项|字符串||
+|TitleLabel|带展示标题对应的字段名|可选项|字符串|`'title'`|
+|imgWidth|缩略图的宽度|可选项|数字|300|
+|imgHeight|缩略图的高度|可选项|数字|180|
+|@addItem|点击添加按钮的回调|可选项|函数型||
+|@editItem|点击编辑按钮的回调|可选项|函数型||
+|@deleteItem|点击删除按钮的回调|可选项|函数型||
+
+## 3、示例代码
+
+``` vue
+<template>
+  <div>
+    <multi-img-with-form
+      ref="multiImgWithForm"
+      :config="widgetConfig.baseMapList"
+      :baseApi="baseApi"
+      TitleLabel="name"
+      :imgWidth="200"
+      :imgHeight="133"
+      @editItem="editItem"
+      @deleteItem="deleteItem"
+      @addItem="addItem"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BasemapManagerSetting',
+  data() {
+    return {
+      baseApi: '',
+    };
+  },
+  props: {
+    widgetConfig: Object
+  }
+  methods: {
+    editItem(index) {
+      console.log('编辑节点', index)
+    },
+    deleteItem(index) {
+      console.log('删除节点', index)
+    },
+    addItem() {
+      console.log('添加节点')
+    },
+  },
+};
+</script>
+```

package/docs/api/common/MultiTypeForm.md

@@ -0,0 +1,113 @@
+# 多类型表单
+> multi-type-form
+
+<img alt="多类型表单示例" src="../images/comprehensiveQueryConfigUI.png" width="70%">
+
+## 何时使用
+
+此组件适用于多种类型的表单项展示。
+
+## 1、组件引用示例
+
+``` javascript
+<template>
+  <multi-type-form
+    :layout="layout"
+    :labelCol="labelCol"
+    :wrapperCol="wrapperCol"
+    :DataModel="DataModel"
+    :DataSource="widgetConfig"
+  />
+</template>
+```
+
+## 2、参数说明
+
+|参数|说明|是否必填|类型|默认值|
+|:---|:---|:---|:---|:---|
+|layout|表单布局|可选项|'horizontal'|'vertical'|'inline'|'horizontal'	|
+|labelCol|label 标签布局，设置`span` `offset`值，如`{span: 3, offset: 12}`或`sm: {span: 3, offset: 12}`|可选项|对象||
+|wrapperCol|需要为输入控件设置布局样式时，使用该属性，用法同 labelCol|可选项|对象||
+|DataModel|数据模板，涉及表单标签的展现形式；详见下方说明|可选项|数组||
+|DataSource|表单数据|可选项|数组||
+
+## 3、数据模板说明
+
+|字段名|说明|适用类别|
+|:---|:---|:---|
+|name|对应表单数据的字段|所有类别|
+|label|对应界面展示的表单项|所有类别|
+|paramType|表单项类别，支持枚举型（ENUM）、数字型（NUMBER）、字符型（STRING）、布尔型（BOOLEAN）|-|
+|enums|枚举项，用逗号隔开，例：'normal, result, cluster'|枚举型（ENUM）|
+|selectLabel|枚举项的界面展示，用逗号隔开，例：'面板展示, 结果集展示, 聚合展示'|枚举型（ENUM）|
+|disabled|枚举项中禁用项展示，数组类型，例：['result']|枚举型（ENUM）|
+
+## 4、示例代码
+
+``` vue
+<template>
+  <div>
+    <multi-type-form
+      :layout="layout"
+      :labelCol="labelCol"
+      :wrapperCol="wrapperCol"
+      :DataModel="DataModel"
+      :DataSource="widgetConfig"
+    />
+  </div>
+</template>
+
+<script>
+const DataModel = [
+  {
+    name: 'ip',
+    label: '服务IP',
+    paramType: 'STRING', // 目前支持ENUM、NUMBER、STRING、BOOLEAN
+  },
+  {
+    name: 'port',
+    label: '端口',
+    paramType: 'STRING',
+  },
+  {
+    name: 'combine',
+    label: '采用向前指针',
+    paramType: 'BOOLEAN',
+  },
+  {
+    name: 'queryWay',
+    label: '查询方式',
+    paramType: 'ENUM',
+    enums: 'gdbp, doc',
+    disabled: ['doc']
+  },
+  {
+    name: 'showType',
+    label: '查询结果方式',
+    paramType: 'ENUM',
+    enums: 'normal, result, cluster',
+    selectLabel:'面板展示, 结果集展示, 聚合展示'
+  },
+  {
+    name: 'clusterMaxCount',
+    label: '最大聚合数',
+    paramType: 'NUMBER',
+  },
+]
+export default {
+  name: 'ComprehensiveQuerySetting',
+  data() {
+    return {
+      layout: 'horizontal',
+      labelCol: { span: 3 },
+      wrapperCol: { span: 21 },
+      DataModel,
+    };
+  },
+  props: {
+    widgetConfig: Object
+  }
+  methods: {},
+};
+</script>
+```

package/docs/guide/README.md

@@ -0,0 +1,42 @@
+# Config UI
+
+这里是 Config UI 的 Vue 实现，开发和服务于企业级后台产品。
+
+
+## ES6 方式（外网）
+
+使用 npm 或 yarn 安装
+
+我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+
+```sh
+npm install @mapgis/mapgis-pan-spatial-map-widgets-config-ui --save
+```
+
+```sh
+yarn add @mapgis/mapgis-pan-spatial-map-widgets-config-ui
+```
+
+如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
+
+## 全局引入
+
+```javascript
+// main.js
+import '@mapgis/mapgis-pan-spatial-map-widgets-config-ui/dist-libs/mapgis-pan-spatial-map-widgets-config-ui.css'
+
+import widgetsConfigUi from '@mapgis/mapgis-pan-spatial-map-widgets-config-ui'
+```
+
+## 基于内网仓库开发（内网）
+
+内网仓库建议使用 yarn 安装
+
+```sh
+npm set registry http://192.168.11.130:4873/   （这里设置yarn的内部仓库源时需要先设置npm的内部，否则容易出问题）
+yarn config set registry http://192.168.11.130:4873/
+yarn add @mapgis/mapgis-pan-spatial-map-widgets-config-ui
+# https://github.com/yarnpkg/yarn/issues/4862#issuecomment-368688262
+# npm config set registry https://registry.npm.taobao.org // 还原回公网仓库
+# yarn config set registry https://registry.npm.taobao.org // 还原回公网仓库
+```

package/docs/guide/publish.md

@@ -0,0 +1,84 @@
+# 发布流程——开发者
+
+## 发布前的准备工作
+
+1. 更新版本号，修改 package.json 中的版本号为最新版本
+2. 将 package.json 中的部署包指向 dist-libs，可以删除"module"一行或将其改为"module1"
+
+```sh
+5   "main": "dist-libs/mapgis-pan-spatial-map-widgets-config-ui.umd.min.js",
+6   "module1": "src/index.js",
+```
+
+3. 发布前测试
+   > 发布前必须本地 yarn build 后生成临时的 dist-libs 替换应用层/测试层的 node_modules 下的 dist-libs 依赖后，保证能够测试程序运行成功才能进行 publish 操作
+
+
+## 发布内网仓库
+
+```sh
+# 设置为mapgis内部源
+npm set registry http://192.168.11.130:4873/
+
+# 注册用户
+npm adduser --registry http://192.168.11.130:4873/
+
+# 查看用户
+npm who am i
+
+# 发布仓库  一定要在对应的发布库的根目录下发布
+npm publish --registry http://192.168.11.130:4873/
+```
+
+::: tip 仓库过大无法发布
+npm config set max_body_size 100mb --registry http://192.168.11.130:4873/
+:::
+
+## 发布外网仓库
+
+```sh
+# 一定要设置npm官方源，不能使用淘宝镜像源
+npm set registry http://www.npmjs.org
+
+# 查看当前所在源
+npm config get registry
+
+# 注册用户
+npm adduser
+
+# 登录
+npm login
+
+# 发布仓库
+进入要发布的package.json所在的目录下，发布包(前提：npm账号属于mapgis组织)
+npm publish --access public
+```
+
+## 使用 nrm 快速切换不同 npm 源
+
+::: tip
+在不同的 npm 源地址（如官方源、淘宝源或 mapgis 内部源）之间频繁切换较为繁琐，可以使用 nrm 进行切换与查看
+:::
+
+使用方式：
+
+```
+下载nrm： npm install -g nrm
+切换镜像源： nrm use 镜像名
+查看可切换的镜像源： nrm ls(*表示正在使用的镜像源)
+```
+
+使用示例
+
+```sh
+# npm set registry http://192.168.11.130:4873/
+npm install -g nrm
+nrm add mapgis http://192.168.11.130:4873/
+nrm ls
+nrm use mapgis
+nrm ls
+```
+
+| 查看可切换列表               | 使用                             |
+| :--------------------------- | :------------------------------- |
+| ![mapgis](./yarn/mapgis.png) | ![mapgis](./yarn/use_mapgis.png) |

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mapgis/mapgis-pan-spatial-map-widgets-config-ui",
+  "version": "16.0.0",
+  "description": "中地数码一张图微件配置UI",
+  "main": "dist-libs/mapgis-pan-spatial-map-widgets-config-ui.umd.min.js",
+  "module1": "src/index.js",
+  "scripts": {
+    "build": "node --max_old_space_size=9960 ./node_modules/@vue/cli-service/bin/vue-cli-service build --target lib --name mapgis-pan-spatial-map-widgets-config-ui src/index.js",
+    "lint": "vue-cli-service lint",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "dependencies": {
+    "@mapgis/webclient-vue-ui": "16.1.3",
+    "axios": "0.18.1",
+    "codemirror": "5.49.2",
+    "core-js": "^3.6.5",
+    "js-cookie": "2.2.0",
+    "jsonlint": "1.6.3",
+    "reqwest": "^2.0.5",
+    "v-contextmenu": "^2.9.0",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-runtime-helpers": "^1.1.2",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.17.0",
+    "@typescript-eslint/parser": "^2.17.0",
+    "@vue/cli-plugin-babel": "^4.4.0",
+    "@vue/cli-plugin-typescript": "^4.4.0",
+    "@vue/cli-plugin-vuex": "^4.4.0",
+    "@vue/cli-service": "^4.4.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.2",
+    "lint-staged": "^9.5.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^10.1.1",
+    "script-loader": "0.7.2",
+    "typescript": "~3.7.0",
+    "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.9.7"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue,ts,tsx}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

package/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/api/app/config.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+export function get(id) {
+  return request({
+    url: "api/config/" + id,
+    method: "get",
+  });
+}
+
+export default { get };