资讯-添加-投票

src/views/news/creatNews.vue

@@ -155,6 +155,36 @@
                 <el-option label="待发布" :value="0"></el-option>
               </el-select>
             </el-form-item>
+           
+            <el-form-item label="是否开启投票：" prop="is_survey" class="custom-align-right">
+              <el-radio-group v-model="form.is_survey" >
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <div v-if="form.is_survey==1">
+            <el-form-item label="问卷标题：" prop="survey_name" class="custom-align-right">
+              <el-input v-model="form.survey_name" autocomplete="off" placeholder="请输入问卷标题"></el-input>
+            </el-form-item>
+            <el-form-item label="选项：" prop="is_survey" class="custom-align-right">
+              <el-radio-group v-model="form.survey_type" >
+                <el-radio :label="0">单选</el-radio>
+                <el-radio :label="1">多选</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label=""   class="custom-align-right">
+              <div v-for="(input, index) in inputList" :key="index">
+                 <div class="formLabelFloatBox">
+                  <el-input autocomplete="off" v-model="input.value" maxlength="150" :label-width="formLabelWidth"  placeholder="">  <template slot="prepend">{{ index+1 }}</template></el-input>
+                  <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addInput(index)" class="formLabeladdIcon"></el-button>
+                  <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteInput(index)"  class="formLabelDelIcon"></el-button>
+                </div>  
+            </div>
+          </el-form-item>
+          <el-form-item label=""  class="custom-align-right">
+                <el-checkbox v-model="checked">允许用户自己填写</el-checkbox>
+            </el-form-item>
+          </div>
           </div>
         </div>
       </el-form>
@@ -191,6 +221,7 @@ export default {
     tableTitle
   },
   data() {
+    
     //0.全局操作 start ------------------------------------------------------------>
     //表单验证
     const validateEmpty = (rule,value,callback) => {
@@ -210,6 +241,9 @@ export default {
     let self = this;
     //0.全局操作 end ------------------------------------------------------------>
     return {
+      radio:3,
+      checked:false,
+      formLabelWidth: '80px',//表单的长度
       //1.表单项 start ------------------------------------------------------------>
       editStatus:false,
       tableDivTitle:"添加资讯",
@@ -232,7 +266,11 @@ export default {
         is_original:0,//是否为原创 0非 1是
         copyfrom:"",//来源名称
         fromurl:"",//来源地址
-        status:0//状态 0待发布 1已发布 404已删除
+        status:0,//状态 0待发布 1已发布 404已删除
+        is_survey:1,//调查问卷：0：否；1：是；
+        survey_name:"",//问卷名称
+        suvey_array:"",//选项名称集合 
+        survey_type:"0" //0:单选 1：复选
       },
       //1.2 表单验证规则
       formRules: {
@@ -259,7 +297,13 @@ export default {
         fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
         //缩略图不能为空
         imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
-        level:[{required:true,trigger:'blur',validator:validateEmpty}]
+        level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //是否开启投票
+        is_survey:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //问卷标题
+        survey_name:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //选项
+        survey_type:[{required:true,trigger:'blur',validator:validateEmpty}],
       },
       //1.3富文本编辑器配置
       showHtml: false, //用于保存源码内容
@@ -333,10 +377,30 @@ export default {
           })
         }
       },
+      inputList: [
+        { value: '' }
+      ]
       //表单项 end ------------------------------------------------------------>
     };
   },
   methods: {
+    //---------------------------
+    addInput(index) {
+      // 在当前索引后插入一个新的输入框对象
+      if(this.inputList.length>10){
+         this.$message.warning('最多只能添加10个文本框');
+         return false;
+      }
+      this.inputList.splice(index + 1, 0, { value: '' });
+    },
+    deleteInput(index) {
+      if (this.inputList.length > 1) {
+        // 如果输入框数量大于 1，则删除当前索引对应的输入框对象
+        this.inputList.splice(index, 1);
+      } else {
+        this.$message.warning('至少保留一个输入框');
+      }
+    },
     //1.提交表单 start ------------------------------------------------------------>
     //1.1 直接上传图片
     beforeAvatarUpload(file) {
@@ -372,6 +436,23 @@ export default {
     },
     //1.2 提交表单
     addToServe(){
+      if(this.form.is_survey==1){
+        const hasEmptyInput = this.inputList.some(input => input.value === '');
+        if (hasEmptyInput) {
+          // 如果有输入框为空，弹出提示信息
+          this.$message.error('请确保所有输入框都有内容');
+          return;
+        }
+        const inputLists = this.inputList.map(input => input.value);
+        const allowList = [this.checked?1:0,""];
+        if(this.checked){
+          inputLists.push(allowList);
+        }
+        this.form.suvey_array = JSON.stringify(inputLists);
+      }
+      // console.log('提交的数据:', this.inputList.map(input => input.value));
+      // this.form.suvey_array
+      // return false;
       //提交之前先判断是否为外链
       //如果使用了外链，清理掉除了外链以外的内容
       if(this.form.islink==true){
@@ -510,6 +591,23 @@ export default {
         //this.form.copyfrom = res.data.copyfrom;
         this.form.fromurl = res.data.fromurl;
         this.form.status = res.data.status;
+        this.form.survey_name = res.data.survey_name;
+        this.form.is_survey = res.data.is_survey;
+        this.form.survey_type = res.data.survey_type;
+        this.inputList = [];
+        if(res.data.survey_array.length>0){
+          res.data.survey_array.forEach(item => {
+            if(item.is_other==0){
+              this.inputList.push({"value":item.choice_name});
+            }else{
+              this.checked = true
+            }
+          
+          });
+        }else{
+          this.inputList.push({"value":""});
+        }
+        console.log( this.inputList)
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -542,6 +640,21 @@ export default {
     editToServe(){
       //提交之前先判断是否为外链
       //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.is_survey==1){
+        const hasEmptyInput = this.inputList.some(input => input.value === '');
+        if (hasEmptyInput) {
+          // 如果有输入框为空，弹出提示信息
+          this.$message.error('请确保所有输入框都有内容');
+          return;
+        }
+        const inputLists = this.inputList.map(input => input.value);
+        const allowList = [this.checked?1:0,""];
+        if(this.checked){
+          inputLists.push(allowList);
+        }
+        this.form.suvey_array = JSON.stringify(inputLists);
+      }
+    
       console.log(this.form)
       if(this.form.islink==1){
         this.cleatForm(1)
@@ -822,6 +935,26 @@ export default {
   ::v-deep .el-select {
     width: 100%; /* 禁止用户拖拽调整大小 */
   }
-  
+  ::v-deep .el-input-group__prepend {
+    color: black !important;
+  }
+  .formLabelFloatBox {
+    margin-bottom: 10px;
+    position: relative;
+    .formLabeladdIcon {
+      position: absolute;
+      right:45px;
+      top:5px;
+      width:38px;
+      height:24px;
+    }
+    .formLabelDelIcon {
+      position: absolute;
+      right:5px;
+      top:5px;
+      width:38px;
+      height:24px;
+    }
+  }
   //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>