@aochuang/common 1.0.0 → 1.0.1

package/components/grid/grid-table-view/grid-table-view.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="ui-grid-table-view" v-if="currentViewName === 'table'">
+    <grid-table
+      ref="table"
+      :row-height="rowHeight"
+      :show-index="showIndex"
+      :border="border"
+      :id-field="idField"
+      :parent-field="parentField"
+      :multiple="multiple"
+      :selectable="selectable"
+      :data="data"
+      :height="height"
+      :row-class-name="rowClassName"
+      :max-height="maxHeight"
+      :empty-text="emptyText"
+      :show-summary="showSummary"
+      :show-pagination="showPagination"
+      :page-index="pageIndex"
+      :page-size="pageSize"
+      :remote-sort="remoteSort"
+      :show-header="showHeader"
+      @selection-change="handleSelectionChange"
+      @select-change="handleSelectChange"
+    >
+      <slot></slot>
+      <vxe-column
+        v-if="rowToolbar && rowToolbar.length"
+        title="操作"
+        fixed="right"
+        field="__rowToolbar"
+        :width="rowToolbarWidth"
+      >
+        <template slot-scope="{ row, $rowIndex }">
+          <grid-row-toolbar :row="row" :row-index="$rowIndex" :items="rowToolbar"></grid-row-toolbar>
+        </template>
+      </vxe-column>
+    </grid-table>
+  </div>
+</template>
+<script>
+import GridRowToolbar from '../grid-toolbar/grid-row-toolbar'
+import GridTable from '../grid-table'
+import { Column } from 'vxe-table'
+
+export default {
+  name: 'UiGridTableView',
+  inject: ['UiGrid'],
+  components: {
+    GridTable,
+    VxeColumn: Column,
+    GridRowToolbar
+  },
+  computed: {
+    currentViewName () {
+      return this.UiGrid.currentViewName
+    },
+    rowHeight () {
+      return this.UiGrid.rowHeight
+    },
+    showIndex () {
+      return this.UiGrid.showIndex
+    },
+    border () {
+      return this.UiGrid.border
+    },
+    idField () {
+      return this.UiGrid.innerIdField
+    },
+    parentField () {
+      return this.UiGrid.parentField
+    },
+    multiple () {
+      return this.UiGrid.innerMultiple
+    },
+    selectable () {
+      return this.UiGrid.innerSelectable
+    },
+    data () {
+      return this.UiGrid.tableData
+    },
+    height () {
+      return this.UiGrid.tableHeight
+    },
+    rowClassName () {
+      return this.UiGrid.rowClassName
+    },
+    maxHeight () {
+      return this.UiGrid.tableMaxHeight
+    },
+    emptyText () {
+      return this.UiGrid.emptyText
+    },
+    showSummary () {
+      return this.UiGrid.showSummary
+    },
+    showPagination () {
+      return this.UiGrid.showPagination
+    },
+    pageIndex () {
+      return this.UiGrid.tablePageIndex
+    },
+    pageSize () {
+      return this.UiGrid.tablePageSize
+    },
+    remoteSort () {
+      return this.UiGrid.remoteSort
+    },
+    showHeader () {
+      return this.UiGrid.showHeader
+    },
+    rowToolbar () {
+      return this.UiGrid.rowToolbar
+    },
+    rowToolbarWidth () {
+      return this.UiGrid.rowToolbarWidth
+    }
+  },
+  created () {
+    this.UiGrid.addViewPanel({
+      label: '表格',
+      name: 'table',
+      icon: `
+        <svg t="1717655840748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25904" width="200" height="200">
+          <path d="M272 704v144H128v-144h144z m592 30v80H384v-80h480zM272 444v144H128v-144h144z m592 30v80H384v-80h480zM272 176v144H128V176h144z m592 34v80H384v-80h480z" fill="currentColor"></path>
+        </svg>
+      `
+    })
+  },
+  watch: {
+    currentViewName () {
+      if (this.UiGrid.currentViewName === 'table') {
+        this.UiGrid.$control = this
+      }
+    }
+  },
+  mounted () {
+    if (this.UiGrid.currentViewName === 'table') {
+      this.UiGrid.$control = this
+    }
+  },
+  methods: {
+    getSortColumns () {
+      return this.$refs.table.getSortColumns()
+    },
+    clearSelection () {
+      this.$refs.table && this.$refs.table.clearSelection()
+    },
+    toggleRowSelection(row, isSelected) {
+      this.$refs.table && this.$refs.table.toggleRowSelection(row, isSelected)
+    },
+    setCurrentRow(row) {
+      this.$refs.table && this.$refs.table.setCurrentRow(row)
+    },
+    setCheckboxRow (rows, isSelected = true) {
+      this.$refs.table && this.$refs.table.setCheckboxRow(rows, isSelected)
+    },
+    setRadioRow (row) {
+      this.$refs.table && this.$refs.table.setRadioRow(row)
+    },
+    handleSelectionChange (evt) {
+      this.UiGrid.handleGridViewSelectionChange(evt)
+    },
+    handleSelectChange (evt) {
+      this.UiGrid.handleSelectChange(evt)
+    }
+  },
+  beforeDestroy () {
+    this.UiGrid.removeViewPanel('table')
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-table-view{
+  flex: 1;
+  min-height: 0;
+}
+</style>

package/components/grid/grid-table.vue

@@ -0,0 +1,547 @@
+<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"
+        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', 'margin-right': '3px' }"
+                @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' ? 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: 'row',
+        checkStrictly: this.checkStrictly, // 暂时这么写，后面再看
+        visibleMethod: this.rowVisibleMethod,
+        checkMethod: this.rowCheckMethod
+      }
+    }
+  },
+  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>