tianheng-ui 0.1.10 → 0.1.12

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>
@@ -140,9 +171,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -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>
@@ -104,9 +104,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>

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

@@ -35,33 +35,31 @@
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item label="选项">
-        <div
-          style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;"
-        >
-          <el-radio-group v-model="widget.options.remote" size="mini">
+      <el-form-item>
+        <div class="config-header" slot="label">
+          <span class="title">选项</span>
+          <el-radio-group
+            class="value"
+            v-model="widget.options.remote"
+            size="mini"
+          >
             <el-radio-button :label="false">静态数据</el-radio-button>
             <el-radio-button :label="true">远端数据</el-radio-button>
           </el-radio-group>
-
-          <div v-if="!widget.options.remote">
-            <span>显示标签</span>
-            <el-switch v-model="widget.options.showLabel"> </el-switch>
-          </div>
         </div>
 
         <template v-if="widget.options.remote">
           <el-select
             style="width:100%"
             v-model="widget.options.remoteFunc"
-            value-key="api"
+            :value-key="config.remoteFuncs.props.key"
             placeholder="请选择远端方法"
             clearable
           >
             <el-option
-              v-for="item in remoteApis"
-              :key="item.api"
-              :label="item.name"
+              v-for="item in config.remoteFuncs.options"
+              :key="item[config.remoteFuncs.props.key]"
+              :label="item[config.remoteFuncs.props.label]"
               :value="item"
             >
             </el-option>
@@ -78,6 +76,12 @@
           </el-input>
         </template>
         <template v-else>
+          <el-switch
+            v-model="widget.options.showLabel"
+            active-text="显示标签"
+            inactive-text="隐藏标签"
+          >
+          </el-switch>
           <el-radio-group v-model="widget.options.defaultValue">
             <draggable
               tag="ul"
@@ -165,9 +169,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -197,8 +201,8 @@ export default {
   methods: {
     handleAddOption() {
       this.widget.options.options.push({
-        value: `新选项${this.widget.options.options.length + 1}`,
-        label: `新选项${this.widget.options.options.length + 1}`
+        value: `选值 ${this.widget.options.options.length + 1}`,
+        label: `选项 ${this.widget.options.options.length + 1}`
       });
     },
     handleOptionsRemove(index) {

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

@@ -73,9 +73,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>

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

@@ -33,31 +33,29 @@
       </el-form-item>
 
       <el-form-item label="选项">
-        <div
-          style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;"
-        >
-          <el-radio-group v-model="widget.options.remote" size="mini">
+        <div class="config-header" slot="label">
+          <span class="title">选项</span>
+          <el-radio-group
+            class="value"
+            v-model="widget.options.remote"
+            size="mini"
+          >
             <el-radio-button :label="false">静态数据</el-radio-button>
             <el-radio-button :label="true">远端数据</el-radio-button>
           </el-radio-group>
-
-          <div v-if="!widget.options.remote">
-            <span>显示标签</span>
-            <el-switch v-model="widget.options.showLabel"> </el-switch>
-          </div>
         </div>
         <template v-if="widget.options.remote">
           <el-select
             style="width:100%"
             v-model="widget.options.remoteFunc"
-            value-key="api"
+            value-key="id"
             placeholder="请选择远端方法"
             clearable
           >
             <el-option
-              v-for="item in remoteApis"
-              :key="item.api"
-              :label="item.name"
+              v-for="item in config.remoteFuncs"
+              :key="item.id"
+              :label="item.label"
               :value="item"
             >
             </el-option>
@@ -74,6 +72,12 @@
           </el-input>
         </template>
         <template v-else>
+          <el-switch
+            v-model="widget.options.showLabel"
+            active-text="显示标签"
+            inactive-text="隐藏标签"
+          >
+          </el-switch>
           <template v-if="widget.options.multiple">
             <el-checkbox-group v-model="widget.options.defaultValue">
               <draggable
@@ -92,18 +96,19 @@
                 >
                   <el-checkbox :label="item.value" style="margin-right: 5px;">
                     <el-input
+                      v-model="item.value"
                       :style="{
                         width: widget.options.showLabel ? '90px' : '180px'
                       }"
-                      v-model="item.value"
                       :disabled="
                         widget.options.defaultValue.indexOf(item.value) !== -1
                       "
                     ></el-input>
                     <el-input
-                      v-if="widget.options.showLabel"
+                      v-show="widget.options.showLabel"
                       style="width:90px;"
                       v-model="item.label"
+                      placeholder="标签"
                     >
                     </el-input>
                   </el-checkbox>
@@ -244,9 +249,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -291,8 +296,8 @@ export default {
     },
     handleAddOption() {
       this.widget.options.options.push({
-        value: `新选项${this.widget.options.options.length + 1}`,
-        label: `新选项${this.widget.options.options.length + 1}`
+        value: `选值 ${this.widget.options.options.length + 1}`,
+        label: `选项 ${this.widget.options.options.length + 1}`
       });
     },
     handleOptionsRemove(index) {

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

@@ -106,9 +106,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>

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

@@ -94,9 +94,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>

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;

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

@@ -46,38 +46,33 @@
       <el-form-item label="选项">
         <el-radio-group
           v-model="widget.options.remote"
-          size="mini"
           style="margin-bottom:10px;"
+          size="mini"
         >
           <el-radio-button :label="false">静态数据</el-radio-button>
-          <el-radio-button :label="true">远端数据</el-radio-button>
+          <el-radio-button :label="true" disabled>远端数据</el-radio-button>
         </el-radio-group>
         <div v-if="widget.options.remote">
           <el-select
+            v-model="widget.options.remoteFunc"
             class="remoteApis"
             size="mini"
-            v-model="widget.options.remoteFunc"
             placeholder="请选择远端方法"
           >
             <template slot="prefix">
               <div style="width:70px;">接口名</div>
             </template>
-            <el-option-group
-              v-for="group in remoteApis"
-              :key="group.label"
-              :label="group.label"
+
+            <el-option
+              v-for="item in config.remoteFuncs.options"
+              :key="item[config.remoteFuncs.props.key]"
+              :label="item[config.remoteFuncs.props.label]"
+              :value="item"
             >
-              <el-option
-                v-for="item in group.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-option-group>
+            </el-option>
           </el-select>
 
-          <el-input size="mini" style="" v-model="widget.options.props.value">
+          <!-- <el-input size="mini" style="" v-model="widget.options.props.value">
             <template slot="prepend">
               <div style="width:30px;">值</div>
             </template>
@@ -86,13 +81,13 @@
             <template slot="prepend">
               <div style="width:30px;">标签</div>
             </template>
-          </el-input>
+          </el-input> -->
         </div>
         <template v-else>
           <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 +95,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 +154,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: []
       });
     }