tianheng-ui 0.0.39 → 0.0.42

package/packages/formMaking/componentsConfig.js

@@ -0,0 +1,313 @@
+export const basicComponents = [
+  {
+    type: 'input',
+    icon: 'icon-input',
+    options: {
+      width: '100%',
+      defaultValue: '',
+      required: false,
+      dataType: 'string',
+      pattern: '',
+      placeholder: '',
+      disabled: false,
+      maxlength: -1,
+      showWordLimit: false,
+    }
+  },
+  {
+    type: 'textarea',
+    icon: 'icon-diy-com-textarea',
+    options: {
+      width: '100%',
+      defaultValue: '',
+      required: false,
+      disabled: false,
+      pattern: '',
+      placeholder: '',
+      maxlength: -1,
+      showWordLimit: false,
+    }
+  },
+  {
+    type: 'number',
+    icon: 'icon-number',
+    options: {
+      width: '',
+      required: false,
+      defaultValue: 0,
+      min: '',
+      max: '',
+      step: 1,
+      disabled: false,
+      controlsPosition: ''
+    }
+  },
+  {
+    type: 'radio',
+    icon: 'icon-radio-active',
+    options: {
+      inline: false,
+      defaultValue: '',
+      showLabel: false,
+      options: [
+        {
+          value: 'Option 1',
+          label: 'Option 1'
+        },
+        {
+          value: 'Option 2',
+          label: 'Option 2'
+        },
+        {
+          value: 'Option 3',
+          label: 'Option 3'
+        }
+      ],
+      required: false,
+      width: '',
+      remote: false,
+      remoteOptions: [],
+      props: {
+        value: 'value',
+        label: 'label'
+      },
+      remoteFunc: '',
+      disabled: false,
+    }
+  },
+  {
+    type: 'checkbox',
+    icon: 'icon-check-box',
+    options: {
+      inline: false,
+      defaultValue: [],
+      showLabel: false,
+      options: [
+        {
+          value: 'Option 1'
+        },
+        {
+          value: 'Option 2'
+        },
+        {
+          value: 'Option 3'
+        }
+      ],
+      required: false,
+      width: '',
+      remote: false,
+      remoteOptions: [],
+      props: {
+        value: 'value',
+        label: 'label'
+      },
+      remoteFunc: '',
+      disabled: false,
+    }
+  },
+  {
+    type: 'time',
+    icon: 'icon-time',
+    options: {
+      defaultValue: '21:19:56',
+      readonly: false,
+      disabled: false,
+      editable: true,
+      clearable: true,
+      placeholder: '',
+      startPlaceholder: '',
+      endPlaceholder: '',
+      isRange: false,
+      arrowControl: true,
+      format: 'HH:mm:ss',
+      required: false,
+      width: '',
+    }
+  },
+  {
+    type: 'date',
+    icon: 'icon-date',
+    options: {
+      defaultValue: '',
+      readonly: false,
+      disabled: false,
+      editable: true,
+      clearable: true,
+      placeholder: '',
+      startPlaceholder: '',
+      endPlaceholder: '',
+      type: 'date',
+      format: 'yyyy-MM-dd',
+      timestamp: false,
+      required: false,
+      width: '',
+    }
+  },
+  {
+    type: 'rate',
+    icon: 'icon-pingfen1',
+    options: {
+      defaultValue: null,
+      max: 5,
+      disabled: false,
+      allowHalf: false,
+      required: false
+    }
+  },
+  {
+    type: 'color',
+    icon: 'icon-color',
+    options: {
+      defaultValue: '',
+      disabled: false,
+      showAlpha: false,
+      required: false
+    }
+  },
+  {
+    type: 'select',
+    icon: 'icon-select',
+    options: {
+      defaultValue: '',
+      multiple: false,
+      disabled: false,
+      clearable: false,
+      placeholder: '',
+      required: false,
+      showLabel: false,
+      width: '',
+      options: [
+        {
+          value: 'Option 1'
+        },
+        {
+          value: 'Option 2'
+        },{
+          value: 'Option 3'
+        }
+      ],
+      remote: false,
+      filterable: false,
+      remoteOptions: [],
+      props: {
+        value: 'value',
+        label: 'label'
+      },
+      remoteFunc: ''
+    }
+  },
+  {
+    type: 'switch',
+    icon: 'icon-switch',
+    options: {
+      defaultValue: false,
+      required: false,
+      disabled: false,
+    }
+  },
+  {
+    type: 'slider',
+    icon: 'icon-slider',
+    options: {
+      defaultValue: 0,
+      disabled: false,
+      required: false,
+      min: 0,
+      max: 100,
+      step: 1,
+      showInput: false,
+      range: false,
+      width: ''
+    }
+  },
+  {
+    type: 'text',
+    icon: 'icon-wenzishezhi-',
+    options: {
+      defaultValue: 'This is a text',
+      customClass: '',
+    }
+  }
+]
+
+export const advanceComponents = [
+  {
+    type: 'blank',
+    icon: 'icon-zidingyishuju',
+    options: {
+      defaultType: 'String'
+    }
+  },
+  {
+    type: 'imgupload',
+    icon: 'icon-tupian',
+    options: {
+      defaultValue: [],
+      size: {
+        width: 100,
+        height: 100,
+      },
+      width: '',
+      tokenFunc: 'funcGetToken',
+      token: '',
+      domain: 'https://tcdn.form.making.link/',
+      disabled: false,
+      length: 8,
+      multiple: false,
+      isQiniu: false,
+      isDelete: false,
+      min: 0,
+      isEdit: false,
+      action: 'https://tools-server.making.link/api/transfer'
+    }
+  },
+  {
+    type: 'editor',
+    icon: 'icon-fuwenbenkuang',
+    options: {
+      defaultValue: '',
+      width: ''
+    }
+  },
+  {
+    type: 'cascader',
+    icon: 'icon-jilianxuanze',
+    options: {
+      defaultValue: [],
+      width: '',
+      placeholder: '',
+      disabled: false,
+      clearable: false,
+      remote: true,
+      remoteOptions: [],
+      props: {
+        value: 'value',
+        label: 'label',
+        children: 'children'
+      },
+      remoteFunc: ''
+    }
+  }
+]
+
+export const layoutComponents = [
+  {
+    type: 'grid',
+    icon: 'icon-grid-',
+    columns: [
+      {
+        span: 12,
+        list: []
+      },
+      {
+        span: 12,
+        list: []
+      }
+    ],
+    options: {
+      gutter: 0,
+      justify: 'start',
+      align: 'top'
+    }
+  }
+]

package/packages/formMaking/generateCode.js

@@ -0,0 +1,155 @@
+function findRemoteFunc (list, funcList, tokenFuncList, blankList) {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == 'grid') {
+      list[i].columns.forEach(item => {
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList)
+      })
+    } else {
+      if (list[i].type == 'blank') {
+        if (list[i].model) {
+          blankList.push({
+            name: list[i].model,
+            label: list[i].name
+          })
+        }
+      } else if (list[i].type == 'imgupload') {
+        if (list[i].options.tokenFunc) {
+          tokenFuncList.push({
+            func: list[i].options.tokenFunc,
+            label: list[i].name,
+            model: list[i].model
+          })
+        }
+      } else {
+        if (list[i].options.remote && list[i].options.remoteFunc) {
+          funcList.push({
+            func: list[i].options.remoteFunc,
+            label: list[i].name,
+            model: list[i].model
+          })
+        }
+      }
+    }
+  }
+}
+
+export default function (data, type = 'vue') {
+
+  const funcList = []
+
+  const tokenFuncList = []
+
+  const blankList = []
+
+  findRemoteFunc(JSON.parse(data).list, funcList, tokenFuncList, blankList)
+
+  let funcTemplate = ''
+
+  let blankTemplate = ''
+
+  for(let i = 0; i < funcList.length; i++) {
+    funcTemplate += `
+            ${funcList[i].func} (resolve) {
+              // ${funcList[i].label} ${funcList[i].model}
+              // Call callback function once get the data from remote server
+              // resolve(data)
+            },
+    `
+  }
+
+  for(let i = 0; i < tokenFuncList.length; i++) {
+    funcTemplate += `
+            ${tokenFuncList[i].func} (resolve) {
+              // ${tokenFuncList[i].label} ${tokenFuncList[i].model}
+              // Call callback function once get the token
+              // resolve(token)
+            },
+    `
+  }
+
+  for (let i = 0; i < blankList.length; i++) {
+    blankTemplate += `
+        <template slot="${blankList[i].name}" slot-scope="scope">
+          <!-- ${blankList[i].label} -->
+          <!-- use v-model="scope.model.${blankList[i].name}" to bind data -->
+        </template>
+    `
+  }
+
+  if (type == 'vue') {
+    return `<template>
+  <div>
+    <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
+      ${blankTemplate}
+    </fm-generate-form>
+    <el-button type="primary" @click="handleSubmit">提交</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        jsonData: ${data},
+        editData: {},
+        remoteFuncs: {
+          ${funcTemplate}
+        }
+      }
+    },
+    methods: {
+      handleSubmit () {
+        this.$refs.generateForm.getData().then(data => {
+          // data check success
+          // data - form data
+        }).catch(e => {
+          // data check failed
+        })
+      }
+    }
+  }
+</script>`
+  } else {
+    return `<!DOCTYPE html>
+  <html>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+  </head>
+  <body>
+    <div id="app">
+      <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
+        ${blankTemplate}
+      </fm-generate-form>
+      <el-button type="primary" @click="handleSubmit">提交</el-button>
+    </div>
+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+    <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+    <script>
+      new Vue({
+        el: '#app',
+        data: {
+          jsonData: ${data},
+          editData: {},
+          remoteFuncs: {
+            ${funcTemplate}
+          }
+        },
+        methods: {
+          handleSubmit () {
+            this.$refs.generateForm.getData().then(data => {
+              // data check success
+              // data - form data
+            }).catch(e => {
+              // data check failed
+            })
+          }
+        }
+      })
+    </script>
+  </body>
+  </html>`
+  }
+}