多选投票

src/api.js

@@ -5,8 +5,8 @@ import config from './config';
 
 Vue.use(VueResource)
 
-const URL = "http://localhost:3000/api"
-// const URL = "https://api.mycard.moe/ygopro/arena"
+// const URL = "http://localhost:3000/api"
+const URL = "https://api.mycard.moe/ygopro/arena"
 
 export default class Api {
 

src/components/PageHeader.vue

@@ -44,11 +44,9 @@
 
 
     <!-- Form -->
-    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
-    <el-dialog title="MCPRO服务改进调查" :visible.sync="dialogFormVisible" :size='size'>
+    <el-dialog title="MCPRO服务改进调查" v-if="!(voteObj.multiple)" :visible.sync="dialogFormVisible" :size='size'>
 
-      <!--<img src="../assets/img/mycardlogo.png" id="logo">-->
       <div class="voteTitle">{{ voteObj.title }} </div><br>
 
       <el-form :model="form">
@@ -63,15 +61,33 @@
           </div>
         </el-form-item>
 
-        <!--<p class="voteFoot">投票可以改善您的游戏体验。还可以获得EXP哦 ^_^</p>-->
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
         <el-button type="primary" @click="submitVote">提 交</el-button>
       </div>
     </el-dialog>
 
+    <el-dialog title="MCPRO服务改进调查"  v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'>
+
+      <div class="voteTitle">{{ voteObj.title }} （最多选{{voteObj.max}}项）</div><br>
+
+      <el-form :model="form">
+
+        <el-checkbox-group v-model="opids" :min="0" :max="voteObj.max">
+          <el-form-item :label-width="formLabelWidth" v-for="item in voteObj.options">
+            <el-checkbox :label="item.key" :key="item.key">{{item.name}}</el-checkbox>
+          </el-form-item>
+        </el-checkbox-group>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitVote">提 交</el-button>
+      </div>
+    </el-dialog>
+
+
 
 
 
@@ -88,8 +104,13 @@
   import moment from 'moment'
 
   export default {
+
+
     data() {
+      const cityOptions = ['上海', '北京', '广州', '深圳'];
       return {
+        opids: [],
+        cities: cityOptions,
         voteObj: {},
         size: 'small',
         dialogFormVisible: false,
@@ -189,17 +210,29 @@
           user: this.user.id,
           username: this.user.username,
           opid: this.radio,
+          multiple: this.voteObj.multiple,
+          opids: this.opids,
           voteid: this.voteObj.id
         }
-        console.log(param)
-
-        if (!this.radio) {
-          this.$notify({
-            // title: '操作成功',
-            message: '请选择后在提交 ！',
-            type: 'warning'
-          })
-          return;
+
+        if (this.voteObj.multiple) {
+          if (this.opids.length == 0) {
+            this.$notify({
+              // title: '操作成功',
+              message: '请选择后在提交 ！',
+              type: 'warning'
+            })
+            return;
+          }
+        } else {
+          if (!this.radio) {
+            this.$notify({
+              // title: '操作成功',
+              message: '请选择后在提交 ！',
+              type: 'warning'
+            })
+            return;
+          }
         }
 
         this.dialogFormVisible = false
@@ -215,19 +248,19 @@
           // })
 
           layer.open({
-              type: 1
-              , title: 'Hi, ' + _this.user.username
-              , offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
-              , id: 'layerDemo'
-              , time: 5000
-              , content: '<div style="padding: 20px ;">' + '感谢您的参与,环境会因为您而变得更好。此问卷为您奖励EXP+1!' + '</div>'
-              , btn: '知道了'
-              , btnAlign: 'c' //按钮居中
-              , shade: 0 //不显示遮罩
-              , yes: function () {
-                layer.closeAll();
-                // _this.dialogFormVisible = true;
-              }
+            type: 1
+            , title: 'Hi, ' + _this.user.username
+            , offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
+            , id: 'layerDemo'
+            , time: 5000
+            , content: '<div style="padding: 20px ;">' + '感谢您的参与,环境会因为您而变得更好。此问卷为您奖励EXP+1!' + '</div>'
+            , btn: '知道了'
+            , btnAlign: 'c' //按钮居中
+            , shade: 0 //不显示遮罩
+            , yes: function () {
+              layer.closeAll();
+              // _this.dialogFormVisible = true;
+            }
           });
 
 
@@ -313,7 +346,6 @@
   
   .voteFoot {
     /*margin-left: 20px;*/
-  
   }
   
   .wrap {

src/components/Vote.vue

@@ -40,7 +40,7 @@
 			<el-button type="text" @click="newVote">新建投票</el-button>
 
 			<el-dialog title="投票详情" :visible.sync="dialogFormVisible">
-				<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="80px" class="demo-dynamic">
+				<el-form :model="dynamicValidateForm" :rules="rules2" ref="dynamicValidateForm" label-width="80px" class="demo-dynamic">
 					<el-form-item prop="title" label="投票标题" :rules="{required: true, message: '投票标题不能为空', trigger: 'blur'}">
 						<el-input v-model="dynamicValidateForm.title"></el-input>
 					</el-form-item>
@@ -56,13 +56,17 @@
 						</el-form-item>
 
 						<el-form-item label="是否启用">
-							<!--<el-tooltip :content="xxx " placement="top">-->
-							<!--<el-switch v-model="dynamicValidateForm.status" on-color="#13ce66" off-color="#ff4949" on-value="true" off-value="false">
-								</el-switch>-->
-							<!--</el-tooltip>-->
 							<el-checkbox v-model="dynamicValidateForm.status"></el-checkbox>
 						</el-form-item>
 
+						<el-form-item label="是否多选">
+							<el-checkbox v-model="dynamicValidateForm.multiple"></el-checkbox>
+						</el-form-item>
+
+
+						<el-form-item prop="max" label="多选限制" v-if="dynamicValidateForm.multiple">
+							<el-input v-model="dynamicValidateForm.max"></el-input>
+						</el-form-item>
 
 						<!--<el-form-item>-->
 						<!--<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>-->
@@ -180,7 +184,29 @@
 			},
 		},
 		data: function () {
+			var checkMax = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('个数不能为空'));
+				}
+				setTimeout(() => {
+					value = value - 0
+					if (!Number.isInteger(value)) {
+						callback(new Error('请输入数字值'));
+					} else {
+						if (value > 6) {
+							callback(new Error('个数不能超过6个'));
+						} else {
+							callback();
+						}
+					}
+				}, 500);
+			};
 			return {
+				rules2: {
+					max: [
+						{ validator: checkMax, trigger: 'blur' }
+					]
+				},
 				radio: "x",
 				loading: true,
 				onValue: true,
@@ -254,6 +280,8 @@
 					}],
 					id: '',
 					status: false,
+					multiple: false,
+					max: 2,
 					title: ''
 				},
 				dialogFormVisible: false,
@@ -274,22 +302,22 @@
 
 		methods: {
 			switchChange: function (id, status) {
-				this.loading = true
+				// this.loading = true
 				var param = {
 					id: id,
 					status: status
 				}
 				API.voteStatus(param).then((res) => {
-					this.loading = false
+					// this.loading = false
 
 					// this.$notify({
 					// 	title: '操作成功',
 					// 	message: '状态已修改!',
 					// 	type: 'success'
 					// })
-					
+
 				}, (res) => {
-					this.loading = false
+					// this.loading = false
 				});
 			},
 			newVote() {
@@ -298,6 +326,8 @@
 				title: ''
 				this.dynamicValidateForm.title = ""
 				this.dynamicValidateForm.status = false
+				this.dynamicValidateForm.multiple = false
+				this.dynamicValidateForm.max = 2
 				this.dynamicValidateForm.domains = [{
 					key: Date.now()
 				}]
@@ -307,9 +337,12 @@
 
 				this.dynamicValidateForm.id = row.id
 				this.dynamicValidateForm.status = row.status
+				this.dynamicValidateForm.multiple = row.multiple
+				this.dynamicValidateForm.max = row.max
 				this.dynamicValidateForm.title = row.title
 				this.dynamicValidateForm.domains = row.options
 				this.date = [row.start_time, row.end_time]
+				this.needRender = false
 				this.dialogFormVisible = true;
 
 			},
@@ -426,18 +459,20 @@
 								options: JSON.stringify(this.dynamicValidateForm.domains),
 								start_time: this.from_date,
 								end_time: this.to_date,
-								status: this.dynamicValidateForm.status
+								status: this.dynamicValidateForm.status,
+								multiple: this.dynamicValidateForm.multiple,
+								max: this.dynamicValidateForm.max
 							}
 							var _this = this;
 
 							API.saveVote(param).then((res) => {
 								this.dialogFormVisible2 = false
 
-								this.$notify({
-									title: '操作成功',
-									message: '感谢您的提交!',
-									type: 'success'
-								})
+								// this.$notify({
+								// 	title: '操作成功',
+								// 	message: '感谢您的提交!',
+								// 	type: 'success'
+								// })
 								_this.renderTable()
 								setTimeout(function () {
 									_this.isClick = false;
@@ -451,9 +486,6 @@
 
 						}
 
-
-
-
 					} else {
 						console.log('error submit!!');
 						return false;