From 6afb98b81fa4b4b3223d53d42a891fb89862d38b Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期一, 14 八月 2023 16:36:29 +0800
Subject: [PATCH] 新增家谱图,完善各模块新增时的电子文件上传功能,在上传期间显示正在上传

---
 ruoyi-ui/src/views/self/show.vue |  129 ++++++++++++++++++++++++++++++++-----------
 1 files changed, 96 insertions(+), 33 deletions(-)

diff --git a/ruoyi-ui/src/views/self/show.vue b/ruoyi-ui/src/views/self/show.vue
index 9bd7f95..df1df64 100644
--- a/ruoyi-ui/src/views/self/show.vue
+++ b/ruoyi-ui/src/views/self/show.vue
@@ -118,37 +118,50 @@
       </div>
       <div style="padding-left:30px;padding-top:30px">
         <el-col :span="6" :data="individualList">
-          <div class="block" :model="individualList" >
-            <el-col v-model="individualList.img" prop="img">
-              <el-avatar shape="square" style="width: 200px;height: 150px;" >
+          <div class="block" :model="individualList">
+            <div v-if="!isEditing">
+              <el-avatar shape="square" style="width: 200px; height: 150px;">
                 <el-image
-                  :src="'http://47.93.189.255:8080/'+ individualList.img"
+                  class="el-upload-list__item-thumbnail"
+                  v-if="!individualList.img"
+                  src="default-avatar-url"
                   :fit="fit"
-                  style="width: 100%;height: 100%;"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+                <el-image
+                  v-else
+                  :src="'http://47.93.189.255:8080/' + individualList.img"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
                 ></el-image>
               </el-avatar>
-<!--              <el-upload-->
-<!--                action="#"-->
-<!--                list-type="picture-card"-->
-<!--                multiple-->
-<!--                :http-request="requestUpload"-->
-<!--                :file-list="fileList"-->
-<!--              >-->
-<!--                <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: 147px; height: 147px"-->
-<!--                    fit="cover"-->
-<!--                    :preview-src-list="[file.url]"-->
-<!--                  >-->
-<!--                </div>-->
-<!--              </el-upload>-->
-         </el-col>
+            </div>
+            <el-upload v-else
+                       class="upload-demo"
+                       action="#"
+                       :auto-upload="false"
+                       :http-request="requestUpload"
+                       :limit="1"
+                       :file-list="fileList"
+            >
+              <el-avatar shape="square" style="width: 200px; height: 150px;">
+                <el-image
+                  class="el-upload-list__item-thumbnail"
+                  v-if="!individualList.img"
+                  src="default-avatar-url"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+                <el-image
+                  v-else
+                  :src="'http://47.93.189.255:8080/' + individualList.img"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+              </el-avatar>
+            </el-upload>
+            <div class="edit-text" v-if="isEditing" @click="uploadImage">鐐瑰嚮鏇存崲鍥剧墖</div>
           </div>
-
         </el-col>
 
       </div>
@@ -278,13 +291,13 @@
           <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" sortable width="250" align="center" >
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startDate }}</template>
-              <template v-else><el-input v-model="scope.row.startDate"></el-input></template>
+              <template v-else><el-input v-model="scope.row.startDate" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃ユ湡" prop="endDate" sortable width="250" align="center" >
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endDate }}</template>
-              <template v-else><el-input v-model="scope.row.endDate"></el-input></template>
+              <template v-else><el-input v-model="scope.row.endDate" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content" sortable width="350" align="center" >
@@ -404,13 +417,13 @@
           <el-table-column label="寮�濮嬫椂闂�" prop="startTime"  sortable width="230" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
-              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
+              <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃堕棿" prop="endTime"  sortable width="230" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
-              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
+              <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
@@ -439,13 +452,13 @@
           <el-table-column label="寮�濮嬫椂闂�" prop="startTime"  sortable width="200" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
-              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
+              <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃堕棿" prop="endTime"  sortable width="200" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
-              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
+              <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡"></el-input></template>
             </template>
           </el-table-column>
           <el-table-column label="鎵�鍒板浗瀹舵垨鑰呭湴鍖�" prop="destination" sortable width="300" align="center" >
@@ -733,7 +746,7 @@
       //涓汉淇℃伅鏁版嵁
       individualList:[],
       isEditing: false,
-      // fit:['fill'],
+      fit:['cover'],
       // 涓汉缁忓巻鏁版嵁
       experienceList: [],
       // isEdit:true,
@@ -1001,6 +1014,11 @@
         this.formDat[key] = '';
       });
     },
+    handleUploadSuccess(response, file) {
+      // 澶勭悊鏂囦欢涓婁紶鎴愬姛鍚庣殑鍥炶皟
+      this.individualList.img = response.url;
+    },
+
     //涓嬫媺
     handleChange(activeNames) {
       // console.log(val);
@@ -1409,6 +1427,7 @@
               this.btn=false
               this.isShow_2=false
               this.isShow=true
+              this.isEditing = false
             });
           } else {
             this.$modal.msgSuccess("淇敼澶辫触");
@@ -1419,6 +1438,50 @@
       // 鍒锋柊椤甸潰
       // window.location.reload();
     },
+    uploadImage() {
+      const inputElement = document.createElement("input");
+      inputElement.type = "file";
+      inputElement.accept = "image/*";
+      inputElement.style.display = "none";
+      document.body.appendChild(inputElement);
+
+      inputElement.addEventListener("change", () => {
+        const file = inputElement.files[0];
+        if (file) {
+          const formData = new FormData();
+          formData.append("image", file);
+
+          // 璋冪敤uploadPic鎺ュ彛涓婁紶鍥剧墖
+          axios.post("/common/upload", formData, {
+            headers: {
+              "Content-Type": "multipart/form-data"
+            }
+          }).then(response => {
+            // 涓婁紶鎴愬姛锛岃幏鍙栨柊鍥剧墖鐨刄RL
+            const newImageUrl = response.data.img;
+
+            // 鍋囪individualList鏄竴涓璞★紝鏇存柊individualList.img
+            this.individualList.img =   newImageUrl;
+
+            // 鍋囪fileList鏄竴涓暟缁勶紝鏇存柊fileList涓搴旂殑鍥剧墖URL
+            // const index = this.fileList.findIndex(item => item.id === fileId);
+            // this.fileList[index].url = newImageUrl;
+
+            // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚�
+            document.body.removeChild(inputElement);
+            inputElement.removeEventListener("change", null);
+          }).catch(error => {
+            console.error("涓婁紶澶辫触:", error);
+            // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚�
+            document.body.removeChild(inputElement);
+            inputElement.removeEventListener("change", null);
+          });
+        }
+      });
+
+      // 瑙﹀彂鐐瑰嚮浜嬩欢锛屾樉绀烘枃浠堕�夋嫨瀵硅瘽妗�
+      inputElement.click();
+    },
     //涓昏缁忓巻
     saveRowExperienceList(row) {
       this.$refs['elForm'].validate(valid => {

--
Gitblit v1.9.1