haiwei-ui 1.0.0

package/packages/components/map-search/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <section class="nm-map-search-box" v-loading="loading">
+    <el-input v-model="keyword" class="nm-map-search-input" size="small" placeholder="请输入关键字" prefix-icon="el-icon-search" clearable></el-input>
+    <div class="nm-map-search-list">
+      <el-scrollbar>
+        <ul v-if="data.length > 0" class="nm-map-search-list-box">
+          <li v-for="(item, i) in data" :key="i" :class="['nm-map-search-list-item', active === i ? 'active' : '']" @click="onSelect(item, i)">
+            <div class="title"><i class="el-icon-location-information" /> {{ item.title }}</div>
+            <div class="address">{{ item.address }}</div>
+            <div class="point">{{ item.point.lng.toFixed(precision) }},{{ item.point.lat.toFixed(precision) }}</div>
+          </li>
+        </ul>
+        <p class="no-data" v-else>没有数据~</p>
+      </el-scrollbar>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: 'MapSearch',
+  data() {
+    return {
+      /**关键字 */
+      keyword: '',
+      /**搜索实例 */
+      local: null,
+      /**定时器 */
+      timer: null,
+      /**数据 */
+      data: [],
+      /**显示加载动画 */
+      loading: false,
+      /**已选择的 */
+      active: ''
+    }
+  },
+  props: {
+    /**查询延时，默认800ms */
+    delay: {
+      type: Number,
+      default: 700
+    },
+    /**保留小数位精度 */
+    precision: {
+      type: Number,
+      default: 4
+    },
+    /**查询时每页数量，默认15 */
+    searchPageCapacity: {
+      type: Number,
+      default: 15
+    }
+  },
+  methods: {
+    init(map) {
+      this.local = new BMap.LocalSearch(map, { searchPageCapacity: this.searchPageCapacity, onSearchComplete: this.onSearchComplete })
+    },
+    search() {
+      //删除定时器
+      clearTimeout(this.timer)
+
+      this.timer = setTimeout(() => {
+        this.data = []
+        if (this.keyword) {
+          this.loading = true
+          this.local.search(this.keyword)
+        }
+      }, this.delay)
+    },
+    onSearchComplete(results) {
+      this.loading = false
+      if (this.local.getStatus() == BMAP_STATUS_SUCCESS) {
+        this.data = results.Sq.map(m => {
+          return { title: m.title, address: m.address, point: m.point }
+        })
+      } else {
+        this.$message.error('查询失败~')
+      }
+
+      this.$emit('search', this.data)
+    },
+    onSelect(item, i) {
+      this.active = i
+      this.$emit('select', item.point, item)
+    },
+    reset() {
+      this.active = ''
+      this.keyword = ''
+      this.data = []
+    }
+  },
+  watch: {
+    keyword() {
+      this.search()
+    }
+  }
+}
+</script>

package/packages/components/radio/index.js

@@ -0,0 +1,12 @@
+import radio from '../../mixins/components/radio.vue'
+export default {
+  name: 'Radio',
+  mixins: [radio],
+  props: {
+    // 接口方法
+    method: Function
+  },
+  created() {
+    this.action = this.method
+  }
+}

package/packages/components/scrollbar/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-scrollbar ref="bar" :class="['nm-scrollbar', horizontal ? 'is-horizontal' : '']">
+    <slot />
+  </el-scrollbar>
+</template>
+<script>
+export default {
+  name: 'Scrollbar',
+  props: {
+    /** 是否显示水平滚动条 */
+    horizontal: Boolean
+  },
+  methods: {
+    // 重绘滚动条
+    update() {
+      this.$refs.bar.update()
+    }
+  }
+}
+</script>

package/packages/components/select/index.js

@@ -0,0 +1,12 @@
+import select from '../../mixins/components/select'
+export default {
+  name: 'Select',
+  mixins: [select],
+  props: {
+    // 接口方法
+    method: Function
+  },
+  created() {
+    this.action = this.method
+  }
+}

package/packages/components/select-whether/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-select v-model="value_" :placeholder="placeholder" :clearable="clearable" @change="onChange">
+    <el-option label="是" :value="1" />
+    <el-option label="否" :value="0" />
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'SelectWhether',
+  data() {
+    return {
+      value_: this.value
+    }
+  },
+  props: {
+    value: [String, Number],
+    placeholder: {
+      type: String,
+      default: '请选择...'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    reset() {
+      this.value_ = ''
+      this.onChange('')
+    }
+  },
+  watch: {
+    value(val) {
+      this.value_ = val
+    }
+  }
+}
+</script>

package/packages/components/split/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div ref="outerWrapper" :class="wrapperClasses" v-loading="loading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner">
+    <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+      <div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
+        <slot name="left" />
+      </div>
+      <div :class="`${prefix}-trigger-con`" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
+        <slot name="trigger">
+          <trigger mode="vertical" />
+        </slot>
+      </div>
+      <div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
+        <slot name="right" />
+      </div>
+    </div>
+    <div v-else :class="`${prefix}-vertical`">
+      <div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
+        <slot name="top" />
+      </div>
+      <div :class="`${prefix}-trigger-con`" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
+        <slot name="trigger">
+          <trigger mode="horizontal" />
+        </slot>
+      </div>
+      <div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
+        <slot name="bottom" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 从iView迁移
+import { mapState } from 'vuex'
+import Trigger from './trigger.vue'
+export default {
+  name: 'Split',
+  components: {
+    Trigger
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator(value) {
+        return value === 'horizontal' || value === 'vertical'
+      },
+      default: 'horizontal'
+    },
+    min: {
+      type: [Number, String],
+      default: '40px'
+    },
+    max: {
+      type: [Number, String],
+      default: '40px'
+    },
+    /** loading */
+    loading: Boolean
+  },
+  /**
+   * Events
+   * @on-move-start
+   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+   * @on-move-end
+   */
+  data() {
+    return {
+      prefix: 'nm-split',
+      offset: 0,
+      oldOffset: 0,
+      isMoving: false
+    }
+  },
+  computed: {
+    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+    wrapperClasses() {
+      return [`${this.prefix}-wrapper`, this.isMoving ? 'no-select' : '']
+    },
+    paneClasses() {
+      return [
+        `${this.prefix}-pane`,
+        {
+          [`${this.prefix}-pane-moving`]: this.isMoving
+        }
+      ]
+    },
+    isHorizontal() {
+      return this.mode === 'horizontal'
+    },
+    anotherOffset() {
+      return 100 - this.offset
+    },
+    valueIsPx() {
+      return typeof this.value === 'string'
+    },
+    offsetSize() {
+      return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+    },
+    computedMin() {
+      return this.getComputedThresholdValue('min')
+    },
+    computedMax() {
+      return this.getComputedThresholdValue('max')
+    }
+  },
+  methods: {
+    px2percent(numerator, denominator) {
+      return parseFloat(numerator) / parseFloat(denominator)
+    },
+    getComputedThresholdValue(type) {
+      let size = this.$refs.outerWrapper[this.offsetSize]
+      if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
+      else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
+    },
+    getMin(value1, value2) {
+      if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+      else return Math.min(value1, value2)
+    },
+    getMax(value1, value2) {
+      if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+      else return Math.max(value1, value2)
+    },
+    getAnotherOffset(value) {
+      let res = 0
+      if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`
+      else res = 1 - value
+      return res
+    },
+    handleMove(e) {
+      let pageOffset = this.isHorizontal ? e.pageX : e.pageY
+      let offset = pageOffset - this.initOffset
+      let outerWidth = this.$refs.outerWrapper[this.offsetSize]
+      let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
+      let anotherValue = this.getAnotherOffset(value)
+      if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
+      if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
+      e.atMin = this.value === this.computedMin
+      e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5)
+      this.$emit('input', value)
+      this.$emit('on-moving', e)
+    },
+    handleUp() {
+      this.isMoving = false
+      document.removeEventListener('mousemove', this.handleMove, false)
+      document.removeEventListener('mouseup', this.handleUp, false)
+      this.$emit('on-move-end')
+    },
+    handleMousedown(e) {
+      this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+      this.oldOffset = this.value
+      this.isMoving = true
+      document.addEventListener('mousemove', this.handleMove, false)
+      document.addEventListener('mouseup', this.handleUp, false)
+      this.$emit('on-move-start')
+    },
+    computeOffset() {
+      this.offset = ((this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000) / 100
+    }
+  },
+  watch: {
+    value() {
+      this.computeOffset()
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.computeOffset()
+    })
+
+    window.addEventListener('resize', () => {
+      this.computeOffset()
+    })
+  }
+}
+</script>

package/packages/components/split/trigger.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="classes">
+    <div class="nm-split-trigger-bar-con">
+      <i class="nm-split-trigger-bar" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mode: String
+  },
+  data() {
+    return {
+      initOffset: 0
+    }
+  },
+  computed: {
+    isVertical() {
+      return this.mode === 'vertical'
+    },
+    classes() {
+      return ['nm-split-trigger', this.isVertical ? `nm-split-trigger-vertical` : `nm-split-trigger-horizontal`]
+    }
+  }
+}
+</script>

package/packages/components/tabnav/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <section :class="['nm-tabnav', fontSize]">
+    <slot name="before" />
+    <div class="nm-tabnav-tabs">
+      <el-tabs :value="current.path" type="card" :closable="true" @tab-click="onTabClick" @tab-remove="onTabRemove" @contextmenu.prevent.native="showContextMenu">
+        <el-tab-pane v-if="config.showHome" :name="defaultPage">
+          <span slot="label"> <nm-icon v-if="config.showIcon" name="home" /> 首页</span>
+        </el-tab-pane>
+        <el-tab-pane v-for="(item, i) in opened" :key="item.path" :name="item.path"
+          ><span slot="label" :index="i"> <nm-icon v-if="config.showIcon && item.icon" :name="item.icon" />{{ item.tabName }}</span>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="nm-tabnav-control">
+      <el-dropdown @command="cmd => handleCommand(cmd)">
+        <span class="nm-tabnav-control-btn">
+          <nm-icon name="angle-double-down" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="Left"> <nm-icon name="arrow-left" class="nm-tabnav-control-icon" />关闭左侧 </el-dropdown-item>
+          <el-dropdown-item command="Right"> <nm-icon name="arrow-right" class="nm-tabnav-control-icon" />关闭右侧 </el-dropdown-item>
+          <el-dropdown-item command="Other"> <nm-icon name="other" class="nm-tabnav-control-icon" />关闭其他 </el-dropdown-item>
+          <el-dropdown-item command="All"> <nm-icon name="app" class="nm-tabnav-control-icon" />全部关闭 </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div ref="contextmenu" class="nm-tabnav-contextmenu" v-show="contextmenu.visible" :style="{ top: contextmenu.top, left: contextmenu.left }">
+      <ul>
+        <li @click.stop="onRefresh"><nm-icon name="refresh" />重新载入</li>
+        <li @click.stop="onClose('')"><nm-icon name="close" />关闭</li>
+        <li @click.stop="onClose('Left')"><nm-icon name="arrow-left" />关闭左侧</li>
+        <li @click.stop="onClose('Right')"><nm-icon name="arrow-right" />关闭右侧</li>
+        <li @click.stop="onClose('Other')"><nm-icon name="other" />关闭其它</li>
+        <li @click.stop="onClose('All')"><nm-icon name="app" />关闭全部</li>
+      </ul>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex'
+import { on, off, hasClass } from '../../utils/dom'
+export default {
+  name: 'Tabnav',
+  data() {
+    return {
+      contextmenu: {
+        visible: false,
+        top: 0,
+        left: 0
+      },
+      closeParams: { index: 0, router: this.$router }
+    }
+  },
+  computed: {
+    ...mapState('app/page', { opened: 'opened', current: 'current', defaultPage: 'default' }),
+    ...mapState('app/config', { config: s => s.component.tabnav })
+  },
+  inject: ['reload'],
+  methods: {
+    ...mapActions('app/page', ['close', 'closeLeft', 'closeRight', 'closeOther', 'closeAll']),
+    showContextMenu(event) {
+      const { path } = event
+      for (let i = 0; i < path.length; i++) {
+        if (hasClass(path[i], 'el-tabs__item')) {
+          const index = path[i].querySelector('span').getAttribute('index')
+          if (index) {
+            this.contextmenu = {
+              visible: true,
+              top: event.y + 'px',
+              left: event.x + 'px'
+            }
+            this.closeParams.index = parseInt(index)
+          }
+          break
+        }
+      }
+    },
+    hideContextMenu(e) {
+      const { target } = e || window.event
+      if (this.$refs.contextmenu !== target) this.contextmenu.visible = false
+    },
+    /**
+     * @description 处理关闭标签下拉菜单命令
+     * @param {String} cmd 命令
+     * @param {String} tagName 选择的标签名称
+     */
+    handleCommand(cmd) {
+      this.closeParams.index = this.opened.findIndex(m => m.path === this.current.path)
+      this.onClose(cmd)
+    },
+    onTabClick(tab) {
+      if (tab.name === this.defaultPage && this.current.path !== this.defaultPage) {
+        this.$router.push(this.defaultPage)
+        return
+      }
+      if (this.current.path === tab.name) return
+      const page = this.opened.find(page => page.path === tab.name)
+      if (page) {
+        const { name, params, query } = page
+        this.$router.push({ name, params, query })
+      }
+    },
+    onTabRemove(path) {
+      this.closeParams.index = this.opened.findIndex(m => m.path === path)
+      this.onClose()
+    },
+    onClose(type) {
+      this[`close${type || ''}`](this.closeParams)
+    },
+    onRefresh() {
+      this.reload(this.current.name)
+    }
+  },
+  watch: {
+    'contextmenu.visible'(val) {
+      if (val) {
+        on(document, 'mouseup', this.hideContextMenu)
+      } else {
+        off(document, 'mouseup', this.hideContextMenu)
+      }
+    }
+  }
+}
+</script>

package/packages/components/tabs/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <section :class="['nm-tabs', this.fullscreen_ ? 'fullscreen' : '']">
+    <section class="nm-tabs-toolbar">
+      <slot name="toolbar" />
+      <!--全屏按钮-->
+      <nm-button v-if="fullscreen" :icon="this.fullscreen_ ? 'min' : 'max'" @click="onFullscreen" />
+    </section>
+    <slot />
+  </section>
+</template>
+<script>
+export default {
+  name: 'Tabs',
+  data() {
+    return {
+      fullscreen_: false
+    }
+  },
+  props: {
+    fullscreen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    /** 开启全屏 */
+    openFullscreen() {
+      this.fullscreen_ = true
+      // 全屏事件
+      this.$emit('fullscreen-change', this.fullscreen_)
+    },
+    /** 关闭全屏 */
+    closeFullscreen() {
+      this.fullscreen_ = false
+      // 全屏事件
+      this.$emit('fullscreen-change', this.fullscreen_)
+    },
+    /** 全屏事件 */
+    onFullscreen() {
+      if (this.fullscreen_) {
+        this.closeFullscreen()
+      } else {
+        this.openFullscreen()
+      }
+    }
+  }
+}
+</script>

package/packages/components/toolbar/components/fullscreen/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="nm-toolbar-item">
+    <nm-button class="nm-toolbar-button" type="text" @click="toggle">
+      <nm-icon :name="icon" />
+    </nm-button>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/fullscreen', ['active']),
+    icon() {
+      return this.active ? 'fullscreen-c' : 'fullscreen-o'
+    }
+  },
+  methods: {
+    ...mapActions('app/fullscreen', ['toggle'])
+  }
+}
+</script>

package/packages/components/toolbar/components/logout/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="nm-toolbar-item">
+    <nm-button class="nm-toolbar-button" type="text" @click="logout_">
+      <nm-icon name="logout" />
+    </nm-button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  methods: {
+    ...mapActions('app/system', ['logout']),
+    logout_() {
+      this._confirm('您确认要退出登录吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.logout()
+      })
+    }
+  }
+}
+</script>