Merge branch 'master' of https://github.com/JSON-Drived-Configurable-Platform/form-generator-iview

Author: BingBlog

build/webpack.website.dev.config.js

@@ -41,6 +41,11 @@ module.exports = merge(webpackBaseConfig, {
 
     devtool: 'eval-source-map',
 
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, '../website'),
+        }
+    },
     // 入口
     entry: {
         main: path.resolve(__dirname, '../website/main'),

package-lock.json

@@ -22,16 +22,24 @@
         :class="itemClasses"
         :style="itemStyle"
     >
-        <Icon
-            v-if="labelTip.icon"
-            :type="labelTip.icon.name"
-            :size="labelTip.icon.size"
-            :color="labelTip.icon.color"
-            @click="handleIconClick"
-            @mouseenter.native="handleIconMouseEnter"
-            @mouseleave.native="handleIconMouseLeave"
-        />
-        <div v-if="contentShow" v-html="labelTip.content.body" />
+        <div
+            :class="[labelTipClasses, labelTip.class]"
+            @mouseenter="handleIconMouseEnter"
+            @mouseleave="handleIconMouseLeave"
+        >
+            <Icon
+                v-if="labelTip.icon"
+                :type="labelTip.icon.name"
+                :size="labelTip.icon.size"
+                :color="labelTip.icon.color"
+                @click="handleIconClick"
+            />
+            <div
+                v-if="contentShow"
+                :class="labelTipContentClasses"
+                v-html="labelTip.content.body"
+            />
+        </div>
         <component
             :is="getFieldCom(field.type)"
             :class="classes"
@@ -112,6 +120,12 @@ export default {
         itemClasses() {
             return `${classPrefix}-form-item`;
         },
+        labelTipClasses() {
+            return `${classPrefix}-labelTip-wp`;
+        },
+        labelTipContentClasses() {
+            return `${classPrefix}-labelTip-content`;
+        },
         notFormfield() {
             return notFormfields.includes(this.field.type);
         },
@@ -303,7 +317,7 @@ export default {
         handelListItemClick(value) {
             this.$emit('on-list-item-click', value);
         },
-        
+
 
         submit(component) {
             let field = component.field;

src/fieldGenerator.vue

@@ -56,6 +56,7 @@
 <script>
 import {Input, Tag} from 'iview';
 import {getValue} from '../utils/processValue';
+import schema from 'async-validator';
 
 export default {
     inject: ['form'],
@@ -97,17 +98,63 @@ export default {
                 this.handleAdd(e);
             }
         },
+        // 通过field.inputRules校验
+        validator() {
+            let formItem = this.$parent;
+
+            if (typeof this.field.inputRules === 'object') {
+                let descriptor = {};
+                descriptor[this.field.model] = this.field.inputRules;
+
+                let validator = new schema(descriptor);
+                let model = {};
+
+                model[this.field.model] = this.value;
+
+                validator.validate(model, errors => {
+                    if (errors) {
+                        this.validateMessage = errors ? errors[0].message : '';
+
+                        formItem.validateState = 'error';
+                        formItem.validateMessage = this.validateMessage;
+                        return;
+                    } else {
+                        formItem.validateState = 'success';
+                        this.validateMessage = '';
+                    }
+                });
+            } else {
+                formItem.validateState = 'success';
+                this.validateMessage = '';
+            }
+        },
         handleAdd(e) {
             if (!this.value) {
                 this.$Message.warning('请输入数据后添加');
                 return;
             }
-            if (this.list.indexOf(this.value) === -1) {
-                this.field.succMessage && this.$Message.success(this.field.succMessage);
-                this.list.push(this.value);
-                this.value = '';
-                this.$emit('on-change', this.field.model, this.list, e, this.field);
+            if (this.list.indexOf(this.value) !== -1) {
+                this.$Message.warning(`${this.value}已存在`);
+                return;
             }
+            if (this.defaultList.indexOf(this.value) !== -1) {
+                this.$Message.warning(`${this.value}已存在`);
+                return;
+            }
+
+            if (!this.validateMessage) {
+                this.addMember(e);
+            }
+        },
+        addMember(e) {
+            let formItem = this.$parent;
+            formItem.validateState = 'success';
+
+            this.field.succMessage && this.$Message.success(this.field.succMessage);
+            this.list.push(this.value);
+            this.value = '';
+            // this.$set(this.form.model, this.field.model, this.list);
+            this.$emit('on-change', this.field.model, this.list, e, this.field);
         },
         handelMemberDelete(i, e) {
             this.list.splice(i, 1);
@@ -116,6 +163,7 @@ export default {
         },
         handleChange(e) {
             this.value = e.target.value;
+            this.validator();
         }
     }
 };

src/fields/fieldInputMultiple.vue

@@ -44,6 +44,7 @@
             :disabled="field.disabled || false"
             :clearable="clearable"
             :size="size"
+            :transfer="field.transfer || false"
             :placeholder="field.placeholder"
             :filterable="filterable || false"
             :loading="loading"

src/fields/fieldSelect.vue

@@ -26,6 +26,14 @@
         line-height: 30px;
     }
 
+    &-labelTip-wp {
+        position: relative;
+        line-height: 36px;
+        font-size: 22px;
+        color: #00f;
+        z-index: 11;
+    }
+
     &-default-items-box {
         width: 90%;
         display: inline-block;