dy-admin-manager/src/views/luckyDraw/trophyCreate.vue

<!--  -->
<template>
    <div>
        <el-form :model="form"
                :rules="rules"
                ref="ruleForm">
            <p style="color: red; padding: 0 0 10px 100px;">注意：活动所有奖品的中奖概率之和必须等于100%; <br />活动奖品必须选择一个默认奖品，该奖品建议设置为谢谢参与;</p>
            <el-form-item label="所属活动" prop="groupId" label-width="100PX">
                <el-select v-model.trim="form.groupId"
                        style="width: 100% !important"
                        placeholder="请选择所属活动">
                    <el-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-row :gutter="10" v-for="(reword, index) in form.rewordList" :key="index">
                <el-col :span="10">
                    <el-form-item :label="`奖品${index + 1}`"
                            label-width="100PX"
                            :prop="'rewordList.' + index + '.name'"
                            :rules="[{required: true, message:'请输入活动名称', trigger: 'blur'}]">
                        <el-input v-model.trim="reword.name"
                                autocomplete="off"
                                placeholder="请输入奖品名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item :prop="'rewordList.' + index + '.chances'"
                            :rules="[{required: true, validator: validNumber, trigger: 'blur'}]">
                        <el-input v-model.trim="reword.chances"
                                type="number"
                                autocomplete="off"
                                placeholder="请输入中奖概率">
                            <i slot="suffix" class="el-input__icon" style="padding-right: 5px;">%</i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item :prop="'rewordList.' + index + '.stock'"
                            :rules="[{required: true, validator: validNumber1, trigger: 'blur'}]">
                        <el-input v-model.trim="reword.stock"
                                type="number"
                                autocomplete="off"
                                placeholder="请输入库存">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item :prop="'rewordList.' + index + '.isDefault'"
                            :rules="[{required: true, message:'请输入选择是否默认', trigger: 'blur'}]">
                        <el-select v-model.trim="reword.isDefault"
                                style="width: 100% !important"
                                placeholder="请选择是否默认">
                            <el-option :value="true" label="是"></el-option>
                            <el-option :value="false" label="否"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="text-align: center">
                <el-button :disabled="form.rewordList.length <= 1" class="add-reword" round icon="el-icon-minus" @click="onRemoveReword">删除奖品</el-button>
                <el-button class="add-reword" round icon="el-icon-plus" @click="onAddReword">添加奖品</el-button>
            </div>
            <el-form-item label="备注" label-width="100PX"
                        prop="memo">
                <el-input type="textarea" :rows="2" v-model.trim="form.memo"
                        autocomplete="off"
                        placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button @click="onClose('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
        </div>
    </div>
</template>

<script>
import Tooltip from '@/components/Tooltip/index'
import pagination from "@/components/Pagination/index";
import dayjs from 'dayjs';
import numeral from 'numeral';
import cleanDeep from 'clean-deep';
import { luckDrawPrizeBatchAdd } from './api'
const validNumber1 = (rule, value, callback) => {
    const re = /^[0-9]+$/
    if (value == '' && typeof value == 'string' || value == null) {
        callback(new Error('请输入库存'))
    } else if (!re.test(value) && value < 0) {
        callback(new Error('输入库存为正整数'))
    } else {
        callback()
    }
}
const validNumber = (rule, value, callback) => {
    if (value == '' && typeof value == 'string' || value == null) {
        callback(new Error('请输入中奖概率'))
    } else if (value < 0) {
        callback(new Error('输入值不能小于0'))
    } else {
        callback()
    }
}
export default {
    components: { pagination, Tooltip, },
    props: ['groupList', 'close', 'getList'],
    data () {
        return {
            validNumber1: validNumber1,
            validNumber: validNumber,
            form: {
                groupId: null,
                rewordList: [{
                    name: null,
                    chances: null,
                    stock: null,
                    isDefault: null
                }],
                memo: null
            },
            rules: {
                groupId: [{required: true, message:'请选择所属活动', trigger: 'change'}]
            },
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 1, // 总条数
                page_size: [10, 20, 40, 50] // 选择限制显示条数
            }
        };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    },
    methods: {
        onRemoveReword() { // 删除奖品
            let form = this.form
            if(form.rewordList.length <= 1) {
                return
            }
            this.form.rewordList.pop()
        },
        onAddReword() { // 添加奖品
            let form = this.form
            form.rewordList.push({
                name: null,
                chances: null,
                stock: null,
                isDefault: null
            })
        },
        onSubmit(formName) {
            this.$refs[formName].validate(item => {
                if(item) {
                    let form = Object.assign({}, this.form)
                    const rewordList = form.rewordList ? form.rewordList : []
                    let params = []
                    let chanceCount = 0
                    rewordList.forEach(item => {
                        chanceCount += Number(item.chances)
                        params.push({
                            name: item.name,
                            groupId: form.groupId,
                            chances: numeral(item.chances ? item.chances / 100 : 0).format('0.00'),
                            stock: item.stock,
                            isDefault: item.isDefault,
                            memo: form.memo,
                            enabled: 1
                        })
                    })
                    if(chanceCount != 100) {
                        this.$message.error('所有奖品的概率之和必须等于100%')
                        return
                    }
                    luckDrawPrizeBatchAdd(params).then(res => {
                        this.messageTips('添加', res, formName)
                    })
                }
            })
        },
        messageTips (title, res, formName) {
            if (res.code == 200) {
                this.$message.success(title + '成功')
                this.onClose(formName)
                this.getList()
            } else {
                this.$message.error(res.msg)
            }
        },
        onClose(formName) {
            this.$refs[formName].resetFields()
            this.close()
        }
    }
};
</script>
<style lang="less" scoped>
.dialog-footer {
    width: 100%;
    text-align: right;
}

.reword-list {
    display: flex;
    .el-form-item {
        flex: 1;
    }
}

.add-reword {
    margin-bottom: 22px;
    width: 180px;
    border-style: dashed;
}
</style>