@form-create/component-elm-group 2.5.28 → 2.5.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-create/component-elm-group",
-  "version": "2.5.28",
+  "version": "2.5.32",
   "description": "@form-create/element-ui 内置组件",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,7 +30,7 @@
   "author": "xaboy",
   "license": "MIT",
   "dependencies": {
-    "@form-create/utils": "^2.5.27"
+    "@form-create/utils": "^2.5.31"
   },
   "bugs": {
     "url": "https://github.com/xaboy/form-create/issues"
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "441d2d1b3ce8b293a0557c869c8f72f4de9ffac5"
+  "gitHead": "8b4a977f33789d6866a98ecd2559858a4d5a20ec"
 }

package/src/component.jsx

@@ -1,6 +1,7 @@
 import {hasProperty} from '@form-create/utils/lib/type';
 import deepExtend, {deepCopy} from '@form-create/utils/lib/deepextend';
 import extend from '@form-create/utils/lib/extend';
+import './style.css';
 
 const NAME = 'fcGroup';
 
@@ -32,6 +33,10 @@ export default {
             type: Array,
             default: () => []
         },
+        sortBtn: {
+            type: Boolean,
+            default: true
+        },
         defaultValue: Object,
         disabled: {
             type: Boolean,
@@ -41,10 +46,6 @@ export default {
             type: Boolean,
             default: true
         },
-        fontSize: {
-            type: Number,
-            default: 28
-        },
         onBeforeRemove: {
             type: Function,
             default: () => {
@@ -55,12 +56,14 @@ export default {
             default: () => {
             }
         },
+        parse: Function,
     },
     data() {
         return {
             len: 0,
             cacheRule: {},
             cacheValue: {},
+            sort: [],
             type: undefined
         }
     },
@@ -76,6 +79,12 @@ export default {
         }
     },
     watch: {
+        cacheRule: {
+            handler(n) {
+                this.sort = Object.keys(n);
+            },
+            immediate: true
+        },
         formRule: {
             handler(n, o) {
                 Object.keys(this.cacheRule).forEach(v => {
@@ -113,9 +122,9 @@ export default {
                 this.expandRule(d);
             }
         },
-        value(n) {
+        value(n, o) {
             n = n || [];
-            let keys = Object.keys(this.cacheRule), total = keys.length, len = total - n.length;
+            let keys = this.sort, total = keys.length, len = total - n.length;
             if (len < 0) {
                 for (let i = len; i < 0; i++) {
                     this.addRule(n.length + i);
@@ -132,6 +141,9 @@ export default {
                 n.forEach((val, i) => {
                     this.setValue(keys[i], n[i]);
                 });
+                if (o.length && !n.length) {
+                    this.input([]);
+                }
             }
         }
     },
@@ -148,7 +160,7 @@ export default {
         },
         formData(key, formData) {
             const cacheRule = this.cacheRule;
-            const keys = Object.keys(cacheRule);
+            const keys = this.sort;
             if (keys.filter(k => cacheRule[k].$f).length !== keys.length) {
                 return;
             }
@@ -182,6 +194,7 @@ export default {
                 const defVal = deepCopy(this.defaultValue);
                 extend(options.formData, this.field ? {[this.field]: defVal} : defVal);
             }
+            this.parse && this.parse({rule, options, index: this.sort.length});
             this.$set(this.cacheRule, ++this.len, {rule, options});
             if (emit) {
                 this.$nextTick(() => this.$emit('add', rule, Object.keys(this.cacheRule).length - 1));
@@ -189,7 +202,6 @@ export default {
         },
         add$f(i, key, $f) {
             this.cacheRule[key].$f = $f;
-            this.formData(key, $f.formData());
             this.$nextTick(() => {
                 if (this.syncDisabled) {
                     $f.disabled(this.disabled);
@@ -216,18 +228,30 @@ export default {
                 return;
             }
             this.removeRule(key, true);
-            this.value.splice(index, 1);
-            this.input(this.value);
+            const value = [...this.value];
+            value.splice(index, 1);
+            this.input(value);
         },
         addIcon(key) {
-            return <i key={`a${key}`} class="el-icon-circle-plus-outline"
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer'};`}
-                on-click={this.add}/>;
+            return <div class="_fc-group-btn _fc-group-plus-minus" on-click={this.add}></div>;
         },
         delIcon(index, key) {
-            return <i key={`d${key}`} class="el-icon-remove-outline"
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266'};`}
-                on-click={() => this.del(index, key)}/>;
+            return <div class="_fc-group-btn _fc-group-plus-minus _fc-group-minus"
+                onClick={() => this.del(index, key)}></div>
+        },
+        sortUpIcon(index) {
+            return <div class="_fc-group-btn _fc-group-arrow _fc-group-up"
+                onClick={() => this.changeSort(index, -1)}></div>
+        },
+        sortDownIcon(index) {
+            return <div class="_fc-group-btn _fc-group-arrow _fc-group-down"
+                onClick={() => this.changeSort(index, 1)}></div>
+        },
+        changeSort(index, sort) {
+            const a = this.sort[index];
+            this.$set(this.sort, index, this.sort[index + sort]);
+            this.sort[index + sort] = a;
+            this.formData(0);
         },
         makeIcon(total, index, key) {
             if (this.$scopedSlots.button) {
@@ -240,12 +264,20 @@ export default {
                     add: this.add
                 });
             }
-            if (index === 0) {
-                return [(this.max !== 0 && total >= this.max) ? null : this.addIcon(key), (this.min === 0 || total > this.min) ? this.delIcon(index, key) : null];
+            const btn = [];
+            if ((!this.max || total < this.max) && total === index + 1) {
+                btn.push(this.addIcon(key));
             }
             if (total > this.min) {
-                return this.delIcon(index, key);
+                btn.push(this.delIcon(index, key));
+            }
+            if (this.sortBtn && index) {
+                btn.push(this.sortUpIcon(index));
+            }
+            if (this.sortBtn && index !== total - 1) {
+                btn.push(this.sortDownIcon(index));
             }
+            return btn;
         },
         emitEvent(name, args, index, key) {
             this.$emit(name, ...args, this.cacheRule[key].$f, index);
@@ -267,21 +299,21 @@ export default {
         }
     },
     render() {
-        const keys = Object.keys(this.cacheRule);
+        const keys = this.sort;
         const button = this.button;
         const Type = this.type;
-        return keys.length === 0 ?
+        const disabled = this.disabled;
+
+        const children = keys.length === 0 ?
             (this.$scopedSlots.default ? (this.$scopedSlots.default({
                 vm: this,
                 add: this.add
-            })) : <i key={'a_def'} class="el-icon-circle-plus-outline"
-                style={`font-size:${this.fontSize}px;vertical-align:middle;color:${this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer'};`}
-                on-click={this.add}/>) :
-            <div key={'con'}>{keys.map((key, index) => {
+            })) : <div key={'a_def'} class="_fc-group-plus-minus _fc-group-add"
+                on-click={this.add}/>) : keys.map((key, index) => {
                 const {rule, options} = this.cacheRule[key];
-                return <ElRow align="middle" type="flex" key={key}
-                    style="border-bottom:1px dashed #DCDFE6;margin-bottom:10px;">
-                    <ElCol span={button ? 20 : 24}><Type
+                const btn = button && !disabled ? this.makeIcon(keys.length, index, key) : [];
+                return <div class="_fc-group-container" key={key}>
+                    <Type
                         key={key}
                         on={{
                             'update:value': (formData) => this.formData(key, formData),
@@ -289,15 +321,17 @@ export default {
                             input: ($f) => this.add$f(index, key, $f)
                         }}
                         props={{
+                            inFor: true,
                             value: this.field ? {[this.field]: this._value(this.value[index])} : this.value[index],
                             rule,
                             option: options,
-                            extendOption: true,
-                            inFor: true
-                        }}/></ElCol>
-                    {button ? <ElCol
-                        props={{span: 2, pull: 1, push: 1}}>{this.makeIcon(keys.length, index, key)}</ElCol> : null}
-                </ElRow>
-            })}</div>
-    }
+                            extendOption: true
+                        }}
+                    />
+                    <div class="_fc-group-idx">{index + 1}</div>
+                    {(btn.length) ? <div class="_fc-group-handle">{btn}</div> : null}
+                </div>
+            });
+        return <div key={'con'} class={'_fc-group ' + (disabled ? '_fc-group-disabled' : '')}>{children}</div>
+    },
 }

package/src/style.css

@@ -0,0 +1,124 @@
+._fc-group{
+    display: flex;
+    min-height: 42px;
+    justify-content: center;
+    flex-direction: column;
+}
+
+._fc-group-disabled ._fc-group-btn, ._fc-group-disabled ._fc-group-add{
+    cursor: not-allowed;
+}
+
+._fc-group-handle {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    bottom: -15px;
+    right: 30px;
+    border-radius: 15px;
+    border: 1px dashed #d9d9d9;
+    padding: 3px 8px;
+    background-color: #ffffff;
+}
+
+._fc-group-btn{
+    cursor: pointer;
+}
+
+._fc-group-idx {
+    position: absolute;
+    bottom: -15px;
+    left: 10px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    border-radius: 15px;
+    font-weight: 700;
+}
+
+._fc-group-handle ._fc-group-btn + ._fc-group-btn {
+    margin-left: 7px;
+}
+
+._fc-group-container{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: 1px dashed #d9d9d9;
+    padding: 20px;
+    margin: 5px;
+    border-radius: 5px;
+    margin-bottom: 25px;
+    padding-bottom: 25px;
+}
+
+._fc-group-arrow {
+    position: relative;
+    width: 20px;
+    height: 20px;
+}
+
+._fc-group-arrow::before {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: 5px;
+    width: 9px;
+    height: 9px;
+    border-left: 2px solid #999;
+    border-top: 2px solid #999;
+}
+._fc-group-arrow::before {
+    transform: rotate(45deg);
+}
+
+._fc-group-arrow._fc-group-down {
+    transform: rotate(180deg);
+}
+
+._fc-group-plus-minus {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    cursor: pointer;
+}
+
+._fc-group-plus-minus::before,
+._fc-group-plus-minus::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 60%;
+    height: 2px;
+    background-color: #409eff;
+    transform: translate(-50%, -50%);
+}
+
+._fc-group-plus-minus::before {
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+._fc-group-plus-minus._fc-group-minus::before {
+    display: none;
+}
+._fc-group-plus-minus._fc-group-minus::after {
+    background-color: #f56c6c;
+}
+
+
+._fc-group-add{
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    border: 1px solid rgb(64 158 255 / 50%);
+    border-radius: 15px;
+}
+
+._fc-group-add._fc-group-plus-minus::before, ._fc-group-add._fc-group-plus-minus::after {
+    width: 50%;
+}
+