kh-one-ui 2.0.0

package/packages/one-ui-form/utils/util.js

@@ -0,0 +1,350 @@
+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]
+  })
+}
+
+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) {
+  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 traverseContainWidgets(widgetList, handler) {
+  widgetList.forEach(w => {
+    if (w.category === 'container') {
+      handler(w)
+    }
+
+    if (w.type === 'grid') {
+      w.cols.forEach(col => {
+        traverseContainWidgets(col.widgetList, handler)
+      })
+    } else if (w.type === 'table') {
+      w.rows.forEach(row => {
+        row.cols.forEach(cell => {
+          traverseContainWidgets(cell.widgetList, handler)
+        })
+      })
+    } else if (w.type === 'tab') {
+      w.tabs.forEach(tab => {
+        traverseContainWidgets(tab.widgetList, handler)
+      })
+    } else if (w.type === 'sub-form') {
+      traverseContainWidgets(w.widgetList, handler)
+    } else if (w.category === 'container') {  //自定义容器
+      traverseContainWidgets(w.widgetList, handler)
+    }
+  })
+}
+
+export function traverseAllWidgets(widgetList, handler) {
+  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) {
+  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) {
+  let result = []
+  let handlerFn = (w) => {
+    result.push({
+      type: w.type,
+      name: w.options.name,
+      container: w
+    })
+  }
+  traverseContainWidgets(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/packages/one-ui-form/utils/validators.js

@@ -0,0 +1,127 @@
+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/packages/one-ui-form/utils/vue2js-generator.js

@@ -0,0 +1,144 @@
+import {isNotNull, traverseContainWidgets, traverseFieldWidgets} from "./util";
+import {translate} from "./i18n";
+import FormValidators, {getRegExp} from "./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}',`)
+    }
+  }
+  traverseContainWidgets(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/packages/one-ui-form/utils/vue3js-generator.js

@@ -0,0 +1,70 @@
+import {
+  buildActiveTabs,
+  buildDefaultValueListFn,
+  buildFieldOptionsFn,
+  buildRulesListFn, buildUploadDataFn
+} from "./vue2js-generator";
+import {traverseFieldWidgets} from "./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.ctx.$refs['vForm'].validate(valid => {
+          if (!valid) return
+          
+          //TODO: 提交表单
+        })
+      }
+      
+      const resetForm = () => {
+        instance.ctx.$refs['vForm'].resetFields()
+      }
+      
+      return {
+        ...toRefs(state),
+        submitForm,
+        resetForm
+      }
+    }
+  })`
+
+  return v3JSTemplate
+}
+