haiwei-ui 1.0.0

package/packages/components/login-neon/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="nm-login-neon">
+    <div class="login-header">
+      <div class="login-logo">
+        <img :src="logoUrl" />
+      </div>
+      <div class="login-title">{{ title }}</div>
+    </div>
+    <div class="login-form">
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-form-item v-if="loginOptions.accountTypes" prop="accountType">
+          <el-select v-model="form.accountType" placeholder="账户类型">
+            <template v-slot:prefix>
+              <nm-icon name="project" />
+            </template>
+            <el-option v-for="item in loginOptions.accountTypes" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="userName">
+          <el-input v-model="form.userName" placeholder="用户名">
+            <template v-slot:prefix>
+              <nm-icon name="user" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input type="password" v-model="form.password" autocomplete="off" placeholder="密码">
+            <template v-slot:prefix>
+              <nm-icon name="password" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <div v-if="loginOptions.verifyCode" class="verifycode">
+          <div class="verifycode-input">
+            <el-form-item prop="verifyCode.code">
+              <el-input v-model="form.verifyCode.code" autocomplete="off" placeholder="验证码">
+                <template v-slot:prefix>
+                  <nm-icon name="verifycode"></nm-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="verifycode-img">
+            <img title="点击刷新" :src="verifyCodeUrl" @click="refreshVierifyCode" />
+          </div>
+        </div>
+        <el-form-item style="text-align:right;">
+          <nm-button icon="login" :loading="loading" class="login-btn" @click="tryLogin">登录</nm-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="copyright">{{ copyright }}</div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'LoginNeon',
+  data() {
+    const _this = this
+    return {
+      verifyCodeUrl: '',
+      form: {
+        userName: '',
+        password: '',
+        accountType: 0,
+        verifyCode: {
+          id: '',
+          code: ''
+        }
+      },
+      rules: {
+        userName: [
+          {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'change'
+          }
+        ],
+        password: [
+          {
+            required: true,
+            message: '请输入密码',
+            trigger: 'change'
+          }
+        ],
+        code: [
+          {
+            validator(rule, value, callback) {
+              if (_this.loginVerifyCode && value === '') {
+                callback(new Error('请输入验证码'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
+      },
+      loading: false
+    }
+  },
+  computed: {
+    ...mapGetters('app/config', ['logoUrl']),
+    ...mapState('app/config', {
+      title: s => s.system.title,
+      copyright: s => s.system.copyright,
+      loginOptions: s => s.component.login
+    }),
+    ...mapState('app/system', {
+      getVerifyCode: s => s.actions.getVerifyCode
+    })
+  },
+  mounted() {
+    if (this.loginOptions.verifyCode) {
+      this.refreshVierifyCode()
+    }
+    document.addEventListener('keydown', e => {
+      if (e.keyCode === 13) {
+        this.tryLogin()
+      }
+    })
+  },
+  methods: {
+    ...mapActions('app/system', ['login']),
+    // 刷新验证码
+    async refreshVierifyCode() {
+      let data = await this.getVerifyCode()
+      this.verifyCodeUrl = data.base64String
+      this.form.verifyCode.id = data.id
+    },
+    // 登录
+    tryLogin() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.loading = true
+
+          this.login(this.form)
+            .then(data => {
+              // 初始化令牌
+              this.$store.commit('app/token/init', data)
+
+              // 跳转
+              let redirect = this.$route.query.redirect
+              if (!redirect || redirect === '') {
+                redirect = '/'
+              }
+
+              this.$router.push({
+                path: redirect
+              })
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        } else {
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    loginOptions: {
+      immediate: true,
+      handler(val) {
+        this.form.accountType = val.defaultAccountType
+      }
+    }
+  }
+}
+</script>

package/packages/components/map/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div ref="map" class="nm-map" :style="{ width, height }"></div>
+</template>
+<script>
+/**默认坐标点 */
+const defaultCenter = {
+  lng: 116.404,
+  lat: 39.915
+}
+export default {
+  name: 'Map',
+  data() {
+    return {
+      map: null
+    }
+  },
+  props: {
+    ak: String,
+    /**宽度 */
+    width: {
+      type: String,
+      default: '100%'
+    },
+    /**高度 */
+    height: {
+      type: String,
+      default: '100%'
+    },
+    /**中心坐标点 */
+    center: {
+      type: [Object, String],
+      default() {
+        return {
+          lng: 116.404,
+          lat: 39.915
+        }
+      }
+    },
+    /**缩放 */
+    zoom: {
+      type: Number,
+      default: 15
+    },
+    /**是否开启底图可点功能，默认关闭 */
+    mapClick: Boolean,
+    /**启用地图拖拽，默认启用 */
+    dragging: {
+      type: Boolean,
+      default: true
+    },
+    /**启用滚轮放大缩小，默认启用 */
+    scrollWheelZoom: {
+      type: Boolean,
+      default: true
+    },
+    /**启用双击放大，默认启用 */
+    doubleClickZoom: {
+      type: Boolean,
+      default: true
+    },
+    /**启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级 */
+    keyboard: {
+      type: Boolean,
+      default: false
+    },
+    /**启用地图惯性拖拽，默认禁用 */
+    inertialDragging: {
+      type: Boolean,
+      default: false
+    },
+    /**启用连续缩放效果，默认禁用 */
+    continuousZoom: {
+      type: Boolean,
+      default: false
+    },
+    /**启用双指操作缩放，默认启用 */
+    pinchToZoom: {
+      type: Boolean,
+      default: true
+    },
+    /**启用自动适应容器尺寸变化，默认启用 */
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    /**设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范 */
+    defaultCursor: String,
+    /**设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范 */
+    draggingCursor: String,
+    /**设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别 */
+    minZoom: Number,
+    /**设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别 */
+    maxZoom: Number
+  },
+  methods: {
+    /**
+     * @description 创建脚本
+     */
+    createScript() {
+      const ak = this.ak || this.$map.ak
+      return new Promise(function(resolve) {
+        if (window.BMap) {
+          resolve(BMap)
+        } else {
+          window._mapInit = function() {
+            resolve(BMap)
+          }
+          let script = document.createElement('script')
+          script.type = 'text/javascript'
+          script.src = '//api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=_mapInit'
+          document.head.appendChild(script)
+        }
+      })
+    },
+    /**
+     * @description 初始化
+     */
+    init() {
+      this.map = new BMap.Map(this.$refs.map, { enableMapClick: this.mapClick })
+      this.setOptions()
+      this.$emit('init', this.map)
+    },
+    /**初始设置 */
+    setOptions() {
+      this.centerAndZoom()
+
+      this.setDefaultCursor()
+      this.setDraggingCursor()
+      this.setMinZoom()
+      this.setMaxZoom()
+
+      this.triggerDragging()
+      this.triggerScrollWheelZoom()
+      this.triggerDoubleClickZoom()
+      this.triggerKeyboard()
+      this.triggerInertialDragging()
+      this.triggerContinuousZoom()
+      this.triggerPinchToZoom()
+      this.triggerAutoResize()
+    },
+    centerAndZoom() {
+      let center = this.center
+      if (!center) {
+        center = Object.assign({}, defaultCenter)
+      }
+      if (typeof center === 'object') {
+        const point = new BMap.Point(center.lng, center.lat)
+        this.map.centerAndZoom(point, this.zoom)
+      } else {
+        this.map.centerAndZoom(center, this.zoom)
+      }
+    },
+    setZoom() {
+      this.map.setZoom(this.zoom)
+    },
+    setDefaultCursor() {
+      this.defaultCursor && this.map.setDefaultCursor(this.defaultCursor)
+    },
+    setDraggingCursor() {
+      this.draggingCursor && this.map.setDraggingCursor(this.draggingCursor)
+    },
+    setMinZoom() {
+      this.minZoom && this.map.setMinZoom(this.minZoom)
+    },
+    setMaxZoom() {
+      this.maxZoom && this.map.setMaxZoom(this.maxZoom)
+    },
+    triggerDragging() {
+      this.dragging ? this.map.enableDragging() : this.map.disableDragging()
+    },
+    triggerScrollWheelZoom() {
+      this.scrollWheelZoom ? this.map.enableScrollWheelZoom() : this.map.disableScrollWheelZoom()
+    },
+    triggerDoubleClickZoom() {
+      this.doubleClickZoom ? this.map.enableDoubleClickZoom() : this.map.disableDoubleClickZoom()
+    },
+    triggerKeyboard() {
+      this.keyboard ? this.map.enableKeyboard() : this.map.disableKeyboard()
+    },
+    triggerInertialDragging() {
+      this.inertialDragging ? this.map.enableInertialDragging() : this.map.disableInertialDragging()
+    },
+    triggerContinuousZoom() {
+      this.continuousZoom ? this.map.enableContinuousZoom() : this.map.disableContinuousZoom()
+    },
+    triggerPinchToZoom() {
+      this.pinchToZoom ? this.map.enablePinchToZoom() : this.map.disablePinchToZoom()
+    },
+    triggerAutoResize() {
+      this.autoResize ? this.map.enableAutoResize() : this.map.disableAutoResize()
+    }
+  },
+  watch: {
+    center() {
+      this.centerAndZoom()
+    },
+    zoom() {
+      this.setZoom()
+    },
+    dragging() {
+      this.triggerAutoResize()
+    },
+    scrollWheelZoom() {
+      this.triggerScrollWheelZoom()
+    },
+    doubleClickZoom() {
+      this.triggerDoubleClickZoom()
+    },
+    keyboard() {
+      this.triggerKeyboard()
+    },
+    inertialDragging() {
+      this.triggerInertialDragging()
+    },
+    continuousZoom() {
+      this.triggerContinuousZoom()
+    },
+    pinchToZoom() {
+      this.triggerPinchToZoom()
+    },
+    autoResize() {
+      this.triggerAutoResize()
+    },
+    defaultCursor() {
+      this.setDefaultCursor()
+    },
+    draggingCursor() {
+      this.setDraggingCursor()
+    },
+    minZoom() {
+      this.setMinZoom()
+    },
+    maxZoom() {
+      this.setMaxZoom()
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.createScript().then(this.init)
+      }, 500)
+    })
+  }
+}
+</script>

package/packages/components/map-coord-picking/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="nm-map-coord-picking">
+    <el-input ref="label" class="nm-map-coord-picking-input" v-model="label" :disabled="disabled" :placeholder="placeholder" @change="onLabelChange" :readonly="!allowInput">
+      <i slot="suffix" class="el-input__icon el-icon-coordinate" @click="show"></i>
+    </el-input>
+
+    <nm-dialog v-bind="dialog" :visible.sync="visible" @opened="onOpened">
+      <template v-slot:title>
+        {{ dialog.title }} (<span class="nm-size-14 nm-text-danger">当前坐标 : {{ label_ }}</span
+        >)
+      </template>
+      <div class="nm-map-coord-picking-box" v-loading="loading">
+        <nm-split v-model="split">
+          <template v-slot:left>
+            <div class="left">
+              <NmMap :center="center" :zoom="zoom" :scroll-wheel-zoom="scrollWheelZoom" height="100%" @init="onMapInit" />
+            </div>
+          </template>
+          <template v-slot:right>
+            <div class="right">
+              <div class="nm-map-coord-picking-search">
+                <NmMapSearch ref="search" :precision="precision" :delay="delay" :search-page-capacity="searchPageCapacity" @select="onSelect" />
+              </div>
+              <div class="nm-map-coord-picking-buttons">
+                <el-button type="success" @click="save">确认</el-button>
+                <el-button type="info" @click="reset">重置</el-button>
+              </div>
+            </div>
+          </template>
+        </nm-split>
+      </div>
+    </nm-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MapCoordPicking',
+  data() {
+    return {
+      split: 0.8,
+      /**是否显示 */
+      visible: false,
+      /**地图实例 */
+      map: null,
+      /**中心点 */
+      center: null,
+      /**标注对象 */
+      marker: null,
+      /**选择的的坐标点 */
+      selection: null,
+      loading: true,
+      oldValue: this.value,
+      /**显示的坐标 */
+      label: '',
+      /**是否手动输入 */
+      isManualInput: false,
+      /**打开对话框时是否需要重置标注 */
+      resetMarkerOnOpen: false
+    }
+  },
+  props: {
+    value: Object,
+    /**标题 */
+    title: {
+      type: String,
+      default: '坐标拾取'
+    },
+    /**图标 */
+    icon: {
+      type: String,
+      default: 'coordinate'
+    },
+    /**是否显示全屏按钮 */
+    fullscreen: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '70%'
+    },
+    height: {
+      type: String,
+      default: '80%'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入或选择坐标，如：116.404,39.915'
+    },
+    /**禁用 */
+    disabled: Boolean,
+    /**允许手动输入 */
+    allowInput: Boolean,
+    /**查询延时，默认700ms */
+    delay: {
+      type: Number,
+      default: 700
+    },
+    /**保留小数位精度 */
+    precision: {
+      type: Number,
+      default: 3
+    },
+    /**查询时每页数量，默认15 */
+    searchPageCapacity: {
+      type: Number,
+      default: 15
+    },
+    /**启用滚轮放大缩小，默认启用 */
+    scrollWheelZoom: {
+      type: Boolean,
+      default: true
+    },
+    /**缩放 */
+    zoom: Number
+  },
+  computed: {
+    dialog() {
+      return {
+        title: this.title,
+        icon: this.icon,
+        fullscreen: this.fullscreen,
+        noScrollbar: true,
+        width: this.width,
+        height: this.height,
+        draggable: true
+      }
+    },
+    label_() {
+      if (this.selection) {
+        return `${this.selection.lng},${this.selection.lat}`
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    /**警告提示 */
+    _warning(msg) {
+      this.$message({
+        message: msg,
+        type: 'warning'
+      })
+    },
+    /**重置 */
+    reset() {
+      if (this.map) {
+        this.setSelection(this.oldValue)
+        this.setCenter(this.oldValue)
+        this.createMarker()
+        this.$refs.search.reset()
+      }
+      this.setSelection(this.oldValue)
+      this.save()
+    },
+    show() {
+      if (!this.disabled) this.visible = !this.visible
+    },
+    save() {
+      this.setLabel()
+      this.$emit('input', this.selection ? Object.assign({}, this.selection) : null)
+      this.visible = false
+    },
+    /**重置中心坐标 */
+    setCenter(point) {
+      this.center = point ? Object.assign({}, point) : null
+    },
+    /**设置选择的坐标点 */
+    setSelection(point) {
+      if (point) {
+        this.selection = {
+          lng: parseFloat(point.lng).toFixed(this.precision),
+          lat: parseFloat(point.lat).toFixed(this.precision)
+        }
+      } else {
+        this.selection = null
+      }
+    },
+    setLabel() {
+      if (this.selection) {
+        this.label = `${this.selection.lng},${this.selection.lat}`
+      } else {
+        this.label = ''
+      }
+    },
+    //创建标注
+    createMarker() {
+      if (typeof BMap !== 'undefined') {
+        //先删除，再创建
+        if (this.marker) {
+          this.map.removeOverlay(this.marker)
+        }
+        if (this.selection) {
+          this.marker = new BMap.Marker(this.selection)
+          this.map.addOverlay(this.marker)
+        }
+      }
+    },
+    onMapInit(map) {
+      this.map = map
+      //初始化搜索
+      this.$refs.search.init(map)
+      //关闭loading
+      this.loading = false
+
+      //设置标注
+      this.createMarker()
+
+      const _this = this
+      //注册点击事件
+      this.map.addEventListener('click', function(e) {
+        _this.setSelection(e.point)
+        _this.createMarker()
+      })
+    },
+    onSelect(point) {
+      this.setSelection(point)
+      this.setCenter(point)
+      this.createMarker()
+    },
+    onOpened() {
+      if (this.resetMarkerOnOpen && this.map) {
+        const _this = this
+        setTimeout(() => {
+          _this.createMarker()
+          _this.setCenter(this.value)
+        }, 200)
+        this.resetMarkerOnOpen = false
+      }
+    },
+    onLabelChange(val) {
+      let point = null
+      this.refreshMarkerOnOpen = true
+
+      if (val.indexOf(',') < 0 || val.endsWith(',') || val.startsWith(',')) {
+        this.label = ''
+        this._warning('坐标无效')
+        return
+      }
+
+      const arr = val.split(',')
+      point = {
+        lng: arr[0],
+        lat: arr[1]
+      }
+      this.isManualInput = true
+
+      this.$emit('input', point)
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.setSelection(val)
+
+        //如果是手动输入，需要重新设置中心坐标，并且再打开时需要重置标注，反之，需要设置label
+        if (this.isManualInput) {
+          this.resetMarkerOnOpen = true
+          if (!this.map) {
+            this.setCenter(val)
+          }
+        } else {
+          this.setLabel()
+        }
+      }
+    }
+  },
+  created() {
+    //首次创建设置中心坐标
+    if (!this.center) {
+      this.setCenter(this.value)
+    }
+  }
+}
+</script>