cd-work-flow-web/src/views/dashboard/MyoaTabs.vue

<template>
  <div id="MyoaTbas">
    <a-tabs default-active-key="1" @change="callback" style="background:white;;padding:8px;">
      <a-tab-pane key="1" tab="待办事项" style="margin:10px;">
        <div class="dataV">
          <dv-scroll-board
            class="board"
            :config="todoConfig"
            style="width:100%;height:148px;color:#333;"
            @click="todoClick"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="已发事项" force-render>
        <div class="dataV">
          <dv-scroll-board
            class="board"
            :config="applyConfig"
            style="width:100%;height:166px;color:#333;"
            @click="applyClick"
          />
        </div>
      </a-tab-pane>

      <a-tab-pane key="3" tab="已办事项">
        <div class="dataV">
          <dv-scroll-board
            class="board"
            :config="doneConfig"
            style="width:100%;height:166px;color:#333;"
            @click="doneClick"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
    name: 'MyoaTabs',
    data () {
        return {
            // header: ['列1', '列2', '列3'],
            todoConfig: {},
            applyConfig: {},
            doneConfig: {},
            todoList: {},
            url: {
                list: '/actBusiness/listData',
                doneList: '/actTask/doneList'
            }
        }
    },
    created () {
        this.getTodoList()
        this.getApplyList()
        this.getDoneList()
    },
    methods: {
    // 待办事项
        getTodoList () {
            this.postFormAction('/actTask/todoList', {}).then(res => {
                if (res.success) {
                    console.log('待办列表-->', res.result)
                    this.todoList = res.result
                    let scrollData = [] // 轮播表数据

                    this.todoList.map(item => {
                        // 优先级
                        var priorityCode = ''
                        if (item.priority == '0') {
                            priorityCode = '<span style="color:green;">普通</span>'
                        }
                        if (item.priority == '1') {
                            priorityCode = '<span style="color:orange;">重要</span>'
                        }
                        if (item.priority == '2') {
                            priorityCode = '<span style="color:red;">紧急</span>'
                        }
                        var list = [item.id, item.name, item.processName, item.applyer, priorityCode, item.createTime]
                        scrollData.push(list)
                    })
                    this.todoConfig = {
                        oddRowBGC: 'white',
                        evenRowBGC: 'white',
                        columnWidth: [150, 200, 200, 200, 200, 300],
                        align: ['center'],
                        rowNum: 5,
                        waitTime: 9000,
                        data: scrollData // 双向绑定(轮播表数据 绑定到配置的 data数据中)
                    }
                }
            })
        },

        // 已发事项
        getApplyList () {
            getAction(this.url.list, {}).then(res => {
                if (res.success) {
                    console.log('申请列表-->', res.result)
                    this.applyList = res.result
                    let scrollData = [] // 轮播表数据
                    // 结果
                    this.applyList.map(item => {
                        var resultCode = ''
                        if (item.result == '0') {
                            resultCode = '<span style="color:orange;">未提交</span>'
                        }
                        if (item.result == '1') {
                            resultCode = '<span style="color:#37a2da;">处理中</span>'
                        }
                        if (item.result == '2') {
                            resultCode = '<span style="color:green;">通过</span>'
                        }
                        if (item.result == '3') {
                            resultCode = '<span style="color:red;">驳回</span>'
                        }

                        var list = [item.id, item.title, item.processName, item.currTaskName, resultCode, item.applyTime]
                        scrollData.push(list)
                    })
                    this.applyConfig = {
                        oddRowBGC: 'white',
                        evenRowBGC: 'white',
                        columnWidth: [150, 200, 200, 200, 150, 300],
                        align: ['center'],
                        rowNum: 5,
                        waitTime: 2000,
                        data: scrollData
                    }
                }
            })
        },

        // 已办事项
        getDoneList () {
            getAction(this.url.doneList, {}).then(res => {
                if (res.success) {
                    console.log('已办列表-->', res.result)
                    this.doneList = res.result
                    let scrollData = [] // 轮播表数据
                    this.doneList.map(item => {
                        var reallyResult = ''
                        if (item.deleteReason == '审批通过') {
                            reallyResult = '<span style="color:green">审批通过</span>'
                        } else {
                            reallyResult = '<span style="color:red">审批驳回</span>'
                        }

                        var list = [item.id, item.name, item.processName, item.applyer, reallyResult, item.createTime]
                        scrollData.push(list)
                    })
                    this.doneConfig = {
                        oddRowBGC: 'white',
                        evenRowBGC: 'white',
                        columnWidth: [150, 200, 200, 200, 300, 300],
                        align: ['center'],
                        rowNum: 5,
                        waitTime: 2000,
                        data: scrollData
                    }
                }
            })
        },

        // 轮播图 点击事件
        todoClick (item) {
            console.log(item)
            this.$router.push('/activiti/todoManage')
        },
        applyClick (item) {
            this.$router.push('/activiti/applyList')
        },
        doneClick (item) {
            this.$router.push('/activiti/doneManage')
        },
        // 我的待办 tabs
        callback (key) {
            // console.log(key)
            if (key == '1') {
                this.getTodoList()
            }
            if (key == '2') {
                this.getApplyList()
            }
            if (key == '3') {
                this.getDoneList()
            }
        }
    }
}
</script>

<style lang="less" scoped>
// 单独创建页面写样式  如下
@import '~@assets/less/mytodo.less';
@import '~@assets/less/common.less';

/deep/ .ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
}
/deep/ .ant-tabs-tab-active {
  // color: #1890ff !important;
  font-size: 16px;
}
</style>