From 18cdc81d38d9f0250fa7482384c4552c41794d6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Fri, 9 Aug 2024 11:46:36 +0800
Subject: [PATCH] 11

---
 admin/src/views/qa/qa.vue | 426 +++++++++++++++++---------------------
 admin/vue.config.js       |   2 +-
 2 files changed, 194 insertions(+), 234 deletions(-)

diff --git a/admin/src/views/qa/qa.vue b/admin/src/views/qa/qa.vue
index db277046..d95c7d6b 100644
--- a/admin/src/views/qa/qa.vue
+++ b/admin/src/views/qa/qa.vue
@@ -74,7 +74,7 @@
             type="primary"
             size="small"
             icon="el-icon-edit"
-            @click="onEdit(scope.row)"
+            @click="onAdd(scope.row)"
             >编辑</el-button
           >
           <el-button
@@ -96,9 +96,16 @@
       @pagination="getList"
     />
 
-    <el-dialog title="添加QA" :visible.sync="dialogCreate">
-      <el-form label-width="120px" :model="anchors">
-        <el-form-item label="城市">
+    <el-dialog :title="title" :visible.sync="dialogCreate">
+      <el-button
+        class="filter-items"
+        v-loading="loading"
+        type="primary"
+        @click="onSave"
+        >保 存</el-button
+      >
+      <el-form ref="addForm" label-width="120px" :model="anchors">
+        <el-form-item label="城市" prop="city_id">
           <el-select v-model="anchors.city_id" placeholder="请选择">
             <el-form-item
               style="display: inline-flex; text-align: left; width: 770px"
@@ -113,7 +120,7 @@
             </el-form-item>
           </el-select>
         </el-form-item>
-        <el-form-item label="旅游路线">
+        <el-form-item label="旅游路线" prop="title">
           <el-input
             v-model="anchors.title"
             type="text"
@@ -164,196 +171,93 @@
             inactive-color="#ff4949"
           />
         </el-form-item>
+        <div
+          style="display: flex; justify-content: flex-end; margin-bottom: 10px"
+        >
+          <el-button type="primary" @click="onAddImg()">添加图片</el-button>
+        </div>
         <el-form-item label="上传图片">
-          <el-upload
-            class="avatar-uploader"
-            action="admin/upload/index"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-          >
-            <div v-for="(item, index) in anchors.img_zip" class="img-box">
+          <div class="upload-list">
+            <div class="wu-yu" v-for="(item, index) in anchors.img_zip">
               <i
                 @click.stop="handleClose('img_zip', index)"
                 class="close el-icon-close"
               />
-              <i v-if="!checkIfUrlContainsImage(item)" class="el-icon-folder" />
-              <img
-                v-else
-                style="width: 100px; height: 100px"
-                :src="item"
-                class="avatar"
-                alt=""
-              />
-              <div class="desc">{{ handleRegex(item) }}</div>
-            </div>
-            <i class="el-icon-plus avatar-uploader-icon" />
-          </el-upload>
-          <div style="color: red">(请上传.jpg, png的图片)</div>
-        </el-form-item>
-        <el-form-item label="上传行程">
-          <el-upload
-            class="avatar-uploader"
-            action="admin/upload/index"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <div v-for="(item, index) in anchors.trip_zip" class="img-box">
-              <i
-                @click.stop="handleClose('trip_zip', index)"
-                class="close el-icon-close"
-              />
-              <i v-if="!checkIfUrlContainsImage(item)" class="el-icon-folder" />
-              <img
-                v-else
-                style="width: 100px; height: 100px"
-                :src="item"
-                class="avatar"
-                alt=""
-              />
-              <div class="desc">{{ handleRegex(item) }}</div>
-            </div>
-            <i class="el-icon-plus avatar-uploader-icon" />
-          </el-upload>
-          <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button v-loading="loading" type="primary" @click="onSave"
-          >保 存</el-button
-        >
-      </div>
-    </el-dialog>
-
-    <el-dialog title="编辑内容" :visible.sync="dialogEdit">
-      <el-form label-width="120px" :model="anchors">
-        <el-form-item label="城市">
-          <el-select v-model="anchors.city_id" placeholder="请选择">
-            <el-form-item
-              style="display: inline-flex; text-align: left; width: 770px"
-            >
-              <el-option
-                v-for="item in getQaCitys"
-                :key="item.city_id"
-                style="
-                  width: 250px;
-                  display: inline-flex;
-                  word-break: break-all;
+              <el-input v-model="item.desc" placeholder="图片说明"></el-input>
+              <el-upload
+                class="avatar-uploader"
+                action=""
+                :show-file-list="false"
+                :http-request="handlesAvatarSuccess"
+                :on-success="
+                  (response, file, fileList) =>
+                    handleAvatarSuccess(response, file, fileList, index)
                 "
-                :label="item.city_name"
-                :value="item.city_id"
-              />
-            </el-form-item>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="旅游路线">
-          <el-input
-            v-model="anchors.title"
-            type="text"
-            placeholder="请输入旅游路线"
-          />
-        </el-form-item>
-        <el-form-item label="QA内容">
-          <div
-            class="mistake-content"
-            v-for="(item, index) in anchors.qaQuestions"
-          >
-            <div class="mistake-left">
-              <div>副标题</div>
-              <div class="qa-desc">
-                <el-input
-                  style="width: 100px; margin-right: 10px"
-                  v-model="item.sort"
-                  type="text"
-                  placeholder="序号"
-                />
-                <el-input
-                  v-model="item.title"
-                  type="text"
-                  placeholder="请输入副标题"
-                />
-              </div>
-              <div>内容</div>
-              <div style="border: 1px solid #ccc">
-                <myEditor v-model="item.content" />
-              </div>
-            </div>
-            <div class="mistake-right">
-              <el-button @click="handleDel(index)" type="danger"
-                >删除</el-button
               >
+                <div v-if="!!item.file" class="img-box">
+                  <i
+                    v-if="!checkIfUrlContainsImage(item.file)"
+                    class="el-icon-folder"
+                  />
+                  <img
+                    v-else
+                    style="width: 100px; height: 100px"
+                    :src="item.file"
+                    class="avatar"
+                    alt=""
+                  />
+                  <div class="desc">{{ handleRegex(item.file) }}</div>
+                </div>
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
             </div>
           </div>
-          <div class="mistake-btn">
-            <el-button type="primary" @click="handleAdd">添加</el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch
-            v-model="anchors.status"
-            :active-value="1"
-            :inactive-value="0"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-          />
-        </el-form-item>
-        <el-form-item label="上传图片">
-          <el-upload
-            class="avatar-uploader"
-            action="admin/upload/index"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-          >
-            <div v-for="(item, index) in anchors.img_zip" class="img-box">
-              <i
-                @click.stop="handleClose('img_zip', index)"
-                class="close el-icon-close"
-              />
-              <i v-if="!checkIfUrlContainsImage(item)" class="el-icon-folder" />
-              <img
-                v-else
-                style="width: 100px; height: 100px"
-                :src="item"
-                class="avatar"
-                alt=""
-              />
-              <div class="desc">{{ handleRegex(item) }}</div>
-            </div>
-            <i class="el-icon-plus avatar-uploader-icon" />
-          </el-upload>
           <div style="color: red">(请上传.jpg, png的图片)</div>
         </el-form-item>
+        <div
+          style="display: flex; justify-content: flex-end; margin-bottom: 10px"
+        >
+          <el-button type="primary" @click="onAddtrip()">添加行程</el-button>
+        </div>
         <el-form-item label="上传行程">
-          <el-upload
-            class="avatar-uploader"
-            action="admin/upload/index"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <div v-for="(item, index) in anchors.trip_zip" class="img-box">
+          <div class="upload-list">
+            <div class="wu-yu" v-for="(item, index) in anchors.trip_zip">
               <i
                 @click.stop="handleClose('trip_zip', index)"
                 class="close el-icon-close"
               />
-              <i v-if="!checkIfUrlContainsImage(item)" class="el-icon-folder" />
-              <img
-                v-else
-                style="width: 100px; height: 100px"
-                :src="item"
-                class="avatar"
-                alt=""
-              />
-              <div class="desc">{{ handleRegex(item) }}</div>
+              <el-input v-model="item.desc" placeholder="行程说明"></el-input>
+              <el-upload
+                class="avatar-uploader"
+                action="/dev-api/admin/upload/index"
+                :show-file-list="false"
+                :on-success="
+                  (response, file, fileList) =>
+                    handleSuccess(response, file, fileList, index)
+                "
+              >
+                <div v-if="!!item.file" class="img-box">
+                  <i
+                    v-if="!checkIfUrlContainsImage(item.file)"
+                    class="el-icon-folder"
+                  />
+                  <img
+                    v-else
+                    style="width: 100px; height: 100px"
+                    :src="item.file"
+                    class="avatar"
+                    alt=""
+                  />
+                  <div class="desc">{{ handleRegex(item.file) }}</div>
+                </div>
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
             </div>
-            <i class="el-icon-plus avatar-uploader-icon" />
-          </el-upload>
+          </div>
           <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button v-loading="loading" type="primary" @click="onSave"
-          >保 存</el-button
-        >
-      </div>
+      <div slot="footer" class="dialog-footer"></div>
     </el-dialog>
   </div>
 </template>
@@ -361,13 +265,14 @@
 <script>
 import Pagination from "@/components/PaginationFixed";
 import myEditor from "@/components/Wangeditor/index.vue";
-
+import { getToken } from "@/utils/auth";
 export default {
   name: "getQa",
   components: { Pagination, myEditor },
   data() {
     return {
       statusArr: { 0: "禁用", 1: "启用" },
+      title: "",
       list: [],
       total: 0,
       loading: false,
@@ -387,8 +292,8 @@ export default {
       item: {},
       anchors: {
         qaQuestions: [],
-        img_zip: [],
-        trip_zip: [],
+        img_zip: [{ desc: "", file: "" }],
+        trip_zip: [{ desc: "", file: "" }],
       },
       getQaCitys: {},
     };
@@ -411,19 +316,42 @@ export default {
         ".svg",
         ".webp",
       ];
-      console.log(url);
-      console.log(
-        "========fffff====" +
-          imageExtensions.some((extension) =>
-            url.toLowerCase().endsWith(extension)
-          )
-      );
-      console.log(url);
       return imageExtensions.some((extension) =>
         url.toLowerCase().endsWith(extension)
       );
     },
+
+    async handlesAvatarSuccess(file) {
+      try {
+        var formdata = new FormData();
+        formdata.append("file", file.file);
+
+        this.upLoading = true;
+        const _this = this;
+        const res = await this.$axios.post("/admin/upload/index", formdata, {
+          headers: {
+            "Content-type": "multipart/form-data",
+            "X-Token": getToken(),
+          },
+        });
+        // if (![200].includes(res.data.code)) {
+        //   this.$message.error("上传失败");
+        //   return;
+        // }
+        // 主动回调success方法
+        file.onSuccess(res);
+      } catch (error) {
+        console.error(error);
+      }
+    },
     handleClose(val, i) {
+      if (this.anchors[val].length == 1) {
+        this.$message({
+          message: "至少保留一条",
+          type: "warning",
+        });
+        return;
+      }
       console.log("i===", i);
       this.anchors[val].splice(i, 1);
     },
@@ -461,19 +389,26 @@ export default {
           this.listLoading = false;
         });
     },
-    handleAvatarSuccess(res, file) {
-      console.log("====1111===" + res);
-      this.anchors.img_zip.push(
-        `${window.location.protocol}//${window.location.host}${res.data}`
-      );
-      console.log("====111122222===" + this.anchors.img_zip);
+    onAddImg() {
+      this.anchors.img_zip.push({ desc: "", file: "" });
     },
-    handleSuccess(res, file) {
-      console.log("====222222===" + res);
-      this.anchors.trip_zip.push(
-        `${window.location.protocol}//${window.location.host}${res.data}`
-      );
-      console.log("====111122222===" + this.anchors.trip_zip);
+    onAddtrip() {
+      this.anchors.trip_zip.push({ desc: "", file: "" });
+    },
+    handleAvatarSuccess(res, file, fileList, index) {
+      if (!res.data) return;
+      this.anchors.img_zip[
+        index
+      ].file = `${window.location.protocol}//${window.location.host}${res.data}`;
+      // this.anchors.img_zip.push(
+      //   `${window.location.protocol}//${window.location.host}${res.data}`
+      // );
+    },
+    handleSuccess(res, file, fileList, index) {
+      if (!res.data) return;
+      this.anchors.trip_zip[
+        index
+      ].file = `${window.location.protocol}//${window.location.host}${res.data}`;
     },
     handleRegex(val) {
       const regex = /\/([^\/]+)$/;
@@ -484,51 +419,54 @@ export default {
       this.listQuery.page = 1;
       this.getList();
     },
-    onAdd() {
-      this.anchors.qaQuestions = [
-        {
-          sort: 1,
-          title: "",
-          content: "",
-        },
-      ];
-      // 初始化时默认排序值为0
-      this.anchors.img_zip = [];
-      this.anchors.trip_zip = [];
+    onAdd(item) {
       this.dialogCreate = true;
-    },
-    onEdit(item) {
-      if (!item.qaQuestions.length) {
-        this.anchors = {
-          ...item,
-          qaQuestions: [
-            {
-              sort: 1,
-              title: "",
-              content: "",
-            },
-          ],
-        };
+      if (!item.id) {
+        this.title = "添加QA";
+        this.anchors.qaQuestions = [
+          {
+            sort: 1,
+            title: "",
+            content: "",
+          },
+        ];
+        // 初始化时默认排序值为0
+        this.anchors.img_zip = [{ desc: "", file: "" }];
+        this.anchors.trip_zip = [{ desc: "", file: "" }];
       } else {
-        this.anchors = { ...item };
+        this.title = "编辑QA";
+        if (!item.qaQuestions.length) {
+          this.anchors = {
+            ...item,
+            qaQuestions: [
+              {
+                sort: 1,
+                title: "",
+                content: "",
+              },
+            ],
+          };
+        } else {
+          this.anchors = { ...item };
+        }
+        this.anchors.img_zip = item.img_zip
+          ? item.img_zip
+          : [{ desc: "", file: "" }];
+        this.anchors.trip_zip = item.trip_zip
+          ? item.trip_zip
+          : [{ desc: "", file: "" }];
       }
-      this.anchors.img_zip = item.img_zip;
-      this.anchors.trip_zip = item.trip_zip;
-      // this.anchors.img_zip =
-      //   typeof item.img_zip == "string" ? [item.img_zip] : item.img_zip;
-      // this.anchors.trip_zip =
-      //   typeof item.trip_zip == "string" ? [item.trip_zip] : item.trip_zip;
-      this.dialogEdit = true;
     },
     onSave() {
       if (this.loading) return;
       this.loading = true;
-      const api = this.dialogCreate ? "/admin/qa/addQa" : "/admin/qa/editQa";
+      const api =
+        this.title == "添加QA" ? "/admin/qa/addQa" : "/admin/qa/editQa";
       this.$axios
         .post(api, this.anchors)
         .then(() => {
           this.dialogCreate = false;
-          this.dialogEdit = false;
+          // this.dialogEdit = false;
           this.loading = false;
           this.getList();
         })
@@ -585,11 +523,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.upload-list {
+  display: flex;
+  flex-wrap: wrap;
+  .wu-yu {
+    margin-bottom: 10px;
+    position: relative;
+    & + .wu-yu {
+      margin-left: 5px;
+    }
+    ::v-deep.el-input {
+      width: 100px;
+      margin: 0 0 10px 10px;
+    }
+  }
+}
+.filter-items {
+  position: fixed;
+  // right: 0;
+  left: 70%;
+  z-index: 66;
+}
 .img-box {
   position: relative;
   display: inline-block;
   width: 100px;
   margin-bottom: 10px;
+  margin-left: 10px;
   & + .img-box {
     margin-left: 10px;
   }
@@ -615,7 +575,7 @@ export default {
 .close {
   position: absolute;
   top: -10px;
-  right: -8px;
+  right: -15px;
   font-size: 18px;
   color: #409eff;
 }
diff --git a/admin/vue.config.js b/admin/vue.config.js
index c94c6836..4ee47e34 100644
--- a/admin/vue.config.js
+++ b/admin/vue.config.js
@@ -39,7 +39,7 @@ module.exports = {
     proxy: {
       '/dev-api': { // 接口地址 以 api开头的都走下面的配置
         // target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
-        target: 'http://0.0.0.0:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
+        target: 'http://192.168.1.4:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
         ws: true, // 是否支持 websocket 请求 支持
         changeOrigin: true, // 是否启用跨域
         pathRewrite: {