feat:二维码下载
This commit is contained in:
1708-huayu
parent
5493acab8e
commit
4e3bc8ddc2
|
|
@ -16,9 +16,6 @@ import {OPERATION_BUTTON_TYPE} from "@/lib/task/project/data";
|
|||
const DiaryOption = (props: SelectDiary) => {
|
||||
// 抽屉 start
|
||||
const [open, setOpen] = useState(false);
|
||||
const showDrawer = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const onClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
|
@ -272,8 +269,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
}
|
||||
},
|
||||
]
|
||||
const items: MenuProps['items'] = [
|
||||
];
|
||||
const items: MenuProps['items'] = [];
|
||||
items.push(...commonItems)
|
||||
items.splice(1, 0, {
|
||||
label: '失效',
|
||||
|
|
@ -282,8 +278,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
editEnableFlag("0")
|
||||
},
|
||||
})
|
||||
const itemsEnable: MenuProps['items'] = [
|
||||
];
|
||||
const itemsEnable: MenuProps['items'] = [];
|
||||
itemsEnable.push(...commonItems)
|
||||
itemsEnable.splice(1, 0, {
|
||||
label: '生效',
|
||||
|
|
@ -296,7 +291,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button type="primary" onClick={showDrawer}>
|
||||
<Button type={open?"primary":"default"} onClick={() => setOpen(!open)}>
|
||||
日志心得
|
||||
</Button>
|
||||
<Drawer
|
||||
|
|
|
|||
|
|
@ -0,0 +1,270 @@
|
|||
import React, {useState, useEffect, Fragment} from 'react';
|
||||
import dayjs, {Dayjs} from 'dayjs';
|
||||
import {Button, Input, Modal, Segmented} from 'antd';
|
||||
import style from "@/components/SettingCton.module.css"
|
||||
|
||||
type PresetType = 'everyMinute' | 'everyHour' | 'daily' | 'weekly' | 'monthly';
|
||||
|
||||
interface CronGeneratorProps {
|
||||
setCronFunction: (data: boolean) => void;
|
||||
cron?: string;
|
||||
}
|
||||
|
||||
const CronGenerator: React.FC<CronGeneratorProps> = ({setCronFunction, cron}) => {
|
||||
const [showModal,setShowModal] = useState(false);
|
||||
const [current, setCurrent] = useState<number>(0);
|
||||
const [cronSeconds, setCronSeconds] = useState<string>(cron ? cron.split(' ')[0] : '*');
|
||||
const [cronMinutes, setCronMinutes] = useState<string>(cron ? cron.split(' ')[1] : '*');
|
||||
const [cronHours, setCronHours] = useState<string>(cron ? cron.split(' ')[2] : '*');
|
||||
const [cronDayOfMonth, setCronDayOfMonth] = useState<string>(cron ? cron.split(' ')[3] : '*');
|
||||
const [cronMonth, setCronMonth] = useState<string>(cron ? cron.split(' ')[4] : '*');
|
||||
const [cronDayOfWeek, setCronDayOfWeek] = useState<string>(cron ? cron.split(' ')[5] : '*');
|
||||
const [everyNumber, setEveryNumber] = useState<number>(1);
|
||||
const [nextOccurrences, setNextOccurrences] = useState<Dayjs[]>([]);
|
||||
const [fullCronExpression, setFullCronExpression] = useState<string>(
|
||||
`${cronMinutes} ${cronHours} ${cronDayOfMonth} ${cronMonth} ${cronDayOfWeek}`.trim()
|
||||
);
|
||||
|
||||
const titleItem = ['具体时间', '周期', '自定义cron'];
|
||||
|
||||
useEffect(() => {
|
||||
setFullCronExpression(`${cronMinutes} ${cronHours} ${cronDayOfMonth} ${cronMonth} ${cronDayOfWeek}`.trim());
|
||||
}, [cronMinutes, cronHours, cronDayOfMonth, cronMonth, cronDayOfWeek]);
|
||||
|
||||
const onClickItem = (index: number) => {
|
||||
setCurrent(index);
|
||||
};
|
||||
|
||||
const onClickConfirmCron = () => {
|
||||
if (fullCronExpression) {
|
||||
try {
|
||||
// Replace generateNextTimeAPI with your actual API call
|
||||
// generateNextTimeAPI('0 ' + fullCronExpression).then(res => {
|
||||
// setNextOccurrences(res.map((next: string) => dayjs(next)));
|
||||
// setCronFunction(false);
|
||||
// });
|
||||
console.log('Cron confirmed:', fullCronExpression);
|
||||
setCronFunction(false);
|
||||
} catch (error) {
|
||||
console.error('Cron expression is invalid', error);
|
||||
}
|
||||
} else {
|
||||
setCronFunction(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetOccurrences = () => {
|
||||
setCronSeconds('0');
|
||||
setCronMinutes('*');
|
||||
setCronHours('*');
|
||||
setCronDayOfMonth('*');
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek('*');
|
||||
};
|
||||
|
||||
const generateNextOccurrences = () => {
|
||||
try {
|
||||
if (!fullCronExpression) {
|
||||
console.error('Please set the next generation time correctly');
|
||||
return;
|
||||
}
|
||||
console.log('cron' + fullCronExpression);
|
||||
// Replace generateNextTimeAPI with your actual API call
|
||||
// generateNextTimeAPI('0 ' + fullCronExpression).then(res => {
|
||||
// setNextOccurrences(res.map((next: string) => dayjs(next)));
|
||||
// });
|
||||
} catch (error) {
|
||||
console.error('Cron expression is invalid', error);
|
||||
}
|
||||
};
|
||||
|
||||
const setPreset = (type: PresetType) => {
|
||||
switch (type) {
|
||||
case 'everyMinute':
|
||||
setCronSeconds('0');
|
||||
setCronMinutes(`*/${everyNumber}`);
|
||||
setCronHours('*');
|
||||
setCronDayOfMonth('*');
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek('*');
|
||||
break;
|
||||
case 'everyHour':
|
||||
setCronSeconds('0');
|
||||
setCronMinutes('0');
|
||||
setCronHours(`*/${everyNumber}`);
|
||||
setCronDayOfMonth('*');
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek('*');
|
||||
break;
|
||||
case 'daily':
|
||||
setCronSeconds('0');
|
||||
setCronMinutes('0');
|
||||
setCronHours('0');
|
||||
setCronDayOfMonth(`*/${everyNumber}`);
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek('*');
|
||||
break;
|
||||
case 'weekly':
|
||||
setCronSeconds('0');
|
||||
setCronMinutes('0');
|
||||
setCronHours('0');
|
||||
setCronDayOfMonth('*');
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek(`${everyNumber}`);
|
||||
break;
|
||||
case 'monthly':
|
||||
setCronSeconds('0');
|
||||
setCronMinutes('0');
|
||||
setCronHours('0');
|
||||
setCronDayOfMonth('1');
|
||||
setCronMonth('*');
|
||||
setCronDayOfWeek('*');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button type="primary" onClick={()=>setShowModal(!showModal)}>
|
||||
设置时间
|
||||
</Button>
|
||||
<Modal
|
||||
title="设置时间"
|
||||
closable={{ 'aria-label': 'Custom Close Button' }}
|
||||
open={showModal}
|
||||
// onOk={handleOk}
|
||||
onCancel={()=>setShowModal(false)}
|
||||
>
|
||||
<div className={style.container}>
|
||||
<div className={style.cronForm}>
|
||||
<div>
|
||||
<Segmented
|
||||
value={titleItem[current]}
|
||||
options={titleItem}
|
||||
onChange={(value) => onClickItem(titleItem.indexOf(value as string))}
|
||||
block
|
||||
/>
|
||||
</div>
|
||||
<div className={style.content}>
|
||||
{current === 0 && (
|
||||
<>
|
||||
<div className={style.formItem}>
|
||||
<div className={style.label}>分钟（0-59）</div>
|
||||
<Input
|
||||
className={style.input}
|
||||
value={cronMinutes}
|
||||
onChange={(e) =>
|
||||
setCronMinutes(e.target.value)}
|
||||
placeholder="*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.label}>小时（0-23）</div>
|
||||
<Input
|
||||
className={style.input}
|
||||
value={cronHours}
|
||||
onChange={(e) =>
|
||||
setCronHours(e.target.value)}
|
||||
placeholder="*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.label}>日期（1-31）</div>
|
||||
<Input
|
||||
className={style.input}
|
||||
value={cronDayOfMonth}
|
||||
onChange={(e) => setCronDayOfMonth(e.target.value)}
|
||||
placeholder="*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.label}>月份（1-12）</div>
|
||||
<Input
|
||||
className={style.input}
|
||||
value={cronMonth}
|
||||
onChange={(e) => setCronMonth(e.target.value)}
|
||||
placeholder="*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.label}>星期（0-6，0=周日）</div>
|
||||
<Input
|
||||
className={style.input}
|
||||
value={cronDayOfWeek}
|
||||
onChange={(e) => setCronDayOfWeek(e.target.value)}
|
||||
placeholder="*"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{current === 1 && (
|
||||
<div className={style.presetButtons}>
|
||||
<div>
|
||||
<Input
|
||||
type="number"
|
||||
value={everyNumber}
|
||||
onChange={(e) => setEveryNumber(parseInt(e.target.value) || 1)}
|
||||
placeholder="1"
|
||||
/>
|
||||
</div>
|
||||
<Button className={style.presetBtn} onClick={() => setPreset('everyMinute')}>
|
||||
每{everyNumber}分钟
|
||||
</Button>
|
||||
<Button className={style.presetBtn} onClick={() => setPreset('everyHour')}>
|
||||
每{everyNumber}小时
|
||||
</Button>
|
||||
<Button className={style.presetBtn} onClick={() => setPreset('daily')}>
|
||||
每{everyNumber}天
|
||||
</Button>
|
||||
<Button className={style.presetBtn} onClick={() => setPreset('weekly')}>
|
||||
每周{everyNumber}
|
||||
</Button>
|
||||
<Button className={style.presetBtn} onClick={() => setPreset('monthly')}>
|
||||
每月
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{current === 2 && (
|
||||
<div className={style.presetButtons}>
|
||||
<div style={{color: 'red'}}>!!!目前只支持5位设定，分钟、小时、日、月、星期</div>
|
||||
<Input value={fullCronExpression}
|
||||
onChange={(e) => setFullCronExpression(e.target.value)}/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={style.buttonFlex}>
|
||||
<Button size="small" danger onClick={resetOccurrences}>
|
||||
重置
|
||||
</Button>
|
||||
<Button size="small" type="primary" onClick={generateNextOccurrences}>
|
||||
查看最近触发时间
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{nextOccurrences.length > 0 && (
|
||||
<div className={style.results}>
|
||||
<div className={style.resultsTitle}>最近触发时间：</div>
|
||||
{nextOccurrences.map((item, index) => (
|
||||
<div className={style.occurrenceItem} key={index}>
|
||||
<div>{dayjs(item).format('YYYY-MM-DD HH:mm')}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Button type="primary" onClick={onClickConfirmCron}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default CronGenerator;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
.container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cronForm {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.formItem {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.results {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.resultsTitle {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.occurrence-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.presetButtons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.buttonFlex {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.presetBtn {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
|
@ -1,13 +1,40 @@
|
|||
import React, {Fragment, useEffect, useState} from 'react';
|
||||
import {Button, Image, Modal, QRCode} from 'antd';
|
||||
import {Button, Image, Input, Modal, QRCode, Space } from 'antd';
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
import {copyToClipboard} from "@/lib/copyToClipboard";
|
||||
|
||||
const ShareOption = (props: { taskId: string }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [buttonIndex, setButtonIndex] = useState(0);
|
||||
const [buttonIndex, setButtonIndex] = useState(1);
|
||||
const [qrCodeValue, setQrCodeValue] = useState<string>("-");
|
||||
const [qrCodeStatus, setQrCodeStatus]=useState<'active' | 'expired' | 'loading' | 'scanned'>("active");
|
||||
const [qrCodeStatus, setQrCodeStatus] = useState<'active' | 'expired' | 'loading' | 'scanned'>("loading");
|
||||
|
||||
function doDownload(url: string, fileName: string) {
|
||||
const a = document.createElement('a');
|
||||
a.download = fileName;
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
const downloadCanvasQRCode = () => {
|
||||
const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
|
||||
if (canvas) {
|
||||
const url = canvas.toDataURL();
|
||||
doDownload(url, 'QRCode.png');
|
||||
}
|
||||
};
|
||||
|
||||
const downloadSvgQRCode = () => {
|
||||
const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');
|
||||
const svgData = new XMLSerializer().serializeToString(svg!);
|
||||
const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
console.log({url})
|
||||
doDownload(url, '微信小程序马上行计划管理扫码加入计划.svg');
|
||||
};
|
||||
|
||||
const generateQrcode = () => {
|
||||
|
||||
|
|
@ -16,24 +43,18 @@ const ShareOption = (props:{taskId:string} ) => {
|
|||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
setOpen(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
// 分享人必须有权限
|
||||
// 生成分享信息同时适用链接和二维码
|
||||
const clientId: string = uuidv4();
|
||||
let qrCodeData = {
|
||||
taskId: props.taskId, pass: clientId, local: "马上行计划管理", opType: "SHARE_OPTION"
|
||||
}
|
||||
setQrCodeValue(JSON.stringify(qrCodeData))
|
||||
setQrCodeStatus("active")
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -43,41 +64,55 @@ const ShareOption = (props:{taskId:string} ) => {
|
|||
</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
title="Title"
|
||||
onOk={handleOk}
|
||||
title="分享好友"
|
||||
// onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
width={700}
|
||||
footer={[
|
||||
<Button key="back" onClick={handleCancel}>
|
||||
返回
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" loading={loading} onClick={handleOk}>
|
||||
<Button key="qrcode"
|
||||
type={buttonIndex == 1 ? "primary" : "default"}
|
||||
// loading={loading}
|
||||
onClick={() => setButtonIndex(1)}>
|
||||
使用二维码
|
||||
</Button>,
|
||||
<Button
|
||||
key="link"
|
||||
href="https://google.com"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
loading={loading}
|
||||
onClick={handleOk}
|
||||
// href="https://google.com"
|
||||
// target="_blank"
|
||||
type={buttonIndex == 2 ? "primary" : "default"}
|
||||
// loading={loading}
|
||||
onClick={() => setButtonIndex(2)}
|
||||
>
|
||||
使用连接
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
{buttonIndex==1&& <div>
|
||||
<div>
|
||||
{buttonIndex == 1 && <div className="displayFlexRow">
|
||||
<div className="displayFlexColumn">
|
||||
<div className="title">微信小程序二维码</div>
|
||||
<Image width={300} src="/static/pc-Web.png"/>
|
||||
<Button>下载</Button>
|
||||
<Button
|
||||
onClick={() => doDownload("/static/pc-Web.png", '微信小程序马上行计划管理.png')}>下载</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div className="displayFlexColumn" id="myqrcode">
|
||||
<div className="title">小程序扫描二维码，有效期7天</div>
|
||||
<QRCode value={qrCodeValue} size={300} status={qrCodeStatus} onRefresh={generateQrcode}/>
|
||||
<Button>下载</Button>
|
||||
<QRCode type="svg" value={qrCodeValue} size={300} status={qrCodeStatus}
|
||||
onRefresh={generateQrcode}/>
|
||||
<Button onClick={downloadSvgQRCode}>下载</Button>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{buttonIndex == 2 && <div>
|
||||
<div className="title">分享链接7日内有效</div>
|
||||
<Space.Compact style={{width: '100%'}}>
|
||||
<Input defaultValue="https://www.huaruyu.com" readOnly/>
|
||||
<Button loading={qrCodeStatus=="loading"}
|
||||
onClick={()=>copyToClipboard("https://www.huaruyu.com")}
|
||||
type="primary">复制链接</Button>
|
||||
</Space.Compact>
|
||||
</div>}
|
||||
</Modal>
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
import React, {CSSProperties, Fragment, useState} from "react";
|
||||
import {DragDropContext, Droppable, Draggable, DropResult, DraggingStyle, NotDraggingStyle} from "react-beautiful-dnd";
|
||||
import {TaskStepSortVO} from "@/components/type/TaskSort.d";
|
||||
import {Button, Drawer} from "antd";
|
||||
|
||||
// fake data generator
|
||||
const getItems = (count: number, offset = 0) =>
|
||||
Array.from({length: count}, (v, k) => k).map(k => ({
|
||||
id: `item-${k + offset}-${new Date().getTime()}`,
|
||||
stepDesc: `item ${k + offset}`,
|
||||
sortIndex: k + offset,
|
||||
}));
|
||||
|
||||
const reorder = (list: TaskStepSortVO[], startIndex: number, endIndex: number) => {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
return result;
|
||||
};
|
||||
const grid = 8;
|
||||
|
||||
const getItemStyle = (isDragging: boolean, draggableStyle: DraggingStyle | NotDraggingStyle | undefined): CSSProperties => ({
|
||||
// some basic styles to make the items look a bit nicer
|
||||
userSelect: "none",
|
||||
padding: grid * 2,
|
||||
margin: `0 0 ${grid}px 0`,
|
||||
|
||||
// change background colour if dragging
|
||||
background: isDragging ? "lightgreen" : "grey",
|
||||
|
||||
// styles we need to apply on draggables
|
||||
...draggableStyle
|
||||
});
|
||||
const getListStyle = (isDraggingOver: boolean) => ({
|
||||
background: isDraggingOver ? "lightblue" : "lightgrey",
|
||||
padding: grid,
|
||||
width: 250
|
||||
});
|
||||
|
||||
const StepSort = (props: { taskId: string }) => {
|
||||
const [state, setState] = useState<TaskStepSortVO[]>(getItems(5, 10));
|
||||
// 抽屉 start
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function onDragEnd(result: DropResult) {
|
||||
const {source, destination} = result;
|
||||
// dropped outside the list
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
const items = reorder(state, source.index, destination.index);
|
||||
let newState = [...state];
|
||||
newState = items;
|
||||
setState(newState);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button type={open ? "primary" : "default"} onClick={() => setOpen(!open)}>
|
||||
查看步骤
|
||||
</Button>
|
||||
<Drawer>
|
||||
<div style={{display: "flex"}}>
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable key="sortDroppable" droppableId="sortDroppableId">
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
style={getListStyle(snapshot.isDraggingOver)}
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
{state.map((item, index) => (
|
||||
<Draggable
|
||||
key={item.id}
|
||||
draggableId={item.id}
|
||||
index={index}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={getItemStyle(
|
||||
snapshot.isDragging,
|
||||
provided.draggableProps.style
|
||||
)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around"
|
||||
}}
|
||||
>
|
||||
{item.stepDesc}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
</Drawer>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
export default StepSort
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export type TaskStepSortVO = {
|
||||
id: string,
|
||||
sortIndex: number,
|
||||
stepDesc: string
|
||||
}
|
||||
|
|
@ -148,7 +148,7 @@ const CalShow: React.FC = () => {
|
|||
clearClickTimeout()
|
||||
clickRef.current = window.setTimeout(() => {
|
||||
// window.alert(event.title);
|
||||
console.log(event)
|
||||
console.log("event")
|
||||
setOperationId(OPERATION_BUTTON_TYPE.DETAIL)
|
||||
setDescription("任务详情")
|
||||
setItemId(event.resource)
|
||||
|
|
@ -265,7 +265,10 @@ const CalShow: React.FC = () => {
|
|||
|
||||
}
|
||||
return <div className="App" style={{height: '90vh'}}>
|
||||
{open && <DetailModelForm operationId={operationId} description={description} open={open} haveButton={false}
|
||||
{open && <DetailModelForm operationId={operationId}
|
||||
description={description}
|
||||
open={open}
|
||||
haveButton={false}
|
||||
itemId={itemId}
|
||||
reloadData={reloadData} expectedStartTime={expectedStartTime}
|
||||
closeOpen={()=>setOpen(false)}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import {
|
|||
ProFormSelect,
|
||||
ProFormText, ProFormTextArea, ProFormTreeSelect,
|
||||
} from '@ant-design/pro-components';
|
||||
import {Button, Form, message, Popconfirm} from 'antd';
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Form, message, Popconfirm, Spin} from 'antd';
|
||||
import React, {Fragment, useEffect, useState} from "react";
|
||||
import {
|
||||
addTask, deleteTask, getTask,
|
||||
getTaskTreeResult,
|
||||
|
|
@ -19,6 +19,8 @@ import {DataType} from "@/lib/definitions";
|
|||
import dayjs, {Dayjs} from "dayjs";
|
||||
import DiaryOption from "@/components/DiaryOption";
|
||||
import ShareOption from "@/components/ShareOption";
|
||||
import StepSort from "@/components/StepSort";
|
||||
import SettingCron from "@/components/SettingCron";
|
||||
|
||||
export type DetailModelFormProps = {
|
||||
// 当前内容id
|
||||
|
|
@ -52,6 +54,8 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
const [editFormDisable, setEditFormDisable] = useState(props.operationId === OPERATION_BUTTON_TYPE.DETAIL)
|
||||
// 团队第一层 pid必须为0
|
||||
const [taskType, setTaskType] = useState('0')
|
||||
const [spinning, setSpinning] = useState(true)
|
||||
const [operationRequest,setOperationRequest] = useState(false)
|
||||
useEffect(() => {
|
||||
if (props.itemId != undefined && (
|
||||
props.operationId === OPERATION_BUTTON_TYPE.DETAIL || props.operationId === OPERATION_BUTTON_TYPE.UPDATE)) {
|
||||
|
|
@ -69,13 +73,19 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
if (task.data.pid == "0") {
|
||||
form.setFieldValue("pid", undefined)
|
||||
}
|
||||
if (task.data.taskType) {
|
||||
setTaskType(task.data.taskType)
|
||||
}
|
||||
setRequestTask(task.data)
|
||||
console.log("form.setFieldsValue(task.data)" + JSON.stringify(task.data))
|
||||
} else {
|
||||
message.error(task.status.message);
|
||||
props.reloadData?.()
|
||||
}
|
||||
})
|
||||
}).finally(() => {
|
||||
setSpinning(false)
|
||||
}
|
||||
)
|
||||
} 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],
|
||||
|
|
@ -84,6 +94,7 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
'name': props.taskContent && props.taskContent?.length > 10 ? props.taskContent.substring(0, 10) : props.taskContent,
|
||||
};
|
||||
form.setFieldsValue(data)
|
||||
setSpinning(false)
|
||||
}
|
||||
}, [props])
|
||||
|
||||
|
|
@ -105,9 +116,11 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
// 所以你需要用 setFieldsValue 来更新。 initialValues 只在 form 初始化时生效且只生效一次，如果你需要异步加载，
|
||||
// 推荐使用 request，或者 initialValues ? <Form/> : null
|
||||
return (
|
||||
<Fragment>
|
||||
<Spin spinning={spinning} fullscreen />
|
||||
<ModalForm<DataType>
|
||||
title={props.description}
|
||||
open={props.open && !props.haveButton}
|
||||
open={!spinning&&props.open && !props.haveButton}
|
||||
trigger={props.haveButton ?
|
||||
<Button type="primary">
|
||||
<PlusOutlined/>
|
||||
|
|
@ -115,6 +128,7 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
</Button> : undefined
|
||||
}
|
||||
form={form}
|
||||
loading={operationRequest}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
|
|
@ -159,16 +173,20 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
</Button>
|
||||
</Popconfirm> : undefined,
|
||||
requestTask && requestTask.id ?
|
||||
<DiaryOption key="diary" taskId={requestTask.id} taskName={requestTask.name}/> : undefined,
|
||||
<DiaryOption key="diary" taskId={requestTask.id}
|
||||
taskName={requestTask.name}/> : undefined,
|
||||
]
|
||||
|
||||
// 非新增或者编辑状态不展示
|
||||
if (!editFormDisable) {
|
||||
result.push(...defaultDoms)
|
||||
} else {
|
||||
if (props.taskType=='1') {
|
||||
if (editFormDisable && taskType == '1') {
|
||||
result.push(<ShareOption taskId={props.itemId!}/>)
|
||||
}
|
||||
if (editFormDisable && taskType == '2') {
|
||||
result.push(<StepSort taskId={props.itemId!}/>)
|
||||
}
|
||||
result.push(<Button type="primary" key="close"
|
||||
onClick={() => props.closeOpen?.()}>关闭</Button>)
|
||||
}
|
||||
|
|
@ -186,7 +204,8 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
// }
|
||||
// return defaultDoms;
|
||||
const result = defaultDoms.filter(defaultButton => defaultButton.key == 'rest');
|
||||
result.push(<Button type="primary" key="create-team" onClick={() => form.submit()}>{taskType=='1'?"创建团队":"确认"}
|
||||
result.push(<Button type="primary" key="create-team"
|
||||
onClick={() => form.submit()}>{taskType == '1' ? "创建团队" : "确认"}
|
||||
</Button>)
|
||||
return result;
|
||||
}
|
||||
|
|
@ -196,6 +215,7 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
{/* onFinish 返回true关闭窗口，范湖false不关闭窗口 */
|
||||
}
|
||||
console.log('Received values of form: ', values, {...requestTask, ...values});
|
||||
setOperationRequest(true)
|
||||
if (requestTask) {
|
||||
const {sortNo} = requestTask;
|
||||
values.sortNo = sortNo;
|
||||
|
|
@ -261,6 +281,7 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
}
|
||||
);
|
||||
}
|
||||
setOperationRequest(false)
|
||||
return result;
|
||||
}}
|
||||
>
|
||||
|
|
@ -407,7 +428,12 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
|||
disabled={editFormDisable}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
{taskType=="3"&&<SettingCron setCronFunction={
|
||||
()=>{}
|
||||
}/>}
|
||||
|
||||
</ModalForm>
|
||||
</Fragment>
|
||||
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue