ylwl-cpscoms 1.0.0

package/src/SlTable/components/colSetting.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-table ref="dragTable" :data="columns" :border="true" row-key="prop" default-expand-all >
+      <el-table-column prop="drag" align="center" label="拖拽" width="60">
+        <template slot-scope="scope">
+          <i class="el-icon-rank" style="cursor: move;"></i>
+        </template>
+      </el-table-column>
+      <el-table-column prop="label" align="center" label="列名" />
+      <el-table-column prop="isShow" align="center" label="显示">
+        <template slot-scope="scope">
+          <el-switch v-model="scope.row.isShow" @change="changeTableColumn"></el-switch>
+        </template>
+      </el-table-column>
+
+      <template #empty>
+        <div class="table-empty">
+          <!-- <img src="../assets/images/notData.png" alt="notData" /> -->
+          <div>暂无可配置列</div>
+        </div>
+      </template>
+    </el-table>
+  </div>
+</template>
+<script>
+import Sortable from 'sortablejs'
+export default {
+  props: {
+    columns: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      localColumns: []
+    }
+  },
+  watch: {
+    columns: {
+      handler(newVal) {
+        this.localColumns = [...newVal]
+        this.$nextTick(() => {
+          this.setSort()
+        })
+      },
+      deep: true,
+      immediate: true
+
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setSort()
+    })
+  },
+  methods: {
+    setSort() {
+      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      this.sortable = Sortable.create(el, {
+        ghostClass: 'sortable-ghost',
+        setData: function(dataTransfer) {
+          dataTransfer.setData('Text', '')
+        },
+        onEnd: evt => {
+          const { oldIndex, newIndex } = evt
+          this.handleDragEnd(oldIndex, newIndex)
+        }
+      })
+    },
+    handleDragEnd(oldIndex, newIndex) {
+      const columns = [...this.localColumns]
+      const targetRow = columns.splice(oldIndex, 1)[0]
+      columns.splice(newIndex, 0, targetRow)
+      this.localColumns = columns
+      this.$emit('update-columns', columns)
+    },
+    changeTableColumn() {
+      this.$emit('change-columns')
+    }
+  }
+}
+</script>
+<style scoped>
+.sortable-ghost {
+  opacity: 0.8;
+  background: #f0f9eb;
+}
+</style>

package/src/SlTable/index.vue

@@ -0,0 +1,541 @@
+<template>
+  <div class="sl-table">
+    <el-table
+      v-loading="loading"
+      ref="elTable"
+      :data="tableData"
+      :border="true"
+      :key="headKey"
+      :stripe="true"
+      :default-sort = "{ prop: 'buserId', order: 'descending' }"
+      :cell-class-name="cellClassName"
+      :header-cell-class-name="cellClassName"
+      v-bind="$attrs"
+      :row-key="otherConfig && otherConfig.rowKey ? otherConfig.rowKey : 'id'"
+      size="small"
+      class="custom-table"
+      style="width: 100%"
+      height="100%"
+      max-height="100%"
+      @selection-change="handleSelectionChange"
+      @sort-change="handleSortChange"
+      v-on="$listeners"
+    >
+      <!-- ascending, descending -->
+      <template v-for="(item, index) in realColumns" >
+        <el-table-column
+          v-if="item.type == 'selection' || item.type == 'index'"
+          :fixed="isMobileDevice() ? false : item.type == 'selection' ? 'left' : ''"
+          type="selection"
+          v-bind="item"
+          :key="item.prop"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="(hasKey(item, 'isShow') ? item.isShow : true) && !item.type && isShowTableColumn(item)"
+          :key="item.prop + index"
+          :fixed="isMobileDevice() ? false : item.fixed || false"
+          :prop="item.prop"
+          :label="item.label"
+          :align="'center'"
+          :sortable="item.sortable || false"
+          :width="item.width || ''"
+          :minWidth	="item.minWidth || ''"
+          :show-overflow-tooltip="showOverflowTooltip(item)"
+        >
+          <template slot="header" slot-scope="{ column, $index }">
+            <!-- <span v-if="item.prop === 'operate'">
+              {{ column.label }}
+            </span> -->
+            <slot v-if="item.headerTemplate" :name="item.headerTemplate"></slot>
+            <!-- @mousedown="handleMounseDown($event, column, $index)"
+            @dragover="handleDragover($event, column, $index)" -->
+            <span
+              v-else
+            >
+              {{ column.label }}
+            </span>
+            <el-tooltip v-if="item.headerTip && item.headerTip.content && (typeOf(item.headerTip.isShow, 'function') ? item.headerTip.isShow(row) : true)" :content="item.headerTip.content" placement="top">
+              <i class="el-icon-info"></i>
+            </el-tooltip>
+          </template>
+          <template slot-scope="{ row, column, $index }">
+            <template v-if="item.prop === 'operate'">
+              <template v-for="(btnItem) in (typeOf(item.list, 'function') ? item.list({row}) : item.list)" >
+                <el-button
+                  v-if="btnItem.isShow ? btnItem.isShow(row, column, $index) : true"
+                  :key="btnItem.label"
+                  type="text"
+                  :style="{ color: btnItem.type === 'danger' ? '#f56c6c' : '' }"
+                  size="mini"
+                  v-bind="btnItem.props"
+                  @click="btnItem.click(row, column, $index, $event)"
+                >
+                  {{ btnItem.label }}
+                </el-button>
+              </template>
+            </template>
+            <template v-else>
+              <span v-if="hasKey(item, 'render')" v-html="item.render({row})"></span>
+              <slot v-else-if="item.template" :name="item.template" :row="row"></slot>
+              <span v-else>{{ row[item.prop] }}</span>
+              <el-tooltip v-if="item.tip && item.tip.key && (typeOf(item.tip.isShow, 'function') ? item.tip.isShow(row) : true)" :content="row[item.tip.key]" placement="top">
+                <el-button type="text" size="samll" icon="el-icon-info" style="color: red; padding: 0"></el-button>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+
+    </el-table>
+    <el-pagination
+      v-if="showPagination"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="total"
+      background
+      style="float: right;"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { typeOf, hasKey, getValueByPath, isMobileDevice } from '@/components/global/utils'
+export default {
+  props: {
+    tableApi: { type: Function, default: () => ({}) },
+    columns: { type: Array, default: () => [] },
+    params: { type: Object, default: () => {} },
+    filterForm: { type: Array, default: () => [] },
+    otherConfig: { type: Object, default: () => {} },
+    projectFrom: { type: String, default: '' },
+    autoRequest: { type: Boolean, default: false },
+    defaultSeachParams: { type: Object, default: () => {} },
+    // 是否需要分页
+    showPagination: { type: Boolean, default: true },
+
+
+    // itemWidth: { type: String, default: '' },
+    // data: { type: Array, default: () => [] },
+    // showlabel: { type: Boolean, default: true },
+    // drawer: { type: Boolean, default: false }, // 开启抽屉模式
+    // formProps: { type: Object, default: () => ({ inline: true }) },
+    // formItemProps: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      loading: false,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      draggingIndex: null,
+      realColumns: this.columns,
+      // tableData: [],
+      tableData: [],
+      dragState: {
+        start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
+        end: -3, // 移动鼠标时所覆盖的元素 index
+        dragging: false, // 是否正在拖动
+        direction: undefined // 拖动方向
+      },
+      headKey: 'dragHead', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
+      scrollX: 0, // 初始x轴scroll位置（用于定位X轴滚动条）
+      hrender: this.$createElement,
+      selectedListIds: [],
+      selectedList: [],
+      defaultParams: {}
+    }
+  },
+  created() {
+    // console.log(this, "xzchizcjzxioj")
+    // console.log(this.$parent.$slots, "xzchizcjzxioj")
+    // console.log(this.$attrs, "asdasdasdasd")
+    this.defaultParams = this.defaultSeachParams
+    this.autoRequest && this.getTableData()
+  },
+  watch: {
+    defaultSeachParams: {
+      handler(newVal) {
+        if (newVal && typeof newVal === 'object') {
+          this.defaultParams = {
+            ...this.defaultParams,
+            ...newVal
+          }
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    columns: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.realColumns = Array.isArray(val) ? [...val] : []
+        this.$nextTick(() => {
+          this.$refs.elTable.doLayout()
+        })
+      }
+    }
+  },
+  computed: {
+
+    processedParams() {
+      const processedParams = { ...this.params, ...this.defaultParams }
+      // 如果有多选的筛选选项 就要配置这个projectFrom
+      if (this.projectFrom === 'ares') {
+        this.filterForm.forEach(item => {
+          if (item.type === 'select' && item.props &&  item.props.multiple) {
+            // console.log(processedParams[item.model] && processedParams[item.model].length === 0,"||||")
+            if (!processedParams[item.model] || processedParams[item.model].length === 0) {
+              processedParams[item.model] = []
+            }
+          } else if (item.type === 'datePicker' && item.privateProps && item.privateProps.type === 'daterange') {
+            if (processedParams[item.model] && processedParams[item.model].length  > 0 && item.callback) {
+              const setValueObj = item.callback(processedParams[item.model])
+              Object.keys(setValueObj).forEach(key => {
+                processedParams[key] = setValueObj[key]
+              })
+              delete processedParams[item.model]
+            }
+          } else if (item.type === 'datePicker' || item.type === 'rangeInput') {
+            delete processedParams[item.model]
+          }
+        })
+        return processedParams
+      } else {
+        this.filterForm.forEach(item => {
+          if (item.type === 'select' && item.props && item.props.multiple) {
+            if (processedParams[item.model]) {
+              processedParams[item.model] = processedParams[item.model].join(',')
+            } else {
+              processedParams[item.model] = ''
+            }
+          } else if (item.type === 'datePicker' && item.privateProps && item.privateProps.type === 'daterange') {
+            if (processedParams[item.model] && processedParams[item.model].length  > 0 && item.callback) {
+              const setValueObj = item.callback(processedParams[item.model])
+              Object.keys(setValueObj).forEach(key => {
+                processedParams[key] = setValueObj[key]
+              })
+              delete processedParams[item.model]
+            }
+          } else if (item.type === 'datePicker') {
+            delete processedParams[item.model]
+          }
+        })
+        // console.log(processedParams, "processedParamsBycps")
+        return processedParams
+      }
+    },
+
+    // columns() {
+    //   return this.columns
+    // }
+  },
+  methods: {
+    typeOf,
+    hasKey,
+    isMobileDevice,
+    isShowTableColumn(item) {
+      if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'function') {
+        return item.isAlwaysShow({
+          item: item
+        })
+      } else if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'string') {
+        return item.isAlwaysShow
+      } else {
+        return true
+      }
+    },
+    async getTableData() {
+      try {
+        // console.log(this.otherConfig.requestBodyCof, "this.tableApi")
+        this.loading = true
+        const pageSize = this.otherConfig.requestBodyCof && this.otherConfig.requestBodyCof.pageSize ? this.otherConfig.requestBodyCof.pageSize : 'pageSize'
+        const currentPage = this.otherConfig.requestBodyCof && this.otherConfig.requestBodyCof.currentPage ? this.otherConfig.requestBodyCof.currentPage : 'currentPage'
+        const params = {
+          [currentPage]: this.currentPage,
+          [pageSize]: this.pageSize,
+          ...this.processedParams
+        }
+        if(!this.showPagination) {
+          delete params[pageSize]
+          delete params[currentPage]
+        }
+        const res = await this.tableApi(params)
+        // 默认路径
+        let listPath = ['data', 'list']
+        let totalPath = ['data', 'total']
+        let statusCodePath = 'code'
+
+        // 检查 otherConfig 是否包含 responderCof
+        if (this.otherConfig.responderCof) {
+          statusCodePath = this.otherConfig.responderCof.statusCode || statusCodePath
+          listPath = this.otherConfig.responderCof.list || listPath
+          totalPath = this.otherConfig.responderCof.total || totalPath
+        }
+        const statusCode = getValueByPath(res, statusCodePath)
+        if (statusCode === 1) {
+          console.log(getValueByPath(res, listPath), "res", getValueByPath(res, totalPath))
+          if ((getValueByPath(res, listPath) && getValueByPath(res, totalPath) > 0 ) || (getValueByPath(res, listPath) && !this.showPagination)) {
+            this.tableData = getValueByPath(res, listPath).map(res => {
+              const newData = { ...res }
+              this.realColumns.forEach(column => {
+                if (column.isSwitchNumber && newData.hasOwnProperty(column.prop)) {
+                  newData[column.prop] = Number(newData[column.prop])
+                }
+              })
+              return newData
+            })
+          } else {
+            this.tableData = []
+          }
+          // this.tableData = getValueByPath(res, listPath) || []
+          this.total = (typeof getValueByPath(res, totalPath) === 'string' ? Number(getValueByPath(res, totalPath)) : getValueByPath(res, totalPath)) || 0
+          this.$listeners.callback && this.$listeners.callback({
+            apiInfo: res,
+            allRequestParams: {
+              [currentPage]: this.currentPage,
+              [pageSize]: this.pageSize,
+              ...this.processedParams
+            }
+          })
+          this.loading = false
+        }
+      } catch (error) {
+        console.log(error, "error")
+        this.tableData = []
+        this.loading = false
+      } finally {
+        this.loading = false
+      }
+    },
+
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`, this.columns)
+      this.pageSize = val
+      this.getTableData()
+    },
+    handleCurrentChange(val) {
+      console.log(this.params, "this.paramsthis.params")
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+      this.getTableData()
+    },
+    // 不更换页数量
+    getCurrentPageList() {
+      this.getTableData()
+    },
+    /** 鼠标摁下触发 */
+    handleMounseDown(e, column, $index) {
+      this.dragState.dragging = true
+      this.dragState.start = parseInt($index - 0)
+      // 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
+      document.addEventListener('mouseup', this.handleMouseUp)
+      // 添加拖拽结束事件
+      document.addEventListener('dragend', this.handleMouseUp)
+
+      // 对选中的表头允许其拖拽
+      const dragclass = '.el-table__header-wrapper .' + column.id
+      const dragDom = document.querySelectorAll(dragclass)
+      dragDom.forEach((dom) => {
+        // 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
+        dom.setAttribute('draggable', true)
+      })
+    },
+
+    /** 鼠标在拖拽移动时触发 */
+    handleDragover(e, column, $index) {
+      if (this.dragState.dragging) {
+        // 获取当前滚动条的位置
+        const scrollDom = this.$refs.elTable.bodyWrapper
+        this.scrollX = scrollDom.scrollLeft
+        const index = parseInt($index - 0) // 记录起始列
+        /** 实时更改鼠标处于表头的位置 */
+        if (index - this.dragState.start !== 0) {
+          this.dragState.direction =
+            index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
+          this.dragState.end = parseInt($index - 0)
+        } else {
+          this.dragState.end = this.dragState.start
+          this.dragState.direction = null
+        }
+      }
+    },
+
+    /** 鼠标抬起或拖拽结束触发 */
+    handleMouseUp() {
+      // 更新拖拽后的表头
+      this.headDraged(this.dragState)
+      const { end } = this.dragState
+      // 初始化拖动状态
+      this.dragState = {
+        start: end,
+        end: -9,
+        dragging: false,
+        direction: undefined
+      }
+      document.removeEventListener('mouseup', this.handleMouseUp)
+      document.removeEventListener('dragend', this.handleMouseUp)
+
+      setTimeout(() => {
+        // 重置拖拽状态
+        this.dragState.start = -9
+      }, 200)
+    },
+
+    // 更新拖拽后的表头
+    headDraged({ start, end, direction }) {
+      console.log(direction, 'direction')
+      if (direction) {
+        const originColumn = this.realColumns[start]
+        // 有位置交换时，原先位置的元素删除，再在目标处插入
+        this.realColumns.splice(start, 1)
+        this.realColumns.splice(end, 0, originColumn)
+        this.headKey = new Date().getTime() + '' // 更新table key值
+        this.$nextTick(() => {
+          // 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
+          this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
+        })
+        console.log('handleDrop', this.realColumns)
+        this.$emit('setStorageCustomCol', this.realColumns)
+      }
+    },
+
+    // 拖动虚线样式设置
+    cellClassName({ columnIndex }) {
+      const { start, end, direction } = this.dragState
+      const target = columnIndex - 0
+      if (target === start) {
+        return 'drag_start'
+      } else if (target === end) {
+        return `drag_end_${direction}`
+      }
+      return ''
+    },
+
+    // 重新设置表头
+    resetColumns(columns) {
+      console.log(columns, "columns")
+      this.realColumns = columns
+      this.headKey = new Date().getTime() + ''
+    },
+    handleSelectionChange(val) {
+      // console.log(val, '123')
+      this.selectedListIds = val.map(item => item[this.otherConfig.rowKey || 'id'])
+      this.selectedList = val
+    },
+    showOverflowTooltip(item) {
+      if (isMobileDevice()) return false
+      if (item.prop === 'operate') return false
+      if (item.overflowTooltip) return true
+      if (this.otherConfig && !this.otherConfig.donShowOverflowTooltip) return true
+      if (this.otherConfig && this.otherConfig.donShowOverflowTooltip) return false
+    },
+    handleSortChange({ column, prop, order }) {
+      // console.log(column, prop, order, 'column, prop, order');
+      this.$emit('sortChangeByApi', { column, prop, order })
+    }
+  }
+}
+</script>
+<style scoped>
+/* 内联 CSS（避免 @import 导致 ::v-deep 未被 Vue 编译器处理而丢失样式） */
+/* .sl-table {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+} */
+@media (max-width: 768px) {
+  .sl-table {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 769px) {
+  .sl-table {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.el-table {
+  display: flex;
+  flex-direction: column
+}
+/deep/ .el-table__header-wrapper {
+  flex: 1 0 1;
+}
+/* /deep/ .el-table__body-wrapper {
+  overflow-y: auto;
+  flex: 1 1 0;
+} */
+/* 移动端样式 */
+@media (max-width: 768px) {
+  /deep/ .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 100%!important;
+  }
+}
+
+@media (min-width: 769px) {
+  /deep/ .el-table__body-wrapper {
+    /* overflow-y: auto; */
+    flex: 1 1 0;
+    /* z-index: 100; */
+  }
+}
+
+/deep/ .el-pagination {
+  display: flex;
+  justify-content: end;
+  margin-top: 20px;
+}
+
+/* 移动端样式 */
+@media (max-width: 768px) {
+  /deep/ .el-pagination {
+    flex-wrap: wrap;
+  }
+}
+
+/* /deep/ .custom-table .el-table__header-wrapper th { */
+  /* cursor: move; 改变鼠标悬停时的光标样式 */
+  /* user-select: none; 禁止用户选择文本 */
+  /* cursor: move; */
+/* } */
+
+/deep/ .el-table .drag_start {
+  opacity: 0.8;
+  color: #f3e8e8fd;
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  -moz-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  -ms-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  -o-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/deep/ .el-table .drag_end_left {
+  border-left: 2px dotted rgba(0, 0, 0, 0.938);
+}
+
+/deep/ .el-table .drag_end_right {
+  border-right: 2px dotted rgba(0, 0, 0, 0.938);
+}
+
+/* /deep/ .el-table .el-table__header-wrapper .el-table__cell { */
+  /* cursor: move; */
+/* } */
+
+/deep/ .el-icon-info {
+  vertical-align: middle;
+}
+</style>
+