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 type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
import {
|
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
FooterToolbar,
|
import { FormattedMessage, useAccess, useIntl } from '@umijs/max';
|
||||||
PageContainer,
|
import { Button, Image, Tag } from 'antd';
|
||||||
ProTable,
|
|
||||||
} from '@ant-design/pro-components';
|
|
||||||
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
|
|
||||||
import {Tag, Image} from 'antd';
|
|
||||||
import React, { useRef, useState } from 'react';
|
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 UpdateForm from './components/UpdateForm';
|
||||||
// import CreateForm from "./components/CreateForm";
|
// import CreateForm from "./components/CreateForm";
|
||||||
// import {ColumnDrawer} from "./components/ColumnDrawer";
|
// import {ColumnDrawer} from "./components/ColumnDrawer";
|
||||||
const ActionDetectionList: React.FC = () => {
|
const ActionDetectionList: React.FC = () => {
|
||||||
/**
|
/**
|
||||||
* @en-US Pop-up window of new window
|
* @en-US Pop-up window of new window
|
||||||
* @zh-CN 新建窗口的弹窗
|
* @zh-CN 新建窗口的弹窗
|
||||||
* */
|
* */
|
||||||
const [videoModalOpen, setVideoModalOpen] = useState<boolean>(false);
|
const [videoModalOpen, setVideoModalOpen] = useState<boolean>(false);
|
||||||
|
|
||||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||||
/**
|
/**
|
||||||
* @en-US The pop-up window of the distribution update window
|
* @en-US The pop-up window of the distribution update window
|
||||||
* @zh-CN 分布更新窗口的弹窗
|
* @zh-CN 分布更新窗口的弹窗
|
||||||
* */
|
* */
|
||||||
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||||
/**
|
/**
|
||||||
* @en-US International configuration
|
* @en-US International configuration
|
||||||
* @zh-CN 国际化配置
|
* @zh-CN 国际化配置
|
||||||
* */
|
* */
|
||||||
const access = useAccess();
|
const access = useAccess();
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [currentRow, setCurrentRow] = useState<API.ActionDetection>();
|
const [currentRow, setCurrentRow] = useState<API.ActionDetection>();
|
||||||
const [selectedRowsState, setSelectedRows] = useState<API.ActionDetection[]>([]);
|
const [selectedRowsState, setSelectedRows] = useState<API.ActionDetection[]>([]);
|
||||||
|
|
||||||
const handleUpdateModal = ()=>{
|
const handleUpdateModal = () => {
|
||||||
if (updateModalOpen) {
|
if (updateModalOpen) {
|
||||||
setUpdateModalOpen(false)
|
setUpdateModalOpen(false);
|
||||||
setCurrentRow(undefined)
|
setCurrentRow(undefined);
|
||||||
} else {
|
} else {
|
||||||
setUpdateModalOpen(true)
|
setUpdateModalOpen(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
const handleVideoModal = ()=>{
|
const handleVideoModal = () => {
|
||||||
if (videoModalOpen) {
|
if (videoModalOpen) {
|
||||||
setVideoModalOpen(false)
|
setVideoModalOpen(false);
|
||||||
setCurrentRow(undefined)
|
setCurrentRow(undefined);
|
||||||
} else {
|
} else {
|
||||||
setVideoModalOpen(true)
|
setVideoModalOpen(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
const handleCreateModal = ()=>{
|
const handleCreateModal = () => {
|
||||||
if (createModalOpen) {
|
if (createModalOpen) {
|
||||||
setCreateModalOpen(false)
|
setCreateModalOpen(false);
|
||||||
setCurrentRow(undefined)
|
setCurrentRow(undefined);
|
||||||
} else {
|
} else {
|
||||||
setCreateModalOpen(true)
|
setCreateModalOpen(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
const handleColumnDrawer = ()=>{
|
const handleColumnDrawer = () => {
|
||||||
if (showDetail) {
|
if (showDetail) {
|
||||||
setShowDetail(false)
|
setShowDetail(false);
|
||||||
setCurrentRow(undefined)
|
setCurrentRow(undefined);
|
||||||
} else {
|
} else {
|
||||||
setShowDetail(true)
|
setShowDetail(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
const handleDestroy = async (selectedRow: API.ActionDetection) => {
|
const handleDestroy = async (selectedRow: API.ActionDetection) => {
|
||||||
// deleteActionDetectionDeleteActionDetection({id: selectedRow.id}).then(()=>{
|
// deleteActionDetectionDeleteActionDetection({id: selectedRow.id}).then(()=>{
|
||||||
// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
||||||
// actionRef.current?.reload()
|
// actionRef.current?.reload()
|
||||||
// }).catch(()=>{
|
// }).catch(()=>{
|
||||||
// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
||||||
// })
|
// })
|
||||||
};
|
};
|
||||||
|
|
||||||
const columns: ProColumns<API.ActionDetection>[] = [
|
|
||||||
|
|
||||||
{
|
const columns: ProColumns<API.ActionDetection>[] = [
|
||||||
title: (<FormattedMessage
|
{
|
||||||
id="analysis.action_detection.table.list.id"
|
title: <FormattedMessage id="analysis.action_detection.table.list.id" defaultMessage="$$$" />,
|
||||||
defaultMessage="$$$"/>),
|
dataIndex: 'id',
|
||||||
dataIndex: "id",
|
hideInSearch: true,
|
||||||
hideInSearch: true,
|
key: 'fixedName',
|
||||||
},
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.source"
|
<FormattedMessage id="analysis.action_detection.table.list.source" defaultMessage="$$$" />
|
||||||
defaultMessage="$$$"/>),
|
),
|
||||||
dataIndex: "source",
|
dataIndex: 'source',
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.position"
|
<FormattedMessage id="analysis.action_detection.table.list.position" defaultMessage="$$$" />
|
||||||
defaultMessage="$$$"/>),
|
),
|
||||||
dataIndex: "source",
|
dataIndex: 'source',
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
renderText: (text)=>{
|
renderText: (text) => {
|
||||||
return '工位一'
|
return '工位一';
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.configFile"
|
<FormattedMessage
|
||||||
defaultMessage="$$$"/>),
|
id="analysis.action_detection.table.list.configFile"
|
||||||
dataIndex: "configFile",
|
defaultMessage="$$$"
|
||||||
hideInSearch: true,
|
/>
|
||||||
hideInTable: true,
|
),
|
||||||
|
dataIndex: 'configFile',
|
||||||
|
hideInSearch: true,
|
||||||
|
hideInTable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.imagesPath"
|
<FormattedMessage
|
||||||
defaultMessage="$$$"/>),
|
id="analysis.action_detection.table.list.imagesPath"
|
||||||
dataIndex: "imagesPath",
|
defaultMessage="$$$"
|
||||||
hideInSearch: true,
|
/>
|
||||||
valueType: 'image',
|
),
|
||||||
|
dataIndex: 'imagesPath',
|
||||||
renderText: (text)=>{
|
hideInSearch: true,
|
||||||
let text_temp = text.replace(/^\.\//, "/");
|
valueType: 'image',
|
||||||
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}/>
|
|
||||||
}
|
|
||||||
|
|
||||||
|
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
|
title: (
|
||||||
id="analysis.action_detection.table.list.type"
|
<FormattedMessage id="analysis.action_detection.table.list.type" defaultMessage="$$$" />
|
||||||
defaultMessage="$$$"/>),
|
),
|
||||||
dataIndex: "type",
|
dataIndex: 'type',
|
||||||
hideInSearch: false,
|
hideInSearch: false,
|
||||||
render: (_, record) => (
|
render: (_, record) => (
|
||||||
<Tag color={'red'}>{intl.formatMessage({id: `error_type.${record.type}`, defaultMessage: '异常'})}</Tag>
|
<Tag color={'red'}>
|
||||||
),
|
{intl.formatMessage({ id: `error_type.${record.type}`, defaultMessage: '异常' })}
|
||||||
valueEnum: {
|
</Tag>
|
||||||
playing_phone: {
|
),
|
||||||
text: '玩手机',
|
valueEnum: {
|
||||||
status: 'Error',
|
playing_phone: {
|
||||||
},
|
text: '玩手机',
|
||||||
sleep: {
|
status: 'Error',
|
||||||
text:'睡觉',
|
},
|
||||||
status: 'Success',
|
sleep: {
|
||||||
},
|
text: '睡觉',
|
||||||
person: {
|
status: 'Success',
|
||||||
text: '离岗',
|
|
||||||
status: 'Processing',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
person: {
|
||||||
|
text: '离岗',
|
||||||
|
status: 'Processing',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.remark"
|
<FormattedMessage id="analysis.action_detection.table.list.remark" defaultMessage="$$$" />
|
||||||
defaultMessage="$$$"/>),
|
),
|
||||||
dataIndex: "remark",
|
dataIndex: 'remark',
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.createTime"
|
<FormattedMessage
|
||||||
defaultMessage="$$$"/>),
|
id="analysis.action_detection.table.list.createTime"
|
||||||
dataIndex: "timestamp",
|
defaultMessage="$$$"
|
||||||
sorter: true,
|
/>
|
||||||
hideInSearch: true,
|
),
|
||||||
valueType: 'dateTime',
|
dataIndex: 'timestamp',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: (<FormattedMessage
|
title: (
|
||||||
id="analysis.action_detection.table.list.updateTime"
|
<FormattedMessage
|
||||||
defaultMessage="$$$"/>),
|
id="analysis.action_detection.table.list.updateTime"
|
||||||
dataIndex: "updateTime",
|
defaultMessage="$$$"
|
||||||
sorter: true,
|
/>
|
||||||
hideInSearch: true,
|
),
|
||||||
valueType: 'dateTime',
|
dataIndex: 'updateTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
{
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
dataIndex: 'option',
|
||||||
dataIndex: 'option',
|
valueType: 'option',
|
||||||
valueType: 'option',
|
fixed: 'right',
|
||||||
fixed:'right',
|
render: (_, record) => [
|
||||||
render: (_, record) => [
|
<TableActionCard
|
||||||
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
key="TableActionCardRef"
|
||||||
<a
|
renderActions={[
|
||||||
key="video"
|
// {
|
||||||
onClick={() => {
|
// key: 'detail',
|
||||||
setVideoModalOpen(true);
|
// renderDom: (
|
||||||
setCurrentRow(record);
|
// <Button
|
||||||
}}
|
// key="detail"
|
||||||
>
|
// type="link"
|
||||||
<FormattedMessage id="common.open_video" defaultMessage="$$$" />
|
// size="small"
|
||||||
</a>
|
// onClick={() => {
|
||||||
</Access>
|
// setCurrentRow(record);
|
||||||
],
|
// doToDetail(record);
|
||||||
},];
|
// // setShowDetail(true);
|
||||||
return (
|
// }}
|
||||||
<PageContainer>
|
// >
|
||||||
<ProTable<API.ActionDetection>
|
// <FormattedMessage id="pages.searchTable.detail" defaultMessage="Update" />
|
||||||
headerTitle={intl.formatMessage({
|
// </Button>
|
||||||
id: 'pages.searchTable.title',
|
// ),
|
||||||
defaultMessage: '$$$',
|
// },
|
||||||
})}
|
{
|
||||||
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
key: 'video',
|
||||||
actionRef={actionRef}
|
renderDom: (
|
||||||
rowKey="key"
|
<Button
|
||||||
search={{
|
key="update"
|
||||||
labelWidth: 120,
|
type="link"
|
||||||
}}
|
size="small"
|
||||||
onDataSourceChange={(data)=>{
|
onClick={() => {
|
||||||
|
setVideoModalOpen(true);
|
||||||
}}
|
setCurrentRow(record);
|
||||||
pagination={{
|
}}
|
||||||
// showSizeChanger: true,
|
>
|
||||||
pageSize: 10,
|
<FormattedMessage id="common.open_video" defaultMessage="Update" />
|
||||||
}}
|
</Button>
|
||||||
columnsState={{
|
),
|
||||||
persistenceKey: 'action_detection_list',
|
},
|
||||||
persistenceType: 'localStorage'
|
// {
|
||||||
}}
|
// key: 'destroy',
|
||||||
toolBarRender={() => [
|
// renderDom: (
|
||||||
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
// <IsDelete
|
||||||
//
|
// deleteApi={() => {
|
||||||
// <Button
|
// handleDestroy(record).then(() => {});
|
||||||
// type="primary"
|
// }}
|
||||||
// key="primary"
|
// ></IsDelete>
|
||||||
// onClick={() => {
|
// ),
|
||||||
// setCreateModalOpen(true);
|
// },
|
||||||
// }}
|
]}
|
||||||
// >
|
></TableActionCard>,
|
||||||
// <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
],
|
||||||
// </Button>
|
},
|
||||||
// </Access>
|
];
|
||||||
]}
|
return (
|
||||||
request={async (params = {}, sort) => {
|
<PageContainer>
|
||||||
const {current, ...rest} = params
|
<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 = {
|
const reqParams = {
|
||||||
page: current,
|
page: current,
|
||||||
desc: false,
|
desc: false,
|
||||||
orderKey: "",
|
orderKey: '',
|
||||||
...rest,
|
...rest,
|
||||||
}
|
};
|
||||||
if (sort && Object.keys(sort).length) {
|
if (sort && Object.keys(sort).length) {
|
||||||
reqParams.orderKey = Object.keys(sort)[0]
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
let sort_select = sort[reqParams.orderKey]
|
let sort_select = sort[reqParams.orderKey];
|
||||||
reqParams.desc = sort_select === 'descend';
|
reqParams.desc = sort_select === 'descend';
|
||||||
}
|
}
|
||||||
let resp = await postActionDetectionGetActionDetectionList({...reqParams})
|
let resp = await postActionDetectionGetActionDetectionList({ ...reqParams });
|
||||||
return {
|
return {
|
||||||
data: resp.data.list.map((v: API.ActionDetection)=>{
|
data: resp.data.list.map((v: API.ActionDetection) => {
|
||||||
return {...v, key: v.id}
|
return { ...v, key: v.id };
|
||||||
}),
|
}),
|
||||||
success: resp.success,
|
success: resp.success,
|
||||||
total: resp.data.total,
|
total: resp.data.total,
|
||||||
current: resp.data.page,
|
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}
|
||||||
|
/>
|
||||||
|
|
||||||
}}
|
{/*<ColumnDrawer*/}
|
||||||
columns={columns}
|
{/* handleDrawer={handleColumnDrawer}*/}
|
||||||
// rowSelection={{
|
{/* isShowDetail={showDetail}*/}
|
||||||
// onChange: (_, selectedRows) => {
|
{/* columns={columns}*/}
|
||||||
// setSelectedRows(selectedRows);
|
{/* currentRow={currentRow}*/}
|
||||||
// },
|
{/*/>*/}
|
||||||
// }}
|
</PageContainer>
|
||||||
/>
|
);
|
||||||
{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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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 { postDeviceGetDeviceFkSelect } from '@/services/device/Device';
|
||||||
import {FormattedMessage, useIntl} from '@umijs/max';
|
import { postDeviceRelationCreateDeviceRelation } from '@/services/device/DeviceRelation';
|
||||||
import {postDeviceGetDeviceFkSelect} from "@/services/device/Device";
|
import { ModalForm, ProForm, ProFormSelect } from '@ant-design/pro-components';
|
||||||
import {postDeviceRelationCreateDeviceRelation} from "@/services/device/DeviceRelation";
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
import React, {useState} from 'react';
|
import { Form, message } from 'antd';
|
||||||
import {Button, Form, message} from 'antd';
|
import React from 'react';
|
||||||
export type FormValueType = {
|
export type FormValueType = {
|
||||||
target?: string;
|
target?: string;
|
||||||
template?: string;
|
template?: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
time?: string;
|
time?: string;
|
||||||
frequency?: string;
|
frequency?: string;
|
||||||
} & Partial<API.DeviceRelation>;
|
} & Partial<API.DeviceRelation>;
|
||||||
|
|
||||||
export type CreateFormProps = {
|
export type CreateFormProps = {
|
||||||
createModalOpen: boolean;
|
createModalOpen: boolean;
|
||||||
handleModal: ()=>void;
|
handleModal: () => void;
|
||||||
values: Partial<API.DeviceRelation>;
|
values: Partial<API.DeviceRelation>;
|
||||||
reload: any;
|
reload: any;
|
||||||
};
|
};
|
||||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.DeviceRelation>();
|
||||||
|
|
||||||
const intl = useIntl();
|
return (
|
||||||
const [form] = Form.useForm<API.DeviceRelation>();
|
<ModalForm<API.DeviceRelation>
|
||||||
|
title={intl.formatMessage({
|
||||||
return (
|
id: 'common.modal.table.create.title',
|
||||||
<ModalForm<API.DeviceRelation>
|
defaultMessage: '$$$',
|
||||||
title={intl.formatMessage({
|
})}
|
||||||
id: 'common.modal.table.create.title',
|
open={props.createModalOpen}
|
||||||
defaultMessage: '$$$',
|
form={form}
|
||||||
})}
|
autoFocusFirstInput
|
||||||
open={props.createModalOpen}
|
modalProps={{
|
||||||
form={form}
|
destroyOnClose: true,
|
||||||
autoFocusFirstInput
|
onCancel: () => props.handleModal(),
|
||||||
modalProps={{
|
}}
|
||||||
destroyOnClose: true,
|
submitTimeout={2000}
|
||||||
onCancel: () => props.handleModal(),
|
onFinish={async (values) => {
|
||||||
}}
|
postDeviceRelationCreateDeviceRelation(values)
|
||||||
submitTimeout={2000}
|
.then(() => {
|
||||||
onFinish={async (values) => {
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
postDeviceRelationCreateDeviceRelation(values).then(()=>{
|
props.reload();
|
||||||
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
})
|
||||||
props.reload()
|
.catch(() => {
|
||||||
}).catch(()=>{
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
});
|
||||||
})
|
|
||||||
props.handleModal();
|
props.handleModal();
|
||||||
return true;
|
return true;
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<ProForm.Group>
|
||||||
<ProForm.Group>
|
<ProFormSelect
|
||||||
<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)=>{
|
width="md"
|
||||||
const resp = await postDeviceGetDeviceFkSelect({keyword: keyWord?.keyWords || ''})
|
name="deviceParentFkId"
|
||||||
return resp.data.list.map((v: any)=>{
|
label={
|
||||||
return {
|
<FormattedMessage
|
||||||
label: v.name,
|
id="device.device_relation.table.list.deviceParentFkId"
|
||||||
value: v.id
|
defaultMessage="$$$"
|
||||||
}
|
/>
|
||||||
})
|
}
|
||||||
}
|
placeholder={`${intl.formatMessage({
|
||||||
}/>
|
id: 'common.please_select',
|
||||||
<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)=>{
|
defaultMessage: '$$$',
|
||||||
const resp = await postDeviceGetDeviceFkSelect({keyword: keyWord?.keyWords || ''})
|
})}${intl.formatMessage({
|
||||||
return resp.data.list.map((v: any)=>{
|
id: 'device.device_relation.table.list.deviceParentFkId',
|
||||||
return {
|
defaultMessage: '$$$',
|
||||||
label: v.name,
|
})}`}
|
||||||
value: v.id
|
required={true}
|
||||||
}
|
showSearch
|
||||||
})
|
debounceTime={1000}
|
||||||
}
|
request={async (keyWord) => {
|
||||||
}/>
|
const resp = await postDeviceGetDeviceFkSelect({ keyword: keyWord?.keyWords || '' });
|
||||||
</ProForm.Group>
|
return resp.data.list.map((v: any) => {
|
||||||
</ModalForm>)}
|
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;
|
export default CreateForm;
|
||||||
|
|||||||
Loading…
Reference in New Issue