From 7e6c8d9a687547f1f51956440def033f177cee5d Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Wed, 28 Jun 2023 18:43:23 +0800
Subject: [PATCH] =?UTF-8?q?improve:=20=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 template/admin/src/api/setting.js             |  4 +-
 .../admin/src/components/uploadImg/index.vue  | 51 +++++++++++++------
 .../src/components/uploadPictures/index.vue   | 16 +++---
 template/admin/src/pages/app/upload/index.vue |  1 +
 4 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/template/admin/src/api/setting.js b/template/admin/src/api/setting.js
index 4705cc02f..2d3d3f983 100644
--- a/template/admin/src/api/setting.js
+++ b/template/admin/src/api/setting.js
@@ -1126,9 +1126,9 @@ export function codeCrud(data) {
 /**
  * @description 扫码上传链接获取
  */
-export function scanUploadQrcode() {
+export function scanUploadQrcode(pid) {
   return request({
-    url: `file/scan_upload/qrcode`,
+    url: `file/scan_upload/qrcode?pid=${pid}`,
     method: 'get',
   });
 }
diff --git a/template/admin/src/components/uploadImg/index.vue b/template/admin/src/components/uploadImg/index.vue
index 03b26d9a5..a6882a8c1 100644
--- a/template/admin/src/components/uploadImg/index.vue
+++ b/template/admin/src/components/uploadImg/index.vue
@@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div v-if="uploadModal">
     <el-dialog
       title="上传图片"
       append-to-body
       :modal-append-to-body="false"
       :visible.sync="uploadModal"
       width="1024px"
+      :fullscreen="!isPage"
       @closed="closed"
     >
       <div class="main" v-loading="loading">
@@ -57,7 +58,7 @@
                     @dragend="handleDragEnd($event, file)"
                   >
                     <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-                    <i class="el-icon-error btndel" @click="handleRemove(file)" />
+                    <i class="el-icon-error btndel" @click="handleWebRemove(file)" />
                   </div>
                 </el-upload>
                 <div class="tips">建议上传图片最大宽度750px，不超过3MB；仅支持jpeg、png格式</div>
@@ -82,7 +83,7 @@
             </div>
           </template>
         </el-form>
-        <div class="code-image" v-show="ruleForm.type == 2">
+        <div class="code-image" v-if="ruleForm.type == 2">
           <div class="left">
             <div class="code" ref="qrCodeUrl"></div>
             <el-cascader
@@ -109,7 +110,7 @@
                 @dragend="handleDragEnd($event, item)"
               >
                 <img :src="item.att_dir" />
-                <i class="el-icon-error btndel" @click="handleRemove(index)" />
+                <i class="el-icon-error btndel" @click="handleWebRemove(item)" />
               </div>
             </div>
           </div>
@@ -140,6 +141,21 @@ export default {
         return [];
       },
     },
+    categoryId: {
+      default: '',
+    },
+    isPage: {
+      default: false,
+    },
+  },
+  watch: {
+    categoryId: {
+      handler(newVal) {
+        this.ruleForm.region = newVal;
+        console.log('diaole ');
+      },
+      immediate: true,
+    },
   },
   data() {
     return {
@@ -150,14 +166,14 @@ export default {
         'Authori-zation': 'Bearer ' + getCookies('token'),
       },
       uploadData: {},
-      props: { label: 'title', value: 'id', multiple: false, checkStrictly: true, lazy: true, lazyLoad: this.loadData },
+      props: { checkStrictly: true, emitPath: false, label: 'title', value: 'id' },
       disabled: false,
       ruleForm: {
         type: 0,
+        region: '',
         imgList: [],
       },
       rules: { type: [{ required: true, message: '请选择活动资源', trigger: 'change' }] },
-      treeId: '',
       qrcode: '',
       scanToken: '',
       limit: 20,
@@ -169,6 +185,9 @@ export default {
   methods: {
     closed() {
       this.ruleForm.type = 0;
+      this.ruleForm.region = 0;
+      this.scanToken = '';
+      this.webImgUrl = '';
       this.ruleForm.imgList = [];
       scanUploadCode().then((res) => {});
     },
@@ -180,7 +199,7 @@ export default {
       }
     },
     scanUploadQrcode() {
-      scanUploadQrcode().then((res) => {
+      scanUploadQrcode(this.ruleForm.region).then((res) => {
         this.creatQrCode(res.data.url);
         this.scanToken = res.data.url;
       });
@@ -205,7 +224,7 @@ export default {
     async submitUpload() {
       if (this.ruleForm.type == 0) {
         this.uploadData = {
-          pid: this.treeId,
+          pid: this.ruleForm.region,
         };
         if (this.ruleForm.imgList.length) {
           if (this.loading) return;
@@ -228,7 +247,7 @@ export default {
         if (urls.length) {
           if (this.loading) return;
           this.loading = true;
-          onlineUpload({ pid: this.treeId, images: urls })
+          onlineUpload({ pid: this.ruleForm.region, images: urls })
             .then((res) => {
               this.$Message.success('上传成功');
               this.$emit('uploadSuccess');
@@ -244,7 +263,7 @@ export default {
         let attId = this.ruleForm.imgList.map((e) => {
           return e.att_id;
         });
-        moveApi({ pid: this.treeId, images: attId }).then((res) => {
+        moveApi({ pid: this.ruleForm.region, images: attId }).then((res) => {
           this.$Message.success('上传成功');
           this.$emit('uploadSuccess');
           this.uploadModal = false;
@@ -255,7 +274,7 @@ export default {
       return new Promise((resolve, reject) => {
         const formData = new FormData();
         formData.append('file', file);
-        formData.append('pid', this.treeId);
+        formData.append('pid', this.ruleForm.region);
         fileUpload(formData)
           .then((res) => {
             if (res.status == 200) {
@@ -288,13 +307,16 @@ export default {
         correctLevel: QRCode.CorrectLevel.H,
       });
     },
-    handleRemove(file) {
+    handleWebRemove(file) {
       console.log(file);
       let index = this.ruleForm.imgList.findIndex((e) => {
-        e.url == file.url;
+        return e.url == file.url;
       });
       this.ruleForm.imgList.splice(index, 1);
     },
+    handleRemove(index) {
+      this.ruleForm.imgList.splice(index, 1);
+    },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
@@ -334,8 +356,7 @@ export default {
         .catch((res) => {});
     },
     handleChange(e) {
-      console.log(e, e.length == 1 ? e[0] : e[e.length - 1]);
-      this.treeId = e[e.length - 1];
+      if (this.ruleForm.type == 2) this.scanUploadQrcode();
     },
     // 移动
     handleDragStart(e, item) {
diff --git a/template/admin/src/components/uploadPictures/index.vue b/template/admin/src/components/uploadPictures/index.vue
index 79ed1ed91..674d31aad 100644
--- a/template/admin/src/components/uploadPictures/index.vue
+++ b/template/admin/src/components/uploadPictures/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Modal">
+  <div class="Modal" :class="{ 'fill-window': !isPage }">
     <div class="colLeft">
       <div class="Nav">
         <!-- <div class="input">
@@ -70,7 +70,7 @@
             <el-cascader
               v-model="pids"
               placeholder="图片移动至"
-              style="width: 50%"
+              style="width: 150px"
               class="treeSel"
               :options="treeData2"
               :props="{ checkStrictly: true, emitPath: false, label: 'title', value: 'id' }"
@@ -85,7 +85,7 @@
               v-model="fileData.real_name"
               placeholder="请输入图片名"
               size="small"
-              style="width: 50%"
+              style="width: 150px"
             >
               <i slot="suffix" class="el-icon-search el-input__icon" @click="getFileList"></i>
             </el-input>
@@ -203,7 +203,7 @@
         </div>
       </div>
     </div>
-    <uploadImg ref="upload" @uploadSuccess="uploadSuccess"></uploadImg>
+    <uploadImg ref="upload" :isPage="isPage" :categoryId="treeId" :categoryList="treeData" @uploadSuccess="uploadSuccess"></uploadImg>
     <div class="images" v-show="false" v-viewer="{ movable: false }">
       <img v-for="src in pictrueList" :src="src.att_dir" :key="src.att_id" />
     </div>
@@ -386,10 +386,6 @@ export default {
     searchImg() {},
     // 移动分类
     getMove() {
-      if (!this.ids.toString()) {
-        this.$Message.warning('请先选择图片');
-        return;
-      }
       let data = {
         pid: this.pids,
         images: this.ids.toString(),
@@ -903,7 +899,9 @@ export default {
   height: 100%;
   background: #fff !important;
 }
-
+.fill-window {
+  height: 100vh;
+}
 .colLeft {
   padding-right: 0 !important;
   height: 100%;
diff --git a/template/admin/src/pages/app/upload/index.vue b/template/admin/src/pages/app/upload/index.vue
index 21c700fd2..16892f275 100644
--- a/template/admin/src/pages/app/upload/index.vue
+++ b/template/admin/src/pages/app/upload/index.vue
@@ -68,6 +68,7 @@ export default {
   created() {
     this.token = this.$route.query.token;
     this.pid = this.$route.query.pid;
+    this.pid = this.$route.query.pid;
     document.title = '手机端扫码上传';
   },
   methods: {