464 lines
18 KiB
TypeScript
464 lines
18 KiB
TypeScript
import './ai-helper-mod.css'
|
||
import {
|
||
Button,
|
||
// Divider, Dropdown, Space,
|
||
Table, TableProps, Modal
|
||
} from "antd";
|
||
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;
|
||
}
|
||
|
||
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);
|
||
|
||
setModArray(props.mods);
|
||
setNewModArray(props.newMods);
|
||
}, [props.mods, props.newMods]);
|
||
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: 120,
|
||
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 <Button onClick={() => {
|
||
props.handleResaveField(index, record.projModId);
|
||
}}><RedoOutlined /></Button>
|
||
}
|
||
return (
|
||
<div
|
||
// style={{ whiteSpace: 'nowrap' }}
|
||
>
|
||
<span
|
||
style={{
|
||
cursor: 'pointer'
|
||
}}
|
||
onClick={() => {
|
||
setId(record.projModId)
|
||
setEditModal(true)
|
||
}}
|
||
>编辑</span>
|
||
<span
|
||
style={{
|
||
cursor: 'pointer',
|
||
marginLeft: 19,
|
||
color: '#FF4040'
|
||
}}
|
||
onClick={() => {
|
||
props.handleRemove(index, record.projModId, record);
|
||
}}
|
||
>删除</span>
|
||
</div>
|
||
|
||
// <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 == '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={() => {
|
||
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.handleGenerate()
|
||
}}
|
||
>自动生成</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>
|
||
<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' ? true : false}
|
||
onClick={() => {
|
||
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>
|
||
)
|
||
} |