feat: 统一主题色、表格按钮颜色间距等、项目列表卡片独立并完成初版静态交互

develop
zhoux 2 years ago
parent 9f49af1c10
commit c4f096623a

@ -9,7 +9,7 @@ const Settings: ProLayoutProps & {
} = { } = {
navTheme: 'light', navTheme: 'light',
// 拂晓蓝 // 拂晓蓝
colorPrimary: '#1890ff', colorPrimary: '#155BD4',
layout: 'mix', layout: 'mix',
contentWidth: 'Fluid', contentWidth: 'Fluid',
fixedHeader: false, fixedHeader: false,

@ -0,0 +1,94 @@
html,
body,
#root {
height: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.colorWeak {
filter: invert(80%);
}
.ant-layout {
min-height: 100vh;
}
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
left: unset;
}
canvas {
display: block;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul,
ol {
list-style: none;
}
@media (max-width: 768px) {
.ant-table {
width: 100%;
overflow-x: auto;
}
.ant-table-thead > tr > th,
.ant-table-tbody > tr > th,
.ant-table-thead > tr > td,
.ant-table-tbody > tr > td {
white-space: pre;
}
.ant-table-thead > tr > th > span,
.ant-table-tbody > tr > th > span,
.ant-table-thead > tr > td > span,
.ant-table-tbody > tr > td > span {
display: block;
}
}
.keep-alive-tabs .ant-tabs-nav {
margin: 0;
}
.ant-pro .ant-pro-layout .ant-pro-layout-content {
padding: 0;
}
.ant-pro-form-login-page-left {
max-width: none !important;
}
.ant-pro-card-col.ant-pro-card-split-vertical {
border-inline-end: none;
}
.ant-pro-card-col.ant-pro-card-split-horizontal {
border-block-end: none;
}
/* 1108 update 全局样式新增调整 */
.ant-table-cell .ant-btn.ant-btn-sm {
padding: 0;
}
.ant-pro-table-search .ant-form-item .ant-form-item-label {
text-align: left;
}
.ant-btn-link {
color: #155BD4;
}
/* 单行文本溢出显示省略号 */
.single_line {
white-space: nowrap;
/* 防止文本换行 */
overflow: hidden;
/* 隐藏溢出的文本 */
text-overflow: ellipsis;
/* 显示省略号 */
}
/* 多行文本溢出显示省略号 */
.two_line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 限制显示的行数 */
overflow: hidden;
/* 隐藏溢出的文本 */
}
* {
padding: 0;
margin: 0;
}

@ -74,3 +74,38 @@ ol {
.ant-pro-card-col.ant-pro-card-split-horizontal { .ant-pro-card-col.ant-pro-card-split-horizontal {
border-block-end: none; border-block-end: none;
} }
/* 1108 update 全局样式新增调整 */
// TODO 全局小尺寸按钮,统一间距 (列表操作栏位按钮)
.ant-table-cell .ant-btn.ant-btn-sm{
padding: 0;
}
.ant-pro-table-search .ant-form-item .ant-form-item-label{
text-align: left
}
.ant-btn-link{
color: #155BD4;
}
// TODO 自定义样式块
/* 单行文本溢出显示省略号 */
.single_line {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}
/* 多行文本溢出显示省略号 */
.two_line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示的行数 */
overflow: hidden; /* 隐藏溢出的文本 */
}
* {
padding: 0;
margin: 0;
}

@ -1,17 +1,17 @@
import {deleteDeviceGroupDeleteDeviceGroup, postDeviceGroupGetDeviceGroupList, deleteDeviceGroupDeleteDeviceGroupByIds} from '@/services/device/DeviceGroup';
import {PlusOutlined} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { import {
FooterToolbar, deleteDeviceGroupDeleteDeviceGroup,
PageContainer, deleteDeviceGroupDeleteDeviceGroupByIds,
ProTable, postDeviceGroupGetDeviceGroupList,
} from '@ant-design/pro-components'; } from '@/services/device/DeviceGroup';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max'; import { PlusOutlined } from '@ant-design/icons';
import {Button, message} from 'antd'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import React, {useRef, useState} from 'react'; import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const DeviceGroupList: React.FC = () => { const DeviceGroupList: React.FC = () => {
/** /**
@ -35,9 +35,6 @@ const DeviceGroupList: React.FC = () => {
const [currentRow, setCurrentRow] = useState<API.DeviceGroup>(); const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
// const handle_parent_fk_id = (id: any)=>{ // const handle_parent_fk_id = (id: any)=>{
// if (parent_fk_id_open) { // if (parent_fk_id_open) {
// set_parent_fk_id(undefined); // set_parent_fk_id(undefined);
@ -66,46 +63,45 @@ const DeviceGroupList: React.FC = () => {
// } // }
// } // }
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(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.DeviceGroup) => { const handleDestroy = async (selectedRow: API.DeviceGroup) => {
deleteDeviceGroupDeleteDeviceGroup({id: selectedRow.id}).then(()=>{ deleteDeviceGroupDeleteDeviceGroup({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.DeviceGroup>[] = [ const columns: ProColumns<API.DeviceGroup>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.id" defaultMessage="id" />,
id="device.device_group.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -122,83 +118,64 @@ const columns: ProColumns<API.DeviceGroup>[] = [
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
id="device.device_group.table.list.name" dataIndex: 'name',
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
id="device.device_group.table.list.code" dataIndex: 'code',
defaultMessage="$$$"/>),
dataIndex: "code",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />,
id="device.device_group.table.list.address" dataIndex: 'address',
defaultMessage="$$$"/>),
dataIndex: "address",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="device.device_group.table.list.telephone" <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "telephone", dataIndex: 'telephone',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />,
id="device.device_group.table.list.lon" dataIndex: 'lon',
defaultMessage="$$$"/>),
dataIndex: "lon",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />,
id="device.device_group.table.list.lat" dataIndex: 'lat',
defaultMessage="$$$"/>),
dataIndex: "lat",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="device.device_group.table.list.managerName" <FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "managerName", dataIndex: 'managerName',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="device.device_group.table.list.managerPhone" <FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "managerPhone", dataIndex: 'managerPhone',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />,
id="device.device_group.table.list.isEnable" dataIndex: 'isEnable',
defaultMessage="$$$"/>), filters: true,
dataIndex: "isEnable", onFilter: true,
filters: true, onFilter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'switch', valueType: 'switch',
}, },
@ -237,45 +214,42 @@ const columns: ProColumns<API.DeviceGroup>[] = [
// }, // },
// }, // },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />,
id="device.device_group.table.list.remark" dataIndex: 'remark',
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="device.device_group.table.list.createTime" <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="device.device_group.table.list.updateTime" <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<a <a
key="create" key="create"
onClick={() => { onClick={() => {
@ -297,17 +271,16 @@ const columns: ProColumns<API.DeviceGroup>[] = [
<a <a
key="destroy" key="destroy"
onClick={() => { onClick={() => {
handleDestroy(record).then(()=>{}) handleDestroy(record).then(() => {});
}}> }}
<FormattedMessage >
id="pages.searchTable.destroy" <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
defaultMessage="Destroy"
/>
</a> </a>
</Access> </Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.DeviceGroup> <ProTable<API.DeviceGroup>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -317,6 +290,9 @@ return (
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
scroll={{
x: 1800,
}}
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
@ -326,48 +302,49 @@ return (
}} }}
columnsState={{ columnsState={{
persistenceKey: 'device_group_list', persistenceKey: 'device_group_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="primary" key="primary"
onClick={() => { onClick={() => {
setCurrentRow(undefined) setCurrentRow(undefined);
setCreateModalOpen(true); setCreateModalOpen(true);
}} }}
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.create_root_menu" defaultMessage="New" /> <PlusOutlined />{' '}
<FormattedMessage id="pages.searchTable.create_root_menu" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params 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 postDeviceGroupGetDeviceGroupList({...reqParams}) let resp = await postDeviceGroupGetDeviceGroupList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.DeviceGroup)=>{ data: resp.data.list.map((v: API.DeviceGroup) => {
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} columns={columns}
rowSelection={{ rowSelection={{
@ -388,9 +365,13 @@ return (
> >
<Button <Button
onClick={async () => { onClick={async () => {
deleteDeviceGroupDeleteDeviceGroupByIds({ids: selectedRowsState.map((v: API.DeviceGroup)=>{return v.id as number})}).then(()=>{ deleteDeviceGroupDeleteDeviceGroupByIds({
ids: selectedRowsState.map((v: API.DeviceGroup) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -419,9 +400,8 @@ return (
columns={columns} columns={columns}
currentRow={currentRow} currentRow={currentRow}
/> />
</PageContainer> </PageContainer>
); );
}; };
export default DeviceGroupList; export default DeviceGroupList;

@ -1,40 +1,43 @@
import {DeviceGroupColumns} from '@/pages/Device/DeviceGroupList/components/Columns'; import { ColumnDrawer as DeviceCategoryColumnDrawer } from '@/pages/Device/DeviceCategoryList/components/ColumnDrawer';
import { DeviceCategoryColumns } from '@/pages/Device/DeviceCategoryList/components/Columns';
import { ColumnDrawer as DeviceGroupColumnDrawer } from '@/pages/Device/DeviceGroupList/components/ColumnDrawer';
import { DeviceGroupColumns } from '@/pages/Device/DeviceGroupList/components/Columns';
import { import {
postDeviceGroupGetDeviceGroupById, deleteDeviceDeleteDevice,
postDeviceGroupGetDeviceGroupFkSelect, deleteDeviceDeleteDeviceByIds,
postDeviceGroupGetDeviceGroupNames, postDeviceCloseRtspCamera,
postDeviceGroupGetDeviceGroupTree postDeviceGetDeviceList,
} from '@/services/device/DeviceGroup'; postDeviceOpenRtspCamera,
import {ColumnDrawer as DeviceGroupColumnDrawer} from "@/pages/Device/DeviceGroupList/components/ColumnDrawer"; } from '@/services/device/Device';
import {DeviceCategoryColumns} from '@/pages/Device/DeviceCategoryList/components/Columns';
import { import {
postDeviceCategoryGetDeviceCategoryById, postDeviceCategoryGetDeviceCategoryById,
postDeviceCategoryGetDeviceCategoryFkSelect, postDeviceCategoryGetDeviceCategoryFkSelect,
postDeviceCategoryGetDeviceCategoryNames postDeviceCategoryGetDeviceCategoryNames,
} from '@/services/device/DeviceCategory'; } from '@/services/device/DeviceCategory';
import {ColumnDrawer as DeviceCategoryColumnDrawer} from "@/pages/Device/DeviceCategoryList/components/ColumnDrawer";
import { import {
deleteDeviceDeleteDevice, postDeviceGroupGetDeviceGroupById,
postDeviceGetDeviceList, postDeviceGroupGetDeviceGroupFkSelect,
deleteDeviceDeleteDeviceByIds, postDeviceOpenRtspCamera, postDeviceCloseRtspCamera postDeviceGroupGetDeviceGroupNames,
} from '@/services/device/Device'; postDeviceGroupGetDeviceGroupTree,
import {PlusOutlined, RedoOutlined} from '@ant-design/icons'; } from '@/services/device/DeviceGroup';
import type {ActionType, ProColumns} from '@ant-design/pro-components'; import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { import {
FooterToolbar, FooterToolbar,
PageContainer, PageContainer,
ProCard,
ProFormSelect,
ProFormText,
ProTable, ProTable,
ProFormSelect, ProCard, ProFormText,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import {FormattedMessage, useIntl, useAccess, Access, history} from '@umijs/max'; import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import {Button, message, Tree} from 'antd'; import { Button, Popconfirm, Tree, message } from 'antd';
import React, {useEffect, useRef, useState} from 'react'; import { DataNode } from 'antd/es/tree';
import React, { useEffect, useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm"; import VideoModal from './components/VideoModal';
import {ColumnDrawer} from "./components/ColumnDrawer";
import {DataNode} from "antd/es/tree";
import {postDepartmentGetDepartmentTree} from "@/services/system/Department";
import VideoModal from "./components/VideoModal";
const DeviceList: React.FC = () => { const DeviceList: React.FC = () => {
/** /**
@ -59,139 +62,140 @@ const DeviceList: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.Device>(); const [currentRow, setCurrentRow] = useState<API.Device>();
const [selectedRowsState, setSelectedRows] = useState<API.Device[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.Device[]>([]);
const [category_fk_id_open, set_category_fk_id_open] = useState(false) const [category_fk_id_open, set_category_fk_id_open] = useState(false);
const [category_fk_id, set_category_fk_id] = useState<API.DeviceCategory>() const [category_fk_id, set_category_fk_id] = useState<API.DeviceCategory>();
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false) const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false);
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]) const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}) const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
const [group_fk_id_open, set_group_fk_id_open] = useState(false) const [group_fk_id_open, set_group_fk_id_open] = useState(false);
const [group_fk_id, set_group_fk_id] = useState<API.DeviceGroup>() const [group_fk_id, set_group_fk_id] = useState<API.DeviceGroup>();
const [group_fk_id_column_open, set_group_fk_id_column_open] = useState(false) const [group_fk_id_column_open, set_group_fk_id_column_open] = useState(false);
const [groupFkIdIds, setGroupFkIdIds] = useState([]) const [groupFkIdIds, setGroupFkIdIds] = useState([]);
const [groupFkIdMap, setGroupFkIdMap] = useState<{ [key: number]: string }>({}) const [groupFkIdMap, setGroupFkIdMap] = useState<{ [key: number]: string }>({});
const [hasInit, setHasInit] = useState<boolean>(false) const [hasInit, setHasInit] = useState<boolean>(false);
const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]); const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]);
const [selectNodes, setSelectNodes] = React.useState<any[]>([]); const [selectNodes, setSelectNodes] = React.useState<any[]>([]);
const [videoOpening, setVideoOpening] = useState<boolean>(false); const [videoOpening, setVideoOpening] = useState<boolean>(false);
const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({}) const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({});
useEffect(() => { useEffect(() => {
postDeviceGroupGetDeviceGroupTree().then((resp) => { postDeviceGroupGetDeviceGroupTree()
setNodeTreeData(resp.data.tree) .then((resp) => {
setHasInit(true) setNodeTreeData(resp.data.tree);
}).catch(() => { setHasInit(true);
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
}, []) .catch(() => {
const handleVideoModal = ()=>{ message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}, []);
const handleVideoModal = () => {
if (videoModalOpen) { if (videoModalOpen) {
setVideoModalOpen(false) setVideoModalOpen(false);
if (videoServerParam?.pid || 0) { if (videoServerParam?.pid || 0) {
postDeviceCloseRtspCamera({pid: videoServerParam.pid}).then((resp) => { postDeviceCloseRtspCamera({ pid: videoServerParam.pid }).then((resp) => {
console.log(resp) console.log(resp);
}) });
} }
setCurrentRow(undefined) setCurrentRow(undefined);
setVideoServerParam({}) setVideoServerParam({});
} else { } else {
setVideoModalOpen(true) setVideoModalOpen(true);
}
} }
};
const handle_category_fk_id = (id: any) => { const handle_category_fk_id = (id: any) => {
if (category_fk_id_open) { if (category_fk_id_open) {
set_category_fk_id(undefined); set_category_fk_id(undefined);
set_category_fk_id_open(false) set_category_fk_id_open(false);
} else { } else {
postDeviceCategoryGetDeviceCategoryById({id: id}).then((resp) => { postDeviceCategoryGetDeviceCategoryById({ id: id }).then((resp) => {
set_category_fk_id(resp.data.deviceCategory) set_category_fk_id(resp.data.deviceCategory);
set_category_fk_id_open(true) set_category_fk_id_open(true);
}) });
}
} }
};
const handle_category_fk_id_column_open = () => { const handle_category_fk_id_column_open = () => {
if (category_fk_id_column_open) { if (category_fk_id_column_open) {
set_category_fk_id_column_open(false) set_category_fk_id_column_open(false);
} else { } else {
postDeviceCategoryGetDeviceCategoryNames({ids: categoryFkIdIds}).then((resp) => { postDeviceCategoryGetDeviceCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any) => { resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setCategoryFkIdMap(a)
})
set_category_fk_id_column_open(true)
} }
});
setCategoryFkIdMap(a);
});
set_category_fk_id_column_open(true);
} }
};
const handle_group_fk_id = (id: any) => { const handle_group_fk_id = (id: any) => {
if (group_fk_id_open) { if (group_fk_id_open) {
set_group_fk_id(undefined); set_group_fk_id(undefined);
set_group_fk_id_open(false) set_group_fk_id_open(false);
} else { } else {
postDeviceGroupGetDeviceGroupById({id: id}).then((resp) => { postDeviceGroupGetDeviceGroupById({ id: id }).then((resp) => {
set_group_fk_id(resp.data.deviceGroup) set_group_fk_id(resp.data.deviceGroup);
set_group_fk_id_open(true) set_group_fk_id_open(true);
}) });
}
} }
};
const handle_group_fk_id_column_open = () => { const handle_group_fk_id_column_open = () => {
if (group_fk_id_column_open) { if (group_fk_id_column_open) {
set_group_fk_id_column_open(false) set_group_fk_id_column_open(false);
} else { } else {
postDeviceGroupGetDeviceGroupNames({ids: groupFkIdIds}).then((resp) => { postDeviceGroupGetDeviceGroupNames({ ids: groupFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any) => { resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setGroupFkIdMap(a)
})
set_group_fk_id_column_open(true)
} }
});
setGroupFkIdMap(a);
});
set_group_fk_id_column_open(true);
} }
};
const handleUpdateModal = () => { const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(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.Device) => { const handleDestroy = async (selectedRow: API.Device) => {
deleteDeviceDeleteDevice({id: selectedRow.id}).then(() => { deleteDeviceDeleteDevice({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(() => { actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.Device>[] = [ const columns: ProColumns<API.Device>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.id" defaultMessage="id" />,
id="device.device.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -225,65 +229,60 @@ const DeviceList: React.FC = () => {
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />,
id="device.device.table.list.name" dataIndex: 'name',
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />,
id="device.device.table.list.code" dataIndex: 'code',
defaultMessage="$$$"/>),
dataIndex: "code",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />,
id="device.device.table.list.position" dataIndex: 'position',
defaultMessage="$$$"/>),
dataIndex: "position",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />,
id="device.device.table.list.param" dataIndex: 'param',
defaultMessage="$$$"/>),
dataIndex: "param",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />,
id="device.device.table.list.spec" dataIndex: 'spec',
defaultMessage="$$$"/>),
dataIndex: "spec",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />,
id="device.device.table.list.categoryFkId" dataIndex: 'categoryFkId',
defaultMessage="$$$"/>),
dataIndex: "categoryFkId",
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (category_fk_id_column_open) { if (category_fk_id_column_open) {
return (<a onClick={() => { return (
handle_category_fk_id(record.categoryFkId) <a
}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}</a>) onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={() => { return (
handle_category_fk_id(record.categoryFkId) <a
}}>{record.categoryFkId}</a>) onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record.categoryFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
@ -293,38 +292,54 @@ const DeviceList: React.FC = () => {
width="md" width="md"
labelCol={{ span: 4 }} labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }} wrapperCol={{ span: 22 }}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({
required={false} showSearch debounceTime={1000} id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => { request={async (keyWord) => {
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({keyword: keyWord?.keyWords || ''}) const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => { return resp.data.list.map((v: any) => {
return { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />,
id="device.device.table.list.groupFkId" dataIndex: 'groupFkId',
defaultMessage="$$$"/>),
dataIndex: "groupFkId",
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (group_fk_id_column_open) { if (group_fk_id_column_open) {
return (<a onClick={() => { return (
handle_group_fk_id(record.groupFkId) <a
}}>{record?.groupFkId ? groupFkIdMap[record.groupFkId] : undefined}</a>) onClick={() => {
handle_group_fk_id(record.groupFkId);
}}
>
{record?.groupFkId ? groupFkIdMap[record.groupFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={() => { return (
handle_group_fk_id(record.groupFkId) <a
}}>{record.groupFkId}</a>) onClick={() => {
handle_group_fk_id(record.groupFkId);
}}
>
{record.groupFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
@ -334,140 +349,164 @@ const DeviceList: React.FC = () => {
width="md" width="md"
labelCol={{ span: 4 }} labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }} wrapperCol={{ span: 22 }}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({
required={false} showSearch debounceTime={1000} id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => { request={async (keyWord) => {
const resp = await postDeviceGroupGetDeviceGroupFkSelect({keyword: keyWord?.keyWords || ''}) const resp = await postDeviceGroupGetDeviceGroupFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => { return resp.data.list.map((v: any) => {
return { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />,
id="device.device.table.list.isEnable" dataIndex: 'isEnable',
defaultMessage="$$$"/>), filters: true,
dataIndex: "isEnable", onFilter: true,
filters: true, onFilter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'switch', valueType: 'switch',
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />,
id="device.device.table.list.remark" dataIndex: 'remark',
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.createTime" defaultMessage="$$$" />,
id="device.device.table.list.createTime" dataIndex: 'createTime',
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="device.device.table.list.updateTime" defaultMessage="$$$" />,
id="device.device.table.list.updateTime" dataIndex: 'updateTime',
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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',
width: 250,
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
<a accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update" key="update"
type="link"
size="small"
onClick={() => { onClick={() => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
setCurrentRow(record); setCurrentRow(record);
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </Button>
<a <Popconfirm
key="destroy" placement="topLeft"
onClick={() => { title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
handleDestroy(record).then(() => { description={intl.formatMessage({
}) id: 'common.modal.table.delete.content',
}}> defaultMessage: '$$$',
<FormattedMessage })}
id="pages.searchTable.destroy" okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
defaultMessage="Destroy" cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
/> onConfirm={() => {
</a> handleDestroy(record).then(() => {});
<a }}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
<Button
key="video" key="video"
type="link"
size="small"
onClick={() => { onClick={() => {
setVideoOpening(true) setVideoOpening(true);
if (record.param) { if (record.param) {
postDeviceOpenRtspCamera({url: record.param}).then((resp) => { postDeviceOpenRtspCamera({ url: record.param })
setVideoServerParam(resp.data) .then((resp) => {
setVideoOpening(false) setVideoServerParam(resp.data);
setVideoOpening(false);
setVideoModalOpen(true); setVideoModalOpen(true);
console.log(resp.data) console.log(resp.data);
setCurrentRow(record); setCurrentRow(record);
}).catch(()=>{
setVideoOpening(false)
message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
});
} else { } else {
setVideoOpening(false) setVideoOpening(false);
message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'})) message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
} }
// setVideoModalOpen(true); }}
// setCurrentRow(record); >
}}>
<FormattedMessage id="common.open_video" defaultMessage="$$$" /> <FormattedMessage id="common.open_video" defaultMessage="$$$" />
</a> </Button>
</Access> </Access>,
], ],
},]; },
];
return ( return (
<PageContainer> <PageContainer>
<ProCard split="vertical"> <ProCard split="vertical">
<ProCard title="网点选择" colSpan="20%" extra={<Button icon={<RedoOutlined/>} onClick={() => { <ProCard
title="网点选择"
colSpan="20%"
extra={
<Button
icon={<RedoOutlined />}
onClick={() => {
setSelectNodes([]); setSelectNodes([]);
actionRef.current?.reload() actionRef.current?.reload();
}}></Button>}> }}
{ >
hasInit && (
</Button>
}
>
{hasInit && (
<Tree <Tree
checkable={false} checkable={false}
defaultExpandAll={true} defaultExpandAll={true}
selectedKeys={selectNodes} selectedKeys={selectNodes}
treeData={nodeTreeData} treeData={nodeTreeData}
onSelect={(selectKeys) => { onSelect={(selectKeys) => {
setSelectNodes(selectKeys) setSelectNodes(selectKeys);
actionRef.current?.reload() actionRef.current?.reload();
}} }}
/> />
) )}
}
</ProCard> </ProCard>
<ProCard title="" headerBordered> <ProCard title="" headerBordered>
<ProTable<API.Device> <ProTable<API.Device>
@ -475,30 +514,30 @@ const DeviceList: React.FC = () => {
id: 'pages.searchTable.title', id: 'pages.searchTable.title',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
loading={{tip: intl.formatMessage({ loading={{
tip: intl.formatMessage({
id: 'common.video_opening', id: 'common.video_opening',
defaultMessage: '$$$' defaultMessage: '$$$',
}), spinning: videoOpening}} }),
options={{fullScreen: true, setting: true, density: true, reload: true}} spinning: videoOpening,
}}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
scroll={{ x: 1600 }}
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
onDataSourceChange={(data) => { onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => { let CategoryFkIdIds: any = data.map((v) => {
return v.categoryFkId return v.categoryFkId;
}) });
setCategoryFkIdIds(CategoryFkIdIds) setCategoryFkIdIds(CategoryFkIdIds);
let GroupFkIdIds: any = data.map((v) => { let GroupFkIdIds: any = data.map((v) => {
return v.groupFkId return v.groupFkId;
}) });
setGroupFkIdIds(GroupFkIdIds) setGroupFkIdIds(GroupFkIdIds);
}} }}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
@ -506,49 +545,44 @@ const DeviceList: React.FC = () => {
}} }}
columnsState={{ columnsState={{
persistenceKey: 'device_list', persistenceKey: 'device_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="category_fk_id_show" key="category_fk_id_show"
onClick={() => { onClick={() => {
handle_category_fk_id_column_open() handle_category_fk_id_column_open();
}} }}
> >
{ {category_fk_id_column_open ? (
category_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>)
}
<FormattedMessage <FormattedMessage
id="device.device.table.list.categoryFkId" id="device.device.table.list.categoryFkId"
defaultMessage="$$$"/> defaultMessage="$$$"
/>
</Button> </Button>
<Button <Button
type="primary" type="primary"
key="group_fk_id_show" key="group_fk_id_show"
onClick={() => { onClick={() => {
handle_group_fk_id_column_open() handle_group_fk_id_column_open();
}} }}
> >
{ {group_fk_id_column_open ? (
group_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>) <FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />
}
<FormattedMessage
id="device.device.table.list.groupFkId"
defaultMessage="$$$"/>
</Button> </Button>
<Button <Button
@ -558,37 +592,37 @@ const DeviceList: React.FC = () => {
setCreateModalOpen(true); setCreateModalOpen(true);
}} }}
> >
<PlusOutlined/> <FormattedMessage id="pages.searchTable.new" defaultMessage="New"/> <PlusOutlined />{' '}
<FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params const { current, ...rest } = params;
const reqParams:any = { const reqParams: any = {
page: current, page: current,
desc: false, desc: false,
orderKey: "", orderKey: '',
...rest, ...rest,
} };
if (selectNodes.length) { if (selectNodes.length) {
reqParams.groupFkId = selectNodes[0] reqParams.groupFkId = selectNodes[0];
} }
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 postDeviceGetDeviceList({...reqParams}) let resp = await postDeviceGetDeviceList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.Device) => { data: resp.data.list.map((v: API.Device) => {
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} columns={columns}
rowSelection={{ rowSelection={{
@ -601,9 +635,9 @@ const DeviceList: React.FC = () => {
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen"/>{' '} <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{fontWeight: 600}}>{selectedRowsState.length}</a>{' '} <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$"/> <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div> </div>
} }
> >
@ -611,11 +645,11 @@ const DeviceList: React.FC = () => {
onClick={async () => { onClick={async () => {
deleteDeviceDeleteDeviceByIds({ deleteDeviceDeleteDeviceByIds({
ids: selectedRowsState.map((v: API.Device) => { ids: selectedRowsState.map((v: API.Device) => {
return v.id as number return v.id as number;
}) }),
}).then(() => { }).then(() => {
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -658,13 +692,13 @@ const DeviceList: React.FC = () => {
columns={DeviceGroupColumns} columns={DeviceGroupColumns}
currentRow={group_fk_id} currentRow={group_fk_id}
/> />
<VideoModal modalOpen={videoModalOpen} <VideoModal
modalOpen={videoModalOpen}
handleModal={handleVideoModal} handleModal={handleVideoModal}
values={currentRow || {}} values={currentRow || {}}
videoServerParam={videoServerParam} videoServerParam={videoServerParam}
reload={actionRef.current?.reload} reload={actionRef.current?.reload}
/> />
</PageContainer> </PageContainer>
); );
}; };

@ -132,11 +132,11 @@ const AlgorithmModelList: React.FC = () => {
return ( return (
<> <>
<ProFormText <ProFormText
width="md" style={{ textAlign: 'left' }}
labelCol={{ span: 4 }} labelAlign="left"
wrapperCol={{ span: 22 }} wrapperCol={{ span: 22 }}
name="id" name="id"
placeholder={`${intl.formatMessage({ placeholder={`123${intl.formatMessage({
id: 'common.please_input', id: 'common.please_input',
defaultMessage: '$$$', defaultMessage: '$$$',
})}`} })}`}
@ -191,10 +191,9 @@ const AlgorithmModelList: React.FC = () => {
return ( return (
// value 和 onchange 会通过 form 自动注入。 // value 和 onchange 会通过 form 自动注入。
<ProFormSelect <ProFormSelect
width="md" labelAlign="left"
labelCol={{ span: 4 }} wrapperCol={{ flex: 1 }}
wrapperCol={{ span: 22 }} placeholder={`111${intl.formatMessage({
placeholder={`${intl.formatMessage({
id: 'common.please_select', id: 'common.please_select',
defaultMessage: '$$$', defaultMessage: '$$$',
})}`} })}`}
@ -322,12 +321,12 @@ const AlgorithmModelList: React.FC = () => {
id: 'pages.searchTable.title', id: 'pages.searchTable.title',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
scroll={{ y: 500 }} scroll={{ y: 500 , x: 1300}}
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
search={{ search={{
labelWidth: 120, labelWidth: 100,
}} }}
onDataSourceChange={(data) => { onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => { let CategoryFkIdIds: any = data.map((v) => {

@ -1,21 +1,24 @@
import {ProjectColumns} from '@/pages/Project/ProjectList/components/Columns'; import { ColumnDrawer as ProjectColumnDrawer } from '@/pages/Project/ProjectList/components/ColumnDrawer';
import {postProjectGetProjectById, postProjectGetProjectFkSelect, postProjectGetProjectNames} from '@/services/project/Project'; import { ProjectColumns } from '@/pages/Project/ProjectList/components/Columns';
import {ColumnDrawer as ProjectColumnDrawer} from "@/pages/Project/ProjectList/components/ColumnDrawer"; import {
import {deleteBusinessImageDeleteBusinessImage, postBusinessImageGetBusinessImageList, deleteBusinessImageDeleteBusinessImageByIds} from '@/services/resource/BusinessImage'; postProjectGetProjectById,
postProjectGetProjectFkSelect,
postProjectGetProjectNames,
} from '@/services/project/Project';
import {
deleteBusinessImageDeleteBusinessImage,
deleteBusinessImageDeleteBusinessImageByIds,
postBusinessImageGetBusinessImageList,
} from '@/services/resource/BusinessImage';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
FooterToolbar, import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
PageContainer, import { Button, Popconfirm, message } from 'antd';
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const BusinessImageList: React.FC = () => { const BusinessImageList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -37,79 +40,78 @@ const BusinessImageList: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.BusinessImage>(); const [currentRow, setCurrentRow] = useState<API.BusinessImage>();
const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]);
const [project_fk_id_open, set_project_fk_id_open] = useState(false) const [project_fk_id_open, set_project_fk_id_open] = useState(false);
const [project_fk_id, set_project_fk_id] = useState<API.Project>() const [project_fk_id, set_project_fk_id] = useState<API.Project>();
const [project_fk_id_column_open, set_project_fk_id_column_open] = useState(false) const [project_fk_id_column_open, set_project_fk_id_column_open] = useState(false);
const [projectFkIdIds, setProjectFkIdIds] = useState([]) const [projectFkIdIds, setProjectFkIdIds] = useState([]);
const [projectFkIdMap, setProjectFkIdMap] = useState<{ [key: number]: string }>({}) const [projectFkIdMap, setProjectFkIdMap] = useState<{ [key: number]: string }>({});
const handle_project_fk_id = (id: any)=>{ const handle_project_fk_id = (id: any) => {
if (project_fk_id_open) { if (project_fk_id_open) {
set_project_fk_id(undefined); set_project_fk_id(undefined);
set_project_fk_id_open(false) set_project_fk_id_open(false);
}else { } else {
postProjectGetProjectById({id: id}).then((resp)=>{ postProjectGetProjectById({ id: id }).then((resp) => {
set_project_fk_id(resp.data.project) set_project_fk_id(resp.data.project);
set_project_fk_id_open(true) set_project_fk_id_open(true);
}) });
}
} }
const handle_project_fk_id_column_open = ()=>{ };
const handle_project_fk_id_column_open = () => {
if (project_fk_id_column_open) { if (project_fk_id_column_open) {
set_project_fk_id_column_open(false) set_project_fk_id_column_open(false);
}else { } else {
postProjectGetProjectNames({ids: projectFkIdIds}).then((resp)=>{ postProjectGetProjectNames({ ids: projectFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any)=>{ resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setProjectFkIdMap(a)
})
set_project_fk_id_column_open(true)
} }
});
setProjectFkIdMap(a);
});
set_project_fk_id_column_open(true);
} }
};
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(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.BusinessImage) => { const handleDestroy = async (selectedRow: API.BusinessImage) => {
deleteBusinessImageDeleteBusinessImage({id: selectedRow.id}).then(()=>{ deleteBusinessImageDeleteBusinessImage({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.BusinessImage>[] = [ const columns: ProColumns<API.BusinessImage>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.business_image.table.list.id" defaultMessage="id" />,
id="resource.business_image.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -126,156 +128,181 @@ const columns: ProColumns<API.BusinessImage>[] = [
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.business_image.table.list.name" defaultMessage="$$$" />,
id="resource.business_image.table.list.name" dataIndex: 'name',
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.version" <FormattedMessage id="resource.business_image.table.list.version" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "version", dataIndex: 'version',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.business_image.table.list.projectFkId" id="resource.business_image.table.list.projectFkId"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "projectFkId", />
),
dataIndex: 'projectFkId',
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (project_fk_id_column_open) { if (project_fk_id_column_open) {
return ( <a onClick={()=>{handle_project_fk_id(record.projectFkId)}}>{record?.projectFkId ? projectFkIdMap[record.projectFkId] : undefined}</a>) return (
<a
onClick={() => {
handle_project_fk_id(record.projectFkId);
}}
>
{record?.projectFkId ? projectFkIdMap[record.projectFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={()=>{handle_project_fk_id(record.projectFkId)}}>{record.projectFkId}</a>) return (
<a
onClick={() => {
handle_project_fk_id(record.projectFkId);
}}
>
{record.projectFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
return ( return (
// value 和 onchange 会通过 form 自动注入。 // value 和 onchange 会通过 form 自动注入。
<ProFormSelect <ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} placeholder={`${intl.formatMessage({
required={false} showSearch debounceTime={1000} id: 'common.please_select',
request={async (keyWord)=>{ defaultMessage: '$$$',
const resp = await postProjectGetProjectFkSelect({keyword: keyWord?.keyWords || ''}) })}`}
return resp.data.list.map((v: any)=>{ required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postProjectGetProjectFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.business_image.table.list.path" defaultMessage="$$$" />,
id="resource.business_image.table.list.path" dataIndex: 'path',
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.startCode" <FormattedMessage id="resource.business_image.table.list.startCode" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "startCode", dataIndex: 'startCode',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.config" <FormattedMessage id="resource.business_image.table.list.config" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "config", dataIndex: 'config',
hideInSearch: true, hideInSearch: true,
hideInTable: true, hideInTable: true,
hideInDescriptions: true, hideInDescriptions: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.configHash" <FormattedMessage id="resource.business_image.table.list.configHash" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "configHash", dataIndex: 'configHash',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.remark" <FormattedMessage id="resource.business_image.table.list.remark" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "remark", dataIndex: 'remark',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.createTime" <FormattedMessage id="resource.business_image.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.business_image.table.list.updateTime" <FormattedMessage id="resource.business_image.table.list.updateTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
<a accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update" key="update"
type="link"
size="small"
onClick={() => { onClick={() => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
setCurrentRow(record); setCurrentRow(record);
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </Button>
<a <Popconfirm
key="destroy" placement="topLeft"
onClick={() => { title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
handleDestroy(record).then(()=>{}) description={intl.formatMessage({
}}> id: 'common.modal.table.delete.content',
<FormattedMessage defaultMessage: '$$$',
id="pages.searchTable.destroy" })}
defaultMessage="Destroy" okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
/> cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
</a> onConfirm={() => {
</Access> handleDestroy(record).then(() => {});
}}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.BusinessImage> <ProTable<API.BusinessImage>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -285,17 +312,17 @@ return (
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
scroll={{
x: 1300,
}}
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
onDataSourceChange={(data)=>{ onDataSourceChange={(data) => {
let ProjectFkIdIds: any = data.map((v) => {
let ProjectFkIdIds: any = data.map((v)=>{ return v.projectFkId;
return v.projectFkId });
}) setProjectFkIdIds(ProjectFkIdIds);
setProjectFkIdIds(ProjectFkIdIds)
}} }}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
@ -303,29 +330,29 @@ return (
}} }}
columnsState={{ columnsState={{
persistenceKey: 'business_image_list', persistenceKey: 'business_image_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="project_fk_id_show" key="project_fk_id_show"
onClick={() => { onClick={() => {
handle_project_fk_id_column_open() handle_project_fk_id_column_open();
}} }}
> >
{ {project_fk_id_column_open ? (
project_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>)
}
<FormattedMessage <FormattedMessage
id="resource.business_image.table.list.projectFkId" id="resource.business_image.table.list.projectFkId"
defaultMessage="$$$"/> defaultMessage="$$$"
/>
</Button> </Button>
<Button <Button
@ -337,32 +364,31 @@ return (
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /> <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params 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 postBusinessImageGetBusinessImageList({...reqParams}) let resp = await postBusinessImageGetBusinessImageList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.BusinessImage)=>{ data: resp.data.list.map((v: API.BusinessImage) => {
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} columns={columns}
rowSelection={{ rowSelection={{
@ -383,9 +409,13 @@ return (
> >
<Button <Button
onClick={async () => { onClick={async () => {
deleteBusinessImageDeleteBusinessImageByIds({ids: selectedRowsState.map((v: API.BusinessImage)=>{return v.id as number})}).then(()=>{ deleteBusinessImageDeleteBusinessImageByIds({
ids: selectedRowsState.map((v: API.BusinessImage) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -420,9 +450,8 @@ return (
columns={ProjectColumns} columns={ProjectColumns}
currentRow={project_fk_id} currentRow={project_fk_id}
/> />
</PageContainer> </PageContainer>
); );
}; };
export default BusinessImageList; export default BusinessImageList;

@ -1,18 +1,17 @@
import {deleteModelCategoryDeleteModelCategory, postModelCategoryGetModelCategoryList, deleteModelCategoryDeleteModelCategoryByIds} from '@/services/resource/ModelCategory'; import {
deleteModelCategoryDeleteModelCategory,
deleteModelCategoryDeleteModelCategoryByIds,
postModelCategoryGetModelCategoryList,
} from '@/services/resource/ModelCategory';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
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 { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
PageContainer, import { Button, Popconfirm, message } from 'antd';
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelCategoryList: React.FC = () => { const ModelCategoryList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -35,46 +34,45 @@ const ModelCategoryList: React.FC = () => {
const [currentRow, setCurrentRow] = useState<API.ModelCategory>(); const [currentRow, setCurrentRow] = useState<API.ModelCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]);
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(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.ModelCategory) => { const handleDestroy = async (selectedRow: API.ModelCategory) => {
deleteModelCategoryDeleteModelCategory({id: selectedRow.id}).then(()=>{ deleteModelCategoryDeleteModelCategory({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.ModelCategory>[] = [ const columns: ProColumns<API.ModelCategory>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_category.table.list.id" defaultMessage="id" />,
id="resource.model_category.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -91,84 +89,88 @@ const columns: ProColumns<API.ModelCategory>[] = [
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$" />,
id="resource.model_category.table.list.name" dataIndex: 'name',
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$" />,
id="resource.model_category.table.list.code" dataIndex: 'code',
defaultMessage="$$$"/>),
dataIndex: "code",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_category.table.list.remark" <FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "remark", dataIndex: 'remark',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_category.table.list.createTime" <FormattedMessage id="resource.model_category.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_category.table.list.updateTime" <FormattedMessage id="resource.model_category.table.list.updateTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
<a accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update" key="update"
type="link"
size="small"
onClick={() => { onClick={() => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
setCurrentRow(record); setCurrentRow(record);
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </Button>
<a <Popconfirm
key="destroy" placement="topLeft"
onClick={() => { title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
handleDestroy(record).then(()=>{}) description={intl.formatMessage({
}}> id: 'common.modal.table.delete.content',
<FormattedMessage defaultMessage: '$$$',
id="pages.searchTable.destroy" })}
defaultMessage="Destroy" okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
/> cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
</a> onConfirm={() => {
</Access> handleDestroy(record).then(() => {});
}}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.ModelCategory> <ProTable<API.ModelCategory>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -181,20 +183,20 @@ return (
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
onDataSourceChange={(data)=>{ onDataSourceChange={(data) => {}}
}}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
pageSize: 10, pageSize: 10,
}} }}
columnsState={{ columnsState={{
persistenceKey: 'model_category_list', persistenceKey: 'model_category_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="primary" key="primary"
@ -204,32 +206,31 @@ return (
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /> <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params 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 postModelCategoryGetModelCategoryList({...reqParams}) let resp = await postModelCategoryGetModelCategoryList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.ModelCategory)=>{ data: resp.data.list.map((v: API.ModelCategory) => {
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} columns={columns}
rowSelection={{ rowSelection={{
@ -250,9 +251,13 @@ return (
> >
<Button <Button
onClick={async () => { onClick={async () => {
deleteModelCategoryDeleteModelCategoryByIds({ids: selectedRowsState.map((v: API.ModelCategory)=>{return v.id as number})}).then(()=>{ deleteModelCategoryDeleteModelCategoryByIds({
ids: selectedRowsState.map((v: API.ModelCategory) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -281,9 +286,8 @@ return (
columns={columns} columns={columns}
currentRow={currentRow} currentRow={currentRow}
/> />
</PageContainer> </PageContainer>
); );
}; };
export default ModelCategoryList; export default ModelCategoryList;

@ -1,21 +1,25 @@
import {ModelVersionColumns} from '@/pages/Resource/ModelVersionList/components/Columns'; import { ColumnDrawer as ModelVersionColumnDrawer } from '@/pages/Resource/ModelVersionList/components/ColumnDrawer';
import {postModelVersionGetModelVersionById, postModelVersionGetModelVersionFkSelect, postModelVersionGetModelVersionNames} from '@/services/resource/ModelVersion'; import { ModelVersionColumns } from '@/pages/Resource/ModelVersionList/components/Columns';
import {ColumnDrawer as ModelVersionColumnDrawer} from "@/pages/Resource/ModelVersionList/components/ColumnDrawer"; import {
import {deleteModelImageDeleteModelImage, postModelImageGetModelImageList, deleteModelImageDeleteModelImageByIds} from '@/services/resource/ModelImage'; deleteModelImageDeleteModelImage,
deleteModelImageDeleteModelImageByIds,
postModelImageGetModelImageList,
} from '@/services/resource/ModelImage';
import {
postModelVersionGetModelVersionById,
postModelVersionGetModelVersionFkSelect,
postModelVersionGetModelVersionNames,
} from '@/services/resource/ModelVersion';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
FooterToolbar, import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
PageContainer, import { Button, Popconfirm, message } from 'antd';
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelImageList: React.FC = () => { const ModelImageList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -37,79 +41,78 @@ const ModelImageList: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelImage>(); const [currentRow, setCurrentRow] = useState<API.ModelImage>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelImage[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.ModelImage[]>([]);
const [model_version_fk_id_open, set_model_version_fk_id_open] = useState(false) const [model_version_fk_id_open, set_model_version_fk_id_open] = useState(false);
const [model_version_fk_id, set_model_version_fk_id] = useState<API.ModelVersion>() const [model_version_fk_id, set_model_version_fk_id] = useState<API.ModelVersion>();
const [model_version_fk_id_column_open, set_model_version_fk_id_column_open] = useState(false) const [model_version_fk_id_column_open, set_model_version_fk_id_column_open] = useState(false);
const [modelVersionFkIdIds, setModelVersionFkIdIds] = useState([]) const [modelVersionFkIdIds, setModelVersionFkIdIds] = useState([]);
const [modelVersionFkIdMap, setModelVersionFkIdMap] = useState<{ [key: number]: string }>({}) const [modelVersionFkIdMap, setModelVersionFkIdMap] = useState<{ [key: number]: string }>({});
const handle_model_version_fk_id = (id: any)=>{ const handle_model_version_fk_id = (id: any) => {
if (model_version_fk_id_open) { if (model_version_fk_id_open) {
set_model_version_fk_id(undefined); set_model_version_fk_id(undefined);
set_model_version_fk_id_open(false) set_model_version_fk_id_open(false);
}else { } else {
postModelVersionGetModelVersionById({id: id}).then((resp)=>{ postModelVersionGetModelVersionById({ id: id }).then((resp) => {
set_model_version_fk_id(resp.data.modelVersion) set_model_version_fk_id(resp.data.modelVersion);
set_model_version_fk_id_open(true) set_model_version_fk_id_open(true);
}) });
}
} }
const handle_model_version_fk_id_column_open = ()=>{ };
const handle_model_version_fk_id_column_open = () => {
if (model_version_fk_id_column_open) { if (model_version_fk_id_column_open) {
set_model_version_fk_id_column_open(false) set_model_version_fk_id_column_open(false);
}else { } else {
postModelVersionGetModelVersionNames({ids: modelVersionFkIdIds}).then((resp)=>{ postModelVersionGetModelVersionNames({ ids: modelVersionFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any)=>{ resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setModelVersionFkIdMap(a)
})
set_model_version_fk_id_column_open(true)
} }
});
setModelVersionFkIdMap(a);
});
set_model_version_fk_id_column_open(true);
} }
};
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(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.ModelImage) => { const handleDestroy = async (selectedRow: API.ModelImage) => {
deleteModelImageDeleteModelImage({id: selectedRow.id}).then(()=>{ deleteModelImageDeleteModelImage({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.ModelImage>[] = [ const columns: ProColumns<API.ModelImage>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_image.table.list.id" defaultMessage="id" />,
id="resource.model_image.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -126,127 +129,153 @@ const columns: ProColumns<API.ModelImage>[] = [
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_image.table.list.name" defaultMessage="$$$" />,
id="resource.model_image.table.list.name" dataIndex: 'name',
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.model_image.table.list.modelVersionFkId" id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "modelVersionFkId", />
),
dataIndex: 'modelVersionFkId',
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (model_version_fk_id_column_open) { if (model_version_fk_id_column_open) {
return ( <a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record?.modelVersionFkId ? modelVersionFkIdMap[record.modelVersionFkId] : undefined}</a>) return (
<a
onClick={() => {
handle_model_version_fk_id(record.modelVersionFkId);
}}
>
{record?.modelVersionFkId ? modelVersionFkIdMap[record.modelVersionFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record.modelVersionFkId}</a>) return (
<a
onClick={() => {
handle_model_version_fk_id(record.modelVersionFkId);
}}
>
{record.modelVersionFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
return ( return (
// value 和 onchange 会通过 form 自动注入。 // value 和 onchange 会通过 form 自动注入。
<ProFormSelect <ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} placeholder={`${intl.formatMessage({
required={false} showSearch debounceTime={1000} id: 'common.please_select',
request={async (keyWord)=>{ defaultMessage: '$$$',
const resp = await postModelVersionGetModelVersionFkSelect({keyword: keyWord?.keyWords || ''}) })}`}
return resp.data.list.map((v: any)=>{ required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postModelVersionGetModelVersionFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" />,
id="resource.model_image.table.list.path" dataIndex: 'path',
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_image.table.list.startCode" <FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "startCode", dataIndex: 'startCode',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />,
id="resource.model_image.table.list.remark" dataIndex: 'remark',
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_image.table.list.createTime" <FormattedMessage id="resource.model_image.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_image.table.list.updateTime" <FormattedMessage id="resource.model_image.table.list.updateTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
<a accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update" key="update"
type="link"
size="small"
onClick={() => { onClick={() => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
setCurrentRow(record); setCurrentRow(record);
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </Button>
<a <Popconfirm
key="destroy" placement="topLeft"
onClick={() => { title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
handleDestroy(record).then(()=>{}) description={intl.formatMessage({
}}> id: 'common.modal.table.delete.content',
<FormattedMessage defaultMessage: '$$$',
id="pages.searchTable.destroy" })}
defaultMessage="Destroy" okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
/> cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
</a> onConfirm={() => {
</Access> handleDestroy(record).then(() => {});
}}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.ModelImage> <ProTable<API.ModelImage>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -256,17 +285,17 @@ return (
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
scroll={{
x: 1300,
}}
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
onDataSourceChange={(data)=>{ onDataSourceChange={(data) => {
let ModelVersionFkIdIds: any = data.map((v) => {
let ModelVersionFkIdIds: any = data.map((v)=>{ return v.modelVersionFkId;
return v.modelVersionFkId });
}) setModelVersionFkIdIds(ModelVersionFkIdIds);
setModelVersionFkIdIds(ModelVersionFkIdIds)
}} }}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
@ -274,29 +303,29 @@ return (
}} }}
columnsState={{ columnsState={{
persistenceKey: 'model_image_list', persistenceKey: 'model_image_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="model_version_fk_id_show" key="model_version_fk_id_show"
onClick={() => { onClick={() => {
handle_model_version_fk_id_column_open() handle_model_version_fk_id_column_open();
}} }}
> >
{ {model_version_fk_id_column_open ? (
model_version_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>)
}
<FormattedMessage <FormattedMessage
id="resource.model_image.table.list.modelVersionFkId" id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"/> defaultMessage="$$$"
/>
</Button> </Button>
<Button <Button
@ -308,32 +337,31 @@ return (
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /> <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params 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 postModelImageGetModelImageList({...reqParams}) let resp = await postModelImageGetModelImageList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.ModelImage)=>{ data: resp.data.list.map((v: API.ModelImage) => {
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} columns={columns}
rowSelection={{ rowSelection={{
@ -354,9 +382,13 @@ return (
> >
<Button <Button
onClick={async () => { onClick={async () => {
deleteModelImageDeleteModelImageByIds({ids: selectedRowsState.map((v: API.ModelImage)=>{return v.id as number})}).then(()=>{ deleteModelImageDeleteModelImageByIds({
ids: selectedRowsState.map((v: API.ModelImage) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -391,9 +423,8 @@ return (
columns={ModelVersionColumns} columns={ModelVersionColumns}
currentRow={model_version_fk_id} currentRow={model_version_fk_id}
/> />
</PageContainer> </PageContainer>
); );
}; };
export default ModelImageList; export default ModelImageList;

@ -166,6 +166,8 @@ const ModelVersionList: React.FC = () => {
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />, title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
dataIndex: 'id', dataIndex: 'id',
sorter: true, sorter: true,
width: 100,
fixed: 'left',
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
@ -334,41 +336,9 @@ const ModelVersionList: React.FC = () => {
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>, </Button>,
<Button
key="destroy"
type="link"
size="small"
danger
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>,
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<Popconfirm <Popconfirm
title="发布模型" title="设为默认"
description="确认发布模型吗?"
onConfirm={() => {}}
onCancel={() => {}}
okText="Yes"
cancelText="No"
>
<Button
key="confirm_publish"
type="link"
size="small"
onClick={() => {
setPublishModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="common.confirm_publish" defaultMessage="confirm_publish" />
</Button>
</Popconfirm>,
// eslint-disable-next-line react/jsx-key
<Popconfirm
title="设置为默认版本"
description="确认设置为默认版本吗?" description="确认设置为默认版本吗?"
onConfirm={() => { onConfirm={() => {
putAlgorithmModelUpdateAlgorithmModel({ putAlgorithmModelUpdateAlgorithmModel({
@ -391,9 +361,43 @@ const ModelVersionList: React.FC = () => {
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
> >
<Button key="set_default" type="link" size="small"> <Button key="set_default" type="link" size="small">
<FormattedMessage id="common.set_default" defaultMessage="$$$" />
{/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */}
</Button> </Button>
</Popconfirm>, </Popconfirm>,
// eslint-disable-next-line react/jsx-key
<Popconfirm
title="发布模型"
description="确认发布模型吗?"
onConfirm={() => {}}
onCancel={() => {}}
okText="Yes"
cancelText="No"
>
<Button
key="confirm_publish"
type="link"
size="small"
onClick={() => {
setPublishModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="common.confirm_publish" defaultMessage="confirm_publish" />
</Button>
</Popconfirm>,
<Button
key="destroy"
type="link"
size="small"
danger
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>,
// eslint-disable-next-line react/jsx-key
]} ]}
></TableActionCard> ></TableActionCard>
@ -470,9 +474,11 @@ const ModelVersionList: React.FC = () => {
id: 'pages.searchTable.title', id: 'pages.searchTable.title',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
fixedHeader={true}
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
scroll={{ x: 1300 }}
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}

@ -170,7 +170,7 @@ const AlgorithmSetting: React.FC = () => {
// console.log('clickTreeNode', projectCardListRef.current) // console.log('clickTreeNode', projectCardListRef.current)
postGetProjectByGroupId({ id: record.id }).then((resp) => { postGetProjectByGroupId({ id: record.id }).then((resp) => {
let tab_data = (resp?.data?.list || []).map((v: any) => { let tab_data = (resp?.data?.list || []).map((v: any) => {
let model_data = ([...v?.models,...v?.models,...v?.models,...v?.models] || []).map((item: any) => ({ let model_data = ([...v?.models] || []).map((item: any) => ({
title: ( title: (
<> <>
<img src="/images/model.png" alt="" style={{ width: '50px' }} /> <img src="/images/model.png" alt="" style={{ width: '50px' }} />
@ -185,7 +185,7 @@ const AlgorithmSetting: React.FC = () => {
handleUpdateModal(); handleUpdateModal();
}} }}
> >
</Button>, </Button>,
], ],
content: <ProjectCard info={item}></ProjectCard>, content: <ProjectCard info={item}></ProjectCard>,

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-06 16:12:17 * @Date: 2023-11-06 16:12:17
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-07 14:32:41 * @LastEditTime: 2023-11-08 15:42:49
* @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx * @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -17,8 +17,30 @@ import { Tag } from 'antd';
// const [tab, setTab] = useState(''); // const [tab, setTab] = useState('');
// const [modelVersionData, setModelVersionData] = useState<any[]>([]); // const [modelVersionData, setModelVersionData] = useState<any[]>([]);
/**styles */
const listItemStyle = {
display: 'flex',
fontSize: 14,
color: "#333333",
maxWidth: '22vh',
alignItems: 'center',
padding: '5px 0',
}
const listItemLabelStyle = {
fontSize: 14,
color: "#666666",
minWidth: 70,
}
const listItemTextStyle = {
fontSize: 14,
margin: 0
}
// 卡片 // 卡片
const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => { const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => {
return ( return (
<div <div
@ -30,18 +52,28 @@ const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => {
paddingRight: 15 paddingRight: 15
}} }}
> >
<div style={{display: 'flex', alignItems: 'center'}}> <div style={{display: 'flex', alignItems: 'center', paddingBottom: 10}}>
<span style={{fontWeight: 700, fontSize: 16, paddingRight: 10}}>{info.name}</span> <span style={{fontWeight: 700, fontSize: 14, paddingRight: 10}}></span>
<Tag color="#5BD8A6"></Tag> <Tag color="#44AEF5"></Tag>
</div>
<div>
<span style={{ fontSize: 18, fontWeight: 'bold' }}>{info.remark}</span>
</div>
<div>
<span style={{ fontSize: 18, fontWeight: 'bold' }}>{dateFormat(info.updateTime)}</span>
</div> </div>
<ul>
<li style={listItemStyle}>
<span style={listItemLabelStyle}></span>
<p className='single_line' style={listItemTextStyle}>{info.name}</p>
</li>
<li style={listItemStyle}>
<span style={listItemLabelStyle}></span>
<p className='single_line' style={listItemTextStyle}>{info.remark || 'v0.01'}</p>
</li>
<li style={listItemStyle}>
<span style={listItemLabelStyle}></span>
<p className='single_line' style={listItemTextStyle}>{dateFormat(info.updateTime)}</p>
</li>
{/* <li style={listItemStyle}>
<span style={listItemLabelStyle}></span>
<p className='single_line' style={listItemTextStyle}>--</p>
</li> */}
</ul>
</div> </div>
); );
}; };

Loading…
Cancel
Save