https://www.tech-long.com/src/hooks/module.js

1import Hook from './hook.js'
2import { findAllNodes, findNode, beforeDeletePackage } from './common.js'
3export default class HookModule extends Hook {
4  constructor(ctx, params, module) {
5    super(ctx, params, 'module', module)
6  }
7  static afterRenderApp () {
8    // console.log(`afterRenderApp module`);
9    
10    calcMovePackage()
11  }
12  static beforePushPackage(newPackage, option = {}, messageClass) {
13    const packages = window.design.packages
14    const { PostMessages } = messageClass
15    /**
16     * 限制包括column-tabs组件的模块重复添加
17    ------------------------------------------------------------ */
18    let breadcrumb = ctx.state.template.block.breadcrumb
19    let tabsItem
20    if (breadcrumb) { 
21      tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
22    }
23    let hasColumnTabs = findNode(newPackage, node => node.type === 'column-tabs')
24    if (tabsItem && hasColumnTabs) {
25      new Modal().warning('该类型模块数量已达上限！', '提示').open()
26      return false
27    }
28
29    /**
30     * 添加收藏模块，防止重复的sign
31    ------------------------------------------------------------ */
32    newPackage.name_sign = ''
33    const listArr = findAllNodes(newPackage, node => node.type === 'list')
34    listArr.forEach(item => {
35      if (item.config.list.button_text_sign) {
36        item.config.list.button_text_sign = ''
37      }
38    })
39    /**
40     * 如果面包屑板块中存在column-tabs组件，添加的 module 自动关联当前tab
41    ------------------------------------------------------------ */
42    const selfPackage = option.messageSelfPackage
43    const addPackageState = window.ctx.state.addPackageState
44    
45    if (newPackage.dir === 'module' && (selfPackage.tab_key || addPackageState?.from === 'column-tabs')) {
46      // let newColumnTabs = findNode(newPackage, node => node.type === 'column-tabs')
47      // if (newColumnTabs) {
48
49      // }
50      let breadcrumb = ctx.state.template.block.breadcrumb
51      if (breadcrumb) {
52        // let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
53        if (tabsItem) {
54          let activeIndex = window.columnTabsState?.[tabsItem.attr_id]?.activeIndex || 0
55          const relate_tab_key = `column-tab-panel-item__${activeIndex}-${globalThis.Server.getSign()}`
56          newPackage.tab_key = relate_tab_key
57
58          const current_tab_panel = tabsItem.content.data[activeIndex].tab_panel
59          let selfTabKeyIndex = current_tab_panel.findIndex(item => item.relate_tab_key === selfPackage.tab_key)
60          current_tab_panel.splice(selfTabKeyIndex < 0 ? current_tab_panel.length : selfTabKeyIndex+1, 0, { relate_tab_key, dir: 'module' })
61          
62          // 更新tabs组件数据
63          window.design.render(tabsItem.attr_id, false)
64          PostMessages.ins().updataPackage(tabsItem)
65          // ReceiveMessages.ins().editPackage(tabsItem)
66        }
67      }
68    }
69
70    return newPackage
71  }
72  beforeDeletePackage(designBox, messageClass) {
73    const { packageItem } = designBox.getInsideData()
74    const { ReceiveMessages } = messageClass
75    const packages = window.design.packages
76    /**
77     * 删除自身在 column-tabs 中的 tab_panel 数据
78    ------------------------------------------------------------ */
79    let breadcrumb = ctx.state.template.block.breadcrumb
80    if (breadcrumb && packages[packageItem.parent_attr_id]?.type === 'main') {
81      let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
82      if (tabsItem) {
83        tabsItem.content.data.forEach(item => {
84          item.tab_panel = item.tab_panel.filter(item =>  item.relate_tab_key !== packageItem.tab_key)
85        })
86        // 更新tabs组件数据
87        // PostMessages.ins().updataPackage(tabsItem)
88        ReceiveMessages.ins().editPackage(tabsItem)
89      }
90    }
91    /**
92     * 删除关联 module
93    ------------------------------------------------------------ */
94    beforeDeletePackage(designBox, messageClass)
95  }
96  
97  afterMovePackage(targetPackage, type, messageClass) {
98    // console.log(`afterMovePackage module`);
99    const { PostMessages } = messageClass
100    let breadcrumb = ctx.state.template.block.breadcrumb
101    if (breadcrumb) {
102      let tabsItem = findNode(breadcrumb, node =>

102 node.type === 'column-tabs')
103      if (tabsItem) {
104        let activeIndex = window.columnTabsState?.[tabsItem.attr_id]?.activeIndex || 0
105        const current_tab_panel = tabsItem.content.data[activeIndex].tab_panel
106        const currentIndex = current_tab_panel.findIndex(item => item.relate_tab_key === targetPackage.tab_key)
107        if (currentIndex >= 0) {
108          if (type === 1 && currentIndex > 0) { //上移
109            const temp = current_tab_panel[currentIndex - 1]
110            current_tab_panel[currentIndex - 1] = current_tab_panel[currentIndex]
111            current_tab_panel[currentIndex] = temp
112          } else if (type === -1 && currentIndex < current_tab_panel.length - 1) { //下移
113            const temp = current_tab_panel[currentIndex + 1]
114            current_tab_panel[currentIndex + 1] = current_tab_panel[currentIndex]
115            current_tab_panel[currentIndex] = temp
116          }
117        }
118        PostMessages.ins().updataPackage(tabsItem)
119        calcMovePackage(current_tab_panel)
120      }
121    }
122  }
123}
124
125function calcMovePackage(current_tab_panel) {
126  let breadcrumb = ctx.state.template.block.breadcrumb
127  if (breadcrumb) {
128    let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
129    if (tabsItem) {
130      // let activeIndex = window.columnTabsState?.[tabsItem.attr_id]?.activeIndex || 0
131      // const current_tab_panel = tabsItem.content.data[activeIndex].tab_panel
132      // // if (targetPackage.tab_key)
133      // const currentIndex = current_tab_panel.findIndex(item => item.relate_tab_key === targetPackage.tab_key)
134      // if (currentIndex >= 0) {
135      //   if (type === 1 && currentIndex > 0) { //上移
136      //     const temp = current_tab_panel[currentIndex - 1]
137      //     current_tab_panel[currentIndex - 1] = current_tab_panel[currentIndex]
138      //     current_tab_panel[currentIndex] = temp
139      //   } else if (type === -1 && currentIndex < current_tab_panel.length - 1) { //下移
140      //     const temp = current_tab_panel[currentIndex + 1]
141      //     current_tab_panel[currentIndex + 1] = current_tab_panel[currentIndex]
142      //     current_tab_panel[currentIndex] = temp
143      //   }
144      // }
145      function handler(tab_panel) {
146        tab_panel?.forEach((panelInfo, panelIndex, tab_panel) => {
147          const moveUpPackageIcon = document.querySelector(`[package-block-type="main"] [package-item="module"][tab-key="#${panelInfo.relate_tab_key}"] > .design-box [data-click="moveUpPackage"]`)
148          const moveDownPackageIcon = document.querySelector(`[package-block-type="main"] [package-item="module"][tab-key="#${panelInfo.relate_tab_key}"] > .design-box [data-click="moveDownPackage"]`)
149          const isFirst = panelIndex === 0
150          const isLast = panelIndex === tab_panel.length - 1
151          if (isFirst && !isLast) {
152            if (moveUpPackageIcon) moveUpPackageIcon.classList.add('d-none')
153            if (moveDownPackageIcon) moveDownPackageIcon.classList.remove('d-none')
154          } else if (!isFirst && isLast) {
155            if (moveUpPackageIcon) moveUpPackageIcon.classList.remove('d-none')
156            if (moveDownPackageIcon) moveDownPackageIcon.classList.add('d-none')
157          } else if (!isFirst && !isLast) {
158            if (moveUpPackageIcon) moveUpPackageIcon.classList.remove('d-none')
159            if (moveDownPackageIcon) moveDownPackageIcon.classList.remove('d-none')
160          } else if (isFirst && isLast) {
161            if (moveUpPackageIcon) moveUpPackageIcon.classList.add('d-none')
162            if (moveDownPackageIcon) moveDownPackageIcon.classList.add('d-none')
163          }
164        })
165      }
166      if (current_tab_panel) {
167        handler(current_tab_panel)
168      } else {
169        tabsItem.content.data.forEach(item => {
170          handler(item.tab_panel)
171          // item.tab_panel?.forEach((panelInfo, panelIndex, tab_panel) => {
172          //   const moveUpPackageIcon = document.querySelector(`[package-block-type="main"] [package-item="module"][tab-key="#${panelInfo.relate_tab_key}"] > .design-box [data-click="moveUpPackage"]`)
173          //   const moveDownPackageIcon = document.querySelector(`[package-block-type="main"] [package-item="module"][tab-key="#${panelInfo.relate_tab_key}"] > .design-box [data-click="moveDownPackage"]`)
174          //   const isFirst = panelIndex === 0
175          //   const isLast = panelIndex === tab_panel.length - 1
176          //   if (isFirst && !isLast) {
177          //     if (moveUpPackageIcon) moveUpPackageIcon.classList.add('d-none')
178          //     if (moveDownPackageIcon) moveDownPackageIcon.classList.remove('d-none')
179          //   } else if (!isFirst && isLast) {
180          //     if (moveUpPackageIcon) moveUpPackageIcon.classList.remove('d-none')
181          //     if (moveDownPackageIcon) moveDownPackageIcon.classList.add('d-none')
182          //   } else if (!isFirst && !isLast) {
183          //     if (moveUpPackageIcon) moveUpPackageIcon.classList.remove('d-none')
184          //     if (moveDownPackageIcon) moveDownPackageIcon.classList.remove('d-none')
185          //   } else if (isFirst && isLast) {
186          //     if (moveUpPackageIcon) moveUpPackageIcon.classList.add('d-none')
187          //     if (moveDownPackageIcon) moveDownPackageIcon.classList.add('d-none')
188          //   }
189          // })
190          
191        })
192      }
193
194      const firstOutsiteModuleIcon = document.querySelector(`[package-block-type="main"] [package-item="module"]:not([tab-key]) > .design-box [data-click="moveUpPackage"]`)
195      // console.log(firstOutsiteModuleIcon);
196      
197      if (firstOutsiteModuleIcon) firstOutsiteModuleIcon.classList.add('d-none')
198    }
199  }
200}