@aochuang/common 1.0.0 → 1.0.126

package/components/message/index.js

@@ -0,0 +1,19 @@
+import {
+  warn,
+  success,
+  error
+} from './message'
+import './message.less'
+
+export const install = (Vue) => {
+  Vue.prototype.$warn = warn
+  Vue.prototype.$success = success
+  Vue.prototype.$error = error
+}
+
+export default {
+  install,
+  warn,
+  success,
+  error
+}

package/components/message/message.js

@@ -0,0 +1,31 @@
+import Message from 'element-ui/lib/message'
+import 'element-ui/lib/theme-chalk/icon.css'
+import 'element-ui/lib/theme-chalk/message.css'
+
+const warn = (message, onClose) => {
+  return Message({
+    message,
+    type: 'warning',
+    onClose
+  })
+}
+const success = (message, onClose) => {
+  return Message({
+    message,
+    type: 'success',
+    onClose
+  })
+}
+const error = (message, onClose) => {
+  return Message({
+    message,
+    type: 'error',
+    onClose
+  })
+}
+
+export {
+  warn,
+  error,
+  success
+}

package/components/message/message.less

@@ -0,0 +1,6 @@
+body {
+    .el-message .el-message__content{
+        white-space: pre-wrap;
+        line-height: 1.7em;
+    }
+}

package/components/message-box/index.js

@@ -0,0 +1,14 @@
+import MessageBox from './message-box'
+
+MessageBox.install = (Vue) => {
+  Vue.prototype.$message = MessageBox.message
+  Vue.prototype.$alert = MessageBox.alert
+  Vue.prototype.$confirm = MessageBox.confirm
+  // Vue.prototype.$confirmDel = MessageBox.confirmDel
+}
+
+MessageBox.message = MessageBox.message
+MessageBox.alert = MessageBox.alert
+MessageBox.confirm = MessageBox.confirm
+
+export default MessageBox

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,197 @@
+<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
+    },
+    pageSizeList: {
+      type: Array,
+      default: () => [20, 50, 100, 200]
+    }
+  },
+  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 {
+      color: #172b4d;
+      border-color: #172b4d;
+    }
+    &.active {
+      background-color: #172b4d;
+      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__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,163 @@
+<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"
+  >
+    <component v-if="contentComponent" :is="contentComponent" :visible="innerVisible"></component>
+    <slot v-else></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
+    }
+  },
+  data () {
+    return {
+      contentComponent: null
+    }
+  },
+  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()
+    },
+    setReferenceElm ($el) {
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        if (this.$refs.popover.popperJS) {
+          this.$refs.popover.popperJS._reference = $el
+        } else {
+          this.$refs.popover.referenceElm = $el
+        }
+        this.$refs.popover.updatePopper()
+      }, 30)
+    },
+    setContentComponent (component) {
+      this.contentComponent = component
+    },
+    handleShow () {
+      this.$emit('show')
+    },
+    handleHide () {
+      this.$emit('hide')
+    },
+    handleAfterShow () {
+      this.$emit('after-show')
+    },
+    handleAfterHide () {
+      this.$emit('after-hide')
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
+  }
+}
+</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