367 lines
16 KiB
TypeScript
367 lines
16 KiB
TypeScript
import {PlusOutlined, QuestionCircleOutlined} from '@ant-design/icons';
|
|
import {
|
|
ModalForm,
|
|
ProForm,
|
|
ProFormDateRangePicker, ProFormDateTimeRangePicker,
|
|
ProFormSelect,
|
|
ProFormText, ProFormTextArea, ProFormTreeSelect,
|
|
} from '@ant-design/pro-components';
|
|
import {Button, Form, message, Popconfirm} from 'antd';
|
|
import React, {useEffect, useState} from "react";
|
|
import {
|
|
addTask, deleteTask, getTask,
|
|
getTaskTreeResult,
|
|
OPERATION_BUTTON_TYPE, TASK_TYPE,
|
|
taskPriorityList,
|
|
taskStateList, updateTask
|
|
} from "@/lib/task/project/data";
|
|
import {DataType} from "@/lib/definitions";
|
|
import dayjs, {Dayjs} from "dayjs";
|
|
import DiaryOption from "@/components/DiaryOption";
|
|
|
|
export type DetailModelFormProps = {
|
|
// 当前内容id
|
|
itemId?: string,
|
|
pid?: string,
|
|
// 祖宗任务id
|
|
pPid?: string,
|
|
// 操作id
|
|
operationId: OPERATION_BUTTON_TYPE,
|
|
// 标题描述
|
|
description: string,
|
|
// 是否打开界面，用于非按钮操作
|
|
open: boolean,
|
|
// 使用按钮操作
|
|
haveButton: boolean,
|
|
expectedStartTime?: Dayjs,
|
|
expectedEndTime?: Dayjs,
|
|
// 重新加载数据
|
|
reloadData?: () => void
|
|
}
|
|
export type PidSelectTree = { label: string; value: string; pid: string; children?: PidSelectTree[] }
|
|
|
|
export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|
console.log("DetailModelForm:props:", props)
|
|
const [form] = Form.useForm<DataType>();
|
|
const [pid, setPid] = useState<string>(props.pid ? props.pid : '0');
|
|
const [editFormDisable, setEditFormDisable] = useState(props.operationId === OPERATION_BUTTON_TYPE.DETAIL)
|
|
// 团队第一层 pid必须为0
|
|
const [taskType, setTaskType] = useState('0')
|
|
useEffect(() => {
|
|
if (props.itemId != undefined && (
|
|
props.operationId === OPERATION_BUTTON_TYPE.DETAIL || props.operationId === OPERATION_BUTTON_TYPE.UPDATE)) {
|
|
getTask(props.itemId).then(task => {
|
|
console.log('DetailModelForm:getTask(props.itemId)', props.itemId, task);
|
|
if (task.status.success) {
|
|
// setTaskMessage(task.data)
|
|
task.data.state = taskStateList.find(taskState => taskState.code === task.data.state?.toString())!.name;
|
|
task.data.priority = taskPriorityList.find(taskPriority => taskPriority.code === task.data.priority?.toString())!.name;
|
|
task.data.actualTimeRange = [task.data.actualStartTime ? dayjs(task.data.actualStartTime) : undefined,
|
|
task.data.actualEndTime ? dayjs(task.data.actualEndTime) : undefined];
|
|
task.data.expectedTimeRange = [task.data.expectedStartTime ? dayjs(task.data.expectedStartTime) : undefined,
|
|
task.data.expectedEndTime ? dayjs(task.data.expectedEndTime) : undefined];
|
|
form.setFieldsValue(task.data)
|
|
console.log("form.setFieldsValue(task.data)" + JSON.stringify(task.data))
|
|
} else {
|
|
message.error(task.status.message);
|
|
props.reloadData?.()
|
|
}
|
|
})
|
|
} else if (props.operationId === OPERATION_BUTTON_TYPE.ADD || props.operationId === OPERATION_BUTTON_TYPE.ADD_CHILD) {
|
|
let data = {
|
|
'expectedTimeRange': [props.expectedStartTime ? props.expectedStartTime : dayjs(), props.expectedEndTime],
|
|
'pid': props.pid
|
|
};
|
|
form.setFieldsValue(data)
|
|
}
|
|
}, [props])
|
|
|
|
function childReduce(child: DataType[]): PidSelectTree[] {
|
|
const result: PidSelectTree[] = [];
|
|
child.map(data => {
|
|
const resultData: PidSelectTree = {label: data.name, value: data.id, pid: data.pid};
|
|
if (data.children) {
|
|
resultData.children = childReduce(data.children);
|
|
}
|
|
result.push(resultData);
|
|
})
|
|
return result;
|
|
}
|
|
|
|
// 如果不是添加任务需要回显
|
|
return (
|
|
<ModalForm<DataType>
|
|
title={props.description}
|
|
open={props.open && !props.haveButton}
|
|
trigger={props.haveButton ?
|
|
<Button type="primary">
|
|
<PlusOutlined/>
|
|
{props.description}
|
|
</Button> : undefined
|
|
}
|
|
form={form}
|
|
autoFocusFirstInput
|
|
modalProps={{
|
|
destroyOnClose: true,
|
|
onCancel: () => {
|
|
console.log('run');
|
|
props.reloadData?.();
|
|
},
|
|
}}
|
|
submitter={props.itemId !== undefined && props.itemId !== '-1' ? {
|
|
render: (prop, defaultDoms) => {
|
|
return [
|
|
editFormDisable ? <Button
|
|
key="edit"
|
|
onClick={() => {
|
|
// props.submit();
|
|
setEditFormDisable(false)
|
|
}}
|
|
>
|
|
编辑
|
|
</Button> : undefined,
|
|
props.operationId === OPERATION_BUTTON_TYPE.DETAIL || props.operationId === OPERATION_BUTTON_TYPE.UPDATE ?
|
|
<Popconfirm
|
|
key='delete'
|
|
title="删除任务"
|
|
description="确认要删除任务?"
|
|
icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
|
|
okText="确认"
|
|
cancelText="取消"
|
|
onConfirm={() => {
|
|
if (props.itemId !== undefined) {
|
|
deleteTask(props.itemId).then((response => {
|
|
console.log('response', response)
|
|
if (response.status.success) {
|
|
message.success("删除任务成功：" + response.data)
|
|
props.reloadData?.()
|
|
}
|
|
}));
|
|
}
|
|
}}
|
|
>
|
|
<Button type="primary" danger>
|
|
删除
|
|
</Button>
|
|
</Popconfirm> : undefined
|
|
,
|
|
<DiaryOption/>,
|
|
...defaultDoms
|
|
];
|
|
},
|
|
} : undefined}
|
|
onFinish={async (values) => {
|
|
console.log('Received values of form: ', values);
|
|
if (values.pid === undefined) {
|
|
values.pid = '0'
|
|
}
|
|
if (values.expectedTimeRange?.[0] != undefined) {
|
|
values.expectedStartTime = dayjs(values.expectedTimeRange[0]).format()
|
|
}
|
|
if (values.expectedTimeRange?.[1] != undefined) {
|
|
values.expectedEndTime = dayjs(values.expectedTimeRange[1]).format()
|
|
}
|
|
if (values.actualTimeRange?.[0] != undefined) {
|
|
values.actualStartTime = dayjs(values.actualTimeRange[0]).toDate()
|
|
}
|
|
if (values.actualTimeRange?.[1] != undefined) {
|
|
values.actualEndTime = dayjs(values.actualTimeRange[1]).toDate()
|
|
}
|
|
var result: boolean = false;
|
|
|
|
let state = taskStateList.find(taskState => taskState.name === values.state?.toString());
|
|
if (state) {
|
|
values.state = state.code
|
|
}
|
|
let priority = taskPriorityList.find(taskPriority => taskPriority.name === values.priority?.toString())
|
|
if (priority) {
|
|
values.priority = priority.code
|
|
}
|
|
// todo 修改
|
|
if (props.operationId === OPERATION_BUTTON_TYPE.UPDATE || (props.operationId === OPERATION_BUTTON_TYPE.DETAIL && !editFormDisable)) {
|
|
await updateTask(values).then(response => {
|
|
console.log('response', response)
|
|
if (response.status.success) {
|
|
message.success("修改任务成功：" + response.data)
|
|
// 树任务重新刷新
|
|
// 四象限任务重新刷新
|
|
// 如果可以直接更新列表而不请求。。。。。。
|
|
console.log('props.reloadData?.()', props.reloadData)
|
|
props.reloadData?.()
|
|
result = true
|
|
} else {
|
|
message.error(response.status.message)
|
|
result = false
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
await addTask(values).then(response => {
|
|
console.log('response', response)
|
|
if (response.status.success) {
|
|
message.success("添加任务成功：" + response.data)
|
|
// 树任务重新刷新
|
|
// 四象限任务重新刷新
|
|
// 如果可以直接更新列表而不请求。。。。。。
|
|
console.log('props.reloadData?.()', props.reloadData)
|
|
props.reloadData?.()
|
|
result = true
|
|
} else {
|
|
message.error(response.status.message)
|
|
result = false
|
|
}
|
|
}
|
|
);
|
|
}
|
|
return result;
|
|
}}
|
|
>
|
|
<ProFormText width="sm" name="id" hidden={true} label="主键"/>
|
|
<ProFormText width="sm" name="code" initialValue={props.itemId} hidden={true} label="任务编码"/>
|
|
<ProFormText width="sm" name="pPid" initialValue={props.pPid} hidden={true} label="祖宗id"/>
|
|
<ProForm.Group>
|
|
<ProFormSelect
|
|
required={true}
|
|
options={TASK_TYPE}
|
|
width="sm"
|
|
name="taskType"
|
|
label="任务类型"
|
|
initialValue='0'
|
|
disabled={editFormDisable}
|
|
onChange={(value: string, option) => {
|
|
setTaskType(value)
|
|
}}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入计划类型"
|
|
}
|
|
]}
|
|
/>
|
|
<ProFormText
|
|
required={true}
|
|
hidden={taskType != '1'}
|
|
width="sm"
|
|
name="fName"
|
|
label="团队名称"
|
|
tooltip="最长为 10 位"
|
|
placeholder="请输入团队名称"
|
|
disabled={editFormDisable}
|
|
/>
|
|
<ProFormTreeSelect
|
|
hidden={taskType == '1'}
|
|
width="sm"
|
|
request={() => {
|
|
return getTaskTreeResult(JSON.stringify(
|
|
{
|
|
pageSize: 1000,
|
|
pageNumber: 1,
|
|
data: [{code: 'pid', value: '0', operateType: '='}, {
|
|
code: 'state',
|
|
value: '8,9',
|
|
operateType: 'IN'
|
|
}, {code: '', value: true, operateType: "TREE"}]
|
|
}
|
|
)).then(result => childReduce(result.data.content))
|
|
}}
|
|
name="pid"
|
|
label="父级任务"
|
|
fieldProps={{
|
|
onSelect: (e, node) => {
|
|
console.log('onSelect', e, node);
|
|
setPid(e)
|
|
}
|
|
}}
|
|
disabled={editFormDisable}
|
|
/>
|
|
<ProFormText
|
|
required={true}
|
|
width="sm"
|
|
name="name"
|
|
label="任务名称"
|
|
tooltip="最长为 10 位"
|
|
placeholder="请输入任务名称"
|
|
disabled={editFormDisable}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入计划名称"
|
|
}, {
|
|
max: 10,
|
|
message: "名称长度不易超过10个字"
|
|
}
|
|
]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProFormTextArea
|
|
// width="md"
|
|
name="description"
|
|
label="任务描述"
|
|
// tooltip="最长为 24 位"
|
|
placeholder="请输入任务描述"
|
|
disabled={editFormDisable}
|
|
/>
|
|
|
|
<ProForm.Group>
|
|
<ProFormSelect
|
|
request={async () => taskPriorityList.map(taskState => {
|
|
return {
|
|
'label': taskState.name,
|
|
'value': taskState.code
|
|
}
|
|
})}
|
|
width="sm"
|
|
name="priority"
|
|
label="任务优先级"
|
|
initialValue='3'
|
|
disabled={editFormDisable}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择计划优先级"
|
|
}
|
|
]}
|
|
/>
|
|
<ProFormSelect
|
|
width="sm"
|
|
options={taskStateList.map(taskState => {
|
|
return {
|
|
'label': taskState.name,
|
|
'value': taskState.code
|
|
}
|
|
})}
|
|
name="state"
|
|
label="任务状态"
|
|
initialValue='8'
|
|
disabled={editFormDisable}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择计划状态"
|
|
}
|
|
]}
|
|
/>
|
|
</ProForm.Group>
|
|
|
|
<ProForm.Group>
|
|
<ProFormDateTimeRangePicker
|
|
initialValue={[dayjs(), undefined]}
|
|
name="expectedTimeRange"
|
|
label="期望时间"
|
|
fieldProps={{allowEmpty: [true, true], showTime: true, needConfirm: true}}
|
|
placeholder={['开始时间', '结束时间']}
|
|
disabled={editFormDisable}
|
|
/>
|
|
<ProFormDateTimeRangePicker
|
|
name="actualTimeRange"
|
|
label="实际时间"
|
|
fieldProps={{allowEmpty: [true, true], showTime: true, needConfirm: true}}
|
|
placeholder={['开始时间', '结束时间']}
|
|
disabled={editFormDisable}
|
|
/>
|
|
</ProForm.Group>
|
|
|
|
</ModalForm>
|
|
);
|
|
};
|