@aochuang/common 1.0.0 → 1.0.126

package/components/grid/grid-sort/grid-sort.vue

@@ -0,0 +1,205 @@
+<template>
+  <ui-popover
+    v-model="showPopover"
+    class="bi-sort-select"
+    trigger="hover"
+    popper-class="bi-sort-select__popover"
+  >
+    <span slot="reference" class="bi-sort-select__handle" @click="handleHandleClick">
+      <span class="bi-sort-select__handle-text">{{ currentItem ? currentItem.label : '排序' }}</span>
+      <span class="bi-sort-select__handle-arrow" :class="['is-' + (value && value.order === 'asc' ? 'asc' : 'desc')]" />
+    </span>
+    <div class="bi-sort-select__menu">
+      <div
+        class="bi-sort-select__item"
+        @click="handleItemClick(item)"
+        v-for="(item, index) in items"
+        :class="{'is-active': value && (value.prop === item.prop)}"
+        :key="index"
+      >{{ item.label }}</div>
+      <div
+        class="bi-sort-select__item is-divided"
+        :class="{'is-active': value && (value.order === 'asc')}"
+        @click="handleOrderAscClick"
+      >升序</div>
+      <div
+        class="bi-sort-select__item"
+        :class="{'is-active': value && (value.order === 'desc')}"
+        @click="handleOrderDescClick"
+      >降序</div>
+    </div>
+  </ui-popover>
+</template>
+<script>
+import Popover from '../../popover'
+
+export default {
+  name: 'BiGridSort',
+  components: {
+    UiPopover: Popover
+  },
+  props: {
+    /**
+     * {
+     *    prop: 'aaa',
+     *    order: 'asc
+     * }
+    */
+    value: {
+      type: Object
+    },
+    /**
+     * [{
+     *    label: 'xxxxx',
+     *    prop: 'aaa'
+     * }]
+    */
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showPopover: false
+    }
+  },
+  computed: {
+    currentItem() {
+      if (!this.value) {
+        return
+      }
+      return this.items.find(v => v.prop === this.value.prop)
+    },
+    firstItem () {
+      if (!this.items || !this.items.length) {
+        return
+      }
+      return this.items[0]
+    }
+  },
+  methods: {
+    handleHandleClick() {
+      if (!this.value) {
+        return
+      }
+      const orderMap = {
+        desc: 'asc',
+        asc: 'desc'
+      }
+      this.$emit('change', {
+        value: {
+          prop: this.value.prop,
+          order: orderMap[this.value.order]
+        }
+      })
+    },
+    handleItemClick(item) {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: item.prop,
+          order: this.value ? this.value.order : 'desc'
+        }
+      })
+    },
+    handleOrderAscClick() {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: this.value && this.value.prop ? this.value.prop : (this.firstItem ? this.firstItem.prop : null),
+          order: 'asc'
+        }
+      })
+    },
+    handleOrderDescClick() {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: this.value && this.value.prop ? this.value.prop : (this.firstItem ? this.firstItem.prop : null),
+          order: 'desc'
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.bi-sort-select__popover{
+  padding: 6px 0!important;
+}
+.bi-sort-select__handle-text{
+  font-size: 14px;
+}
+.bi-sort-select__handle{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 28px;
+  line-height: 28px;
+  cursor: pointer;
+}
+.bi-sort-select__handle-arrow{
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-left: 6px;
+  background: url('./icons/desc.png') no-repeat 50% 50%;
+  background-size: 90%;
+  margin-top: 1px;
+  &.is-asc{
+    margin-top: 0;
+    background-image: url('./icons/asc.png');
+  }
+}
+.bi-sort-select__menu{
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.bi-sort-select__item{
+  line-height: 24px;
+  padding: 6px 30px 6px 12px;
+  cursor: pointer;
+  transition: all .25s;
+  position: relative;
+  white-space: nowrap;
+  &:hover {
+    background-color: #f8f8f9;
+  }
+  &.is-active {
+    color: #409EFF;
+    background-color: rgba(95, 158, 250, .1);
+    &:after {
+       opacity: 1;
+    }
+  }
+  &.is-divided{
+    margin-top: 12px;
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -6px;
+      height: 1px;
+      background-color: #eee;
+    }
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 7px;
+    border: 1px solid #409EFF;
+    position: absolute;
+    top: 50%;
+    transform: rotate(45deg) translateY(-50%);
+    right: 12px;
+    border-left: 0;
+    border-top: 0;
+    margin-top: -3px;
+    opacity: 0;
+  }
+}
+</style>

package/components/grid/grid-sort/index.js

@@ -0,0 +1,7 @@
+import GridSort from './grid-sort'
+import GridSortProxy from './grid-sort-proxy'
+
+export {
+  GridSort,
+  GridSortProxy
+}

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>