https://www.kimeery.com/src/hooks/grid.js

1import Hook from './hook.js'
2import {findNode, forEachRelateGrid, beforeDeletePackage, beforeRender, beforeCopyTabs } from './common.js'
3export default class HookGrid extends Hook {
4  constructor(ctx, params, grid) {
5    super(ctx, params, 'grid', grid)
6  }
7  static beforePushPackage(newPackage, option = {}) {
8    const packages = window.design.packages
9    /**
10     * 禁止选项卡嵌套
11    ------------------------------------------------------------ */
12    const addPackageState = window.ctx.state.addPackageState
13    if (addPackageState.action === 'moduleToGrid' && option.messageSelfPackage?.tab_key && /^module-tabs/.test(newPackage.code)) {
14      new Modal().warning('选项卡模块内不能添加选项卡模块！', '提示').open()
15      return false
16    }
17    /**
18     * tabs组件内点击添加的grid自动关联当前tab
19    ------------------------------------------------------------ */
20    const selfPackage = option.messageSelfPackage
21    if (selfPackage && !option.messagesCheckTargetIsParent && selfPackage.dir ===  'grid' && (selfPackage.tab_key || addPackageState.from === 'tabs')) {
22      let tabsItem
23      if (selfPackage.tab_key) {
24        tabsItem = findNode(packages[selfPackage.parent_attr_id], node => {
25          return node.type === 'tabs' && node.content.data.some(item => {
26            return item.tab_panel.some(item2 => {
27              return item2.relate_tab_key === selfPackage.tab_key
28            })
29          })
30        })
31      } else if (addPackageState.originAttrId) {
32        tabsItem = packages[addPackageState.originAttrId]
33      }
34      if (tabsItem) {
35        let activeIndex = window.tabsState?.[tabsItem.attr_id]?.activeIndex || 0
36        const relate_tab_key = `tab-panel-item__${activeIndex}-${new Date().getTime()}`
37        newPackage.tab_key = relate_tab_key
38        if (!newPackage.style) newPackage.style = {}
39        if (!newPackage.style.default) newPackage.style.default = {default: {}}
40        newPackage.style.default.default = { 'padding-left': '0', 'padding-right': '0', ...newPackage.style.default.default }
41        
42        // newPackage.is_fluid = 1
43        const current_tab_panel = tabsItem.content.data[activeIndex].tab_panel
44        let selfTabKeyIndex = current_tab_panel.findIndex(item => item.relate_tab_key === selfPackage.tab_key)
45        current_tab_panel.splice(selfTabKeyIndex < 0 ? current_tab_panel.length : selfTabKeyIndex+1, 0, { relate_tab_key, dir: 'grid' })
46      }
47    }
48    return newPackage
49  }
50  beforeCopyPackage(...arg) {
51    return beforeCopyTabs(...arg)
52  }
53  // afterEditPackage(packageItem, messageClass) {
54  //   const packages = window.design.packages
55  //   const { PostMessages } = messageClass
56  //   /**
57  //    * 同步全屏设置
58  //   ------------------------------------------------------------ */
59  //   const tabsItem = findNode(packageItem, node => node.type === 'tabs')
60  //   if (tabsItem) {
61  //     forEachRelateGrid(tabsItem, packages, (gridItem) => {
62  //       gridItem.is_fluid = packageItem.is_fluid
63  //     })
64  //     // 更新数据
65  //     PostMessages.ins().updataPackage(packages[packageItem.parent_attr_id])
66  //   }
67  // }
68  beforeRender(...arg) {
69    return beforeRender(...arg)
70  }
71  beforeDeletePackage(designBox, messageClass) {
72    const { packageItem } = designBox.getInsideData()
73    const { ReceiveMessages } = messageClass
74    const packages = window.design.packages
75    /**
76     * 删除自身在 tabs 中的 tab_panel 数据
77    ------------------------------------------------------------ */
78    const tabsItem = findNode(packages[packageItem.parent_attr_id], node => {
79      return node.type === 'tabs' && node.content.data.some(item => {
80        return item.tab_panel.some(item2 => {
81          return item2.relate_tab_key === packageItem.tab_key
82        })
83      })
84    })
85    if (tabsItem) {
86      tabsItem.content.data.forEach(item => {
87        item.tab_panel = item.tab_panel.filter(item =>  item.relate_tab_key !== packageItem.tab_key)
88      })
89      // 更新tabs组件数据
90      // PostMessages.ins().updataPackage(tabsItem)
91      ReceiveMessages.ins().editPackage(tabsItem)
92    }
93    
94    /**
95     * 删除关联grid
96    ------------------------------------------------------------ */
97    beforeDeletePackage(designBox, messageClass)
98  }
99  afterMovePackage(targetPackage, type, messageClass) {
100    const { PostMessages } = messageClass
101    const packages = window.design.packages
102    /**
103     * 移动自身在 tabs 中的 tab_panel 数据
104    ------------------------------------------------------------ */
105    const tabsItem = findNode(packages[targetPackage.parent_attr_id], node => {
106      return node.type === 'tabs' && node.content.data.some(item => {
107        return item.tab_panel.some(item2 => {
108          return item2.relate_tab_key === targetPackage.tab_key
109        })
110      })
111    })
112    if (tabsItem) {
113      tabsItem.content.data.some(item => {
114        let currentIndex = item.tab_panel.findIndex(item => item.relate_tab_key === targetPackage.tab_key)
115        if (currentIndex !== -1) {
116          item.tab_panel = moveElement(item.tab_panel, currentIndex, type)
117          // 更新tabs组件数据
118          PostMessages.ins().updataPackage(tabsItem)
119          return true
120        }
121      })
122    }
123  }
124}
125
126function moveElement(arr, index, step) {
127  // 计算目标位置
128  const targetIndex = index - step;
129  
130  // 检查目标位置是否超出数组范围
131  if (targetIndex < 0 || targetIndex >= arr.length) {
132    return arr; // 超出范围则不移动
133  }
134  
135  // 取出当前元素
136  const [item] = arr.splice(index, 1);
137  
138  // 插入到目标位置
139  arr.splice(targetIndex, 0, item);
140  
141  return arr;
142}