web-component-gallery 1.3.12 → 2.0.2

package/method/Dialog.js

@@ -1,134 +0,0 @@
-import Modal from 'ant-design-vue/es/modal'
-import {Brower} from './lib/index.js'
-
-const defaultComponents = {
-  Brower
-}
-
-export default Vue => {
-  function dialog(component, componentProps, modalProps) {
-    const _vm = this
-    if (!_vm || !_vm._isVue) {
-      return
-    }
-    let dialogDiv = document.querySelector('body>div[type=dialog]')
-    if (!dialogDiv) {
-      dialogDiv = document.createElement('div')
-      dialogDiv.setAttribute('type', 'dialog')
-      document.body.appendChild(dialogDiv)
-    } 
-
-    const handle = function (checkFunction, afterHandel) {
-      if (checkFunction instanceof Function) {
-        const res = checkFunction()
-        if (res instanceof Promise) {
-          res.then(c => {
-            c && afterHandel()
-          })
-        } else {
-          res && afterHandel()
-        }
-      } else {
-        // checkFunction && afterHandel()
-        checkFunction || afterHandel()
-      }
-    }
-
-    const dialogInstance = new Vue({
-      data() {
-        return {
-          visible: true
-        }
-      },
-      router: _vm.$router,
-      store: _vm.$store,
-      mounted() {
-        this.$on('close', () => {
-          this.handleClose()
-        })
-      },
-      methods: {
-        handleClose() {
-          handle(this.$refs._component.onCancel, () => {
-            this.visible = false
-            this.$refs._component.$emit('close')
-            this.$refs._component.$emit('cancel')
-            dialogInstance.$destroy()
-          })
-        },
-        handleOk() {
-          handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
-            this.visible = false
-            this.$refs._component.$emit('close')
-            this.$refs._component.$emit('ok')
-            dialogInstance.$destroy()
-          })
-        }
-      },
-      render: function (h) {
-        const that = this
-        const modalModel = modalProps && modalProps.model
-        if (modalModel) {
-          delete modalProps.model
-        }
-        const ModalProps = Object.assign({}, (modalModel && { model: modalModel }) || {}, {
-          attrs: Object.assign(
-            {},
-            {
-              ...(modalProps.attrs || modalProps)
-            },
-            {
-              visible: this.visible
-            }
-          ),
-          on: Object.assign(
-            {},
-            {
-              ...(modalProps.on || modalProps)
-            },
-            {
-              ok: () => {
-                that.handleOk()
-              },
-              cancel: () => {
-                that.handleClose()
-              }
-            }
-          )
-        })
-
-        const componentModel = componentProps && componentProps.model
-        if (componentModel) {
-          delete componentProps.model
-        }
-        const ComponentProps = Object.assign({}, (componentModel && { model: componentModel }) || {}, {
-          ref: '_component',
-          attrs: Object.assign(
-            {},
-            {
-              ...((componentProps && componentProps.attrs) || componentProps)
-            }
-          ),
-          on: Object.assign(
-            {},
-            {
-              ...((componentProps && componentProps.on) || componentProps)
-            }
-          )
-        })
-
-        const componentContent = component instanceof String ? defaultComponents[ component ] : component
-
-        return h(Modal, ModalProps, [h(componentContent, ComponentProps)])
-      }
-    }).$mount(dialogDiv) 
-  }
-
-  Object.defineProperty(Vue.prototype, '$dialog', {
-    get: () => {
-      return function () {
-        dialog.apply(this, arguments)
-      }
-    }
-  })
-}

package/method/index.js

@@ -1,12 +0,0 @@
-/** 全局便捷弹出框 */
-import Dialog from "./Dialog"
-/** 全局页面加载框 */
-import PageLoading from "./PageLoading"
-
-/** 加载便捷弹窗等 */
-export default {
-    install(Vue) {
-      Vue.use(Dialog)
-      Vue.use(PageLoading)  
-    }
-}

package/plugins/lib/amap/AmapDraw.jsx

@@ -1,349 +0,0 @@
-import AmapSearch from './components/AmapSearch/index.jsx'
-import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { getAMapInstance } from '../../method/AMap.js'
-
-import './AmapDraw.less'
-
-export const AmapDrawProps = {
-  /** drawEl为地图容器实例名称 */
-  drawEl: PropTypes.string.def('AmapDraw'),
-  /** drawType为绘制类型
-   *  可选值（point点 | line线 | polygon面）
-   */
-  drawType: PropTypes.string.def('point'),
-  /** 绘制图标 （只在point类型下生效 */
-  drawIcon: PropTypes.any.def('http://api.qxfnkj.com:8090/poi/poi-marker-default.png'),
-  /** drawCount为绘制物绘制个数 */
-  drawCount: PropTypes.number.def(1),
-  /** drawOptions为绘制物配置项 */
-  drawOptions: PropTypes.object.def({}),
-  /** drawInfo为绘制物信息 */
-  drawInfo: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层)
-   *  格式: { point: ([]||{}), line: ([]||{}) }
-   */
-  drawInfoAll: PropTypes.object,
-  /** 限制区域 */
-  drawLimitArea: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** 限制区域样式配置 */
-  drawLimitAreaOptions: PropTypes.object.def({}),
-  /** 是否为纯地图展示数据 */
-  isExhibition: PropTypes.bool.def(false)
-}
-
-const AmapDraw = {
-  name: 'AmapDraw',
-  props: AmapDrawProps,
-  data() {
-    return {
-      amap: null,
-      /** 地图存储商店 */
-      amapStore: null,
-      drawArea: null,
-      drawLayers: null,
-      drawMouseTool: null,
-      buttonProps: [],
-      drawButtonProps: [
-        { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
-        { text: '清除', event: { click: this.AmapDrawClear } }
-      ],
-      saveButtonProps: [
-        { type: 'primary', text: '保存', event: { click: this.AmapDrawSave } },
-        { text: '取消', event: { click: this.AmapDrawReset } }
-      ],
-      /** 地图类型 */
-      amapType: 0,
-      /** 卫星图 */
-      amapSatellite: null
-    }
-  },
-  computed: {
-    drawLayersInfo: {
-      get() {
-        return this.drawInfo
-      },
-      set(newValue) {
-        this.$emit('getAMapLayersInfo', newValue)
-      }
-    }
-  },
-  watch: {
-    drawInfo: {
-      handler(newVal, oldVal) {
-        const newValue = this.drawLayersInfo
-        newVal && this.echoDrawLayers(this.drawType)
-      },
-      deep: true
-    },
-    drawInfoAll(newValue) {
-      newValue && this.echoDrawLayers()
-    },
-    drawOptions(newValue) {
-      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */
-      Object.keys(newValue).length && this.setOverlayOptions(newValue)
-    },
-    drawLimitArea(newValue) {
-      newValue && this.setDrawLimitArea()
-    }
-  },
-  async mounted() {
-    this.amapStore = await getAMapInstance()
-    this.amap = this.amapStore.initMap(this.drawEl)
-    this.amapSatellite = new this.amapStore.AMap.TileLayer.Satellite()
-    this.amap.add(this.amapSatellite)
-    this.amapSatellite.hide()
-    this.buttonProps = [].concat(this.drawButtonProps)
-    this.echoDrawLayers(this.drawType)
-    /** 如果有限制区域，则描绘在地图上 */
-    this.drawLimitArea && this.setDrawLimitArea()
-  },
-  destroyed() {
-    this.AmapDrawClear()
-  },
-  methods: {
-    /** 绘制 */
-    AmapDraw() {
-      this.buttonProps = [].concat(this.saveButtonProps)
-      this.drawMouseTool = new this.amapStore.AMap.MouseTool(this.amap)
-
-      this.AmapDrawClear()
-      this.setDrawLayers(this.drawType)
-
-      this.drawMouseTool.on('draw', ({ obj }) => {
-        if (this.drawArea && !this[`is${this.drawType}InRing`](obj))
-          return this.amap.remove(obj), this.$message.error('未在范围内描绘！')
-        /** 暂未支持一次性绘制多个 */
-        this.drawCount > 1
-          ? ((this.drawLayers = this.drawLayers || []), this.drawLayers.push(obj))
-          : (this.drawLayers = obj)
-        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {
-          return this.drawMouseTool.close()
-        }
-      })
-    },
-    /** 清空绘制 / 清空搜索 */
-    AmapDrawClear() {
-      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem))
-      // this.amap.clearMap()
-      this.drawLayers = null
-      this.drawLayersInfo = {}
-    },
-    /** 保存当前绘制 */
-    AmapDrawSave() {
-      this.assignDrawLayers(this.drawType)
-      this.buttonProps = [].concat(this.drawButtonProps)
-    },
-    /** 取消当前绘制 */
-    AmapDrawReset() {
-      this.buttonProps = [].concat(this.drawButtonProps)
-      this.AmapDrawClear()
-    },
-    /** 搜索地址 */
-    searchChoose(searchMarker, searchInfo) {
-      this.AmapDrawClear()
-      searchMarker.setMap(this.amap)
-      this.amap.setZoomAndCenter(15, searchMarker.getPosition())
-      this.drawType == 'point' && (this.drawLayersInfo = searchInfo)
-      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)
-    },
-    /** 检测覆盖物配置信息并同步 */
-    setOverlayOptions(options) {
-      if (!this.drawLayers) return
-      this.drawCount > 1
-        ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options))
-        : this.drawLayers.setOptions(options)
-    },
-    /** 绘制限定区域 */
-    setDrawLimitArea() {
-      let areaRange = []
-      try {
-        areaRange = JSON.parse(this.drawLimitArea)
-      } catch {
-        areaRange = this.drawLimitArea
-      }
-      this.drawArea && this.amap.remove(this.drawArea)
-      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */
-      this.setMapArea(areaRange)
-      this.judgeOverlays()
-    },
-    /** 绘制地图区域范围 */
-    setMapArea(jurisdictionRange) {
-      this.drawArea = new this.amapStore.AMap.Polygon({
-        map: this.amap,
-        path: jurisdictionRange,
-        extData: 'Area',
-        strokeWeight: 6,
-        ...this.drawLimitAreaOptions
-      })
-      const { lng, lat } = this.drawArea.getBounds().getCenter()
-      this.amap.setZoomAndCenter(15, [lng, lat])
-    },
-    /** 判断一个线段是否在面内 */
-    islineInRing(polyline) {
-      const paths = polyline.getPath()
-      return paths.every(pointItem => this.ispointInRing(pointItem))
-    },
-    /** 判断一个点是否在面内 */
-    ispointInRing(point) {
-      let position
-      try {
-        position = point.getPosition()
-      } catch {
-        position = point
-      }
-      return this.amapStore.AMap.GeometryUtil.isPointInRing(position, this.drawArea.getPath())
-    },
-    /** 判断地图上所覆盖物是否在限制范围内 */
-    judgeOverlays() {
-      this.amap
-        .getAllOverlays()
-        .forEach(
-          layerItem =>
-            layerItem.getExtData() != 'Area' &&
-            !this[`is${this.drawType}InRing`](layerItem) &&
-            this.removeOverlay(layerItem)
-        )
-    },
-    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */
-    removeOverlay(layerItem) {
-      this.amap.remove(layerItem)
-      this.$message.error('未在区域范围内,请重新描绘！')
-      try {
-        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData())
-        this.drawLayers.splice(i, 1)
-      } catch {
-        this.drawLayers = null
-        this.drawLayersInfo = {}
-      }
-    },
-    /** 根据类型处理不同数据 */
-    async setDrawLayers(drawType) {
-      const type = {
-        point: 'marker',
-        line: 'polyline',
-        polygon: 'polygon'
-      }
-
-      /** 图层基础配置 */
-      const drawOptions =
-        drawType == 'point'
-          ? {
-              anchor: 'bottom-center',
-              icon: await this.amapStore.setIcon(this.drawIcon)
-            }
-          : { strokeWeight: 8 }
-
-      this.drawMouseTool[type[drawType]]({
-        ...drawOptions,
-        ...this.drawOptions
-      })
-    },
-    /** 赋值不同图层数据 */
-    assignDrawLayers(drawType) {
-      if (drawType == 'point') {
-        const { lng, lat } = this.drawLayers.getPosition()
-        const position = { longitude: lng, latitude: lat }
-        this.amapStore.getMapAddress(position, address => {
-          this.drawLayersInfo = {
-            ...position,
-            ...address
-          }
-        })
-        return
-      }
-      const range = this.drawLayers.getPath().map(({ lng, lat }) => [lng, lat])
-      this.drawLayersInfo = { range }
-    },
-    /** 回显不同类型图层 */
-    echoDrawLayers(drawType) {
-      /** 如若没挂载layers属性则退出 */
-      if (!this.amapStore || !this.amap) return
-
-      const drawLayersItem = async (drawItem, type, i = 0) => {
-        let layersItem = null
-        const { longitude, latitude, range } = drawItem
-        if ((longitude && latitude) || range) {
-          const setOptions = {
-            extData: `draw${type}${i}`,
-            ...this.drawOptions
-          }
-
-          if (type == 'point') {
-            layersItem = await this.amapStore.setMarker(this.drawIcon, {
-              position: [longitude, latitude],
-              ...setOptions
-            })
-          } else {
-            const options = {
-              path: range,
-              strokeWeight: 8,
-              ...setOptions
-            }
-            layersItem =
-              type == 'line' ? new this.amapStore.AMap.Polyline(options) : new this.amapStore.AMap.Polygon(options)
-          }
-
-          layersItem.setMap(this.amap)
-          this.amap.setFitView()
-        }
-      }
-
-      if (!this.isExhibition) {
-        drawLayersItem(this.drawLayersInfo, drawType)
-        return
-      }
-
-      if (this.drawInfoAll) {
-        for (let key in this.drawInfoAll) {
-          const isArray = Array.isArray(this.drawInfoAll[key])
-          isArray
-            ? this.drawInfoAll[key].forEach((drawItem, i) => {
-                drawLayersItem(drawItem, key, i)
-              })
-            : drawLayersItem(this.drawInfoAll[key], key)
-        }
-        return
-      }
-
-      drawLayersItem(this.drawLayersInfo, drawType)
-    },
-    /** 切换地图类型 */
-    onLayersSwitch(key) {
-      this.amapType = key
-      this.amapType ?
-      this.amapSatellite.show() :
-      this.amapSatellite.hide()
-    }
-  },
-  render(h) {
-    const amapLayers = ['电子', '卫星']
-    const { drawEl, drawIcon, amapType, buttonProps, isExhibition, AmapDrawClear, searchChoose, onLayersSwitch } = this
-
-    return (
-      <div class="AmapDraw">
-        {!isExhibition && (
-          <AmapSearch {...{ props: { drawIcon, buttonProps }, on: { searchReset: AmapDrawClear, searchChoose } }} />
-        )}
-        <div id={drawEl} />
-        <div class="AmapDraw__Layers">
-          {amapLayers.map((layer, i) => (
-            <span 
-              key={i}
-              class={i === amapType && 'LayersActive'}
-              onClick={() => onLayersSwitch(i)}
-            > 
-            {i === amapType}
-              {layer}
-            </span>
-          ))}
-        </div>
-      </div>
-    )
-  }
-}
-
-AmapDraw.install = function (Vue) {
-  Vue.component('AmapDraw', AmapDraw)
-}
-
-export default AmapDraw

package/plugins/lib/amap/AmapDraw.less

@@ -1,45 +0,0 @@
-@import '../style/mixins.less';
-@import 'ant-design-vue/lib/style/themes/default.less';
-
-.AmapDraw {
-  position: relative;
-
-  &__Search {
-    top: 8px;
-    left: 8px;
-    z-index: 1;
-    position: absolute;
-  }
-
-  &__Layers {
-    z-index: 1;
-    right: @padding-md;
-    bottom: @padding-md;
-    position: absolute;
-    background: @component-background;
-    .layout(32px, 120px);
-    .flex-layout(column);
-
-    span {
-      flex: 1;
-      cursor: pointer;
-      font-size: 15px;
-      color: fade(@white, 70%);
-      letter-spacing: 0.2em;
-      writing-mode: vertical-rl;
-      .flex-mixins();
-    }
-
-    .LayersActive {
-      color: @white;
-      border: 1px solid @primary-color;
-      box-sizing: border-box;
-      box-shadow: 0px 0px 16px 0px @primary-color inset;
-    }
-  }
-
-  #AmapDraw {
-    width: 100%;
-    min-height: 304px;
-  }
-}

package/plugins/lib/amap/components/AmapSearch/index.jsx

@@ -1,73 +0,0 @@
-import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { FormComp, Button } from '../../../index'
-import { getAMapInstance } from '../../../../method/AMap.js'
-
-import './index.less'
-
-const { ASelectCustom } = FormComp
-
-export const AmapSearchProps = {
-  /** 搜索后绘制图标 */
-  drawIcon: PropTypes.any,
-  buttonProps: PropTypes.array.def([])
-}
-
-const AmapSearch = {
-  name: 'AmapSearch',
-  props: AmapSearchProps,
-  data() {
-    return {
-      /** 地图存储商店 */
-      amapStore: null,
-      searchMarker: null,
-      addressValue: undefined,
-      selectOptions: []
-    }
-  },
-  async mounted() {
-    this.amapStore = await getAMapInstance()
-  },
-  methods: {
-    /** 选择地址 */
-    async changeHandle() {
-      if (!this.addressValue) return this.$emit('searchReset', this.searchMarker), (this.searchMarker = null)
-      const { label, location } = this.selectOptions.find(({ id }) => id == this.addressValue)
-      const searchInfo = {
-        longitude: location.lng,
-        latitude: location.lat,
-        address: label
-      }
-      this.searchMarker = await this.amapStore.setMarker(this.drawIcon, { position: [location.lng, location.lat] })
-      this.$emit('searchChoose', this.searchMarker, searchInfo)
-    },
-    /** 根据搜索框搜索地址 */
-    searchHandle(keyword) {
-      this.amapStore.getMapSearch(keyword, addressOptions => {
-        this.selectOptions = addressOptions
-      })
-    }
-  },
-  render(h) {
-    const { selectOptions, changeHandle, searchHandle, buttonProps } = this
-
-    const props = {
-      valueKey: 'id',
-      labelKey: 'label',
-      options: selectOptions,
-      placeholder: '请输入目的地进行搜索'
-    }
-
-    return (
-      <div class="AmapDraw__Search">
-        <ASelectCustom v-model={this.addressValue} {...{ props, on: { change: changeHandle, search: searchHandle } }} />
-        {buttonProps && <Button buttonProps={buttonProps} class="AmapDraw__Search__Button" />}
-      </div>
-    )
-  }
-}
-
-AmapSearch.install = function (Vue) {
-  Vue.component('AmapSearch', AmapSearch)
-}
-
-export default AmapSearch

package/plugins/lib/amap/index.js

@@ -1,13 +0,0 @@
-/* 地图打点 */
-import AmapDraw from './AmapDraw.jsx'
-
-/* 地图搜索 */
-import AmapSearch from './components/AmapSearch/index.jsx'
-
-export {
-    AmapDraw
-}
-
-export default {
-    AmapSearch
-}

package/plugins/lib/avatar/index.js

@@ -1,7 +0,0 @@
-import Avatar from './index.vue'
- 
-Avatar.install = function (Vue) { 
-  Vue.component(Avatar.name, Avatar)
-}
-
-export default Avatar

package/plugins/lib/avatar/index.vue

@@ -1,47 +0,0 @@
-<template>
-  <Dropdown placement="bottomRight">
-    <span class="ant-pro-account-avatar" style="margin-right: 12px; margin-bottom: 6px;">
-      <slot name="avatar" />
-    </span> 
-    <Menu class="ant-pro-drop-down menu" slot="overlay" >
-      <MenuItem key="logout" @click="handleLogout">
-      <Icon type="logout" />
-        退出登录
-      </MenuItem>
-    </Menu> 
-  </Dropdown>
-</template>
-
-<script>
-import { Modal, Dropdown, Menu, Icon } from 'ant-design-vue'
-
-export default {
-  name: 'Avatar',
-  components: { 
-    Dropdown,
-    Menu,
-    MenuItem: Menu.Item,
-    Icon
-  },
-  props: {
-    logoutMessage: {
-      type: String,
-      default: '确定要退出登录吗？'
-    }
-  },
-  methods: {
-    handleLogout (e) {
-      Modal.confirm({
-        content: this.logoutMessage,
-        onOk: () => {
-          return this.$emit('handleLogout')
-        },
-        onCancel () {}
-      }) 
-    } 
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>