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

package/src/components/BasemapManagerSetting/BasemapManagerSetting.vue

@@ -0,0 +1,461 @@
+<template>
+  <div class="dialog">
+    <multi-img-with-form
+      ref="multiImgWithForm"
+      :config="widgetConfig.baseMapList"
+      :baseApi="baseApi"
+      TitleLabel="name"
+      :imgWidth="200"
+      :imgHeight="133"
+      @editItem="editItem"
+      @deleteItem="deleteItem"
+      @addItem="addItem"
+    />
+    <mapgis-ui-modal
+      v-model="showModal"
+      :title="modalTitle"
+      :width="1000"
+      :dialog-style="{ top: '60px' }"
+      :bodyStyle="{height:'75vh',overflowY:'auto'}"
+      okText="确定"
+      cancelText="取消"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <mapgis-ui-form layout="horizontal" :labelCol="{span:2}" :wrapperCol="{span:22}">
+        <mapgis-ui-form-item label="名称">
+          <mapgis-ui-input
+            v-model="basemapItem.name"
+          />
+          <mapgis-ui-checkbox :checked="JSON.parse(basemapItem.visible||'true')" @change="handleCheckVisible">可见</mapgis-ui-checkbox>
+          <mapgis-ui-checkbox v-model="basemapItem.select">默认选择</mapgis-ui-checkbox>
+          <mapgis-ui-checkbox
+            :checked="isIndexBaseMap"
+            @change="event=>{onCheckIndexBaseMap(event, basemapItem.guid)}"
+          >设为索引底图</mapgis-ui-checkbox>
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="描述">
+          <mapgis-ui-input
+            v-model="basemapItem.description"
+          />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="缩略图">
+          <mapgis-ui-input
+            v-model="basemapItem.image"
+            placeholder="请上传缩略图"
+            disabled
+          >
+            <mapgis-ui-upload
+              slot="suffix"
+              :action="imagesUploadApi"
+              :showUploadList="false"
+              :withCredentials="true"
+              accept=".bmp, .dib, .pcp, .dif, .wmf, .gif, .jpg, .tif, .eps, .psd, .cdr, .iff, .tga, .pcd, .mpt, .png, .jpeg"
+              @change="imgUploadChange"
+            >
+              <mapgis-ui-button type="link" icon="cloud-upload">
+                <!-- <mapgis-ui-iconfont type="mapgis-tujiatupian"/> -->
+                上传图片
+              </mapgis-ui-button>
+            </mapgis-ui-upload>
+          </mapgis-ui-input>
+          <img
+            v-show="basemapItem.image!==''"
+            class="image"
+            :src="baseApi + basemapItem.image"
+          />
+        </mapgis-ui-form-item>
+        <mapgis-ui-collapse :bordered="true" defaultActiveKey="1">
+          <mapgis-ui-collapse-panel key="1" header="数据列表">
+            <mapgis-ui-button class="editable-add-btn" @click="handleAddData" size="small">
+              添加
+            </mapgis-ui-button>
+            <mapgis-ui-table
+              bordered
+              :data-source="basemapItem.children"
+              :columns="columns"
+              size="small"
+              :pagination="{ pageSize: 5 }"
+            >
+              <template
+                v-for="col in ['name', 'description', 'url', 'tokenKey', 'token']"
+                :slot="col"
+                slot-scope="text, record"
+              >
+                <div :key="col">
+                  <mapgis-ui-input
+                    v-if="record.editable"
+                    size="small"
+                    style="margin: -5px 0"
+                    :value="text"
+                    @change="e => handleChangeData(e.target.value, record.editableKey, col)"
+                  />
+                  <template v-else>
+                    <div class="editable-text" :title="text">
+                      {{ text }}
+                    </div>
+                  </template>
+                </div>
+              </template>
+              <template
+                slot="type"
+                slot-scope="text, record"
+              >
+                <mapgis-ui-select v-if="record.editable" :value="text" size="small" @change="e => handleChangeData(e, record.editableKey, 'type')">
+                  <mapgis-ui-select-option v-for="dataType in typeList" :value="dataType.type" :key="dataType.type">
+                    {{dataType.type}}
+                  </mapgis-ui-select-option>
+                </mapgis-ui-select>
+                <template v-else>
+                  <div class="editable-text" :title="text">
+                    {{ text }}
+                  </div>
+                </template>
+              </template>
+              <template slot="operation" slot-scope="text, record">
+                <div class="editable-row-operations">
+                  <span v-if="record.editable">
+                    <a @click="() => handleSaveData(record.editableKey)">保存</a>
+                    <a @click="() => handleCancelEdit(record.editableKey)">取消</a>
+                  </span>
+                  <span v-else>
+                    <a :disabled="editingKey !== ''" @click="() => handleEditData(record.editableKey)">编辑</a>
+                  </span>
+                  <span >
+                    <mapgis-ui-popconfirm
+                      v-if="basemapItem.children.length"
+                      title="确认删除？"
+                      okText="确定"
+                      cancelText="取消"
+                      @confirm="() => handleDeleteData(record.editableKey)"
+                      :getPopupContainer="triggerNode => triggerNode.parentNode"
+                    > 
+                      <a href="javascript:;">删除</a>
+                    </mapgis-ui-popconfirm>
+                  </span>
+                </div>
+              </template>
+            </mapgis-ui-table>
+          </mapgis-ui-collapse-panel>
+        </mapgis-ui-collapse>
+      </mapgis-ui-form>
+    </mapgis-ui-modal>
+  </div>
+</template>
+
+<script>
+import { uuid } from '../../utils/uuid'
+const baseUrl =
+  process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
+const initItem = {
+  name: '',
+  description: '',
+  image: '/upload/basemap.png',
+  visible: 'true',
+  select: false,
+  children: []
+}
+const typeList = [
+  { type: 'OGCWMS' },
+  { type: 'OGCWMTS' },
+  { type: 'ArcGISTile' },
+  { type: 'ArcGISMapImage' },
+  { type: 'IGSTile' },
+  { type: 'IGSMapImage' },
+  { type: 'IGSVector' },
+  { type: 'VectorTile' },
+]
+
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+import MultiImgWithForm from '../CommonComponents/MultiImgWithForm/MultiImgWithForm'
+
+export default {
+  name: 'BasemapManagerSetting',
+  mixins: [WidgetSettingMixin],
+  components: {
+    MultiImgWithForm
+  },
+  data() {
+    return {
+      baseApi: baseUrl,
+      imagesUploadApi: baseUrl + '/api/local-storage/pictures',
+      mode: 'add', // add、edit
+      editIndex: -1,
+      showModal: false,
+      modalTitle: '编辑',
+      basemapItem: JSON.parse(JSON.stringify(initItem)), // 一个底图的数据列表
+      columns: [
+        {
+          title: '名称',
+          dataIndex: 'name',
+          width: '18%',
+          scopedSlots: { customRender: 'name' },
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          width: '8%',
+          scopedSlots: { customRender: 'description' },
+          ellipsis: true,
+        },
+        {
+          title: '数据类型',
+          dataIndex: 'type',
+          width: '15%',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: 'url',
+          dataIndex: 'url',
+          width: '20%',
+          scopedSlots: { customRender: 'url' },
+          ellipsis: true,
+        },
+        {
+          title: '令牌key',
+          dataIndex: 'tokenKey',
+          width: '8%',
+          scopedSlots: { customRender: 'tokenKey' },
+        },
+        {
+          title: '令牌value',
+          dataIndex: 'token',
+          width: '13%',
+          scopedSlots: { customRender: 'token' },
+          ellipsis: true,
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+        },
+      ],
+      editingKey: '',
+      count: 0,
+      cacheData: {},
+      typeList,
+    }
+  },
+  watch: {
+    widgetConfig: {
+      handler(next) {
+        next.baseMapList.forEach(item => {
+          if (!item.guid || item.guid == null) {
+            item.guid = uuid()
+          }
+        })
+      },
+      immediate: true,
+    },
+    basemapItem: {
+      handler(next) {
+        this.count = 0
+        next.children.forEach(item => {
+          item.editableKey = this.count++
+        })
+        this.cacheData = JSON.parse(JSON.stringify(next))
+      },
+      immediate: true,
+    }
+  },
+  computed: {
+    isIndexBaseMap() {
+      return this.basemapItem.guid === this.widgetConfig.indexBaseMapGUID || false
+    },
+  },
+  methods: {
+    imgUploadChange(result) {
+      if (result.file.status === 'done') {
+        this.basemapItem.image = result.file.response.url
+      }
+    },
+    editItem(index) {
+      this.showModal = true
+      this.modalTitle = '编辑节点'
+      this.mode = 'edit'
+      this.editIndex = index
+      this.basemapItem = JSON.parse(JSON.stringify(this.widgetConfig.baseMapList[index]))
+    },
+    deleteItem(guid) {
+      if (guid === this.widgetConfig.indexBaseMapGUID) {
+        this.widgetConfig.indexBaseMapGUID = ''
+      }
+    },
+    addItem() {
+      this.showModal = true
+      this.modalTitle = '添加节点'
+      this.mode = 'add'
+      this.basemapItem = JSON.parse(JSON.stringify(initItem))
+      this.basemapItem.guid = uuid()
+    },
+    handleCheckVisible(event) {
+      this.basemapItem.visible = JSON.stringify(event.target.checked)
+    },
+    onCheckIndexBaseMap(event, guid) {
+      if (event.target.checked) {
+        this.widgetConfig.indexBaseMapGUID = guid
+      } else if (this.basemapItem.guid === this.widgetConfig.indexBaseMapGUID) {
+        this.widgetConfig.indexBaseMapGUID = ''
+      }
+    },
+    handleOk() {
+      const flag = this.checkBasemapItem()
+      if (!flag) return
+
+      if (this.mode === 'edit') {
+        this.widgetConfig.baseMapList[this.editIndex] = this.basemapItem
+      } else {
+        this.widgetConfig.baseMapList.push(this.basemapItem)
+      }
+      this.showModal = false
+      this.$refs.multiImgWithForm.forceUpdate()
+    },
+    handleCancel() {
+      this.editingKey = ''
+    },
+    handleDeleteData(key) {
+      let keyIndex = -1
+      this.basemapItem.children.forEach((item, index) => {
+        if (item.editableKey === key) {
+          keyIndex = index
+        }
+      })
+      this.basemapItem.children.splice(keyIndex, 1)
+      this.cacheData = JSON.parse(JSON.stringify(this.basemapItem))
+    },
+    handleAddData() {
+      const flag = this.checkBasemapDatalistSave()
+      if (!flag) return
+
+      const {count} = this
+      const newData = {
+        editable: true,
+        editableKey: count,
+        description: '',
+        name: '',
+        token: '',
+        tokenKey: '',
+        type: '',
+        url: '',
+      }
+      this.basemapItem.children.push(newData)
+      this.count = count + 1
+      this.editingKey = count
+    },
+    handleEditData(key) {
+      this.basemapItem.children.forEach(item => {
+        if (item.editableKey === key) {
+          this.$set(item, 'editable', true)
+        }
+      })
+      this.editingKey = key
+    },
+    handleChangeData(value, key, column) {
+      this.basemapItem.children.forEach(item => {
+        if (item.editableKey === key) {
+          item[column] = value
+        }
+      })
+    },
+    handleSaveData(key) {
+      const flag = this.checkBasemapDatalist()
+      if (!flag) return
+
+      this.editingKey = ''
+      this.basemapItem.children.forEach(item => {
+        if (item.editableKey === key) {
+          delete item.editable
+        }
+      })
+      this.cacheData = JSON.parse(JSON.stringify(this.basemapItem))
+      this.$forceUpdate()
+    },
+    handleCancelEdit(key) {
+      this.editingKey = ''
+      this.basemapItem.children.forEach(item => {
+        if (item.editableKey === key) {
+          delete item.editable
+        }
+      })
+      this.basemapItem = this.cacheData
+    },
+    /* 验证当前底图项下的数据列表是否合法，返回false则不合法，不可保存 */
+    checkBasemapDatalist() {
+      let result = true
+      this.basemapItem.children.forEach(item => {
+        if (item.editable && item.editable === true) {
+          if (item.name === '' || item.type === '' || item.url === '') {
+            result = false
+            this.$message.error('名称、数据类型、url不能为空！')
+          }
+        }
+      })
+      return result
+    },
+    /* 验证当前底图项下的数据列表是否全部保存 */
+    checkBasemapDatalistSave() {
+      let result = true
+      this.basemapItem.children.forEach(item => {
+        if (item.editable && item.editable === true) {
+          result = false
+          this.$message.error('请保存编辑状态的数据！')
+        }
+      })
+      return result
+    },
+    /* 验证当前底图项是否合法，返回false则不合法，不可保存 */
+    checkBasemapItem() {
+      const flag = this.checkBasemapDatalistSave()
+      if (!flag) return
+
+      let result = true
+      if (this.basemapItem.name === '') {
+        result = false
+        this.$message.error('名称不能为空！')
+      }
+      return result
+    },
+    /* 配置UI点击确定按钮的回调，该方法主要进行必填项的验证及多余项的删除 */
+    checkConfig() {
+      if (this.widgetConfig.indexBaseMapGUID === undefined) {
+        this.widgetConfig.indexBaseMapGUID = ''
+      }
+      this.widgetConfig.baseMapList.forEach(basemap => {
+        if (basemap.children && basemap.children.length > 0) {
+          basemap.children.forEach(item => {
+            delete item.editableKey
+          })
+        }
+      })
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+.image {
+  height: 78px;
+  object-fit: scale-down;
+}
+.editable-add-btn {
+  margin-bottom: 8px;
+}
+.editable-row-operations a {
+  margin-right: 8px;
+}
+.mapgis-ui-btn:focus, .mapgis-ui-btn:hover {
+  background-color: #fff0;
+}
+::v-deep .mapgis-ui-collapse .mapgis-ui-collapse-item .mapgis-ui-collapse-header {
+  border-left: 0px solid var(--primary-5)!important;
+}
+.editable-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

package/src/components/CityGrowSetting/CityGrowSetting.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="dialog">
+    <mapgis-ui-button class="editable-add-btn" @click="handleAdd" size="small">
+      添加
+    </mapgis-ui-button>
+    <mapgis-ui-table
+      bordered
+      :data-source="widgetConfig"
+      rowKey="editableKey"
+      :columns="columns"
+      size="small"
+    >
+      <template slot="baseUrl" slot-scope="text, record">
+        <editable-cell :text="text" ref="EditableCell" @changeEdit="edit=>{changeEdit(record.editableKey, edit)}" @change="onCellChange(record.editableKey, 'baseUrl', $event)" />
+      </template>
+      <template slot="operation" slot-scope="text, record">
+        <mapgis-ui-popconfirm
+          v-if="widgetConfig.length"
+          title="确认删除？"
+          okText="确定"
+          cancelText="取消"
+          @confirm="() => onDelete(record.editableKey)"
+          :getPopupContainer="triggerNode => triggerNode.parentNode"
+        > 
+          <a href="javascript:;">删除</a>
+        </mapgis-ui-popconfirm>
+      </template>
+    </mapgis-ui-table>
+  </div>
+</template>
+
+<script>
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+import EditableCell from './EditableCell'
+export default {
+  name: 'CityGrowSetting',
+  mixins: [WidgetSettingMixin],
+  components: {
+    EditableCell,
+  },
+  data() {
+    return {
+      count: 0,
+      columns: [
+        {
+          title: '数据源',
+          dataIndex: 'baseUrl',
+          width: '80%',
+          scopedSlots: { customRender: 'baseUrl' },
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+        },
+      ],
+    }
+  },
+  watch: {},
+  mounted() {
+    this.count = 0
+    this.widgetConfig.forEach(item => {
+      item.editableKey = this.count++
+    })
+  },
+  methods: {
+    onCellChange(key, dataIndex, value) {
+      this.widgetConfig.forEach(item => {
+        if (item.editableKey === key) {
+          item[dataIndex] = value
+        }
+      })
+    },
+    onDelete(key) {
+      let keyIndex = -1
+      this.widgetConfig.forEach((item, index) => {
+        if (item.editableKey === key) {
+          keyIndex = index
+        }
+      })
+      this.widgetConfig.splice(keyIndex, 1)
+    },
+    handleAdd() {
+      const saveFlag = this.checkListSave()
+      if (!saveFlag) return
+      
+      const {count} = this
+      let newData = {
+        editableKey: count,
+        baseUrl: '',
+      }
+      // if (this.widgetConfig.length) { // 前台已优化，这里不再需要加此逻辑
+      //   newData = {...this.widgetConfig[0], ...newData}
+      // }
+
+      this.widgetConfig.push(newData)
+      this.count = count + 1
+    },
+    /**
+     * 验证当前widgetConfig是否合法，返回false则不合法，不可保存
+     */
+    checkConfig() {
+      const saveFlag = this.checkListSave()
+      if (!saveFlag) return
+
+      this.widgetConfig.forEach(item => {
+        delete item.editableKey
+      })
+      return true
+    },
+    /* 验证当前数据源列表是否全部保存 */
+    checkListSave() {
+      let result = true
+      this.widgetConfig.forEach(item => {
+        if (item.editable && item.editable === true) {
+          result = false
+          this.$message.error('请保存编辑状态的数据！')
+        }
+      })
+      return result
+    },
+    changeEdit(key, editable) {
+      this.widgetConfig.forEach(item => {
+        if (item.editableKey === key) {
+          if (editable === true) {
+            item['editable'] = editable
+          } else {
+            delete item.editable
+          }
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+
+.editable-add-btn {
+  margin-bottom: 8px;
+}
+</style>

package/src/components/CityGrowSetting/EditableCell.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="editable-cell">
+    <div v-if="editable" class="editable-cell-input-wrapper">
+        <mapgis-ui-input size="small" placeholder="请输入数据源url" :value="value" @change="handleChange" @pressEnter="check" />
+        <mapgis-ui-iconfont
+          type="mapgis-check"
+          class="editable-cell-icon-check"
+          @click="check"
+        />
+    </div>
+    <div v-else class="editable-cell-text-wrapper">
+        {{ value || ' ' }}
+        <mapgis-ui-iconfont type="mapgis-bianji" class="editable-cell-icon" @click="edit" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditableCell',
+  props: {
+    text: String,
+  },
+  data() {
+    return {
+      value: this.text,
+      editable: false,
+    };
+  },
+  watch: {
+    text: {
+      handler(next) {
+        if (next === '') {
+          this.editable = true
+          this.$emit('changeEdit', this.editable)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange(e) {
+      const value = e.target.value
+      this.value = value
+    },
+    check() {
+      if (this.value !== '') {
+        this.editable = false
+        this.$emit('change', this.value)
+        this.$emit('changeEdit', this.editable)
+      } else {
+        this.$message.error('数据源url不能为空！')
+      }
+    },
+    edit() {
+      this.editable = true
+      this.$emit('changeEdit', this.editable)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.editable-cell {
+  position: relative;
+}
+
+.editable-cell-input-wrapper,
+.editable-cell-text-wrapper {
+  padding-right: 24px;
+}
+
+.editable-cell-text-wrapper {
+  padding: 1px 24px 2px 5px;
+}
+
+.editable-cell-icon,
+.editable-cell-icon-check {
+  position: absolute;
+  right: 0;
+  width: 20px;
+  cursor: pointer;
+}
+
+.editable-cell-icon {
+  top: 4px;
+  line-height: 18px;
+  display: none;
+}
+
+.editable-cell-icon-check {
+  line-height: 28px;
+}
+
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
+
+.editable-cell-icon:hover,
+.editable-cell-icon-check:hover {
+  color: #108ee9;
+}
+</style>