243 lines
10 KiB
JavaScript
243 lines
10 KiB
JavaScript
import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
|
||
import ParentTask from "../../components/ParentTask";
|
||
import React, {useContext, useEffect} from "react";
|
||
import dayjs from "dayjs";
|
||
import {CloseCircleFill} from "antd-mobile-icons";
|
||
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
|
||
import {getDictionary} from "../../utils/dictUtil";
|
||
import {MyRootContext, UPDATE_SEARCH} from "../../components/MyRootContext";
|
||
import {dayStartUtcFormat, nextDayStartUtcFormat} from "../../utils/timeFormatUtil";
|
||
|
||
const DetailSearchContext = () => {
|
||
const navigate = useNavigate();
|
||
const [form] = Form.useForm();
|
||
const [visible, setVisible] = React.useState(false);
|
||
const { state, dispatch } = useContext(MyRootContext);
|
||
const search = state.search
|
||
const [stateList, setStateList] = React.useState([]);
|
||
const [priorityList, setPriorityList] = React.useState([]);
|
||
// 使用Outlet,传值修改标题
|
||
const {setTitle} = useOutletContext();
|
||
useEffect(() => {
|
||
// 使用Outlet,传值修改标题
|
||
setTitle("搜索查询")
|
||
initDate()
|
||
}, [])
|
||
|
||
async function initDate() {
|
||
let stateDictionary = await getDictionary("2");
|
||
let priorityDictionary = await getDictionary("1");
|
||
setStateList(Array.from(stateDictionary.values()));
|
||
setPriorityList(Array.from(priorityDictionary.values()));
|
||
if (!search) {
|
||
return
|
||
}
|
||
if (search.data && search.data.orSearchModel && search.data.orSearchModel.andList) {
|
||
let searchMap = new Map(
|
||
search.data.orSearchModel.andList.map(searchObj => [searchObj.name, searchObj]));
|
||
if (searchMap.has("pid")) {
|
||
|
||
// form.setFieldValue(task.name);
|
||
}
|
||
if (searchMap.has("state")) {
|
||
form.setFieldValue("state", searchMap.get("state").value.split(','))
|
||
}
|
||
if (searchMap.has("priority")) {
|
||
form.setFieldValue("priority", searchMap.get("priority").value.split(','))
|
||
}
|
||
if (searchMap.has("name")) {
|
||
form.setFieldValue("name", searchMap.get("name").value)
|
||
}
|
||
}
|
||
// 结束时间大于todo日，开始时间小于结束日
|
||
search.data?.orSearchModel?.andSearchModel?.andList?.forEach((searchObj) => {
|
||
if (searchObj.name === "expectedEndTime") {
|
||
form.setFieldValue("todoDay", dayjs(searchObj.value).toDate())
|
||
}
|
||
})
|
||
if (search.data && search.data.andList) {
|
||
let orMap = new Map(search.data.andList.map(searchObj => [searchObj.name, searchObj]));
|
||
if (orMap.has("state") && orMap.get("state").value === "10") {
|
||
form.setFieldValue("allOverdueTasks", 'checked')
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Form
|
||
form={form}
|
||
layout='horizontal'
|
||
onFinish={(values) => {
|
||
console.log("Form", values)
|
||
let andList = []
|
||
let searchCondition = []
|
||
let andSearchModel = {}
|
||
let orSearchModel = {"andList": searchCondition, andSearchModel}
|
||
|
||
const {pidArray, name, priority, state, todoDay, allOverdueTasks} = values;
|
||
if (pidArray && pidArray.length !== 0) {
|
||
searchCondition.push({"name": "name", "value": pidArray[pidArray.length - 1], "operateType": "="})
|
||
}
|
||
if (name && name !== "") {
|
||
searchCondition.push({"name": "name", "value": name, "operateType": "%"})
|
||
}
|
||
if (priority && priority.length !== 0) {
|
||
searchCondition.push({"name": "priority", "value": priority.join(","), "operateType": "IN"})
|
||
}
|
||
if (state && state.length !== 0) {
|
||
searchCondition.push({"name": "state", "value": state.join(","), "operateType": "IN"})
|
||
}
|
||
if (todoDay) {
|
||
andSearchModel.andList = [{
|
||
"name": "expectedStartTime",
|
||
"value": nextDayStartUtcFormat(todoDay),
|
||
"operateType": "<"
|
||
}, {
|
||
"name": "expectedEndTime",
|
||
"value": dayStartUtcFormat(todoDay),
|
||
"operateType": ">"
|
||
}]
|
||
andSearchModel.orSearchModel = {
|
||
"andList": [
|
||
{
|
||
"name": "expectedStartTime",
|
||
"value": nextDayStartUtcFormat(todoDay),
|
||
"operateType": "<"
|
||
}, {
|
||
"name": "expectedStartTime",
|
||
"value": dayStartUtcFormat(todoDay),
|
||
"operateType": ">"
|
||
}, {
|
||
"name": "expectedEndTime",
|
||
"operateType": "NULL"
|
||
}
|
||
], orSearchModel: {
|
||
"andList": [
|
||
{
|
||
"name": "expectedEndTime",
|
||
"value": nextDayStartUtcFormat(todoDay),
|
||
"operateType": "<"
|
||
}, {
|
||
"name": "expectedEndTime",
|
||
"value": dayStartUtcFormat(todoDay),
|
||
"operateType": ">"
|
||
}, {
|
||
"name": "expectedStartTime",
|
||
"operateType": "NULL"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
if (allOverdueTasks) {
|
||
andList.push({"name": "state", "value": "10", "operateType": "="})
|
||
}
|
||
dispatch({type:UPDATE_SEARCH,search:{
|
||
"pageSize": 12,
|
||
"pageNumber": 1,
|
||
"data": {
|
||
andList,
|
||
orSearchModel
|
||
}
|
||
}})
|
||
navigate("/home/listTask")
|
||
}}
|
||
footer={
|
||
<Button block type='submit' color='primary' size='large'>
|
||
搜索
|
||
</Button>
|
||
}
|
||
>
|
||
<ParentTask form={form}/>
|
||
<Form.Item
|
||
name='name'
|
||
label='任务信息'
|
||
>
|
||
<Input onChange={console.log} placeholder='任务信息'/>
|
||
</Form.Item>
|
||
|
||
<Form.Item name='state' label='任务状态'>
|
||
<Checkbox.Group>
|
||
<Space direction='vertical'>
|
||
{
|
||
stateList.map(stateDict =>
|
||
<Checkbox key={stateDict.itemCode} value={stateDict.itemCode}>
|
||
<Tag key={stateDict.itemCode}
|
||
color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
|
||
</Checkbox>
|
||
)
|
||
}
|
||
</Space>
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
<Form.Item name='priority' label='任务优先级'>
|
||
<Checkbox.Group>
|
||
<Space direction='vertical'>
|
||
{
|
||
priorityList.map(stateDict =>
|
||
<Checkbox key={stateDict.itemCode} value={stateDict.itemCode}>
|
||
<Tag key={stateDict.itemCode}
|
||
color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
|
||
</Checkbox>
|
||
)
|
||
}
|
||
</Space>
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
<Form.Item noStyle
|
||
shouldUpdate={(prevValues, curValues) => {
|
||
console.log("prevValues,curValues", prevValues, curValues)
|
||
return prevValues.todoDay !== curValues.todoDay
|
||
}
|
||
}
|
||
>
|
||
{({getFieldValue, setFieldsValue}) => (
|
||
<Form.Item
|
||
name='todoDay'
|
||
initialValue={null}
|
||
trigger='onConfirm'
|
||
label='TODO日'
|
||
help='期望开始时间和期望结束时间包含当日时间段'
|
||
arrow={
|
||
getFieldValue('todoDay') ? (
|
||
<CloseCircleFill
|
||
style={{
|
||
color: 'var(--adm-color-light)',
|
||
fontSize: 14,
|
||
}}
|
||
onClick={e => {
|
||
e.stopPropagation()
|
||
setFieldsValue({todoDay: null})
|
||
}}
|
||
/>) : true
|
||
|
||
}
|
||
onClick={() => {
|
||
setVisible(true)
|
||
}}
|
||
>
|
||
<DatePicker
|
||
visible={visible}
|
||
onClose={() => {
|
||
setVisible(false)
|
||
}}
|
||
>
|
||
{value =>
|
||
value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
|
||
}
|
||
</DatePicker>
|
||
</Form.Item>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
name='allOverdueTasks'
|
||
label='所有逾期任务'
|
||
childElementPosition='right'
|
||
initialValue={false}
|
||
valuePropName='checked' // 确保为 Switch 设置正确的 prop
|
||
>
|
||
<Switch/>
|
||
</Form.Item>
|
||
</Form>)
|
||
}
|
||
export default DetailSearchContext; |