@ddwl/ddwl-ui 1.2.3-beta.1 → 1.2.3-beta.2

package/src/packages/table/index.vue

@@ -0,0 +1,453 @@
+<!-- 表格 -->
+<template>
+  <div
+    :key="key"
+    v-loading="loading"
+    class="d-table"
+    :class="draggable && 'drag-query-table'"
+  >
+    <el-table
+      ref="table"
+      :row-key="rowKey"
+      style="width: 100%"
+      :data="list"
+      :border="border"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @select="selectChange"
+      @select-all="selectAllChange"
+      @selection-change="selectionChange"
+    >
+      <el-table-column
+        v-if="selection || asyncSelection"
+        key="selection"
+        type="selection"
+        align="center"
+        width="50"
+      />
+      <el-table-column
+        v-if="index"
+        key="index"
+        label="序号"
+        align="center"
+        width="55"
+      >
+        <template slot-scope="scope">
+          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="column in visibleColumns"
+        :key="column.prop"
+        v-bind="column"
+        v-on="$listeners"
+      >
+        <template slot-scope="scope">
+          <component
+            :is="column.component"
+            v-if="column.component"
+            v-bind="{ ...scope.row, ...column }"
+            :row="scope.row"
+            :index="scope.$index"
+          />
+          <column-render
+            v-else-if="column.render"
+            :scope="scope"
+            :render="column.render"
+          />
+          <template v-else>
+            {{ scope.row[column.prop] }}
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="draggable && rowKey"
+        label=""
+        width="55"
+        align="center"
+      >
+        <img
+          class="table-drag-icon"
+          src="./drag.png"
+        >
+      </el-table-column>
+    </el-table>
+    <!-- 分页器 -->
+    <div
+      v-if="pagination"
+      class="d-table-footer"
+    >
+      <div>
+        <slot name="footer" />
+      </div>
+      <el-pagination
+        class="pagination"
+        :background="background"
+        :layout="layout"
+        :total="total"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { cloneDeep } from 'lodash'
+import modules from '../../lib/slots'
+import ColumnRender from '../render'
+
+export default {
+  name: 'DTable',
+  components: { ...modules, ColumnRender },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: String,
+      default: ''
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    // request config
+    requestConfig: {
+      type: Object,
+      require: false,
+      default: () => ({
+        api: () => {}, // 接口
+        params: {}, // 默认参数
+        autoRequest: true, // 是否自动请求
+        method: null // 自定义请求方法
+      })
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    pageSizes: {
+      type: Array,
+      default: () => ([10, 20, 30, 50])
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    // 是否需要分页
+    pagination: {
+      default: true,
+      type: Boolean
+    },
+    // 是否拖拽
+    draggable: {
+      default: false,
+      type: Boolean
+    },
+    // 是否展示多选框
+    selection: {
+      default: false,
+      type: Boolean
+    },
+    // 是否跨页勾选
+    asyncSelection: {
+      default: false,
+      type: Boolean
+    },
+    // 默认勾选项，必须设置rowKey
+    defaultCheckList: {
+      default: () => [],
+      type: Array
+    },
+    // 是否展示排序列
+    index: {
+      default: false,
+      type: Boolean
+    },
+    // 列表项配置
+    columns: {
+      default: () => [],
+      type: Array
+    },
+    // 开启静态分页
+    staticPaging: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+      loading: false,
+      checkedList: [],
+      ids: [],
+      key: 0,
+      list: [],
+      totalList: []
+    }
+  },
+  computed: {
+    visibleColumns () {
+      return this.columns.filter(item => !item.hide)
+    }
+  },
+  watch: {
+    data: {
+      handler (val) {
+        if (JSON.stringify(val) === JSON.stringify(this.list)) {
+          return
+        }
+        this.handleRequestData(val)
+        if (this.draggable) {
+          this.$nextTick(() => {
+            this.initSortable()
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultCheckList: {
+      handler () {
+        this.handleSelectionData()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    if (this.draggable && !this.rowKey) {
+      console.error('[DTable] 请设置正确的 rowKey 用于拖拽排序')
+    }
+    
+    this.checkedList = this.defaultCheckList
+    // 如果不需要分页器，每页显示条目数设置最大
+    if (!this.pagination) {
+      this.pageSize = 9999999
+    }
+    // 注册表格拖拽
+    if (this.draggable) {
+      this.initSortable()
+    }
+    // 是否开启自动请求
+    if (!this.staticPaging && (this.requestConfig.autoRequest || this.requestConfig.autoRequest === undefined)) {
+      this.search()
+    }
+  },
+  methods: {
+    /**
+     * @description: 表格查询方法包装
+     * @param {*} param 自定义查询条件
+     */
+    async search (param = {}) {
+      this.loading = true
+      try {
+        if (param.pageNum) {
+          this.pageNum = param.pageNum
+        }
+        if (param.pageSize) {
+          this.pageSize = param.pageSize
+        }
+        const { total, data } = await (this.requestConfig.method || this.getData)({
+          pageSize: this.pageSize,
+          pageNum: this.pageNum,
+          ...this.requestConfig.params,
+          ...param
+        })
+        this.total = total
+        this.handleRequestData(data)
+      // eslint-disable-next-line no-empty
+      } catch (e) {}
+      this.loading = false
+    },
+    async getData (params) {
+      const defaultParams = typeof this.requestConfig.params === 'function' ? this.requestConfig.params() : this.requestConfig.params
+      const { data } = await this.requestConfig.api({ ...defaultParams, ...params })
+      this.total = data.total
+      let listData = data.list || []
+      if (this.requestConfig.props) {
+        if (this.requestConfig.props.list === null) {
+          listData = data
+        } else if (this.requestConfig.props.list) {
+          listData = data[this.requestConfig.props.list]
+        }
+      }
+      return {
+        total: data.total,
+        data: listData
+      }
+    },
+    /**
+     * @description: 处理表格接口获取的数据
+     */
+    handleRequestData (data) {
+      if (this.staticPaging) {
+        this.totalList = cloneDeep(data)
+        this.total = this.totalList.length
+      } else {
+        this.list = cloneDeep(data)
+      }
+
+      // 静态分页
+      if (this.staticPaging) {
+        this.pageNum = 1
+        this.calcStaticPageData()
+        return
+      }
+
+      this.$emit('loaded', this.list)
+
+      // 如果当前页码大于1且当前数据列表为空，自动返回上一页并查询
+      if (this.list.length === 0 && this.pageNum > 1) {
+        this.pageNum = this.pageNum - 1
+        this.search()
+        return
+      }
+      // 跨页勾选逻辑
+      if (this.asyncSelection || this.selection) {
+        this.key++
+        this.handleSelectionData()
+      }
+    },
+    /**
+     * @description: 处理表格默认勾选
+     */
+    handleSelectionData () {
+      this.checkedList = this.defaultCheckList
+      this.$refs.table && this.$refs.table.clearSelection()
+      if (this.checkedList.length) {
+        const ids = this.checkedList.map(item => item[this.rowKey])
+        const rows = this.list.filter(item => ids.includes(item[this.rowKey]))
+        this.$nextTick(() => {
+          rows.forEach(row => {
+            this.$refs.table.toggleRowSelection(row, true)
+          })
+        })
+      }
+    },
+    calcStaticPageData () {
+      const _list = JSON.parse(JSON.stringify(this.totalList))
+      this.list = _list.splice((this.pageNum - 1) * this.pageSize, this.pageSize)
+    },
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.pageNum = 1
+      this.staticPaging ? this.calcStaticPageData() : this.search()
+      this.$emit('page-change', { size: this.pageSize, page: this.pageNum })
+    },
+    handleCurrentChange (val) {
+      this.pageNum = val
+      this.staticPaging ? this.calcStaticPageData() : this.search()
+      this.$emit('page-change', { size: this.pageSize, page: this.pageNum })
+    },
+    /**
+     * @description: 勾选改变事件
+     * @param {Array} list
+     * @return {Array}
+     */
+    selectChange (list, row) {
+      if (!this.asyncSelection) {
+        this.$emit('select-change', list)
+      } else {
+        if (list.some(i => i[this.rowKey] === row[this.rowKey])) {
+          this.checkedList.push(row)
+        } else {
+          this.checkedList = this.checkedList.filter(item => item[this.rowKey] !== row[this.rowKey])
+        }
+        this.$emit('select-change', cloneDeep(this.checkedList))
+      }
+    },
+    selectAllChange (list) {
+      if (!this.asyncSelection) {
+        this.$emit('select-change', list)
+      } else {
+        if (list.length) {
+          const checkedKeys = this.checkedList.map(item => item[this.rowKey])
+          const newData = list.filter(item => !checkedKeys.includes(item[this.rowKey]))
+          this.checkedList = this.checkedList.concat(newData)
+        } else {
+          const listKeys = this.list.map(item => item[this.rowKey])
+          this.checkedList = this.checkedList.filter(item => !listKeys.includes(item[this.rowKey]))
+        }
+        this.$emit('select-change', cloneDeep(this.checkedList))
+      }
+    },
+
+    selectionChange () {},
+    /**
+     * @description: 清空用户的选择
+     */
+    clearSelection () {
+      this.checkedList = []
+      this.$refs.table.clearSelection()
+    },
+    /**
+     * @description: 改变给定值的选中状态
+     * @param {*} value 改变选中状态的值
+     * @param {*} selected 是否选中
+     */
+    toggleAsyncSelection (value, selected = false) {
+      this.checkedList = this.checkedList.filter(item => item[this.rowKey] !== value)
+      const data = this.list.find(item => item[this.rowKey] === value)
+      if (data) {
+        this.$refs.table.toggleRowSelection(data, selected)
+      } else {
+        this.$emit('select-change', this.checkedList)
+      }
+    },
+    /**
+     * @description: 表格拖拽
+     */
+    initSortable () {
+      const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper > table > tbody')
+      /* eslint-disable no-new */
+      new Sortable(el, {
+        handle: '.table-drag-icon',
+        onEnd: (evt) => {
+          // 拖拽后数据位置置换
+          const data = this.list.splice(evt.oldIndex, 1)[0]
+          this.list.splice(evt.newIndex, 0, data)
+
+          this.$nextTick(() => {
+            // 重新初始化table
+            this.initSortable()
+            this.handleSelectionData()
+            this.$emit('drag-change', this.list, evt)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d-table {
+  display: flex;
+  flex-direction: column;
+}
+.drag-query-table {
+  :deep(.hover-row) {
+    td {
+      background-color: #fff;
+    }
+  }
+}
+.table-drag-icon {
+  cursor: pointer;
+}
+.d-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+</style>