待办任务，真实数据模拟数据切换，打开内部和外部链接，每隔一段时间刷新一次

最新推荐文章于 2023-04-13 16:01:26 发布

maozuai~zi

最新推荐文章于 2023-04-13 16:01:26 发布

阅读量173

点赞数

分类专栏： angular 文章标签： angular.js typescript 前端

本文链接：https://blog.csdn.net/qq_36557846/article/details/116794213

版权

angular 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

功能描述：

前台通过下拉列表选择模拟数据和真实数据，页面实现模拟数据和真实数据切换

实现效果

在这里插入图片描述

实现方法

下面的写法是基于公司已经开发好的平台

新建service文件

创建真实数据服务、模拟数据服务、真实数据模拟数据切换服务

ng g service sevice/task-data
ng g service sevice/task-mock-data
ng g service sevice/task

在这里插入图片描述
task-data-service.ts

import { Injectable } from '@angular/core'
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
import { of, Observable, pipe } from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class TaskDataService {

  constructor(public http: HttpClient) { }

  //当前登录用户id获取
  public getUserId(): Observable<any> {
    return this.http.get(`/api/runtime/sys/v1.0/userinfos?infoType=user`)
  }

  //获取待办任务分类
  public getRunningCategory(param): Observable<any> {
    const apiUrl = `/api/runtime/task/v1.0/tasks/categoryVO?state=2`
    return this.http.get(apiUrl)
  }

  //获取待办任务
  public getRunningTask(param): Observable<any> {
    const apiUrl = `/api/runtime/task/v1.0/tasks/pageList?`
    //服务中的写法："owner":"${param.userId}","categoryId":"${param.categoryId}"
    //组件使用服务时，this.service.getRunningTask({ userId: this.owner, categoryId: categoryId }).subscribe
    const params = new HttpParams().set('param',
      `{"state":2,"owner":"${param.userId}","categoryId":"${param.categoryId}","pageable":true,"pageIndex":0,"pageSize":1000000}`)
     return this.http.get(apiUrl,  { params })
    
  }

}

task-mock-data.service.ts

import { HttpClient, HttpParams } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { of, Observable, pipe } from 'rxjs'
import { delay } from 'rxjs/operators'


@Injectable({
  providedIn: 'root'
})
export class TaskMockDataService {

  //获得随机数
  public random(min, max, decimal = 0) {
    return parseFloat((Math.random() * (max - min) + min).toFixed(decimal))
  }

  constructor(public http: HttpClient) { }
  
//不使用随机数的写法，和这个项目无关，return的写法不同
  // tab1Data() {
  //   const tab1Data = [
  //     {
  //       name: "todoData测试数据",
  //       submitterName: 'wangjie',
  //       creationtime: "2021-02-20T02:33:38.099+0000",
  //       lastModifiedTime: "2021-02-20T02:33:38.099+0000",
  //       categoryId: "abcds12345678"
  //     }, {
  //       name: "我是测试数据1",
  //       submitterName: 'wangjie',
  //       creationtime: "2021-02-20T02:33:38.099+0000",
  //       lastModifiedTime: "2021-02-20T02:33:38.099+0000",
  //       categoryId: "abcds12345678"
  //     }]
  //   return { tab1Data }
  // }

  //获取待办任务分类
  public getRunningCategory(param): Observable<any[]> {
    const data = [
      { id: '01', name: '三重一大' },
      { id: '02', name: '合同' },
      { id: '03', name: '风控' },
      { id: '04', name: '人力' },
      { id: '05', name: 'OA' }
    ]
    return of(data).pipe(delay(this.random(500, 1500)))
  }

  public getRunningTask(param): Observable<any[]> {
    const dates = ['2020-05-20T03:37:31.384+0000', '2020-04-28T03:37:31.384+0000', '2020-04-12T03:37:31.384+0000',
    '2020-03-09T03:37:31.384+0000', '2020-03-01T03:37:31.384+0000', '2020-02-18T03:37:31.384+0000', '2020-02-17T03:37:31.384+0000']
    const names = ['张天然', '王冰川', '王旭', '葛云墙', '刘明家', '陈晨',
    '张岱山', '刘伟', '胡晴', '杨倾情', '田东', '白小萌']
    const categories = ['01', '02', '03', '04', '05']

    const categoryName = ['三重一大','合同','风控','人力','OA']

    const data = []
    for (let i = 1; i <= this.random(100, 300); i++) {
      data.push({
        index: i,
        id: '06281041-c936-4491-a60b-933d02bfa99f',
        processInstanceId: '3984f90f-692e-49cb-8e03-05a19845c227',
        name: '任务' + this.random(1000, 10000),
        categoryId: categoryName[this.random(0, categoryName.length - 1)],
        submitterName: names[this.random(0, names.length - 1)],
        startTime: dates[this.random(0, dates.length - 1)],
        actions: [],
      })
    }
    return of(data).pipe(delay(this.random(500, 1500)))
  }
}

task-data.service.ts

import { Injectable } from '@angular/core'
import { HttpClient, HttpParams } from '@angular/common/http'
import { of, Observable, pipe } from 'rxjs'
import { map } from 'rxjs/operators'
import { TaskDataService } from './task-data.service'
import { TaskMockDataService } from './task-mock-data.service'

@Injectable({
  providedIn: 'root'
})
export class TaskService {

  private dataMode = 'mock'

  constructor(
    public http: HttpClient,
    public mockDataService: TaskMockDataService,
    public dataService: TaskDataService
  ) { }

  public setDataMode(dataMode: string): void {
    this.dataMode = dataMode
  }

  public getRunningCategory(param): Observable<any> {
    if (this.dataMode === 'mock') {
      return this.mockDataService.getRunningCategory(param)
    } else {
      return this.dataService.getRunningCategory(param)
    }
  }

  public getRunningTask(param): Observable<any> {
    if (this.dataMode === 'mock') {
      return this.mockDataService.getRunningTask(param)
    } else {
      return this.dataService.getRunningTask(param).pipe(map(res => {
        if (res.content === undefined) {
          return []
        } else {
          return res.content
        }
      }))
    }
  }
}

task.component.html

<div class="task">
  <div class="title">待办任务</div>
  <div class="tab">
    <ul>
      <li *ngFor="let item of categoryName; let  i=index">
        <a (click)="handleClick(item.id, i)" href="javascript:void(0);" [class.active]="activeCategoryName === i">{{item.name}}</a>
     
        </li>
    </ul>
  </div>
  <nz-table #smallTable nzSize="small" [nzData]="data" [nzPageSize]=8 [nzPageIndex]="page"
  (nzPageIndexChange)="nzPageIndexChange($event)"
  >

    <thead>
      <tr>
        <th style="width: 50%;">任务名称</th>
        <th nzAlign="center">类型</th>
        <th nzAlign="center">日期</th>
        <th nzAlign="center">提交人</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of smallTable.data" (click)="clickRunningRow(data)">
        <td style="width: 50%;">{{data.name }}</td>
        <td nzAlign="center" style="color: #3e77e4">{{ data.state }}--待定</td>
        <td nzAlign="center">{{ data.startTime | date:'yyyy-MM-dd' }}</td>
        <td nzAlign="center">{{ data.submitterName }}</td>
      </tr>
    </tbody>
  </nz-table>
</div>

task.component.ts

import { Component, ChangeDetectorRef } from '@angular/core';
import { Widget, WidgetBase, Property, PropertyTypes } from '@gspwidget/widget-devkit';
import { TaskService } from './service/task.service'
import { TaskDataService } from './service/task-data.service';
import { TaskMockDataService } from './service/task-mock-data.service'

@Widget({ name: "task" })
@Component({
  selector: 'task',
  templateUrl: `./task.component.html`,
  styleUrls: [`./task.component.scss`]
})
export class TaskComponent extends WidgetBase {
  @Property({
    category: '公共属性',
    displayName: '数据类型',
    type: PropertyTypes.Enum, // 下拉框
    enumOption: {
      default: 'mock', // 默认值为 explore
      items: [ // select 可选值
        { value: 'mock', displayName: '模拟数据' },
        { value: 'real', displayName: '真实数据' },
      ]
    }
  }) dataMode

  data = []
  owner
  categoryName
  category2
  activeCategoryName
  categoryDefault
  page = 1
  nzPageIndex = 1

  dataMode2

  constructor(
    public service: TaskService,
    public dataService: TaskDataService,
    public mockDataService: TaskMockDataService,
    private cd: ChangeDetectorRef
  ) {
    super()
  }

  ngOnInit() {
    this.service.setDataMode(this.dataMode)
    this.getOwner()
    this.activeCategoryName = 0
    this.getCategory()
    //点击当前浏览器页签刷新数据
	window.addEventListener('visibilitychange', () => {
      if ('visible' === document.visibilityState) {
        this.getUserId()
        this.getRunCategory('2')
        this.getRunningData(this.owner, this.category[this.categoryIndex].id)
      }
    })
    
    //调用刷新
    this.countTime()
  }
  //每隔一段时间刷新一次
	countTime() {
    if (this.time == 0) {
      this.getRunCategory('2');
      this.getRunningData(this.owner, this.category[this.categoryIndex].id)
    }
    this.time = this.time == 0 ? this.finalFlushTime : this.time;
    this.time -= 1;
    setTimeout(() => {
      this.countTime()
    }, 1000)
  }

  //获取当前用户
  getOwner() {
    this.dataService.getUserId().subscribe((res: any) => {
      this.owner = res.id
      console.log('ower', this.owner)
    })
  }

  //获取待办任务分类
  getCategory() {
    this.service.getRunningCategory({}).subscribe(res => {
      console.log('任务分类', res)
      this.categoryName = res
      this.categoryDefault = res[0].id
      this.getTask(this.categoryDefault)
    })
  }

  getTask(categoryId) {
  //这里的userId，categoryId是在服务文件中定义的
    this.service.getRunningTask({ userId: this.owner, categoryId: categoryId }).subscribe(res => {
      console.log('任务列表', res)
      this.data = res
      this.cd.markForCheck()
    })
  }

  //点击切换数据
  handleClick(categoryId, i) {
    this.activeCategoryName = i
    this.nzPageIndexChange(1)
    //获取选中tab的列表内容
    this.getTask(categoryId)
  }

//页码变化
  nzPageIndexChange(size) {
    this.nzPageIndex = size - 1;   
    this.page = size 
  }

  //切换真实和模拟数据
  // onPropertyChange(propName: string, value) {
  //   if (propName == 'dataMode' && value == 'mock') {

  //     this.dataMode = "mock"
  //   } else {
  //     this.dataMode = "real"
  //   }
  // }

  //点击打开链接
  clickRunningRow(data: any): void {
    const actions = data.actions || []
    for (const action of actions) {
      if (action.code === 'DealTask') {
        const taskUrl = action.parameters.filter(item => {
          return item.code === 'TaskUrl'
        })
        if (taskUrl.length > 0) {
          window.open(taskUrl[0].value)
        }
        return
      }
    }
    this.openInsideTask(data.id, data.processInstanceId)
  }

  // 打开内部任务
  openInsideTask(id, processInstanceId) {
    const taskId = id
    const procInstId = processInstanceId
    const parameters = new Map<string, any>()
    parameters.set('taskId', taskId)
    const options = {
      appType: 'menu',
      funcId: 'WF0120',
      tabId: procInstId,
      appId: '',
      appEntrance: '',
      entityParams: parameters
    };
    (window as any).gspframeworkService.rtf.func.openMenu(options)
    //其他的写法
    // const url = `/router.html?language=zh-CHS&openMode=1&callParam=WF0120&entityParam={"taskId":"${id}"}&entityParamToMap=1`
    // window.open(url)
  }
}

完工