预览效果

活动报名管理获取接口

vote\src\api\signup.js

import request from '@/utils/request'
export function fetchList(params) {return request({url: '/pmsSignup/listPage',method:'GET',params:params})
}
export function createSignup(data) {return request({url:'/pmsSignup/create',method:'POST',data:data})
}export function deleteSignup(id) {return request({url:'/pmsSignup/delete/'+id,method:'DELETE',})
}export function getSignup(id) {return request({url:'/pmsSignup/view/'+id,method:'GET',})
}export function updateSignup(id,data) {return request({url:'/pmsSignup/update/'+id,method:'PUT',data:data})
}
export function verify(data) {return request({url:'/pmsSignup/verify/',method:'PUT',data:data})
}export function exportData(voteId) {return request({url:'/pmsSignup/export/'+voteId,method:'GET',})
}

活动报名页面组件

vote\src\views\pms\signup\index.vue

报名列表页

<template> <div class="app-container"><el-card class="filter-container" shadow="never"><div><i class="el-icon-search"></i><span>筛选搜索</span></div><div style="margin-top: 15px"><el-form :inline="true" :model="listQuery" size="small" label-width="140px"><el-form-item label="输入搜索："><el-input style="width: 203px" v-model="listQuery.keyword" placeholder="参赛名称/报名人"></el-input></el-form-item><el-form-item label="报名状态："><el-select v-model="listQuery.signupStatus" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="参赛类型："><el-select v-model="listQuery.signupType" placeholder="请选择"><el-optionv-for="item in signupTypes":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-buttonstyle="margin-left:20px"@click="searchSignupList()"type="primary"size="small">查询结果</el-button></el-form></div></el-card><el-card class="operate-container" shadow="never"><i class="el-icon-tickets"></i><span>数据列表</span><el-buttonclass="btn-add"type="success"@click="addSignup()"size="mini">添加</el-button><el-buttonclass="btn-add"type="primary"@click="exportData()"size="mini" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button></el-card><div class="table-container"><el-table ref="signupTable":data="list"style="width: 100%"v-loading="listLoading"border@sort-change="sortChange"><el-table-column label="序号"  align="center"><template slot-scope="scope">{{scope.row.id}}</template></el-table-column><el-table-column label="参赛编号" align="center"><template slot-scope="scope">{{scope.row.signupIndex}}</template></el-table-column><el-table-column label="参赛名称" align="center"><template slot-scope="scope">{{scope.row.signupName}}</template></el-table-column><el-table-column label="参赛类型" align="center"><template slot-scope="scope"><span v-if="scope.row.signupType == 10">图片</span><span v-else-if="scope.row.signupType == 20">视频</span><span v-else-if="scope.row.signupType == 30">文档</span><span v-else>仅限报名</span></template></el-table-column><el-table-column label="报名状态" align="center"><template slot-scope="scope"><span v-if="scope.row.signupStatus == 10">已报名</span><span v-if="scope.row.signupStatus == 20">审核通过</span><span v-if="scope.row.signupStatus == 30">审核驳回</span></template></el-table-column><el-table-column label="审核时间"  align="center"><template slot-scope="scope">{{scope.row.apvTime}}</template></el-table-column><el-table-column label="审核原因"  align="center"><template slot-scope="scope">{{scope.row.apvReason}}</template></el-table-column><el-table-column label="票数" sortable="custom" prop="vote_num"   align="center"><template slot-scope="scope">{{scope.row.voteNum}}</template></el-table-column><el-table-column label="虚拟票数" sortable="custom" prop="vote_num"   align="center"><template slot-scope="scope">{{scope.row.voteNum2}}</template></el-table-column><el-table-column label="报名时间"  align="center"><template slot-scope="scope">{{scope.row.createTime}}</template></el-table-column><el-table-column label="报名人"  align="center"><template slot-scope="scope">{{scope.row.createUserId}}</template></el-table-column><el-table-column label="操作"  align="center"><template slot-scope="scope"><el-button v-if="scope.row.signupStatus == 10"size="mini" type="primary"@click="handleApv(scope.$index, scope.row)">审核</el-button><el-buttonsize="mini" type="primary" icon="el-icon-edit" circle@click="handleUpdate(scope.$index, scope.row)"></el-button><el-buttonsize="mini"type="danger" icon="el-icon-delete" circle@click="handleDelete(scope.$index, scope.row)"></el-button></template></el-table-column></el-table></div><div class="pagination-container"><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange"layout="total, sizes,prev, pager, next,jumper":page-size="listQuery.pageSize":page-sizes="[5,10,15]":current-page.sync="listQuery.pageNum":total="total"></el-pagination></div><el-dialog:title="'审核报名【'+ apvTitle +'】'":visible.sync="centerDialogVisible"width="30%"center><el-form ref="form" :model="verifyVo" label-width="80px"><el-form-item label="审核意见"><el-input type="textarea" v-model="verifyVo.rejectReason"></el-input></el-form-item><el-form-item class="apv_button" style="margin-left:-80px;text-align:center;"><el-button type="danger" @click="handleApvSubmit(30)">审核驳回</el-button><el-button type="success" @click="handleApvSubmit(20)">审核通过</el-button></el-form-item></el-form>
</el-dialog></div>
</template>
<script>import {fetchList, deleteSignup,verify,exportData} from '@/api/signup'const defaultVerifyVo={id:null,signupStatus:null,rejectReason:null};export default {name: 'signupList',data() {return {centerDialogVisible: false,verifyVo:Object.assign({}, defaultVerifyVo),apvTitle:'',listQuery: {keyword: null,signupStatus:null,voteId:null,pageNum: 1,pageSize: 10,orderBy:''},list: null,total: null,listLoading: true,signupTypes: [{value:'',label:'全部'},{value: 10,label: '图片'}, {value: 20,label: '视频'}, {value: 30,label: '文档'}, {value: 40,label: '仅限报名'}],options: [{value:'',label:'全部'},{value: 10,label: '已报名'}, {value: 20,label: '审核通过'}, {value: 30,label: '审核驳回'}],fullscreenLoading:false,}},created() {this.listQuery.voteId = this.$route.query.voteId;this.getList();},methods: {getList() {if (!this.listQuery.voteId) {this.$message({message: '参数错误',type: 'error',duration:1000});this.$router.back();return;}this.listLoading = true;fetchList(this.listQuery).then(response => {this.listLoading = false;this.list = response.rows;this.total = response.pageInfo.totalRecords;this.totalPage = response.pageInfo.totalPage;this.pageSize = response.pageInfo.pageSize;});},handleUpdate(index, row) {this.$router.push({path: '/pms/updateSignup', query: {id: row.id,voteId:this.listQuery.voteId}})},handleDelete(index, row) {this.$confirm('是否要删除该报名数据', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {deleteSignup(row.id).then(response => {this.$message({message: '删除成功',type: 'success',duration: 1000});this.getList();});});},handleSizeChange(val) {this.listQuery.pageNum = 1;this.listQuery.pageSize = val;this.getList();},handleCurrentChange(val) {this.listQuery.pageNo = val;this.getList();},searchSignupList() {this.listQuery.pageNum = 1;this.getList();},addSignup() {this.$router.push({path: '/pms/addSignup',query: {voteId: this.listQuery.voteId}})},exportData(){this.fullscreenLoading = true;let voteId = this.listQuery.voteId;exportData(voteId).then(res =>{this.fullscreenLoading = false;console.log("success")if (res.data) {let link = document.createElement('a')link.style.display = 'none'link.href = res.data//link.setAttribute('download', 'exportData.xlsx')document.body.appendChild(link)link.click()}}).catch(err => {this.fullscreenLoading = false})},handleApv(index, row){this.apvTitle = row.signupNamethis.verifyVo.id = row.idthis.centerDialogVisible = true},handleApvSubmit(signupStatus) {if (signupStatus === 30) {console.log(this.verifyVo.rejectReason)if (!this.verifyVo.rejectReason) {this.$message({message: '请输入驳回理由',type: 'error',duration:1000});return false;}}this.verifyVo.signupStatus = signupStatus;verify(this.verifyVo).then(response => {this.$message({message: '审核成功',type: 'success',duration:1000});this.centerDialogVisible = falsethis.verifyVo = Object.assign({}, defaultVerifyVo)this.getList();}).catch(error => {this.$message({message: '审核失败',type: 'error',duration:1000});this.centerDialogVisible = falsethis.verifyVo = Object.assign({}, defaultVerifyVo)})},sortChange(column, prop, order){if (column.order == 'ascending') {this.listQuery.orderBy = column.prop + " asc";} else if(column.order == 'descending'){this.listQuery.orderBy = column.prop + " desc";} else {this.listQuery.orderBy = '';}this.listQuery.pageNum = 1;this.getList();}}}
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>

 报名编辑组件

<template> <el-card class="form-container" shadow="never"><el-form :model="signup"  ref="signupFrom" label-width="150px"><el-form-item label="参赛名称：" :rules="[{ required: true, message: '请输入参赛名称', trigger: 'blur' },{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }]" prop="signupName"><el-input v-model="signup.signupName"></el-input></el-form-item><el-form-item label="参赛介绍：" :rules="[{ required: true, message: '请输入参赛介绍', trigger: 'blur' },{ min: 2, max: 2000, message: '长度在 2 到 2000 个字符', trigger: 'blur' }]" prop="signupDesc"><el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="signup.signupDesc"></el-input></el-form-item><el-form-item label="参赛类型：" v-if="vote.activityType == 10" :rules="[{ required: true, message: '请选择参赛类型', trigger: 'blur' }]"   prop="signupType"><el-radio-group v-model="signup.signupType"><template v-for="item in checkList"><el-radio  :label="item" v-if="item == '10'">图片</el-radio><el-radio  :label="item" v-if="item == '20'">视频</el-radio><el-radio  :label="item" v-if="item == '30'">文档</el-radio><el-radio  :label="item" v-if="item == '40'">纯信息</el-radio></template></el-radio-group></el-form-item><el-form-item v-if="signup.signupType == '10' || vote.activityType == 20" label="参赛图片：" :rules="[{ required: vote.activityType != 20, message: '请上传参赛图片', trigger: 'blur' }]"   prop="signupImages"><multi-upload v-model="signup.signupImages" :maxCount="10" :fileSize="10" ></multi-upload></el-form-item><el-form-item v-if="signup.signupType == '20' || vote.activityType == 20" label="参赛视频：" :rules="[{ required: vote.activityType != 20, message: '请上传参赛视频', trigger: 'blur' }]"   prop="signupVideo"><video-upload:fileSize="200"@error="handleUploadError"v-model="signup.signupVideo"/></el-form-item><el-form-item v-if="signup.signupType == '30' || vote.activityType == 20" label="参赛文件：" :rules="[{ required: vote.activityType != 20, message: '请上传参赛文件', trigger: 'blur' }]"   prop="fileUrl"><file-upload:fileSize="200":fileType="fileType"v-model="signup.fileUrl"/></el-form-item><el-form-item label="姓名：" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]" prop="userName"><el-input maxlength="50" v-model="signup.userName"></el-input></el-form-item><el-form-item label="手机号码：" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' }]" prop="signupPhone"><el-input maxlength="20" v-model="signup.signupPhone"></el-input></el-form-item><el-form-item label="微信：" prop="signupWeixin"><el-input maxlength="50" v-model="signup.signupWeixin"></el-input></el-form-item><el-form-item label="qq：" prop="signupQq"><el-input maxlength="50" v-model="signup.signupQq"></el-input></el-form-item><el-form-item label="年龄：" prop="signupAge"><el-input v-model="signup.signupAge"></el-input></el-form-item><el-form-item label="地址：" prop="signupAddress"><el-input maxlength="200" v-model="signup.signupAddress"></el-input></el-form-item><el-form-item label="是否残疾：" :rules="[{ required: true, message: '请选择是否残疾', trigger: 'blur' }]" prop="isDisability"><el-radio-group v-model="signup.isDisability"><el-radio :label="1">是</el-radio><el-radio :label="0">否</el-radio></el-radio-group></el-form-item><el-form-item v-if="signup.isDisability == 1" :rules="[{ required: true, message: '请输入残疾证号码', trigger: 'blur' }]" label="残疾证号码：" prop="disabilityNum"><el-input maxlength="50" v-model="signup.disabilityNum"></el-input></el-form-item><template v-if="signup.dynamicField.length > 0"  v-for="(item,index) in signup.dynamicField"><el-form-item :key="index" :label="item.name.split('|')[0] + ':'" :prop="'dynamicField.' + index + '.value'" :rules="[{ required: item.name.split('|')[1] == 1, message: '请输入'+ item.name.split('|')[0], trigger: 'blur' }]"><el-input maxlength="200" v-model="item.value"></el-input></el-form-item></template><el-form-item label="虚拟票数："><el-input v-model.number="signup.voteNum2"></el-input></el-form-item><!-- <el-form-item label="自定义分享图片："  prop="shareImg"><single-upload v-model="signup.shareImg"></single-upload></el-form-item><el-form-item label="背景图片："  prop="backgroundImg"><single-upload v-model="signup.backgroundImg"></single-upload></el-form-item> --><!-- <el-form-item label="浏览量："><el-input v-model.number="signup.browseNum"></el-input></el-form-item><el-form-item label="投票数："><el-input v-model.number="signup.voteNum"></el-input></el-form-item> --><el-form-item style="text-align:center"><el-button type="primary" @click="onSubmit('signupFrom')">提交</el-button><el-button type="info" v-if="!isEdit" @click="resetForm('signupFrom')">重置</el-button><el-button  @click="back()">返回</el-button></el-form-item></el-form></el-card>
</template>
<script>import {createSignup, getSignup, updateSignup} from '@/api/signup'import {getVote} from '@/api/vote'import SingleUpload from '@/components/Upload/singleUpload'import MultiUpload from '@/components/Upload/multiUpload'import VideoUpload from '@/components/Upload/videoUpload'import FileUpload from '@/components/Upload/fileUpload'const defaultSignup={signupName:'',signupDesc:'',signupImages:[],signupPhone:'',signupWeixin:'',signupQq:'',signupAge:'',signupAddress:'',shareImg:'',backgroundImg:'',voteId:null,signupType:'10',isDisability:0,userName:'',dynamicField:[],};export default {name: 'SignupDetail',components:{SingleUpload,MultiUpload,VideoUpload,FileUpload},props: {isEdit: {type: Boolean,default: false},},data() {return {signup:Object.assign({}, defaultSignup),vote:{},checkList:[],field:{"name":'',"value":""},fileType:['doc','docx','xls','xlsx','ppt','pptx','pdf']}},created() {getVote(this.$route.query.voteId).then(res =>{this.vote = res.data;this.checkList = this.vote.voteType.split(",")if (!this.isEdit) {this.initFields(this.vote.dynamicField);}})if (this.isEdit) {getSignup(this.$route.query.id).then(response => {let signupImages = response.data.signupImages;if (signupImages) {signupImages = JSON.parse(signupImages);} else {signupImages = [];}response.data.signupImages = signupImageslet fields = [];let dynamicField = response.data.dynamicField;if (dynamicField) {dynamicField = JSON.parse(dynamicField);dynamicField.forEach((item,index) => {fields.push(JSON.parse(item))})} response.data.dynamicField = fieldsthis.signup = response.data;console.log(this.signup)});}else{let voteId = this.$route.query.voteIdthis.signup = Object.assign({},defaultSignup);this.signup.voteId = voteId}},methods: {initFields(dynamicField){if (dynamicField) {dynamicField = JSON.parse(dynamicField);dynamicField.forEach((item,index) => {let field = Object.assign({}, this.field)field.name = itemthis.signup.dynamicField.push(field)})}},onSubmit(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$confirm('是否提交数据', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {if (this.isEdit) {updateSignup(this.$route.query.id, this.signup).then(response => {this.$refs[formName].resetFields();this.$message({message: '修改成功',type: 'success',duration:1000});this.$router.back();});} else {createSignup(this.signup).then(response => {this.$refs[formName].resetFields();this.signup = Object.assign({},defaultSignup);this.$message({message: '提交成功',type: 'success',duration:1000});this.$router.back();});}});} else {this.$message({message: '验证失败',type: 'error',duration:1000});return false;}});},resetForm(formName) {this.$refs[formName].resetFields();this.signup = Object.assign({},defaultSignup);},back(){this.$router.back();},handleUploadError(error) {console.log('error', error)}}}
</script>
<style>
</style>

报名添加

<template> <signup-detail :is-edit='false'></signup-detail>
</template>
<script>import SignupDetail from './components/SignupDetail'export default {name: 'addSignup',components: { SignupDetail }}
</script>
<style>
</style>

报名修改

<template> <signup-detail :is-edit='true'></signup-detail>
</template>
<script>import SignupDetail from './components/SignupDetail'export default {name: 'updateSignup',components: { SignupDetail }}
</script>
<style>
</style>

投票管理集成到报名中，报名列表页添加投票数属性显示。