修改样式

src/api/table.js

@@ -9,14 +9,14 @@ export function getList(params) {
   })
 }
 // 获取参会人员
-export function joinUser(uid) {
+export function joinUser(uid, pageNo, pageSize) {
   return request({
     url: `/wx/joinUser`,
     method: 'get',
     params: {
       uid,
-      pageNo: '',
-      pageSize: '',
+      pageNo,
+      pageSize,
       taskId: ''
     }
   })
@@ -47,9 +47,17 @@ export function getViewLogList(pageNo, pageSize) {
   return request({
     url: `/wx/viewLog`,
     method: 'get',
-    data: {
+    params: {
       pageNo,
       pageSize
     }
   })
 }
+// 批量删除
+export function deleteList(joinUser) {
+  return request({
+    url: `wx/joinUser/delete`,
+    method: 'put',
+    data: joinUser
+  })
+}

src/router/index.js

@@ -74,18 +74,18 @@ export const constantRouterMap = [
     ]
   },
 
-  {
-    path: '/recycleBin',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'RecycleBin',
-        component: () => import('@/views/recycleBin/index'),
-        meta: { title: '回收站', icon: 'el-icon-delete' }
-      }
-    ]
-  },
+  // {
+  //   path: '/recycleBin',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       name: 'RecycleBin',
+  //       component: () => import('@/views/recycleBin/index'),
+  //       meta: { title: '回收站', icon: 'el-icon-delete' }
+  //     }
+  //   ]
+  // },
 
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/getters.js

@@ -14,11 +14,17 @@ const getters = {
   joinUserList: state => {
     return state.list.joinUserList
   },
+  totalSize: state => {
+    return state.list.totalSize
+  },
   fileList: state => {
     return state.list.fileList
   },
   logList: state => {
-    return state.list.logList
+    return {
+      logList: state.list.logList,
+      logSize: state.list.logSize
+    }
   }
 }
 export default getters

src/store/modules/list.js

@@ -6,7 +6,9 @@ const user = {
     uid: getToken(),
     joinUserList: [],
     fileList: [],
-    logList: []
+    logList: [],
+    totalSize: 0,
+    logSize: 0
   },
 
   mutations: {
@@ -18,16 +20,21 @@ const user = {
     },
     SET_LOGLIST: (state, data) => {
       state.logList = data.list
+      state.logSize = data.totalSize
+    },
+    SET_TOTALSIZE: (state, size) => {
+      state.totalSize = size
     }
   },
 
   actions: {
     // 获取参会人员
-    JoinUser({ commit, state }) {
+    JoinUser({ commit, state }, pageNo) {
       return new Promise((resolve, reject) => {
-        joinUser(getToken()).then(response => {
+        joinUser(getToken(), pageNo, 10).then(response => {
           const data = response.data
           commit('SET_JOINUSERLIST', data.list)
+          commit('SET_TOTALSIZE', data.totalSize)
           resolve(data)
         }).catch(error => {
           reject(error)
@@ -48,9 +55,9 @@ const user = {
       })
     },
     // 获取浏览信息
-    GetViewLogList({ commit }, pageNo, pageSize) {
+    GetViewLogList({ commit }, pageNo) {
       return new Promise((resolve, reject) => {
-        getViewLogList(pageNo, pageSize).then(response => {
+        getViewLogList(pageNo, 10).then(response => {
           const data = response.data
           commit('SET_LOGLIST', data)
           resolve(data)

src/styles/sidebar.scss

@@ -1,9 +1,14 @@
 #app {
   // 主体区域
   .main-container {
-    min-height: 100%;
     transition: margin-left .28s;
     position: relative;
+    overflow: hidden;
+    height: calc(100vh - 90px);
+    overflow-y: scroll;
+  }
+  .main-container::-webkit-scrollbar {
+    width: 0px;
   }
   // 侧边栏
   .sidebar-container {

src/views/allFile/index.vue

@@ -1,46 +1,60 @@
 <template>
   <div class="app-container">
+    <el-button :disabled="delect" class="btn" type="primary" @click="deleteList">删除</el-button>
     <el-table
       ref="multipleTable"
       :data="joinUserList"
+      :row-class-name="tableRowClassName"
       tooltip-effect="dark"
       style="width: 100%"
       @selection-change="handleSelectionChange"
       @row-click="detail">
       <el-table-column
+        :selectable="select"
         type="selection"
         width="55"/>
       <el-table-column
         :label=" '选中' +multipleSelection.length.toString() + '文件/文件夹'">
         <template slot-scope="scope">
-          <img src="@/icons/image/file_icon.png" alt="file_icon">
+          <img src="@/icons/image/file_icon.png" alt="file_icon" style="vertical-align: middle; margin-right: 10px">
+          <span>{{ scope.row.task.title }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        prop="task.title"/>
-      <el-table-column
         label="日期"
         width="160"
         show-overflow-tooltip>
         <template slot-scope="scope">{{ scope.row.task.gmtCreated }}</template>
       </el-table-column>
     </el-table>
+    <div class="page">
+      <el-pagination
+        :total="totalSize"
+        background
+        layout="prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { parseTime } from '@/utils/index'
+import { deleteList } from '@/api/table'
 
 export default {
   data() {
     return {
-      multipleSelection: []
+      multipleSelection: [],
+      delect: true
     }
   },
   computed: {
     ...mapGetters([
-      'joinUserList'
+      'joinUserList',
+      'totalSize'
     ])
   },
   created() {
@@ -48,7 +62,7 @@ export default {
   },
   methods: {
     getList() {
-      this.$store.dispatch('JoinUser').then((res) => {
+      this.$store.dispatch('JoinUser', 1, 10).then((res) => {
         console.log(res.list)
         // 格式化时间
         res.list.forEach((item, index) => {
@@ -58,23 +72,86 @@ export default {
     },
     handleSelectionChange(val) {
       this.multipleSelection = val
+      console.log(val.length)
+      if (val.length === 0) {
+        this.delect = true
+      } else {
+        this.delect = false
+      }
     },
     detail(row, event) {
       const taskId = row.task.id
       const title = row.task.title
       const name = event.target.classList[0]
+      if (row.taskJoinUser.fileStatus === 'CLOSE') {
+        return false
+      }
       if (name === 'el-checkbox__inner' || name === 'el-checkbox__original') {
         return false
       }
       this.$router.push({ path: `/fileDetail/fileDetail`, query: { 'taskId': taskId, 'title': title }})
+    },
+    handleSizeChange(page) {
+      console.log(page)
+    },
+    handleCurrentChange(page) {
+      this.$store.dispatch('JoinUser', page).then((res) => {
+        console.log(res.list)
+        // 格式化时间
+        res.list.forEach((item, index) => {
+          this.joinUserList[index].task.gmtCreated = parseTime(item.task.gmtCreated)
+        })
+      })
+    },
+    deleteList() {
+      const joinUser = []
+      this.multipleSelection.forEach(item => {
+        joinUser.push(item.taskJoinUser.id)
+      })
+      deleteList(joinUser).then(res => {
+        this.joinUserList.forEach((item, index) => {
+          joinUser.forEach(id => {
+            if (item.taskJoinUser.id === id) {
+              this.joinUserList[index].taskJoinUser.fileStatus = 'CLOSE'
+            }
+          })
+        })
+      })
+    },
+    // 更改删除的样式
+    tableRowClassName(row) {
+      if (row.taskJoinUser.fileStatus === 'CLOSE') {
+        return 'warning-row'
+      }
+      return ''
+    },
+    select(row) {
+      if (row.taskJoinUser.fileStatus === 'CLOSE') {
+        return false
+      }
+      return true
     }
   }
 }
 </script>
 
-<style scoped>
+<style>
 .line{
   text-align: center;
 }
+
+.btn {
+  float: right;
+  margin-right: 20px;
+}
+
+.page {
+  margin: 20px;
+  text-align: center;
+}
+
+.el-table .warning-row {
+  background: #FAFAFA;
+}
 </style>
 

src/views/browse/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-table
       ref="multipleTable"
-      :data="logList"
+      :data="logList.logList"
       tooltip-effect="dark"
       style="width: 100%"
       @selection-change="handleSelectionChange"
@@ -13,18 +13,24 @@
       <el-table-column
         :label="title">
         <template slot-scope="scope">
-          <img :src="(scope.row.taskFile.fileType == 'png' || scope.row.taskFile.fileType == 'jpg') ? scope.row.taskFile.path : '../../../static/fileimg/'+scope.row.taskFile.fileType+'.png'" alt="file_icon">
+          <img :src="(scope.row.taskFile.fileType == 'png' || scope.row.taskFile.fileType == 'jpg') ? scope.row.taskFile.path : '../../../static/fileimg/'+scope.row.taskFile.fileType+'.png'" alt="file_icon" style="vertical-align: middle; margin-right: 10px">
+          <span>{{ scope.row.taskFile.fileName }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        prop="taskFile.fileName"/>
-      <el-table-column
         label="日期"
         width="160"
         show-overflow-tooltip>
         <template slot-scope="scope">{{ scope.row.taskFile.gmtCreated }}</template>
       </el-table-column>
     </el-table>
+    <div class="page">
+      <el-pagination
+        :total="logList.logSize"
+        background
+        layout="prev, pager, next"
+        @current-change="handleCurrentChange"/>
+    </div>
   </div>
 </template>
 
@@ -57,12 +63,12 @@ export default {
 
   methods: {
     getFileList(taskId) {
-      this.$store.dispatch('GetViewLogList').then((res) => {
-        console.log(this.logList)
+      this.$store.dispatch('GetViewLogList', 1).then((res) => {
+        console.log(this.logList.logList)
         // 格式化时间和文件格式
         res.list.forEach((item, index) => {
-          this.logList[index].taskFile.gmtCreated = parseTime(item.taskFile.gmtCreated)
-          this.logList[index].taskFile.fileType = item.taskFile.path.slice(item.taskFile.path.lastIndexOf('.') + 1)
+          this.logList.logList[index].taskFile.gmtCreated = parseTime(item.taskFile.gmtCreated)
+          this.logList.logList[index].taskFile.fileType = item.taskFile.path.slice(item.taskFile.path.lastIndexOf('.') + 1)
         })
       })
     },
@@ -77,6 +83,16 @@ export default {
       document.body.appendChild(link)
       link.click()
       addViewLog(row.id, row.taskId)
+    },
+    handleCurrentChange(page) {
+      this.$store.dispatch('GetViewLogList', page).then((res) => {
+        console.log(this.logList.logList)
+        // 格式化时间和文件格式
+        res.list.forEach((item, index) => {
+          this.logList.logList[index].taskFile.gmtCreated = parseTime(item.taskFile.gmtCreated)
+          this.logList.logList[index].taskFile.fileType = item.taskFile.path.slice(item.taskFile.path.lastIndexOf('.') + 1)
+        })
+      })
     }
   }
 }
@@ -90,5 +106,9 @@ export default {
   width:48px;
   height: 49px;
 }
+.page {
+  margin: 20px;
+  text-align: center;
+}
 </style>
 

src/views/fileDetail/index.vue

@@ -5,25 +5,28 @@
       :data="fileList"
       tooltip-effect="dark"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
-      @row-click="detail">
+      @selection-change="handleSelectionChange">
       <el-table-column
         type="selection"
         width="55"/>
       <el-table-column
         :label="title">
         <template slot-scope="scope">
-          <img :src="(scope.row.fileType == 'png' || scope.row.fileType == 'jpg') ? scope.row.path : '../../../static/fileimg/'+scope.row.fileType+'.png'" alt="file_icon">
+          <img :src="(scope.row.fileType == 'png' || scope.row.fileType == 'jpg') ? scope.row.path : '../../../static/fileimg/'+scope.row.fileType+'.png'" alt="file_icon" style="vertical-align: middle; margin-right: 10px">
+          <span>{{ scope.row.fileName }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        prop="fileName"/>
-      <el-table-column
         label="日期"
         width="160"
         show-overflow-tooltip>
         <template slot-scope="scope">{{ scope.row.gmtCreated }}</template>
       </el-table-column>
+      <el-table-column
+        label="操作"
+        width="80">
+        <template slot-scope="scope"><i class="el-icon-download" @click="detail(scope.row)"/></template>
+      </el-table-column>
     </el-table>
   </div>
 </template>

src/views/layout/Layout.vue

@@ -2,8 +2,8 @@
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar class="sidebar-container"/>
+    <navbar/>
     <div class="main-container">
-      <navbar/>
       <app-main/>
     </div>
   </div>

src/views/layout/components/Navbar.vue

@@ -15,17 +15,19 @@
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
           <span class="name">{{ name }}</span>
-          <img src="@/icons/image/vip.png" class="vip">
+          <!--<img src="@/icons/image/vip.png" class="vip">-->
           <i class="el-icon-arrow-down"/>
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-menu slot="dropdown" class="user-dropdown" style="top: 55px">
+          <!--
           <router-link class="inlineBlock" to="/">
             <el-dropdown-item>
               Home
             </el-dropdown-item>
           </router-link>
+          -->
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">LogOut</span>
+            <span style="display:block;" @click="logout">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -87,7 +89,7 @@ export default {
     color: red;
   }
   .avatar-container {
-    height: 90px;
+    height: 40px;
     display: inline-block;
     .avatar-wrapper {
       cursor: pointer;

src/views/layout/components/Sidebar/index.vue

@@ -10,6 +10,7 @@
     >
       <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
     </el-menu>
+    <!--
     <div class="progtess-box">
       <el-progress id="pro" :percentage="30" :stroke-width="14" :text-inside="true" color="#F25557"/>
       <div class="txt">
@@ -17,6 +18,7 @@
         <span>1.96G/2.4G</span>
       </div>
     </div>
+    -->
   </el-scrollbar>
 </template>