plus-ui/src/components/Options/positionConfig.vue

<!-- 档位配置 插件 -->
<template>
    <Form ref="formPosition" :label-width="configWidth" :model="formData" :rules="ruleValidate" style="padding-bottom:20px">
        <FormItem :label="`选项${index + 1}：`" v-for="(item,index) in posNum" :key="item" class="m-t-20"
            :prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue">
            <InputNumber
                :min="0"
                :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')"
                placeholder="请填写" :disabled="isSee" class="w-200"
                v-model="formData.gearValue[index]"
            />
            <img v-if="!isSee&&posNum<maxPosLen" :src="addImg" class="img-btn" @click="changePos(index,'add')">
            <img v-if="!isSee&&posNum>1" :src="delImg" @click="changePos(index,'del')" class="img-btn">
        </FormItem>
    </Form>
</template>

<script>
import addImg from '@/assets/image/add-icon.png'
import delImg from '@/assets/image/del-icon.png'
export default {
    props: {
        enumData: {
            type: Object,
            default: null
        },
        isSee: {
            type: Boolean,
            default: false
        },
        // label宽度
        configWidth: {
            type: Number,
            default: 120
        }
    },
    data() {
        return {
            addImg: addImg,
            delImg: delImg,
            maxPosLen: 20, // 最多20档
            posNum: 1, // 当前档位数量
            formData: {
                gearValue: [null] // null:为了不让显示默认1
            },
            ruleValidate: {
                gearValue: [
                    { required: true, message: '请填写档位值' }
                ]
            }
        }
    },

    methods: {
        // 提交的校验
        handleValidate() {
            return new Promise((resolve, reject) => {
                this.$refs.formPosition.validate((valid) => {
                    if (valid) {
                        // 数据转换为接口所需要的形式
                        let obj = {};
                        if (this.formData.gearValue) {
                            if (this.formData.gearValue.length[0] === null) {
                                obj.gearValue = null;
                            } else {
                                obj.gearValue = this.formData.gearValue.join();
                            }
                        } else {
                            obj.gearValue = null;
                        }
                        resolve(obj)
                    }
                })
            })
        },

        // 增删档位
        changePos(idx, actType) {
            if (actType === 'add') {
                if (this.formData.gearValue.length < 20) {
                    this.posNum++;
                    this.formData.gearValue.splice(idx + 1, 0, null);
                }
            } else {
                this.formData.gearValue.splice(idx, 1);
                this.posNum--;
            }
        },

        // 初始化(在父组件中调用)
        initData(obj) {
            if (obj.gearValue) {
                if (obj.gearValue instanceof Array) {
                    this.formData.gearValue = obj.gearValue;
                } else if (typeof obj.gearValue === 'string') {
                    let arr = [];
                    if (obj.gearValue.indexOf(';') !== -1) {
                        // 多个-接口传回来的（接口返回的是;分割）
                        arr = obj.gearValue.split(';');
                    } else {
                        // 多个-正在编辑中 / 只有一个
                        arr = obj.gearValue.split(',');
                    }
                    this.formData.gearValue = arr.map(item => {
                        return Number(item);
                    })
                }
            } else {
                this.formData.gearValue = [null];
            }
            this.posNum = this.formData.gearValue.length;
        },

        // 重置表单(在父组件中调用)
        resetForm() {
            this.$refs.formPosition.resetFields();
            this.formData.gearValue = [null];
        }
    }
}
</script>

<style scoped>
.img-btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 20px;
    cursor: pointer;
}
</style>