Merge pull request '增加组件splitPane' (#5) from zjl into develop

Reviewed-on: #5

index.js

@@ -4,6 +4,7 @@ import Pagination from './src/components/Pagination/index.vue'
 import BaseTable from './src/components/BaseTable/index.vue'
 import InputArea from './src/components/BaseTable/subcomponents/InputArea.vue'
 import MethodBtn from './src/components/BaseTable/subcomponents/MethodBtn.vue'
+import SplitPane from './src/components/SplitPane/index.vue'
 
 let ModuleObj = {
   SearchBar,
@@ -11,7 +12,8 @@ let ModuleObj = {
   Pagination,
   BaseTable,
   InputArea,
-  MethodBtn
+  MethodBtn,
+  SplitPane
 }
 let MyModule = {}
 MyModule.install = (Vue) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-brick-zj",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "private": false,
   "description": "组件封装",
   "main": "index.js"

src/components/BaseDialog/index.vue

@@ -66,34 +66,32 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.baseDialog {
-  .el-dialog__header {
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.85);
-    font-weight: 500;
-    padding: 13px 24px;
-    border-bottom: 1px solid #e9e9e9;
-    .titleStyle::before{
-      content: '';
-      display: inline-block;
-      width: 4px;
-      height: 16px;
-      background-color: #0B58FF;
-      border-radius: 1px;
-      margin-right: 8px;
-      position: relative;
-      top: 2px;
-    }
-  }
-  .el-dialog__body {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-  .btnTextStyle {
-    letter-spacing:6px;
-    padding: 9px 10px 9px 16px;
-    font-size: 14px;
-  }
+<style>
+.baseDialog .el-dialog__header {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  padding: 13px 24px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.baseDialog .el-dialog__header .titleStyle::before{
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8px;
+  position: relative;
+  top: 2px;
+}
+.baseDialog .el-dialog__body {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.baseDialog .btnTextStyle {
+  letter-spacing:6px;
+  padding: 9px 10px 9px 16px;
+  font-size: 14px;
 }
 </style>

src/components/BaseTable/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="baseTable">
     <el-table
+      :ref="id"
       :data="renderData"
       v-bind="$attrs"
+      :border="cancelBorder ? false : true"
       @current-change="currentChange"
       @selection-change="handleSelectionChange"
       style="width: 100%"
@@ -23,7 +25,7 @@
         prop="_pageIndex"
         :width="pageWidth"
         align="center"
-        fixed
+        :fixed="cancelPageFixed ? false : true"
       >
         <template slot="header">
           <el-popover placement="bottom-start" width="300" trigger="click">
@@ -115,6 +117,14 @@ export default {
     }
   },
   props: {
+    cancelBorder: {
+      type: Boolean,
+      default: false
+    },
+    cancelPageFixed: {
+      type: Boolean,
+      default: false
+    },
     tableData: {
       type: Array,
       required: true,
@@ -128,6 +138,11 @@ export default {
         return []
       }
     },
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    },
     page: {
       type: Number,
       required: false,
@@ -189,49 +204,54 @@ export default {
     },
     emitButtonClick() {
       this.$emit('emitButtonClick')
+    },
+    setCurrent(name, index) {
+      let _this = this
+      let obj = _this.$refs[name].data[index]
+      _this.$refs[name].setCurrentRow(obj)
+    },
+    doLayout(name) {
+      this.$refs[name].doLayout()
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-.baseTable {
-  .show-col-btn {
-    margin-right: 5px;
-    line-height: inherit;
-    cursor: pointer;
-  }
-  .el-icon-refresh {
-    cursor: pointer;
-  }
+<style scoped>
+.baseTable .show-col-btn {
+  margin-right: 5px;
+  line-height: inherit;
+  cursor: pointer;
+}
+.baseTable .el-icon-refresh {
+  cursor: pointer;
 }
 </style>
-<style lang="scss">
-.baseTable {
-  .el-table__body tr.current-row>td.el-table__cell {
-      background-color: #EAF1FC;
-  }
-  .el-table .el-table__cell {
-    padding: 0;
-    height: 35px;
-  }
-  .addButton {
-    width: 100%;
-    height: 35px;
-    border-top: none;
-    color: #0b58ff;
-    border-color: #ebeef5;
-    border-radius: 0;
-  }
-  .addButton:hover {
-    color: #0b58ff;
-    border-color: #ebeef5;
-    background-color: #fff;
-  }
-  .addButton:focus {
-    border-color: #ebeef5;
-    background-color: #fff;
-  }
+<style>
+.baseTable .el-table__body tr.current-row>td.el-table__cell {
+    background-color: #EAF1FC;
 }
+.baseTable .el-table .el-table__cell {
+  padding: 0;
+  height: 35px;
+}
+.baseTable .addButton {
+  width: 100%;
+  height: 35px;
+  border-top: none;
+  color: #0b58ff;
+  border-color: #ebeef5;
+  border-radius: 0;
+}
+.baseTable .addButton:hover {
+  color: #0b58ff;
+  border-color: #ebeef5;
+  background-color: #fff;
+}
+.baseTable .addButton:focus {
+  border-color: #ebeef5;
+  background-color: #fff;
+}
+
 .el-tooltip__popper.is-dark {
   background: rgba(0, 0, 0, 0.6) !important;
 }

src/components/BaseTable/subcomponents/InputArea.vue

@@ -28,7 +28,7 @@ export default {
   }
 }
 </script>
-<style lang="css">
+<style>
 .tableInner .el-input__inner {
   border: none;
   padding: 0;

src/components/Pagination/index.vue

@@ -77,28 +77,26 @@ export default {
   text-align: right;
 }
 </style>
-<style lang='scss'>
-.pagination-container {
-  .el-pagination {
-    position: relative;
-  }
+<style>
+.pagination-container .el-pagination {
+  position: relative;
+}
 
-  .el-pagination__jump {
-    margin-left: 125px;
-  }
+.pagination-container .el-pagination__jump {
+  margin-left: 125px;
+}
 
-  .el-pagination__sizes {
-    position: absolute;
-    right: 100px;
-  }
+.pagination-container .el-pagination__sizes {
+  position: absolute;
+  right: 100px;
+}
 
-  .el-pager li.active {
-    background-color: #0b58ff;
-    color: #fff;
-  }
+.pagination-container .el-pager li.active {
+  background-color: #0b58ff;
+  color: #fff;
+}
 
-  .el-input--mini .el-input__inner {
-    height: 22px;
-  }
+.pagination-container .el-input--mini .el-input__inner {
+  height: 22px;
 }
 </style>

src/components/SearchBar/SearchBar.vue

@@ -101,6 +101,7 @@
           @click="headBtnClick(item.name)"
           >{{ item.btnName }}</el-button
         >
+        <span v-if="item.type === 'separate'" class="separateStyle"></span>
         <!-- 可用于显示其他按钮 -->
       </el-form-item>
     </template>
@@ -231,28 +232,37 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.searchBar {
-  .blue-block {
-    float: left;
-    display: inline-block;
-    width: 4px;
-    height: 16px;
-    background-color: #0B58FF;
-    border-radius: 1px;
-    margin-right: 8px;
-    margin-top: 12px;
-  }
-  .el-form-item {
-    margin-bottom: 10px;
-  }
-  .el-date-editor .el-range__icon {
-    font-size: 16px;
-    color:#0B58FF;
-  }
-  .el-input__prefix .el-icon-date {
-    font-size: 16px;
-    color:#0B58FF;
-  }
+<style>
+.searchBar .blue-block {
+  display: inline-block;
+  float: left;
+  width: 4px;
+  height: 16px;
+  background-color: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8px;
+  margin-top: 12px;
+}
+.searchBar .el-form-item {
+  margin-bottom: 10px;
+}
+.searchBar .el-date-editor .el-range__icon {
+  font-size: 16px;
+  color:#0B58FF;
+}
+.searchBar .el-input__prefix .el-icon-date {
+  font-size: 16px;
+  color:#0B58FF;
+}
+.searchBar .el-input__prefix .el-icon-time {
+  font-size: 16px;
+  color:#0B58FF;
+}
+.searchBar .separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E8E8E8;
+  vertical-align: middle;
 }
 </style>

src/components/SplitPane/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div ref="outerWrapper" :class="wrapperClasses">
+    <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-pane 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-pane mode="horizontal" />
+        </slot>
+      </div>
+      <div
+        :style="{ top: `${offset}%` }"
+        class="bottom-pane"
+        :class="paneClasses"
+      >
+        <slot name="bottom" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { oneOf, on, off } from './utils'
+import TriggerPane from './triggerPane.vue'
+export default {
+  name: 'SplitPane',
+  components: {
+    TriggerPane
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator(value) {
+        return oneOf(value, ['horizontal', 'vertical'])
+      },
+      default: 'horizontal'
+    },
+    min: {
+      type: [Number, String],
+      default: '40px'
+    },
+    max: {
+      type: [Number, String],
+      default: '40px'
+    }
+  },
+  /**
+   * Events
+   * @on-move-start
+   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+   * @on-move-end
+   */
+  data() {
+    return {
+      prefix: 'zj-split',
+      offset: 0,
+      oldOffset: 0,
+      isMoving: false,
+      computedMin: 0,
+      computedMax: 0,
+      currentValue: 0.5
+    }
+  },
+  computed: {
+    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'
+    }
+  },
+  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
+      off(document, 'mousemove', this.handleMove)
+      off(document, 'mouseup', this.handleUp)
+      this.$emit('on-move-end')
+    },
+    handleMousedown(e) {
+      this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+      this.oldOffset = this.value
+      this.isMoving = true
+      on(document, 'mousemove', this.handleMove)
+      on(document, 'mouseup', this.handleUp)
+      this.$emit('on-move-start')
+    },
+    computeOffset() {
+      this.$nextTick(() => {
+        this.computedMin = this.getComputedThresholdValue('min')
+        this.computedMax = this.getComputedThresholdValue('max')
+        this.offset =
+          ((this.valueIsPx
+            ? this.px2percent(
+                this.value,
+                this.$refs.outerWrapper[this.offsetSize]
+              )
+            : this.value) *
+            10000) /
+          100
+      })
+    }
+  },
+  watch: {
+    value(val) {
+      if (val !== this.currentValue) {
+        this.currentValue = val
+        this.computeOffset()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.computeOffset()
+    })
+
+    on(window, 'resize', this.computeOffset)
+  },
+  beforeDestroy() {
+    off(window, 'resize', this.computeOffset)
+  }
+}
+</script>
+<style>
+.zj-split-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.zj-split-pane {
+  position: absolute;
+}
+.zj-split-pane.left-pane,
+.zj-split-pane.right-pane {
+  top: 0;
+  bottom: 0;
+}
+.zj-split-pane.left-pane {
+  left: 0;
+}
+.zj-split-pane.right-pane {
+  right: 0;
+}
+.zj-split-pane.top-pane,
+.zj-split-pane.bottom-pane {
+  left: 0;
+  right: 0;
+}
+.zj-split-pane.top-pane {
+  top: 0;
+}
+.zj-split-pane.bottom-pane {
+  bottom: 0;
+}
+.zj-split-pane-moving {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* 开始 */
+/* .zj-split-trigger {
+  border: 1px solid #dcdee2;
+} */
+.zj-split-trigger-con {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+.zj-split-trigger-bar-con {
+  position: absolute;
+  overflow: hidden;
+}
+.zj-split-trigger-bar-con.vertical {
+  top: 50%;
+  height: 32px;
+  transform: translate(0, -50%);
+}
+.zj-split-trigger-bar-con.horizontal {
+  left: 50%;
+  height: 16px;
+  text-align: center;
+  width: 32px;
+  transform: translate(-50%, 0);
+}
+.zj-split-trigger-vertical {
+  width: 16px;
+  height: 100%;
+  background-color: #f2f4f9;
+  border-top: none;
+  border-bottom: none;
+  cursor: col-resize;
+}
+.zj-split-trigger-vertical .zj-split-trigger-bar {
+  width: 16px;
+}
+.zj-split-trigger-horizontal {
+  height: 16px;
+  width: 100%;
+  background-color: #f2f4f9;
+  border-left: none;
+  border-right: none;
+  cursor: row-resize;
+}
+.zj-split-trigger-horizontal .zj-split-trigger-bar {
+  width: 16px;
+  transform: rotate(90deg);
+  position: relative;
+  bottom: 8px;
+}
+.zj-split-horizontal > .zj-split-trigger-con {
+  top: 50%;
+  height: 100%;
+  width: 0;
+}
+.zj-split-vertical > .zj-split-trigger-con {
+  left: 50%;
+  height: 0;
+  width: 100%;
+}
+.zj-split .no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/components/SplitPane/triggerPane.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="classes">
+    <div :class="barConClasses">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAAAXNSR0IArs4c6QAAAjNJREFUaEPtWEFLG1EQfs9Eo4kUjJYieMklFKL0IlZX3JAiTcgmOaSJB09e+yd67rmnHorHHowJqMmaihddWS3kGigEqojQENqUEtKs2fBe2dSXowyPhWXh5TYw8+183+w3WQYjh3/Y4ecjcANF9WqBEHPNatiDUSerbFRZ86ra8HVJM8PiucDCUSwWMiDkwA0UyloeIbJngWKEGrlUNMwecHB69axv3DdZ7MdT84qyMoofa8Q9DZQqWoJQ8sFiQzG6ySvR14xZ6fTrLDGMSxb7AgEpHVv+aesIIGA8OeAR8IBDakQDYAWKZW2TIPr+v6z0Np+KZpnE1aoe7AwGJyz2TPri2c2Xv2wdgdgDh1/OQqaJXg1lHcN/3iTlfSaxrutTP9rmNovng+OfJUnq2ToCCBhPDvgl5AGH1LinAesfb2CYSxYrgsjffCqqM4b1en3i23VbZvHzUPA8Eon0bVVA2LB4fJEhhHx6+CD5nlPkVSaxqp4/7VJUH21Cr2cxG19v2ToCCBhPjntcwMMOUuMeBYqVM5lS/O6B1V0uJe8whuWyNmMgWmDxtNe7lUhIbVsVEHugVNHCFKP08HsIod+55MYuk/ioVvP3W723oxF4nnyMx190bR0BBIwnxz0u4GEHqREKgBUQ9wHHN6G4D0A8zZMDdgEPOKTGPQ2I+4Dje0DcByCW4slxjw3FfcBxG4r7AI/FIDXusSGEDU8OWAFxH3B8D4j7AM8bDqkBuwACxpPzDwGD3FDyRWhbAAAAAElFTkSuQmCC"
+        alt=""
+        :class="`${prefix}-bar`"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'triggerPane',
+  props: {
+    mode: String
+  },
+  data() {
+    return {
+      prefix: 'zj-split-trigger',
+      initOffset: 0
+    }
+  },
+  computed: {
+    isVertical() {
+      return this.mode === 'vertical'
+    },
+    classes() {
+      return [
+        this.prefix,
+        this.isVertical
+          ? `${this.prefix}-vertical`
+          : `${this.prefix}-horizontal`
+      ]
+    },
+    barConClasses() {
+      return [
+        `${this.prefix}-bar-con`,
+        this.isVertical ? 'vertical' : 'horizontal'
+      ]
+    }
+  }
+}
+</script>

src/components/SplitPane/utils.js

@@ -0,0 +1,45 @@
+import Vue from 'vue'
+const isServer = Vue.prototype.$isServer
+// 判断参数是否是其中之一
+export function oneOf(value, validList) {
+  for (let i = 0; i < validList.length; i++) {
+    if (value === validList[i]) {
+      return true
+    }
+  }
+  return false
+}
+
+/* istanbul ignore next */
+export const on = (function () {
+  if (!isServer && document.addEventListener) {
+    return function (element, event, handler, useCapture = false) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, useCapture)
+      }
+    }
+  } else {
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler)
+      }
+    }
+  }
+})()
+
+/* istanbul ignore next */
+export const off = (function () {
+  if (!isServer && document.removeEventListener) {
+    return function (element, event, handler, useCapture = false) {
+      if (element && event) {
+        element.removeEventListener(event, handler, useCapture)
+      }
+    }
+  } else {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler)
+      }
+    }
+  }
+})()