skhj-variant 2.1.12

package/src/utils/util.js

@@ -0,0 +1,232 @@
+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) {
+  let head = document.getElementsByTagName('head')[0]
+  let oldStyle = document.getElementById('vform-custom-css')
+  if (!!oldStyle) {
+    head.removeChild(oldStyle)  //应该先清除后插入！！
+  }
+
+  let newStyle = document.createElement('style')
+  newStyle.type = 'text/css'
+  newStyle.rel = 'stylesheet'
+  newStyle.id = 'vform-custom-css'
+  try {
+    newStyle.appendChild(document.createTextNode(cssCode))
+  } catch(ex) {
+    newStyle.styleSheet.cssText = cssCode
+  }
+
+  head.appendChild(newStyle)
+}
+
+export const insertGlobalFunctionsToHtml = function (functionsCode) {
+  let bodyEle = document.getElementsByTagName('body')[0]
+  let oldScriptEle = document.getElementById('v_form_global_functions')
+  !!oldScriptEle && bodyEle.removeChild(oldScriptEle)
+
+  let newScriptEle = document.createElement('script')
+  newScriptEle.id = '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) {
+  widgetList.map(w => {
+    if (w.formItemFlag) {
+      handler(w)
+    } else if (w.type === 'grid') {
+      w.cols.map(col => {
+        traverseFieldWidgets(col.widgetList, handler)
+      })
+    } else if (w.type === 'table') {
+      w.rows.map(row => {
+        row.cols.map(cell => {
+          traverseFieldWidgets(cell.widgetList, handler)
+        })
+      })
+    } else if (w.type === 'tab') {
+      w.tabs.map(tab => {
+        traverseFieldWidgets(tab.widgetList, handler)
+      })
+    } else if (w.type === 'sub-form') {
+      traverseFieldWidgets(w.widgetList, handler)
+    } else if (w.category === 'container') {  //自定义容器
+      traverseFieldWidgets(w.widgetList, handler)
+    }
+  })
+}
+
+export function traverseContainWidgets(widgetList, handler) {
+  widgetList.map(w => {
+    if (w.category === 'container') {
+      handler(w)
+    }
+
+    if (w.type === 'grid') {
+      w.cols.map(col => {
+        traverseContainWidgets(col.widgetList, handler)
+      })
+    } else if (w.type === 'table') {
+      w.rows.map(row => {
+        row.cols.map(cell => {
+          traverseContainWidgets(cell.widgetList, handler)
+        })
+      })
+    } else if (w.type === 'tab') {
+      w.tabs.map(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.map(w => {
+    handler(w)
+
+    if (w.type === 'grid') {
+      w.cols.map(col => {
+        handler(col)
+        traverseAllWidgets(col.widgetList, handler)
+      })
+    } else if (w.type === 'table') {
+      w.rows.map(row => {
+        row.cols.map(cell => {
+          handler(cell)
+          traverseAllWidgets(cell.widgetList, handler)
+        })
+      })
+    } else if (w.type === 'tab') {
+      w.tabs.map(tab => {
+        traverseAllWidgets(tab.widgetList, handler)
+      })
+    } else if (w.type === 'sub-form') {
+      traverseAllWidgets(w.widgetList, handler)
+    } else if (w.category === 'container') {  //自定义容器
+      traverseAllWidgets(w.widgetList, handler)
+    }
+  })
+}
+
+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;
+}

package/src/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/src/utils/vue2js-generator.js

@@ -0,0 +1,144 @@
+import {isNotNull, traverseContainWidgets, 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}',`)
+    }
+  }
+  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/src/utils/vue3js-generator.js

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

package/vue.config.js

@@ -0,0 +1,92 @@
+'use strict'
+
+const path = require('path')
+const IS_PROD = process.env.NODE_ENV === 'production'
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+const npmConfigArgv = (process.env.npm_config_argv === undefined) ? null : JSON.parse(process.env.npm_config_argv)
+/*
+console.log('npm config: ', npmConfigArgv)
+const procArgv = process.argv
+console.log('npm config: ', procArgv)
+*/
+let buildProdFlag = false
+if (!!npmConfigArgv) {
+  npmConfigArgv.original.forEach(cItem => {
+    if (cItem === 'build') {
+      buildProdFlag = true
+    }
+  })
+}
+
+const mvdir = require('mvdir');
+if (IS_PROD && buildProdFlag) {
+  mvdir('index_template/index_prod.html', 'public/index.html', { copy: true });
+} else {
+  mvdir('index_template/index_dev.html', 'public/index.html', { copy: true });
+}
+
+
+module.exports = {
+  assetsDir: './',
+
+  /* 开启vue运行时模板编译功能！！ */
+  runtimeCompiler: true,
+
+  lintOnSave: false,
+
+  productionSourceMap: false,
+
+  /* 指定node_modules目录中需要做babel转译的依赖库 */
+  transpileDependencies: [
+    'element-ui', 'vuedraggable',
+  ],
+
+  css: {
+    loaderOptions: {
+      scss: {
+        /* 自动引入全局scss文件 */
+        prependData: `
+          @import "./src/styles/global.scss";
+        `
+      }
+    }
+  },
+
+  configureWebpack: (config) => {
+    config.devtool = 'source-map'
+    config.output.libraryExport = 'default'  /* 解决import UMD打包文件时, 组件install方法执行报错的问题！！ */
+
+    if (IS_PROD && buildProdFlag) { /* 仅生产环境使用 */
+      /* CDN打包，需要修改index.html加入CDN资源 */
+      config.externals = {
+        'vue': 'Vue',
+        'element-ui': 'ELEMENT',
+        //'quill': 'Quill',
+      }
+    }
+  },
+
+  chainWebpack: config => {
+    /* 配置svg图标自动加载 begin */
+    config.module
+        .rule('svg')
+        .exclude.add(resolve('src/icons'))
+        .end()
+    config.module
+        .rule('icons')
+        .test(/\.svg$/)
+        .include.add(resolve('src/icons'))
+        .end()
+        .use('svg-sprite-loader')
+        .loader('svg-sprite-loader')
+        .options({
+          symbolId: 'icon-[name]'
+        })
+    /* 配置svg图标自动加载 end */
+  },
+
+}