1

yyb

12 小时以前 69b917fa605be8ccd0984e5c095f24d6476dce95

 src/utils/generator/js.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,370 @@
import { titleCase } from '@/utils/index'
import { trigger } from './config'
// æ–‡ä»¶å¤§å°è®¾ç½®
const units = {
  KB: '1024',
  MB: '1024 / 1024',
  GB: '1024 / 1024 / 1024',
}
/**
 * @name: ç”Ÿæˆjs需要的数据
 * @description: ç”Ÿæˆjs需要的数据
 * @param {*} conf
 * @param {*} type å¼¹çª—或表单
 * @return {*}
 */
export function makeUpJs(conf, type) {
  conf = JSON.parse(JSON.stringify(conf))
  const dataList = []
  const ruleList = []
  const optionsList = []
  const propsList = []
  const methodList = []
  const uploadVarList = []

  conf.fields.forEach((el) => {
    buildAttributes(
      el,
      dataList,
      ruleList,
      optionsList,
      methodList,
      propsList,
      uploadVarList
    )
  })

  const script = buildexport(
    conf,
    type,
    dataList.join('\n'),
    ruleList.join('\n'),
    optionsList.join('\n'),
    uploadVarList.join('\n'),
    propsList.join('\n'),
    methodList.join('\n')
  )
  
  return script
}
/**
 * @name: ç”Ÿæˆå‚æ•°
 * @description: ç”Ÿæˆå‚数，包括表单数据表单验证数据，多选选项数据，上传数据等
 * @return {*}
 */
function buildAttributes(
  el,
  dataList,
  ruleList,
  optionsList,
  methodList,
  propsList,
  uploadVarList
){
  buildData(el, dataList)
  buildRules(el, ruleList)

  if (el.options && el.options.length) {
    buildOptions(el, optionsList)
    if (el.dataType === 'dynamic') {
      const model = `${el.vModel}Options`
      const options = titleCase(model)
      buildOptionMethod(`get${options}`, model, methodList)
    }
  }

  if (el.props && el.props.props) {
    buildProps(el, propsList)
  }

  if (el.action && el.tag === 'el-upload') {
    uploadVarList.push(
      `
      // ä¸Šä¼ è¯·æ±‚路径
      const ${el.vModel}Action = ref('${el.action}')
      // ä¸Šä¼ æ–‡ä»¶åˆ—表
      const ${el.vModel}fileList =  ref([])`
    )
    methodList.push(buildBeforeUpload(el))
    if (!el['auto-upload']) {
      methodList.push(buildSubmitUpload(el))
    }
  }

  if (el.children) {
    el.children.forEach((el2) => {
      buildAttributes(
        el2,
        dataList,
        ruleList,
        optionsList,
        methodList,
        propsList,
        uploadVarList
      )
    })
  }
}
/**
 * @name: ç”Ÿæˆè¡¨å•æ•°æ®formData
 * @description: ç”Ÿæˆè¡¨å•æ•°æ®formData
 * @param {*} conf
 * @param {*} dataList æ•°æ®åˆ—表
 * @return {*}
 */
function buildData(conf, dataList) {
  if (conf.vModel === undefined) return
  let defaultValue
  if (typeof conf.defaultValue === 'string' && !conf.multiple) {
    defaultValue = `'${conf.defaultValue}'`
  } else {
    defaultValue = `${JSON.stringify(conf.defaultValue)}`
  }
  dataList.push(`${conf.vModel}: ${defaultValue},`)
}
/**
 * @name: ç”Ÿæˆè¡¨å•éªŒè¯æ•°æ®rule
 * @description: ç”Ÿæˆè¡¨å•éªŒè¯æ•°æ®rule
 * @param {*} conf
 * @param {*} ruleList éªŒè¯æ•°æ®åˆ—表
 * @return {*}
 */
function buildRules(conf, ruleList) {
  if (conf.vModel === undefined) return
  const rules = []
  if (trigger[conf.tag]) {
    if (conf.required) {
      const type = Array.isArray(conf.defaultValue) ? "type: 'array'," : ''
      let message = Array.isArray(conf.defaultValue)
        ? `请至少选择一个${conf.vModel}`
        : conf.placeholder
      if (message === undefined) message = `${conf.label}不能为空`
      rules.push(
        `{ required: true, ${type} message: '${message}', trigger: '${
          trigger[conf.tag]
        }' }`
      )
    }
    if (conf.regList && Array.isArray(conf.regList)) {
      conf.regList.forEach((item) => {
        if (item.pattern) {
          rules.push(
            `{ pattern: new RegExp(${item.pattern}), message: '${
              item.message
            }', trigger: '${trigger[conf.tag]}' }`
          )
        }
      })
    }
    ruleList.push(`${conf.vModel}: [${rules.join(',')}],`)
  }
}
/**
 * @name: ç”Ÿæˆé€‰é¡¹æ•°æ®
 * @description: ç”Ÿæˆé€‰é¡¹æ•°æ®ï¼Œå•é€‰å¤šé€‰ä¸‹æ‹‰ç­‰
 * @param {*} conf
 * @param {*} optionsList é€‰é¡¹æ•°æ®åˆ—表
 * @return {*}
 */
function buildOptions(conf, optionsList) {
  if (conf.vModel === undefined) return
  if (conf.dataType === 'dynamic') {
    conf.options = []
  }
  const str = `const ${conf.vModel}Options = ref(${JSON.stringify(conf.options)})`
  optionsList.push(str)
}
/**
 * @name: ç”Ÿæˆæ–¹æ³•
 * @description: ç”Ÿæˆæ–¹æ³•
 * @param {*} methodName æ–¹æ³•å
 * @param {*} model
 * @param {*} methodList æ–¹æ³•åˆ—表
 * @return {*}
 */
function buildOptionMethod(methodName, model, methodList) {
  const str = `function ${methodName}() {
    // TODO å‘起请求获取数据
    ${model}.value
  }`
  methodList.push(str)
}
/**
 * @name: ç”Ÿæˆè¡¨å•ç»„件需要的props设置
 * @description: ç”Ÿæˆè¡¨å•ç»„件需要的props设置，如；级联组件
 * @param {*} conf
 * @param {*} propsList
 * @return {*}
 */
function buildProps(conf, propsList) {
  if (conf.dataType === 'dynamic') {
    conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey)
    conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey)
    conf.childrenKey !== 'children' &&
      (conf.props.props.children = conf.childrenKey)
  }
  const str = `
  // props设置
  const ${conf.vModel}Props = ref(${JSON.stringify(conf.props.props)})`
  propsList.push(str)
}
/**
 * @name: ç”Ÿæˆä¸Šä¼ ç»„件的相关内容
 * @description: ç”Ÿæˆä¸Šä¼ ç»„件的相关内容
 * @param {*} conf
 * @return {*}
 */
function buildBeforeUpload(conf) {
  const unitNum = units[conf.sizeUnit]
  let rightSizeCode = ''
  let acceptCode = ''
  const returnList = []
  if (conf.fileSize) {
    rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize}
    if(!isRightSize){
      proxy.$modal.msgError('文件大小超过 ${conf.fileSize}${conf.sizeUnit}')
    }`
    returnList.push('isRightSize')
  }
  if (conf.accept) {
    acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type)
    if(!isAccept){
      proxy.$modal.msgError('应该选择${conf.accept}类型的文件')
    }`
    returnList.push('isAccept')
  }
  const str = `
  /**
   * @name: ä¸Šä¼ ä¹‹å‰çš„文件判断
   * @description: ä¸Šä¼ ä¹‹å‰çš„文件判断，判断文件大小文件类型等
   * @param {*} file
   * @return {*}
   */  
  function ${conf.vModel}BeforeUpload(file) {
    ${rightSizeCode}
    ${acceptCode}
    return ${returnList.join('&&')}
  }`
  return returnList.length ? str : ''
}
/**
 * @name: ç”Ÿæˆæäº¤è¡¨å•æ–¹æ³•
 * @description: ç”Ÿæˆæäº¤è¡¨å•æ–¹æ³•
 * @param {Object} conf vModel è¡¨å•ref
 * @return {*}
 */
function buildSubmitUpload(conf) {
  const str = `function submitUpload() {
    this.$refs['${conf.vModel}'].submit()
  }`
  return str
}
/**
 * @name: ç»„装js代码
 * @description: ç»„装js代码方法
 * @return {*}
 */
function buildexport(
  conf,
  type,
  data,
  rules,
  selectOptions,
  uploadVar,
  props,
  methods
) {
  let str = `
    const { proxy } = getCurrentInstance()
    const ${conf.formRef} = ref()
    const data = reactive({
      ${conf.formModel}: {
        ${data}
      },
      ${conf.formRules}: {
        ${rules}
      }
    })

    const {${conf.formModel}, ${conf.formRules}} = toRefs(data)

    ${selectOptions}

    ${uploadVar}

    ${props}

    ${methods}
  `
  
  if(type === 'dialog') {
    str += `
      // å¼¹çª—设置
      const dialogVisible = defineModel()
      // å¼¹çª—确认回调
      const emit = defineEmits(['confirm'])
      /**
       * @name: å¼¹çª—打开后执行
       * @description: å¼¹çª—打开后执行方法
       * @return {*}
       */
      function onOpen(){

      }
      /**
       * @name: å¼¹çª—关闭时执行
       * @description: å¼¹çª—关闭方法，重置表单
       * @return {*}
       */
      function onClose(){
        ${conf.formRef}.value.resetFields()
      }
      /**
       * @name: å¼¹çª—取消
       * @description: å¼¹çª—取消方法
       * @return {*}
       */
      function close(){
        dialogVisible.value = false
      }
      /**
       * @name: å¼¹çª—表单提交
       * @description: å¼¹çª—表单提交方法
       * @return {*}
       */
      function handelConfirm(){
        ${conf.formRef}.value.validate((valid) => {
          if (!valid) return
          // TODO æäº¤è¡¨å•

          close()
          // å›žè°ƒçˆ¶çº§ç»„件
          emit('confirm')
        })
      }
    `
  } else {
    str += `
    /**
     * @name: è¡¨å•æäº¤
     * @description: è¡¨å•æäº¤æ–¹æ³•
     * @return {*}
     */
    function submitForm() {
      ${conf.formRef}.value.validate((valid) => {
        if (!valid) return
        // TODO æäº¤è¡¨å•
      })
    }
    /**
     * @name: è¡¨å•é‡ç½®
     * @description: è¡¨å•é‡ç½®æ–¹æ³•
     * @return {*}
     */
    function resetForm() {
      ${conf.formRef}.value.resetFields()
    }
    `
  }
  return str
}