问卷添加

最新推荐文章于 2022-11-17 18:20:58 发布

MAYA_G

最新推荐文章于 2022-11-17 18:20:58 发布

阅读量121

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/MAYA_G/article/details/112976783

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

问题组件

<template>
  <div class="vote-single-list">
    <div class="vote-add-title">
      <span class="vote-add-tit">{{num + ''}}.{{!onEdit&&addSingleForm.voteName? addSingleForm.voteName:'编辑问题'}}</span><em class="vote-add-type">{{item.type === 'radio' ? '【单选】' : '【多选】'}}</em> 
    </div>
    <div class="vote-single-opt">
      <p :class="onEdit ? 'vote-single-opt-edit now-edit':'vote-single-opt-edit'" @click="singleEdit">
        <i class="el-icon-edit-outline"></i>编辑
      </p>
      <p class="vote-single-opt-delete" @click="delList">
        <i class="el-icon-delete"></i>删除
      </p>
    </div>
    // 编辑完成后的展示状态
    <div class="problem-radio-lists" v-show="!onEdit">
        <el-checkbox-group disabled class="problem-radio-list">
          <template v-for="(item,ind) of optionList">
            <el-checkbox :key="ind" :label="item.val"></el-checkbox>
          </template>
        </el-checkbox-group>
    </div>
    // 编辑状态
    <div class="vote-single-cont" v-show="onEdit">
      <div class="vote-single-item">
        <el-form ref="addSingleForm" :model="addSingleForm" label-position="left" label-width="115px">
          <el-form-item class="vote-name" label-width="110px" prop="voteName"> 
            <span slot="label">
              <el-image
              style="width:19px; height: 15px;float:left; margin-top:9px;"
              :src="require('@/assets/image/add-vote-icon02.png')"
              fit="contain"></el-image>
              问题标题
            </span>
              <el-input v-model="addSingleForm.voteName" @change="titleChange" placeholder="请输入问题标题"></el-input>
          </el-form-item>
          <el-form-item v-if="item.type == 'checkbox'" class="vote-name2" label-width="110px">
            <span slot="label">
              <el-image
              style="width:17px; height: 17px;float:left; margin-top:7px;"
              :src="require('@/assets/image/add-vote-icon03.png')"
              fit="contain"></el-image>
              最多可选
            </span>
            <el-input-number v-model="addSingleForm.count" @change="countChange" controls-position="right" :min="1" :max="optionList.length"></el-input-number>
          </el-form-item>
          <el-form-item label-width="110px"> 
            <span slot="label">
              <el-image
              style="width:17px; height: 17px;float:left; margin-top:7px;"
              :src="require('@/assets/image/add-vote-icon04.png')"
              fit="contain"></el-image>
              必答问题
            </span>
            <el-radio-group v-model="addSingleForm.voteMust" @change="mustChange">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label-width="110px" class="vote-name2"> 
            <span slot="label">
              <el-image
              style="width:17px; height: 17px;float:left; margin-top:7px;"
              :src="require('@/assets/image/add-vote-icon07.png')"
              fit="contain"></el-image>
              序号
            </span>
            <el-input-number v-model="addSingleForm.num" @change="numChange" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
          <span class="add-vote-option" @click="addOption">
            <el-image
            style="width:19px; height: 16px;float:left; margin-top:9px;"
            :src="require('@/assets/image/add-vote-icon05.png')"
            fit="contain"></el-image>
            添加选项
          </span>
          <el-form-item class="vote-option-li" label-width="25px" v-for="(item, index) of optionList" :key="index">
            <el-input v-model="item.val" placeholder="选项"></el-input>
            <span class="vote-option-li-delete" @click="optionDelete(index)">删除</span>
          </el-form-item>
          <el-button type="primary" class="complete-edit" @click="endEdit">完成编辑</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    num: {
      type: [Number, String]
    },
    item: {
      type: [Object], 
      default: ()=> {}
    }
  },
  watch: {
    item: {
      deep:true,
      handler:function(newVal){
        this.addSingleForm.voteMust = newVal.must
        this.addSingleForm.count = newVal.count
        this.addSingleForm.voteName = newVal.title
        this.addSingleForm.num = newVal.num
        this.optionList = newVal.option
        this.onEdit = newVal.onEdit
      }
    }
  },
  data(){
    return{
      // 问题标题
      problemName:'编辑问题',
      // 问题选项
      problemRadio:'',
      // 是否是编辑状态
      onEdit:false,
      // 问题
      addSingleForm:{
        voteMust: 2,
        count: 1,
        voteName: '',
        num: undefined
      },
      // 选项个数
      optionList: []
    }
  },
  methods:{
    numChange(val) {
      this.$emit('change',{num:val,index:this.num-1,type:'num'})
    },
    mustChange(val) {
      this.$emit('change',{must:val,index:this.num-1,type:'must'})
    },
    countChange(val) {
      this.$emit('change',{count:val,index:this.num-1,type:'count'})
    },
    titleChange(val) {
      this.$emit('change',{title:val,index:this.num-1,type:'title'})
    },
    // 编辑
    singleEdit(){
      if (this.onEdit === false) {
        this.$emit('change',{onEdit:true,index:this.num-1,type:'OnEdit'})
      }
    },
    // 添加选项
    addOption(){
      this.optionList.push({val: ''})
    },
    // 选项删除
    optionDelete(data){
      this.optionList.splice(data, 1); 
    },
    delList() {
      this.$emit('del',this.num-1)
    },
    endEdit(){
       try {
        if (this.addSingleForm.voteName && this.optionList.length > 1) {
          try {
            this.onEdit = false
            this.$emit('change',{option:this.optionList,index:this.num-1,type:'option'})
            this.$emit('change',{onEdit:false,index:this.num-1,type:'onEditEnd'})
            // this.$message.success('保存成功')
          } catch (e) {
            this.$message.error('保存失败！')
          }
        } else if(this.addSingleForm.voteName && this.optionList.length < 2) {
            this.$message.error('请至少添加两个选项')
            return false
        } else {
          this.$message.error('请输入问题标题')
          return false
        }
      } catch (e) {
        this.$message.error('保存失败！')
      }
    }
  }
}
</script>
<style lang="scss">
.vote-single-list{
  padding:10px;
  margin-top:20px;
  position: relative;
  border:1px solid #cbcbcb;
  .vote-add-title{
    .vote-add-tit{
      font-size: 15px;
      color:#2a2b2d;
    }
    .vote-add-type{
      font-size: 15px;
      color:#005de5;
      font-style: normal;
    }
  }
  .vote-single-opt{
    position: absolute;
    right:20px;
    top: 10px;
    .vote-single-opt-edit{
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      color:#818181;
      i{
        margin-right: 4px;
      }
    }
    .vote-single-opt-delete{
      cursor: pointer;
      display: inline-block;
      margin-left: 10px;
      font-size: 14px;
      color:#818181;
      i{
        margin-right: 4px;
      }
    }
    .now-edit{
      color:#005de5;
    }
  }
  .problem-radio-list{
    .el-checkbox{
      margin: 0;
      display: block;
      margin-left: 15px;
      .is-disabled{
        .el-checkbox__inner{
          background-color: #fff;
          border-color: #939292;
        }
      }
      .el-checkbox__label{
        color: #939292;
      }
    }
  }
  .vote-single-cont{
    .vote-single-item{
      .el-form-item{
        margin-bottom: 10px;
      }
      .el-form-item__label{
        span{
          font-size: 15px;
          color:#56575b;
        }
      }
      .vote-name{
        .el-input__inner{
          font-size: 15px;
          border-radius: 0;
          border:0;
          width: 240px;
          border-bottom: 1px solid #a5a5a5;
          padding: 0;
          &::placeholder{
            color: #a5a5a5;
          }
        }
      }
      .vote-name2{
        .el-input-number--medium{
          width: 80px;
        }
        .el-input__inner{
          font-size: 15px;
          border-radius: 0;
          border:0;
          border: 1px solid #a5a5a5;
          padding: 0;
        }
        .el-input-number__increase,.el-input-number__decrease{
          border: none;
          background: transparent;
        }
      }
      .add-vote-option{
        cursor: pointer;
        font-size: 15px;
        color: #1c6de0;
        .el-image{
          margin-right: 4px;
        }
      }
      .vote-option-li{
        margin-bottom: 10px;
         .el-input{
           width: 80%;
         }
         .vote-option-li-delete{
           cursor: pointer;
           margin-left: 1%;
           color:#f56c6c;
         }
      }
      .complete-edit{
        cursor: pointer;
        width: 50%;
        margin:20px 25%;
        padding: 0;
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
        text-align: center;
        color:#fff;
        background-color: #007cf2;
        border-color: #007cf2;
      }
    }
  }
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before{
    content: '';
    margin: 0;
  }
}
</style>


<el-form-item>
  <span slot="label">
      <el-image
          style="width:16px; height: 17px;float:left; margin-top:10px;"
          :src="require('@/assets/image/add-meet-icon03.png')"
          fit="contain"></el-image>
      投票内容
  </span>
  <div class="add-vote-info-btns clearfix">
    <div class="add-vote-info-btn" @click="add(1)">
      <el-image
        style="width:18px; height: 16px;float:left; margin-top:9px;"
        :src="require('@/assets/image/add-vote-single-icon.png')"
        fit="contain"></el-image>
        <span>添加单选</span>
    </div>
    <div class="add-vote-info-btn" @click="add(2)">
      <el-image
        style="width:18px; height: 16px;float:left; margin-top:9px;"
        :src="require('@/assets/image/add-vote-multiple-icon.png')"
        fit="contain"></el-image>
        <span>添加多选</span>
    </div>
  </div>
  <div class="add-vote-info-con">
    <div class="vote-single" v-for="(item, index) of voteMultipleList.length" :key="item.index">
      <single :num="index + 1" :item="voteMultipleList[index]" @del="del" @change="change"></single>
    </div>
  </div>
</el-form-item>

<script>
import single from './components/single'
export default {
  components:{
    single
  },
  data(){
    return{
      // 多选列表
      voteMultipleList:[]
    }
  },
  methods:{
    // 添加
    add(type){
      let detail
      if (type == 1) {
        detail = {
          type: 'radio',
          title: '',
          must: 2,
          count: 1,
          option:[],
          num: undefined,
          onEdit: false
        }
      } else {
        detail = {
          type: 'checkbox',
          title: '',
          must: 2,
          count: 1,
          option:[],
          num: undefined,
          onEdit: false
        }
      }
      this.voteMultipleList.push(detail)
    },
    del(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.voteMultipleList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    change(item) {
      switch (item.type) {
        case 'OnEdit':
          var result=this.voteMultipleList.some(function (item2,index) {
                  if(item2.onEdit){
                      return true
                  }
                })
          if (result) {
            this.$confirm('是否放弃当前编辑?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.voteMultipleList.forEach(item2 => {
                  if (item2.onEdit) {
                    item2.onEdit=false
                    item2.title=''
                    item2.must=2
                    item2.count=1
                    item2.option=[]
                    item2.num=undefined
                  }
                })
                this.voteMultipleList[item.index].onEdit = true    
            }).catch(() => {
                 
            });
          } else {
            this.voteMultipleList[item.index].onEdit = true
          }
          break;
        case 'onEditEnd':
          this.voteMultipleList[item.index].onEdit = false
          break;
        case 'title':
          this.voteMultipleList[item.index].title = item.title
          break;
        case 'count':
          this.voteMultipleList[item.index].count = item.count
          break;
        case 'must':
          this.voteMultipleList[item.index].must = item.must
          break;
        case 'num':
          this.voteMultipleList[item.index].num = item.num
          break;
        case 'option':
          this.voteMultipleList[item.index].option = item.option
          break;
      }
    },
  }
}
</script>