ylwl-cpscoms 1.0.0 → 1.2.0

package/src/SlTable/components/colSetting.vue

@@ -1,86 +0,0 @@
-<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

@@ -1,541 +0,0 @@
-<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>
-