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

package/src/packages/table/index.vue

@@ -1,453 +0,0 @@
-<!-- 表格 -->
-<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>