link-wechat-web-pc/src/views/weGroupFission/modules/modal.vue

<template>
    <el-drawer :title="title" :visible.sync="visible" direction="rtl" size="85%" :wrapperClosable="false"
        :destroy-on-close="true">
        <div class="main-layout">
            <CompPreview :form-data="formModel" />

            <div class="activity-container">
                <el-steps :active="currentStep" simple>
                    <el-step title="基础设置" icon="el-icon-edit"></el-step>
                    <el-step title="派奖方式" icon="el-icon-setting"></el-step>
                    <el-step title="奖励设置" icon="el-icon-present"></el-step>
                    <el-step title="高级设置" icon="el-icon-s-operation"></el-step>
                </el-steps>

                <div class="form-content-area">
                    <el-form ref="form" :model="formModel" :rules="rules" :disabled="title === '详情'" label-width="120px" label-suffix="：" size="small">
                        <div v-if="currentStep === 0">
                            <el-form-item label="活动标题" prop="title">
                                <el-input v-model="formModel.title" placeholder="请输入活动标题" maxlength="20"
                                    show-word-limit></el-input>
                            </el-form-item>

                            <el-form-item label="活动时间" prop="timeRange">
                                <el-date-picker ref="timeRange"
                                    type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :picker-options="pickerOptions"  v-model="formModel.timeRange" 
                                ></el-date-picker>
                            </el-form-item>

                            <el-form-item label="关联商户" prop="merchantId">
                                <el-select v-model="formModel.merchantId" placeholder="请选择商户" filterable @change="onChange">
                                    <el-option v-for="item in dicts.merchantId" :key="item.val" :label="item.name" :value="item.val"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动负责人" prop="leaderUserId">
                                <el-select v-model="formModel.leaderUserId" placeholder="请选择活动负责人" filterable>
                                    <el-option label="测试商户A" value="1"></el-option>
                                    <el-option label="测试商户B" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="关联企微群" prop="wecomGroupId">
                                <el-select v-model="formModel.wecomGroupId" placeholder="请选择关联企微群" filterable>
                                    <el-option v-for="item in dicts.wecomGroupId" :key="item.val" :label="item.name" :value="item.val"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="关联员工企微" prop="wecomEmployeeId">
                                <el-select v-model="formModel.wecomEmployeeId" placeholder="请选择关联员工企微" filterable>
                                    <el-option v-for="item in dicts.wecomEmployeeId" :key="item.val" :label="item.name" :value="item.val"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="新客户判定" prop="newUserRule">
                                <el-radio-group v-model="formModel.newUserRule">
                                    <el-radio v-for="item in dicts.newUserRule" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="活动说明" prop="activityInstructions">
                                <el-input type="textarea" v-model="formModel.activityInstructions" rows="4"></el-input>
                            </el-form-item>
                        </div>

                        <div v-if="currentStep === 1">
                            <el-form-item label="触发条件" prop="invitationCount">
                                <el-input-number v-model="formModel.invitationCount" :min="1" :max="200" placeholder="请填写邀请人数"></el-input-number>
                                <span style="margin-left: 10px; font-size: 12px; color:#999;">注：≥1，≤200（邀请新客户进群人数）</span>
                            </el-form-item>

                            <el-form-item label="派奖方式" prop="payoutMethod">
                                <el-radio-group v-model="formModel.payoutMethod">
                                    <el-radio v-for="item in dicts.payoutMethod" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="发放时机" prop="timingDistribution">
                                <el-radio-group v-model="formModel.timingDistribution">
                                    <el-radio v-for="item in dicts.timingDistribution" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>

                        <div v-if="currentStep === 2">
                            <el-divider content-position="left">签到奖励</el-divider>
                            <el-form-item label-width="0" prop="inviteTiers">
                                <CompSign v-model="formModel.inviteTiers" @removed="handleTierChange" />
                            </el-form-item>

                            <el-divider content-position="left" class="divider">额外奖励</el-divider>
                            <el-form-item label-width="0" prop="inviteExtras">
                                <CompExtras :options="tierOptions" v-model="formModel.inviteExtras" />
                            </el-form-item>
                        </div>

                        <div v-if="currentStep === 3">
                            <el-form-item label="助力上限" prop="dailyAssistanceLimit">
                                <el-input-number v-model="formModel.dailyAssistanceLimit" :min="1" :max="200"></el-input-number>
                                <span> 人 / 单日</span>
                            </el-form-item>

                            <el-form-item label="最多助力数" prop="customAssistanceLimit">
                                <el-input-number v-model="formModel.customAssistanceLimit" :min="1" :max="200"></el-input-number>
                                <span> 人 / 单客户</span>
                            </el-form-item>

                            <el-form-item label="进群欢迎语" prop="welcomeMessage">
                                <el-input v-model="formModel.welcomeMessage" type="textarea" autosize placeholder="请输入欢迎语"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>

        <div class="drawer-footer">
            <el-button v-if="currentStep > 0" @click="handlePrev">上一步</el-button>
            <el-button v-if="currentStep < 3" type="primary" @click="handleNext">下一步</el-button>
            <el-button v-if="currentStep === 3" type="primary" 
                :loading="btnLoading"
                @click="handleSubmit"
            >完成并保存</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { 
    getDicts 
} from '@/api/system/menu';
import { 
    queryById,
    saveOrUpdate, 
    getDictListByType,
    getWecomGroupList,
    getWecomEmployeeList, 
} from '@/api/activity/index';
import moment from 'moment';
import CompSign from './CompSign.vue';
import CompExtras from './CompExtras.vue';
import CompPreview from './CompPreview.vue';

export default {
    name: '',
    components: {
        CompSign,
        CompExtras,
        CompPreview
    },
    data() {
        return {
            title: '活动方案配置',
            visible: false,
            btnLoading: false,
            currentStep: 0,
            isUpdate: false,
            formModel: {
                id: '',
                timeRange: [], 
                newUserRule: '1',
                payoutMethod: '1',
                timingDistribution: '1',
                inviteTiers: [{ count: undefined, reward: undefined }],
                inviteExtras: [],
            },
            rules: {
                title: [
                    { required: true, message: '请输入活动标题', trigger: 'blur' }
                ],
                timeRange: [
                    { required: true, message: '请选择活动时间', trigger: 'change' }
                ],
                merchantId: [
                    { required: true, message: '请选择商户', trigger: 'change' }
                ],
                wecomGroupId: [
                    { required: true, message: '请选择关联企微群', trigger: 'change' }
                ],
                wecomEmployeeId: [
                    { required: true, message: '请选择关联员工企微', trigger: 'change' }
                ],
                activityInstructions: [
                    { required: true, message: '请输入活动说明', trigger: 'change' }
                ],
                dailyAssistanceLimit: [
                    { required: true, message: '请输入单日助力上限', trigger: 'change' }
                ],
                customAssistanceLimit: [
                    { required: true, message: '请输入同一客户最多助力数', trigger: 'change' }
                ],
                invitationCount: [
                    { required: true, message: '请输入邀请人数', trigger: 'change' }
                ],
                // 签到奖励校验
                inviteTiers: [{
                    required: true,
                    // trigger: ['blur', 'change'],
                    validator: (rule, value, callback) => {
                        if (this.currentStep < 2) return callback();
                        if (!value || value.length === 0) {
                            return callback(new Error('请至少添加一个奖励阶梯'));
                        }
                        for (let i = 0; i < value.length; i++) {
                            if (!value[i].count || value[i].reward === undefined) {
                                return callback(new Error(`请完善第${i + 1}阶梯人数和奖励金额`));
                            }
                        }
                        callback();
                    }
                }]
            },
            dicts: {
                merchantId: [],
                wecomGroupId: [],
                wecomEmployeeId: [],
                newUserRule: [],
                payoutMethod: [],
                timingDistribution: [],
            }
        };
    },
    computed: {
        tierOptions() {
            let data = (this.formModel.inviteTiers || []).filter(item => item.count > 0).map((item, index) => ({
                label: `第${index + 1}阶梯 (邀请≥${item.count || 0}人)`,
                value: index
            }));
            return data;
        },
        pickerOptions() {
            return {
                onPick: ({ minDate }) => {
                    const isCurrentDay = moment(minDate).isSame(moment(), 'day');
                    if (isCurrentDay) {
                        const picker = this.$refs.timeRange.picker;
                        const { minTimePicker } = picker.$refs;
                        let s = moment(`${moment().add(2, 'minutes').format('YYYY-MM-DD HH:mm:ss')}`).toDate();
                        let e = moment(`${moment(minDate).format('YYYY-MM-DD')} 23:59:59`).toDate();
                        minTimePicker.selectableRange = [[s, e]];
                    }
                },
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            }
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            // 新客户判定规则
            getDicts('new_customer_rule_type').then((res) => {
                this.dicts.newUserRule = res.data;
            });
            // 派奖方式
            getDicts('prize_distribution_method').then((res) => {
                this.dicts.payoutMethod = res.data;
            });
            // 发放时机
            getDicts('timing_distribution_groupFission_type').then((res) => {
                this.dicts.timingDistribution = res.data;
            });
            // 商户
            getDictListByType({ type: 1 }).then((res) => {
                this.dicts.merchantId = res.data;
            });
            // 企业微信群
            getWecomGroupList().then((res) => {
                this.dicts.wecomGroupId = res.data;
            });
            // 企业微信员工
            getWecomEmployeeList().then((res) => {
                this.dicts.wecomEmployeeId = res.data;
            });
        },
        add() {
            this.isUpdate = false;
            this.resetForm();
            this.visible = true;
        },
        edit(record) {
            this.isUpdate = true;
            this.resetForm();
            this.visible = true;
            // 加载详情
            queryById({ id: record.id }).then(res => {
                if (res.code === 200) {
                    this.formModel = res.data;
                    // 时间
                    if (res.data.beginDate && res.data.endDate) {
                        this.formModel.timeRange = [res.data.beginDate, res.data.endDate];
                    }
                    // 阶梯数组
                    if (res.data.weGroupFissionStepList) {
                        this.formModel.inviteTiers = res.data.weGroupFissionStepList.map((item) => ({
                            reward: item.rewardAmount,
                            count: item.invitationCount,
                        }));
                    }
                    // 额外奖励数组
                    if (res.data.weGroupFissionExtraList) {
                        this.formModel.inviteExtras = res.data.weGroupFissionExtraList.map((item) => {
                            let nd = {
                                tierIndex: item.sortNum - 1,
                                rewardType: item.rewardType,
                                rewardValue: undefined
                            };
                            if (item.rewardType == 1) {
                                nd.rewardValue = item.rewardAmount;
                            } else if (item.rewardType == 2) {
                                nd.rewardName = item.rightInfoName;
                                nd.rewardValue = item.rightInfoId;
                            } else if (item.rewardType == 3) {
                                nd.rewardName = item.lotteryActivityName;
                                nd.rewardValue = item.lotteryActivityId;
                            }
                            return nd;
                        });
                    }
                }
            });
        },
        resetForm() {
            this.currentStep = 0;
            // 初始数据
            const initialData = this.$options.data.call(this);
            this.formModel = initialData.formModel;
            this.$nextTick(() => {
                if (this.$refs.form) this.$refs.form.clearValidate();
            });
        },
        // 商户选择事件
        onChange(value) {
            const selectedOption = this.dicts.merchantId.find(item => item.val === value);
            if (selectedOption) {
                this.formModel.merchantName = selectedOption.name;
            }
        },
        handleTierChange(deletedIndex) {
            this.$nextTick(() => {
                this.$refs.form.validateField('inviteTiers');
            })
            let newExtras = this.formModel.inviteExtras.filter(item => item.tierIndex !== deletedIndex);
            newExtras = newExtras.map(item => {
                if (item.tierIndex > deletedIndex) {
                    return { ...item, tierIndex: item.tierIndex - 1 };
                }
                return item;
            });
            this.formModel.inviteExtras = newExtras;
        },
        handleNext() {
            // 校验
            this.$refs.form.validate((valid, invalidFields) => {
                if (valid) {
                    this.currentStep++;
                }
            });
        },
        handlePrev() {
            this.currentStep--;
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.btnLoading = true;
                    let { timeRange, inviteTiers, inviteExtras, ...others } = this.formModel;
                    let params = { ...others };
                    if (timeRange && timeRange.length === 2) {
                        params.beginDate = timeRange[0];
                        params.endDate = timeRange[1];
                    }
                    // 阶梯数组
                    if (inviteTiers) {
                        params.weGroupFissionStepList = inviteTiers.map((item, index) => ({
                            sortNum: index + 1,
                            rewardAmount: item.reward,
                            invitationCount: item.count,
                        }));
                    }
                    // 额外奖励数组
                    if (inviteExtras) {
                        params.weGroupFissionExtraList = inviteExtras.map((item) => {
                            let nd = {
                                sortNum: item.tierIndex + 1,
                                rewardType: item.rewardType,
                            };
                            if (item.rewardType == 1) {
                                nd.rewardAmount = item.rewardValue;
                            } else if (item.rewardType == 2) {
                                nd.rightInfoId = item.rewardValue;
                            } else if (item.rewardType == 3) {
                                nd.lotteryActivityId = item.rewardValue;
                            }
                            return nd;
                        });
                    }
                    // console.log('form', params);
                    saveOrUpdate(params).then(res => {
                        if (res.code === 200) {
                            this.$message.success('保存成功');
                            this.visible = false;
                            this.$emit('success');
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).finally(() => {
                        this.btnLoading = false;
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.main-layout {
    padding: 0 20px;
    display: flex;
	gap: 20px;
}

.activity-container {
    flex: 1;

    .form-content-area {
        padding: 24px 24px 80px;

        ::v-deep input[aria-hidden="true"] {
            display: none !important;
        }

        .divider {
            display: inline-block;
        }
    }
}

.drawer-footer {
    width: calc(100% - 415px);
    padding: 10px 16px;
    text-align: right;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99;
}
</style>