@ddwl/ddwl-ui 1.0.1

package/src/packages/search-table/index.vue

@@ -0,0 +1,101 @@
+<!-- 查询表格 -->
+<template>
+  <div class="table-search-wrap">
+    <search-form v-model="form" :config="config.searchConfig" :search-data="searchData" v-bind="$attrs"
+      v-on="$listeners">
+      <slot />
+    </search-form>
+    <d-table ref="dTable" :request-config="requestConfig" :columns="config.columns" :data="data" v-bind="$attrs"
+      class="table-wrap" v-on="$listeners" />
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+import SearchForm from '../search-form/index.vue'
+import DTable from '../table/index.vue'
+
+export default {
+  name: 'DSearchTable',
+  components: { SearchForm, DTable },
+  props: {
+    config: {
+      type: Object,
+      default: () => ({
+        searchConfig: [],
+        requestConfig: {},
+        columns: []
+      })
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      form: {},
+      complateInit: false
+    }
+  },
+  computed: {
+    requestConfig() {
+      const requestConfig = this.config.requestConfig
+      return {
+        ...requestConfig,
+        params: typeof requestConfig.params === 'function'
+          ? requestConfig.params(cloneDeep(this.form)) // 处理自定义参数
+          : {
+            ...this.form,
+            ...requestConfig.params
+          }
+      }
+    }
+  },
+  watch: {
+    config: {
+      handler() {
+        this.createFormBind()
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() { },
+  methods: {
+    createFormBind() {
+      const _form = {};
+      (this.config.searchConfig || []).forEach(c => {
+        _form[c.key] = c.defaultValue || ''
+      })
+      this.form = _form
+    },
+    search(params) {
+      this.$refs.dTable.search(params)
+    },
+    searchData(params = { pageNum: 1 }) {
+      this.$nextTick(() => {
+        this.search(params)
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.table-search-wrap {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .table-wrap {
+    flex: 1;
+    overflow: hidden;
+
+    :deep(.el-table) {
+      max-height: calc(100% - 52px) !important;
+    }
+  }
+}
+</style>

package/src/packages/svg-icon/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DSvgIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName () {
+      return `#icon-${this.icon}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+</style>

package/src/packages/table/index.vue

@@ -0,0 +1,453 @@
+<!-- 表格 -->
+<template>
+  <div
+    :key="key"
+    v-loading="loading"
+    :class="dragable && '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.props"
+        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.props] }}
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="dragable"
+        label=""
+        width="55"
+        align="center"
+      >
+        <svg-icon
+          class="table-drag-icon"
+          icon-class="drag"
+        />
+      </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"
+        @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])
+    },
+    size: {
+      type: Number,
+      default: 10
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    // 是否需要分页
+    pagination: {
+      default: true,
+      type: Boolean
+    },
+    // 是否拖拽
+    dragable: {
+      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.dragable) {
+          this.$nextTick(() => {
+            this.initSortable()
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultCheckList: {
+      handler () {
+        this.handleSelectionData()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.checkedList = this.defaultCheckList
+    // 如果不需要分页器，每页显示条目数设置最大
+    if (!this.pagination) {
+      this.pageSize = 9999999
+    }
+    // 注册表格拖拽
+    if (this.dragable) {
+      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)
+
+      // 如果当前页码大于0且当前数据列表为空，自动返回上一页并查询
+      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 oldList = JSON.parse(JSON.stringify(this.list))
+          const data = oldList.splice(evt.oldIndex, 1)
+          oldList.splice(evt.newIndex, 0, data[0])
+          this.list = oldList
+          // this.key++
+          this.$nextTick(() => {
+            // 改变key值table重新渲染导致拖拽功能消失，需要重新初始化sorable实例
+            this.initSortable()
+            this.handleSelectionData()
+            this.$emit('drag-change', this.list, evt)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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>