From fa3615d2dcad3eb020a7ac59581546a6560e37ae Mon Sep 17 00:00:00 2001
From: yz3456 <2753272399@qq.com>
Date: 星期五, 10 五月 2024 16:06:41 +0800
Subject: [PATCH] 解决了其他附件封面问题

---
 ruoyi-ui/src/views/note/memo.vue |  469 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 433 insertions(+), 36 deletions(-)

diff --git a/ruoyi-ui/src/views/note/memo.vue b/ruoyi-ui/src/views/note/memo.vue
index bc03647..ca6cc0d 100644
--- a/ruoyi-ui/src/views/note/memo.vue
+++ b/ruoyi-ui/src/views/note/memo.vue
@@ -29,6 +29,9 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:role:remove']"
           > <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['familymodel:property:info']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"  @click="handleCheck(scope.row)">鏌ョ湅璇︽儏</el-button>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -92,7 +95,7 @@
         <span
           v-if="!disabled"
           class="el-upload-list__item-delete"
-          @click="handleRemove(file)"
+          @click="handleRemove2(file)"
         >
           <i class="el-icon-delete"></i>
         </span>
@@ -112,8 +115,7 @@
           :file-list="fileListOther"
           class="upload-demo"
           multiple
-
-          :on-remove="handleRemoveFile"
+          :on-remove="handleRemoveFile2"
           :show-file-list="true"
 		  ref="upload1"
 		  :on-change="handleChange1"
@@ -121,19 +123,67 @@
 		  list-type="picture-card"
 		    :http-request="requestUpload1"
         >
-          <el-button type="primary">鐐瑰嚮涓婁紶</el-button>
+          <!-- <el-button type="primary">鐐瑰嚮涓婁紶</el-button> -->
           <template #tip>
             <div class="el-upload__tip">
             </div>
           </template>
+
+          <i v-if="true" slot="default" class="el-icon-plus"></i>
+
+          <div slot="file" slot-scope="{file}">
+            <!-- 娣诲姞video鍏冪礌鐢ㄤ簬鏄剧ず瑙嗛 -->
+            <video
+              v-if="file.url.includes('.mp4')"
+              class="el-upload-list__item-thumbnail"
+              :src="file.url"
+                 style="width: 147px; height: 147px"
+              fit="fill"
+            ></video>
+            <img v-else
+                 class="el-upload-list__item-thumbnail"
+                 src="../../assets/images/deviceLis.png"
+                 alt=""
+                 style="width: 147px; height: 147px"
+                 fit="cover">
+
+            <span class="el-upload-list__item-actions">
+                 <span class="el-upload-list__item-name">{{file.name}}</span>
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handleFileCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+
+                        class="el-upload-list__item-delete"
+                        @click="handleDownload(file.url)"
+                      >
+                   <i class="el-icon-download"></i>
+                   </span>
+                      <span
+                        class="el-upload-list__item-delete"
+                        @click="handleRemoveFile2(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                </span>
+               <!-- <div style="height: 50px;">
+                {{file.name}}
+                </div> -->
+
+            <!-- <div style="position:absolute; z-index:2; left:0px; top:70%">{{file.name}}</div> -->
+          </div>
+
         </el-upload>
 
-<el-button
-		          style="margin-left: 10px"
-		          size="small"
-		          type="success"
-		          @click="fileUpload"
-		        >涓婁紶鍒版湇鍔″櫒</el-button>
+        <el-button
+          style="margin-left: 10px;"
+          size="small"
+          type="success"
+          @click="fileUpload"
+        >涓婁紶鍒版湇鍔″櫒</el-button>
 
         </el-form>
       </el-col>
@@ -144,11 +194,147 @@
         <el-button type="primary" @click="submitDataScope6">淇� 瀛�</el-button>
         <el-button @click="cancelData">鍙� 娑�</el-button>
       </div>
+
     </el-dialog>
+
+
+    <!-- 鏌ョ湅璇︽儏寮圭獥 -->
+    <el-dialog title="璇︽儏" :visible.sync="open2" width="900px" append-to-body>
+          <el-col >
+            <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">
+
+              <el-form-item label="鏃堕棿" prop="happenTime">
+                <el-date-picker
+                  v-model='formDat.happenTime'
+                  type='date'
+                  placeholder='閫夋嫨鏃ユ湡'
+    			  value-format="yyyy-MM-dd"
+            disabled
+                ></el-date-picker>
+              </el-form-item>
+
+              <el-form-item label="鍐呭" prop="content">
+                <el-input v-model="formDat.content" placeholder="璇疯緭鍏ュ唴瀹�" clearable :style="{width: '100%'}" disabled>
+                </el-input>
+              </el-form-item>
+
+            <h4 class="form-header">鐩稿叧鍥剧墖 </h4>
+              <el-upload
+                action="#"
+                list-type="picture-card"
+                multiple
+                :http-request="requestUpload"
+                :file-list="fileList"
+            :on-change="handleChange"
+            disabled
+
+            :auto-upload="false"
+              ref="upload"
+              :class="{ hide: no }"
+              >
+              <i slot="default" class="el-icon-plus"></i>
+              <div slot="file" slot-scope="{file}">
+               <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="file.url"
+                  alt=""
+                  style="width: 126px; height: 126px"
+                  fit="cover"
+                  :preview-src-list="[file.url]"
+                >
+                <span class="el-upload-list__item-actions">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
+              <i class="el-icon-zoom-in"></i>
+            </span>
+            <span
+
+              class="el-upload-list__item-delete"
+              @click="handleDownload(file.url)"
+            >
+              <i class="el-icon-download"></i>
+            </span>
+
+          </span>
+              </div>
+            </el-upload>
+            <h4 class="form-header">鍏朵粬闄勪欢 </h4>
+    <el-upload
+              action=""
+              :file-list="fileListOther"
+              class="upload-demo"
+              multiple
+              disabled
+              :on-remove="handleRemoveFile2"
+              :show-file-list="true"
+    		  ref="upload1"
+    		  :on-change="handleChange1"
+    		  :auto-upload="false"
+    		  list-type="picture-card"
+    		    :http-request="requestUpload1"
+            :class="{ hide: no }"
+            >
+
+            <div slot="file" slot-scope="{file}">
+              <!-- 娣诲姞video鍏冪礌鐢ㄤ簬鏄剧ず瑙嗛 -->
+              <video
+                v-if="file.url.includes('.mp4')"
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                style="width: 147px; height: 147px"
+                fit="cover"
+              ></video>
+              <img v-else
+                   class="el-upload-list__item-thumbnail"
+                   src="../../assets/images/deviceLis.png"
+                   alt=""
+                   style="width: 100%; height: 100%"
+                   fit="cover">
+
+              <span class="el-upload-list__item-actions">
+                   <span class="el-upload-list__item-name">{{ file.name }}</span>
+                        <span
+                          class="el-upload-list__item-preview"
+                          @click="handleFileCardPreview(file)"
+                        >
+                          <i class="el-icon-zoom-in"></i>
+                        </span>
+                        <span
+
+                          class="el-upload-list__item-delete"
+                          @click="handleDownload(file.url)"
+                        >
+                     <i class="el-icon-download"></i>
+                     </span>
+
+                  </span>
+
+            </div>
+
+
+
+            </el-upload>
+
+            </el-form>
+          </el-col>
+
+          <h4 class="form-header"> </h4>
+
+          <div slot="footer" class="dialog-footer">
+            <!-- <el-button type="primary" @click="submitDataScope6">淇� 瀛�</el-button> -->
+            <el-button @click="cancelData">鍙� 娑�</el-button>
+          </div>
+
+        </el-dialog>
 
     <!-- 鍒嗛厤瑙掕壊鏁版嵁鏉冮檺瀵硅瘽妗� -->
     <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
 
+    </el-dialog>
+    <el-dialog  :visible.sync="dialogVisible">
+      <img w-full :src="dialogImageUrl"    style="width: 100%; height: 100%" alt="Preview Image" />
     </el-dialog>
 
   </div>
@@ -161,8 +347,9 @@
 
 
 //鍦╯ystem/note/index.js涓鍏ユ帴鍙e嚱鏁�  --鎺ュソ浜�
-import {addNote,listNote,updateNote,delNote, uploadPic} from "@/api/allmemo/index";
+import {addNote,listNote,updateNote,delNote, uploadPic,download} from "@/api/allmemo/index";
 import { TimeSelect } from "element-ui";
+import {blobValidate} from "@/utils/ruoyi";
 import {addAutobiography, updateAutobiography} from "@/api/self";
 
 export default {
@@ -170,13 +357,21 @@
   dicts: ['sys_normal_disable'],
   data() {
     return {
-      // dialogImageUrl: '',
-      // dialogVisible: false,
+      no:true,
+      dialogImageUrl: '',
+      dialogVisible: false,
       isEdit1:false,
       // 閬僵灞�
       disabled: false,
       loading: true,
-      formData:[],
+      formData:{
+        id:undefined,
+        content: undefined,
+        happenTime: undefined,
+        fid:2007,
+        cid:undefined,
+        url:''
+      },
       // 閫変腑鏁扮粍
       ids: [],
       id:undefined,
@@ -200,6 +395,7 @@
       title: "",
       // 鏄惁鏄剧ず寮瑰嚭灞�
       open: false,
+      open2: false,
       // 鏄惁鏄剧ず寮瑰嚭灞傦紙鏁版嵁鏉冮檺锛�
       openDataScope: false,
       menuExpand: false,
@@ -311,7 +507,20 @@
     	_this.formDat.url = _this.formDat.url+","+response.fileNames
     	_this.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛!");
     	  })
+            // const cid = this.$route.params && this.$route.params.id;
+            // this.getList(2007,cid);
 
+    },
+    // 鏌ョ湅鏂囦欢
+    handleFileCardPreview(file){
+      this.dialogFileUrl = file.url;
+      if(this.dialogFileUrl.includes("47.93.189.255")==true)
+        this.dialogFileUrl = this.dialogFileUrl.replace("47.93.189.255","www.bendudu.com")
+      //alert(this.dialogFileUrl)
+      const Base64 = require('js-base64').Base64
+
+      this.desurl = process.env.VUE_APP_BASE_OTHER_API+"preview/"+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
+      let myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
     },
     picUpload()
     {
@@ -329,19 +538,30 @@
       this.formDat.cid = parseInt(cid) ;
     	let _this = this
 
-        uploadPic(formData).then(response => {
+    if(this.isEdit1){
+      uploadPic(formData).then(response => {
 
           _this.formDat.url = _this.formDat.url+","+response.fileNames
-      alert(_this.formDat.url)
-    	  _this.uploadFileList = []
+      // alert(_this.formDat.url)
+        _this.uploadFileList = []
         console.log(_this.formDat)
         updateNote(_this.formDat).then(response => {
-          alert(984)
-    	  _this.$modal.msgSuccess("鍥剧墖涓婁紶鎴愬姛");
-
+          alert('淇敼')
+        _this.$modal.msgSuccess("鍥剧墖涓婁紶鎴愬姛");
         })
+      });
+    }else{
+      uploadPic(formData).then(response => {
+          _this.formDat.url = _this.formDat.url+","+response.fileNames
+      // alert('鏂板')
+      // alert(_this.formDat.url)
+        _this.uploadFileList = []
+        _this.$modal.msgSuccess("鍥剧墖涓婁紶鎴愬姛");
 
       });
+    }
+
+
             console.log(this.formDat,'formDatformDatformDatformDat')
     },
 
@@ -421,13 +641,43 @@
       this.formDat.id = row.id;
       this.formDat.happenTime = row.happenTime;
       this.formDat.content = row.content;
+      this.formDat.url = row.url
       this.open = true;
-      console.log(this.formDat)
+      //console.log(this.formDat)
+      let paths = this.formDat.url.split(",");
+      let _this = this
+      _this.fileList = []
+      _this.fileListOther = []
+      for(let i = 0; i < paths.length; i++)
+      {
+        if(paths[i]!="") {
+
+            let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
+        //	alert(pth)
+            if (_this.fot.includes(pth) === true)
+        	{
+        		if(paths[i][0]=="/")
+              _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
+        	  else
+        	     _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
+        	  }
+            else {
+              let nms = paths[i].split("\/")
+              let nm = nms[nms.length - 1]
+        	  if(paths[i][0]=="/")
+              _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
+        		else
+        		_this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
+
+        	}
+          }
+      }
       },
 
     // 鍙栨秷鎸夐挳
     cancelData() {
       this.open = false;
+      this.open2=false;
       this.reset();
     },
 
@@ -452,27 +702,140 @@
 
       listNote(cid, 2007).then(response => {
           this.memoList = response.data;
-          console.log(response,'11111111111111111111111')
+          // console.log(response,'formDataformDataformDataformDataformData')
           this.loading = false;
         }
       );
     },
-    // handleRemove(file) {
-    //   for(let i = 0; i < this.fileListOther.length; i++)
-    //   {
-    //     if(this.fileListOther[i].url==file.url)
-    //       this.$delete(this.fileListOther,i);
-    //   }
-    // },
-    handleRemove(file) {
-        for(let i = 0; i < this.fileList.length; i++)
+handleRemove(file) {
+      for(let i = 0; i < this.fileList.length; i++)
+      {
+        if(this.fileList[i].url==file.url)
         {
-          if(this.fileList[i].url==file.url)
-          {
-            this.$delete(this.fileList,i);
-        		 this.$delete(this.uploadFileList,i);
-        		 }
+          this.$delete(this.fileList,i);
+      		 this.$delete(this.uploadFileList,i);
+      		 }
+
+      		//alert(this.formData.url)
+
+      }
+    },
+    handleRemoveFile2(file) {
+      this.formData=this.formDat
+      //鍒よ鏄惁鏄箣鍓嶇殑鍥剧墖
+      let res = false
+        for(let i = 0; i < this.fileListOther.length; i++)
+        {
+          if(this.fileListOther[i].url==file.url)
+    	{
+    		if(this.fileListOther[i].res==false)
+    			res = true
+    		else
+    		{
+    			this.$delete(this.uploadFileList1, Math.abs(i - this.uploadFileList1.length-1))
+    		}
+            this.$delete(this.fileListOther,i);
+
+    	}
         }
+
+      let ul = ""
+      this.fileList.map(function (elem){
+      		if(elem.res==false)
+      			ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
+      })
+      let uls = ""
+      this.fileListOther.map(function (elem){
+        if(elem.res==false)
+      			uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
+      })
+      this.formData.url = ul+","+uls;
+    //  alert(this.formData.url)
+      if(res==true){
+    	  updateNote(this.formData).then(response => {
+    		this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+    		// this.open = false;
+
+    	  });
+      }
+      },
+    handleRemove2(file) {
+      this.formData=this.formDat
+			  //鍒ゆ柇鏄惁鏄箣鍓嶇殑鍥剧墖
+	  let res = false
+      for(let i = 0; i < this.fileList.length; i++)
+      {
+        if(this.fileList[i].url==file.url)
+		{
+			//鍘熸潵鍥惧儚鏍囪涓篺alse
+			//alert(this.fileList[i].res)
+		  if(this.fileList[i].res==false)
+			res = true
+		  else
+		  {
+			 this.$delete(this.uploadFileList, Math.abs(i - this.uploadFileList.length-1))
+			 }
+          this.$delete(this.fileList,i);
+      }
+	  }
+	  let ul = ""
+	  this.fileList.map(function (elem){
+		if(elem.res==false)
+			ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
+	  })
+	  let uls = ""
+	  this.fileListOther.map(function (elem){
+	    if(elem.res==false)
+			uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
+	  })
+	  this.formData.url = ul+","+uls;
+    console.log(this.fileList,'fileListfileListfileListfileListfileListfileList')
+    console.log(this.fileListOther,'uploadFileListuploadFileListuploadFileListuploadFileList')
+    console.log(this.formData,'formDataformDataformDataformDataformDataformDataformData222222222')
+	  if(res==true){
+		  updateNote(this.formData).then(response => {
+			this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+		  });
+	  }
+
+    },
+      handleCheck(row){
+      const id = row.id;
+      this.formDat.cid = row.cid;
+      this.formDat.id = row.id;
+      this.formDat.happenTime = row.happenTime;
+      this.formDat.content = row.content;
+      this.formDat.url = row.url
+      this.open2 = true;
+      //console.log(this.formDat)
+      let paths = this.formDat.url.split(",");
+      let _this = this
+      _this.fileList = []
+      _this.fileListOther = []
+      for(let i = 0; i < paths.length; i++)
+      {
+        if(paths[i]!="") {
+
+            let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
+        //	alert(pth)
+            if (_this.fot.includes(pth) === true)
+        	{
+        		if(paths[i][0]=="/")
+              _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
+        	  else
+        	     _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
+        	  }
+            else {
+              let nms = paths[i].split("\/")
+              let nm = nms[nms.length - 1]
+        	  if(paths[i][0]=="/")
+              _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
+        		else
+        		_this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
+
+        	}
+          }
+      }
       },
     handleRemoveFile(file) {
       for(let i = 0; i < this.fileListOther.length; i++)
@@ -510,6 +873,10 @@
       if (this.$refs.menu != undefined) {
         this.$refs.menu.setCheckedKeys([]);
       }
+      // this.fileList = [],
+      // this.fileListOther = [],
+      // this.formDat.happenTime=undefined,
+      // this.formDat.content=undefined,
       this.menuExpand = false,
         this.menuNodeAll = false,
         this.deptExpand = true,
@@ -548,9 +915,36 @@
       this.single = selection.length!=1
       this.multiple = !selection.length
     },
+    // 涓嬭浇鎸夐挳
+    handleDownload(url) {
+      var formData = {'path':"/"+url.replace(process.env.VUE_APP_BASE_TRUE_API,"")};
+
+      let lens = formData.path.split(".")
+      let suffix = lens[lens.length-1]
+      download(formData).then(async (response) => {
+        const isLogin = await blobValidate(response);
+        let nt = new Date().getTime()
+        let filename = 'familyevent_'+nt+'.'+suffix
+        const blob = new Blob([response])
+        saveAs(blob, filename)
+      })
+    },
 
     /** 鏂板鎸夐挳鎿嶄綔 */
     handleAdd() {
+      for(let i=0;i<2;i++){
+        //娓呯┖formDat瀵硅薄鐨勬暟鎹�
+        Object.keys(this.formDat).forEach(key => {
+          this.formDat[key] = '';
+        });
+        for(let i = 0; i <= this.fileList.length; i++)
+        {
+          this.handleRemove(this.fileList[0]);
+        }
+        for(let i = 0; i < this.fileListOther.length; i++){
+          this.handleRemoveFile(this.fileListOther[0]);
+        }
+      }
       this.reset();
       this.isEdit1=false;
       this.open = true;
@@ -690,6 +1084,9 @@
   background: #FFEFF2;
 
 }
+.hide .el-upload--picture-card{
+  display:none;   /* 涓婁紶鎸夐挳闅愯棌 */
+}
 
 .button1 {
   background:center no-repeat url('../../assets/icons/add1.png') ;

--
Gitblit v1.9.1