fuse/src/views/example/scene/select.tsx

import { SceneType, QuoteSceneStatus } from 'constant';
import { Table } from 'components'
import { Modal, Input } from 'antd'
import { ScenePage, sceneTitleColumn, sceneTimeColumn, modelSceneTimeColumn, modelSceneRawTypeColumn } from 'views/scene'
import { fetchScenes, filterScenesSelector, useSelector, getSceneIdent } from 'store'
import { useThunkPaging, useRefershFoce } from 'hook'
import style from '../style.module.scss'

import type { Scene, SceneIdents } from "api";

export type SelectScenesProps = {
  sceneIdents: SceneIdents
  onClose: () => void,
  onSelect: (ids: SelectScenesProps['sceneIdents']) => void
}

export const SelectScenes = ({ sceneIdents, ...props }: SelectScenesProps) => {
  let idents: SceneIdents = sceneIdents.map(ident => ({
    ...ident,
    numList: [...ident.numList]
  }))
  const getTypeIdents = (type: SceneType) => idents.find(ident => ident.type === type) as SceneIdents[number]

  const getSelectIds = (type: SceneType, scenes: Scene[]) => {
    const typeIdents = getTypeIdents(type)
    const selectedIds = []
    for (const scene of scenes) {
      const sceneIdent = getSceneIdent(scene)
      if (typeIdents.numList.includes(sceneIdent)) {
        selectedIds.push(scene.id)
      }
    }
    return selectedIds
  }
  const replaceIdents = (type: SceneType, scenes: Scene[], selectScenes: Scene[]) => {
    const typeIdents = getTypeIdents(type)
    for (const scene of scenes) {
      const sceneIdent = getSceneIdent(scene)
      const inSelect = selectScenes.includes(scene)
      const identIndex = typeIdents?.numList.indexOf(sceneIdent)
      if (~identIndex && !inSelect) {
        typeIdents.numList.splice(identIndex, 1)
      } else if (!~identIndex && inSelect) {
        typeIdents.numList.push(sceneIdent)
      }
    }

    console.log(typeIdents)
  }

  const Content = ({ type }: { type: SceneType }) => {
    const scenes = useSelector((state) => filterScenesSelector(state, { type }))
    const states = useThunkPaging({ type, sceneName: '', status: QuoteSceneStatus.SUCCESS }, fetchScenes)
    const [[paging, setPaging], [params, setParams]] = states
    const selectedIds = getSelectIds(type, scenes)
    const refersh = useRefershFoce()
    console.log(selectedIds)

    const rowSelection: any = {
      selectedRowKeys: selectedIds,
      onChange(ids: string, selectScenes: Scene[]) {
        console.log(ids, selectScenes)
        replaceIdents(type, scenes, selectScenes)
        refersh()
      }
    };
    const columns = type === SceneType.SWMX
      ? [modelSceneRawTypeColumn, modelSceneTimeColumn]
      : [sceneTimeColumn]

    return (
      <div >
        <div className={style['model-header']}>
          <Input.Search
            allowClear
            className='content-header-search'
            placeholder="输入名称搜索"
            onSearch={sceneName => setParams({ sceneName })}
            style={{ width: 264, marginTop: '15px' }}
          />
        </div>
        <div className={style["scene-table-layout"]}>
          <Table
            columns={[sceneTitleColumn, ...columns] as any}
            rowSelection={rowSelection}
            data={scenes}
            paging={paging}
            unDataMsg={params.sceneName ? '未搜索到结果' : '暂无数据'}
            onChangePaging={setPaging}
          />
        </div>
      </div>
    )
  }

  return (
    <Modal
      width="800px"
      title="添加场景"
      visible={true}
      onOk={() => props.onSelect(idents)}
      onCancel={props.onClose}
      okText="确定"
      cancelText="取消"
    >
      <ScenePage TabContent={Content} />
    </Modal>
  )
}

export default SelectScenes