在 TextCard.vue 中添加 vote 功能

src/components/card/TextCard.vue

@@ -1,29 +1,115 @@
 <template>
-  <el-card :body-style="{ padding: '5px' }" class="card">
-    <el-input
-      v-model="textarea"
-      type="textarea"
-      maxlength="200"
-      @blur="handleBlur"
-      :rows="3"
-      placeholder="有什么新鲜事想分享给大家?"
-      style="padding: 5px"
-    />
-<!--    <el-upload
-      :action="actionUrl"
-      style="padding: 5px"
-    >
-    </el-upload>-->
-    <el-button style="padding: 5px" icon="el-icon-picture" @click="onImage">图片</el-button>
-    <el-button style="padding: 5px" icon="el-icon-tickets" @click="onVote">投票</el-button>
-    <el-row style="text-align: right">
-      <el-button round type="submit" @click="onSubmit">发送</el-button>
-    </el-row>
+  <div style="padding: 5px">
+    <el-card style="padding: 5px">
+      <el-input
+        v-model="textarea"
+        type="textarea"
+        maxlength="200"
+        :rows="3"
+        placeholder="有什么新鲜事想分享给大家?"
+        style="padding: 5px"
+        @blur="handleBlur"
+      />
+      <!--    <el-upload
+            :action="actionUrl"
+            style="padding: 5px"
+          >
+          </el-upload>-->
+      <el-button style="padding: 5px" icon="el-icon-picture" @click="onImage">图片</el-button>
+      <el-button style="padding: 5px" icon="el-icon-tickets" @click="createVote">投票</el-button>
+      <el-row style="text-align: right">
+        <el-button round type="submit" @click="onSubmit">发送</el-button>
+      </el-row>
 
-    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog>
-  </el-card>
+      <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="">
+      </el-dialog>
+      <el-dialog
+        title="创建投票"
+        :visible.sync="showVoteDialog"
+        :close-on-click-modal="false"
+        width="50%"
+        center
+        @close="onCloseDialog"
+      >
+        <el-card>
+          <el-form ref="voteForm" :model="voteForm" :rules="voteFormRules">
+            <el-form-item label="投票名称" label-width="120px" prop="title">
+              <el-input
+                v-model="voteForm.title"
+                style="margin-left: 5px"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="结束时间" label-width="120px" prop="endTime">
+              <el-date-picker
+                v-model="voteForm.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="voteForm.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="voteForm.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)" />
+                    <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>
+    </el-card>
+    <el-card v-if="vote !== null" style="padding: 5px">
+      <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>
+  </div>
 </template>
 
 <script>
@@ -34,7 +120,43 @@ export default {
       actionUrl: process.env.VUE_APP_SERVER_URL + '/api/content/timeline',
       textarea: '',
       dialogImageUrl: '',
-      dialogVisible: false
+      dialogVisible: false,
+      // 表单
+      voteForm: {
+        title: '',
+        endTime: null,
+        expectNum: 0,
+        options: []
+      },
+      // 表单的验证规则
+      voteFormRules: {
+        title: [
+          {
+            required: true,
+            message: '请输入投票名称',
+            trigger: 'blur'
+          }
+        ],
+        endTime: [
+          {
+            required: true,
+            message: '请选择投票的结束时间',
+            trigger: 'blur'
+          }
+        ],
+        expectNum: [
+          {
+            required: true,
+            message: '请选择期望投票的人数',
+            trigger: 'blur'
+          }
+        ]
+      },
+      showVoteDialog: false,
+      vote: null,
+      checkedRadio: '',
+      selectedOption: null,
+      showVoteCard: false
     }
   },
   methods: {
@@ -45,17 +167,70 @@ export default {
       this.dialogImageUrl = file.url
       this.dialogVisible = true
     },
+    handleBlur() {
+      this.$message.info(this.textarea)
+    },
     onSubmit() {
       console.log('发送状态')
     },
     onImage() {
       this.$message.info('image')
     },
-    onVote() {
-      this.$message.info('vote')
+    createVote() {
+      this.showVoteDialog = true
     },
-    handleBlur() {
-      this.$message.info(this.textarea)
+    onCloseDialog() {
+      this.showVoteDialog = false
+    },
+    addVoteOption() {
+      this.voteForm.options.push({
+        optionId: this.voteForm.options.length,
+        name: '',
+        value: this.voteForm.options.length + 1,
+        pos: this.voteForm.options.length
+      })
+    },
+    delVoteOption(row) {
+      const id = row.optionId
+      this.voteForm.options.map((item, index) => {
+        if (item.pos === id) this.voteForm.options.splice(index, 1)
+      })
+    },
+    addVote() {
+      console.log(this.voteForm)
+      this.vote = this.voteForm
+      this.showVoteDialog = false
+      this.voteForm = {
+        title: '',
+        endTime: null,
+        expectNum: 0,
+        options: []
+      }
+    },
+    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)
+        this.vote = null
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
     }
   }
 }

src/router/index.js

@@ -7,7 +7,6 @@ import MallRouter from './mall'
 import VodRouter from './vod'
 import MapRouter from './map'
 import ChartRouter from './chart'
-import VoteRouter from './vote'
 import GeoRouter from './geo'
 import WenshuRouter from './wenshu'
 import DiskRouter from './disk'
@@ -50,7 +49,6 @@ const routes = [
   MapRouter,
   VodRouter,
   ChartRouter,
-  VoteRouter,
   GeoRouter,
   WenshuRouter,
   DiskRouter,

src/router/vote.js

@@ -1,23 +0,0 @@
-const VoteIndex = () => import('views/vote/VoteIndex')
-const VotePage = () => import('views/vote/VotePage')
-
-export default {
-  path: '/vote',
-  name: 'VoteIndex',
-  component: VoteIndex,
-  meta: { needAuth: false },
-  children: [
-    {
-      path: '',
-      name: 'VotePage',
-      component: VotePage,
-      meta: { needAuth: false }
-    },
-    {
-      path: '/vote/map',
-      name: 'VotePage',
-      component: VotePage,
-      meta: { needAuth: false }
-    }
-  ]
-}

src/views/vote/VoteIndex.vue

@@ -1,90 +0,0 @@
-<template>
-  <el-container style="border: 1px solid #eee">
-    <el-header style="text-align: right; font-size: 12px">
-      <el-col :md="2">
-        <ul class="el-menu--horizontal el-menu">
-          <li class="el-menu-item">
-            <a href="/vote" style="text-decoration-line: none">
-              <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
-              vote
-            </a>
-          </li>
-        </ul>
-      </el-col>
-      <el-col :md="20">
-        <el-menu
-          :default-active="this.$route.path"
-          router
-          mode="horizontal"
-        >
-          <el-menu-item index="/vote/map">
-            <i class="el-icon-map-location" />
-            <span slot="title">vote</span>
-          </el-menu-item>
-        </el-menu>
-      </el-col>
-      <el-col :md="2">
-        <ul class="el-menu--horizontal el-menu">
-          <li class="el-menu-item">
-            <el-dropdown v-if="user">
-              <img
-                :src="user.avatarUrl"
-                class="el-avatar--circle el-avatar--medium"
-                style="margin-right: 10px; margin-top: 15px"
-                alt=""
-              >
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  icon="el-icon-s-platform"
-                  class="size"
-                  @click.native="goToHome"
-                >主站</el-dropdown-item>
-                <el-dropdown-item
-                  icon="el-icon-error"
-                  class="size"
-                  @click.native="goToLogout"
-                >退出</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <span
-              v-else
-              style="color: #007bff"
-            >登录</span>
-          </li>
-        </ul>
-      </el-col>
-    </el-header>
-    <el-container>
-      <el-main>
-        <router-view />
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<script>
-import { userMixin } from 'assets/js/mixin'
-import { getAuthedUser } from '@/utils/auth'
-
-export default {
-  name: 'VoteIndex',
-  mixins: [userMixin],
-  data() {
-    return {
-      user: null
-    }
-  },
-  watch: {
-    // 地址栏 url 发生变化时重新加载本页面
-    $route() {
-      this.$router.go()
-    }
-  },
-  created() {
-    this.user = getAuthedUser()
-  }
-}
-</script>
-
-<style>
-</style>

src/views/vote/VotePage.vue

@@ -1,243 +0,0 @@
-<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>