初始化 form 动态表单的详情，暂未接入数据

yudao-admin-ui/src/utils/render/README.md

@@ -0,0 +1 @@
+【add by 芋道源码】https://github.com/JakHuang/form-generator/blob/dev/src/components/render/

yudao-admin-ui/src/utils/render/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "form-gen-render",
+  "version": "1.0.4",
+  "description": "表单核心render",
+  "main": "lib/form-gen-render.umd.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "author": "jakhuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator#readme"
+}

yudao-admin-ui/src/utils/render/render.js

@@ -0,0 +1,122 @@
+import { deepClone } from '@/utils/index'
+
+const componentChild = {}
+/**
+ * 将./slots中的文件挂载到对象componentChild上
+ * 文件名为key，对应JSON配置中的__config__.tag
+ * 文件内容为value，解析JSON配置中的__slot__
+ */
+const slotsFiles = require.context('./slots', false, /\.js$/)
+const keys = slotsFiles.keys() || []
+keys.forEach(key => {
+  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = slotsFiles(key).default
+  componentChild[tag] = value
+})
+
+function vModel(dataObject, defaultValue) {
+  dataObject.props.value = defaultValue
+
+  dataObject.on.input = val => {
+    this.$emit('input', val)
+  }
+}
+
+function mountSlotFiles(h, confClone, children) {
+  const childObjs = componentChild[confClone.__config__.tag]
+  if (childObjs) {
+    Object.keys(childObjs).forEach(key => {
+      const childFunc = childObjs[key]
+      if (confClone.__slot__ && confClone.__slot__[key]) {
+        children.push(childFunc(h, confClone, key))
+      }
+    })
+  }
+}
+
+function emitEvents(confClone) {
+  ['on', 'nativeOn'].forEach(attr => {
+    const eventKeyList = Object.keys(confClone[attr] || {})
+    eventKeyList.forEach(key => {
+      const val = confClone[attr][key]
+      if (typeof val === 'string') {
+        confClone[attr][key] = event => this.$emit(val, event)
+      }
+    })
+  })
+}
+
+function buildDataObject(confClone, dataObject) {
+  Object.keys(confClone).forEach(key => {
+    const val = confClone[key]
+    if (key === '__vModel__') {
+      vModel.call(this, dataObject, confClone.__config__.defaultValue)
+    } else if (dataObject[key] !== undefined) {
+      if (dataObject[key] === null
+        || dataObject[key] instanceof RegExp
+        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
+        dataObject[key] = val
+      } else if (Array.isArray(dataObject[key])) {
+        dataObject[key] = [...dataObject[key], ...val]
+      } else {
+        dataObject[key] = { ...dataObject[key], ...val }
+      }
+    } else {
+      dataObject.attrs[key] = val
+    }
+  })
+
+  // 清理属性
+  clearAttrs(dataObject)
+}
+
+function clearAttrs(dataObject) {
+  delete dataObject.attrs.__config__
+  delete dataObject.attrs.__slot__
+  delete dataObject.attrs.__methods__
+}
+
+function makeDataObject() {
+  // 深入数据对象：
+  // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
+  return {
+    class: {},
+    attrs: {},
+    props: {},
+    domProps: {},
+    nativeOn: {},
+    on: {},
+    style: {},
+    directives: [],
+    scopedSlots: {},
+    slot: null,
+    key: null,
+    ref: null,
+    refInFor: true
+  }
+}
+
+export default {
+  props: {
+    conf: {
+      type: Object,
+      required: true
+    }
+  },
+  render(h) {
+    const dataObject = makeDataObject()
+    const confClone = deepClone(this.conf)
+    const children = this.$slots.default || []
+
+    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
+    mountSlotFiles.call(this, h, confClone, children)
+
+    // 将字符串类型的事件，发送为消息
+    emitEvents.call(this, confClone)
+
+    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
+    buildDataObject.call(this, confClone, dataObject)
+
+    return h(this.conf.__config__.tag, dataObject, children)
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-button.js

@@ -0,0 +1,5 @@
+export default {
+  default(h, conf, key) {
+    return conf.__slot__[key]
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-checkbox-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
+      } else {
+        list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
+      }
+    })
+    return list
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-input.js

@@ -0,0 +1,8 @@
+export default {
+  prepend(h, conf, key) {
+    return <template slot="prepend">{conf.__slot__[key]}</template>
+  },
+  append(h, conf, key) {
+    return <template slot="append">{conf.__slot__[key]}</template>
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-radio-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
+      } else {
+        list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
+      }
+    })
+    return list
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-select.js

@@ -0,0 +1,9 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
+    })
+    return list
+  }
+}

yudao-admin-ui/src/utils/render/slots/el-upload.js

@@ -0,0 +1,17 @@
+export default {
+  'list-type': (h, conf, key) => {
+    const list = []
+    const config = conf.__config__
+    if (conf['list-type'] === 'picture-card') {
+      list.push(<i class="el-icon-plus"></i>)
+    } else {
+      list.push(<el-button size="small" type="primary" icon="el-icon-upload">{config.buttonText}</el-button>)
+    }
+    if (config.showTip) {
+      list.push(
+        <div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件</div>
+      )
+    }
+    return list
+  }
+}