xiaojincai
/
zky-admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!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__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:205px;
}
.tool_text  p{
    margin-bottom:10px;
}
.toolText_img img{
      width:100px;
      margin-bottom:5px
}
.toolText_img img:nth-child(odd){
  margin-right: 5px;
}
</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">
        <el-form-item v-for="(item, index) in widgetList" :key="index" :label="(index+1)+'、'+(item.label)+item.cntype"
          :prop="item.label">
          <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="handleSuccess">
            <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="handleSuccess">
            <!-- <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>
        <el-form-item v-if="widgetList.length">
          <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: {
      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 = {};
            for (let i = 0; i < widgetList.length; i++) {
              if (widgetList[i].type == 'checkbox') {
                let key = widgetList[i].label
                this.$set(this.form2, key, [])
              }
              //组装rules
              var item = widgetList[i];
              if (item.type == "input" && item.require) {
                rules1[item.label] = [
                  { required: true, message: item.placeholder, trigger: "blur" },
                ];
              }
              if (item.type == "textarea" && item.require) {
                rules1[item.label] = [
                  { required: true, message: item.placeholder, trigger: "blur" },
                ];
              }
              if (item.type == "radio" && item.require) {
                rules1[item.label] = [
                  { required: true, message: item.placeholder, trigger: "change" },
                ];
              }
              if (item.type == "checkbox" && item.require) {
                rules1[item.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>