vue2-client 0.1.0 → 1.1.0

package/src/components/table/advance/ActionColumns.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="action-columns" ref="root">
+    <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
+      <div slot="title">
+        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
+        <a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button>
+      </div>
+      <a-list style="width: 100%" size="small" :key="i" v-for="(col, i) in columns" slot="content">
+        <a-list-item>
+          <a-checkbox v-model="col.visible" @change="e => onCheckChange(e, col)"/>
+          <template v-if="col.title">
+            {{ col.title }}:
+          </template>
+          <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
+          <template slot="actions">
+            <a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
+              <a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
+            </a-tooltip>
+            <a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
+              <a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
+            </a-tooltip>
+            <a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
+              <a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
+            </a-tooltip>
+          </template>
+        </a-list-item>
+      </a-list>
+      <a-icon class="action" type="setting" />
+    </a-popover>
+  </div>
+</template>
+
+<script>
+  import cloneDeep from 'lodash.clonedeep'
+
+  export default {
+    name: 'ActionColumns',
+    // eslint-disable-next-line vue/require-prop-types
+    props: ['columns', 'visibleColumns'],
+    data () {
+      return {
+        visible: false,
+        indeterminate: false,
+        checkAll: true,
+        checkedCounts: this.columns.length,
+        backColumns: cloneDeep(this.columns)
+      }
+    },
+    watch: {
+      checkedCounts (val) {
+        this.checkAll = val === this.columns.length
+        this.indeterminate = val > 0 && val < this.columns.length
+      },
+      columns (newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.checkedCounts = newVal.length
+          this.formatColumns(newVal)
+        }
+      }
+    },
+    created () {
+      this.formatColumns(this.columns)
+    },
+    methods: {
+      onCheckChange (e, col) {
+        if (!col.visible) {
+          this.checkedCounts -= 1
+        } else {
+          this.checkedCounts += 1
+        }
+      },
+      fixColumn (fixed, col) {
+        if (fixed !== col.fixed) {
+          this.$set(col, 'fixed', fixed)
+        } else {
+          this.$set(col, 'fixed', undefined)
+        }
+      },
+      setSearch (col) {
+        this.$set(col, 'searchAble', !col.searchAble)
+        if (!col.searchAble && col.search) {
+          this.resetSearch(col)
+        }
+      },
+      resetSearch (col) {
+        // col.search.value = col.dataType === 'boolean' ? false : undefined
+        col.search.value = undefined
+        col.search.backup = undefined
+      },
+      resetColumns () {
+        const { columns, backColumns } = this
+        let counts = columns.length
+        backColumns.forEach((back, index) => {
+          const column = columns[index]
+          column.visible = back.visible === undefined || back.visible
+          if (!column.visible) {
+            counts -= 1
+          }
+          if (back.fixed !== undefined) {
+            column.fixed = back.fixed
+          } else {
+            this.$set(column, 'fixed', undefined)
+          }
+          this.$set(column, 'searchAble', back.searchAble)
+          // column.searchAble = back.searchAble
+          this.resetSearch(column)
+        })
+        this.checkedCounts = counts
+        this.visible = false
+        this.$emit('reset', this.getConditions(columns))
+      },
+      onCheckAllChange (e) {
+        if (e.target.checked) {
+          this.checkedCounts = this.columns.length
+          // eslint-disable-next-line no-return-assign
+          this.columns.forEach(col => col.visible = true)
+        } else {
+          this.checkedCounts = 0
+          // eslint-disable-next-line no-return-assign
+          this.columns.forEach(col => col.visible = false)
+        }
+      },
+      getConditions (columns) {
+        const conditions = {}
+        columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
+          .forEach(col => {
+            conditions[col.dataIndex] = col.search.value
+          })
+        return conditions
+      },
+      formatColumns (columns) {
+        for (const col of columns) {
+          if (col.visible === undefined) {
+            this.$set(col, 'visible', true)
+          }
+          if (!col.visible) {
+            this.checkedCounts -= 1
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.action-columns{
+  display: inline-block;
+  .check-all{
+    margin-right: 8px;
+  }
+  .left,.right{
+    transform: rotate(-90deg);
+  }
+  .active{
+    color: @primary-color;
+  }
+}
+</style>

package/src/components/table/advance/ActionSize.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="action-size" ref="root">
+    <a-tooltip title="密度">
+      <a-dropdown placement="bottomCenter" :trigger="['click']" :get-popup-container="() => $refs.root">
+        <a-icon class="action" type="column-height" />
+        <a-menu :selected-keys="[value]" slot="overlay" @click="onClick">
+          <a-menu-item key="default">
+            默认
+          </a-menu-item>
+          <a-menu-item key="middle">
+            中等
+          </a-menu-item>
+          <a-menu-item key="small">
+            紧密
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </a-tooltip>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ActionSize',
+    // eslint-disable-next-line vue/require-prop-types
+    props: ['value'],
+    inject: ['table'],
+    data () {
+      return {
+        selectedKeys: ['middle']
+      }
+    },
+    methods: {
+      onClick ({ key }) {
+        this.$emit('input', key)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.action-size{
+  display: inline-block;
+}
+</style>

package/src/components/table/advance/AdvanceTable.vue

@@ -0,0 +1,275 @@
+<template>
+  <div ref="table" :id="id" class="advanced-table">
+    <a-spin :spinning="loading">
+      <div :class="['header-bar', size]">
+        <div class="title">
+          <template v-if="title">{{ title }}</template>
+          <slot v-else-if="$slots.title" name="title"></slot>
+          <template v-else>高级表格</template>
+        </div>
+        <div class="search">
+          <search-area :format-conditions="formatConditions" @change="onSearchChange" :columns="columns" >
+            <template :slot="slot" v-for="slot in slots">
+              <slot :name="slot"></slot>
+            </template>
+          </search-area>
+        </div>
+        <div class="actions">
+          <a-tooltip title="刷新">
+            <a-icon @click="refresh" class="action" :type="loading ? 'loading' : 'reload'" />
+          </a-tooltip>
+          <action-size v-model="sSize" class="action" />
+          <a-tooltip title="列配置">
+            <action-columns :columns="columns" @reset="onColumnsReset" class="action">
+              <template :slot="slot" v-for="slot in slots">
+                <slot :name="slot"></slot>
+              </template>
+            </action-columns>
+          </a-tooltip>
+          <a-tooltip title="全屏">
+            <a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </a-tooltip>
+        </div>
+      </div>
+      <a-table
+        v-bind="{...$props, columns: visibleColumns, title: undefined, loading: false}"
+        :size="sSize"
+        @expandedRowsChange="onExpandedRowsChange"
+        @change="onChange"
+        @expand="onExpand"
+      >
+        <template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots ">
+          <slot :name="slot" v-bind="{text, record, index}"></slot>
+        </template>
+        <template :slot="slot" v-for="slot in slots">
+          <slot :name="slot"></slot>
+        </template>
+        <template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''">
+          <slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot>
+        </template>
+      </a-table>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+  import ActionSize from '@/components/table/advance/ActionSize'
+  import ActionColumns from '@/components/table/advance/ActionColumns'
+  import SearchArea from '@/components/table/advance/SearchArea'
+  export default {
+    name: 'AdvanceTable',
+    components: { SearchArea, ActionColumns, ActionSize },
+    props: {
+      // eslint-disable-next-line vue/require-default-prop
+      tableLayout: String,
+      bordered: Boolean,
+      childrenColumnName: { type: String, default: 'children' },
+      // eslint-disable-next-line vue/require-default-prop
+      columns: Array,
+      // eslint-disable-next-line vue/require-default-prop
+      components: Object,
+      // eslint-disable-next-line vue/require-default-prop
+      dataSource: Array,
+      // eslint-disable-next-line vue/require-default-prop
+      defaultExpandAllRows: Array[String],
+      // eslint-disable-next-line vue/require-default-prop
+      expandedRowKeys: Array[String],
+      // eslint-disable-next-line vue/require-default-prop
+      expandedRowRender: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      expandIcon: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      expandRowByClick: Boolean,
+      // eslint-disable-next-line vue/require-default-prop
+      expandIconColumnIndex: Number,
+      // eslint-disable-next-line vue/require-default-prop
+      footer: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      indentSize: Number,
+      // eslint-disable-next-line vue/require-default-prop
+      loading: Boolean,
+      // eslint-disable-next-line vue/require-default-prop
+      locale: Object,
+      // eslint-disable-next-line vue/require-default-prop
+      pagination: [Object, Boolean],
+      // eslint-disable-next-line vue/require-default-prop
+      rowClassName: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      rowKey: [String, Function],
+      // eslint-disable-next-line vue/require-default-prop
+      rowSelection: Object,
+      // eslint-disable-next-line vue/require-default-prop
+      scroll: Object,
+      // eslint-disable-next-line vue/require-default-prop
+      showHeader: { type: Boolean, default: true },
+      // eslint-disable-next-line vue/require-default-prop
+      size: String,
+      // eslint-disable-next-line vue/require-default-prop
+      title: String,
+      // eslint-disable-next-line vue/require-default-prop
+      customHeaderRow: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      customRow: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      getPopupContainer: Function,
+      // eslint-disable-next-line vue/require-default-prop
+      transformCellText: Function,
+      formatConditions: Boolean
+    },
+    provide () {
+      return {
+        table: this
+      }
+    },
+    data () {
+      return {
+        id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
+        sSize: this.size || 'default',
+        fullScreen: false,
+        conditions: {}
+      }
+    },
+    computed: {
+      slots () {
+        return Object.keys(this.$slots).filter(slot => slot !== 'title')
+      },
+      scopedSlots () {
+        return Object.keys(this.$scopedSlots).filter(slot => slot !== 'expandedRowRender' && slot !== 'title')
+      },
+      visibleColumns () {
+        return this.columns.filter(col => col.visible)
+      }
+    },
+    created () {
+      this.addListener()
+    },
+    beforeDestroy () {
+      this.removeListener()
+    },
+    methods: {
+      refresh () {
+        this.$emit('refresh', this.conditions)
+      },
+      onSearchChange (conditions, searchOptions) {
+        this.conditions = conditions
+        this.$emit('search', conditions, searchOptions)
+      },
+      toggleScreen () {
+        if (this.fullScreen) {
+          this.outFullScreen()
+        } else {
+          this.inFullScreen()
+        }
+      },
+      inFullScreen () {
+        const el = this.$refs.table
+        el.classList.add('beauty-scroll')
+        if (el.requestFullscreen) {
+          el.requestFullscreen()
+          return true
+        } else if (el.webkitRequestFullScreen) {
+          el.webkitRequestFullScreen()
+          return true
+        } else if (el.mozRequestFullScreen) {
+          el.mozRequestFullScreen()
+          return true
+        } else if (el.msRequestFullscreen) {
+          el.msRequestFullscreen()
+          return true
+        }
+        this.$message.warn('对不起，您的浏览器不支持全屏模式')
+        el.classList.remove('beauty-scroll')
+        return false
+      },
+      outFullScreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+        this.$refs.table.classList.remove('beauty-scroll')
+      },
+      onColumnsReset (conditions) {
+        this.$emit('reset', conditions)
+      },
+      onExpandedRowsChange (expandedRows) {
+        this.$emit('expandedRowsChange', expandedRows)
+      },
+      onChange (pagination, filters, sorter, options) {
+        this.$emit('change', pagination, filters, sorter, options)
+      },
+      onExpand (expanded, record) {
+        this.$emit('expand', expanded, record)
+      },
+      addListener () {
+        document.addEventListener('fullscreenchange', this.fullScreenListener)
+        document.addEventListener('webkitfullscreenchange', this.fullScreenListener)
+        document.addEventListener('mozfullscreenchange', this.fullScreenListener)
+        document.addEventListener('msfullscreenchange', this.fullScreenListener)
+      },
+      removeListener () {
+        document.removeEventListener('fullscreenchange', this.fullScreenListener)
+        document.removeEventListener('webkitfullscreenchange', this.fullScreenListener)
+        document.removeEventListener('mozfullscreenchange', this.fullScreenListener)
+        document.removeEventListener('msfullscreenchange', this.fullScreenListener)
+      },
+      fullScreenListener (e) {
+        if (e.target.id === this.id) {
+          this.fullScreen = !this.fullScreen
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.advanced-table{
+  overflow-y: auto;
+  background-color: @component-background;
+  .header-bar{
+    padding: 16px 24px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    transition: all 0.3s;
+    &.middle{
+      padding: 12px 16px;
+    }
+    &.small{
+      padding: 8px 12px;
+      border: 1px solid @border-color;
+      border-bottom: 0;
+      .title{
+        font-size: 16px;
+      }
+    }
+    .title{
+      transition: all 0.3s;
+      font-size: 18px;
+      color: @title-color;
+      font-weight: 700;
+    }
+    .search{
+      flex: 1;
+      text-align: right;
+      margin: 0 24px;
+    }
+    .actions{
+      text-align: right;
+      font-size: 17px;
+      color: @text-color;
+      .action{
+        margin: 0 8px;
+        cursor: pointer;
+        &:hover{
+          color: @primary-color;
+        }
+      }
+    }
+  }
+}
+</style>