|
|
@@ -0,0 +1,243 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row class="movie-list">
|
|
|
+ <el-col :md="12" :sm="12" :xs="12">
|
|
|
+ <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>投票</span>
|
|
|
+ <el-button style="float: right; padding: 5px; color: red" type="text" @click="createVote">创建投票</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item" />
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="12" :sm="12" :xs="12">
|
|
|
+ <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card v-if="vote !== null" class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>{{ vote.title }}</span>
|
|
|
+ <el-button style="float: right; padding: 5px; color: blue" type="text" @click="submit">提交投票</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-radio-group
|
|
|
+ v-for="(voteOption, index1) in vote.options"
|
|
|
+ :key="index1"
|
|
|
+ v-model="checkedRadio"
|
|
|
+ class="movie-list"
|
|
|
+ @change="singleCheckChange(voteOption)"
|
|
|
+ >
|
|
|
+ <el-radio :label="voteOption.value" border size="medium">
|
|
|
+ <span>{{ voteOption.name }}</span>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="创建投票"
|
|
|
+ :visible.sync="showVoteDialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
+ @close="onCloseDialog"
|
|
|
+ >
|
|
|
+ <el-card>
|
|
|
+ <el-form ref="addQuForm" :model="addQuForm" :rules="addQuFormRules">
|
|
|
+ <el-form-item label="投票名称" label-width="120px" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="addQuForm.title"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" label-width="120px" prop="endTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="addQuForm.endTime"
|
|
|
+ type="date"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ placeholder="选择结束时间"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预期人数" label-width="120px" prop="expectNum">
|
|
|
+ <el-input-number v-model="addQuForm.expectNum" :min="2" :max="10000" style="margin-left: 5px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ style="margin-left: 40px"
|
|
|
+ @click="addVoteOption"
|
|
|
+ >
|
|
|
+ 添加投票选项
|
|
|
+ </el-button>
|
|
|
+ <!--存放答案表单的信息-->
|
|
|
+ <el-form-item prop="options">
|
|
|
+ <el-table :data="addQuForm.options" border style="width: 96%;margin-left: 40px;margin-top: 10px">
|
|
|
+ <el-table-column label="选项内容">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.name"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="delVoteOption(scope.row.id)" />
|
|
|
+ <el-button type="danger" icon="el-icon-plus" size="mini" circle @click="addVoteOption" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="addVote">添 加</el-button>
|
|
|
+ <el-button @click="showVoteDialog = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'VotePage',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ checkedRadio: '',
|
|
|
+ selectedOption: null,
|
|
|
+ vote: null,
|
|
|
+ showVoteDialog: false,
|
|
|
+ // 添加试题的表单信息
|
|
|
+ addQuForm: {
|
|
|
+ title: '',
|
|
|
+ endTime: null,
|
|
|
+ expectNum: 0,
|
|
|
+ options: []
|
|
|
+ },
|
|
|
+ // 添加试题表单的验证规则
|
|
|
+ addQuFormRules: {
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入投票名称',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择投票的结束时间',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ expectNum: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择期望投票的人数',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = 'VotePage'
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.$message.info('get vote')
|
|
|
+ },
|
|
|
+ createVote() {
|
|
|
+ this.showVoteDialog = true
|
|
|
+ },
|
|
|
+ onCloseDialog() {
|
|
|
+ },
|
|
|
+ addVote() {
|
|
|
+ this.$message.info('创建投票')
|
|
|
+ console.log(this.addQuForm)
|
|
|
+ this.vote = this.addQuForm
|
|
|
+ this.showVoteDialog = false
|
|
|
+ this.addQuForm = {
|
|
|
+ title: '',
|
|
|
+ endTime: null,
|
|
|
+ expectNum: 0,
|
|
|
+ options: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addVoteOption() {
|
|
|
+ this.addQuForm.options.push({
|
|
|
+ optionId: this.addQuForm.options.length,
|
|
|
+ name: '',
|
|
|
+ value: this.addQuForm.options.length + 1,
|
|
|
+ pos: this.addQuForm.options.length
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delVoteOption(id) {
|
|
|
+ this.addQuForm.options.map((item, index) => {
|
|
|
+ if (item.optionId === id) this.addQuForm.options.splice(index, 1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ singleCheckChange(val) {
|
|
|
+ this.selectedOption = val
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.selectedOption === null) {
|
|
|
+ this.$message.info('请先选择')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const confirmText = '确认选择 [' + this.selectedOption.name + ']?'
|
|
|
+ this.$confirm(confirmText, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.info('提交数据')
|
|
|
+ console.log(this.selectedOption)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/*处于手机屏幕时*/
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .movie-list {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-left: 0.5%;
|
|
|
+ padding-right: 0.5%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.movie-list {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 6%;
|
|
|
+ padding-right: 6%;
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix:before,
|
|
|
+.clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix:after {
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+</style>
|
