@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/table-settings/settings.vue

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