tianheng-ui 0.0.47 → 0.0.50

package/packages/formMaking/componentsConfig.js

@@ -5,6 +5,8 @@ export const basicComponents = [
     icon: "icon-input",
     options: {
       width: "100%",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "",
       dataType: "string",
       pattern: "",
@@ -28,6 +30,8 @@ export const basicComponents = [
     icon: "icon-diy-com-textarea",
     options: {
       width: "100%",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "",
       pattern: "",
       placeholder: "",
@@ -50,6 +54,8 @@ export const basicComponents = [
     icon: "icon-number",
     options: {
       width: "40%",
+      labelWidth: 100,
+      isLabelWidth: false,
       required: false,
       defaultValue: 0,
       min: 1,
@@ -66,6 +72,9 @@ export const basicComponents = [
     type: "radio",
     icon: "icon-radio-active",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       inline: false,
       defaultValue: "",
       showLabel: false,
@@ -84,7 +93,6 @@ export const basicComponents = [
         }
       ],
       required: false,
-      width: "",
       remote: false,
       remoteOptions: [],
       props: {
@@ -102,6 +110,9 @@ export const basicComponents = [
     type: "checkbox",
     icon: "icon-check-box",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       inline: false,
       defaultValue: [],
       showLabel: false,
@@ -117,7 +128,6 @@ export const basicComponents = [
         }
       ],
       required: false,
-      width: "",
       remote: false,
       remoteOptions: [],
       props: {
@@ -137,6 +147,9 @@ export const basicComponents = [
     type: "time",
     icon: "icon-time",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "21:19:56",
       readonly: false,
       disabled: false,
@@ -149,7 +162,6 @@ export const basicComponents = [
       arrowControl: true,
       format: "HH:mm:ss",
       required: false,
-      width: "",
       timeType: true, //任意时间范围，时间点
       selectRange: false, //时间点情况下的时间范围
       selectStartTime: "", //时间点情况下的开始的时间
@@ -172,6 +184,9 @@ export const basicComponents = [
     type: "date",
     icon: "icon-date",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "",
       readonly: false,
       disabled: false,
@@ -183,8 +198,7 @@ export const basicComponents = [
       type: "date",
       format: "yyyy-MM-dd",
       timestamp: false,
-      required: false,
-      width: ""
+      required: false
     }
   },
   {
@@ -192,6 +206,8 @@ export const basicComponents = [
     type: "rate",
     icon: "icon-pingfen1",
     options: {
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: null,
       max: 5,
       disabled: false,
@@ -206,6 +222,8 @@ export const basicComponents = [
     type: "color",
     icon: "icon-color",
     options: {
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "",
       disabled: false,
       showAlpha: false,
@@ -217,6 +235,9 @@ export const basicComponents = [
     type: "select",
     icon: "icon-select",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: "",
       multiple: false,
       disabled: false,
@@ -226,7 +247,6 @@ export const basicComponents = [
       showLabel: false,
       collapseTags: false,
       allowCreate: false,
-      width: "",
       options: [
         {
           value: "Option 1"
@@ -253,6 +273,8 @@ export const basicComponents = [
     type: "switch",
     icon: "icon-switch",
     options: {
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: false,
       required: false,
       disabled: false,
@@ -267,6 +289,10 @@ export const basicComponents = [
     type: "slider",
     icon: "icon-slider",
     options: {
+      width: "",
+      height: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: 0,
       disabled: false,
       required: false,
@@ -276,8 +302,6 @@ export const basicComponents = [
       showInput: false,
       range: false,
       vertical: false,
-      width: "",
-      height: "",
       showTooltip: true,
       formatTooltip: 1, //格式化
       showStops: false //间断点
@@ -288,9 +312,40 @@ export const basicComponents = [
     type: "text",
     icon: "icon-wenzishezhi-",
     options: {
-      defaultValue: "This is a text",
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      defaultValue: "文字内容",
       customClass: ""
     }
+  },
+  {
+    type: "button",
+    icon: "icon-button",
+    options: {
+      customClass: "",
+      disabled: false,
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      hidden: false,
+      dataBind: false,
+      buttonSize: "small",
+      buttonType: "",
+      buttonPlain: false,
+      buttonRound: false,
+      buttonCircle: false,
+      buttonName: "Button",
+      width: "",
+      remoteFunc: "",
+      remoteOption: "",
+      tableColumn: false
+    },
+    events: {
+      onClick: ""
+    },
+    name: "按钮",
+    rules: []
   }
 ];
 
@@ -304,16 +359,18 @@ export const advanceComponents = [
     }
   },
   {
-    name: "图片",
+    name: "文件",
     type: "imgupload",
     icon: "icon-tupian",
     options: {
+      width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
       defaultValue: [],
       size: {
         width: 100,
         height: 100
       },
-      width: "",
       tokenFunc: "funcGetToken",
       token: "",
       domain: "https://tcdn.form.making.link/",
@@ -340,9 +397,11 @@ export const advanceComponents = [
     type: "editor",
     icon: "icon-fuwenbenkuang",
     options: {
-      defaultValue: "",
       width: "",
       height: "",
+      labelWidth: 100,
+      isLabelWidth: false,
+      defaultValue: "",
       disabled: false,
       required: false
     }
@@ -352,8 +411,10 @@ export const advanceComponents = [
     type: "cascader",
     icon: "icon-jilianxuanze",
     options: {
-      defaultValue: [],
       width: "",
+      labelWidth: 100,
+      isLabelWidth: false,
+      defaultValue: [],
       placeholder: "",
       disabled: false,
       clearable: false,
@@ -375,6 +436,38 @@ export const advanceComponents = [
       },
       remoteFunc: ""
     }
+  },
+  {
+    name: "子表单",
+    type: "table",
+    icon: "icon-table",
+    options: {
+      defaultValue: [],
+      customClass: "",
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: false,
+      hidden: false,
+      dataBind: true,
+      disabled: false,
+      required: false,
+      validatorCheck: false,
+      validator: "",
+      paging: false,
+      pageSize: 5,
+      isAdd: true,
+      isDelete: true,
+      isSerial: true,
+      remoteFunc: "",
+      remoteOption: "",
+      tableColumn: false
+    },
+    events: {
+      onChange: "",
+      onRowAdd: "",
+      onRowRemove: ""
+    },
+    list: []
   }
 ];
 
@@ -396,7 +489,59 @@ export const layoutComponents = [
     options: {
       gutter: 0,
       justify: "start",
-      align: "top"
+      align: "top",
+      // labelWidth: 100,
+      // isLabelWidth: false,
+      hideLabel: true
     }
+  },
+  {
+    type: "tabs",
+    icon: "icon-tabs",
+    tabs: [
+      {
+        label: "选项1",
+        value: "tab_1",
+        list: []
+      },
+      {
+        label: "选项2",
+        value: "tab_2",
+        list: []
+      }
+    ],
+    options: {
+      defaultValue: "tab_1",
+      type: "",
+      tabPosition: "top",
+      customClass: "",
+      hidden: false,
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      remote: false,
+      remoteFunc: "",
+      remoteOption: "",
+      tableColumn: false
+    },
+    name: "标签页",
+    rules: []
+  },
+  {
+    name: "分割线",
+    type: "divider",
+    icon: "icon-fengexian",
+    options: {
+      height: 50,
+      hidden: false,
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      contentPosition: "left",
+      remoteFunc: "",
+      remoteOption: "",
+      tableColumn: false
+    },
+    rules: []
   }
 ];

package/packages/formMaking/generateCode.js

@@ -1,155 +1,163 @@
-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>`
-  }
-}
+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 == "tabs") {
+      list[i].tabs.forEach(item => {
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
+      });
+    } else if (list[i].type == "table") {
+      // list[i].tabs.forEach(item => {
+      findRemoteFunc(list[i].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>`;
+  }
+}