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

<!--  -->
<template>
  <div class="todo commonFont">
    <small-nav />
    <div class="todo-content boderAndRadius">
      <div class="todo-content-left">
        <el-menu
          @select="handleMenuSeledt"
          :default-active="activeIndex"
          style=" width: 200px; height: 100%;"
        >
          <el-menu-item index="0">待处理{{waitCount>0?'（' +waitCount + '）':''}}</el-menu-item>
          <el-menu-item index="1">已处理</el-menu-item>
        </el-menu>
      </div>
      <div class="todo-content-right">
        <div v-if="selectedTableList.length > 0">
          <el-table
            :data="selectedTableList"
            @row-click="handleRowClick"
            :show-header="false"
            style="border-top: 1px solid #ebebeb;"
            max-height="500"
          >
            <el-table-column width="100">
              <template slot-scope="scope">
                <img
                  :src="scope.row.avatar"
                  class="todo-content-right-avatar"
                />
              </template>
            </el-table-column>
            <el-table-column prop="title"></el-table-column>
            <el-table-column
              width="200"
              align="right"
            >
              <template slot-scope="scope">
                {{scope.row.time}}<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>
        <div
          v-else
          class="todo-content-right-empty comonPromptFont"
        >
          <img src="ssss" />
          <div>暂无代办</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
import { apiGetWaitList } from '@/api/toDo'
export default {
  data () {
    return {
      activeIndex: '0',
      waitCount: 0,
      // 选中项
      selectedTableList: [],
      pageSelectedInfo: {
        currPage: 1,
        pageSize: 20,
        status: 0,
        totalCount: 1,
        totalPage: 1
      },
      // 待处理
      waitTableList: [],
      // 已处理
      pageWaitInfo: {},
      processedTableList: [],
      pageProcessedInfo: {
        currPage: 1,
        pageSize: 20,
        status: 1,
        totalCount: 1,
        totalPage: 1
      }

    }
  },
  components: {
    SmallNav
  },
  computed: {},
  beforeMount () { },
  mounted () {
    this.handleGetList()
  },
  methods: {
    handleGetList () {
      apiGetWaitList(this.pageSelectedInfo).then(res => {
        this.pageSelectedInfo.currPage = res.data.currPage
        this.pageSelectedInfo.totalCount = res.data.totalCount
        this.pageSelectedInfo.totalPage = res.data.totalPage
        if (this.activeIndex === '0') {
          // 待处理事项
          this.waitCount = res.data.totalCount
        }
        this.selectedTableList = res.data.list
        console.log('待处理', res)
      })
    },
    handleMenuSeledt (val) {
      console.log('index ======', this.activeIndex)
      console.log(val)
      if (this.activeIndex !== val) {
        console.log('menu 切换')
        // 待处理 已处理 数据切换
        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.activeIndex = val
    },
    handleCurrentChange (val) {
      // 页面变更
      this.pageSelectedInfo.currPage = val
      this.handleGetList()
    },
    handleRowClick (row) {
      this.$router.push({ name: 'assessment-stepList', query: { id: row.recordId } })
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.todo {
  &-content {
    width: 1252px;
    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;
      &-avatar {
        width: 34px;
        height: 34px;
        border-radius: 17px;
      }
      .el-pagination {
        text-align: right;
        margin-top: 20px;
      }
      &-empty {
        padding-top: 20px;
        img {
          width: 100px;
          height: 100px;
        }
        height: 100%;
        text-align: center;
      }
    }
  }
}
</style>