@kyfe/ks-query-table 0.0.2 → 0.0.3

package/components/table-settings/settings.vue

@@ -1,479 +0,0 @@
-<template>
-  <div :class="{'pe-table-setting-popup': true, 'fixed-head': fixedHead}">
-    <div class="pe-table-setting__wrapper">
-      <div class="pe-table-setting__header">
-        <div class="pe-table-setting__header__title-wrap">
-          <span class="pe-table-setting__header__title">表头编辑</span>
-          <span class="pe-table-setting__header__title-desc">可拖动排序</span>
-        </div>
-        <div class="pe-table-setting__header__table-title">
-          <span class="pe-table-setting__field-sort">序号</span>
-          <span class="pe-table-setting__field-title">指标名称</span>
-          <span class="pe-table-setting__switch">显示/隐藏</span>
-          <span class="pe-table-setting__up">上移</span>
-          <span class="pe-table-setting__down">下移</span>
-        </div>
-      </div>
-      <div :class="{'pe-table-setting__list-wrapper': true, 'fixed-head': fixedHead}">
-        <ul class="pe-table-setting__list">
-          <draggable v-model="columns"
-                     draggable=".draggable-li"
-                     :delay="delay"
-                     @start="isDraggable = true"
-                     @end="isDraggable = false"
-                     @change="draggableChange">
-            <li v-for="(column, index) of columns"
-                :key="column.key"
-                :class="{ 'draggable-li':! column.fixed }">
-              <div :class="{ 'parent-col': true, 'active': activeIndex === index }">
-                <span class="list_item__field-sort">
-                  <ks-field v-model="column.sortNum"
-                            :border="true"
-                            :disabled="!!column.fixed"
-                            type="digit"
-                            :ref="'field' + index"
-                            @input="validateInput($event, column, index)"
-                            @focus="sortFocus($event, column)"
-                            @blur="sortNumBlur($event, column.sortNum, index, column)"
-                            @keyup.enter="sortNumBlur($event, column.sortNum, index)"
-                             />
-                </span>
-                <span :class="{'list_item__field-title': true, 'expand': !!column.collapseKeys}"
-                      @click="(e)=>{expandClick(column,e)}">
-                  <span class="" >{{ column.label2 || column.label }}</span>
-                  <span v-show="column.expandCols && column.expandCols.length">
-                    <span class="arrow up"
-                          v-show="column.collapsed" />
-                    <span class="arrow down"
-                          v-show="!column.collapsed" />
-                  </span>
-                </span>
-                <span class="list_item__switch">
-                  <ks-switch size="12"
-                             :disabled="column.disabled"
-                             @change="switchChange($event, column, column)"
-                             v-model="column.show" />
-                </span>
-                <span class="list_item__up"
-                      @click="itemUp(columns, index, column, 'first')">
-                  <span :class="{ disabled: disabledItemUp(columns, index, column, 'first') }"></span>
-                </span>
-                <span class="list_item__down"
-                      @click="itemDown(columns, index, column, 'first')">
-                  <span :class="{ disabled: disabledItemDown(columns, index, column, 'first') }"></span>
-                </span>
-              </div>
-              <draggable v-show="column.collapsed && !isDraggable"
-                         v-model="column.expandCols"
-                         @change="expandColsDraggableChange"
-                         @start="childDraggable = true"
-                         @end="childDraggable = false"
-                         draggable=".expand-col-box"
-                         :delay="delay"
-                         >
-                <div v-for="(expandItem, expandIndex) in column.expandCols"
-                     :key="expandItem.key"
-                     class="expand-col-box">
-                  <div class="expand-col">
-                    <span class="list_item__field-sort"></span>
-                    <span :class="{ 'list_item__field-title': true, expand: !!expandItem.collapseKeys || expandItem.isExpand }" @touch.stop @click="showPopover">
-                      <span >{{ expandItem.label }}</span>
-                    </span>
-                    <span class="list_item__switch">
-                      <ks-switch size="12"
-                                 :disabled="expandItem.disabled"
-                                 v-model="expandItem.show"
-                                 @change="switchChange($event, column, expandItem)" />
-                    </span>
-                    <span class="list_item__up"
-                          @click="itemUp(column.expandCols, expandIndex, expandItem)">
-                      <span :class="{ disabled: disabledItemUp(column.expandCols, expandIndex, expandItem) }"></span>
-                    </span>
-                    <span class="list_item__down"
-                          @click="itemDown(column.expandCols, expandIndex, expandItem)">
-                      <span :class="{ disabled: disabledItemDown(column.expandCols, expandIndex, expandItem) }"></span>
-                    </span>
-                  </div>
-                  <draggable v-show="expandItem.expandCols && !childDraggable"
-                             v-model="expandItem.expandCols"
-                             draggable=".child-expand-col"
-                             @change="expandColsDraggableChange"
-                             :delay="delay">
-                    <div v-for="(cExpandItem, cExpandIndex) in expandItem.expandCols"
-                         :key="cExpandItem.key + cExpandIndex"
-                         class="child-expand-col">
-                      <span class="list_item__field-sort"></span>
-                      <span class="list_item__field-title expand" @touch.stop @click="showPopover">
-                        {{ cExpandItem.label }}
-                      </span>
-                      <span class="list_item__switch">
-                        <ks-switch size="12"
-                                   :disabled="cExpandItem.disabled"
-                                   v-model="cExpandItem.show"
-                                   @change="switchChange($event, column, cExpandItem, expandItem)" />
-                      </span>
-                      <span class="list_item__up"
-                            @click="itemUp(expandItem.expandCols, cExpandIndex, null, 'expand')">
-                        <span :class="{ disabled: disabledItemUp(expandItem.expandCols, cExpandIndex, null, 'expand') }"></span>
-                      </span>
-                      <span class="list_item__down"
-                            @click="itemDown(expandItem.expandCols, cExpandIndex, null, 'expand')">
-                        <span :class="{ disabled: disabledItemDown(expandItem.expandCols, cExpandIndex, null, 'expand') }"></span>
-                      </span>
-                    </div>
-                  </draggable>
-                </div>
-              </draggable>
-            </li>
-          </draggable>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import cloneDeep from 'lodash/cloneDeep'
-import draggable from 'vuedraggable'
-import tippy from 'tippy.js';
-import './index.less'
-
-export default {
-  title: 'tableSettings',
-  components: {
-    draggable,
-  },
-  props: {
-    tableColumns: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    fixedHead: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      delay: 200,
-      columns: [],
-      activeIndex: -1,
-      hideColumns: [],
-      isDraggable: false,
-      childDraggable: false,
-    }
-  },
-  computed: {
-    fixedColLength() {
-      return this.columns.filter(v => v.fixed).length
-    },
-  },
-  // watch: {
-  //   columns: {
-  //     deep: true,
-  //     handler(val) {
-  //       console.log(val)
-  //     },
-  //   },
-  // },
-  methods: {
-     parseStyleValue (value)  {
-      const parsed = parseFloat(value);
-      return isNaN(parsed) ? 0 : parsed; // 如果解析失败，默认返回 0
-    },
-    showPopover(event) {
-      const element = event.currentTarget;
-      const range = document.createRange();
-      range.selectNodeContents(element);
-      const textWidth = range.getBoundingClientRect().width;
-      const style = window.getComputedStyle(element);
-      const clientWidth = element.clientWidth - this.parseStyleValue(style.paddingLeft) - this.parseStyleValue(style.paddingRight);
-      if (textWidth > clientWidth) {
-        tippy(element, {
-          content: element.innerText,
-          placement: 'top',
-          theme: 'light',
-          appendTo: document.body,
-          offset: [0,-4],
-          hideOnClick: true, // 点击任何地方都会关闭
-          interactive: true, // 允许与弹窗交互
-          trigger: 'manual', // 手动触发
-          onShow(instance) {
-            // 点击外部关闭的处理
-            const handleClickOutside = (e) => {
-              if (!instance.popper.contains(e.target) && e.target !== element) {
-                instance.hide();
-              }
-            };
-            
-            document.addEventListener('touchstart', handleClickOutside);
-            
-            instance._clickOutsideHandler = handleClickOutside;
-          },
-          onHide(instance) {
-            // 移除事件监听
-            document.removeEventListener('touchstart', instance._clickOutsideHandler);
-          },
-          onClickOutside(instance) {
-            instance.hide();
-          }
-        }).show();
-      }
-    },
-    validateInput(val, column, index) {
-      let _val = val.replace(/[^\d]*/g, '')
-      column.sortNum = _val
-      this.$refs['field' + index][0].$el.querySelector('input').value = _val
-    },
-    sortFocus(e, column) {
-      e.target.value = ''
-      column.sortNum = ''
-    },
-    expandClick(column,e) {
-      this.showPopover(e)
-      column.collapsed = !column.collapsed
-      this.$forceUpdate()
-    },
-    switchChange(status, col, curCol, parentCol) {
-      if (curCol.expandCols && curCol.expandCols.length) {
-        curCol.expandCols.forEach(v => {
-          v.show = status
-          if (v.expandCols) {
-            v.expandCols.forEach(e => {
-              e.show = status
-            })
-          }
-        })
-      }
-      if (status) {
-        // 一级表头同时打开
-        col.show = true
-        if (parentCol) {
-          // 父级表头打开
-          parentCol.show = true
-        }
-      }
-      this.$emit('change', [...this.getData()])
-    },
-    disabledItemUp(cols, oldIndex, column, type) {
-      const { fixed, collapseKeys, isExpand } = column || {}
-      if (fixed) {
-        return true
-      } else if ((oldIndex - this.fixedColLength === 0 && type === 'first') || oldIndex == 0) {
-        if (type === 'first') {
-          // 一级表头
-          return true
-        } else if (!!collapseKeys || isExpand || type === 'expand') {
-          // 伸缩列
-          return true
-        } else {
-          // 二级表头
-          return true
-        }
-      } else {
-        return false
-      }
-    },
-    disabledItemDown(columns, index, column, type) {
-      const { fixed, collapseKeys, isExpand } = column || {}
-      if (fixed) {
-        return true
-      } else if (index === columns.length - 1) {
-        if (type === 'first') {
-          // 一级表头
-          return true
-        } else if (!!collapseKeys || isExpand || type === 'expand') {
-          // 伸缩列
-          return true
-        } else {
-          // 二级表头
-          return true
-        }
-      } else {
-        return false
-      }
-    },
-    itemUp(cols, oldIndex, column, type) {
-      const { fixed, collapseKeys, isExpand } = column || {}
-      if (fixed) {
-        return this.$toast('当前为固定列，无法移动')
-      } else if ((oldIndex - this.fixedColLength === 0 && type === 'first') || oldIndex == 0) {
-        if (type === 'first') {
-          // 一级表头
-          return this.$toast('当前为第一列，无法上移')
-        } else if (!!collapseKeys || isExpand || type === 'expand') {
-          // 伸缩列
-          return this.$toast('已为子表头的第一列，无法上移')
-        } else {
-          // 二级表头
-          return this.$toast('已为二级表头的第一列，无法上移')
-        }
-      }
-      cols.splice(oldIndex - 1, 0, cols.splice(oldIndex, 1)[0])
-      this.resetSortNum()
-    },
-    itemDown(cols, oldIndex, column, type) {
-      const { fixed, collapseKeys, isExpand } = column || {}
-      if (fixed) {
-        return this.$toast('当前为固定列，无法移动')
-      } else if (oldIndex === cols.length - 1) {
-        if (type === 'first') {
-          // 一级表头
-          return this.$toast('当前为最后一列，无法下移')
-        } else if (!!collapseKeys || isExpand || type === 'expand') {
-          // 伸缩列
-          return this.$toast('已为子表头的最后一列，无法下移')
-        } else {
-          // 二级表头
-          return this.$toast('已为二级表头的最后一列，无法下移')
-        }
-      }
-      cols.splice(oldIndex + 1, 0, cols.splice(oldIndex, 1)[0])
-      this.resetSortNum()
-    },
-    sortNumBlur(e, newIndex, oldIndex, column) {
-      if (!newIndex) {
-        e.target.value = oldIndex + this.fixedColLength
-        column.sortNum = oldIndex + this.fixedColLength
-        return
-      }
-      let _newIndex = newIndex <= this.fixedColLength ? this.fixedColLength + 1 : newIndex
-      this.columns.splice(_newIndex - 1, 0, this.columns.splice(oldIndex, 1)[0])
-      this.resetSortNum()
-      // 暂时不激活
-      // this.activeIndex = _newIndex - 1
-    },
-    draggableChange() {
-      this.resetSortNum()
-    },
-    expandColsDraggableChange() {
-      this.$forceUpdate()
-    },
-    formatColumns(val) {
-      let _columns = val || this.tableColumns
-      this.hideColumns = _columns.filter(v => v.isHide)
-      this.columns = []
-      let allCollapseKeys = []
-      _columns.forEach(v => {
-        // 只有一级且 有展开列
-        if (v.collapseKeys && v.collapseKeys.length) {
-          v.expandCols = []
-          // v.collapsed = true
-          // 找到需要展开的列
-          v.collapseKeys.forEach(cKey => {
-            let collapseItem = _columns.find(t => t.key === cKey)
-            if (collapseItem) {
-              allCollapseKeys.push(collapseItem.key)
-              if (!v.expandCols.some(e => e.key === collapseItem.key)) {
-                collapseItem.isExpand = true
-                v.expandCols.push(collapseItem)
-              }
-            }
-          })
-        }
-        // 处理children
-        if (v.children && v.children.length) {
-          v.expandCols = []
-          v.collapsed = true
-          v.hasChildren = true
-          // 当前子级下的所有展开列
-          v.children.allCollapseKeys = []
-          v.children.forEach(children => {
-            if (children.collapseKeys && children.collapseKeys.length) {
-              // 先追加到二级
-              v.expandCols.push(children)
-              children.expandCols = []
-              // v.collapsed = true
-              // 找到需要二级需要展开收起的列
-              children.collapseKeys.forEach(cKey => {
-                let collapseItem = v.children.find(t => t.key === cKey)
-                if (collapseItem) {
-                  v.children.allCollapseKeys.push(collapseItem.key)
-                  if (!children.expandCols.some(e => e.key === collapseItem.key)) {
-                    collapseItem.isExpand = true
-                    children.expandCols.push(collapseItem)
-                  }
-                }
-              })
-            } else {
-              if (!v.children.allCollapseKeys.includes(children.key)) {
-                v.expandCols.push(children)
-              }
-            }
-          })
-        }
-        // 非收起列
-        if (!allCollapseKeys.includes(v.key) && !v.isHide) {
-          this.columns.push(v)
-        }
-      })
-      this.resetSortNum()
-    },
-    resetSortNum() {
-      this.columns = this.columns.map((v, index) => {
-        v.sortNum = index + 1
-        return v
-      })
-      this.$emit('change', [...this.getData()])
-    },
-    getData() {
-      let currentColumns = []
-      let _columns = cloneDeep(this.columns)
-      _columns.forEach(v => {
-        // 防止展开列重复添加
-        if (!currentColumns.some(c => c.key === v.key)) {
-          currentColumns.push(v)
-        }
-        // 处理一级的展开列
-        if (v.collapseKeys) {
-          v.$collapseKeys = []
-          v.expandCols.forEach(eItem => {
-            if (v.collapseKeys.includes(eItem.key)) {
-              currentColumns.push(eItem)
-              v.$collapseKeys.push(eItem.key)
-            }
-          })
-          v.collapseKeys = v.$collapseKeys
-          delete v.expandCols
-          delete v.$collapseKeys
-        } else if (v.children && v.children.length) {
-          v.$children = []
-          let c_expandCols = v.expandCols
-          c_expandCols.forEach(c_item => {
-            if (c_item.collapseKeys) {
-              // 二级展开列
-              c_item.$collapseKeys = []
-              // 追加自己
-              v.$children.push(c_item)
-              c_item.expandCols.forEach(c_item_e => {
-                // 追加展开列
-                if (c_item.collapseKeys.includes(c_item_e.key)) {
-                  v.$children.push(c_item_e)
-                  c_item.$collapseKeys.push(c_item_e.key)
-                }
-              })
-              c_item.collapseKeys = c_item.$collapseKeys
-              delete c_item.$collapseKeys
-              delete c_item.expandCols
-            } else {
-              v.$children.push(c_item)
-            }
-          })
-          v.children = v.$children
-          delete v.expandCols
-          delete v.$children
-        }
-      })
-      return [...this.hideColumns, ...currentColumns]
-    },
-  },
-  created() {
-    // this.formatColumns()
-  },
-}
-</script>
-
-<style>
-</style>