@aochuang/common 1.0.0 → 1.0.126

package/components/grid/grid-table.vue

@@ -0,0 +1,549 @@
+<template>
+  <vxe-table
+    ref="table"
+    class="ui-grid-table"
+    :class="{ 'is-border': border, 'is-fixed-row-height': isFixedRowHeight }"
+    round
+    show-header-overflow="tooltip"
+    min-height="24px"
+    :show-overflow="showOverflow"
+    :row-id="rowId"
+    :height="tableHeight"
+    :max-height="maxHeight"
+    :row-config="rowConfig"
+    :row-class-name="rowClassName"
+    :tree-config="treeConfig"
+    :column-config="columnConfig"
+    :radio-config="radioConfig"
+    :checkbox-config="checkboxConfig"
+    :sort-config="sortConfig"
+    :seq-config="seqConfig"
+    :show-header="showHeader"
+    :data="data"
+    :border="border ? 'full' : 'inner'"
+    :scroll-y="scrollYConfig"
+    :scroll-x="scrollXConfig"
+    :show-footer="showSummary"
+    :footer-method="handleFooterMethod"
+    :footer-row-class-name="footerRowClassName"
+    @checkbox-change="handleSelectionChange"
+    @checkbox-all="handleSelectionAllChange"
+    @radio-change="handleRadioChange"
+    @cell-mouseenter="handleCellMouseEnter"
+    @cell-mouseleave="handleCellMouseLeave"
+    @sort-change="handleSortChange"
+    @resizable-change="handleColumnResizeableChange"
+  >
+    <template v-if="selectable && showIndex">
+      <vxe-column
+        v-if="multiple"
+        type="checkbox"
+        :show-overflow="false"
+        width="60px"
+        fixed="left"
+        align="center"
+      >
+        <template #header="{ checked, indeterminate }">
+          <template v-if="selectableAll">
+            <ui-tooltip content="选中当前页">
+              <vex-checkbox
+                :value="checked"
+                :indeterminate="indeterminate"
+                :style="{ width: '18px' }"
+                @input="handleCheckAllChange"
+                @click.native.stop
+              >
+              </vex-checkbox>
+            </ui-tooltip>
+          </template>
+        </template>
+      </vxe-column>
+      <vxe-column v-else type="radio" width="54px" fixed="left" align="center">
+        <template slot="radio" slot-scope="scope">
+          <vex-radio
+            v-if="
+              hoverRowId === scope.rowid ||
+                handleRowRadioValue(scope.row, scope.column)
+            "
+            :value="handleRowRadioValue(scope.row, scope.column)"
+            :label="true"
+            :style="{ width: '18px' }"
+            @input="handleRowRadioInput(scope.row, scope.column)"
+          >
+          </vex-radio>
+          <span v-else :style="{'display': 'inline-block'}">
+            {{
+              showPagination
+                ? (pageIndex - 1) * pageSize + scope.$rowIndex + 1
+                : scope.$rowIndex + 1
+            }}
+          </span>
+        </template>
+      </vxe-column>
+    </template>
+    <template v-else>
+      <template v-if="selectable">
+        <vxe-column
+          v-if="multiple"
+          type="checkbox"
+          width="60px"
+          fixed="left"
+          align="center"
+        >
+        </vxe-column>
+        <vxe-column
+          v-else
+          type="radio"
+          width="60px"
+          fixed="left"
+          align="center"
+        ></vxe-column>
+      </template>
+      <vxe-column
+        v-if="showIndex"
+        type="seq"
+        width="60px"
+        fixed="left"
+        align="center"
+      >
+      </vxe-column>
+    </template>
+    <slot></slot>
+  </vxe-table>
+</template>
+<script>
+import { Table, Column, Checkbox, Radio } from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+export default {
+  name: 'UiGridTable',
+  components: {
+    VxeTable: Table,
+    VxeColumn: Column,
+    VexCheckbox: Checkbox,
+    VexRadio: Radio
+  },
+  inject: ['UiGrid'],
+  props: {
+    data: {
+      type: Array
+    },
+    idField: {
+      type: String
+    },
+    parentField: {
+      type: String
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    selectableAll: {
+      type: Boolean,
+      default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 行是否允许选择方法
+    */
+    rowCheckMethod: {
+      type: Function
+    },
+    rowVisibleMethod: {
+      type: Function
+    },
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    showPagination: {
+      type: Boolean,
+      default: false
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    pageIndex: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    height: {
+      type: String
+    },
+    maxHeight: {
+      type: String
+    },
+    rowClassName: {
+      type: [String, Function]
+    },
+    rowHeight: {
+      type: String
+    },
+    defaultSort: {
+      type: [Object, Array]
+    },
+    remoteSort: {
+      type: Boolean,
+      default: true
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    rowId: {
+      type: String,
+      default: 'id'
+    }
+  },
+  data() {
+    return {
+      hoverRowId: null
+    }
+  },
+  computed: {
+    isFixedRowHeight () {
+      return !!this.rowHeight && this.rowHeight !== 'auto'
+    },
+    tableHeight() {
+      let height
+      if (this.maxHeight) {
+        height = ''
+      } else {
+        if (this.height && this.height !== 'auto') {
+          height = '100%' // vxetable如果设置auto表示自动根据父级元素高度计算
+        }
+      }
+      return height
+    },
+    sortConfig() {
+      return {
+        trigger: 'cell',
+        defaultSort: this.defaultSort,
+        remote: this.remoteSort
+      }
+    },
+    seqConfig() {
+      return {
+        seqMethod: ({ seq }) => {
+          return this.showPagination
+            ? (this.pageIndex - 1) * this.pageSize + seq
+            : seq
+        }
+      }
+    },
+    scrollYConfig() {
+      if (this.rowHeight && this.rowHeight !== 'auto') {
+        return {
+          gt: 50,
+          enabled: true
+        }
+      } else {
+        return {
+          // gt: 20
+          enabled: false
+        }
+      }
+    },
+    scrollXConfig() {
+      return {
+        // gt: 10
+      }
+    },
+    rowConfig() {
+      return {
+        keyField: this.idField,
+        isHover: true,
+        height: this.rowHeight && this.rowHeight !== 'auto' ? parseInt(this.rowHeight) : null,
+        isCurrent: this.selectable && this.multiple === false
+      }
+    },
+    columnConfig() {
+      return {
+        resizable: true
+      }
+    },
+    treeConfig () {
+      if (!this.parentField) {
+        return
+      }
+      return {
+        expandAll: true,
+        transform: false,
+        rowField: this.idField,
+        parentField: this.parentField
+      }
+    },
+    radioConfig() {
+      return {
+        trigger: 'row',
+        visibleMethod: this.rowVisibleMethod,
+        checkMethod: this.rowCheckMethod
+      }
+    },
+    showOverflow () {
+      if (!this.rowHeight || this.rowHeight === 'auto') {
+        return
+      }
+      return 'ellipsis'
+    },
+    checkboxConfig() {
+      return {
+        trigger: 'cell', // cell（点击单元格触发）, row（点击行触发）
+        checkStrictly: this.checkStrictly, // 暂时这么写，后面再看
+        visibleMethod: this.rowVisibleMethod,
+        checkMethod: this.rowCheckMethod,
+        reserve: true
+      }
+    }
+  },
+  mounted() {
+    const me = this
+    const loadTableData = this.$refs.table.loadTableData
+    this.$refs.table.loadTableData = function (...args) {
+      return loadTableData.apply(this, args).then(() => {
+        me.$emit('loaded')
+      })
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this._mouseLeaveTimer)
+  },
+  methods: {
+    footerRowClassName({ $rowIndex }) {
+      if ($rowIndex === 0) {
+        return 'vxe-table__footer-row'
+      }
+      return ''
+    },
+    handleCheckAllChange(value) {
+      const event = new window.CustomEvent('input', {
+        detail: '模拟触发一下，因为vxTable组件的handleCheckAllEvent需要'
+      })
+      this.$refs.table.handleCheckAllEvent(event, value)
+    },
+    handleRowCheckboxValue(row, column) {
+      if (!this.$refs.table) {
+        return false
+      }
+      return this.$refs.table.isCheckedByCheckboxRow(row)
+    },
+    handleRowRadioValue(row, column) {
+      if (!this.$refs.table) {
+        return false
+      }
+      return this.$refs.table.isCheckedByRadioRow(row)
+    },
+    handleRowRadioInput(row) {
+      if (!this.$refs.table) {
+        return
+      }
+      this.$refs.table.setRadioRow(row)
+    },
+    handleCellMouseEnter(evt) {
+      this.hoverRowId = evt.rowid
+      clearTimeout(this._mouseLeaveTimer)
+      this.$emit('hover-row-change', {
+        row: evt.row
+      })
+    },
+    handleSortChange (evt) {
+      this.$emit('sort-change', evt)
+    },
+    handleCellMouseLeave() {
+      clearTimeout(this._mouseLeaveTimer)
+      this._mouseLeaveTimer = setTimeout(() => {
+        if (!this.$refs.table.hoverRow) {
+          this.hoverRowId = null
+          this.$emit('hover-row-change', {
+            row: null
+          })
+        }
+      })
+    },
+    handleSelectionChange(evt) {
+      if (!this.selectable) {
+        return
+      }
+      if (!this.multiple) {
+        return
+      }
+      this.$emit('selection-change', {
+        selection: evt.records
+      })
+    },
+    handleSelectionAllChange(evt) {
+      this.$emit('selection-change', {
+        selection: evt.records
+      })
+    },
+    handleRadioChange(evt) {
+      if (!this.selectable) {
+        return
+      }
+      if (this.multiple) {
+        return
+      }
+      this.$emit('select-change', {
+        row: evt.row
+      })
+    },
+    handleColumnResizeableChange (evt) {
+      this.$emit('column-resize-change', evt)
+    },
+    handleFooterMethod ({ columns, data }) {
+      return [
+        columns.map((column, columnIndex) => {
+          if (columnIndex === 0) {
+            return '合计'
+          }
+          if (column.footerClassName && column.footerClassName.indexOf('is-show-summary') >= 0) {
+            return this.sumColumnValue(data, column)
+          }
+          return null
+        })
+      ]
+    },
+    sumColumnValue (list, column) {
+      let count = 0
+      list.forEach(item => {
+        if (item[column.field]) {
+          count += Number(item[column.field])
+        } else {
+          count += 0
+        }
+      })
+      const cacheColumn = this.UiGrid.cacheColumns.find(v => v.prop === column.field)
+      if (cacheColumn && cacheColumn.formatSummary) {
+        count = cacheColumn.formatSummary({
+          value: count
+        })
+      }
+      return count
+    },
+    clearSelection() {
+      this.$refs.table && this.$refs.table.clearCheckboxRow()
+    },
+    setCheckboxRow(rows, isSelected = true) {
+      this.$refs.table && this.$refs.table.setCheckboxRow(rows, isSelected)
+    },
+    setRadioRow(row) {
+      if (row) {
+        this.$refs.table && this.$refs.table.setRadioRow(row)
+      } else {
+        this.$refs.table && this.$refs.table.clearRadioRow()
+      }
+    },
+    getSortColumns () {
+      return this.$refs.table.getSortColumns()
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-table {
+  [class*="vxe-"] {
+    font-feature-settings: normal;
+    font-variant: normal;
+  }
+  &:not(.is-border) {
+    .vxe-resizable {
+      &:after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -1px;
+        margin-top: -9px;
+        width: 1px;
+        height: 18px;
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    .vxe-header--column.col--last {
+      .vxe-resizable {
+        &:after {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .vxe-table--header {
+    .vxe-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .vxe-cell--title {
+      flex: 1;
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .vxe-cell--sort {
+    transform: scale(0.8);
+  }
+
+  &.vxe-table .vxe-sort--asc-btn {
+    top: -1px;
+  }
+
+  &.vxe-table .vxe-sort--desc-btn {
+    bottom: -2px;
+  }
+
+  .vxe-table--render-default .vxe-table--empty-content {
+    pointer-events: none;
+  }
+  &.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+  &.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+  &.vxe-table--render-default .vxe-header--column:not(.col--ellipsis){
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  &.vxe-table--render-default .vxe-body--column.col--ellipsis,
+  &.vxe-table--render-default .vxe-footer--column.col--ellipsis,
+  &.vxe-table--render-default .vxe-header--column.col--ellipsis,
+  &.vxe-table--render-default.vxe-editable .vxe-body--column{
+    height: 42px;
+  }
+  &.is-fixed-row-height {
+    &.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+    &.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+    &.vxe-table--render-default .vxe-header--column:not(.col--ellipsis){
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+  }
+  .vxe-table__footer-row {
+    background-color: #f0f9eb !important;
+  }
+}
+
+body {
+  .vxe-table--render-default {
+    color: #172b4d;
+  }
+}
+</style>

package/components/grid/grid-toolbar/grid-batch-toolbar-proxy.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'UiGridBatchToolbar',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    items() {
+      this.$set(this.UiGrid.batchToolbarProps, 'items', this.items)
+    }
+  },
+  created() {
+    this.$set(this.UiGrid.batchToolbarProps, 'items', this.items)
+  },
+  render() {
+    return null
+  }
+}

package/components/grid/grid-toolbar/grid-batch-toolbar.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="ui-grid-toolbar-batch">
+    <ui-toolbar :close-dialog="false">
+      <ui-toolbar-item>
+        <span class="ui-grid-toolbar-batch__count">已选择<b>{{selecteds.length}}</b>项</span>
+      </ui-toolbar-item>
+      <ui-toolbar-item
+        v-for="(item, index) in innerItems"
+        :key="index"
+      >
+        <component
+          v-if="item.render"
+          :is="{render: item.render}"
+        ></component>
+        <ui-button
+          v-else
+          v-bind="item"
+          :icon="item.icon"
+          size="small"
+          :click="handleRenderBtnClick(item)"
+        >
+          {{item.label}}
+        </ui-button>
+      </ui-toolbar-item>
+    </ui-toolbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiGridBatchToolbar',
+  props: {
+    title: {
+      type: String
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    selecteds: {
+      type: Array,
+      default: () => []
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    isAllSelected() {
+      return this.data.length <= this.selecteds.length
+    },
+    renderData() {
+      return {
+        selecteds: this.selecteds
+      }
+    },
+    innerItems() {
+      const me = this
+      return (this.items || []).filter(v => {
+        if (typeof v.visible === 'boolean') {
+          return v.visible
+        }
+        if (typeof v.visible === 'function') {
+          return v.visible()
+        }
+        return true
+      }).map(v => {
+        const vv = Object.assign({}, v)
+        if (v.render) {
+          vv.render = (h) => {
+            return v.render(h, me.renderData)
+          }
+        }
+        return vv
+      })
+    }
+  },
+  methods: {
+    handleToggleCheckbox(evt) {
+      evt.stopPropagation()
+      this.$emit('clear-selection')
+    },
+    handleRenderBtnClick(item) {
+      if (item && item.click) {
+        return () => {
+          const result = item.click({
+            item,
+            selecteds: this.selecteds
+          })
+          if (result && result.then) {
+            item.loading = true
+            result.then(() => {
+              item.loading = false
+              this.$emit('batch-success')
+            }, () => {
+              item.loading = false
+            })
+          }
+          return result
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-toolbar-batch{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 32px;
+}
+.ui-grid-toolbar-batch__count{
+  display: inline-block;
+  color: #888;
+}
+
+.ui-grid-toolbar-batch__count b{
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+  color: #0052cc;
+}
+.ui-grid-toolbar-batch__checkbox{
+  display: inline-block;
+  margin-left: 20px;
+}
+</style>

package/components/grid/grid-toolbar/grid-global-toolbar-proxy.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'UiGridGlobalToolbar',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    items() {
+      this.UiGrid.globalToolbarProps.items = this.items
+    }
+  },
+  created() {
+    this.UiGrid.globalToolbarProps.items = this.items
+  },
+  render() {
+    return null
+  }
+}