All files / src/components/m-dynamic.vue index.vue

100% Statements 4/4
50% Branches 1/2
100% Functions 0/0
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81      7x   7x     7x                                                                                                                                                
<script>
import MEmitter from '../m-emitter.vue';
import cloneDeep from 'lodash/cloneDeep';
 
export default {
    name: 'm-dynamic',
    mixins: [MEmitter],
    props: {
        data: Array,
        dynamic: { type: Boolean, default: true },
        getDefaultItem: Function,
        initialAdd: { type: Boolean, default: true },
        minCount: { type: Number, default: 1 },
        maxCount: { type: Number, default: Infinity },
    },
    data() {
        return { currentData: this.data, keysArray: [] };
    },
    watch: {
        data(data) {
            this.currentData = data;
        },
    },
    created() {
        const needCount = this.minCount - this.currentData.length;
        if (this.initialAdd && needCount > 0) {
            for (let i = 0; i < needCount; i++)
                this.add();
        }
        // 设置行的key。行的key设置为rowIndex,会导致里面的validator错误信息错位
        // 这里设置每行的唯一key
        this.currentData.forEach((item, index) => {
            this.setKey(item, index);
        });
    },
    methods: {
        add() {
            if (this.currentData.length >= this.maxCount)
                return;
            const item = this.getDefaultItem ? this.getDefaultItem() : {};
            const index = this.currentData.length;
            if (this.$emitPrevent('before-add', { item, index, data: this.currentData }, this))
                return;
            this.setKey(item, this.currentData.length + 1);
            this.currentData.push(item);
            this.$emit('add', { item, index, data: this.currentData }, this);
            this.$emit('splice', { item, index, data: this.currentData }, this);
        },
        duplicate(index) {
            if (this.currentData.length >= this.maxCount)
                return;
            const item = cloneDeep(this.currentData[index]);
            if (this.$emitPrevent('before-duplicate', { item, index, data: this.currentData }, this))
                return;
            this.setKey(item, this.currentData.length + 1);
            this.currentData.splice(index, 0, item);
            this.$emit('duplicate', { item, index, data: this.currentData }, this);
            this.$emit('splice', { item, index, data: this.currentData }, this);
        },
        remove(index) {
            if (this.currentData.length <= this.minCount)
                return;
            const item = this.currentData[index];
            if (this.$emitPrevent('before-remove', { item, index, data: this.currentData }, this))
                return;
            this.currentData.splice(index, 1);
            this.$emit('remove', { item, index, data: this.currentData }, this);
            this.$emit('splice', { item, index, data: this.currentData }, this);
        },
        setKey(item, index) {
            const key = `${(new Date()).getTime()}_${index}`;
            this.keysArray.push({ item, key });
        },
        getKey(item) {
            const keyItem = this.keysArray.find((keyItem) => keyItem.item === item);
            return keyItem && keyItem.key;
        },
    },
};
</script>