更新 DiskShare.vue 分享页面

src/views/disk/DiskFile.vue

@@ -90,6 +90,7 @@
       </div>
       <el-pagination
         background
+        hide-on-single-page
         :small="screenWidth <= 768"
         layout="prev, pager, next"
         :page-size="pageSize"

src/views/disk/DiskShare.vue

@@ -1,6 +1,75 @@
 <template>
-  <div>
-    <span>disk share</span>
+  <div style="padding-right: 5px">
+    <el-table
+      ref="multipleTable"
+      :data="dataList"
+      :show-header="true"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="albumName"
+        label="合集名"
+      />
+      <el-table-column
+        prop="shareAt"
+        label="分享时间"
+      />
+      <el-table-column
+        prop="expireAt"
+        label="有效期"
+      />
+      <el-table-column
+        label="被分享用户"
+      >
+        <template slot-scope="scope">
+          <span style="color: red">{{ scope.row.num }} 位</span>
+          <el-button
+            type="primary"
+            size="small"
+            @click="getShareToList(scope.row)"
+          >
+            查看
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      hide-on-single-page
+      :small="screenWidth <= 768"
+      layout="prev, pager, next"
+      :page-size="pageSize"
+      :current-page="currentPage"
+      :total="totalSize"
+      @current-change="handleCurrentChange"
+      @prev-click="handleCurrentChange"
+      @next-click="handleCurrentChange"
+    />
+
+    <el-dialog
+      :visible.sync="showShareToDialog"
+      width="50%"
+      center
+    >
+      <el-table
+        :data="shareToList"
+        :show-header="true"
+        style="width: 50%"
+      >
+        <el-table-column
+          prop="username"
+          label="用户名"
+        />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="onCancelShare(scope.row)"
+            >取消分享</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -10,6 +79,19 @@ export default {
   name: 'DiskShare',
   data() {
     return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      // ****************************************************************************************************************
+      showShareToDialog: false,
+      shareToList: [],
+      createFolderForm: {
+        pid: '0',
+        folderName: null
+      }
     }
   },
   created() {
@@ -17,7 +99,19 @@ export default {
     this.getData()
   },
   methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+    },
     getData() {
+    },
+    getShareToList(row) {
+      const shareId = row.shareId
+    },
+    onCancelShare(row) {
+      const jsonData = {}
+      jsonData.shareId = row.shareId
+      jsonData.userId = row.userId
     }
   }
 }