tianheng-ui 0.1.10 → 0.1.11

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

@@ -92,7 +92,7 @@
           <el-radio-group v-model="widget.options.defaultValue">
             <draggable
               tag="ul"
-              :list="widget.tabs"
+              :list="widget.options.columns"
               v-bind="{
                 group: { name: 'tabs' },
                 ghostClass: 'ghost',
@@ -100,7 +100,7 @@
               }"
               handle=".drag-item"
             >
-              <li v-for="(item, index) in widget.tabs" :key="index">
+              <li v-for="(item, index) in widget.options.columns" :key="index">
                 <el-radio :label="item.value" style="margin-right: 5px;">
                   <el-input
                     v-model="item.value"
@@ -159,12 +159,12 @@ export default {
   mounted() {},
   methods: {
     handleOptionsRemove(index) {
-      this.widget.tabs.splice(index, 1);
+      this.widget.options.columns.splice(index, 1);
     },
     handleAddOption() {
-      this.widget.tabs.push({
-        label: `选项${this.widget.tabs.length + 1}`,
-        value: `tab${this.widget.tabs.length + 1}`,
+      this.widget.options.columns.push({
+        label: `选项${this.widget.options.columns.length + 1}`,
+        value: `tab${this.widget.options.columns.length + 1}`,
         list: []
       });
     }

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

@@ -81,27 +81,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="rule.id"
         >
-          <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>
@@ -153,12 +180,87 @@ 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: {
     handleInputNumberChange() {
       if (this.widget.options.minRows > this.widget.options.maxRows) {
         this.widget.options.maxRows = this.widget.options.minRows;
       }
+    },
+    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;
+        });
+      }
     }
   }
 };

package/packages/FormMaking/custom/index.js

@@ -12,17 +12,15 @@ const basicComponents = [
   "color",
   "switch",
   "button",
-  "slider",
   "number",
+  "slider",
   "rate",
   "image",
   "upload",
   "editor",
   "cascader"
 ];
-
-const advanceComponents = ["table", "table_h5", "tabs", "blank"];
-
+const advanceComponents = ["table", "tableH5", "tabs", "blank"];
 const layoutComponents = ["grid", "alliance", "filler", "divider"];
 
 module.exports = {

package/packages/FormMaking/custom/items/alliance.vue

@@ -19,7 +19,7 @@
           :key="element.key"
           :widget="element"
           :widgetIndex="elementIndex"
-          :widgetArray="column"
+          :widgetArray="column.list"
           :select.sync="selectWidget"
           :config="config"
         ></widget-form-item>
@@ -61,13 +61,13 @@ export default {
       if (item.className.indexOf("alliance") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
         item.tagName === "DIV" &&
-          this.widgetArray.list.splice(
+          this.widgetArray.splice(
             oldIndex,
             0,
-            row.tabs[colIndex].list[newIndex]
+            row.options.columns[colIndex].list[newIndex]
           );
 
-        row.tabs[colIndex].list.splice(newIndex, 1);
+        row.options.columns[colIndex].list.splice(newIndex, 1);
 
         return false;
       }
@@ -75,58 +75,59 @@ export default {
       const key =
         Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
 
-      this.$set(row.tabs[colIndex].list, newIndex, {
-        ...row.tabs[colIndex].list[newIndex],
+      this.$set(row.options.columns[colIndex].list, newIndex, {
+        ...row.options.columns[colIndex].list[newIndex],
         options: {
-          ...row.tabs[colIndex].list[newIndex].options
+          ...row.options.columns[colIndex].list[newIndex].options
           // remoteFunc: "func_" + key
         },
         key,
         // 绑定键值
-        model: row.tabs[colIndex].list[newIndex].type + "_" + key,
+        model: row.options.columns[colIndex].list[newIndex].type + "_" + key,
         rules: []
       });
 
       if (
-        row.tabs[colIndex].list[newIndex].type === "radio" ||
-        row.tabs[colIndex].list[newIndex].type === "checkbox" ||
-        row.tabs[colIndex].list[newIndex].type === "select"
+        row.options.columns[colIndex].list[newIndex].type === "radio" ||
+        row.options.columns[colIndex].list[newIndex].type === "checkbox" ||
+        row.options.columns[colIndex].list[newIndex].type === "select"
       ) {
-        this.$set(row.tabs[colIndex].list, newIndex, {
-          ...row.tabs[colIndex].list[newIndex],
+        this.$set(row.options.columns[colIndex].list, newIndex, {
+          ...row.options.columns[colIndex].list[newIndex],
           options: {
-            ...row.tabs[colIndex].list[newIndex].options,
-            options: row.tabs[colIndex].list[newIndex].options.options.map(
-              item => ({
-                ...item
-              })
-            )
+            ...row.options.columns[colIndex].list[newIndex].options,
+            options: row.options.columns[colIndex].list[
+              newIndex
+            ].options.options.map(item => ({
+              ...item
+            }))
           }
         });
       }
 
-      if (row.tabs[colIndex].list[newIndex].type === "grid") {
+      if (row.options.columns[colIndex].list[newIndex].type === "grid") {
         this.$set(
-          row.tabs[colIndex].list,
+          row.options.columns[colIndex].list,
           newIndex,
-          JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex]))
+          JSON.parse(
+            JSON.stringify(row.options.columns[colIndex].list[newIndex])
+          )
         );
       }
 
-      if (row.tabs[colIndex].list[newIndex].type === "table") {
-        this.$set(row.tabs[colIndex].list, newIndex, {
-          ...row.tabs[colIndex].list[newIndex],
-          list: row.tabs[colIndex].list[newIndex].list.map(item => ({
+      if (row.options.columns[colIndex].list[newIndex].type === "table") {
+        this.$set(row.options.columns[colIndex].list, newIndex, {
+          ...row.options.columns[colIndex].list[newIndex],
+          list: row.options.columns[colIndex].list[newIndex].list.map(item => ({
             ...item
           }))
         });
       }
 
-      this.selectWidget = row.tabs[colIndex].list[newIndex];
+      this.selectWidget = row.options.columns[colIndex].list[newIndex];
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

package/packages/FormMaking/custom/items/blank_pro.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <slot :name="widget.model" />
+  </div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/button.vue

@@ -12,6 +12,7 @@
     :loading="widget.options.loading"
     :disabled="widget.options.disabled"
     :icon="widget.options.buttonIcon"
+    @click="handleEventAction(widget.events.onClick)"
   >
     {{ widget.options.defaultValue }}
   </th-button>

package/packages/FormMaking/custom/items/cascader.vue

@@ -1,14 +1,18 @@
 <template>
   <el-cascader
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :disabled="widget.options.disabled"
     :clearable="widget.options.clearable"
     :placeholder="widget.options.placeholder"
-    :style="{ width: widget.options.width }"
+    :style="{
+      width: widget.options.width,
+      height: widget.options.height
+    }"
     :options="widget.options.remoteOptions"
     :props="widget.options.props"
     :show-all-levels="widget.options.showAllLevels ? false : true"
     :collapse-tags="widget.options.collapseTags"
+    :filterable="widget.options.filterable"
     @change="handleEventAction(widget.events.onChange)"
   >
     <template slot-scope="{ data }">

package/packages/FormMaking/custom/items/cell.vue

@@ -8,9 +8,7 @@
 
 <script>
 import { itemsComponent } from "../mixins/index";
-import ThCell from "ui/Cell/index.vue";
 export default {
-  components: { ThCell },
   mixins: [itemsComponent]
 };
 </script>

package/packages/FormMaking/custom/items/checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <el-checkbox-group
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
     :disabled="widget.options.disabled"
     :min="widget.options.min"
@@ -14,10 +14,15 @@
         }"
         :label="item.value"
         :border="widget.options.border"
-        v-for="(item, index) in widget.options.options"
-        :key="`checkbox_${index}_${item.value}`"
+        v-for="(item, index) in widget.options.remote
+          ? widget.options.remoteOptions
+          : widget.options.options"
+        :key="index"
       >
-        {{ widget.options.showLabel ? item.label : item.value }}
+        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-else>{{
+          widget.options.showLabel ? item.label : item.value
+        }}</template>
       </el-checkbox-button>
     </template>
     <template v-else>
@@ -27,10 +32,15 @@
         }"
         :label="item.value"
         :border="widget.options.border"
-        v-for="(item, index) in widget.options.options"
-        :key="`checkbox_${index}_${item.value}`"
+        v-for="(item, index) in widget.options.remote
+          ? widget.options.remoteOptions
+          : widget.options.options"
+        :key="index"
       >
-        {{ widget.options.showLabel ? item.label : item.value }}
+        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-else>{{
+          widget.options.showLabel ? item.label : item.value
+        }}</template>
       </el-checkbox>
     </template>
   </el-checkbox-group>

package/packages/FormMaking/custom/items/color.vue

@@ -1,6 +1,6 @@
 <template>
   <el-color-picker
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :disabled="widget.options.disabled"
     :show-alpha="widget.options.showAlpha"
     :color-format="widget.options.showAlpha ? 'rgb' : 'hex'"

package/packages/FormMaking/custom/items/date.vue

@@ -1,6 +1,6 @@
 <template>
   <el-date-picker
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
     :type="widget.options.type"
     :is-range="widget.options.isRange"

package/packages/FormMaking/custom/items/editor.vue

@@ -1,6 +1,6 @@
 <template>
   <vue-editor
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{
       width: widget.options.width,
       height: widget.options.height

package/packages/FormMaking/custom/items/{grid.vue → grid_dev.vue}

@@ -1,5 +1,4 @@
 <template>
-  <!-- widget.key -->
   <th-row
     :class="{ active: selectWidget.model == widget.model }"
     :gutter="widget.options.gutter ? widget.options.gutter : 0"
@@ -7,7 +6,7 @@
     :align="widget.options.align"
   >
     <th-col
-      v-for="(column, columnIndex) in widget.columns"
+      v-for="(column, columnIndex) in widget.options.columns"
       :key="`grid_${columnIndex}`"
       :span="column.span ? column.span : 0"
     >
@@ -20,7 +19,7 @@
           animation: 200,
           handle: '.drag-widget'
         }"
-        @add="handleWidgetColAdd($event, widget, columnIndex)"
+        @add="handleWidgetAdd($event, widget, columnIndex)"
       >
         <transition-group name="fade" tag="div" class="widget-col-list">
           <widget-form-item
@@ -29,8 +28,8 @@
             })"
             :key="element.key"
             :widget="element"
+            :widgetArray="column.list"
             :widgetIndex="elementIndex"
-            :widgetArray="column"
             :select.sync="selectWidget"
             :config="config"
           >
@@ -45,10 +44,9 @@
 import { itemsComponent } from "../mixins/index";
 import Draggable from "vuedraggable";
 import WidgetFormItem from "../../WidgetFormItem.vue";
-import ThRow from "ui/Row/index.vue";
-import ThCol from "ui/Col/index.vue";
+
 export default {
-  components: { Draggable, WidgetFormItem, ThRow, ThCol },
+  components: { Draggable, WidgetFormItem },
   mixins: [itemsComponent],
   data() {
     return {
@@ -67,61 +65,32 @@ export default {
     }
   },
   methods: {
-    handleWidgetColAdd($event, row, colIndex) {
+    handleWidgetAdd($event, row, colIndex) {
       const newIndex = $event.newIndex;
       const oldIndex = $event.oldIndex;
       const item = $event.item;
+      const newComponent = JSON.parse(
+        JSON.stringify(row.options.columns[colIndex].list[newIndex])
+      );
 
       // 防止布局元素的嵌套拖拽
       if (item.className.indexOf("data-grid") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
         item.tagName === "DIV" &&
-          this.widgetArray.list.splice(
-            oldIndex,
-            0,
-            row.columns[colIndex].list[newIndex]
-          );
-
-        row.columns[colIndex].list.splice(newIndex, 1);
+          this.widgetArray.splice(oldIndex, 0, newComponent);
 
+        row.options.columns[colIndex].list.splice(newIndex, 1);
         return false;
       }
 
       const key =
         Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.columns[colIndex].list, newIndex, {
-        ...row.columns[colIndex].list[newIndex],
-        options: {
-          ...row.columns[colIndex].list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.columns[colIndex].list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.columns[colIndex].list[newIndex].type === "radio" ||
-        row.columns[colIndex].list[newIndex].type === "checkbox" ||
-        row.columns[colIndex].list[newIndex].type === "select"
-      ) {
-        this.$set(row.columns[colIndex].list, newIndex, {
-          ...row.columns[colIndex].list[newIndex],
-          options: {
-            ...row.columns[colIndex].list[newIndex].options,
-            options: row.columns[colIndex].list[newIndex].options.options.map(
-              item => ({
-                ...item
-              })
-            )
-          }
-        });
+      if (!newComponent.model) {
+        newComponent.key = key;
+        newComponent.model = `${newComponent.type}_${key}`;
       }
-
-      // this.$emit("update:select", row.columns[colIndex].list[newIndex]);
-      this.selectWidget = row.columns[colIndex].list[newIndex];
+      this.$set(row.options.columns[colIndex].list, newIndex, newComponent);
+      this.selectWidget = newComponent;
     }
   }
 };

package/packages/FormMaking/custom/items/grid_pro.vue

@@ -0,0 +1,45 @@
+<template>
+  <th-row
+    :gutter="widget.options.gutter ? widget.options.gutter : 0"
+    :justify="widget.options.justify"
+    :align="widget.options.align"
+  >
+    <th-col
+      v-for="(column, columnIndex) in widget.options.columns"
+      :key="columnIndex"
+      :span="column.span"
+    >
+      <generate-form-item
+        v-for="element in column.list"
+        :key="element.key"
+        :widget="element"
+        :models="models"
+        :config="config"
+        :remote="remote"
+        :prop="prop ? `${prop}.${element.model}` : element.model"
+        :slotKeys="slotKeys"
+        :componentsData="componentsData"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </generate-form-item>
+    </th-col>
+  </th-row>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import GenerateFormItem from "../../GenerateFormItem.vue";
+export default {
+  components: { GenerateFormItem },
+  mixins: [itemsComponent],
+  props: ["models", "remote", "prop", "slotKeys", "componentsData"],
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/image.vue

@@ -1,32 +1,4 @@
 <template>
-  <!-- <div>
-    <th-image
-      v-if="!widget.options.remote"
-      :src="widget.options.defaultValue"
-      :height="widget.options.height"
-      :width="widget.options.width"
-      :fit="widget.options.fit"
-      :border-radius="widget.options.borderRadius"
-      :display-style="widget.options.displayStyle"
-      :error-src="widget.options.errorSrc"
-      :is-loding="widget.options.isLoding"
-    ></th-image>
-    <div v-for="item in widget.options.defaultValueArr" :key="item.url">
-      <th-image
-        v-if="widget.options.remote"
-        :src="item"
-        src-key="url"
-        :height="widget.options.height"
-        :width="widget.options.width"
-        :fit="widget.options.fit"
-        :border-radius="widget.options.borderRadius"
-        :preview-list="widget.options.defaultValueArr"
-        :display-style="widget.options.displayStyle"
-        :error-src="widget.options.errorSrc"
-        :is-loding="widget.options.isLoding"
-      ></th-image>
-    </div>
-  </div> -->
   <div>
     <el-image
       v-for="(item, index) in widget.options.defaultValue"