feat:import使用module文件名
This commit is contained in:
1708-huayu
parent
a2eb3d0473
commit
8ca5bb4e31
|
|
@ -0,0 +1,69 @@
|
|||
.reverseScrollList {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直反转 */
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* 水平居中 */
|
||||
align-items: center;
|
||||
/* 垂直居中 */
|
||||
width: 100%;
|
||||
}
|
||||
/* 线条与文本容器 */
|
||||
.lineWithText {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
/* 根据需要调整宽度 */
|
||||
text-align: center;
|
||||
}
|
||||
/* 使用伪元素创建线条 */
|
||||
.lineWithText::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #c8c7cc;
|
||||
/* 线条颜色和粗细 */
|
||||
z-index: 0;
|
||||
/* 在文本下面 */
|
||||
}
|
||||
|
||||
/* 中间文本 */
|
||||
.centerText {
|
||||
background-color: white;
|
||||
/* 背景色，确保文本清晰可见 */
|
||||
padding: 0 10px;
|
||||
/* 给文本一些内边距 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* 确保文本在上面 */
|
||||
font-size: 16px;
|
||||
/* 文本大小 */
|
||||
color: #c8c7cc;
|
||||
}
|
||||
|
||||
.logTaskContent {
|
||||
width: 80%;
|
||||
padding: 10rpx 40rpx;
|
||||
|
||||
.detailLine {
|
||||
margin-top: 0.5rem;
|
||||
display: inline-block;
|
||||
padding: 4rpx 20rpx;
|
||||
border: solid;
|
||||
border-radius: 20rpx;
|
||||
border-color: #1677FF;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.detailLineClick {
|
||||
background-color: #1677FF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import { Avatar, List, message } from 'antd';
|
||||
import {Avatar, Input, List, message} from 'antd';
|
||||
import VirtualList from 'rc-virtual-list';
|
||||
import { Button, Drawer } from 'antd';
|
||||
interface UserItem {
|
||||
email: string;
|
||||
gender: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
}
|
||||
import {Button, Drawer} from 'antd';
|
||||
import {ListDiary, SelectDiary} from "@/components/type/Diary";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
import style from "@/components/DiaryOption.module.css"
|
||||
import dayjs from "dayjs";
|
||||
import {addTaskLogAPI} from "@/components/service/Diary";
|
||||
|
||||
const CONTAINER_HEIGHT = 400;
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
const DiaryOption = () => {
|
||||
const DiaryOption = (props: SelectDiary) => {
|
||||
// 抽屉 start
|
||||
const [open, setOpen] = useState(false);
|
||||
const showDrawer = () => {
|
||||
|
|
@ -23,17 +22,54 @@ const DiaryOption = () => {
|
|||
};
|
||||
// 抽屉 end
|
||||
|
||||
// 头按钮设置 start
|
||||
const [currentIndex, setCurrentIndex] = useState(1);
|
||||
// 头按钮设置 end
|
||||
// 数据 start
|
||||
const [data, setData] = useState<UserItem[]>([]);
|
||||
const [diaryList, setDiaryList] = useState<ListDiary[]>([]);
|
||||
const [diaryReduceList, setDiaryReduceList] = useState<ListDiary[]>([])
|
||||
const [page, setPage] = useState(1);
|
||||
const noMore = {id: '0', keyId: 'o0',createdDate:new Date(), description: '没有更多了',taskId:props.taskId, enableFlag: 'day-separate'};
|
||||
const [noMoreFlag, setNoMoreFlag] = useState(false)
|
||||
const [sendValue,setSendValue] = useState<string>();
|
||||
const [sendValueFlag,setSendValueFlag] =useState(false);
|
||||
const handleSend = ()=>{
|
||||
if(sendValueFlag){
|
||||
return
|
||||
}
|
||||
setSendValueFlag(true);
|
||||
if (!sendValue?.trim()) {
|
||||
message.info("发送信息不能为空");
|
||||
return;
|
||||
}
|
||||
addTaskLogAPI({
|
||||
description: sendValue!,
|
||||
taskId: props.taskId,
|
||||
enableFlag: '1'
|
||||
}).then(res => {
|
||||
setDiaryList([res.data.data, ...diaryList])
|
||||
setSendValue(undefined)
|
||||
}).finally(() => {
|
||||
setSendValueFlag(false);
|
||||
})
|
||||
}
|
||||
|
||||
const appendData = (showMessage = true) => {
|
||||
const fakeDataUrl = `https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?page=${page}&limit=${PAGE_SIZE}`;
|
||||
fetch(fakeDataUrl)
|
||||
const fakeDataUrl = process.env.NEXT_PUBLIC_TODO_REQUEST_URL + `/task/message/diary/select`;
|
||||
fetch(fakeDataUrl, {
|
||||
method: 'POST', headers: {
|
||||
'Content-Type': 'application/json', // 指定 JSON 格式
|
||||
'Authorization': `Bearer ${localStorage.getItem('platform-security')}`,
|
||||
}, body: JSON.stringify({pageNumber: page, pageSize: 100, data: {taskId: props.taskId}})
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((body) => {
|
||||
const results = Array.isArray(body) ? body : [];
|
||||
setData(data.concat(results));
|
||||
const results = Array.isArray(body.data.content) ? body.data.content : [];
|
||||
if (results.length === 0) {
|
||||
diaryList.push(noMore);
|
||||
setNoMoreFlag(true);
|
||||
}
|
||||
setDiaryList(diaryList.concat(results));
|
||||
setPage(page + 1);
|
||||
showMessage && message.success(`${results.length} more items loaded!`);
|
||||
});
|
||||
|
|
@ -43,10 +79,38 @@ const DiaryOption = () => {
|
|||
appendData(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("处理日志集合",diaryList)
|
||||
const returnResult: ListDiary[] = []
|
||||
diaryList.filter(taskLog => {
|
||||
if (currentIndex === 0) { return true }
|
||||
else if (currentIndex === 1 && taskLog.enableFlag === "1") { return true }
|
||||
else if (currentIndex === 2 && taskLog.enableFlag === "0") { return true }
|
||||
else return false;
|
||||
}).reduce((map, taskLog) => {
|
||||
if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) {
|
||||
map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []);
|
||||
}
|
||||
map.get(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))?.push(taskLog);
|
||||
return map;
|
||||
}, new Map()).forEach((value, Key) => {
|
||||
returnResult.push(...value)
|
||||
returnResult.push({
|
||||
description: dayjs(Key).isSame(dayjs(), 'date') ? "今天" : dayjs(Key).format("YYYY-MM-DD"),
|
||||
id: dayjs(Key).format("YYYY-MM-DD"),
|
||||
enableFlag: "day-separate",
|
||||
taskId: props.taskId,
|
||||
createdDate: new Date()
|
||||
})
|
||||
})
|
||||
setDiaryReduceList(returnResult);
|
||||
}, [diaryList]);
|
||||
|
||||
const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
|
||||
// Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
|
||||
if (
|
||||
Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1
|
||||
Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1 &&
|
||||
!noMoreFlag
|
||||
) {
|
||||
appendData();
|
||||
}
|
||||
|
|
@ -54,41 +118,110 @@ const DiaryOption = () => {
|
|||
|
||||
// 数据 end
|
||||
|
||||
// 点击操作 start
|
||||
const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
|
||||
// 点击操作 end
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" onClick={showDrawer}>
|
||||
日志心得
|
||||
</Button>
|
||||
<Drawer
|
||||
style={{boxSizing:"border-box"}}
|
||||
mask={false}
|
||||
title="Basic Drawer"
|
||||
closable={{ 'aria-label': 'Close Button' }}
|
||||
title={props.taskName}
|
||||
closable={{'aria-label': 'Close Button'}}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
footer={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'stretch', // 关键：强制子项等高
|
||||
justifyContent: 'space-between',
|
||||
height: 'auto', // 父容器高度由内容决定
|
||||
}}>
|
||||
<TextArea
|
||||
rows={4}
|
||||
maxLength={255}
|
||||
showCount
|
||||
classNames={{count: 'ant-input-data-count-inner'}}
|
||||
styles={{
|
||||
count: {
|
||||
// color:"red",
|
||||
bottom: "0px"
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
resize: 'none',
|
||||
flex: 1, // 占据剩余空间
|
||||
}}
|
||||
value={sendValue}
|
||||
onChange={(val) => setSendValue(val.target.value)}
|
||||
placeholder='输入日记心得，长按日记心得有惊喜'
|
||||
onKeyDown={event => {
|
||||
console.log({event})
|
||||
if (event.ctrlKey && event.key === 'Enter') {
|
||||
handleSend();
|
||||
// 阻止换行符插入
|
||||
event.preventDefault();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
width: '2rem',
|
||||
whiteSpace: 'normal',
|
||||
wordWrap: 'break-word',
|
||||
margin: 0,
|
||||
padding: "2px",
|
||||
height: 'auto'// 移除 ，依赖父容器的 alignItems: 'stretch'
|
||||
}}
|
||||
loading={sendValueFlag}
|
||||
onClick={handleSend}
|
||||
>
|
||||
{sendValueFlag ? '发送中...' : '发送'}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="displayFlexRow">
|
||||
<Button type="primary">全部</Button>
|
||||
<Button type="primary">失效</Button>
|
||||
<Button type="primary">生效</Button>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
|
||||
type={currentIndex == 0 ? "primary" : "default"}>全部</Button>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(1)}
|
||||
type={currentIndex == 1 ? "primary" : "default"}>生效</Button>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
|
||||
type={currentIndex == 2 ? "primary" : "default"}>失效</Button>
|
||||
</div>
|
||||
<div>
|
||||
<List>
|
||||
<VirtualList
|
||||
data={data}
|
||||
data={diaryReduceList}
|
||||
height={CONTAINER_HEIGHT}
|
||||
itemHeight={47}
|
||||
itemKey="email"
|
||||
onScroll={onScroll}
|
||||
className={style.reverseScrollList}
|
||||
>
|
||||
{item => (
|
||||
<List.Item key={item.email}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.avatar} />}
|
||||
title={<a href="https://ant.design">{item.name}</a>}
|
||||
description={item.email}
|
||||
/>
|
||||
<div>Content</div>
|
||||
</List.Item>
|
||||
item.enableFlag === 'day-separate' ?
|
||||
<div className={style.container} key={item.keyId}>
|
||||
<div className={style.lineWithText}>
|
||||
<text className={style.centerText}>{item.description}</text>
|
||||
</div>
|
||||
</div>
|
||||
: <div className={style.logTaskContent} key={item.id}>
|
||||
<div
|
||||
className={`${style.detailLine} ${item.id === clickTaskDiary?.id ? style.detailLineClick : ''}`}
|
||||
onClick={() => setClickTaskDiary(item)}>
|
||||
<text
|
||||
style={{textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : ''}}>
|
||||
{item.description}
|
||||
</text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</VirtualList>
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import {httpReq} from "@/utils/axiosReq";
|
||||
import {AddDiary, ListDiary} from "@/components/type/Diary";
|
||||
import {ResponseVO} from "@/lib/definitions";
|
||||
import {AxiosResponse} from "axios";
|
||||
|
||||
export const addTaskLogAPI= (data:AddDiary):Promise<AxiosResponse<ResponseVO<ListDiary>>> =>{
|
||||
return httpReq.post(process.env.NEXT_PUBLIC_TODO_REQUEST_URL + "/task/message/diary",
|
||||
data)
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
export type ListDiary = AddDiary & {
|
||||
generateTaskId?: string,
|
||||
lastModifiedDate?: Date,
|
||||
id: string,
|
||||
// 不能以数字开头，用户滚动定位
|
||||
keyId?:string,
|
||||
createdDate: Date,
|
||||
deleteFlag?: number
|
||||
}
|
||||
export type AddDiary = {
|
||||
enableFlag: string,
|
||||
description: string,
|
||||
taskId: string,
|
||||
}
|
||||
export type SelectDiary = {
|
||||
taskName: string,
|
||||
taskId: string,
|
||||
}
|
||||
|
||||
async function postJsonData(url: string, data: object) {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST', // 或 'PUT'、'PATCH'
|
||||
headers: {
|
||||
'Content-Type': 'application/json', // 指定 JSON 格式
|
||||
},
|
||||
body: JSON.stringify(data), // 将对象转为 JSON 字符串
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json(); // 解析响应为 JSON
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
interface User {
|
||||
name: string;
|
||||
age: number;
|
||||
}
|
||||
|
||||
const user: User = { name: 'Alice', age: 25 };
|
||||
postJsonData('https://api.example.com/users', user)
|
||||
.then((result) => console.log('Success:', result))
|
||||
.catch((error) => console.error('Error:', error));
|
||||
|
|
@ -50,6 +50,7 @@ export type DataType = TaskMessage&{
|
|||
actualEndTime?:Date;
|
||||
actualTimeRange?:(string|Dayjs|undefined)[]
|
||||
children: DataType[]|undefined;
|
||||
sortNo?:number;
|
||||
}
|
||||
export type DictType={
|
||||
id:number;
|
||||
|
|
|
|||
|
|
@ -4,3 +4,7 @@ export const generateQrcodeAPI = (data:{}) => {
|
|||
return httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL + "/V2/wx/login/generate/qrcode",
|
||||
data)
|
||||
}
|
||||
export const askLoginAPI = (data:{})=>{
|
||||
return httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL + "/V2/wx/login/pc/ask/login",
|
||||
data)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import {httpReq} from "@/utils/axiosReq";
|
||||
import {unstable_noStore as noStore} from "next/dist/server/web/spec-extension/unstable-no-store";
|
||||
|
||||
export const editExpectAPI = (requestParam: {}) =>{
|
||||
noStore();
|
||||
return httpReq.put(
|
||||
process.env.NEXT_PUBLIC_TODO_REQUEST_URL + '/task/editExpect', requestParam)
|
||||
}
|
||||
|
||||
|
|
@ -6,10 +6,11 @@ import {
|
|||
import {message, theme, Modal, Button, Skeleton, Image, QRCode} from 'antd';
|
||||
import React, {useLayoutEffect} from 'react';
|
||||
import {useState} from 'react';
|
||||
import {CaptchaLoginSuccess, LoginObject} from "@/lib/login/definitions";
|
||||
import {LoginObject} from "@/lib/login/definitions";
|
||||
import {useRouter} from 'next/navigation'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {generateQrcodeAPI} from "@/lib/login/service";
|
||||
import {askLoginAPI, generateQrcodeAPI} from "@/lib/login/service";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
export default function XcxLoginPage() {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
|
@ -21,49 +22,69 @@ export default function XcxLoginPage() {
|
|||
const [qrCodeStatus, setQrCodeStatus] = useState<'active' | 'expired' | 'loading' | 'scanned'>();
|
||||
const [qrCodeValue, setQrCodeValue] = useState<string>("-");
|
||||
const generateQrcode = () => {
|
||||
// 不在二维码页面直接返回
|
||||
if (!qrCodeShow) {
|
||||
return;
|
||||
}
|
||||
if (qrCodeStatus=='loading') {
|
||||
message.info({content:"请耐心等待"})
|
||||
}else if (qrCodeStatus=='expired') {
|
||||
generateQrCode()
|
||||
setQrCode()
|
||||
}else if (qrCodeStatus=='active') {
|
||||
|
||||
}else if (qrCodeStatus=='scanned') {
|
||||
|
||||
}else {
|
||||
generateQrCode()
|
||||
setQrCode()
|
||||
}
|
||||
}
|
||||
function generateQrCode(){
|
||||
function setQrCode(){
|
||||
// 生成唯一id
|
||||
setQrCodeStatus("loading")
|
||||
const clientId: string = uuidv4();
|
||||
generateQrcodeAPI({clientId}).then(res=>{
|
||||
setQrCodeValue(JSON.stringify({
|
||||
clientId,serverId:res.data.data
|
||||
}))
|
||||
let qrCodeData={
|
||||
clientId,serverId:res.data.data,local:"马上行计划管理"
|
||||
}
|
||||
setQrCodeValue(JSON.stringify(qrCodeData))
|
||||
setQrCodeStatus("active")
|
||||
let timeout=undefined;
|
||||
// 设置定时器，每2000毫秒（2秒）执行一次myFunction
|
||||
let timerId =undefined;
|
||||
timerId = setInterval(askLogin,2000,timeout,timerId,qrCodeData);
|
||||
// 如果需要停止定时器，可以调用 clearInterval(timerId);
|
||||
// 例如：1分钟后停止定时器
|
||||
timeout = setTimeout(() => {
|
||||
setQrCodeStatus("expired")
|
||||
clearInterval(timerId);
|
||||
console.log("定时器已停止");
|
||||
}, 60000);
|
||||
}).catch(()=>{
|
||||
setQrCodeStatus("expired")
|
||||
})
|
||||
}
|
||||
// 二维码 end
|
||||
function askLogin(timeout:any,timerId:any,qrCodeData:{}){
|
||||
askLoginAPI(qrCodeData).then(res=>{
|
||||
if (res.data.status.success&&res.data.data.length>0){
|
||||
setQrCodeStatus("scanned")
|
||||
if(timeout){
|
||||
clearTimeout(timeout);
|
||||
clearInterval(timerId);
|
||||
}
|
||||
// localStorage.removeItem("platform-security")
|
||||
localStorage.setItem('platform-security', res.data.data[0].token)
|
||||
// 删除名为 'platform-security' 的Cookie
|
||||
// Cookies.remove('platform-security');
|
||||
// 设置一个有效期为7天的Cookie
|
||||
Cookies.set('platform-security', res.data.data[0].token, { expires: 7 });
|
||||
router.push('/task/project')
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
// 二维码 end
|
||||
const {token} = theme.useToken();
|
||||
const router = useRouter()
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [captchaLoginSuccessList, setCaptchaLoginSuccessList] = useState([]);
|
||||
const captchaUserNameConfirm = (captchaLoginSuccess: CaptchaLoginSuccess) => {
|
||||
messageApi.open({
|
||||
type: 'info',
|
||||
content: "使用帐号" + captchaLoginSuccess.username + "登录成功"
|
||||
})
|
||||
localStorage.setItem('platform-security', captchaLoginSuccess.token)
|
||||
router.push('/task/project')
|
||||
setOpen(false)
|
||||
setLoading(false)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -72,36 +93,27 @@ export default function XcxLoginPage() {
|
|||
}}
|
||||
>
|
||||
{contextHolder}
|
||||
<Modal
|
||||
open={open}
|
||||
title="发现您注册有多个帐号，请选择需要登录的账号"
|
||||
footer={
|
||||
captchaLoginSuccessList.map((label: CaptchaLoginSuccess, index) => (
|
||||
<Button key={label.username} onClick={() => captchaUserNameConfirm(label)}>
|
||||
{label.username}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
>
|
||||
</Modal>
|
||||
{loaded ? <LoginFormPage
|
||||
backgroundImageUrl="/20-1733751222585.jpg"
|
||||
title="马上行计划管理"
|
||||
subTitle={qrCodeShow?undefined:"使用微信扫码打开小程序"}
|
||||
containerStyle={{
|
||||
backgroundColor: 'rgba(0, 0, 0,0.65)',
|
||||
backdropFilter: 'blur(4px)',
|
||||
}}
|
||||
onFinish={(formData: LoginObject) => {
|
||||
// 二维码和小程序扫码来回切换
|
||||
setQrCodeShow(!qrCodeShow)
|
||||
if (!qrCodeShow) {
|
||||
// 生成二维码
|
||||
generateQrcode()
|
||||
}
|
||||
setQrCodeShow(!qrCodeShow)
|
||||
}}
|
||||
submitter={{ searchConfig: { submitText: qrCodeShow?"在我的-PC扫码登录或者返回":"已打开微信小程序，生成登录码。",resetText: '重置2'}}}
|
||||
>
|
||||
<div className="displayFlexColumn" style={{margin:'20px'}}>
|
||||
{
|
||||
qrCodeShow?<QRCode value={qrCodeValue} size={300} status={qrCodeStatus} onRefresh={() => console.log('refresh')} />:
|
||||
qrCodeShow?<QRCode value={qrCodeValue} size={300} status={qrCodeStatus} onRefresh={generateQrcode} />:
|
||||
<Image width={300} src="/static/pc-Web.png"/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {
|
|||
ProFormText,
|
||||
QueryFilter,
|
||||
} from '@ant-design/pro-components';
|
||||
import '@/ui/task/CustomSearchForm.module.css'
|
||||
import '@/ui/task/CustomSearchForm.modules.css'
|
||||
import {taskStateList} from "@/lib/task/project/data";
|
||||
const CustomSearchForm= () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {Button, DatePicker, Select, Space} from "antd";
|
|||
import {usePathname, useRouter} from "next/navigation";
|
||||
import {DetailModelForm} from "@/ui/task/project/DetailModelForm";
|
||||
import {OPERATION_BUTTON_TYPE, taskStateList} from "@/lib/task/project/data";
|
||||
import '@/ui/task/TitleOperation.modules.css'
|
||||
import style from '@/ui/task/TitleOperation.module.css'
|
||||
import LocalContext from "@/ui/LocalContent";
|
||||
import {RequestDateType} from "@/ui/task/RequestDateType";
|
||||
import dayjs, {Dayjs} from "dayjs";
|
||||
|
|
@ -38,7 +38,7 @@ export const TitleOperation: React.FC<TitleOperationProps> = ({
|
|||
document.title = pName;
|
||||
}
|
||||
}, [pName]);
|
||||
return <div className="container">
|
||||
return <div className={style.container}>
|
||||
<Space style={{marginTop: 0, "height": "42px", "alignContent": "center"}}>
|
||||
<DetailModelForm haveButton={true} open={false} operationId={OPERATION_BUTTON_TYPE.ADD}
|
||||
description='添加主线任务' reloadData={refreshData}/>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ import {SearchObject} from "@/lib/definitions";
|
|||
import LocalContext from "@/ui/LocalContent";
|
||||
import withDragAndDrop, {EventInteractionArgs} from "react-big-calendar/lib/addons/dragAndDrop";
|
||||
import {TaskEvent} from "@/lib/task/calendar/data";
|
||||
import {number} from "prop-types";
|
||||
import {DATE_TIME} from "@/lib/constants";
|
||||
import {editExpectAPI} from "@/lib/task/calendar/service";
|
||||
|
||||
/**
|
||||
* https://github.com/jquense/react-big-calendar?tab=readme-ov-file
|
||||
|
|
@ -26,7 +25,7 @@ const CalShow: React.FC = () => {
|
|||
dayjs.locale('zh-cn')
|
||||
const [view, setView] = useState<View>('week');
|
||||
const [date, setDate] = useState<Date>(new Date());
|
||||
const clickRef = useRef<number|undefined|null>(null)
|
||||
const clickRef = useRef<number | undefined | null>(null)
|
||||
// 展示在页面的任务,默认获取当前月的信息。
|
||||
const [events, setEvents] = useState<TaskEvent[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
@ -35,19 +34,21 @@ const CalShow: React.FC = () => {
|
|||
const [itemId, setItemId] = useState('-1');
|
||||
const [expectedStartTime, setExpectedStartTime] = useState<Dayjs>();
|
||||
const [expectedEndTime, setExpectedEndTime] = useState<Dayjs>();
|
||||
const [range, setRange] = useState<{start: Date; end: Date}>({
|
||||
const [range, setRange] = useState<{ start: Date; end: Date }>({
|
||||
start: dayjs(date).startOf('week').toDate(),
|
||||
end: dayjs(date).endOf('week').toDate()
|
||||
});
|
||||
const state=useContext(LocalContext).taskState;
|
||||
const state = useContext(LocalContext).taskState;
|
||||
|
||||
const handleViewChange = (newView: View) => {
|
||||
setView(newView);
|
||||
};
|
||||
var pid = useSearchParams().get('pid');
|
||||
function clearClickTimeout(){
|
||||
clickRef && typeof clickRef.current=== 'number' &&!isNaN(clickRef.current) && isFinite(clickRef.current)&&window.clearTimeout(clickRef.current)
|
||||
|
||||
function clearClickTimeout() {
|
||||
clickRef && typeof clickRef.current === 'number' && !isNaN(clickRef.current) && isFinite(clickRef.current) && window.clearTimeout(clickRef.current)
|
||||
}
|
||||
|
||||
const handleNavigate = (newDate: Date) => {
|
||||
console.log('handleNavigate', newDate)
|
||||
setDate(newDate);
|
||||
|
|
@ -62,7 +63,7 @@ const CalShow: React.FC = () => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("CalShow:useEffect:range",range)
|
||||
console.log("CalShow:useEffect:range", range)
|
||||
const searchListE = []
|
||||
if (pid != null) {
|
||||
searchListE.push(
|
||||
|
|
@ -82,7 +83,7 @@ const CalShow: React.FC = () => {
|
|||
return () => {
|
||||
clearClickTimeout()
|
||||
}
|
||||
}, [useContext(LocalContext),range]);
|
||||
}, [useContext(LocalContext), range]);
|
||||
const message = {
|
||||
week: '周',
|
||||
work_week: '工作周',
|
||||
|
|
@ -102,27 +103,27 @@ const CalShow: React.FC = () => {
|
|||
pageSize: 9999,
|
||||
pageNumber: 1,
|
||||
data: searchList,
|
||||
startTime:range.start,
|
||||
startTime: range.start,
|
||||
// startTime:dayjs(range.start).format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime:range.end,
|
||||
endTime: range.end,
|
||||
// endTime:dayjs(range.end).format('YYYY-MM-DD HH:mm:ss'),
|
||||
startColumn:"expected_start_time",
|
||||
endColumn:"expected_end_time"
|
||||
startColumn: "expected_start_time",
|
||||
endColumn: "expected_end_time"
|
||||
})
|
||||
getTaskTreeResult(request).then(responseD => {
|
||||
if (responseD.status.success) {
|
||||
let result:TaskEvent[] =responseD.data.content.map<TaskEvent>(taskState => {
|
||||
let result: TaskEvent[] = responseD.data.content.map<TaskEvent>(taskState => {
|
||||
return {
|
||||
start: dayjs(taskState.expectedStartTime).toDate(),
|
||||
end: dayjs(taskState.expectedEndTime).toDate(),
|
||||
title: taskState.name,
|
||||
resource: taskState.id,
|
||||
id:taskState.id,
|
||||
state:taskState.state,
|
||||
priority:taskState.priority
|
||||
id: taskState.id,
|
||||
state: taskState.state,
|
||||
priority: taskState.priority
|
||||
}
|
||||
});
|
||||
console.log('responseD.data.content:',result)
|
||||
console.log('responseD.data.content:', result)
|
||||
setEvents([...result])
|
||||
}
|
||||
})
|
||||
|
|
@ -145,14 +146,14 @@ const CalShow: React.FC = () => {
|
|||
const handleSelectEvent = useCallback(
|
||||
(event: Event, e: React.SyntheticEvent<HTMLElement>) => {
|
||||
clearClickTimeout()
|
||||
clickRef.current = window.setTimeout(()=> {
|
||||
clickRef.current = window.setTimeout(() => {
|
||||
// window.alert(event.title);
|
||||
console.log(event)
|
||||
setOperationId(OPERATION_BUTTON_TYPE.DETAIL)
|
||||
setDescription("任务详情")
|
||||
setItemId(event.resource)
|
||||
setOpen(true);
|
||||
},250)
|
||||
}, 250)
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
|
@ -166,7 +167,7 @@ const CalShow: React.FC = () => {
|
|||
|
||||
const doubleClick = (event: TaskEvent, e: React.SyntheticEvent<HTMLElement>) => {
|
||||
clearClickTimeout()
|
||||
clickRef.current = window.setTimeout(()=>{
|
||||
clickRef.current = window.setTimeout(() => {
|
||||
// 数据落库
|
||||
commonUpdate({
|
||||
updateColumnList: [{
|
||||
|
|
@ -185,40 +186,27 @@ const CalShow: React.FC = () => {
|
|||
const existing: TaskEvent | undefined = prev.find((ev: TaskEvent) => ev.resource === event.resource);
|
||||
const filtered: TaskEvent[] | undefined = prev.filter((ev: TaskEvent) => ev.resource !== event.resource);
|
||||
let result: TaskEvent[] = [];
|
||||
if (existing !== undefined&&filtered !== undefined) {
|
||||
result= [...filtered, {...existing, state:7}];
|
||||
if (existing !== undefined && filtered !== undefined) {
|
||||
result = [...filtered, {...existing, state: 7}];
|
||||
}
|
||||
let strings = state.split(",");
|
||||
console.log('result',result,strings)
|
||||
return result.filter((ev: TaskEvent) => strings.indexOf(ev.state.toString())>=0);
|
||||
console.log('result', result, strings)
|
||||
return result.filter((ev: TaskEvent) => strings.indexOf(ev.state.toString()) >= 0);
|
||||
})
|
||||
},250)
|
||||
}, 250)
|
||||
}
|
||||
|
||||
const moveEvent = useCallback(
|
||||
({event, start, end, isAllDay: droppedOnAllDaySlot = false}: EventInteractionArgs<TaskEvent>) => {
|
||||
console.log("onEventResize || onEventDrop :",start,end)
|
||||
async ({event, start, end, isAllDay: droppedOnAllDaySlot = false}: EventInteractionArgs<TaskEvent>) => {
|
||||
console.log("onEventResize || onEventDrop :", start, end, event)
|
||||
const {allDay} = event
|
||||
if (!allDay && droppedOnAllDaySlot) {
|
||||
event.allDay = true
|
||||
}
|
||||
// 数据落库
|
||||
commonUpdate({
|
||||
updateColumnList: [{
|
||||
name: 'expectedStartTime',
|
||||
code: '',
|
||||
value: start.toLocaleString()
|
||||
}, {
|
||||
name: 'expectedEndTime',
|
||||
code: '',
|
||||
value: end.toLocaleString()
|
||||
}],
|
||||
conditionColumnList: [{
|
||||
name: 'id',
|
||||
code: 'id',
|
||||
operateType: '=',
|
||||
value: event.resource
|
||||
}]
|
||||
editExpectAPI({
|
||||
expectedStartTime: start,
|
||||
expectedEndTime: end,
|
||||
id: event.resource
|
||||
})
|
||||
setEvents((prev: TaskEvent[]) => {
|
||||
const existing: TaskEvent | undefined = prev.find((ev: TaskEvent) => ev.resource === event.resource);
|
||||
|
|
@ -236,49 +224,49 @@ const CalShow: React.FC = () => {
|
|||
)
|
||||
|
||||
const eventPropGetter = useCallback(
|
||||
(event:TaskEvent) => ({
|
||||
...(event.state===7
|
||||
? { className: 'completeTask' }
|
||||
: event.priority===3?{ className: 'importantUrgentTask' }:
|
||||
event.priority===2?{ className: 'importantNotUrgentTask' }:
|
||||
event.priority===1?{ className: 'notImportantUrgentTask' }:
|
||||
{ className: 'notImportantNotUrgentTask' }),
|
||||
(event: TaskEvent) => ({
|
||||
...(event.state === 7
|
||||
? {className: 'completeTask'}
|
||||
: event.priority === 3 ? {className: 'importantUrgentTask'} :
|
||||
event.priority === 2 ? {className: 'importantNotUrgentTask'} :
|
||||
event.priority === 1 ? {className: 'notImportantUrgentTask'} :
|
||||
{className: 'notImportantNotUrgentTask'}),
|
||||
}),
|
||||
[setEvents]
|
||||
)
|
||||
const rangeChange = (rangeLet: Date[]|{ start: Date; end: Date },current?:View|undefined)=>{
|
||||
console.log("rangeChange:",rangeLet,(current?current:view))
|
||||
const rangeChange = (rangeLet: Date[] | { start: Date; end: Date }, current?: View | undefined) => {
|
||||
console.log("rangeChange:", rangeLet, (current ? current : view))
|
||||
// view 为天的时候类型为数组，index:0为当天
|
||||
if ((current?current:view)==="day"&&Array.isArray(rangeLet)) {
|
||||
if (range.start.valueOf()>rangeLet[0].valueOf()){
|
||||
setRange({...range,start:rangeLet[0]})
|
||||
}else if (range.end.valueOf()<rangeLet[0].valueOf()){
|
||||
setRange({...range,end:rangeLet[0]})
|
||||
if ((current ? current : view) === "day" && Array.isArray(rangeLet)) {
|
||||
if (range.start.valueOf() > rangeLet[0].valueOf()) {
|
||||
setRange({...range, start: rangeLet[0]})
|
||||
} else if (range.end.valueOf() < rangeLet[0].valueOf()) {
|
||||
setRange({...range, end: rangeLet[0]})
|
||||
}
|
||||
}
|
||||
// 为周的时候类型为数组，周一到周日七天
|
||||
if ((current?current:view)==="week"&&Array.isArray(rangeLet)){
|
||||
if (range.start.valueOf()>rangeLet[0].valueOf()){
|
||||
setRange({...range,start:rangeLet[0]})
|
||||
if ((current ? current : view) === "week" && Array.isArray(rangeLet)) {
|
||||
if (range.start.valueOf() > rangeLet[0].valueOf()) {
|
||||
setRange({...range, start: rangeLet[0]})
|
||||
}
|
||||
if (range.end.valueOf()<rangeLet[6].valueOf()){
|
||||
setRange({...range,end:rangeLet[6]})
|
||||
if (range.end.valueOf() < rangeLet[6].valueOf()) {
|
||||
setRange({...range, end: rangeLet[6]})
|
||||
}
|
||||
}
|
||||
// 为周的时候类型为对象
|
||||
if ((current?current:view)==="month"&& rangeLet && !Array.isArray(rangeLet)){
|
||||
if (range.start.valueOf()>rangeLet.start.valueOf()){
|
||||
setRange({...range,start:rangeLet.start})
|
||||
if ((current ? current : view) === "month" && rangeLet && !Array.isArray(rangeLet)) {
|
||||
if (range.start.valueOf() > rangeLet.start.valueOf()) {
|
||||
setRange({...range, start: rangeLet.start})
|
||||
}
|
||||
if (range.end.valueOf()<rangeLet.end.valueOf()){
|
||||
setRange({...range,end:rangeLet.end})
|
||||
if (range.end.valueOf() < rangeLet.end.valueOf()) {
|
||||
setRange({...range, end: rangeLet.end})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
return <div className="App" style={{height: '90vh'}}>
|
||||
{open && <DetailModelForm operationId={operationId} description={description} open={open} haveButton={false}
|
||||
itemId={itemId} pid={pid?pid:'0'}
|
||||
itemId={itemId}
|
||||
reloadData={reloadData} expectedStartTime={expectedStartTime}
|
||||
expectedEndTime={expectedEndTime}/>}
|
||||
<DragAndDropCalendar
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export type PidSelectTree = { label: string; value: string; pid: string; childre
|
|||
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 [requestTask,setRequestTask]=useState<DataType>()
|
||||
const [editFormDisable, setEditFormDisable] = useState(props.operationId === OPERATION_BUTTON_TYPE.DETAIL)
|
||||
// 团队第一层 pid必须为0
|
||||
const [taskType, setTaskType] = useState('0')
|
||||
|
|
@ -61,6 +61,10 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
task.data.expectedTimeRange = [task.data.expectedStartTime ? dayjs(task.data.expectedStartTime) : undefined,
|
||||
task.data.expectedEndTime ? dayjs(task.data.expectedEndTime) : undefined];
|
||||
form.setFieldsValue(task.data)
|
||||
if (task.data.pid=="0"){
|
||||
form.setFieldValue("pid",undefined)
|
||||
}
|
||||
setRequestTask(task.data)
|
||||
console.log("form.setFieldsValue(task.data)" + JSON.stringify(task.data))
|
||||
} else {
|
||||
message.error(task.status.message);
|
||||
|
|
@ -89,6 +93,10 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
}
|
||||
|
||||
// 如果不是添加任务需要回显
|
||||
// Form 当中的 initialValues
|
||||
// ProComponents 底层也是封装的 antd ，所以用法也和 antd 相同。注意 initialValues 不能被 setState 动态更新，
|
||||
// 所以你需要用 setFieldsValue 来更新。 initialValues 只在 form 初始化时生效且只生效一次，如果你需要异步加载，
|
||||
// 推荐使用 request，或者 initialValues ? <Form/> : null
|
||||
return (
|
||||
<ModalForm<DataType>
|
||||
title={props.description}
|
||||
|
|
@ -145,13 +153,17 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
</Button>
|
||||
</Popconfirm> : undefined
|
||||
,
|
||||
<DiaryOption/>,
|
||||
requestTask&&requestTask.id?<DiaryOption taskId={requestTask.id} taskName={requestTask.name}/>:undefined,
|
||||
...defaultDoms
|
||||
];
|
||||
},
|
||||
} : undefined}
|
||||
onFinish={async (values) => {
|
||||
console.log('Received values of form: ', values);
|
||||
console.log('Received values of form: ', values,{...requestTask,...values});
|
||||
if (requestTask) {
|
||||
const {sortNo}=requestTask;
|
||||
values.sortNo=sortNo;
|
||||
}
|
||||
if (values.pid === undefined) {
|
||||
values.pid = '0'
|
||||
}
|
||||
|
|
@ -256,11 +268,14 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
{
|
||||
pageSize: 1000,
|
||||
pageNumber: 1,
|
||||
data: [{code: 'pid', value: '0', operateType: '='}, {
|
||||
code: 'state',
|
||||
value: '8,9',
|
||||
operateType: 'IN'
|
||||
}, {code: '', value: true, operateType: "TREE"}]
|
||||
data: [{code: 'pid', value: '0', operateType: '='},
|
||||
// 如果父任务完成会导致父任务不展示
|
||||
// {
|
||||
// code: 'state',
|
||||
// value: '8,9',
|
||||
// operateType: 'IN'
|
||||
// },
|
||||
{code: '', value: true, operateType: "TREE"}]
|
||||
}
|
||||
)).then(result => childReduce(result.data.content))
|
||||
}}
|
||||
|
|
@ -269,8 +284,8 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
fieldProps={{
|
||||
onSelect: (e, node) => {
|
||||
console.log('onSelect', e, node);
|
||||
setPid(e)
|
||||
}
|
||||
// setPid(e)
|
||||
},
|
||||
}}
|
||||
disabled={editFormDisable}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ httpReq.interceptors.response.use(
|
|||
message.error('系统异常');
|
||||
} else if (response.status >= 400 && response.status <= 500) {
|
||||
message.warning('无权限');
|
||||
}else if(response.data.status.success == false){
|
||||
message.error(response.data.status.message);
|
||||
}
|
||||
return response;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue