custom-variant-form 2.3.1 → 2.3.3

package/src/utils/util.js

@@ -1,376 +0,0 @@
-import Clipboard from 'clipboard'
-
-export function isNull(value) {
-  return (value === null) || (value === undefined);
-}
-
-export function isNotNull(value) {
-  return (value !== null) && (value !== undefined);
-}
-
-export function isEmptyStr(str) {
-  //return (str === undefined) || (!str) || (!/[^\s]/.test(str));
-  return (str === undefined) || (!str && (str !== 0) && (str !== '0')) || (!/[^\s]/.test(str));
-}
-
-export const generateId = function() {
-  return Math.floor(Math.random() * 100000 + Math.random() * 20000 + Math.random() * 5000);
-};
-
-export const deepClone = function (origin) {
-  if (origin === undefined) {
-    return undefined
-  }
-
-  return JSON.parse(JSON.stringify(origin))
-}
-
-export const overwriteObj = function(obj1, obj2) {  /* 浅拷贝对象属性，obj2覆盖obj1 */
-  // for (let prop in obj2) {
-  //   if (obj2.hasOwnProperty(prop)) {
-  //     obj1[prop] = obj2[prop]
-  //   }
-  // }
-
-  Object.keys(obj2).forEach(prop => {
-    obj1[prop] = obj2[prop]
-  })
-}
-
-/* 用Function对象实现eval函数功能 */
-export const evalFn = function (fn, DSV = null, VFR = null) {
-  let f = new Function('DSV', 'VFR', 'return ' + fn);
-  return f(DSV, VFR);
-};
-
-export const addWindowResizeHandler = function (handler) {
-  let oldHandler = window.onresize
-  if (typeof window.onresize != 'function') {
-    window.onresize = handler
-  } else {
-    window.onresize = function () {
-      oldHandler()
-      handler()
-    }
-  }
-}
-
-const createStyleSheet = function() {
-  let head = document.head || document.getElementsByTagName('head')[0];
-  let style = document.createElement('style');
-  style.type = 'text/css';
-  head.appendChild(style);
-  return style.sheet;
-}
-
-export const insertCustomCssToHead = function (cssCode, formId = '') {
-  let head = document.getElementsByTagName('head')[0]
-  let oldStyle = document.getElementById('vform-custom-css')
-  if (!!oldStyle) {
-    head.removeChild(oldStyle)  //先清除后插入！！
-  }
-  if (!!formId) {
-    oldStyle = document.getElementById('vform-custom-css' + '-' + formId)
-    !!oldStyle && head.removeChild(oldStyle)  //先清除后插入！！
-  }
-
-  let newStyle = document.createElement('style')
-  newStyle.type = 'text/css'
-  newStyle.rel = 'stylesheet'
-  newStyle.id = !!formId ? 'vform-custom-css' + '-' + formId : 'vform-custom-css'
-  try {
-    newStyle.appendChild(document.createTextNode(cssCode))
-  } catch(ex) {
-    newStyle.styleSheet.cssText = cssCode
-  }
-
-  head.appendChild(newStyle)
-}
-
-export const insertGlobalFunctionsToHtml = function (functionsCode, formId = '') {
-  let bodyEle = document.getElementsByTagName('body')[0]
-  let oldScriptEle = document.getElementById('v_form_global_functions')
-  !!oldScriptEle && bodyEle.removeChild(oldScriptEle)  //先清除后插入！！
-  if (!!formId) {
-    oldScriptEle = document.getElementById('v_form_global_functions' + '-' + formId)
-    !!oldScriptEle && bodyEle.removeChild(oldScriptEle)  //先清除后插入！！
-  }
-
-  let newScriptEle = document.createElement('script')
-  newScriptEle.id = !!formId ? 'v_form_global_functions' + '-' + formId : 'v_form_global_functions'
-  newScriptEle.type = 'text/javascript'
-  newScriptEle.innerHTML = functionsCode
-  bodyEle.appendChild(newScriptEle)
-}
-
-export const optionExists = function(optionsObj, optionName) {
-  if (!optionsObj) {
-    return false
-  }
-
-  return Object.keys(optionsObj).indexOf(optionName) > -1
-}
-
-export const loadRemoteScript = function(srcPath, callback) {  /*加载远程js，加载成功后执行回调函数*/
-  let sid = encodeURIComponent(srcPath)
-  let oldScriptEle = document.getElementById(sid)
-
-  if (!oldScriptEle) {
-    let s = document.createElement('script')
-    s.src = srcPath
-    s.id = sid
-    document.body.appendChild(s)
-
-    s.onload = s.onreadystatechange = function (_, isAbort) { /* 借鉴自ace.js */
-      if (isAbort || !s.readyState || s.readyState === "loaded" || s.readyState === "complete") {
-        s = s.onload = s.onreadystatechange = null
-        if (!isAbort) {
-          callback()
-        }
-      }
-    }
-  }
-}
-
-export function traverseFieldWidgets(widgetList, handler, parent = null) {
-  if (!widgetList) {
-    return
-  }
-
-  widgetList.forEach(w => {
-    if (w.formItemFlag) {
-      handler(w, parent)
-    } else if (w.type === 'grid') {
-      w.cols.forEach(col => {
-        traverseFieldWidgets(col.widgetList, handler, w)
-      })
-    } else if (w.type === 'table') {
-      w.rows.forEach(row => {
-        row.cols.forEach(cell => {
-          traverseFieldWidgets(cell.widgetList, handler, w)
-        })
-      })
-    } else if (w.type === 'tab') {
-      w.tabs.forEach(tab => {
-        traverseFieldWidgets(tab.widgetList, handler, w)
-      })
-    } else if (w.type === 'sub-form') {
-      traverseFieldWidgets(w.widgetList, handler, w)
-    } else if (w.category === 'container') {  //自定义容器
-      traverseFieldWidgets(w.widgetList, handler, w)
-    }
-  })
-}
-
-export function traverseContainerWidgets(widgetList, handler) {
-  if (!widgetList) {
-    return
-  }
-
-  widgetList.forEach(w => {
-    if (w.category === 'container') {
-      handler(w)
-    }
-
-    if (w.type === 'grid') {
-      w.cols.forEach(col => {
-        traverseContainerWidgets(col.widgetList, handler)
-      })
-    } else if (w.type === 'table') {
-      w.rows.forEach(row => {
-        row.cols.forEach(cell => {
-          traverseContainerWidgets(cell.widgetList, handler)
-        })
-      })
-    } else if (w.type === 'tab') {
-      w.tabs.forEach(tab => {
-        traverseContainerWidgets(tab.widgetList, handler)
-      })
-    } else if (w.type === 'sub-form') {
-      traverseContainerWidgets(w.widgetList, handler)
-    } else if (w.category === 'container') {  //自定义容器
-      traverseContainerWidgets(w.widgetList, handler)
-    }
-  })
-}
-
-export function traverseAllWidgets(widgetList, handler) {
-  if (!widgetList) {
-    return
-  }
-
-  widgetList.forEach(w => {
-    handler(w)
-
-    if (w.type === 'grid') {
-      w.cols.forEach(col => {
-        handler(col)
-        traverseAllWidgets(col.widgetList, handler)
-      })
-    } else if (w.type === 'table') {
-      w.rows.forEach(row => {
-        row.cols.forEach(cell => {
-          handler(cell)
-          traverseAllWidgets(cell.widgetList, handler)
-        })
-      })
-    } else if (w.type === 'tab') {
-      w.tabs.forEach(tab => {
-        traverseAllWidgets(tab.widgetList, handler)
-      })
-    } else if (w.type === 'sub-form') {
-      traverseAllWidgets(w.widgetList, handler)
-    } else if (w.category === 'container') {  //自定义容器
-      traverseAllWidgets(w.widgetList, handler)
-    }
-  })
-}
-
-function handleWidgetForTraverse(widget, handler) {
-  if (!!widget.category) {
-    traverseFieldWidgetsOfContainer(widget, handler)
-  } else if (widget.formItemFlag) {
-    handler(widget)
-  }
-}
-
-/**
- * 遍历容器内的字段组件
- * @param con
- * @param handler
- */
-export function traverseFieldWidgetsOfContainer(con, handler) {
-  if (con.type === 'grid') {
-    con.cols.forEach(col => {
-      col.widgetList.forEach(cw => {
-        handleWidgetForTraverse(cw, handler)
-      })
-    })
-  } else if (con.type === 'table') {
-    con.rows.forEach(row => {
-      row.cols.forEach(cell => {
-        cell.widgetList.forEach(cw => {
-          handleWidgetForTraverse(cw, handler)
-        })
-      })
-    })
-  } else if (con.type === 'tab') {
-    con.tabs.forEach(tab => {
-      tab.widgetList.forEach(cw => {
-        handleWidgetForTraverse(cw, handler)
-      })
-    })
-  } else if (con.type === 'sub-form') {
-    con.widgetList.forEach(cw => {
-      handleWidgetForTraverse(cw, handler)
-    })
-  } else if (con.category === 'container') {  //自定义容器
-    con.widgetList.forEach(cw => {
-      handleWidgetForTraverse(cw, handler)
-    })
-  }
-}
-
-/**
- * 获取所有字段组件
- * @param widgetList
- * @returns {[]}
- */
-export function getAllFieldWidgets(widgetList) {
-  if (!widgetList) {
-    return []
-  }
-
-  let result = []
-  let handlerFn = (w) => {
-    result.push({
-      type: w.type,
-      name: w.options.name,
-      field: w
-    })
-  }
-  traverseFieldWidgets(widgetList, handlerFn)
-
-  return result
-}
-
-/**
- * 获取所有容器组件
- * @param widgetList
- * @returns {[]}
- */
-export function getAllContainerWidgets(widgetList) {
-  if (!widgetList) {
-    return []
-  }
-
-  let result = []
-  let handlerFn = (w) => {
-    result.push({
-      type: w.type,
-      name: w.options.name,
-      container: w
-    })
-  }
-  traverseContainerWidgets(widgetList, handlerFn)
-
-  return result
-}
-
-export function copyToClipboard(content, clickEvent, $message, successMsg, errorMsg) {
-  const clipboard = new Clipboard(clickEvent.target, {
-    text: () => content
-  })
-
-  clipboard.on('success', () => {
-    $message.success(successMsg)
-    clipboard.destroy()
-  })
-
-  clipboard.on('error', () => {
-    $message.error(errorMsg)
-    clipboard.destroy()
-  })
-
-  clipboard.onClick(clickEvent)
-}
-
-export function getQueryParam(variable) {
-  let query = window.location.search.substring(1);
-  let vars = query.split("&")
-  for (let i=0; i<vars.length; i++) {
-    let pair = vars[i].split("=")
-    if(pair[0] == variable) {
-      return pair[1]
-    }
-  }
-
-  return undefined;
-}
-
-export function getDefaultFormConfig() {
-  return {
-    modelName: 'formData',
-    refName: 'vForm',
-    rulesName: 'rules',
-    labelWidth: 80,
-    labelPosition: 'left',
-    size: '',
-    labelAlign: 'label-left-align',
-    cssCode: '',
-    customClass: [],
-    functions: '',
-    layoutType: 'PC',
-
-    onFormCreated: '',
-    onFormMounted: '',
-    onFormDataChange: '',
-  }
-}
-
-export function buildDefaultFormJson() {
-  return {
-    widgetList: [],
-    formConfig: deepClone( getDefaultFormConfig() )
-  }
-}

package/src/utils/validators.js

@@ -1,127 +0,0 @@
-import {isEmptyStr, isNull} from "./util";
-
-export const getRegExp = function (validatorName) {
-  const commonRegExp = {
-    number: '/^[-]?\\d+(\\.\\d+)?$/',
-    letter: '/^[A-Za-z]+$/',
-    letterAndNumber: '/^[A-Za-z0-9]+$/',
-    mobilePhone: '/^[1][3-9][0-9]{9}$/',
-    letterStartNumberIncluded: '/^[A-Za-z]+[A-Za-z\\d]*$/',
-    noChinese: '/^[^\u4e00-\u9fa5]+$/',
-    chinese: '/^[\u4e00-\u9fa5]+$/',
-    email: '/^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\\.)+[A-Za-z0-9]{2,3}$/',
-    url: '/^([hH][tT]{2}[pP]:\\/\\/|[hH][tT]{2}[pP][sS]:\\/\\/)(([A-Za-z0-9-~]+)\\.)+([A-Za-z0-9-~\\/])+$/',
-  }
-
-  return commonRegExp[validatorName]
-}
-
-const validateFn = function (validatorName, rule, value, callback, defaultErrorMsg) {
-  //空值不校验
-  if (isNull(value) || (value.length <= 0)) {
-    callback()
-    return
-  }
-
-  const reg = eval(getRegExp(validatorName))
-
-  if (!reg.test(value)) {
-    let errTxt = rule.errorMsg || defaultErrorMsg
-    callback(new Error(errTxt))
-  } else {
-    callback()
-  }
-}
-
-const FormValidators = {
-
-  /* 数字 */
-  number(rule, value, callback) {
-    validateFn('number', rule, value, callback, '[' + rule.label + ']包含非数字字符')
-  },
-
-  /* 字母 */
-  letter(rule, value, callback) {
-    validateFn('letter', rule, value, callback, '[' + rule.label + ']包含非字母字符')
-  },
-
-  /* 字母和数字 */
-  letterAndNumber(rule, value, callback) {
-    validateFn('letterAndNumber', rule, value, callback, '[' + rule.label + ']只能输入字母或数字')
-  },
-
-  /* 手机号码 */
-  mobilePhone(rule, value, callback) {
-    validateFn('mobilePhone', rule, value, callback, '[' + rule.label + ']手机号码格式有误')
-  },
-
-  /* 禁止空白字符开头 */
-  noBlankStart(rule, value, callback) {
-    //暂未实现
-  },
-
-  /* 禁止空白字符结尾 */
-  noBlankEnd(rule, value, callback) {
-    //暂未实现
-  },
-
-  /* 字母开头，仅可包含数字 */
-  letterStartNumberIncluded(rule, value, callback) {
-    validateFn('letterStartNumberIncluded', rule, value, callback, '[' + rule.label + ']必须以字母开头，可包含数字')
-  },
-
-  /* 禁止中文输入 */
-  noChinese(rule, value, callback) {
-    validateFn('noChinese', rule, value, callback, '[' + rule.label + ']不可输入中文字符')
-  },
-
-  /* 必须中文输入 */
-  chinese(rule, value, callback) {
-    validateFn('chinese', rule, value, callback, '[' + rule.label + ']只能输入中文字符')
-  },
-
-  /* 电子邮箱 */
-  email(rule, value, callback) {
-    validateFn('email', rule, value, callback, '[' + rule.label + ']邮箱格式有误')
-  },
-
-  /* URL网址 */
-  url(rule, value, callback) {
-    validateFn('url', rule, value, callback, '[' + rule.label + ']URL格式有误')
-  },
-
-  /*测试
-  test(rule, value, callback, errorMsg) {
-    //空值不校验
-    if (isNull(value) || (value.length <= 0)) {
-      callback()
-      return
-    }
-
-    if (value < 100) {
-      callback(new Error('[' + rule.label + ']不能小于100'))
-    } else {
-      callback()
-    }
-  },
-  */
-
-  regExp(rule, value, callback) {
-    //空值不校验
-    if (isNull(value) || (value.length <= 0)) {
-      callback()
-      return
-    }
-
-    const pattern = eval(rule.regExp)
-    if (!pattern.test(value)) {
-      let errTxt = rule.errorMsg || '[' + rule.label + ']invalid value'
-      callback(new Error(errTxt))
-    } else {
-      callback()
-    }
-  },
-
-}
-
-export default FormValidators

package/src/utils/vue2js-generator.js

@@ -1,144 +0,0 @@
-import {isNotNull, traverseContainerWidgets, traverseFieldWidgets} from "@/utils/util";
-import {translate} from "@/utils/i18n";
-import FormValidators, {getRegExp} from "@/utils/validators";
-
-export function buildDefaultValueListFn(formConfig, widgetList, resultList) {
-  return function(fieldWidget) {
-    const fop = fieldWidget.options
-    const fd = fop.defaultValue
-    if (isNotNull(fd)) {
-      resultList.push(`${fop.name}: ${JSON.stringify(fd)},`)
-    } else {
-      resultList.push(`${fop.name}: null,`)
-    }
-  }
-}
-
-export function buildRulesListFn(formConfig, widgetList, resultList) {
-  return function(fieldWidget) {
-    const fop = fieldWidget.options
-    let fieldRules = []
-    if (!!fop.required) {
-      fieldRules.push(`{
-        required: true,
-        message: '${translate('render.hint.fieldRequired')}',
-      }`)
-    }
-
-    if (!!fop.validation) {
-      let vldName = fop.validation
-      if (!!FormValidators[vldName]) {
-        fieldRules.push(`{
-          pattern: ${eval( getRegExp(vldName) )},
-          trigger: ['blur', 'change'],
-          message: '${fop.validationHint}'
-        }`)
-      } else {
-        fieldRules.push(`{
-          pattern: '${eval(vldName)}',
-          trigger: ['blur', 'change'],
-          message: '${fop.validationHint}'
-        }`)
-      }
-    }
-
-    //TODO: 自定义校验函数
-
-    fieldRules.length > 0 && resultList.push(`${fop.name}: [${fieldRules.join(',')}],`)
-  }
-}
-
-export function buildFieldOptionsFn(formConfig, widgetList, resultList) {
-  return function(fieldWidget) {
-    const fop = fieldWidget.options
-    const ft = fieldWidget.type
-    if ((ft === 'radio') || (ft === 'checkbox') || (ft === 'select') || (ft === 'cascader')) {
-      resultList.push(`${fop.name}Options: ${JSON.stringify(fop.optionItems)},`)
-    }
-  }
-}
-
-export function buildUploadDataFn(formConfig, widgetList, resultList) {
-  return function(fieldWidget) {
-    const fop = fieldWidget.options
-    const ft = fieldWidget.type
-    if ((ft === 'picture-upload') || (ft === 'file-upload')) {
-      resultList.push(`${fop.name}FileList: [],`)
-      resultList.push(`${fop.name}UploadHeaders: {},`)
-      resultList.push(`${fop.name}UploadData: {},`)
-    }
-  }
-}
-
-export function buildActiveTabs(formConfig, widgetList) {
-  let resultList = []
-  const handlerFn = function (cw) {
-    const cop = cw.options
-    const ct = cw.type
-    if (ct === 'tab') {
-      cw.tabs.length > 0 && resultList.push(`'${cop.name}ActiveTab': '${cw.tabs[0].options.name}',`)
-    }
-  }
-  traverseContainerWidgets(widgetList, handlerFn)
-
-  return resultList
-}
-
-export const genVue2JS = function (formConfig, widgetList) {
-  let defaultValueList = []
-  let rulesList = []
-  let fieldOptions = []
-  let uploadData = []
-  traverseFieldWidgets(widgetList, (widget) => {
-    buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget)
-    buildRulesListFn(formConfig, widgetList, rulesList)(widget)
-    buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget)
-    buildUploadDataFn(formConfig, widgetList, uploadData)(widget)
-  })
-
-  const activeTabs = buildActiveTabs(formConfig, widgetList)
-
-  const v2JSTemplate =
-`  export default {
-    components: {},
-    props: {},
-    data() {
-      return {
-        ${formConfig.modelName}: {
-          ${defaultValueList.join('\n')}
-        },
-        
-        ${formConfig.rulesName}: {
-          ${rulesList.join('\n')}
-        },
-        
-        ${activeTabs.join('\n')}
-        
-        ${fieldOptions.join('\n')}
-        
-        ${uploadData.join('\n')}
-      }
-    },
-    computed: {},
-    watch: {},
-    created() {
-    },
-    mounted() {
-    },
-    methods: {
-      submitForm() {
-        this.$refs['vForm'].validate(valid => {
-          if (!valid) return
-          
-          //TODO: 提交表单
-        })
-      },
-      
-      resetForm() {
-        this.$refs['vForm'].resetFields()
-      }
-    }
-  }`
-
-  return v2JSTemplate
-}

package/src/utils/vue3js-generator.js

@@ -1,70 +0,0 @@
-import {
-  buildActiveTabs,
-  buildDefaultValueListFn,
-  buildFieldOptionsFn,
-  buildRulesListFn, buildUploadDataFn
-} from "@/utils/vue2js-generator";
-import {traverseFieldWidgets} from "@/utils/util";
-
-export const genVue3JS = function (formConfig, widgetList) {
-  let defaultValueList = []
-  let rulesList = []
-  let fieldOptions = []
-  let uploadData = []
-  traverseFieldWidgets(widgetList, (widget) => {
-    buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget)
-    buildRulesListFn(formConfig, widgetList, rulesList)(widget)
-    buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget)
-    buildUploadDataFn(formConfig, widgetList, uploadData)(widget)
-  })
-
-  const activeTabs = buildActiveTabs(formConfig, widgetList)
-
-  const v3JSTemplate =
-`  import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue'
-  
-  export default defineComponent({
-    components: {},
-    props: {},
-    setup() {
-      const state = reactive({
-        ${formConfig.modelName}: {
-          ${defaultValueList.join('\n')}
-        },
-        
-        ${formConfig.rulesName}: {
-          ${rulesList.join('\n')}
-        },
-        
-        ${activeTabs.join('\n')}
-        
-        ${fieldOptions.join('\n')}
-        
-        ${uploadData.join('\n')}
-      })
-    
-      const instance = getCurrentInstance()
-      
-      const submitForm = () => {
-        instance.proxy.$refs['vForm'].validate(valid => {
-          if (!valid) return
-          
-          //TODO: 提交表单
-        })
-      }
-      
-      const resetForm = () => {
-        instance.proxy.$refs['vForm'].resetFields()
-      }
-      
-      return {
-        ...toRefs(state),
-        submitForm,
-        resetForm
-      }
-    }
-  })`
-
-  return v3JSTemplate
-}
-