feat: 新增左树右表的layout组件，按UI要求调整各模块的细节交互
parent
4627ed7a11
commit
8f0fa7794b
@ -0,0 +1,61 @@
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { CardProps } from 'antd';
|
||||
// 此模块使用的 ProCardType
|
||||
export interface ProCardTypeProps extends CardProps {
|
||||
colSpan?: string;
|
||||
headerBordered?: boolean;
|
||||
}
|
||||
|
||||
// 当前组件类型
|
||||
type TreeAndTableListProps = {
|
||||
leftCard?: ProCardTypeProps;
|
||||
rightCard?: ProCardTypeProps;
|
||||
leftDom: any;
|
||||
rightDom: any;
|
||||
};
|
||||
|
||||
const TreeAndTableList: React.FC<TreeAndTableListProps> = (props) => {
|
||||
// 业务层接收
|
||||
const { leftCard, rightCard, leftDom, rightDom } = props;
|
||||
|
||||
// 统一配置
|
||||
let finalLeftCard: ProCardTypeProps = {
|
||||
// 左侧卡片
|
||||
headStyle: { paddingTop: 24, paddingLeft: 20, paddingRight: 20 },
|
||||
bodyStyle: {paddingLeft: 20, paddingRight: 20},
|
||||
colSpan: '22%',
|
||||
};
|
||||
let finalRightCard: ProCardTypeProps = {
|
||||
headStyle: { padding: 0, margin: 0, background: 'transparent' },
|
||||
bodyStyle: { padding: 0, margin: 0 },
|
||||
headerBordered: true,
|
||||
// 右侧卡片
|
||||
colSpan: '76.5%',
|
||||
};
|
||||
if (leftCard) {
|
||||
Object.assign(finalLeftCard, leftCard);
|
||||
}
|
||||
|
||||
if (rightCard) {
|
||||
Object.assign(finalRightCard, rightCard);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<ProCard
|
||||
style={{ display: 'flex', width: '100%', background: 'transparent' }}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{/* 后续依据业务需要动态调整 */}
|
||||
<ProCard {...finalLeftCard}>{leftDom}</ProCard>
|
||||
<ProCard {...finalRightCard}>{rightDom}</ProCard>
|
||||
</ProCard>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TreeAndTableList;
|
||||
@ -1,339 +1,384 @@
|
||||
import {postActionDetectionGetActionDetectionList} from '@/services/analysis/ActionDetection';
|
||||
import TableActionCard from '@/components/TableActionCard';
|
||||
import VideoModal from '@/pages/Analysis/ActionDetectionList/components/VideoModal';
|
||||
import { postActionDetectionGetActionDetectionList } from '@/services/analysis/ActionDetection';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import {
|
||||
FooterToolbar,
|
||||
PageContainer,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
|
||||
import {Tag, Image} from 'antd';
|
||||
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useAccess, useIntl } from '@umijs/max';
|
||||
import { Button, Image, Tag } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import VideoModal from "@/pages/Analysis/ActionDetectionList/components/VideoModal";
|
||||
import { proTableCommonOptions } from '../../../../config/defaultTable';
|
||||
|
||||
// import UpdateForm from './components/UpdateForm';
|
||||
// import CreateForm from "./components/CreateForm";
|
||||
// import {ColumnDrawer} from "./components/ColumnDrawer";
|
||||
const ActionDetectionList: React.FC = () => {
|
||||
/**
|
||||
* @en-US Pop-up window of new window
|
||||
* @zh-CN 新建窗口的弹窗
|
||||
* */
|
||||
const [videoModalOpen, setVideoModalOpen] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US Pop-up window of new window
|
||||
* @zh-CN 新建窗口的弹窗
|
||||
* */
|
||||
const [videoModalOpen, setVideoModalOpen] = useState<boolean>(false);
|
||||
|
||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US The pop-up window of the distribution update window
|
||||
* @zh-CN 分布更新窗口的弹窗
|
||||
* */
|
||||
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const access = useAccess();
|
||||
const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [currentRow, setCurrentRow] = useState<API.ActionDetection>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.ActionDetection[]>([]);
|
||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US The pop-up window of the distribution update window
|
||||
* @zh-CN 分布更新窗口的弹窗
|
||||
* */
|
||||
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const access = useAccess();
|
||||
const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [currentRow, setCurrentRow] = useState<API.ActionDetection>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.ActionDetection[]>([]);
|
||||
|
||||
const handleUpdateModal = ()=>{
|
||||
if (updateModalOpen) {
|
||||
setUpdateModalOpen(false)
|
||||
setCurrentRow(undefined)
|
||||
} else {
|
||||
setUpdateModalOpen(true)
|
||||
}
|
||||
}
|
||||
const handleVideoModal = ()=>{
|
||||
const handleUpdateModal = () => {
|
||||
if (updateModalOpen) {
|
||||
setUpdateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setUpdateModalOpen(true);
|
||||
}
|
||||
};
|
||||
const handleVideoModal = () => {
|
||||
if (videoModalOpen) {
|
||||
setVideoModalOpen(false)
|
||||
setCurrentRow(undefined)
|
||||
setVideoModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setVideoModalOpen(true)
|
||||
setVideoModalOpen(true);
|
||||
}
|
||||
}
|
||||
const handleCreateModal = ()=>{
|
||||
if (createModalOpen) {
|
||||
setCreateModalOpen(false)
|
||||
setCurrentRow(undefined)
|
||||
} else {
|
||||
setCreateModalOpen(true)
|
||||
}
|
||||
}
|
||||
const handleColumnDrawer = ()=>{
|
||||
if (showDetail) {
|
||||
setShowDetail(false)
|
||||
setCurrentRow(undefined)
|
||||
} else {
|
||||
setShowDetail(true)
|
||||
}
|
||||
}
|
||||
const handleDestroy = async (selectedRow: API.ActionDetection) => {
|
||||
// deleteActionDetectionDeleteActionDetection({id: selectedRow.id}).then(()=>{
|
||||
// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
||||
// actionRef.current?.reload()
|
||||
// }).catch(()=>{
|
||||
// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
||||
// })
|
||||
};
|
||||
|
||||
const columns: ProColumns<API.ActionDetection>[] = [
|
||||
};
|
||||
const handleCreateModal = () => {
|
||||
if (createModalOpen) {
|
||||
setCreateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setCreateModalOpen(true);
|
||||
}
|
||||
};
|
||||
const handleColumnDrawer = () => {
|
||||
if (showDetail) {
|
||||
setShowDetail(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setShowDetail(true);
|
||||
}
|
||||
};
|
||||
const handleDestroy = async (selectedRow: API.ActionDetection) => {
|
||||
// deleteActionDetectionDeleteActionDetection({id: selectedRow.id}).then(()=>{
|
||||
// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
||||
// actionRef.current?.reload()
|
||||
// }).catch(()=>{
|
||||
// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
||||
// })
|
||||
};
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.id"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "id",
|
||||
hideInSearch: true,
|
||||
},
|
||||
const columns: ProColumns<API.ActionDetection>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="analysis.action_detection.table.list.id" defaultMessage="$$$" />,
|
||||
dataIndex: 'id',
|
||||
hideInSearch: true,
|
||||
key: 'fixedName',
|
||||
fixed: 'left',
|
||||
},
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.source"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "source",
|
||||
hideInSearch: true,
|
||||
title: (
|
||||
<FormattedMessage id="analysis.action_detection.table.list.source" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'source',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.position"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "source",
|
||||
hideInSearch: true,
|
||||
renderText: (text)=>{
|
||||
return '工位一'
|
||||
}
|
||||
title: (
|
||||
<FormattedMessage id="analysis.action_detection.table.list.position" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'source',
|
||||
hideInSearch: true,
|
||||
renderText: (text) => {
|
||||
return '工位一';
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.configFile"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "configFile",
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="analysis.action_detection.table.list.configFile"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'configFile',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.imagesPath"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "imagesPath",
|
||||
hideInSearch: true,
|
||||
valueType: 'image',
|
||||
|
||||
renderText: (text)=>{
|
||||
let text_temp = text.replace(/^\.\//, "/");
|
||||
return `${FILE_SERVER_HOST}${text_temp}`
|
||||
},
|
||||
render: (_, record)=>{
|
||||
if (record.imagesPath){
|
||||
// return <img src={`${FILE_SERVER_HOST}${record.imagesPath.replace(/^\.\//, "/")}`} alt=""/>
|
||||
return <Image src={`${FILE_SERVER_HOST}${record.imagesPath.replace(/^\.\//, "/")}`} width={200}/>
|
||||
}
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="analysis.action_detection.table.list.imagesPath"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'imagesPath',
|
||||
hideInSearch: true,
|
||||
valueType: 'image',
|
||||
|
||||
renderText: (text) => {
|
||||
let text_temp = text.replace(/^\.\//, '/');
|
||||
return `${FILE_SERVER_HOST}${text_temp}`;
|
||||
},
|
||||
render: (_, record) => {
|
||||
if (record.imagesPath) {
|
||||
// return <img src={`${FILE_SERVER_HOST}${record.imagesPath.replace(/^\.\//, "/")}`} alt=""/>
|
||||
return (
|
||||
<Image
|
||||
src={`${FILE_SERVER_HOST}${record.imagesPath.replace(/^\.\//, '/')}`}
|
||||
width={200}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.type"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "type",
|
||||
hideInSearch: false,
|
||||
render: (_, record) => (
|
||||
<Tag color={'red'}>{intl.formatMessage({id: `error_type.${record.type}`, defaultMessage: '异常'})}</Tag>
|
||||
),
|
||||
valueEnum: {
|
||||
playing_phone: {
|
||||
text: '玩手机',
|
||||
status: 'Error',
|
||||
},
|
||||
sleep: {
|
||||
text:'睡觉',
|
||||
status: 'Success',
|
||||
},
|
||||
person: {
|
||||
text: '离岗',
|
||||
status: 'Processing',
|
||||
},
|
||||
title: (
|
||||
<FormattedMessage id="analysis.action_detection.table.list.type" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'type',
|
||||
hideInSearch: false,
|
||||
render: (_, record) => (
|
||||
<Tag color={'red'}>
|
||||
{intl.formatMessage({ id: `error_type.${record.type}`, defaultMessage: '异常' })}
|
||||
</Tag>
|
||||
),
|
||||
valueEnum: {
|
||||
playing_phone: {
|
||||
text: '玩手机',
|
||||
status: 'Error',
|
||||
},
|
||||
sleep: {
|
||||
text: '睡觉',
|
||||
status: 'Success',
|
||||
},
|
||||
person: {
|
||||
text: '离岗',
|
||||
status: 'Processing',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.remark"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "remark",
|
||||
hideInSearch: true,
|
||||
title: (
|
||||
<FormattedMessage id="analysis.action_detection.table.list.remark" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.createTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "timestamp",
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="analysis.action_detection.table.list.createTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'timestamp',
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: (<FormattedMessage
|
||||
id="analysis.action_detection.table.list.updateTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "updateTime",
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="analysis.action_detection.table.list.updateTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'updateTime',
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed:'right',
|
||||
render: (_, record) => [
|
||||
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
||||
<a
|
||||
key="video"
|
||||
onClick={() => {
|
||||
setVideoModalOpen(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="common.open_video" defaultMessage="$$$" />
|
||||
</a>
|
||||
</Access>
|
||||
],
|
||||
},];
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<API.ActionDetection>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
onDataSourceChange={(data)=>{
|
||||
|
||||
}}
|
||||
pagination={{
|
||||
// showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
}}
|
||||
columnsState={{
|
||||
persistenceKey: 'action_detection_list',
|
||||
persistenceType: 'localStorage'
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
||||
//
|
||||
// <Button
|
||||
// type="primary"
|
||||
// key="primary"
|
||||
// onClick={() => {
|
||||
// setCreateModalOpen(true);
|
||||
// }}
|
||||
// >
|
||||
// <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||
// </Button>
|
||||
// </Access>
|
||||
]}
|
||||
request={async (params = {}, sort) => {
|
||||
const {current, ...rest} = params
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
render: (_, record) => [
|
||||
<TableActionCard
|
||||
key="TableActionCardRef"
|
||||
renderActions={[
|
||||
// {
|
||||
// key: 'detail',
|
||||
// renderDom: (
|
||||
// <Button
|
||||
// key="detail"
|
||||
// type="link"
|
||||
// size="small"
|
||||
// onClick={() => {
|
||||
// setCurrentRow(record);
|
||||
// doToDetail(record);
|
||||
// // setShowDetail(true);
|
||||
// }}
|
||||
// >
|
||||
// <FormattedMessage id="pages.searchTable.detail" defaultMessage="Update" />
|
||||
// </Button>
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
key: 'video',
|
||||
renderDom: (
|
||||
<Button
|
||||
key="update"
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setVideoModalOpen(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="common.open_video" defaultMessage="Update" />
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// key: 'destroy',
|
||||
// renderDom: (
|
||||
// <IsDelete
|
||||
// deleteApi={() => {
|
||||
// handleDestroy(record).then(() => {});
|
||||
// }}
|
||||
// ></IsDelete>
|
||||
// ),
|
||||
// },
|
||||
]}
|
||||
></TableActionCard>,
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<API.ActionDetection>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }}
|
||||
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
labelWidth: proTableCommonOptions.searchLabelWidth,
|
||||
}}
|
||||
onDataSourceChange={(data) => {}}
|
||||
pagination={{
|
||||
// showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
}}
|
||||
columnsState={{
|
||||
persistenceKey: 'action_detection_list',
|
||||
persistenceType: 'localStorage',
|
||||
}}
|
||||
tableAlertOptionRender={() => {
|
||||
return (
|
||||
<>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
// <IsBatchDelete
|
||||
// deleteApi={() => {
|
||||
// deleteAlgorithmModelDeleteAlgorithmModelByIds({
|
||||
// ids: selectedRowsState.map((v: API.AlgorithmModel) => {
|
||||
// return v.id as number;
|
||||
// }),
|
||||
// }).then(() => {
|
||||
// actionRef.current?.reloadAndRest?.();
|
||||
// });
|
||||
// }}
|
||||
// />
|
||||
<>
|
||||
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>
|
||||
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
||||
//
|
||||
// <Button
|
||||
// type="primary"
|
||||
// key="primary"
|
||||
// onClick={() => {
|
||||
// setCreateModalOpen(true);
|
||||
// }}
|
||||
// >
|
||||
// <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||
// </Button>
|
||||
// </Access>
|
||||
]}
|
||||
request={async (params = {}, sort) => {
|
||||
const { current, ...rest } = params;
|
||||
const reqParams = {
|
||||
page: current,
|
||||
desc: false,
|
||||
orderKey: "",
|
||||
orderKey: '',
|
||||
...rest,
|
||||
}
|
||||
};
|
||||
if (sort && Object.keys(sort).length) {
|
||||
reqParams.orderKey = Object.keys(sort)[0]
|
||||
let sort_select = sort[reqParams.orderKey]
|
||||
reqParams.orderKey = Object.keys(sort)[0];
|
||||
let sort_select = sort[reqParams.orderKey];
|
||||
reqParams.desc = sort_select === 'descend';
|
||||
}
|
||||
let resp = await postActionDetectionGetActionDetectionList({...reqParams})
|
||||
let resp = await postActionDetectionGetActionDetectionList({ ...reqParams });
|
||||
return {
|
||||
data: resp.data.list.map((v: API.ActionDetection)=>{
|
||||
return {...v, key: v.id}
|
||||
data: resp.data.list.map((v: API.ActionDetection) => {
|
||||
return { ...v, key: v.id };
|
||||
}),
|
||||
success: resp.success,
|
||||
total: resp.data.total,
|
||||
current: resp.data.page,
|
||||
pageSize: resp.data.pageSize
|
||||
pageSize: resp.data.pageSize,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
// rowSelection={{
|
||||
// onChange: (_, selectedRows) => {
|
||||
// setSelectedRows(selectedRows);
|
||||
// },
|
||||
// }}
|
||||
/>
|
||||
{/*<CreateForm*/}
|
||||
{/* createModalOpen={createModalOpen}*/}
|
||||
{/* values={currentRow || {}}*/}
|
||||
{/* handleModal={handleCreateModal}*/}
|
||||
{/* reload={actionRef.current?.reload}*/}
|
||||
{/*/>*/}
|
||||
{/*<UpdateForm*/}
|
||||
{/* updateModalOpen={updateModalOpen}*/}
|
||||
{/* values={currentRow || {}}*/}
|
||||
{/* handleModal={handleUpdateModal}*/}
|
||||
{/* reload={actionRef.current?.reload}*/}
|
||||
{/*/>*/}
|
||||
<VideoModal
|
||||
modalOpen={videoModalOpen}
|
||||
handleModal={handleVideoModal}
|
||||
values={currentRow || {}}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
|
||||
}}
|
||||
columns={columns}
|
||||
// rowSelection={{
|
||||
// onChange: (_, selectedRows) => {
|
||||
// setSelectedRows(selectedRows);
|
||||
// },
|
||||
// }}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* <Button*/}
|
||||
{/* onClick={async () => {*/}
|
||||
{/* deleteActionDetectionDeleteActionDetectionByIds({ids: selectedRowsState.map((v: API.ActionDetection)=>{return v.id as number})}).then(()=>{*/}
|
||||
{/* actionRef.current?.reloadAndRest?.();*/}
|
||||
{/* })*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <FormattedMessage*/}
|
||||
{/* id="pages.searchTable.batchDeletion"*/}
|
||||
{/* defaultMessage="Batch deletion"*/}
|
||||
{/* />*/}
|
||||
{/*</Button>*/}
|
||||
</FooterToolbar>
|
||||
)}
|
||||
{/*<CreateForm*/}
|
||||
{/* createModalOpen={createModalOpen}*/}
|
||||
{/* values={currentRow || {}}*/}
|
||||
{/* handleModal={handleCreateModal}*/}
|
||||
{/* reload={actionRef.current?.reload}*/}
|
||||
{/*/>*/}
|
||||
{/*<UpdateForm*/}
|
||||
{/* updateModalOpen={updateModalOpen}*/}
|
||||
{/* values={currentRow || {}}*/}
|
||||
{/* handleModal={handleUpdateModal}*/}
|
||||
{/* reload={actionRef.current?.reload}*/}
|
||||
{/*/>*/}
|
||||
<VideoModal modalOpen={videoModalOpen}
|
||||
handleModal={handleVideoModal}
|
||||
values={currentRow || {}}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
|
||||
{/*<ColumnDrawer*/}
|
||||
{/* handleDrawer={handleColumnDrawer}*/}
|
||||
{/* isShowDetail={showDetail}*/}
|
||||
{/* columns={columns}*/}
|
||||
{/* currentRow={currentRow}*/}
|
||||
{/*/>*/}
|
||||
|
||||
</PageContainer>
|
||||
);
|
||||
{/*<ColumnDrawer*/}
|
||||
{/* handleDrawer={handleColumnDrawer}*/}
|
||||
{/* isShowDetail={showDetail}*/}
|
||||
{/* columns={columns}*/}
|
||||
{/* currentRow={currentRow}*/}
|
||||
{/*/>*/}
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionDetectionList;
|
||||
export default ActionDetectionList;
|
||||
|
||||
@ -1,75 +1,115 @@
|
||||
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';
|
||||
import {FormattedMessage, useIntl} from '@umijs/max';
|
||||
import {postDeviceGetDeviceFkSelect} from "@/services/device/Device";
|
||||
import {postDeviceRelationCreateDeviceRelation} from "@/services/device/DeviceRelation";
|
||||
import React, {useState} from 'react';
|
||||
import {Button, Form, message} from 'antd';
|
||||
import { postDeviceGetDeviceFkSelect } from '@/services/device/Device';
|
||||
import { postDeviceRelationCreateDeviceRelation } from '@/services/device/DeviceRelation';
|
||||
import { ModalForm, ProForm, ProFormSelect } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form, message } from 'antd';
|
||||
import React from 'react';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceRelation>;
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceRelation>;
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: ()=>void;
|
||||
values: Partial<API.DeviceRelation>;
|
||||
reload: any;
|
||||
};
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.DeviceRelation>;
|
||||
reload: any;
|
||||
};
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.DeviceRelation>();
|
||||
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.DeviceRelation>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.DeviceRelation>
|
||||
title={intl.formatMessage({
|
||||
id: 'common.modal.table.create.title',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
postDeviceRelationCreateDeviceRelation(values).then(()=>{
|
||||
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
||||
props.reload()
|
||||
}).catch(()=>{
|
||||
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
||||
})
|
||||
return (
|
||||
<ModalForm<API.DeviceRelation>
|
||||
title={intl.formatMessage({
|
||||
id: 'common.modal.table.create.title',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
postDeviceRelationCreateDeviceRelation(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
});
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
|
||||
<ProForm.Group>
|
||||
<ProFormSelect width="md" name="deviceParentFkId" label={<FormattedMessage id="device.device_relation.table.list.deviceParentFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_relation.table.list.deviceParentFkId', defaultMessage: '$$$'})}`} required={true} showSearch debounceTime={1000} request={async (keyWord)=>{
|
||||
const resp = await postDeviceGetDeviceFkSelect({keyword: keyWord?.keyWords || ''})
|
||||
return resp.data.list.map((v: any)=>{
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}/>
|
||||
<ProFormSelect width="md" name="deviceSonFkId" label={<FormattedMessage id="device.device_relation.table.list.deviceSonFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_relation.table.list.deviceSonFkId', defaultMessage: '$$$'})}`} required={true} showSearch debounceTime={1000} request={async (keyWord)=>{
|
||||
const resp = await postDeviceGetDeviceFkSelect({keyword: keyWord?.keyWords || ''})
|
||||
return resp.data.list.map((v: any)=>{
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>)}
|
||||
>
|
||||
<ProForm.Group>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="deviceParentFkId"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.device_relation.table.list.deviceParentFkId"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_select',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.device_relation.table.list.deviceParentFkId',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
showSearch
|
||||
debounceTime={1000}
|
||||
request={async (keyWord) => {
|
||||
const resp = await postDeviceGetDeviceFkSelect({ keyword: keyWord?.keyWords || '' });
|
||||
return resp.data.list.map((v: any) => {
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="deviceSonFkId"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.device_relation.table.list.deviceSonFkId"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_select',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.device_relation.table.list.deviceSonFkId',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
showSearch
|
||||
debounceTime={1000}
|
||||
request={async (keyWord) => {
|
||||
const resp = await postDeviceGetDeviceFkSelect({ keyword: keyWord?.keyWords || '' });
|
||||
return resp.data.list.map((v: any) => {
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CreateForm;
|
||||
|
||||
Loading…
Reference in New Issue