低代码平台组件动态icon展示需求

需求是，一个组件由list组成，list里面的对象代表一个模块，一个模块里面又有icon这样的一个list进行icon展示，当list为[]时不展示icon，不为空是根据icon展示对应的icon，组件设计时有部分功能切换时不需要icon，就需要将其icon置为[],需要icon就需要将其之前的icon进行重新赋值

//数据结构
    [
    	//模块1

    	{
    		"funcId": 2,
    		"isShowIcon": 1,
    		"background": {
    			"mode": "0",
    			"image": "",
    			"color": "#60B9D9"
    		},
    		"font": [{
    			"type": 1,
    			"size": "",
    			"color": "#FFFFFF"
    		}],
    		"color": [],
    		"icon": []
    	}
    ]

数据前后对比

效果展示图

实现步骤

1.需要确定是哪一个模块在进行功能切换，需要对其模块进行一个变量进行存储（目的就是将其icon存储起来，后面icon为[]时切换，icon就要进行重新赋值）

2.定义一个数组存放前端需要展示的组件的title以及data（这些数据大部分就是前端展示，大多数组件都是共用这一个数组，不需要提交给后台），当data为空时就要将icon进行重置为[],页面相对应的逻辑就是icon隐藏，icon不为空时就展示icon

3.采用的是vue3 的hooks写法，考虑到有的组件不需要进行icon的展示和隐藏，所以传参的时候就有一个变量进行控制

具体代码

//进行模块监听
function getIds() {
    // 将list里面的id进行监听
    ids.value = config.list.map((item, index) => {
      isUpdateIcon && init(index)
      return item[propsName]
    })
  }
  
  // 监听id变化就更新icon数据
  watchEffect(() => {
    getIds()
  })

  onMounted(() => {
    getIds()
  })

//根据模块进行icon的赋值
function updateIcon(index) {
    // 存变量，初始化为默认的json icon
    const iconConfig = ref(
      componentsJson.find((item) => {
        return item.id === config.id
      }).list[index].icon || []
    )
    // 判断是不是[],不是就更新icon的配置
    if (config.list[index].icon.length != 0) {
      iconConfig.value = config.icon
    }
    //判断是不是可以将icon置为[],判断是不是有data进行icon赋值
    if (config.list[index].isShowIcon && comList.value.data) {
      config.list[index].icon = []
    } else {
      iconConfig.value.forEach((item, index) => {
        item.key = comList.value.icon[index].key
      })
      config.list[index].icon = iconConfig.value
    }
    console.log('2', config)
  }

//将数据合并返回给组件展示，以及修改总数据源的icon
function init(index) {
    const matchedIcons = new Map(list.map((item) => [item.id, item]))
    config.list.forEach((item, index) => {
      const matchedIcon: MatchedIcon = matchedIcons.get(item[propsName])
      if (matchedIcon && item.icon) {
        //更新对应的icon的key
        item.icon.forEach((item, i) => {
          item.key = matchedIcon.icon[i].key
        })
      }
      // 将组件需要的title、data等数据返回
      comList.value = list.find((ele) => {
        return ele.id === item[propsName]
      })
    })
    updateIcon(index)
  }

完整的hooks代码

/*
 * @Descripttion: 监听组件切换icon时，data、title等数据一起更新
 * @version:
 * @Author: lihk
 * @Date: 2023-05-04 14:44:20
 * @LastEditors: lihk
 */
import { watchEffect, ref } from 'vue'
import { moduleList } from '@/views/json/json'
import { componentsJson } from '@/views/build/components/index'

interface MatchedIcon {
  id?: number
  icon?: {
    key: string[]
  }[]
}

/**
 * @description: 根据id合并两个数组
 * @param {*}
 * @return {*}
 * @author: lihk
 */
function mergeArrays(arr1, arr2) {
  return arr1.map((item) => {
    const obj2 = arr2.find((ele) => ele.id === item.id)
    return { ...item, ...obj2 }
  })
}
/**
 * @description: 更新组件的icon
 * @param {*} config 传入的配置
 * @param {*} list 组件传入的数据 {icon，title，data等}
 * @param {*} propsName 组件传入的功能id的属性名，‘funcId’
 * @param {*} isUpdateIcon 判断是不是要根据模块进行icon的重置为[]
 * @return {*} config 将icon等数据加到配置返回,comList组件需要用到title，data等数据
 * @author: lihk
 */
export function useFuncConfig(
  config,
  list,
  propsName = 'id',
  isUpdateIcon = false
) {
  list = mergeArrays(list, moduleList)
  const ids = ref([])
  const comList = ref({
    data: '',
    icon: [],
  })
  function init(index) {
    const matchedIcons = new Map(list.map((item) => [item.id, item]))
    config.list.forEach((item, index) => {
      const matchedIcon: MatchedIcon = matchedIcons.get(item[propsName])
      if (matchedIcon && item.icon) {
        //更新对应的icon的key
        item.icon.forEach((item, i) => {
          item.key = matchedIcon.icon[i].key
        })
      }
      // 将组件需要的title、data等数据返回
      comList.value = list.find((ele) => {
        return ele.id === item[propsName]
      })
    })
    updateIcon(index)
  }
  function updateIcon(index) {
    // 存变量，初始化为默认的json icon
    const iconConfig = ref(
      componentsJson.find((item) => {
        return item.id === config.id
      }).list[index].icon || []
    )
    // 判断是不是[],不是就更新icon的配置
    if (config.list[index].icon.length != 0) {
      iconConfig.value = config.icon
    }
    //判断是不是可以将icon置为[],判断是不是有data进行icon赋值
    if (config.list[index].isShowIcon && comList.value.data) {
      config.list[index].icon = []
    } else {
      iconConfig.value.forEach((item, index) => {
        item.key = comList.value.icon[index].key
      })
      config.list[index].icon = iconConfig.value
    }
    console.log('2', config)
  }
  function getIds() {
    // 将list里面的id进行监听
    ids.value = config.list.map((item, index) => {
      isUpdateIcon && init(index)
      return item[propsName]
    })
  }
  // 监听id变化就更新icon数据
  watchEffect(() => {
    getIds()
  })

  onMounted(() => {
    getIds()
  })

  return {
    config,
    comList,
  }
}