magic-page-designer/src/util/transformUtil.ts

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

// 转换值工具类
import { ConfigDetailType, ComponentConfig, InputListConfig } from '../library/page-object'
import Vue from 'vue'

/**
 * 添加属性转换的默认属性
 * @param item 需要改变值的item对象
 * @param configItem 判断的配置
 * @param inputListConfig 输入框的配置
 * @param newAttrObj 需要设置的对象
 */
export function addComponentConfigDefaultAttr(
  item: any,
  configItem: ComponentConfig,
  inputListConfig: InputListConfig,
  newAttrObj: { [key: string]: Function }
): void {
  switch (inputListConfig.component) {
    case ConfigDetailType.Select:
    case ConfigDetailType.Input:
    case ConfigDetailType.Textarea:
    case ConfigDetailType.InputNumber:
      if (!newAttrObj.hasOwnProperty('defaultValue')) {
        if (typeof item.mpdConfig[configItem.type][configItem.name] === 'boolean') {
          newAttrObj.defaultValue = item.mpdConfig[configItem.type][configItem.name]
        } else {
          newAttrObj.defaultValue = item.mpdConfig[configItem.type][configItem.name] || configItem.defaultValue
        }
      }
      break
    default:
      break
  }
}

/**
 * 添加事件转换的默认事件
 * @param item 需要改变值的item对象
 * @param configItem 判断的怕配置
 * @param inputListConfig 输入框的配置
 * @param newEventObj 需要设置的对象
 */
export function addComponentConfigDefaultEvent(
  item: any,
  configItem: ComponentConfig,
  inputListConfig: InputListConfig,
  newEventObj: { [key: string]: Function }
): void {
  switch (inputListConfig.component) {
    case ConfigDetailType.Input:
    case ConfigDetailType.Textarea:
      if (!newEventObj.hasOwnProperty('change')) {
        newEventObj.change = function (e: Event) {
          Vue.set(item.mpdConfig[configItem.type], configItem.name, (e.target as HTMLInputElement).value || undefined)
          // $this.selectPageNodeDom.item.mpdConfig[item.type][item.name] =
          //   (e.target as HTMLInputElement).value || undefined
        }
      }
      break
    case ConfigDetailType.Select:
    case ConfigDetailType.InputNumber:
      if (!newEventObj.hasOwnProperty('change')) {
        newEventObj.change = function (value: any) {
          if (typeof value === 'boolean') {
            Vue.set(item.mpdConfig[configItem.type], configItem.name, value)
            // $this.selectPageNodeDom.item.mpdConfig[item.type][item.name] = value
          } else {
            Vue.set(item.mpdConfig[configItem.type], configItem.name, value || undefined)
            // $this.selectPageNodeDom.item.mpdConfig[item.type][item.name] = value || undefined
          }
        }
      }
      break
    default:
      break
  }
}