@form-create/component-antdv-group 3.1.19 → 3.1.24

package/src/component.jsx

@@ -1,9 +1,8 @@
 import {hasProperty} from '@form-create/utils/lib/type';
-import {defineComponent, markRaw, nextTick} from 'vue';
-import MinusCircleOutlined from './MinusCircleOutlined.vue';
-import PlusCircleOutlined from './PlusCircleOutlined.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,30 +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 <PlusCircleOutlined key={`a${key}`}
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer'};`}
-                onClick={this.add}/>;
+            return <div class="_fc-group-btn _fc-group-plus-minus" onClick={this.add}></div>;
         },
         delIcon(index, key) {
-            return <MinusCircleOutlined key={`d${key}`}
-                style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266'};`}
-                onClick={() => 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.sort[index] = this.sort[index + sort];
+            this.sort[index + sort] = a;
+            this.formData(0);
         },
         makeIcon(total, index, key) {
             if (this.$slots.button) {
@@ -233,12 +247,20 @@ 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);
@@ -250,6 +272,9 @@ export default defineComponent({
         }
     },
     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);
@@ -259,30 +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
-            })) : <PlusCircleOutlined key={1}
-                style={`font-size:${this.fontSize}px;vertical-align:middle;color:${this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer'};`}
-                onClick={this.add}/>) :
-            <div 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 <aRow align="middle" type="flex" key={key}
-                    style="border-bottom:1px dashed #DCDFE6;margin-bottom:10px;">
-                    <aCol 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}/></aCol>
-                    {button ? <aCol span={2} pull={1} push={1}>{this.makeIcon(keys.length, index, key)}</aCol> : null}
-                </aRow>
-            })}</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/MinusCircleOutlined.vue

@@ -1,17 +0,0 @@
-<template>
-  <span class="anticon">
-    <svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-      <path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
-            fill="currentColor"></path>
-      <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
-          fill="currentColor"></path>
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-    name: 'MinusCircleOutlined'
-}
-</script>

package/src/PlusCircleOutlined.vue

@@ -1,18 +0,0 @@
-<template>
-  <span class="anticon">
-    <svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-      <path
-          d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
-          fill="currentColor"></path>
-      <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
-          fill="currentColor"></path>
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-    name: 'PlusCircleOutlined'
-}
-</script>