创建任务筛选区域
为任务中心筛选区域。
安装
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:'详情模式'
}]
}