增加了反馈建议功能

src/components/gmhExcel/ImportSteps.vue

@@ -2,9 +2,7 @@
   <el-card class="box-card bottom-10">
     <el-steps :active="active" finish-status="success">
       <el-step>
-        <span style="cursor: pointer" slot="title" @click="importClick"
-          >导入名单🐸</span
-        >
+        <span style="cursor: pointer" slot="title" @click="importClick">导入名单🐸</span>
       </el-step>
       <el-step title="导入模板💕"></el-step>
       <el-step title="完成👍"></el-step>
@@ -19,8 +17,8 @@ export default {
     active: {
       type: Number,
       require: true,
-      default: 0,
-    },
+      default: 0
+    }
   },
   components: {},
   data() {
@@ -31,8 +29,8 @@ export default {
   methods: {
     importClick() {
       this.$bus.$emit("openImportDialog");
-    },
-  },
+    }
+  }
 };
 </script> 
 

src/components/gmhExcel/SuggestDialog.vue

@@ -1,13 +1,84 @@
 <template>
-  
+  <el-dialog title="反馈建议" :visible.sync="showSuggest" width="45%" @close="onClose">
+    <el-form size="mini" ref="form" :model="form" label-width="80px" :rules="rules">
+      <el-form-item label="姓名" prop="sugName">
+        <el-input v-model="form.sugName" placeholder="请输入姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" prop="sugMobile">
+        <el-input v-model="form.sugMobile" placeholder="输入手机号，以便于接收建议的反馈"></el-input>
+      </el-form-item>
+      <el-form-item label="建议内容" prop="sugContent">
+        <el-input type="textarea" v-model="form.sugContent" placeholder="请输入您的建议" :rows="5"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="closeDialog()">取 消</el-button>
+      <el-button size="mini" type="primary" @click="submitSuggest()">提 交</el-button>
+    </span>
+  </el-dialog>
 </template>
 
 <script>
 export default {
+  name: "demo",
+  props: {
+    // 是否显示
+    showSuggest: {
+      type: Boolean,
+      require: true,
+      default: false
+    }
+  },
+  components: {},
+  data() {
+    return {
+      form: { sugName: "", sugMobile: "", sugContent: "" },
+      rules: {
+        sugName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        sugContent: [
+          { required: true, message: "请输入建议内容", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  computed: {},
+  methods: {
+    closeDialog() {
+      this.$emit("closeSuggest");
+    },
+    submitSuggest() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.$axios
+            .post("/api/excel/suggest", this.form)
+            .then(res => {
+              const { data } = res;
+              if (data.success) {
+                this.$message.success("意见反馈成功，我会尽快处理");
 
+                this.closeDialog();
+              } else {
+                this.$message.error("出现了一些错误，十分抱歉");
               }
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    onClose() {
+      this.$refs.form.clearValidate();
+      this.$refs.form.resetFields();
+    }
+  },
+  created() {},
+  mounted() {}
+};
 </script> 
 
-<style>
-
+<style scoped>
 </style>

src/components/gmhExcel/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <div>
-      <el-tooltip
-        effect="dark"
-        content="点我查看视频教程"
-        placement="left-start"
-      >
+      <el-tooltip effect="dark" content="点我查看视频教程" placement="left-start">
         <el-button
           type="success"
           icon="el-icon-video-camera"
@@ -16,17 +12,13 @@
       </el-tooltip>
     </div>
     <div>
-      <el-tooltip
-        effect="dark"
-        content="点我提交反馈建议"
-        placement="left-start"
-      >
+      <el-tooltip effect="dark" content="点我提交反馈建议" placement="left-start">
         <el-button
           type="warning"
           icon="el-icon-message"
           circle
           class="suggest-btn"
-          @click="suggestShow = true"
+          @click="showSuggest = true"
         ></el-button>
       </el-tooltip>
     </div>
@@ -45,12 +37,9 @@
       ></template-import>
     </el-collapse-transition>
     <el-collapse-transition>
-      <excel-download
-        id="excelDownload"
-        @setStep="setStep"
-        v-if="activeStep == 3"
-      ></excel-download>
+      <excel-download id="excelDownload" @setStep="setStep" v-if="activeStep == 3"></excel-download>
     </el-collapse-transition>
+    <suggest-dialog :showSuggest="showSuggest" @closeSuggest="closeSuggest()"></suggest-dialog>
   </div>
 </template>
 
@@ -59,13 +48,20 @@ import ImportSteps from "@/components/gmhExcel/ImportSteps";
 import DataSourceImport from "@/components/gmhExcel/DataSourceImport";
 import TemplateImport from "@/components/gmhExcel/TemplateImport";
 import ExcelDownload from "@/components/gmhExcel/ExcelDownload";
+import SuggestDialog from "@/components/gmhExcel/SuggestDialog";
 
 export default {
-  components: { ImportSteps, DataSourceImport, TemplateImport, ExcelDownload },
+  components: {
+    ImportSteps,
+    DataSourceImport,
+    TemplateImport,
+    ExcelDownload,
+    SuggestDialog
+  },
   data() {
     return {
       activeStep: 0,
-      suggestShow: false,
+      showSuggest: false
     };
   },
   created() {
@@ -76,10 +72,10 @@ export default {
     test() {
       this.$axios
         .get("/api/test/test")
-        .then((res) => {
+        .then(res => {
           const { data } = res;
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err);
         });
     },
@@ -90,7 +86,7 @@ export default {
           window.scroll({
             top: document.body.clientHeight,
             left: 0,
-            behavior: "smooth",
+            behavior: "smooth"
           });
         }, 500);
       }
@@ -98,7 +94,7 @@ export default {
     scrollIntoTemplateImport() {
       setTimeout(() => {
         document.getElementById("templateImport").scrollIntoView({
-          behavior: "smooth",
+          behavior: "smooth"
         });
       }, 500);
     },
@@ -107,6 +103,9 @@ export default {
         "https://chen-test-01-img.oss-cn-beijing.aliyuncs.com/video/gmh-guide.mp4"
       );
     },
+    closeSuggest() {
+      this.showSuggest = false
+    }
   },
   computed: {
     // 数据源导入disabled
@@ -116,8 +115,8 @@ export default {
     // 模板导入disabled
     templateImportDisabled() {
       return this.activeStep == 3;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -158,7 +157,7 @@ export default {
 }
 .suggest-btn {
   position: fixed;
-  bottom: 36%;
+  bottom: 38%;
   right: 2%;
   z-index: 999;
 }