@form-create/component-elm-group 3.1.23 → 3.1.27

package/src/component.jsx

@@ -1,9 +1,8 @@
 import {hasProperty} from '@form-create/utils/lib/type';
-import {defineComponent, markRaw, nextTick} from 'vue';
-import IconCirclePlus from './IconCirclePlus.vue';
-import IconRemove from './IconRemove.vue';
+import {defineComponent, markRaw, nextTick, watch} from 'vue';
 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 +31,10 @@ export default defineComponent({
             default: () => []
         },
         defaultValue: Object,
+        sortBtn: {
+            type: Boolean,
+            default: true
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -40,10 +43,6 @@ export default defineComponent({
             type: Boolean,
             default: true
         },
-        fontSize: {
-            type: Number,
-            default: 28
-        },
         onBeforeRemove: {
             type: Function,
             default: () => {
@@ -55,12 +54,14 @@ export default defineComponent({
             }
         },
         formCreateInject: Object,
+        parse: Function,
     },
     data() {
         return {
             len: 0,
             cacheRule: {},
             cacheValue: {},
+            sort: [],
             form: markRaw(this.formCreateInject.form.$form())
         }
     },
@@ -106,7 +107,7 @@ export default defineComponent({
         modelValue: {
             handler(n) {
                 n = n || [];
-                let keys = Object.keys(this.cacheRule), total = keys.length, len = total - n.length;
+                let keys = Object.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, true);
@@ -141,7 +142,7 @@ export default defineComponent({
         },
         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;
             }
@@ -174,6 +175,7 @@ export default defineComponent({
                 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.cacheRule[++this.len] = {rule, options};
             if (emit) {
                 nextTick(() => this.$emit('add', rule, Object.keys(this.cacheRule).length - 1));
@@ -181,7 +183,6 @@ export default defineComponent({
         },
         add$f(i, key, $f) {
             this.cacheRule[key].$f = $f;
-            this.formData(key, $f.formData());
             nextTick(() => {
                 if (this.syncDisabled) {
                     $f.disabled(this.disabled);
@@ -197,34 +198,43 @@ export default defineComponent({
                 nextTick(() => this.$emit('remove', index));
             }
         },
-        add() {
+        add(i) {
             if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
                 return;
             }
-            this.modelValue.push(this.field ? null : {});
-            this.$emit('update:modelValue', this.modelValue);
+            const value = [...this.modelValue];
+            value.push(this.defaultValue ? deepCopy(this.defaultValue) : (this.field ? null : {}));
+            this.input(value);
         },
         del(index, key) {
             if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
                 return;
             }
             this.removeRule(key, true);
-            this.modelValue.splice(index, 1);
-            this.input(this.modelValue);
+            const value = [...this.modelValue];
+            value.splice(index, 1);
+            this.input(value);
         },
         addIcon(key) {
-            return <ElIcon key={`a${key}`}
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer'};`}
-                onClick={this.add}>
-                <IconCirclePlus/>
-            </ElIcon>
+            return <div class="_fc-group-btn _fc-group-plus-minus" onClick={this.add}></div>;
         },
         delIcon(index, key) {
-            return <ElIcon key={`d${key}`} class="el-icon-remove-outline"
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266'};`}
-                onClick={() => this.del(index, key)}>
-                <IconRemove/>
-            </ElIcon>
+            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.sort[index] = this.sort[index + sort];
+            this.sort[index + sort] = a;
+            this.formData(0);
         },
         makeIcon(total, index, key) {
             if (this.$slots.button) {
@@ -237,23 +247,34 @@ export default defineComponent({
                     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);
         },
         expandRule(n) {
             for (let i = 0; i < n; i++) {
-                this.modelValue.push(this.field ? null : {});
+                this.addRule(i);
             }
         }
     },
     created() {
+        watch(() => ({...this.cacheRule}), (n) => {
+            this.sort = Object.keys(n);
+        }, {immediate: true})
         const d = (this.expand || 0) - this.modelValue.length;
         for (let i = 0; i < this.modelValue.length; i++) {
             this.addRule(i);
@@ -263,32 +284,37 @@ export default defineComponent({
         }
     },
     render() {
-        const keys = Object.keys(this.cacheRule);
+        const keys = this.sort;
         const button = this.button;
         const Type = this.form;
-        return keys.length === 0 ?
+        const disabled = this.disabled;
+
+        const children = keys.length === 0 ?
             (this.$slots.default ? (this.$slots.default({
                 vm: this,
                 add: this.add
-            })) : <ElIcon key={1}
-                style={`font-size:${this.fontSize}px;vertical-align:middle;color:${this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer'};`}
-                onClick={this.add}>
-                <IconCirclePlus/>
-            </ElIcon>) :
-            <div style="width: 100%;" key={2}>{keys.map((key, index) => {
+            })) : <div key={'a_def'} class="_fc-group-plus-minus _fc-group-add"
+                onClick={this.add}/>) : keys.map((key, index) => {
                 const {rule, options} = this.cacheRule[key];
-                return <ElRow align="middle" key={key}
-                    style="border-bottom:1px dashed #DCDFE6;margin-bottom:10px;">
-                    <ElCol span={button ? 20 : 24}><Type
-                        key={key} inFor={true}
-                        onUpdate:modelValue={(formData) => this.formData(key, formData)}
-                        modelValue={this.field ? {[this.field]: this._value(this.modelValue[index])} : this.modelValue[index]}
-                        onEmit-event={(name, ...args) => this.emitEvent(name, args, index, key)}
-                        onUpdate:api={($f) => this.add$f(index, key, $f)}
-                        rule={rule}
-                        option={options} extendOption={true}/></ElCol>
-                    {button ? <ElCol span={2} pull={1} push={1}>{this.makeIcon(keys.length, index, key)}</ElCol> : null}
-                </ElRow>
-            })}</div>
+                const btn = button && !disabled ? this.makeIcon(keys.length, index, key) : [];
+                return <div class="_fc-group-container" key={key}>
+                    <Type
+                        key={key}
+                        {...{
+                            'onUpdate:modelValue': (formData) => this.formData(key, formData),
+                            'onEmit-event': (name, ...args) => this.emitEvent(name, args, index, key),
+                            'onUpdate:api': ($f) => this.add$f(index, key, $f),
+                            inFor: true,
+                            modelValue: this.field ? {[this.field]: this._value(this.modelValue[index])} : this.modelValue[index],
+                            rule,
+                            option: options,
+                            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,125 @@
+._fc-group{
+    display: flex;
+    min-height: 38px;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+}
+
+._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%;
+}
+

package/src/IconCirclePlus.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-    <path fill="currentColor" d="M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"></path>
-    <path fill="currentColor" d="M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"></path>
-    <path fill="currentColor"
-          d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"></path>
-  </svg>
-</template>
-
-<script>
-export default {
-    name: 'IconCirclePlus'
-}
-</script>

package/src/IconRemove.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-    <path fill="currentColor" d="M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"></path>
-    <path fill="currentColor"
-          d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"></path>
-  </svg>
-</template>
-
-<script>
-export default {
-    name: 'IconRemove'
-}
-</script>