perf: 分享操作

src/api/file-api.js

@@ -241,9 +241,9 @@ export default {
     })
   },
   // 获取分享信息
-  getShare: function(params) {
+  getShareByFileId: function(params) {
     return request({
-      url: '/get/share',
+      url: '/get/share/by/fileId',
       method: 'get',
       params
     })

src/components/ShareDialog/index.vue

@@ -28,23 +28,32 @@
                 <el-col :span="12" v-if="shareOptionConfig.shared" class="shared-expires-text">到期时间</el-col>
                 <el-col :span="1" v-if="!shareOptionConfig.shared">&nbsp</el-col>
                 <el-col v-if="shareOption.expiresDateOption === 2" :span="12" class="share-expires-data">
-                  <el-form-item prop="expiresDate">
+                  <el-date-picker
-                    <el-date-picker
+                    ref="expiresDatePicker"
-                      ref="expiresDatePicker"
+                    size="small"
-                      size="small"
+                    :clearable="false"
-                      :clearable="false"
+                    v-model="shareOption.expiresDate"
-                      v-model="shareOption.expiresDate"
+                    type="date"
-                      type="date"
+                    :placeholder="!shareOption.expiresDate ? '永久有效' : '选择到期时间'"
-                      :placeholder="!shareOption.expiresDate ? '永久有效' : '选择到期时间'"
+                    align="right"
-                      align="right"
+                    format="yyyy-MM-dd HH:mm"
-                      format="yyyy-MM-dd HH:mm"
+                    value-format="timestamp"
-                      value-format="timestamp"
+                    @change="pickerChange"
-                      @change="pickerChange"
+                    :picker-options="pickerOptions">
-                      :picker-options="pickerOptions">
+                  </el-date-picker>
-                    </el-date-picker>
-                  </el-form-item>
                 </el-col>
               </el-form-item>
+
+              <el-form-item v-if="shareOptionConfig.shared" label="">
+                <el-col :span="12" class="shared-expires-text">分享形式</el-col>
+                <el-col :span="12">
+                  <el-select size="small" v-model="shareOption.isPrivacy" style="width: 100%" @change="shareFormChange">
+                    <el-option label="公开链接" :value="false"></el-option>
+                    <el-option label="私密链接" :value="true"></el-option>
+                  </el-select>
+                </el-col>
+              </el-form-item>
+
               <el-form-item v-if="!shareOptionConfig.shared" class="share-option-form" label="分享形式" width="100">
                 <el-col :span="20">
                   <el-select size="small" v-model="shareOption.isPrivacy" style="width: 100%">
@@ -89,6 +98,7 @@
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
+        <el-button size="small" v-if="shareOptionConfig.shared" type="danger" @click="cancelShare">取消分享</el-button>
         <el-button size="small" v-if="!shareOptionConfig.shared" type="primary" @click="submitShare"
                    v-loading="generateShareLinkLoading">创建分享
         </el-button>
@@ -202,7 +212,8 @@ export default {
         shared: false,
         linkLabel: "选择有效期",
       },
-      filename: '',// 文件名
+      filename: '',
+      shareId: ''
     }
   },
   computed: {
@@ -221,23 +232,17 @@ export default {
           }).then(res => {
             this.filename = res.data.path + this.file.name
           })
-
+          this.showSharedPage(this.file)
-          this.shareOptionConfig.shared = true
-          this.shareOptionConfig.linkLabel = '分享链接'
-          this.setShareLink(this.getShareLink(this.file.shareId))
-          this.shareOption.isPrivacy = this.file.isPrivacy
-          this.shareOption.operationPermissionList = this.file.operationPermissionList || []
-          if (this.file.expireDate) {
-            this.shareOption.expiresDate = moment(this.file.expireDate).format('x')
-          }
-          this.shareOption.expiresDateOption = 2
-          this.extractionCode = this.file.extractionCode
         } else {
-          this.shareOptionConfig.shared = false
+          if (this.file.shareBase) {
-          this.shareOptionConfig.linkLabel = '选择有效期'
+            api.getShareByFileId({fileId: this.file.fileId}).then(res => {
-          this.shareOption.isPrivacy = false
+              const shareObject = res.data
-          this.shareOption.expiresDate = null
+              shareObject.shareId = res.data.id
-          this.shareOption.expiresDateOption = 1
+              this.showSharedPage(shareObject)
+            })
+          } else {
+            this.showNotSharedPage()
+          }
         }
       }
     }
@@ -256,6 +261,26 @@ export default {
           console.error(error)
         })
     },
+    showSharedPage(shareObject) {
+      this.shareOptionConfig.shared = true
+      this.shareOptionConfig.linkLabel = '分享链接'
+      this.setShareLink(this.getShareLink(shareObject.shareId))
+      this.shareOption.isPrivacy = shareObject.isPrivacy
+      this.shareOption.operationPermissionList = shareObject.operationPermissionList || []
+      if (shareObject.expireDate) {
+        this.shareOption.expiresDate = moment(shareObject.expireDate).format('x')
+      }
+      this.shareOption.expiresDateOption = 2
+      this.extractionCode = shareObject.extractionCode
+      this.shareId = shareObject.shareId
+    },
+    showNotSharedPage() {
+      this.shareOptionConfig.shared = false
+      this.shareOptionConfig.linkLabel = '选择有效期'
+      this.shareOption.isPrivacy = false
+      this.shareOption.expiresDate = null
+      this.shareOption.expiresDateOption = 1
+    },
     shareDialogClose() {
       this.shareOptionConfig.shared = false
       this.$emit('update:status', this.shareDialogVisible)
@@ -272,9 +297,31 @@ export default {
         this.shareOption.expiresDate = null
       }
       if (this.shareOptionConfig.shared) {
-        this.createShare(true)
+        this.createShare('pickerChange')
       }
     },
+    // 切换分享形式
+    shareFormChange() {
+      this.createShare('shareFormChange')
+    },
+    // 取消分享
+    cancelShare() {
+      let title = '确定要取消分享 "' + this.filename + '" 吗?'
+      this.$confirm(title, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        api.cancelShareLink({
+          userId: this.$store.state.user.userId,
+          shareId: [this.shareId]
+        }).then(() => {
+          this.$emit('onCancelShare')
+          this.shareDialogVisible = false
+          this.shareDialogClose()
+        })
+      })
+    },
     submitShare() {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -303,6 +350,9 @@ export default {
           break
         case 2:
           if (this.shareOption.expiresDate) {
+            if (typeof this.shareOption.expiresDate === 'string') {
+              this.shareOption.expiresDate = Number(this.shareOption.expiresDate)
+            }
             expireDate = this.timeFormat(this.shareOption.expiresDate)
           }
       }
@@ -317,6 +367,7 @@ export default {
         if (res.data) {
           let {shareId, extractionCode, operationPermissionList} = res.data
           this.setShareLink(this.getShareLink(shareId))
+          this.shareId = shareId
           this.generateShareLinkLoading = false
           this.shareOptionConfig.shared = true
           this.shareOption.expiresDateOption = 2
@@ -324,23 +375,38 @@ export default {
           this.extractionCode = extractionCode
           this.shareOption.operationPermissionList = operationPermissionList || []
           this.$emit('onSuccess', shareId)
-          if (update) {
+          if (update === 'pickerChange') {
-            if (!expireDate) {
+            this.afterPickerChange(shareId, expireDate)
-              expireDate = '永久有效'
+          }
-            }
+          if (update === 'shareFormChange') {
-            this.$emit("onUpdateExpireData", shareId, expireDate);
+            this.afterShareFormChange(shareId)
-            this.$message({
-              duration: 3000,
-              dangerouslyUseHTMLString: true,
-              iconClass: 'el-icon-success',
-              message: '<strong>&nbsp;&nbsp;有效期已设置为: <span>' + expireDate + '</span> </strong>'
-            });
           }
         }
       }).catch(() => {
         this.generateShareLinkLoading = false
       })
     },
+    afterPickerChange (shareId, expireDate) {
+      if (!expireDate) {
+        expireDate = '永久有效'
+      }
+      this.$emit("onUpdateExpireData", shareId, expireDate);
+      this.$message({
+        duration: 3000,
+        dangerouslyUseHTMLString: true,
+        iconClass: 'el-icon-success',
+        message: '<strong>&nbsp;&nbsp;有效期已设置为: <span>' + expireDate + '</span> </strong>'
+      });
+    },
+    afterShareFormChange(shareId) {
+      this.$emit("onUpdateShareForm", shareId, this.shareOption.isPrivacy);
+      this.$message({
+        duration: 3000,
+        dangerouslyUseHTMLString: true,
+        iconClass: 'el-icon-success',
+        message: '<strong>&nbsp;&nbsp;链接已设置为: <span>' + (this.shareOption.isPrivacy ? '私密链接' : '公开链接') + '</span> </strong>'
+      });
+    },
     // 复制分享链接
     copyShareLink(msg) {
       let clipboard = new Clipboard('.tag-share-link')
@@ -370,7 +436,7 @@ export default {
 
 <style lang="scss" scoped>
 
-> > > .el-dialog {
+>>> .el-dialog {
   max-width: 460px;
 
   .el-dialog__title {
@@ -395,7 +461,7 @@ export default {
     display: none;
   }
 
-  .share-icon-font > > > .svg-icon {
+  .share-icon-font >>> .svg-icon {
     font-size: 8rem;
   }
 }
@@ -407,22 +473,22 @@ export default {
 
 .share-option {
 
-  > > > .el-form-item--mini.el-form-item {
+  >>> .el-form-item--mini.el-form-item {
     margin-bottom: 10px;
   }
 
   .share-expires-data {
-    > > > .el-input__inner {
+    >>> .el-input__inner {
       cursor: pointer;
       padding-right: 0;
     }
 
-    > > > .el-date-editor.el-input {
+    >>> .el-date-editor.el-input {
       width: 100%;
     }
   }
 
-  > > > .el-form-item__label {
+  >>> .el-form-item__label {
     text-align: left;
     line-height: 32px;
   }
@@ -434,21 +500,20 @@ export default {
   }
 }
 
-> > > .dialog-footer {
+>>> .dialog-footer {
   .el-loading-spinner .circular {
     width: 25px !important;
   }
 }
 
 .share-link {
-  margin-top: -10px;
   margin-bottom: 25px;
 
   .share-link-code {
     width: 130px;
     margin-top: 10px;
 
-    > > > .el-input-group__prepend {
+    >>> .el-input-group__prepend {
       padding: 0 10px;
       font-weight: 500;
     }
@@ -462,7 +527,7 @@ export default {
     font-size: 1.5rem;
   }
 
-  > > > .el-input__inner {
+  >>> .el-input__inner {
     background-color: #84858d14;
     text-align: center;
     padding: 0 10px;

src/components/ShowFile/ShowFile.vue

@@ -834,6 +834,7 @@
       :file.sync="shareDialogObject"
       :status.sync="shareDialogVisible"
       @onSuccess="shareSuccess"
+      @onCancelShare="onCancelShare"
     ></share-dialog>
     <el-dialog
       class="new-text-file-dialog"
@@ -4009,12 +4010,20 @@ export default {
       this.shareDialogVisible = true
     },
     shareSuccess(shareBase) {
+      this.updateRowContextData()
+      this.rowContextData.shareBase = shareBase
+      this.rowContextData.isShare = true
+    },
+    onCancelShare() {
+      this.updateRowContextData()
+      delete this.rowContextData.shareBase
+      delete this.rowContextData.isShare
+    },
+    updateRowContextData() {
       // 这3行代码是为了让vue刷新数据
       const isFavorite = this.rowContextData.isFavorite
       this.rowContextData.isFavorite = !isFavorite
       this.rowContextData.isFavorite = isFavorite
-      this.rowContextData.shareBase = shareBase
-      this.rowContextData.isShare = true
     },
     downloadFile() {
       let fileIds = []

src/views/share/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <share-dialog :file.sync="shareDialogObject" :status.sync="shareDialogVisible" @onUpdateExpireData="onUpdateExpireData"></share-dialog>
+    <share-dialog :file.sync="shareDialogObject" :status.sync="shareDialogVisible" @onUpdateExpireData="onUpdateExpireData" @onUpdateShareForm="onUpdateShareForm"></share-dialog>
     <!--list布局-->
     <div v-show="fileList.length > 0" :style="{'width':'100%','height': clientHeight+'px'}">
     <pl-table
@@ -138,7 +138,7 @@
           header-align="left"
         >
           <template slot-scope="scope">
-            <span>{{expireInfo(scope.row)}}</span>
+            <span :style="{color: expireColor(scope.row)}">{{expireInfo(scope.row)}}</span>
           </template>
         </pl-table-column>
       </template>
@@ -271,6 +271,19 @@
           return '永久有效'
         }
       },
+      expireColor(row) {
+        if (row.expireDate) {
+          let currentTime = new Date();
+          let targetTime = new Date(row.expireDate);
+          if (currentTime > targetTime) {
+            return '#F56C6C'
+          } else {
+            return '#606266'
+          }
+        } else {
+          return '#67C23A'
+        }
+      },
       // 请求之前的准备
       beforeLoadData(onLoad){
         if (onLoad) {
@@ -474,6 +487,12 @@
         share.expireDate = expireDate
         this.fileList.splice(index, 1, share)
       },
+      onUpdateShareForm(shareId, isPrivacy) {
+        let index = this.fileList.findIndex(item => item.id === shareId)
+        let share = this.fileList[index]
+        share.isPrivacy = isPrivacy
+        this.fileList.splice(index, 1, share)
+      }
     }
   }
 </script>