link-wechat-web-pc/src/views/application/form/add.vue

<template>
    <div>
        <div class="g-card">
            <el-form ref="LotteryAdd" :model="addForm" :rules="addRules" label-position="left">
                <el-form-item label="活动名称" prop="actName">
                    <el-input v-model="addForm.actName" placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="actTime">
                    <el-date-picker
                        type="datetimerange"
                        v-model="addForm.actTime"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        value-format="yyyy-MM-dd hh:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="活动描述" prop="actDesc">
                    <el-input v-model="addForm.actDesc" placeholder="请输入活动描述"></el-input>
                </el-form-item>
                <el-form-item label="表单内容" prop="actPrizeList">
                    <div style="display: flex;">
                        <div style="width: 100%">
                            <div v-for="(item, index) in addForm.actPrizeList" style="margin-top: 10px;">
                                <el-input v-model="item.prizeName" placeholder="请输入字段名称" style="margin-right: 10px;"></el-input>
                                <el-input v-model="item.prizeContent" placeholder="请输入填写内容"></el-input>
                                <i class="el-icon-circle-close" style="cursor:pointer; margin-left: 10px;" @click="handleDel(item,index)"></i>
                            </div>
                            <el-button type="text" @click="handleAdd">新增字段</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="活动图片" prop="i">
                    <upload></upload>
                </el-form-item>
            </el-form>
        </div>
        <div class="g-footer-sticky" style="text-align: center;">
            <el-button plain @click="$router.go(-1)">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
    </div>
</template>

<script>
import * as api from "@/api/lottery";

export default {
    name: "formAdd",
    data() {
        return {
            addForm: {
                actName: '',
                actTime: [],
                actDesc: '',
                actPrizeList: []
            },
            addRules: {
                actName:[ { required: true, message: '请输入活动名称', trigger: 'blur' } ]
            }
        }
    },
    created() {
        if(this.$route.query.id) {
            this.title = '编辑'
            this.getActivity()
        }
    },
    methods: {
        getActivity() {
            api.getActivity({
                actId: this.$route.query.id
            }).then(res => {
                if(res.code == 200) {
                    let obj = {...res.data}
                    this.addForm = {
                        actName: obj.actName,
                        actType: `${obj.actType}`,
                        actTime: [obj.actStartTime, obj.actEndTime],
                        actDesc: obj.actDesc,
                        actPrizeList: obj.actPrizeList?obj.actPrizeLis:[]
                    }
                }
            })
        },
        handleAdd() {
            this.addForm.actPrizeList.push({
                prizeName: '',
                prizeContent: ''
            })
        },
        handleDel( item, index ) {
            this.addForm.actPrizeList.splice(index, 1)
        },
        handleSubmit() {
            let params = {
                actName: this.addForm.actName,
                actType: '4',
                actStartTime: this.addForm.actTime[0],
                actEndTime: this.addForm.actTime[1],
                actPrizeList: this.addForm.actPrizeList
            }
            if(this.$route.query.id) {
                api.editActivity({
                    actId: this.$route.query.id,
                    ...params
                }).then(res => {
                    if(res.code == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.$router.push({
                            path: 'list'
                        })
                    }
                })
            } else {
                api.add({...params}).then(res => {
                    console.log(123123, res)
                    if(res.code == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.$router.push({
                            path: 'list'
                        })
                    }
                })
            }
        }
    }
}
</script>

<style scoped>

</style>