diantou/src_product/iam/audit/workbench/iam-todo-tabs.vue

<template>
  <a-tabs ref="tabs" v-model="type" :class="[$style.todotabs, 'sd-has-table']">
    <template>
      <span slot="tabBarExtraContent" :class="$style.morebtn">
        <a-popover placement="bottom">
          <template v-slot:content>
            <a-button type="text" @click="viewByFlow('', type)">所有流程</a-button><br />
            <div v-for="tf in todolistFlow" :key="tf.flowId">
              <a-button type="text" @click="viewByFlow(tf.flowId, type)"
                >{{ tf.flowname }}({{ tf.amount }})</a-button
              >
            </div>
          </template>
          <template v-slot:title>
            <span>流程分组</span>
          </template>
          <a-button v-show="type === 'todo' || type === 'processed'" type="text">
            <a-icon type="sd-audit-advancesearch" theme="filled" />
          </a-button>
        </a-popover>
      </span>
      &nbsp;
      <a-icon slot="tabBarExtraContent" :class="$style.syncbtn" type="sync" @click="refresh" />
      <span slot="tabBarExtraContent" :class="$style.morebtn" @click="mored(type)">查看更多 ></span>
    </template>
    <a-tab-pane key="todo" :class="$style.panel">
      <span slot="tab">
        待办<span :class="$style.todonums">({{ userInfo.todoNumbers }})</span></span
      >
      <iam-todo-list-card
        :items="todoData"
        typelist="todo"
        @golistUrl="awaitHandleUrl"
      ></iam-todo-list-card>
    </a-tab-pane>
    <a-tab-pane key="inform" :class="$style.panel">
      <span slot="tab">
        待阅<span :class="$style.todonums">({{ userInfo.toReadNumbers }})</span></span
      >
      <iam-todo-list-card
        :items="informData"
        typelist="inform"
        @golistUrl="awaitHandleUrl"
      ></iam-todo-list-card>
    </a-tab-pane>
    <a-tab-pane key="processed" tab="已办" :class="$style.panel">
      <!-- <iam-todo-list-card
        :items="processedData"
        typelist="processed"
        @golistUrl="awaitHandleUrl"
      ></iam-todo-list-card> -->
      <todo-list ref="processed" list-type="processed" />
    </a-tab-pane>
    <a-tab-pane key="replied-inform" tab="已阅" :class="$style.panel">
      <!-- <iam-todo-list-card
        :items="repliedData"
        typelist="replied-inform"
        @golistUrl="awaitHandleUrl"
      ></iam-todo-list-card> -->
      <todo-list ref="replied-inform" list-type="replied-inform" />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import TodoListService from '@/todo/todo-list-service'
import { getUserInfo } from '@/common/store-mixin'
import loginService from '@/login/login-service'
import list from '@/todo/sd-todo-list'
import components from './_import-components/iam-todo-tabs-import'
import listCard from './todo/iam-todo-list-card.vue'

import axios from '@/common/services/axios-instance'
export default {
  name: 'IamTodoTabs',
  components: {
    ...components,
    'iam-todo-list-card': listCard,
    'todo-list': list,
  },
  mixins: [],
  data() {
    return {
      type: 'todo',
      todoData: [], // 待办数据
      processedData: [], // 已办数据
      informData: [], // 待阅数据
      repliedData: [], // 已阅数据
      userInfo: null,
      todolistFlow: [],
      todolistFilterFlowId: '',
    }
  },
  created() {
    // loginService.getUserInfo()
    this.userInfo = getUserInfo()
    this.getHandleListFn('todo') // 待办
    this.getHandleListFn('processed') // 已办
    this.getHandleListFn('inform') // 待阅
    this.getHandleListFn('replied-inform') // 已阅
    this.getTodoListFlowInfo('todo')
  },
  methods: {
    viewByFlow(flowId, type) {
      if (flowId) {
        this.todolistFilterFlowId = flowId
      } else {
        this.todolistFilterFlowId = ''
      }
      this.getHandleListFn(type)
    },
    getTodoListFlowInfo(type) {
      if (type === 'todo') {
        axios({
          url: 'api/xcoa-mobile/v1/statisticsTodolistGroupbyFlow',
          method: 'get',
        }).then((res) => {
          if (res.data) {
            this.todolistFlow = res.data
            console.log(res.data)
          }
        })
      }
    },
    mored(type) {
      if (type === 'todo' || type === 'processed') {
        this.$router.push(`/sd-frame/sd-mytodolist?type=${type}`)
      } else if (type === 'inform' || type === 'replied-inform') {
        this.$router.push(`/sd-frame/sd-mytoreadlist?type=${type}`)
      }
    },
    // 刷新工作台列表数据
    refresh() {
      this.getHandleListFn(this.type)
    },
    // 获取列表数据
    getHandleListFn(listType) {
      let expressions
      if (listType === 'todo' || listType === 'processed') {
        if (this.todolistFilterFlowId) {
          expressions = [
            {
              dataType: 'str',
              name: 'flowId',
              op: 'like',
              stringValue: this.todolistFilterFlowId + '%',
            },
          ]
        } else {
          expressions = []
        }
      } else {
        expressions = [
          {
            dataType: 'str',
            name: 'status',
            op: 'ne',
            stringValue: '2',
          },
        ]
      }
      const params = {
        columns: 'title',
        expressions: expressions,
        orderBy: 'sentDate desc',
        creatorDeptLevel: 'DEPARTMENT',
      }
      if (listType === 'processed') {
        params.orderBy = 'processDate desc'
      }
      TodoListService.getList({ current: 1, pageSize: 10, listType: listType, ...params }).then(
        (res) => {
          // this.updateTaskNumber({ total: res.total, type: listType })
          this.isskeleton = false
          if (listType === 'todo') {
            this.todoData = res.datas
            if (res.datas) {
              this.userInfo.todoNumbers = res.datas.length
            } else {
              this.userInfo.todoNumbers = 0
            }
          } else if (listType === 'processed') {
            this.processedData = res.datas
          } else if (listType === 'inform') {
            this.informData = res.datas
            if (res.datas) {
              this.userInfo.toReadNumbers = res.datas.length
            } else {
              this.userInfo.toReadNumbers = 0
            }
          } else if (listType === 'replied-inform') {
            this.repliedData = res.datas
          }
        }
      )
    },
    // 卡片列表详情
    awaitHandleUrl(data, type) {
      let url = TodoListService.makePath(data, type)
      url = `/sd-webflow/${url}`
      const p = TodoListService.openTaskItem(data, type)
      p.then((refreshFlag) => {
        if (refreshFlag) {
          //  处理后刷新对应列表
          // this.getHandleListFn(type) // todo 待办事项   inform 待阅文件
          this.getHandleListFn('todo') // 待办
          this.getHandleListFn('processed') // 已办
          this.getHandleListFn('inform') // 待阅
          this.getHandleListFn('replied-inform') // 已阅
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$iconfont: 20px;
.todotabs {
  :global(.ant-table-placeholder) {
    padding: 31px 16px;
  }
  :global(.ant-tabs-extra-content) {
    position: relative;
    z-index: 1;
  }
  :global(.ant-tabs-bar) {
    border-bottom: none;
  }
  :global(.ant-tabs-ink-bar-animated) {
    height: 5px;
    border-radius: 13px;
  }
  :global(.ant-tabs-nav) {
    height: 45px;
  }
  :global(.ant-tabs-tab-active) {
    font-weight: 600;
    color: #000;
  }
  :global(.ant-tabs-tab:hover) {
    color: #000;
  }
}
.syncbtn {
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}
.morebtn {
  // font-size: $iconfont;
  font-size: 14px;
  cursor: pointer;
}
.todonums {
  font-size: 12px;
  color: #959595;
}
</style>