tianheng-ui 0.1.9 → 0.1.11

package/packages/FormMaking/custom/config.js

@@ -30,7 +30,7 @@ export const basicComponents = [
       onFocus: "",
       onBlur: ""
     },
-    rules: []
+    rules: [{}]
   },
   {
     name: "多行文本",
@@ -60,7 +60,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: [{}]
   },
   {
     name: "单元格",
@@ -79,7 +80,8 @@ export const basicComponents = [
       textAlign: "right",
       hidden: false,
       hideLabel: false
-    }
+    },
+    rules: []
   },
   {
     name: "文字",
@@ -95,7 +97,8 @@ export const basicComponents = [
       textAlign: "left",
       hidden: false,
       hideLabel: false
-    }
+    },
+    rules: []
   },
   {
     name: "单选框组",
@@ -137,7 +140,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "多选框组",
@@ -180,7 +184,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "时间选择器",
@@ -210,7 +215,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: []
   },
   {
     name: "日期选择器",
@@ -237,7 +243,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: []
   },
   {
     name: "下拉选择框",
@@ -283,7 +290,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: []
   },
   {
     name: "颜色选择器",
@@ -312,7 +320,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "开关",
@@ -334,7 +343,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "按钮",
@@ -377,13 +387,12 @@ export const basicComponents = [
       isLabelWidth: false,
       required: false,
       defaultValue: 0,
-      min: 1,
-      max: 2,
-      step: 1,
+      min: 0,
+      max: -1,
+      step: 1, //递增递减步数
+      precision: 0, //精度
       disabled: false,
       controlsPosition: false,
-      step: 1, //递增递减步数
-      precision: 1, //精度
       hidden: false,
       hideLabel: false
     },
@@ -391,7 +400,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: []
   },
   {
     name: "滑块",
@@ -419,7 +429,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "评分",
@@ -440,7 +451,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   },
   {
     name: "图片",
@@ -471,7 +483,9 @@ export const basicComponents = [
       hidden: false,
       hideLabel: false,
       isLazy: true
-    }
+    },
+    events: {},
+    rules: []
   },
   {
     name: "文件",
@@ -505,7 +519,9 @@ export const basicComponents = [
       elUploadTip: "",
       listType: "default", //展示方式
       drag: false //拖拽上传
-    }
+    },
+    events: {},
+    rules: []
   },
   {
     name: "编辑器",
@@ -521,7 +537,9 @@ export const basicComponents = [
       required: false,
       hidden: false,
       hideLabel: false
-    }
+    },
+    events: {},
+    rules: []
   },
   {
     name: "级联选择器",
@@ -557,7 +575,8 @@ export const basicComponents = [
     },
     events: {
       onChange: ""
-    }
+    },
+    rules: []
   }
 ];
 
@@ -569,6 +588,7 @@ export const advanceComponents = [
     options: {
       height: "",
       defaultValue: "",
+      columns: [],
       customClass: "",
       labelWidth: 100,
       isLabelWidth: false,
@@ -590,14 +610,16 @@ export const advanceComponents = [
       showHeader: true, // 是否显示表头
       highlightCurrentRow: false // 是否高亮当前行
     },
-    list: []
+    events: {},
+    rules: []
   },
   {
     name: "子表单H5",
-    type: "table_h5",
+    type: "tableH5",
     icon: "icon-table",
     options: {
       defaultValue: "",
+      columns: [],
       customClass: "",
       labelWidth: 100,
       isLabelWidth: false,
@@ -617,29 +639,30 @@ export const advanceComponents = [
       deleteButtonText: "删除",
       deleteIndex: 0 //  可删除的最小索引
     },
-    list: []
+    events: {},
+    rules: []
   },
   {
     name: "标签页",
     type: "tabs",
     icon: "icon-tabs",
-    tabs: [
-      {
-        label: "选项1",
-        value: "tab1",
-        list: []
-      },
-      {
-        label: "选项2",
-        value: "tab2",
-        list: []
-      }
-    ],
     options: {
       defaultValue: "tab1",
       type: "",
       tabPosition: "top",
       customClass: "",
+      columns: [
+        {
+          label: "选项1",
+          value: "tab1",
+          list: []
+        },
+        {
+          label: "选项2",
+          value: "tab2",
+          list: []
+        }
+      ],
       hidden: false,
       labelWidth: 100,
       isLabelWidth: false,
@@ -649,6 +672,7 @@ export const advanceComponents = [
       remoteOption: [],
       tableColumn: false
     },
+    events: {},
     rules: []
   },
   {
@@ -658,7 +682,9 @@ export const advanceComponents = [
     options: {
       defaultType: "String",
       required: false
-    }
+    },
+    events: {},
+    rules: []
   }
 ];
 
@@ -667,43 +693,47 @@ export const layoutComponents = [
     name: "栅格布局",
     type: "grid",
     icon: "icon-grid-",
-    columns: [
-      {
-        span: 12,
-        list: []
-      },
-      {
-        span: 12,
-        list: []
-      }
-    ],
     options: {
       gutter: 0,
       justify: "start",
       align: "top",
+      columns: [
+        {
+          span: 12,
+          list: []
+        },
+        {
+          span: 12,
+          list: []
+        }
+      ],
       hideLabel: true
-    }
+    },
+    events: {},
+    rules: []
   },
   {
     name: "浮动布局",
     type: "alliance",
     icon: "icon-grid-",
-    columns: [
-      {
-        span: 12,
-        list: []
-      },
-      {
-        span: 12,
-        list: []
-      }
-    ],
     options: {
       gutter: 0,
       justify: "start",
       align: "top",
+      columns: [
+        {
+          span: 12,
+          list: []
+        },
+        {
+          span: 12,
+          list: []
+        }
+      ],
       hideLabel: true
-    }
+    },
+    events: {},
+    rules: []
   },
   {
     name: "填充物",
@@ -716,8 +746,10 @@ export const layoutComponents = [
       labelWidth: 100,
       isLabelWidth: false,
       hideLabel: true,
-      hidden: false,
-    }
+      hidden: false
+    },
+    events: {},
+    rules: []
   },
   {
     name: "分割线",
@@ -733,10 +765,13 @@ export const layoutComponents = [
       contentPosition: "left",
       tableColumn: false
     },
+    events: {},
     rules: []
   }
 ];
 
+export const templateComponents = [];
+
 export const baseConfig = {
   ui: "element",
   title: "",

package/packages/FormMaking/custom/configs/grid.vue

@@ -19,7 +19,7 @@
       <el-form-item label="列配置项">
         <draggable
           tag="ul"
-          :list="widget.columns"
+          :list="widget.options.columns"
           v-bind="{
             group: { name: 'options' },
             ghostClass: 'ghost',
@@ -27,7 +27,7 @@
           }"
           handle=".drag-item"
         >
-          <li v-for="(item, index) in widget.columns" :key="index">
+          <li v-for="(item, index) in widget.options.columns" :key="index">
             <el-input
               placeholder="栅格值"
               style="width: 100px;"
@@ -88,13 +88,13 @@ export default {
   mounted() {},
   methods: {
     handleAddOption() {
-      this.widget.columns.push({
+      this.widget.options.columns.push({
         span: "",
         list: []
       });
     },
     handleOptionsRemove(index) {
-      this.widget.columns.splice(index, 1);
+      this.widget.options.columns.splice(index, 1);
     }
   }
 };

package/packages/FormMaking/custom/configs/input.vue

@@ -6,7 +6,7 @@
       </el-form-item>
 
       <el-form-item label="标题">
-        <el-input v-model="widget.name"></el-input>
+        <el-input v-model="widget.name" clearable></el-input>
       </el-form-item>
 
       <el-form-item label="标签宽度">
@@ -25,15 +25,15 @@
       </el-form-item>
 
       <el-form-item label="宽度">
-        <el-input v-model="widget.options.width"></el-input>
+        <el-input v-model="widget.options.width" clearable></el-input>
       </el-form-item>
 
       <el-form-item label="占位内容">
-        <el-input v-model="widget.options.placeholder"></el-input>
+        <el-input v-model="widget.options.placeholder" clearable></el-input>
       </el-form-item>
 
       <el-form-item label="默认值">
-        <el-input v-model="widget.options.defaultValue"></el-input>
+        <el-input v-model="widget.options.defaultValue" clearable></el-input>
       </el-form-item>
 
       <el-form-item label="最大字数">
@@ -49,16 +49,18 @@
 
       <el-form-item label="带入icon">
         <el-input
-          placeholder="请输入icon类名"
           v-model="widget.options.prefixIcon"
+          placeholder="请输入icon类名"
+          clearable
         >
           <template slot="prepend">
             <div style="width:50px;">prefixIcon</div>
           </template>
         </el-input>
         <el-input
-          placeholder="请输入icon类名"
           v-model="widget.options.suffixIcon"
+          placeholder="请输入icon类名"
+          clearable
         >
           <template slot="prepend">
             <div style="width:50px;">suffixIcon</div>
@@ -68,16 +70,18 @@
 
       <el-form-item label="组件插槽">
         <el-input
-          placeholder="请输入内容或HTML"
           v-model="widget.options.prepend"
+          placeholder="请输入内容或HTML"
+          clearable
         >
           <template slot="prepend">
             <div style="width:50px;">prepend</div>
           </template>
         </el-input>
         <el-input
-          placeholder="请输入内容或HTML"
           v-model="widget.options.append"
+          placeholder="请输入内容或HTML"
+          clearable
         >
           <template slot="prepend">
             <div style="width:50px;">append</div>
@@ -97,27 +101,54 @@
       </el-form-item>
 
       <el-form-item label="校验">
-        <el-checkbox v-model="widget.options.required">必填</el-checkbox>
-        <el-select style="width:100%" v-model="widget.options.dataType">
-          <el-option value="string" label="字符串"></el-option>
-          <el-option value="number" label="数字"></el-option>
-          <el-option value="boolean" label="布尔值"></el-option>
-          <el-option value="integer" label="整数"></el-option>
-          <el-option value="float" label="浮点数"></el-option>
-          <el-option value="url" label="URL地址"></el-option>
-          <el-option value="email" label="邮箱地址"></el-option>
-          <el-option value="hex" label="十六进制"></el-option>
-        </el-select>
+        <div class="flexView">
+          <el-checkbox v-model="widget.options.required">必填</el-checkbox>
+          <el-select
+            style="flex: 1;margin-left:10px;"
+            v-model="widget.options.dataType"
+            @change="handleInputTypeChange"
+          >
+            <el-option
+              v-for="rule in Object.values(rulesOptions)"
+              :key="rule.value"
+              :value="rule.value"
+              :label="rule.label"
+            ></el-option>
+          </el-select>
+        </div>
 
-        <el-input
-          class="config-pattern-input"
-          style=" width: 100%;"
-          v-model.lazy="widget.options.pattern"
-          placeholder="填写正则表达式"
+        <div
+          v-for="(rule, index) in widget.rules"
+          class="flexView"
+          :key="index"
         >
-          <template slot="prepend">/</template>
-          <template slot="append">/</template>
-        </el-input>
+          <el-input
+            class="config-pattern-input"
+            style="flex: 1;margin-right:10px;"
+            v-model="rule.patternStr"
+            placeholder="填写正则表达式"
+            clearable
+          >
+            <template slot="prepend">/</template>
+            <template slot="append">/</template>
+          </el-input>
+          <el-button
+            v-if="index === widget.rules.length - 1"
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="
+              widget.rules.push({ id: new Date().getTime(), patternStr: '' })
+            "
+          ></el-button>
+          <el-button
+            v-else
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            @click="widget.rules.splice(index, 1)"
+          ></el-button>
+        </div>
       </el-form-item>
 
       <el-form-item>
@@ -168,8 +199,84 @@ export default {
   },
   props: {},
   mixins: [configComponent],
+  data() {
+    return {
+      rulesOptions: {
+        string: { label: "字符串", value: "string", pattern: "" },
+        number: { label: "数字", value: "number", pattern: "^[0-9]*$" },
+        numberOrAlphabet: {
+          label: "数字和大小写英文字母",
+          value: "numberOrAlphabet",
+          pattern: "^[A-Za-z0-9]+$"
+        },
+        integer: {
+          label: "正整数",
+          value: "integer",
+          pattern: "^[1-9]+[0-9]*$"
+        },
+        url: { label: "URL地址", value: "url", pattern: "" },
+        email: { label: "邮箱地址", value: "email", pattern: "" },
+        chineseName: {
+          label: "中文名(2-16位)",
+          value: "chineseName",
+          pattern: "^(?:[\\u4e00-\\u9fa5·]{2,16})$"
+        },
+        englishName: {
+          label: "英文名(2-22位)",
+          value: "englishName",
+          pattern: "(^[a-zA-Z]{1}[a-zA-Z\\s]{0,20}[a-zA-Z]{1}$)"
+        },
+        tel: { label: "手机号", value: "tel", pattern: "^1\\d{10}$" },
+        specialPlane: {
+          label: "座机号(xxx-xxxxxxxx)",
+          value: "specialPlane",
+          pattern: "^\\d{3}-\\d{8}$|^\\d{4}-\\d{7}$"
+        },
+        idCard: {
+          label: "身份证(18位)",
+          value: "idCard",
+          pattern: "^\\d{17}(\\d|X)$"
+        },
+        bankCard: {
+          label: "银行卡号",
+          value: "bankCard",
+          pattern: "^[1-9]\\d{9,29}$"
+        },
+        creditCode: {
+          label: "统一社会信用代码",
+          value: "creditCode",
+          pattern: "^[0-9A-HJ-NPQRTUWXY]{2}\\d{6}[0-9A-HJ-NPQRTUWXY]{10}$"
+        }
+      }
+    };
+  },
   mounted() {},
-  methods: {}
+  methods: {
+    handleInputTypeChange() {
+      const ruleType = this.widget.options.dataType;
+      if (this.rulesOptions[ruleType].pattern) {
+        let isNew = true;
+        this.widget.rules.forEach(rule => {
+          if (rule.name) {
+            rule.name = ruleType;
+            rule.patternStr = this.rulesOptions[ruleType].pattern;
+            isNew = false;
+          }
+        });
+        if (isNew) {
+          this.widget.rules.unshift({
+            id: new Date().getTime(),
+            name: ruleType,
+            patternStr: this.rulesOptions[ruleType].pattern
+          });
+        }
+      } else {
+        this.widget.rules = this.widget.rules.filter(rule => {
+          return !rule.name;
+        });
+      }
+    }
+  }
 };
 </script>
 

package/packages/FormMaking/custom/configs/number.vue

@@ -38,7 +38,7 @@
           <div style="flex:1;">最大值：</div>
           <el-input-number
             v-model="widget.options.max"
-            :min="widget.options.min || 1"
+            :min="-1"
           >
           </el-input-number>
         </div>
@@ -56,7 +56,7 @@
           <el-input-number
             v-model="widget.options.precision"
             :min="0"
-            :max="100"
+            :max="6"
             :step="1"
           ></el-input-number>
         </div>

package/packages/FormMaking/custom/configs/table.vue

@@ -84,8 +84,8 @@ export default {
       let dic = {};
       this.widget.list.forEach(item => {
         if (item.type === "grid") {
-          for (let i = 0; i < item.columns.length; i++) {
-            const element = item.columns[i];
+          for (let i = 0; i < item.options.columns.length; i++) {
+            const element = item.options.columns[i];
             for (let j = 0; j < element.list.length; j++) {
               const element2 = element.list[j];
               dic[element2.model] = element2.options.defaultValue;

package/packages/FormMaking/custom/configs/{table_h5.vue → tableH5.vue}

@@ -81,8 +81,8 @@ export default {
       let dic = {};
       this.widget.list.forEach(item => {
         if (item.type === "grid") {
-          for (let i = 0; i < item.columns.length; i++) {
-            const element = item.columns[i];
+          for (let i = 0; i < item.options.columns.length; i++) {
+            const element = item.options.columns[i];
             for (let j = 0; j < element.list.length; j++) {
               const element2 = element.list[j];
               dic[element2.model] = element2.options.defaultValue;