xiaojincai
/
zkyuan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
    width=device-width,initial-scale=1.0">
  <title>问卷调查</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="static/index.css">
</head>
<style lang="scss" scoped>
  body {
    margin: 0px;
    padding: 0px;
  }

  #app {
    display: none;
  }

  .tpl_title {
    font-size: 18px;
    margin: 10px 0;
  }

  .item-main {
    padding: 10px 15px;
  }

  .survey_logo {
    width: 125px;
  }

  /* 选项样式 */
  .el-form-item {
    padding: 10px 20px;
    border:1px solid #ccc;
    border-radius: 5px;
    margin-bottom:10px!important;
  }

  .el-form-item__content {
    line-height: 1;
  }

  .el-form-item__label {
    float: none;
    font-weight: 600;
    display: block;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: left;
  }

  .el-radio {
    width: 93% !important;
  }

  .el-radio:not(:last-child) {
    margin-bottom: 10px;
  }

  .el-radio__label {
    font-size: 14px;
    padding-left: 10px;
    line-height: 20px !important;
    white-space: normal;
    display: inline-block !important;
    vertical-align: top;
  }

  .el-checkbox-group {
    display: flex;
    flex-direction: column;
  }

  .el-checkbox__label {
    font-size: 14px;
    padding-left: 10px;
    line-height: 20px !important;
    white-space: normal;
    display: inline-block !important;
    vertical-align: top;
  }

  .el-checkbox {
    width: 93% !important;
  }

  .el-checkbox:not(:last-child) {
    margin-bottom: 10px !important;
  }

  .message_desc {
    /* width: 80%; */
    margin: auto;
    text-indent: 25px;
    color: #1c388c;
    font-size: 14px;
    padding-bottom: 10px;
  }

  /*批注信息*/
  .tool_text {
    width: 315px;
  }

  .tool_text p {
    margin-bottom: 10px;
  }

  .toolText_img img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px
  }

  .toolText_img img:nth-child(odd) {
    margin-right: 5px;
  }

  .group_title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    margin:0px;
  }

  .groupMain {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom:10px;
  }
  .groupMain .el-form-item{
    border:0px;
  }
  .el-message-box{
    width: 315px!important;
  }
</style>

<body>
  <div id="app">
    <div class="item-main">
      <!-- <img src="static/survey_logo.png" alt="" class="survey_logo" /> -->
      <h5 align="center" class="tpl_title">{{ title }}</h5>
      <div class="message_desc">{{messageData.desc}}</div>
      <el-form ref="form2" :model="form2" class="tpl_form over_y" :rules="rules1.rules" v-if="this.form2.status==1">
        <template v-for="(item, index) in widgetList">
          <el-form-item :key="index" :label="(index+1)+'、'+(item.label)+item.cntype" :prop="item.label"
            v-if="item.type != 'group'">
            <span style="color:#409eff;font-size:12px;">{{item.noteDesc}}</span>
            <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="bottom-end">
              <i v-if="item.noteDesc||item.noteImgs" class="el-icon-info"
                style="position: absolute; top: -28px; right: 0px"></i>
              <div slot="content" class='tool_text'>
                <p>{{item.noteDesc}}</p>
                <div class='toolText_img'>
                  <img :src="item" alt="" v-for="(item,index) in item.noteImgs" :key="index" />
                </div>
              </div>
            </el-tooltip>
            <el-input v-if="item.type == 'input'" v-model="form2[item.label]" :placeholder="item.placeholder">
            </el-input>
            <el-input v-if="item.type == 'textarea'" type="textarea" v-model="form2[item.label]"
              :placeholder="item.placeholder" :rows=4></el-input>
            <el-radio-group v-if="item.type == 'radio'" v-model="form2[item.label]" class="cus_select">
              <el-radio :label="iitem.label" v-for="(iitem, index) in item.items" :key="index">{{ iitem.label }}
              </el-radio>
            </el-radio-group>

            <el-checkbox-group v-else-if="item.type == 'checkbox'" v-model="form2[item.label]" class="cus_select">
              <el-checkbox :label="iitem.label" v-for="(iitem, index) in item.items" :key="index"></el-checkbox>
            </el-checkbox-group>
            <el-upload v-if="item.type == 'image'" action="/api/admin/uploadfile" list-type="picture-card"
              :data="{ type: item.label }" 
              :on-success="(value)=> imageChange(item.label, value)"
              :on-remove="(file,filelist)=> handleRemove(item.label, file,filelist)"
              >
              <i class="el-icon-plus"></i>

            </el-upload>
            <el-upload v-if="item.type == 'file'" class="upload-demo" ref="upload" action="/api/admin/uploadfile"
              :data="{ type: item.label }" 
              :on-success="(value)=> imageChange(item.label, value)"
              :on-remove="(file,filelist)=> handleRemove(item.label, file,filelist)">
              <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
              <el-button style="margin-left: 10px" size="small" type="primary" plain>添加文件</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </el-form-item>
          <!-- 域组件展示 -->
          <h6 v-if="item.type == 'group'" align="center" class="group_title" :key="'revire_g' + index">
            {{ item.label }}
          </h6>
          <section class="groupMain" v-if="item.type == 'group'" :key="'review_gi' + index">
            <template v-for="(iitem, index) in item.children">
              <el-form-item :prop="iitem.label + '(' + item.label + ')'" :key="'review_gc' + index"
                :label="iitem.label + iitem.cntype">
                <span style="color:#409eff;font-size:12px;">{{iitem.noteDesc}}</span>
                <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="bottom-end">
                  <i v-if="iitem.noteDesc || iitem.noteImgs" class="el-icon-info"
                    style="position: absolute; top: -28px; right: 0px"></i>
                  <div slot="content" class="tool_text">
                    <p>{{ iitem.noteDesc }}</p>
                    <div class="toolText_img">
                      <img :src="iitem" alt="" v-for="(iitem, index) in iitem.noteImgs"
                        :key="'review_gc_noteimgs' + index" />
                    </div>
                  </div>
                </el-tooltip>
                <el-input :class="iitem.require ? 'require' : ''" v-if="iitem.type == 'input'"
                  v-model="form2[iitem.label + '(' + item.label + ')']" :placeholder="iitem.placeholder"></el-input>
                <el-input :class="iitem.require ? 'require' : ''" v-if="iitem.type == 'textarea'" type="textarea"
                  v-model="form2[iitem.label + '(' + item.label + ')']" :placeholder="iitem.placeholder"></el-input>
                <el-radio-group class="cus_select" v-if="iitem.type == 'radio'"
                  v-model="form2[iitem.label + '(' + item.label + ')']" :class="iitem.require ? 'require' : ''">
                  <el-radio :label="iiitem.label" v-for="(iiitem, index) in iitem.items" :key="'review_gcr' + index">{{
                    iiitem.label }}</el-radio>
                </el-radio-group>
                <el-checkbox-group class="cus_select" v-if="iitem.type == 'checkbox'"
                  v-model="form2[iitem.label + '(' + item.label + ')']" :class="iitem.require ? 'require' : ''">
                  <el-checkbox :label="iiitem.label" v-for="(iiitem, index) in iitem.items" :key="'review_gcc' + index">
                    {{ iiitem.label }}</el-checkbox>
                </el-checkbox-group>
                <el-upload :class="iitem.require ? 'require' : ''" v-if="iitem.type == 'image'"
                  v-model="form2[iitem.label + '(' + item.label + ')']" action="/api/admin/uploadfile"
                  list-type="picture-card" :on-preview="handlePreview" 
                  :on-remove="(file,filelist)=> handleRemove(iitem.label + '(' + item.label + ')', file,filelist)"
                  :on-success="(value)=> imageChange(iitem.label + '(' + item.label + ')', value)"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-upload v-if="iitem.type == 'file'" class="upload-demo" ref="upload" action="/api/admin/uploadfile"
                :on-remove="(file,filelist)=> handleRemove(iitem.label + '(' + item.label + ')', file,filelist)"
                :on-success="(value)=> imageChange(iitem.label + '(' + item.label + ')', value)"
                :file-list="fileList" :auto-upload="false">
                  <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                  <el-button style="margin-left: 10px" size="small" type="primary" plain @click="submitUpload">添加文件
                  </el-button>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
            </template>
          </section>
          <!-- 域组件end -->
        </template>
        <el-form-item v-if="widgetList.length" style="border:0px;">
          <el-button size="medium" type="primary" @click="saveResult"
            style="width: 100%;height: 45px;font-size: 16px;margin-top:20px;" :disabled="form2.status==0">
            {{this.form2.status==1?"提交":"该问卷已禁用"}}</el-button>
        </el-form-item>
      </el-form>
      <el-button v-else size="medium" type="primary" style="width: 100%;height: 45px;font-size: 16px;margin-top:20px;"
        :disabled="form2.status==0">
        {{this.form2.status==1?"提交":"该问卷已禁用"}}</el-button>
    </div>
  </div>
</body>
<!-- import Vue before Element -->
<script src="static/jquery.min.js"></script>
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        messageData: {},
        rules1: {
          rules: {},
        },
        type: null,
        form2: {},
        widgetList: [],
        id: '',
        title: '',
        show: 0
      }
    },
    methods: {
      handlePreview() { },
      handleRemove(label,file,filelist){
        let imgs=[];
        for(let i=0;i<filelist.length;i++){
          imgs.push(filelist[i].response.data)
        }
        this.form2[label]=imgs
      },
      imageChange(label,data){
        this.form2[label].push(data.data)
      },
      getData() {
        let url = "/api/admin/message"
        if (this.type == 1) {
          url = "/api/admin/message/out"
        }
        $.ajax({
          url: url,
          method: 'get',
          data: {
            id: this.id
          },
          success: res => {
            document.getElementById('app').style.display = 'block'
            this.form2.status = res.data.status
            let widgetList = res.data.widget;
            this.messageData = res.data;
            let rules1 = {};
            let _this = this;
            widgetList.forEach((i) => {
              if (i.type == "checkbox"||i.type == "image") {
                //   _this.form2[i.label] = [] ;
                _this.$set(_this.form2, i.label, []);
              }
              //组装rules
              if (i.type == "input" && i.require) {
                rules1[i.label] = [
                  { required: true, message: i.placeholder, trigger: "blur" },
                ];
              }
              if (i.type == "textarea" && i.require) {
                rules1[i.label] = [
                  { required: true, message: i.placeholder, trigger: "blur" },
                ];
              }
              if (i.type == "radio" && i.require) {
                rules1[i.label] = [
                  { required: true, message: i.placeholder, trigger: "change" },
                ];
              }
              if (i.type == "checkbox" && i.require) {
                rules1[i.label] = [
                  { required: true, message: i.placeholder, trigger: "change" },
                ];
              }
              if (i.type == "image" && i.require) {
                rules1[i.label] = [
                  { required: true, message: i.placeholder, trigger: "change" },
                ];
              }
              // 域组件rules
              if (i.type == "group") {
                i.children.forEach((item) => {
                  if (item.type == "input" && item.require) {
                    rules1[item.label + "(" + i.label + ")"] = [
                      {
                        required: true,
                        message: item.placeholder,
                        trigger: "blur",
                      },
                    ];
                  }
                  if (item.type == "textarea" && item.require) {
                    rules1[item.label + "(" + i.label + ")"] = [
                      {
                        required: true,
                        message: item.placeholder,
                        trigger: "blur",
                      },
                    ];
                  }
                  if (item.type == "radio" && item.require) {
                    rules1[item.label + "(" + i.label + ")"] = [
                      {
                        required: true,
                        message: item.placeholder,
                        trigger: "change",
                      },
                    ];
                  }
                  if (item.type == "checkbox" && item.require) {
                    _this.$set(_this.form2, item.label + "(" + i.label + ")", []);
                    rules1[item.label + "(" + i.label + ")"] = [
                      {
                        required: true,
                        message: item.placeholder,
                        trigger: "change",
                      },
                    ];
                  }
                  if (item.type == "image" && item.require) {
                    _this.$set(_this.form2, item.label+'('+i.label+')', []);
                    rules1[item.label + "(" + i.label + ")"] = [
                      {
                        required: true,
                        message: item.placeholder,
                        trigger: "change",
                      },
                    ];
                  }
                });
              }
            });

            this.$set(this.rules1, "rules", rules1);
            this.title = res.data.name
            this.widgetList = widgetList
          },
          error: res => {
            if (res.status == 403) {
              window.location.href = "/survey/login.html?id=" + this.id + "&type=" + this.type
            }
          }
        })
      },
      saveResult() {
        let url = "/api/admin/message/survey/result"
        if (this.type == 1) {
          url = "/api/admin/message/survey/result/out"
        }
        this.$refs["form2"].validate((valid) => {
          if (valid) {
            let result = JSON.stringify(this.form2);
            $.ajax({
              url: url,
              method: 'post',
              data: {
                message_id: this.id,
                result: result,
              },
              success: res => {
                if (res.code == 0) {
                  // this.$alert('提交成功', "提交成功", {
                  //   center: true,
                  //   showClose: false,
                  //   confirmButtonText: '确定',
                  //   type: "success"
                  // });
                  window.location.href = "/survey/success.html?title=" + encodeURIComponent(res.data)
                } else {
                  this.$alert("提交失败请稍后再试!", "提交失败", {
                    center: true,
                    showClose: false,
                    confirmButtonText: '确定',
                    type: "error"
                  });
                }
              }
            })
          } else {
            this.$alert("有必填项没有填写!", "提交失败", {
              center: true,
              showClose: false,
              confirmButtonText: '确定',
              type: "error"
            });
          }
        });
      },
      handleSuccess(res, file) {
        this.form2[res.data.type] = res.data.url;
      },
    },
    created() {
      var search = window.location.search.split('?')[1].split('&');
      this.id = search[0].split('=')[1]
      this.type = search[1].split('=')[1]
      this.getData()
    }
  })
</script>

</html>