待处理事项

src/style/common.less

@@ -1,19 +1,28 @@
 @borderColor: #ebebeb;
 @fontBlue: #3ba1ff;
-@headerHeight:60px;
+@headerHeight: 60px;
-.boderAndRadius{
+
+.boderAndRadius {
   border: 1px solid @borderColor;
-  border-radius:6px ;
+  border-radius: 6px;
   background: #fff;
 }
+
 .commonFont {
   font-size: 16px;
   color: #52575b;
 }
+
+.comonPromptFont {
+  font-size: 14px;
+  color: #b1b1b1;
+}
+
 .common-main {
   background-color: white;
   padding: 40px 20px;
 }
+
 .noSelect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -22,7 +31,8 @@
   -ms-user-select: none;
   user-select: none;
 }
-.center(){
+
+.center() {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,4 +44,4 @@
 // }
 // ::-webkit-scrollbar {
 //   width: 0 !important;height: 0;
-// }
+// }

src/views/kpi/workbench/initiateAssessment/index.vue

@@ -140,7 +140,7 @@
             </el-table>
             <div
               v-else
-              class="popup-empty"
+              class="popup-empty comonPromptFont"
             >
               <img
                 src=""
@@ -292,7 +292,7 @@ export default {
       apiInitiateAssessmentInfo(para).then(res => {
         this.dialogSendVisible = false
         console.log('发起考核成功', res)
-        this.$router.push({name: 'assessment-stepList', query: {id: res.data.id, name: 'assessment-homeList'}})
+        this.$router.push({ name: 'assessment-stepList', query: { id: res.data.id, name: 'assessment-homeList' } })
         this.$message({
           message: res.msg,
           type: 'success'
@@ -340,34 +340,34 @@ export default {
 </script>
 <style lang="less" scoped>
 .initiate-assessment {
-    min-height: 600px;
+  min-height: 600px;
-    .title {
+  .title {
-        margin-bottom: 25px;
+    margin-bottom: 25px;
+  }
+  .choose-group {
+    margin-top: 200px;
+  }
+  .line-space {
+    margin-top: 20px;
+  }
+  .popup {
+    &-search {
+      margin-bottom: 20px;
     }
-    .choose-group {
+    &-empty {
-        margin-top: 200px;
+      padding-top: 100px;
+      height: 500px;
+      width: 410px;
+      font-size: 14px;
+      text-align: center;
+      display: block;
+      align-content: center;
+      justify-content: center;
     }
-    .line-space {
-        margin-top: 20px;
-    }
-    .popup {
-        &-search {
-            margin-bottom: 20px;
-        }
-        &-empty {
-            padding-top: 100px;
-            height: 500px;
-            width: 410px;
-            font-size: 14px;
-            text-align: center;
-            display: block;
-            align-content: center;
-            justify-content: center;
-        }
 
-        &-footer-left {
+    &-footer-left {
-            color: @fontBlue;
+      color: @fontBlue;
-        }
     }
+  }
 }
 </style>

src/views/kpi/workbench/todo/index.vue

@@ -14,36 +14,46 @@
         </el-menu>
       </div>
       <div class="todo-content-right">
-        <!-- <div v-if=""></div> -->
+        <div v-if="selectedTableList.length > 0">
-        <el-table
+          <el-table
-          :data="waitTableList"
+            :data="waitTableList"
-          :show-header="false"
+            @row-click="handleRowClick"
-          style="border-top: 1px solid #ebebeb;"
+            :show-header="false"
-          max-height="500"
+            style="border-top: 1px solid #ebebeb;"
-        >
+            max-height="500"
-          <el-table-column
-            prop="imgStr"
-            width="100"
-          ></el-table-column>
-          <el-table-column prop="name"></el-table-column>
-          <el-table-column
-            width="200"
-            align="right"
           >
-            <template slot-scope="scope">
+            <el-table-column
-              {{scope.row.dateTime}}<i class="el-icon-arrow-right"></i>
+              prop="imgStr"
-            </template>
+              width="100"
-          </el-table-column>
+            ></el-table-column>
-        </el-table>
+            <el-table-column prop="name"></el-table-column>
-        <el-pagination
+            <el-table-column
-            :hide-on-single-page="true"
+              width="200"
-            :current-page.sync="rqParameter.currPage"
+              align="right"
-            :page-size="rqParameter.pageSize"
+            >
-            :total="rqParameter.totalCount"
+              <template slot-scope="scope">
-            :page-count="rqParameter.totalPage"
+                {{scope.row.dateTime}}<i class="el-icon-arrow-right"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :hide-on-single-page="false"
+            :current-page.sync="pageSelectedInfo.currPage"
+            :page-size="pageSelectedInfo.pageSize"
+            :total="pageSelectedInfo.totalCount"
+            :page-count="pageSelectedInfo.totalPage"
             @current-change="handleCurrentChange"
             layout="total, prev, pager, next, jumper"
-          ></el-pagination>      </div>
+          ></el-pagination>
+        </div>
+        <div
+          v-else
+          class="todo-content-right-empty comonPromptFont"
+        >
+          <img src="ssss" />
+          <div>暂无代办</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -56,14 +66,32 @@ export default {
     return {
       activeIndex: '0',
       waitCount: 0,
-      rqParameter: {
+      // 选中项
+      selectedTableList: [],
+      pageSelectedInfo: {
         currPage: 1,
         pageSize: 20,
         status: 0,
         totalCount: 1,
         totalPage: 1
       },
-      waitTableList: [{ imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' }, { imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' }, { imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' }]
+      // 待处理
+      waitTableList: [
+        { imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' },
+        { imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' },
+        { imgStr: '', name: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩', dateTime: '2020-22-22 02:22:22' }
+      ],
+      // 已处理
+      pageWaitInfo: {},
+      processedTableList: [],
+      pageProcessedInfo: {
+        currPage: 1,
+        pageSize: 20,
+        status: 0,
+        totalCount: 1,
+        totalPage: 1
+      }
+
     }
   },
   components: {
@@ -72,44 +100,55 @@ export default {
   computed: {},
   beforeMount () { },
   mounted () {
-    this.activeIndex = '0'
-    this.rqParameter = {
-      currPage: 1,
-      pageSize: 20,
-      status: this.activeIndex,
-      totalCount: 1,
-      totalPage: 1
-    }
     this.handleGetList()
   },
   methods: {
     handleGetList () {
-      apiGetWaitList(this.rqParameter).then(res => {
+      apiGetWaitList(this.pageSelectedInfo).then(res => {
-        this.rqParameter.currPage = res.data.currPage
+        this.pageSelectedInfo.currPage = res.data.currPage
-        this.rqParameter.totalCount = res.data.totalCount
+        this.pageSelectedInfo.totalCount = res.data.totalCount
-        this.rqParameter.totalPage = res.data.totalPage
+        this.pageSelectedInfo.totalPage = res.data.totalPage
         if (this.activeIndex === 0) {
           // 待处理事项
           this.waitCount = res.data.totalCount
         }
-        this.waitTableList = res.data.list
+        this.selectedTableList = res.data.list
         console.log('待处理', res)
       })
     },
-    handleMenuSeledt () {
+    handleMenuSeledt (val) {
-      this.rqParameter = {
+      console.log('index ======', this.activeIndex)
-        currPage: 1,
+      console.log(val)
-        pageSize: 20,
+      if (this.activeIndex !== val) {
-        status: this.activeIndex,
+        console.log('menu 切换')
-        totalCount: 1,
+        // 待处理 已处理 数据切换
-        totalPage: 1
+        if (val === '0') {
+          console.log('menu 0')
+          this.processedTableList = this.selectedTableList
+          this.pageProcessedInfo = this.pageSelectedInfo
+          this.selectedTableList = this.waitTableList
+          this.pageSelectedInfo = this.pageWaitInfo
+        } else {
+          console.log('menu 1')
+          this.waitTableList = this.selectedTableList
+          this.pageWaitInfo = this.pageSelectedInfo
+          this.selectedTableList = this.processedTableList
+          this.pageSelectedInfo = this.pageProcessedInfo
+        }
+        // 如果是第一页 刷新
+        console.log(this.pageSelectedInfo)
+        if (this.pageSelectedInfo.currPage === 1) {
+          this.handleGetList()
+        }
       }
-      this.waitTableList = []
+      this.activeIndex = val
-      this.handleGetList()
     },
     handleCurrentChange (val) {
-      this.rqParameter.currPage = val
+      // 页面变更
-      this.handleGetList()
+      this.pageSelectedInfo.currPage = val
+    },
+    handleRowClick (row) {
+      this.$router.push({ name: 'assessment-stepList', query: { id: row.id } })
     }
   },
   watch: {}
@@ -122,18 +161,39 @@ export default {
 .todo {
   &-content {
     width: 1252px;
-    // min-height: 537px;
+    min-height: 278px;
     padding: 28px;
     display: flex;
     &-left {
       width: 200px;
       float: left;
+      .el-menu-item.is-active {
+        background-color: #ecf4ff !important;
+        border-left: 3px solid #409eff;
+        color: #999;
+        span {
+          color: #999 !important;
+        }
+      }
     }
     &-right {
       // border-left: 2px solid @borderColor;
       // padding-left: 20px;
       padding: 20px;
       flex: 1;
+      .el-pagination {
+        text-align: right;
+        margin-top: 20px;
+      }
+      &-empty {
+        padding-top: 20px;
+        img {
+          width: 100px;
+          height: 100px;
+        }
+        height: 100%;
+        text-align: center;
+      }
     }
   }
 }