|
@@ -1,9 +1,12 @@
|
|
|
import { SceneType, ModelSceneStatus } from 'constant'
|
|
|
import { Table, ActionsButton } from 'components'
|
|
|
-import { getSceneColumns, getSceneActions } from './columns'
|
|
|
+import { getSceneColumns, getSceneActions, sceneTitleColumn } from './columns'
|
|
|
import { useThunkPaging } from 'hook'
|
|
|
import { SceneHeader } from './header'
|
|
|
import { confirm } from 'utils'
|
|
|
+import { message, Input, Button } from 'antd'
|
|
|
+import { CheckOutlined, EditOutlined } from '@ant-design/icons'
|
|
|
+import style from './style.module.scss'
|
|
|
import {
|
|
|
useSelector,
|
|
|
filterScenesSelector,
|
|
@@ -11,14 +14,56 @@ import {
|
|
|
deleteModelScene,
|
|
|
useDispatch
|
|
|
} from 'store'
|
|
|
+import { useState } from 'react'
|
|
|
+import { updateModelSceneTitle } from 'api'
|
|
|
|
|
|
import type { SceneColumn } from './columns'
|
|
|
+import type { Scene } from 'api'
|
|
|
+
|
|
|
+export type EditModelSceneTitleProps = {
|
|
|
+ scene: Scene
|
|
|
+ onChangeTitle: (title: string) => void
|
|
|
+}
|
|
|
+
|
|
|
+export const EditModelSceneTitle = (props: EditModelSceneTitleProps) => {
|
|
|
+ const [inEditMode, setInEditMode] = useState(false)
|
|
|
+ const [title, setTitle] = useState(props.scene.title)
|
|
|
+ const enterHandler = async () => {
|
|
|
+ if (title.trim().length) {
|
|
|
+ if (title !== props.scene.title) {
|
|
|
+ await props.onChangeTitle(title)
|
|
|
+ }
|
|
|
+ setInEditMode(false)
|
|
|
+ } else {
|
|
|
+ message.warning('请输入标题')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const renderTitle = inEditMode
|
|
|
+ ? <Input.Group style={{width: '200px'}}>
|
|
|
+ <Input
|
|
|
+ maxLength={50}
|
|
|
+ autoFocus
|
|
|
+ style={{ width: 'calc(100% - 40px)' }}
|
|
|
+ value={title}
|
|
|
+ onChange={ev => setTitle(ev.target.value)}
|
|
|
+ />
|
|
|
+ <Button icon={<CheckOutlined />} onClick={enterHandler} />
|
|
|
+ </Input.Group>
|
|
|
+ : <div className={style['show-scene-title']}>
|
|
|
+ <p>{props.scene.title}</p>
|
|
|
+ <EditOutlined onClick={() => setInEditMode(true)} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ return renderTitle
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
export const SceneTabContent = ({type}: {type: SceneType}) => {
|
|
|
const dispatch = useDispatch()
|
|
|
const scenes = useSelector((state) => filterScenesSelector(state, { type }))
|
|
|
const states = useThunkPaging({ type, sceneName: '' }, fetchScenes)
|
|
|
- const [[paging, setPaging], [, setParams], refresh] = states
|
|
|
+ const [[paging, setPaging], [params, setParams], refresh] = states
|
|
|
|
|
|
const actionColumn: SceneColumn = {
|
|
|
title: '操作',
|
|
@@ -43,6 +88,22 @@ export const SceneTabContent = ({type}: {type: SceneType}) => {
|
|
|
return <ActionsButton actions={actions} />
|
|
|
}
|
|
|
}
|
|
|
+ const columns = getSceneColumns(type, actionColumn)
|
|
|
+
|
|
|
+ if (type === SceneType.SWMX) {
|
|
|
+ columns.unshift({
|
|
|
+ ...sceneTitleColumn,
|
|
|
+ render: (_, record) => (
|
|
|
+ <EditModelSceneTitle
|
|
|
+ scene={record}
|
|
|
+ onChangeTitle={async (title) => {
|
|
|
+ await updateModelSceneTitle(record.id, title)
|
|
|
+ await refresh()
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<div className='content-layout'>
|
|
@@ -52,9 +113,10 @@ export const SceneTabContent = ({type}: {type: SceneType}) => {
|
|
|
onDataChange={refresh}
|
|
|
/>
|
|
|
<Table
|
|
|
- columns={getSceneColumns(type, actionColumn)}
|
|
|
+ columns={columns}
|
|
|
data={scenes}
|
|
|
paging={paging}
|
|
|
+ unDataMsg={params.sceneName ? '未搜索到结果' : '暂无数据'}
|
|
|
onChangePaging={setPaging}
|
|
|
/>
|
|
|
</div>
|