italent-task-operate-area v5.1.8

创建任务筛选区域

为任务中心筛选区域。

安装

npm i italent-task-operate-area -S

前提

BSGlobal必须有loginUserInfo和env字段，内部集成选人组件需要调接口

内部一些图标需要外侧引入：
import '@beisen/pb-svg/icomoon/style.css';
require('@beisen/nade-style/style.scss') 

使用

import React, { Component } from 'react';
import {operateInfo} from './defaultSetting';
import OperateArea from '../../src'
import '@beisen/pb-svg/icomoon/style.css';
require('@beisen/nade-style/style.scss') 

export default class Demo extends Component{

  state={
    selectedExpire:false
  }

  handleSelectTime = (time) => {
    // 请求筛选接口
    console.log(time)
    this.setState({selectedExpire:false})
  }

  showExpiredTask = () => {
    //已过期（完成的任务没有这一项，排序自动变成截止日期排序）
    console.log('过期任务')
    this.setState({selectedExpire:true})
  }

  handleSelectOrder = (d) => {
    // 选择排序
    console.log(d)
  }

  selectFilter = (data) => {
    //选择过滤条件
    console.log(data)
  }

  changeMode = (mode) => {
    //选择模式
    console.log(mode)
  }

  render(){
    return <OperateArea operateInfo={operateInfo}
    selectFilter={this.selectFilter}
    selectTime={this.handleSelectTime}
    selectOrder={this.handleSelectOrder}
    changeMode={this.changeMode}
    selectedExpire={this.state.selectedExpire}
    showExpiredTask={this.showExpiredTask} />
  }
}

参数

selectFilter：推屏内确定点击
selectTime：选择时间范围
selectOrder：选择排序方式
changeMode：切换列表模式
showExpiredTask：显示过期任务
selectedExpire:选中已过期
chargeUsers:任务负责人（筛选条件）
outStyle:外层内联样式
pullPopRight://筛选推屏距离右侧
以上参数均为函数如要控制区域的显示和隐藏，将参数对应字段不传即可

export const operateInfo = {
  dateScope:{ //时间范围
      usual:[{
          text: '今天',
          selected: true,
          id:0
      },{
          text: '本周',
          selected: false,
          id:1
      }],
      more:[{
          text: '明天',
          selected: false,
          id:2
      },{
          text: '昨天',
          selected: false,
          id:3
      },{
          text: '本月',
          selected: false,
          id:4
      },{
          text: '所有时间',
          selected: false,
          id:5
      }]
  },
  expiredTaskNum: 1, //过期任务条数
  orderBy:[{//排序方式
      text:'按创建时间排序', 
      selected:true, 
      id:0
   },{
      text:'按截止时间排序',
      selected:false, 
      id:1
  },{
      text:'按优先级排序',
      selected:false, 
      id:2
  }],
  filterData:{
      //推屏多选区域参数，用key做判断，看是否是默认选择状态。
      multiSelectData:[
          {//优先级 
              title:'优先级',
              key:'priority',
              value:[{
                  text:'最高', 
                  selected:false, 
                  id: '1' 
              },{
                  text:'高', 
                  selected:false, 
                  id: '2' 
              },{
                  text:'中', 
                  selected:false, 
                  id: '3' 
              },{
                  text:'低', 
                  selected:false, 
                  id: '4' 
              },{
                  text:'最低', 
                  selected:false, 
                  id: '5' 
              }]
          },{//来源
              title: '来源',
              key:'source',
              value:[]
          }
      ],
      showUserCharge: true,//显示负责人
  },
  mode:[{//列表模式（固定即可，支持换图标）
      id:0,
      selected:true,
      icon:'font-task-mode-simple',
      text:'精简模式'
  },{
      id:1,
      selected:false,
      icon:'font-task-mode-complete',
      text:'详情模式'
  }]
}