587 lines
23 KiB
TypeScript
587 lines
23 KiB
TypeScript
import './ai-helper-mod.css'
|
||
import {
|
||
Button,
|
||
// Divider, Dropdown, Space,
|
||
Table, TableProps, Modal,
|
||
// notification
|
||
} from "antd";
|
||
// const close = () => {
|
||
// console.log(
|
||
// 'Notification was closed. Either the close button was clicked or duration time elapsed.',
|
||
// );
|
||
// };
|
||
import {
|
||
// CheckOutlined,
|
||
LoadingOutlined,
|
||
// ReloadOutlined,
|
||
RedoOutlined
|
||
} from "@ant-design/icons";
|
||
import { useEffect, useState } from "react";
|
||
import { IProjMod } from "../../../interfaces/proj/IProj.ts";
|
||
import EditModal from '../../EditModal/EditModal.tsx'
|
||
import ConfigModModal from '../../ConfigModModal/ConfigModModal.tsx'
|
||
import { get } from "../../../util/AjaxUtils.ts";
|
||
import { useParams } from "react-router-dom";
|
||
import { SearchOutlined } from '@ant-design/icons';
|
||
import noTextImg from '../../../static/noText.png'
|
||
import {
|
||
message
|
||
} from "antd";
|
||
type PropsType = {
|
||
mods: IProjMod[];
|
||
newMods: ProjModType[],
|
||
handleGenerate: () => void;
|
||
handleSave: (index: number, mod: ProjModType) => void;
|
||
handleResaveField: (index: number, projModId: string) => void;
|
||
handleRemove: (index: number, projModId: string, item: IProjMod) => void;
|
||
handleEdit: (index: number, projModId: string, item: IProjMod) => void;
|
||
setActiveTab: (key: string) => void;
|
||
xixi: any;
|
||
projIntroduction: string;
|
||
isFast: boolean;
|
||
setisFast: any;
|
||
setIsProjModArrayLoading: any;
|
||
chargeType: string;
|
||
isDisabled?: boolean;
|
||
}
|
||
|
||
type ProjModType = {
|
||
name: string,
|
||
desc: string,
|
||
}
|
||
|
||
export default function AiHelperMod(props: PropsType) {
|
||
const height = window.innerHeight - 265;
|
||
// 菜单状态是否可以编辑
|
||
const [messageApi] = message.useMessage();
|
||
const [modArray, setModArray] = useState<IProjMod[]>([]);
|
||
const [newModArray, setNewModArray] = useState<ProjModType[]>([]);
|
||
const [id, setId] = useState('')
|
||
|
||
const [configModal, setConfigModal] = useState(false)
|
||
const [editModal, setEditModal] = useState(false)
|
||
const [updata, setUpdata] = useState<any[]>([])
|
||
const [status, setStatus] = useState('')
|
||
|
||
// const [items, setItems] = useState<any[]>([])
|
||
const pathParams = useParams();
|
||
// useEffect(() => {
|
||
// // console.log('mods', props.mods);
|
||
|
||
// if( newModArray.length > 0){
|
||
// alert('请先保存')
|
||
|
||
// }
|
||
// }, [modArray, newModArray]);
|
||
// const key = `open${Date.now()}`;
|
||
useEffect(() => {
|
||
|
||
|
||
setModArray(props.mods);
|
||
setNewModArray(props.newMods);
|
||
get<any>({
|
||
messageApi,
|
||
url: `/api/proj/get/${pathParams.projId}`,
|
||
onSuccess({ data }) {
|
||
// console.log('其他页面状态判断', data);
|
||
// setStatus(data.generate.generateStatus)
|
||
if (data.aiSetting.modsStatus == 'GENERATING') {
|
||
// console.log('嘻嘻');
|
||
props.setIsProjModArrayLoading()
|
||
|
||
}
|
||
}
|
||
})
|
||
|
||
}, [props.mods, props.newMods]);
|
||
// useEffect(() => {
|
||
// // console.log('mods', props.mods);
|
||
// if (newModArray.length > 0 && newModArray != props.newMods) {
|
||
// notification.open({
|
||
// message: '提示',
|
||
// description:
|
||
// `功能列表已生成完毕,是否前去查看？`,
|
||
// btn: (
|
||
// <div>
|
||
// <Button size="small" type="primary" onClick={() => {
|
||
// notification.destroy(key)
|
||
// props.setActiveTab('模块')
|
||
// }}>
|
||
// 确定
|
||
// </Button>
|
||
// </div>
|
||
|
||
// ),
|
||
// key,
|
||
// onClose: close,
|
||
// duration: null,
|
||
// placement: 'bottomRight', // 设置通知框显示在右下角
|
||
// style: {
|
||
// width: 300, // 设置通知框的宽度
|
||
// height: 150, // 设置通知框的高度
|
||
// },
|
||
|
||
// });
|
||
// }
|
||
|
||
// }, [newModArray]);
|
||
|
||
useEffect(() => {
|
||
if (updata.length != 0) {
|
||
// console.log('更新数据', updata);
|
||
setModArray(updata)
|
||
}
|
||
|
||
}, [updata])
|
||
useEffect(() => {
|
||
get<any>({
|
||
messageApi,
|
||
url: `/api/proj/get/${pathParams.projId}`,
|
||
onSuccess({ data }) {
|
||
// console.log('其他页面状态判断', data);
|
||
setStatus(data.generate.generateStatus)
|
||
}
|
||
})
|
||
|
||
}, [])
|
||
const returnValue = (value: string) => {
|
||
// 如果value包含. / \ ` ! @ # $ % ^ & * ( ) 等特殊符号 去掉
|
||
// return value.replace(/[\\/:*?"<>|]/g, '');
|
||
return value.replace(/[./\\`!@#$%^&*()]/g, '');
|
||
}
|
||
const modColumnArray: TableProps<IProjMod>['columns'] = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
width: 60,
|
||
align: 'center',
|
||
render: (_value, _record, index) => {
|
||
return index + 1
|
||
}
|
||
},
|
||
{
|
||
title: '模块名称', dataIndex: 'modName', key: 'name', width: 200, align: 'center',
|
||
render: (value) => {
|
||
return (
|
||
<div>
|
||
{returnValue(value)}
|
||
</div>
|
||
)
|
||
}
|
||
},
|
||
{ title: '模块描述', dataIndex: 'modDesc', key: 'desc', align: 'center' },
|
||
{
|
||
title: 'AI状态',
|
||
dataIndex: 'aiFieldStatus',
|
||
key: 'desc',
|
||
width: 100,
|
||
align: 'center',
|
||
render: (value) => {
|
||
if (value == 'GENERATING') {
|
||
return '处理中'
|
||
}
|
||
if (value == 'FAILED') {
|
||
return (
|
||
<span style={{ color: '#FF4040 ' }}>失败</span>
|
||
)
|
||
}
|
||
if (value == 'SUCCESS') {
|
||
return <span style={{ color: '#00A351' }}>成功</span>
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'option',
|
||
key: 'option',
|
||
width: 100,
|
||
align: 'center',
|
||
render: (_value, record, index) => {
|
||
if (status == 'SUCCESS') {
|
||
return (
|
||
<Button icon={<SearchOutlined />} onClick={() => {
|
||
setId(record.projModId)
|
||
setConfigModal(true)
|
||
}}></Button>
|
||
)
|
||
} else if (status == 'GENERATING') {
|
||
return (
|
||
<LoadingOutlined />
|
||
)
|
||
}
|
||
|
||
else {
|
||
if (record.aiFieldStatus == 'GENERATING') {
|
||
return <LoadingOutlined />
|
||
}
|
||
if (record.aiFieldStatus == 'FAILED') {
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
// 禁止换行
|
||
whiteSpace: 'nowrap',
|
||
|
||
}}>
|
||
<div
|
||
style={{
|
||
cursor: 'pointer',
|
||
// background: 'pink',
|
||
width: 40,
|
||
}}
|
||
onClick={() => {
|
||
props.handleResaveField(index, record.projModId);
|
||
}}><RedoOutlined /></div>
|
||
<div
|
||
style={{
|
||
cursor: 'pointer',
|
||
marginLeft: 5,
|
||
color: '#FF4040',
|
||
width: 40,
|
||
|
||
|
||
}}
|
||
onClick={() => {
|
||
props.handleRemove(index, record.projModId, record);
|
||
}}
|
||
>删除</div>
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div
|
||
style={{
|
||
whiteSpace: 'nowrap', display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
cursor: 'pointer',
|
||
width: 40,
|
||
}}
|
||
onClick={() => {
|
||
setId(record.projModId)
|
||
setEditModal(true)
|
||
}}
|
||
>编辑</div>
|
||
<div
|
||
style={{
|
||
cursor: 'pointer',
|
||
marginLeft: 5,
|
||
color: '#FF4040',
|
||
width: 40,
|
||
}}
|
||
onClick={() => {
|
||
props.handleRemove(index, record.projModId, record);
|
||
}}
|
||
>删除</div>
|
||
</div>
|
||
|
||
|
||
)
|
||
}
|
||
// if (record.aiFieldStatus == 'GENERATING') {
|
||
// return <LoadingOutlined />
|
||
// }
|
||
// if (record.aiFieldStatus == 'FAILED') {
|
||
// return <Button onClick={() => {
|
||
// props.handleResaveField(index, record.projModId);
|
||
// }}><RedoOutlined /></Button>
|
||
// }
|
||
// return (
|
||
// <Dropdown menu={{
|
||
// items: [
|
||
// {
|
||
// key: 'edit',
|
||
// label: '编辑',
|
||
// onClick: () => {
|
||
// // props.handleEdit(index, record.projModId, record);
|
||
// setId(record.projModId)
|
||
// setEditModal(true)
|
||
// }
|
||
// }, {
|
||
// key: 'remove',
|
||
// label: '删除',
|
||
// onClick: () => {
|
||
// props.handleRemove(index, record.projModId, record);
|
||
// }
|
||
// },
|
||
// ]
|
||
// }} placement="bottom" arrow>
|
||
// <Button>…</Button>
|
||
// </Dropdown>
|
||
// )
|
||
// if (record.aiFieldStatus == 'SUCCESS' || status == 'GENERATING') {
|
||
// return (
|
||
// <Dropdown menu={{
|
||
// items: [
|
||
|
||
// ]
|
||
// }} placement="bottom" arrow>
|
||
// <Button>…</Button>
|
||
// </Dropdown>
|
||
// )
|
||
// }else{
|
||
// return(
|
||
// <Dropdown menu={{
|
||
// items: [
|
||
// {
|
||
// key: 'edit',
|
||
// label: '编辑',
|
||
// onClick: () => {
|
||
// // props.handleEdit(index, record.projModId, record);
|
||
// setId(record.projModId)
|
||
// setEditModal(true)
|
||
// }
|
||
// }, {
|
||
// key: 'remove',
|
||
// label: '删除',
|
||
// onClick: () => {
|
||
// props.handleRemove(index, record.projModId, record);
|
||
// }
|
||
// },
|
||
// ]
|
||
// }} placement="bottom" arrow>
|
||
// <Button>…</Button>
|
||
// </Dropdown>
|
||
// )
|
||
// }
|
||
}
|
||
},
|
||
];
|
||
|
||
const newModColumnArray: TableProps<ProjModType>['columns'] = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
width: 60,
|
||
align: 'center',
|
||
render: (_value, _record, index) => {
|
||
return index + 1
|
||
}
|
||
},
|
||
{
|
||
title: '模块名称', dataIndex: 'name', key: 'name', width: 200, align: 'center',
|
||
render: (value) => {
|
||
return (
|
||
<div>
|
||
{returnValue(value)}
|
||
</div>
|
||
)
|
||
}
|
||
},
|
||
{ title: '模块描述', dataIndex: 'desc', key: 'desc', align: 'center' },
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'option',
|
||
key: 'option',
|
||
width: 80,
|
||
align: 'center',
|
||
render: (_value, record, index) => {
|
||
return (
|
||
// <Button onClick={() => {
|
||
// props.handleSave(index, record);
|
||
// }}>
|
||
// 添加
|
||
// </Button>
|
||
<span style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
if (props.isDisabled) {
|
||
return
|
||
}else{
|
||
props.handleSave(index, record);
|
||
}
|
||
// props.handleSave(index, record);
|
||
}}
|
||
>
|
||
添加
|
||
</span>
|
||
)
|
||
}
|
||
},
|
||
];
|
||
|
||
return (
|
||
// <>
|
||
// <div style={{ padding: '5px 0 0 0', fontWeight: 'bold' }}>模块管理</div>
|
||
// <div style={{ padding: '5px 0 0 0' }}>
|
||
// {newModArray.length > 0 ? <Divider orientation="right" plain>原模块</Divider> : <></>}
|
||
// <Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true} scroll={{ y: 240 }}
|
||
// pagination={false} rowKey="projModId" />
|
||
// {
|
||
// newModArray.length > 0 ? (
|
||
// <>
|
||
// <Divider orientation="right" plain>新模块</Divider>
|
||
// <Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true}
|
||
// scroll={{ y: 240 }} pagination={false} rowKey="id" />
|
||
// </>
|
||
// ) : <></>
|
||
// }
|
||
// </div>
|
||
// <div style={{ padding: '5px 0 0 0', textAlign: 'center' }}>
|
||
// {
|
||
// newModArray.length > 0 ? (
|
||
// <Space>
|
||
// <Button type="link" style={{ cursor: 'pointer' }}
|
||
// onClick={() => {
|
||
// props.handleGenerate();
|
||
// }}><ReloadOutlined /> 重新生成</Button>
|
||
// </Space>
|
||
// ) : <Button type="link" disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false} style={{ cursor: 'pointer' }}
|
||
// onClick={() => {
|
||
// props.handleGenerate();
|
||
// }}>AI生成</Button>
|
||
// }
|
||
// </div>
|
||
// <Modal title="编辑"
|
||
// destroyOnClose={true}
|
||
|
||
// open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
|
||
// < EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
|
||
// </Modal>
|
||
// <Modal title="查看"
|
||
// destroyOnClose={true}
|
||
|
||
// open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
|
||
// <ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
|
||
// </Modal>
|
||
// </>
|
||
|
||
<div style={{ height: `${height}px`, border: '1px solid #D5D5D5', overflow: 'auto' }}>
|
||
<div className="aiMod-top">
|
||
{modArray.length > 0 ?
|
||
<>
|
||
<div className='aiMod-top-table' >
|
||
<Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true}
|
||
pagination={false}
|
||
rowKey="projModId"
|
||
/>
|
||
</div>
|
||
{/* <div className="aiMod-top-btn">
|
||
<Button type="primary"
|
||
style={{
|
||
marginLeft: 15
|
||
}}
|
||
>保存</Button>
|
||
</div> */}
|
||
</>
|
||
:
|
||
<div style={{
|
||
display: 'flex',
|
||
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '14px',
|
||
|
||
}}
|
||
>
|
||
<div style={{
|
||
width: 300, height: 300, marginTop: 10, position: 'relative',
|
||
// backgroundColor:'pink'
|
||
}}>
|
||
<img src={noTextImg} alt="" width={'100%'} />
|
||
<div style={{ position: 'absolute', left: 90, bottom: 100, color: '#99A5B7' }}>
|
||
<div>
|
||
暂无内容,点击
|
||
<span style={{ color: '#FF9D00', cursor: 'pointer' }}
|
||
onClick={() => {
|
||
props.setisFast()
|
||
if (props.isFast) {
|
||
return
|
||
} else {
|
||
if (props.projIntroduction) {
|
||
props.handleGenerate()
|
||
} else {
|
||
props.xixi()
|
||
}
|
||
}
|
||
|
||
|
||
}}
|
||
>自动生成</span>
|
||
|
||
</div>
|
||
</div>
|
||
<div style={{ color: 'red', position: 'absolute', bottom: 70, textAlign: 'center', width: 600, left: -140 }}>为了合理生成功能列表，建议在系统简介生成完成后再生成功能列表</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
}
|
||
|
||
</div>
|
||
<div className="aiMod-center">
|
||
<div style={{
|
||
height: 42, background: " #EFEFEF",
|
||
display: 'flex', justifyContent: 'center', alignItems: 'center',
|
||
}}>
|
||
<div style={{
|
||
color: 'red',
|
||
fontSize: 14,
|
||
|
||
}}>
|
||
{props.chargeType =='FREE'?'*功能列表数量为3~5个，如数量不满足请继续用AI生成':'*功能列表数量为10~15个，如数量不满足请继续用AI生成'}
|
||
{/* *功能列表数量为10~15个，如数量不满足请继续用AI生成 */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="aiMod-bot">
|
||
<div className='aiMod-bot-table'>
|
||
{newModArray.length > 0 ?
|
||
|
||
<div style={{
|
||
border: '1px solid #f0f0f0',
|
||
borderRadius: '10px'
|
||
}}>
|
||
<Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true}
|
||
pagination={false} rowKey="id" />
|
||
</div>
|
||
:
|
||
<>
|
||
<span style={{
|
||
color: '#ABABAB',
|
||
fontSize: 16
|
||
}}> 点击AI自动生成后可自动生成功能列表...</span>
|
||
</>}
|
||
</div>
|
||
|
||
<div className="aiMod-bot-btn">
|
||
<Button type="primary"
|
||
style={{
|
||
marginLeft: 15,
|
||
width: 109,
|
||
}}
|
||
disabled={status == 'SUCCESS' || status == 'GENERATING' || props.isFast ? true : false}
|
||
onClick={() => {
|
||
props.setisFast()
|
||
if (props.projIntroduction) {
|
||
props.handleGenerate()
|
||
} else {
|
||
props.xixi()
|
||
}
|
||
// props.handleGenerate()
|
||
}}
|
||
>AI生成</Button>
|
||
</div>
|
||
|
||
</div>
|
||
<Modal title="编辑"
|
||
destroyOnClose={true}
|
||
open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
|
||
< EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
|
||
</Modal>
|
||
<Modal title="查看"
|
||
destroyOnClose={true}
|
||
open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
|
||
<ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
} |