@aochuang/common 1.0.0 → 1.0.1

package/components/message-box/message-box.js

@@ -0,0 +1,140 @@
+import Vue from 'vue'
+import { Message, MessageBox } from 'element-ui'
+import 'element-ui/lib/theme-chalk/message.css'
+import 'element-ui/lib/theme-chalk/message-box.css'
+import './message-box.less'
+
+function createElement () {
+  let instance = createElement._vueInstance_
+  if (!instance) {
+    instance = createElement._vueInstance_ = new Vue({
+      functional: true,
+      el: document.createElement('div')
+    })
+  }
+  return instance.$createElement.apply(instance, arguments)
+}
+
+function buttonHandler () {
+  const deferred = {}
+  let promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve
+    deferred.reject = reject
+  })
+  let callback
+  const thenCache = {
+    onFulfill: null,
+    onReject: null
+  }
+  const then = (onFulfill, onReject) => {
+    thenCache.onFulfill = onFulfill
+    thenCache.onReject = onReject
+    callback = promise.then(onFulfill, onReject)
+  }
+  const resetThen = () => {
+    promise = new Promise(function (resolve, reject) {
+      deferred.resolve = resolve
+      deferred.reject = reject
+    })
+    callback = promise.then(thenCache.onFulfill, thenCache.onReject)
+  }
+  return {
+    handler (action, instance, done) {
+      if (instance.confirmButtonLoading) {
+        return
+      }
+      if (action === 'confirm') {
+        deferred.resolve('ok')
+        if (callback) {
+          instance.confirmButtonLoading = true
+          callback.then(() => {
+            instance.confirmButtonLoading = false
+            resetThen()
+            done()
+          }, () => {
+            instance.confirmButtonLoading = false
+            resetThen()
+          })
+        } else {
+          instance.confirmButtonLoading = false
+          done()
+        }
+      } else {
+        deferred.reject(action)
+        done()
+      }
+    },
+    promise: {
+      then: then
+    }
+  }
+}
+
+Vue.component('UiMessageContent', {
+  props: {
+    content: String
+  },
+  render () {
+    if (this.content) {
+      return createElement('div', {
+        class: 'ui-message-box_content',
+        domProps: {
+          innerHTML: this.content
+        }
+      })
+    } else {
+      return null
+    }
+  }
+})
+
+const UiMessageBox = {
+  message: Message,
+  alert (title, content, btnText = '我知道了') {
+    const p = buttonHandler()
+    MessageBox({
+      title: title,
+      customClass: 'ui-message-box' + (!content ? ' ui-message-box_no-content' : ''),
+      showConfirmButton: true,
+      showCancelButton: false,
+      confirmButtonText: btnText,
+      confirmButtonClass: 'ui-message-box_btn-iknow',
+      closeOnClickModal: false,
+      message: createElement('UiMessageContent', {
+        props: {
+          content: content
+        }
+      }),
+      beforeClose: p.handler
+    })
+    return p.promise
+  },
+  confirm (content, title = '确定', btnText, cancelBtnText = '取消', showClose = true) {
+    const p = buttonHandler()
+    let opts = {
+      title: title,
+      // type: 'error',
+      customClass: 'ui-message-box' + (!content ? ' ui-message-box_no-content' : ''),
+      showConfirmButton: true,
+      showCancelButton: true,
+      showClose,
+      cancelButtonText: cancelBtnText,
+      closeOnClickModal: false,
+      message: createElement('UiMessageContent', {
+        props: {
+          content: content
+        }
+      }),
+      beforeClose: p.handler
+    }
+    if (typeof btnText === 'string') {
+      opts.confirmButtonText = btnText
+    } else {
+      opts = Object.assign({}, opts, btnText)
+    }
+    MessageBox(opts)
+    return p.promise
+  }
+}
+
+export default UiMessageBox

package/components/message-box/message-box.less

@@ -0,0 +1,5 @@
+body {
+    .el-button{
+        font-size: 14px;
+    }
+}

package/components/pagination/index.js

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

package/components/pagination/pagination.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="ui-grid-pagination">
+    <template v-if="showPrevOrNext">
+      <el-pagination
+        class="ui-pagination"
+        layout="sizes"
+        :page-sizes="pageSizeList"
+        :current-page="pageIndex"
+        :total="total"
+        @current-change="handlePageIndexChange"
+        @size-change="handlePageSizeChange"
+      ></el-pagination>
+      <ui-button type="link" :disabled="pageIndex <= 1" @click="handlePrev" :loading="UiGrid && UiGrid.tableLoading">上一页</ui-button>
+      <ui-button type="link" :disabled="UiGrid && UiGrid.tableData.length < UiGrid.tablePageSize" @click="handleNext" :loading="UiGrid.tableLoading">下一页</ui-button>
+    </template>
+    <template v-else>
+      <el-pagination
+        class="ui-pagination"
+        :layout="allowSelectPageSize ? 'total, sizes, ->, prev, pager, next, jumper' : 'total, ->, prev, pager, next, jumper'"
+        :page-sizes="pageSizeList"
+        :page-size="20"
+        :current-page="pageIndex"
+        :total="total"
+        @current-change="handlePageIndexChange"
+        @size-change="handlePageSizeChange"
+      ></el-pagination>
+    </template>
+  </div>
+</template>
+<script>
+import Pagination from 'element-ui/lib/pagination'
+import 'element-ui/lib/theme-chalk/pagination.css'
+
+export default {
+  name: 'UiPagination',
+  components: {
+    ElPagination: Pagination
+  },
+  inject: {
+    UiGrid: {
+      default: null
+    }
+  },
+  props: {
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    pageIndex: {
+      type: Number,
+      default: 0
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    showPrevOrNext: {
+      type: Boolean,
+      default: false
+    },
+    allowSelectPageSize: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      innerPageSize: this.pageSize
+    }
+  },
+  computed: {
+    pageSizeList () {
+      return [20, 50, 100, 200]
+    }
+  },
+  methods: {
+    // 每页显示行数发生变化触发
+    handlePageSizeChange (value) {
+      if (this.innerPageSize === value) {
+        return
+      }
+      this.innerPageSize = value
+      const pageIndex = Math.max(Math.min(
+        Math.ceil(this.total / value),
+        this.pageIndex
+      ), 1)
+      this.$emit('page-change', {
+        pageIndex,
+        pageSize: value
+      })
+    },
+    // 分页改变时触发
+    handlePageIndexChange (value) {
+      const pageIndex = value
+      if (this.pageIndex === pageIndex) {
+        return
+      }
+      this.$emit('page-change', {
+        pageIndex,
+        pageSize: this.innerPageSize
+      })
+    },
+    // 上一页
+    handlePrev() {
+      const xTable = this.UiGrid.$refs.table.$refs.table
+      if (this.pageIndex <= 1) {
+        this.$message.error('当前已经是最一页')
+        return
+      }
+      const pageIndex = this.pageIndex - 1
+      this.$emit('page-change', {
+        pageIndex,
+        pageSize: this.pageSize
+      })
+      xTable.scrollTo(0, 0)
+    },
+    // 下一页
+    handleNext() {
+      const xTable = this.UiGrid.$refs.table.$refs.table
+      const { tableData, tablePageSize } = this.UiGrid
+      if (tableData.length < tablePageSize) {
+        this.$message.error('当前已经是最后一页了')
+        return
+      }
+      const pageIndex = this.pageIndex + 1
+      this.$emit('page-change', {
+        pageIndex,
+        pageSize: this.pageSize
+      })
+      xTable.scrollTo(0, 0)
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-pagination {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.ui-pagination.el-pagination {
+  flex-grow: 1;
+  .btn-prev,
+  .btn-next,
+  .number,
+  .more {
+    min-width: 14px;
+    height: 28px;
+    line-height: 28px;
+    border: 1px solid #d9d9d9;
+    box-sizing: content-box;
+    padding: 0 8px;
+    border-radius: 3px;
+    margin-left: 6px;
+    font-weight: normal;
+    &:hover {
+      border-color: #172b4d;
+    }
+    &.active {
+      border-color: #172b4d;
+      color: #fff;
+    }
+    &[disabled] {
+      border-color: #d9d9d9;
+      color: #999;
+    }
+  }
+
+  .btn-prev,
+  .btn-next{
+    border-color: transparent!important;
+  }
+  .more {
+    color: #aaa;
+    font-size: 16px;
+    margin-left: 6px;
+    &:hover {
+      color: #172b4d;
+    }
+  }
+  .el-pagination__total{
+  }
+  .el-pagination__sizes,
+  .el-pagination__jump {
+    .el-input__inner {
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

package/components/panel/index.js

@@ -0,0 +1,7 @@
+import Panel from './panel'
+
+Panel.install = Vue => {
+  Vue.component(Panel.name, Panel)
+}
+
+export default Panel

package/components/panel/panel.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="ui-panel">
+    <div class="ui-panel__head">
+      <strong class="ui-panel__title">{{ title }}</strong>
+      <div class="ui-panel__head-right">
+        <slot name="head-right"></slot>
+      </div>
+    </div>
+    <div class="ui-panel__body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiPanel',
+  props: {
+    title: {
+      type: String
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-panel {
+  border: 1px solid #DFE1E6;
+  border-radius: 4px;
+}
+.ui-panel__title{
+  font-size: 16px;
+  font-weight: bold;
+}
+.ui-panel__head{
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #DFE1E6;
+}
+.ui-panel__body {
+  padding: 12px;
+}
+</style>

package/components/popover/index.js

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

package/components/popover/popover.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-popover
+    ref="popover"
+    v-model="innerVisible"
+    :disabled="disabled"
+    :placement="placement"
+    :width="width"
+    :trigger="trigger"
+    :popper-class="popperClass"
+    :visible-arrow="visibleArrow"
+    @show="handleShow"
+    @hide="handleHide"
+    @after-enter="handleAfterShow"
+    @after-leave="handleAfterHide"
+  >
+    <slot></slot>
+    <template slot="reference">
+      <slot name="reference"></slot>
+    </template>
+  </el-popover>
+</template>
+<script>
+import Popover from 'element-ui/lib/popover'
+import 'element-ui/lib/theme-chalk/popover.css'
+
+export default {
+  name: 'UiPopover',
+  components: {
+    ElPopover: Popover
+  },
+  model: {
+    prop: 'visible',
+    event: 'input'
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    visibleArrow: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: 'auto'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    effect: {
+      type: String,
+      default: 'light' // light | dark
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    popoverClass: {
+      type: String
+    }
+  },
+  computed: {
+    popperClass () {
+      const cls = ['ui-popover']
+      if (this.effect) {
+        cls.push('ui-popper--' + this.effect)
+      }
+      if (this.popoverClass) {
+        cls.push(this.popoverClass)
+      }
+      return cls.join(' ')
+    },
+    innerVisible: {
+      get () {
+        return this.visible
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    show () {
+      this.$refs.popover && this.$refs.popover.doShow()
+      this.updatePopper()
+    },
+    hide () {
+      this.$refs.popover && this.$refs.popover.doClose()
+    },
+    updatePopper () {
+      this.$refs.popover && this.$refs.popover.updatePopper()
+    },
+    handleShow () {
+      this.$emit('show')
+    },
+    handleHide () {
+      this.$emit('hide')
+    },
+    handleAfterShow () {
+      this.$emit('after-show')
+    },
+    handleAfterHide () {
+      this.$emit('after-hide')
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-popover.el-popover{
+  padding: 0;
+  min-width: auto;
+  font-size: 14px;
+  &.ui-popper--drak{
+    background-color: #18192f;
+    color: #ddd;
+    &[x-placement=bottom] {
+      .popper__arrow{
+        &:after{
+          display: none;
+        }
+        border-bottom-color: #18192f;
+      }
+    }
+    &[x-placement=top] {
+      .popper__arrow{
+        &:after{
+          display: none;
+        }
+        border-top-color: #18192f;
+      }
+    }
+  }
+}
+</style>

package/components/popup-select/index.js

@@ -0,0 +1,7 @@
+import PopupSelect from './popup-select'
+
+PopupSelect.install = Vue => {
+  Vue.component(PopupSelect.name, PopupSelect)
+}
+
+export default PopupSelect

package/components/popup-select/popup-select.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="ui-popup-select">
+    <div class="ui-popup-select__handle">
+      <ui-select
+        ref="select"
+        v-model="innerValue"
+        :placeholder="placeholder"
+        :query-method="queryMethod"
+        :text-field="textField"
+        :page-size="pageSize"
+        :value-field="valueField"
+        :filterable="filterable"
+        :lazy="lazyLoad"
+        :clearable="clearable"
+        :temp-items="tempItems"
+        @change="handleChange"
+        @visible-change="handleVisibleChange"
+      >
+        <template slot="item" slot-scope="scope">
+          <slot name="item" v-bind="scope"></slot>
+        </template>
+      </ui-select>
+    </div>
+    <div class="ui-popup-select__dialog">
+      <ui-dialog
+        :title="popupTitle"
+        :size="popupSize"
+        v-model="showPopupDialog"
+      >
+        <slot name="popup"></slot>
+      </ui-dialog>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiPopupSelect',
+  props: {
+    value: {
+      type: String
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    queryMethod: {
+      type: Function
+    },
+    placeholder: {
+      type: String
+    },
+    pageSize: {
+      type: Number
+    },
+    textField: {
+      type: String,
+      default: 'text'
+    },
+    valueField: {
+      type: String,
+      default: 'value'
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: true
+    },
+    popupTitle: {
+      type: String,
+      default: '标题'
+    },
+    popupSize: {
+      type: String,
+      default: 'large'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    tempItems: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      showPopupDialog: false
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  },
+  methods: {
+    handleChange (evt) {
+      this.$emit('change', evt)
+    },
+    handleVisibleChange () {
+      // window.clearTimeout(this._timer)
+      // this._timer = window.setTimeout(() => {
+      //   // 通讯台选择设备不知道为什么会错位，先临时这么处理一下
+      //   this.$refs.select.doLayout()
+      // }, 50)
+    }
+  },
+  beforeDestroy () {
+    // window.clearTimeout(this._timer)
+  }
+}
+</script>

package/components/radio/index.js

@@ -0,0 +1,7 @@
+import Radio from './radio'
+
+Radio.install = (Vue) => {
+  Vue.component(Radio.name, Radio)
+}
+
+export default Radio