必填控制

src/views/Home.vue

@@ -10,8 +10,8 @@
 	<el-container>
 		<el-header>
 			<div class="header">
-				<img class="logo" src="../assets/logo.png" alt="">
-				<div class="siteTitle">中科院期刊微信公众号集中管理平台</div>
+				<!-- <img class="logo" src="../assets/logo.png" alt=""> -->
+				<!-- <div class="siteTitle">中科院期刊微信公众号集中管理平台</div> -->
 			</div>	
 			<div class="nav">
 				<!-- <router-link :class="act?'active':''" to="/index/index" @click.native='active(1)'>首页</router-link>

src/views/message/InnerSurvey.vue

@@ -20,7 +20,7 @@ a {
 .item-main {
   // margin:34px;
   // height:600px;
-  background: #FFFFFF;
+  background: #ffffff;
   width: 356px;
   height: 575px;
   overflow: auto;
@@ -31,12 +31,12 @@ a {
   left: 4px;
   // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
   border-radius: 5px;
-  border:1px solid #ccc;
+  border: 1px solid #ccc;
   .el-form.over_y {
     max-height: calc(100vh - 340px);
     overflow: visible;
   }
-  .tpl_form{
+  .tpl_form {
     border: none;
   }
   /deep/.el-form-item__label {
@@ -96,14 +96,14 @@ a {
     width: 100%;
   }
 }
-.survey_dialog{
-  .el-dialog{
+.survey_dialog {
+  .el-dialog {
     // width:25%;
     width: 400px;
     height: 750px;
     margin-top: 20px !important;
     background: url("../../assets/survey_bg.png") no-repeat;
-    background-size:100% 100%;
+    background-size: 100% 100%;
     border-radius: 60px;
   }
 }
@@ -301,12 +301,18 @@ a {
       :show-close="false"
       :title="dialogTitle"
       :visible.sync="dialogVisible1"
-      class="survey_dialog" width="400px" 
+      class="survey_dialog"
+      width="400px"
     >
       <div class="item-main">
         <img src="../../assets/survey_logo.png" alt="" class="survey_logo" />
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <el-form ref="form" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
+        <el-form
+          ref="form2"
+          :model="form2"
+          class="tpl_form over_y"
+          :rules="rules1.rules"
+        >
           <el-form-item
             v-for="(item, index) in widgetList"
             :key="index"
@@ -381,8 +387,8 @@ a {
               type="primary"
               @click="saveResult"
               style="width: 100%"
-              :disabled="form2.status==0"
-              >{{this.form2.status==1?"提交":"该问卷已禁用"}}</el-button
+              :disabled="form2.status == 0"
+              >{{ this.form2.status == 1 ? "提交" : "该问卷已禁用" }}</el-button
             >
           </el-form-item>
         </el-form>
@@ -505,7 +511,7 @@ export default {
     return {
       //   checked: [],
       rules1: {
-        rules:{}
+        rules: {},
       },
       qrcodeUrl: "",
       cur_message_id: null,
@@ -614,7 +620,7 @@ export default {
             row.status = res.data.data;
           });
         });
-      }else{
+      } else {
         this.$api.editMessageStatus({ id: row.id }).then((res) => {
           row.status = res.data.data;
         });
@@ -689,7 +695,7 @@ export default {
       this.message_id = row.id;
       this.widgetList = [];
       this.form2 = {};
-      this.form2.status = row.status
+      this.form2.status = row.status;
       this.$api.getMessageInfo({ id: row.id }).then((res) => {
         if (res.data.code == 0) {
           this.widgetList = res.data.data.widget;
@@ -706,20 +712,28 @@ export default {
               _this.$set(_this.form2, i.label, i.result);
             }
             //组装rules
-            if(i.type=="input"&&i.require){
-              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            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 == "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 == "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 == "checkbox" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "change" },
+              ];
             }
           });
-          this.$set(this.rules1,"rules",rules1)
+          this.$set(this.rules1, "rules", rules1);
           //   debugger
           this.dialogVisible1 = true;
         }
@@ -816,23 +830,27 @@ export default {
       });
     },
     saveResult() {
-      let result = JSON.stringify(this.form2);
-      this.$api
-        .saveSurveyResult({
-          message_id: this.message_id,
-          result: result,
-        })
-        .then((res) => {
-          if (res.data.code == 0) {
-            this.$message({
-              type: "success",
-              message: "保存成功!",
+      this.$refs["form2"].validate((valid) => {
+        if (valid) {
+          let result = JSON.stringify(this.form2);
+          this.$api
+            .saveSurveyResult({
+              message_id: this.message_id,
+              result: result,
+            })
+            .then((res) => {
+              if (res.data.code == 0) {
+                this.$message({
+                  type: "success",
+                  message: "保存成功!",
+                });
+                this.dialogVisible1 = false;
+              } else {
+                this.$message.error(res.data.message);
+              }
             });
-          } else {
-            this.$message.error(res.data.message);
-          }
-          this.dialogVisible1 = false;
-        });
+        }
+      });
     },
     save() {
       this.loading = true;

src/views/message/OutSurvey.vue

@@ -276,7 +276,7 @@ a {
       <div class="item-main">
         <img src="../../assets/survey_logo.png" alt="" class="survey_logo" />
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <el-form ref="form" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
+        <el-form ref="form2" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
           <el-form-item
             v-for="(item, index) in widgetList"
             :key="index"
@@ -776,24 +776,28 @@ export default {
       });
     },
     saveResult() {
-      let result = JSON.stringify(this.form2);
-      this.$api
-        .saveSurveyResultOut({
-          message_id: this.message_id,
-          result: result,
-        })
-        .then((res) => {
-          if (res.data.code == 0) {
-            this.$message({
-              type: "success",
-              message: "保存成功!",
-            });
-          } else {
-            this.$message.error(res.data.message);
-          }
-          this.dialogVisible1 = false;
-          this.getData();
-        });
+      this.$refs["form2"].validate((valid) => {
+        if (valid) {
+        let result = JSON.stringify(this.form2);
+        this.$api
+          .saveSurveyResultOut({
+            message_id: this.message_id,
+            result: result,
+          })
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.$message({
+                type: "success",
+                message: "保存成功!",
+              });
+            } else {
+              this.$message.error(res.data.message);
+            }
+            this.dialogVisible1 = false;
+            this.getData();
+          });
+        }
+      });
     },
     save() {
       this.$refs["form1"].validate((valid) => {

src/views/message/survey/answer.html

@@ -0,0 +1,212 @@
+<!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>
+  body {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  #app {
+    display: none;
+  }
+
+  .tpl_title {
+    font-size: 18px;
+    margin: 10px 0;
+  }
+
+  .item-main {
+    padding: 10px 15px;
+  }
+
+  .el-form-item__label {
+    font-weight: 600;
+    float: none;
+  }
+
+  .el-message-box {
+    width: 80%;
+  }
+
+  .survey_logo {
+    width: 125px;
+  }
+</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>
+      <el-form ref="form2" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
+        <el-form-item v-for="(item, index) in widgetList" :key="index" :label="(index+1)+'、'+(item.label)"
+          :prop="item.label">
+          <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]">
+            <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]">
+            <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>
+    </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 {
+        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;
+            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"
+                  });
+                }
+              }
+            })
+          }
+        });
+      },
+      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>

src/views/message/survey/login.html

@@ -0,0 +1,123 @@
+<!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>
+    body{
+        margin:0;
+        padding:40px 0 0;
+        height:calc(100vh - 40px);
+        background: linear-gradient(0deg, #CEF0FF, #FFFFFF);
+    }
+  #app{
+    display: none;
+  }
+  .logo-img{
+    width:150px;
+    margin:0 auto;
+  }
+  .el-form{
+      padding:35px;
+  }
+  .el-input__inner{
+      height:48px;
+      padding-left:42px;
+      border: 1px solid #EFF0F2;
+      border-radius: 5px;
+  }
+  .el-form-item img{
+    position: absolute;
+    top: 8px;
+    left: 6px;
+  }
+  .el-button--primary {
+    margin-top: 29px;
+    height: 48px;
+    font-size: 18px;
+    width:100%;
+    background-color: #3780CD;
+    }
+  .tpl_title {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  .el-form-item__label{
+        float:none;   
+    }
+</style>
+<body>
+  <div id="app" >
+    <div class='logo-img'><img src="static/logo.png" alt=""></div>
+    <el-form>
+        <el-form-item>
+            <el-input v-model='form.username' clearable placeholder="请输入账号"></el-input>
+            <img src="static/username.png" alt="">
+        </el-form-item>
+        <el-form-item>
+            <el-input v-model='form.password' type='password' clearable placeholder="请输入密码"></el-input>
+            <img src="static/pwd.png" alt="">
+        </el-form-item>
+        <el-form-item>
+            <el-button type='primary' @click='login'>登录</el-button>
+        </el-form-item>
+    </el-form>
+  </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 { 
+                form:{
+                    
+                },
+                
+            }
+        },
+        methods:{
+           login(){
+                $.ajax({
+                    url:'/api/account/login',
+                    method:'post',
+                    data:this.form,
+                    success:res=>{
+                        if(res.code == '1000'){
+                            this.$message.error(res.message);
+                        }else{
+                            var search=window.location.search.split('?')[1].split('&');
+                            let id=search[0].split('=')[1]
+                            if(window.location.search.split('?')[1].indexOf("type")!=-1){
+                              let type=search[1].split('=')[1]
+                              // 跳转到问卷页面
+                              window.location.href = "/survey/answer.html?id="+id+"&type="+type
+                            }else{
+                              window.location.href = "/survey/message.html?id="+id
+                            }
+                            
+                        }
+                    }
+                })
+           }
+        },
+        created(){
+        //    var search=window.location.search.split('?')[1].split('&');
+        //    this.id=search[0].split('=')[1]
+        //    this.getData()
+        },
+        mounted(){
+            document.getElementById('app').style.display='block'
+        }
+    })
+  </script>
+</html>

src/views/message/survey/message.html

@@ -0,0 +1,100 @@
+<!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>
+   body{margin:0px;padding:0px;}
+  #app{
+    display: none;
+  }
+  .tpl_title {
+    font-size: 18px;
+    margin: 10px 0;
+  }
+  .item-main{
+	padding:10px 15px;
+	}
+  .el-form-item__label{
+		font-weight:600;
+        float:none;   
+    }
+    .el-message-box{
+      width:80%;
+    }
+    .survey_logo{
+        width:145px;     
+    }
+</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">{{ form.name }}</h5>
+		    <div class="content">
+            <div v-html="form.content"></div>
+            <div>
+              <span>附件:</span>
+              <a :href="form.fileurl">{{form.filename}}</a>
+            </div>
+        </div>
+    </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 { 
+            type:null,
+            form:{
+              
+            },
+            widgetList:[],
+            id:'',
+            title:'',
+            show:0
+        }
+      },
+      methods:{
+            getData(){
+                let url = "/api/admin/message/notice"
+                $.ajax({
+                        url:url,
+                        method:'get',
+                        data:{
+                            id:this.id
+                        },
+                        success:res=>{
+                            document.getElementById('app').style.display='block'
+                            this.form = res.data
+                        },
+                  error:res=>{
+                    if(res.status==403){
+                      window.location.href="/survey/login.html?id="+this.id
+                    }
+                  }
+                })
+            },
+            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.getData()
+        }
+    })
+  </script>
+</html>

src/views/message/survey/success.html

@@ -0,0 +1,93 @@
+<!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>
+    body{
+        margin:0;
+        padding:40px 0 0;
+        height:calc(100vh - 40px);
+        background: linear-gradient(0deg, #CEF0FF, #FFFFFF);
+    }
+  #app{
+    display: none;
+  }
+  .logo-img{
+    width:150px;
+    margin:0 auto;
+  }
+  .el-form{
+      padding:35px;
+  }
+  .el-input__inner{
+      height:48px;
+      padding-left:42px;
+      border: 1px solid #EFF0F2;
+      border-radius: 5px;
+  }
+  .el-form-item img{
+    position: absolute;
+    top: 8px;
+    left: 6px;
+  }
+  .el-button--primary {
+    margin-top: 29px;
+    height: 48px;
+    font-size: 18px;
+    width:100%;
+    background-color: #3780CD;
+    }
+  .tpl_title {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  .el-form-item__label{
+        float:none;   
+    }
+    .content{
+      width: 70%;
+      margin:0 auto;
+      font-size: 24px;
+      line-height: 35px;
+      margin-top:20px;
+    }
+</style>
+<body>
+  <div id="app" >
+    <div class='logo-img'><img src="static/logo.png" alt=""></div>
+    <div class="content">您已成功提交"{{title}}"问卷调查，感谢参与!</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 { 
+                title:"",
+                form:{}
+            }
+        },
+        methods:{
+           
+        },
+        created(){
+          var search=window.location.search.split('?')[1].split('&');
+          this.title=decodeURIComponent(search[0].split('=')[1])
+        },
+        mounted(){
+            document.getElementById('app').style.display='block'
+        }
+    })
+  </script>
+</html>