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

develop
zhoux 2 years ago
parent 9f49af1c10
commit c4f096623a

@ -9,7 +9,7 @@ const Settings: ProLayoutProps & {
} = {
navTheme: 'light',
// 拂晓蓝
colorPrimary: '#1890ff',
colorPrimary: '#155BD4',
layout: 'mix',
contentWidth: 'Fluid',
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 {
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,42 +1,39 @@
import {deleteDeviceGroupDeleteDeviceGroup, postDeviceGroupGetDeviceGroupList, deleteDeviceGroupDeleteDeviceGroupByIds} from '@/services/device/DeviceGroup';
import {PlusOutlined} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import React, {useRef, useState} from 'react';
deleteDeviceGroupDeleteDeviceGroup,
deleteDeviceGroupDeleteDeviceGroupByIds,
postDeviceGroupGetDeviceGroupList,
} from '@/services/device/DeviceGroup';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
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 CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const DeviceGroupList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
// const handle_parent_fk_id = (id: any)=>{
// if (parent_fk_id_open) {
@ -49,63 +46,62 @@ const DeviceGroupList: React.FC = () => {
// })
// }
// }
// const handle_parent_fk_id_column_open = ()=>{
// if (parent_fk_id_column_open) {
// set_parent_fk_id_column_open(false)
// }else {
// postDeviceGroupGetDeviceGroupNames({ids: parentFkIdIds}).then((resp)=>{
// let a: any = {}
// resp.data.list.forEach((v: any)=>{
// if (v.id) {
// a[v.id] = v.name
// }
// })
// setParentFkIdMap(a)
// })
// set_parent_fk_id_column_open(true)
// }
// }
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
} else {
setShowDetail(true)
}
}
const handleDestroy = async (selectedRow: API.DeviceGroup) => {
deleteDeviceGroupDeleteDeviceGroup({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
const columns: ProColumns<API.DeviceGroup>[] = [
// const handle_parent_fk_id_column_open = ()=>{
// if (parent_fk_id_column_open) {
// set_parent_fk_id_column_open(false)
// }else {
// postDeviceGroupGetDeviceGroupNames({ids: parentFkIdIds}).then((resp)=>{
// let a: any = {}
// resp.data.list.forEach((v: any)=>{
// if (v.id) {
// a[v.id] = v.name
// }
// })
// setParentFkIdMap(a)
// })
// set_parent_fk_id_column_open(true)
// }
// }
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.DeviceGroup) => {
deleteDeviceGroupDeleteDeviceGroup({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.DeviceGroup>[] = [
{
title: (<FormattedMessage
id="device.device_group.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="device.device_group.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -122,85 +118,66 @@ const columns: ProColumns<API.DeviceGroup>[] = [
},
{
title: (<FormattedMessage
id="device.device_group.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.code"
defaultMessage="$$$"/>),
dataIndex: "code",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
dataIndex: 'code',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.address"
defaultMessage="$$$"/>),
dataIndex: "address",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />,
dataIndex: 'address',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.telephone"
defaultMessage="$$$"/>),
dataIndex: "telephone",
hideInSearch: true,
title: (
<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
),
dataIndex: 'telephone',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.lon"
defaultMessage="$$$"/>),
dataIndex: "lon",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />,
dataIndex: 'lon',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.lat"
defaultMessage="$$$"/>),
dataIndex: "lat",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />,
dataIndex: 'lat',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.managerName"
defaultMessage="$$$"/>),
dataIndex: "managerName",
hideInSearch: true,
title: (
<FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
),
dataIndex: 'managerName',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.managerPhone"
defaultMessage="$$$"/>),
dataIndex: "managerPhone",
hideInSearch: true,
title: (
<FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$" />
),
dataIndex: 'managerPhone',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.isEnable"
defaultMessage="$$$"/>),
dataIndex: "isEnable",
filters: true, onFilter: true,
hideInSearch: true,
valueType: 'switch',
title: <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />,
dataIndex: 'isEnable',
filters: true,
onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
//
@ -237,191 +214,194 @@ const columns: ProColumns<API.DeviceGroup>[] = [
// },
// },
{
title: (<FormattedMessage
id="device.device_group.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
title: <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device_group.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="device.device_group.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed:'right',
render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
key="create"
onClick={() => {
setCreateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="common.create_son" defaultMessage="Create" />
</a>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.DeviceGroup>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'device_group_list',
persistenceType: 'localStorage'
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
type="primary"
key="primary"
onClick={() => {
setCurrentRow(undefined)
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.create_root_menu" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
const reqParams = {
page: current,
desc: false,
orderKey: "",
...rest,
}
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.desc = sort_select === 'descend';
}
let resp = await postDeviceGroupGetDeviceGroupList({...reqParams})
return {
data: resp.data.list.map((v: API.DeviceGroup)=>{
return {...v, key: v.id}
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteDeviceGroupDeleteDeviceGroupByIds({ids: selectedRowsState.map((v: API.DeviceGroup)=>{return v.id as number})}).then(()=>{
actionRef.current?.reloadAndRest?.();
})
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<a
key="create"
onClick={() => {
setCreateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="common.create_son" defaultMessage="Create" />
</a>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</a>
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.DeviceGroup>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{
x: 1800,
}}
search={{
labelWidth: 120,
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'device_group_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="primary"
onClick={() => {
setCurrentRow(undefined);
setCreateModalOpen(true);
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
<PlusOutlined />{' '}
<FormattedMessage id="pages.searchTable.create_root_menu" defaultMessage="New" />
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: '',
...rest,
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postDeviceGroupGetDeviceGroupList({ ...reqParams });
return {
data: resp.data.list.map((v: API.DeviceGroup) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteDeviceGroupDeleteDeviceGroupByIds({
ids: selectedRowsState.map((v: API.DeviceGroup) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</PageContainer>
);
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
</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 {
postDeviceGroupGetDeviceGroupById,
postDeviceGroupGetDeviceGroupFkSelect,
postDeviceGroupGetDeviceGroupNames,
postDeviceGroupGetDeviceGroupTree
} from '@/services/device/DeviceGroup';
import {ColumnDrawer as DeviceGroupColumnDrawer} from "@/pages/Device/DeviceGroupList/components/ColumnDrawer";
import {DeviceCategoryColumns} from '@/pages/Device/DeviceCategoryList/components/Columns';
deleteDeviceDeleteDevice,
deleteDeviceDeleteDeviceByIds,
postDeviceCloseRtspCamera,
postDeviceGetDeviceList,
postDeviceOpenRtspCamera,
} from '@/services/device/Device';
import {
postDeviceCategoryGetDeviceCategoryById,
postDeviceCategoryGetDeviceCategoryFkSelect,
postDeviceCategoryGetDeviceCategoryNames
postDeviceCategoryGetDeviceCategoryNames,
} from '@/services/device/DeviceCategory';
import {ColumnDrawer as DeviceCategoryColumnDrawer} from "@/pages/Device/DeviceCategoryList/components/ColumnDrawer";
import {
deleteDeviceDeleteDevice,
postDeviceGetDeviceList,
deleteDeviceDeleteDeviceByIds, postDeviceOpenRtspCamera, postDeviceCloseRtspCamera
} from '@/services/device/Device';
import {PlusOutlined, RedoOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
postDeviceGroupGetDeviceGroupById,
postDeviceGroupGetDeviceGroupFkSelect,
postDeviceGroupGetDeviceGroupNames,
postDeviceGroupGetDeviceGroupTree,
} from '@/services/device/DeviceGroup';
import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProCard,
ProFormSelect,
ProFormText,
ProTable,
ProFormSelect, ProCard, ProFormText,
} from '@ant-design/pro-components';
import {FormattedMessage, useIntl, useAccess, Access, history} from '@umijs/max';
import {Button, message, Tree} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, Tree, message } from 'antd';
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 CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
import {DataNode} from "antd/es/tree";
import {postDepartmentGetDepartmentTree} from "@/services/system/Department";
import VideoModal from "./components/VideoModal";
import VideoModal from './components/VideoModal';
const DeviceList: React.FC = () => {
/**
@ -59,139 +62,140 @@ const DeviceList: React.FC = () => {
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = 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, set_category_fk_id] = useState<API.DeviceCategory>()
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false)
const [categoryFkIdIds, setCategoryFkIdIds] = useState([])
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({})
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_column_open, set_group_fk_id_column_open] = useState(false)
const [groupFkIdIds, setGroupFkIdIds] = useState([])
const [groupFkIdMap, setGroupFkIdMap] = useState<{ [key: number]: string }>({})
const [hasInit, setHasInit] = useState<boolean>(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_column_open, set_category_fk_id_column_open] = useState(false);
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
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_column_open, set_group_fk_id_column_open] = useState(false);
const [groupFkIdIds, setGroupFkIdIds] = useState([]);
const [groupFkIdMap, setGroupFkIdMap] = useState<{ [key: number]: string }>({});
const [hasInit, setHasInit] = useState<boolean>(false);
const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]);
const [selectNodes, setSelectNodes] = React.useState<any[]>([]);
const [videoOpening, setVideoOpening] = useState<boolean>(false);
const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({})
const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({});
useEffect(() => {
postDeviceGroupGetDeviceGroupTree().then((resp) => {
setNodeTreeData(resp.data.tree)
setHasInit(true)
}).catch(() => {
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
}, [])
const handleVideoModal = ()=>{
postDeviceGroupGetDeviceGroupTree()
.then((resp) => {
setNodeTreeData(resp.data.tree);
setHasInit(true);
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}, []);
const handleVideoModal = () => {
if (videoModalOpen) {
setVideoModalOpen(false)
setVideoModalOpen(false);
if (videoServerParam?.pid || 0) {
postDeviceCloseRtspCamera({pid: videoServerParam.pid}).then((resp) => {
console.log(resp)
})
postDeviceCloseRtspCamera({ pid: videoServerParam.pid }).then((resp) => {
console.log(resp);
});
}
setCurrentRow(undefined)
setVideoServerParam({})
setCurrentRow(undefined);
setVideoServerParam({});
} else {
setVideoModalOpen(true)
setVideoModalOpen(true);
}
}
};
const handle_category_fk_id = (id: any) => {
if (category_fk_id_open) {
set_category_fk_id(undefined);
set_category_fk_id_open(false)
set_category_fk_id_open(false);
} else {
postDeviceCategoryGetDeviceCategoryById({id: id}).then((resp) => {
set_category_fk_id(resp.data.deviceCategory)
set_category_fk_id_open(true)
})
postDeviceCategoryGetDeviceCategoryById({ id: id }).then((resp) => {
set_category_fk_id(resp.data.deviceCategory);
set_category_fk_id_open(true);
});
}
}
};
const handle_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 {
postDeviceCategoryGetDeviceCategoryNames({ids: categoryFkIdIds}).then((resp) => {
let a: any = {}
postDeviceCategoryGetDeviceCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
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) => {
if (group_fk_id_open) {
set_group_fk_id(undefined);
set_group_fk_id_open(false)
set_group_fk_id_open(false);
} else {
postDeviceGroupGetDeviceGroupById({id: id}).then((resp) => {
set_group_fk_id(resp.data.deviceGroup)
set_group_fk_id_open(true)
})
postDeviceGroupGetDeviceGroupById({ id: id }).then((resp) => {
set_group_fk_id(resp.data.deviceGroup);
set_group_fk_id_open(true);
});
}
}
};
const handle_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 {
postDeviceGroupGetDeviceGroupNames({ids: groupFkIdIds}).then((resp) => {
let a: any = {}
postDeviceGroupGetDeviceGroupNames({ ids: groupFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
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 = () => {
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true)
setUpdateModalOpen(true);
}
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true)
setCreateModalOpen(true);
}
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true)
setShowDetail(true);
}
}
};
const handleDestroy = async (selectedRow: API.Device) => {
deleteDeviceDeleteDevice({id: selectedRow.id}).then(() => {
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(() => {
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
deleteDeviceDeleteDevice({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.Device>[] = [
{
title: (<FormattedMessage
id="device.device.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="device.device.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -225,65 +229,60 @@ const DeviceList: React.FC = () => {
},
{
title: (<FormattedMessage
id="device.device.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
title: <FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.code"
defaultMessage="$$$"/>),
dataIndex: "code",
title: <FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />,
dataIndex: 'code',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.position"
defaultMessage="$$$"/>),
dataIndex: "position",
title: <FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />,
dataIndex: 'position',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.param"
defaultMessage="$$$"/>),
dataIndex: "param",
title: <FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />,
dataIndex: 'param',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.spec"
defaultMessage="$$$"/>),
dataIndex: "spec",
title: <FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />,
dataIndex: 'spec',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.categoryFkId"
defaultMessage="$$$"/>),
dataIndex: "categoryFkId",
title: <FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />,
dataIndex: 'categoryFkId',
hideInSearch: false,
render: (text, record) => {
if (category_fk_id_column_open) {
return (<a onClick={() => {
handle_category_fk_id(record.categoryFkId)
}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}</a>)
return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
</a>
);
} else {
return (<a onClick={() => {
handle_category_fk_id(record.categoryFkId)
}}>{record.categoryFkId}</a>)
return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record.categoryFkId}
</a>
);
}
},
renderFormItem: () => {
@ -293,181 +292,221 @@ const DeviceList: React.FC = () => {
width="md"
labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}`}
required={false} showSearch debounceTime={1000}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
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 {
label: v.name,
value: v.id
}
})
value: v.id,
};
});
}}
/>
);
},
},
{
title: (<FormattedMessage
id="device.device.table.list.groupFkId"
defaultMessage="$$$"/>),
dataIndex: "groupFkId",
title: <FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />,
dataIndex: 'groupFkId',
hideInSearch: false,
render: (text, record) => {
if (group_fk_id_column_open) {
return (<a onClick={() => {
handle_group_fk_id(record.groupFkId)
}}>{record?.groupFkId ? groupFkIdMap[record.groupFkId] : undefined}</a>)
return (
<a
onClick={() => {
handle_group_fk_id(record.groupFkId);
}}
>
{record?.groupFkId ? groupFkIdMap[record.groupFkId] : undefined}
</a>
);
} else {
return (<a onClick={() => {
handle_group_fk_id(record.groupFkId)
}}>{record.groupFkId}</a>)
return (
<a
onClick={() => {
handle_group_fk_id(record.groupFkId);
}}
>
{record.groupFkId}
</a>
);
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
width="md"
width="md"
labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}`}
required={false} showSearch debounceTime={1000}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
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 {
label: v.name,
value: v.id
}
})
value: v.id,
};
});
}}
/>
);
},
},
{
title: (<FormattedMessage
id="device.device.table.list.isEnable"
defaultMessage="$$$"/>),
dataIndex: "isEnable",
filters: true, onFilter: true,
title: <FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />,
dataIndex: 'isEnable',
filters: true,
onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
{
title: (<FormattedMessage
id="device.device.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
title: <FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="device.device.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
title: <FormattedMessage id="device.device.table.list.createTime" defaultMessage="$$$" />,
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="device.device.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
title: <FormattedMessage id="device.device.table.list.updateTime" defaultMessage="$$$" />,
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating"/>,
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 250,
render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(() => {
})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
<a
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
<Popconfirm
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
<Button
key="video"
type="link"
size="small"
onClick={() => {
setVideoOpening(true)
setVideoOpening(true);
if (record.param) {
postDeviceOpenRtspCamera({url: record.param}).then((resp) => {
setVideoServerParam(resp.data)
setVideoOpening(false)
setVideoModalOpen(true);
console.log(resp.data)
setCurrentRow(record);
}).catch(()=>{
setVideoOpening(false)
message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'}))
})
postDeviceOpenRtspCamera({ url: record.param })
.then((resp) => {
setVideoServerParam(resp.data);
setVideoOpening(false);
setVideoModalOpen(true);
console.log(resp.data);
setCurrentRow(record);
})
.catch(() => {
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
});
} else {
setVideoOpening(false)
message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'}))
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
}
// setVideoModalOpen(true);
// setCurrentRow(record);
}}>
}}
>
<FormattedMessage id="common.open_video" defaultMessage="$$$" />
</a>
</Access>
</Button>
</Access>,
],
},];
},
];
return (
<PageContainer>
<ProCard split="vertical">
<ProCard title="网点选择" colSpan="20%" extra={<Button icon={<RedoOutlined/>} onClick={() => {
setSelectNodes([]);
actionRef.current?.reload()
}}></Button>}>
{
hasInit && (
<Tree
checkable={false}
defaultExpandAll={true}
selectedKeys={selectNodes}
treeData={nodeTreeData}
onSelect={(selectKeys) => {
setSelectNodes(selectKeys)
actionRef.current?.reload()
}}
/>
)
<ProCard
title="网点选择"
colSpan="20%"
extra={
<Button
icon={<RedoOutlined />}
onClick={() => {
setSelectNodes([]);
actionRef.current?.reload();
}}
>
</Button>
}
>
{hasInit && (
<Tree
checkable={false}
defaultExpandAll={true}
selectedKeys={selectNodes}
treeData={nodeTreeData}
onSelect={(selectKeys) => {
setSelectNodes(selectKeys);
actionRef.current?.reload();
}}
/>
)}
</ProCard>
<ProCard title="" headerBordered>
<ProTable<API.Device>
@ -475,30 +514,30 @@ const DeviceList: React.FC = () => {
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
loading={{tip: intl.formatMessage({
loading={{
tip: intl.formatMessage({
id: 'common.video_opening',
defaultMessage: '$$$'
}), spinning: videoOpening}}
options={{fullScreen: true, setting: true, density: true, reload: true}}
defaultMessage: '$$$',
}),
spinning: videoOpening,
}}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{ x: 1600 }}
search={{
labelWidth: 120,
}}
onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
return v.categoryFkId
})
setCategoryFkIdIds(CategoryFkIdIds)
return v.categoryFkId;
});
setCategoryFkIdIds(CategoryFkIdIds);
let GroupFkIdIds: any = data.map((v) => {
return v.groupFkId
})
setGroupFkIdIds(GroupFkIdIds)
return v.groupFkId;
});
setGroupFkIdIds(GroupFkIdIds);
}}
pagination={{
showSizeChanger: true,
@ -506,49 +545,44 @@ const DeviceList: React.FC = () => {
}}
columnsState={{
persistenceKey: 'device_list',
persistenceType: 'localStorage'
persistenceType: 'localStorage',
}}
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
type="primary"
key="category_fk_id_show"
onClick={() => {
handle_category_fk_id_column_open()
handle_category_fk_id_column_open();
}}
>
{
category_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
{category_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage
id="device.device.table.list.categoryFkId"
defaultMessage="$$$"/>
defaultMessage="$$$"
/>
</Button>
<Button
type="primary"
key="group_fk_id_show"
onClick={() => {
handle_group_fk_id_column_open()
handle_group_fk_id_column_open();
}}
>
{
group_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
<FormattedMessage
id="device.device.table.list.groupFkId"
defaultMessage="$$$"/>
{group_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />
</Button>
<Button
@ -558,37 +592,37 @@ const DeviceList: React.FC = () => {
setCreateModalOpen(true);
}}
>
<PlusOutlined/> <FormattedMessage id="pages.searchTable.new" defaultMessage="New"/>
<PlusOutlined />{' '}
<FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
</Access>,
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
const reqParams:any = {
const { current, ...rest } = params;
const reqParams: any = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (selectNodes.length) {
reqParams.groupFkId = selectNodes[0]
reqParams.groupFkId = selectNodes[0];
}
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postDeviceGetDeviceList({...reqParams})
let resp = await postDeviceGetDeviceList({ ...reqParams });
return {
data: resp.data.list.map((v: API.Device) => {
return {...v, key: v.id}
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
@ -601,9 +635,9 @@ const DeviceList: React.FC = () => {
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen"/>{' '}
<a style={{fontWeight: 600}}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$"/>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
@ -611,11 +645,11 @@ const DeviceList: React.FC = () => {
onClick={async () => {
deleteDeviceDeleteDeviceByIds({
ids: selectedRowsState.map((v: API.Device) => {
return v.id as number
})
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
})
});
}}
>
<FormattedMessage
@ -658,13 +692,13 @@ const DeviceList: React.FC = () => {
columns={DeviceGroupColumns}
currentRow={group_fk_id}
/>
<VideoModal modalOpen={videoModalOpen}
handleModal={handleVideoModal}
values={currentRow || {}}
videoServerParam={videoServerParam}
reload={actionRef.current?.reload}
<VideoModal
modalOpen={videoModalOpen}
handleModal={handleVideoModal}
values={currentRow || {}}
videoServerParam={videoServerParam}
reload={actionRef.current?.reload}
/>
</PageContainer>
);
};

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

@ -1,115 +1,117 @@
import {ProjectColumns} from '@/pages/Project/ProjectList/components/Columns';
import {postProjectGetProjectById, postProjectGetProjectFkSelect, postProjectGetProjectNames} from '@/services/project/Project';
import {ColumnDrawer as ProjectColumnDrawer} from "@/pages/Project/ProjectList/components/ColumnDrawer";
import {deleteBusinessImageDeleteBusinessImage, postBusinessImageGetBusinessImageList, deleteBusinessImageDeleteBusinessImageByIds} from '@/services/resource/BusinessImage';
import { ColumnDrawer as ProjectColumnDrawer } from '@/pages/Project/ProjectList/components/ColumnDrawer';
import { ProjectColumns } from '@/pages/Project/ProjectList/components/Columns';
import {
postProjectGetProjectById,
postProjectGetProjectFkSelect,
postProjectGetProjectNames,
} from '@/services/project/Project';
import {
deleteBusinessImageDeleteBusinessImage,
deleteBusinessImageDeleteBusinessImageByIds,
postBusinessImageGetBusinessImageList,
} from '@/services/resource/BusinessImage';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, 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 CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const BusinessImageList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.BusinessImage>();
const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]);
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_column_open, set_project_fk_id_column_open] = useState(false)
const [projectFkIdIds, setProjectFkIdIds] = useState([])
const [projectFkIdMap, setProjectFkIdMap] = useState<{ [key: number]: string }>({})
const handle_project_fk_id = (id: any)=>{
if (project_fk_id_open) {
set_project_fk_id(undefined);
set_project_fk_id_open(false)
}else {
postProjectGetProjectById({id: id}).then((resp)=>{
set_project_fk_id(resp.data.project)
set_project_fk_id_open(true)
})
}
}
const handle_project_fk_id_column_open = ()=>{
if (project_fk_id_column_open) {
set_project_fk_id_column_open(false)
}else {
postProjectGetProjectNames({ids: projectFkIdIds}).then((resp)=>{
let a: any = {}
resp.data.list.forEach((v: any)=>{
if (v.id) {
a[v.id] = v.name
}
})
setProjectFkIdMap(a)
})
set_project_fk_id_column_open(true)
}
}
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
} else {
setShowDetail(true)
}
}
const handleDestroy = async (selectedRow: API.BusinessImage) => {
deleteBusinessImageDeleteBusinessImage({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
const columns: ProColumns<API.BusinessImage>[] = [
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.BusinessImage>();
const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]);
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_column_open, set_project_fk_id_column_open] = useState(false);
const [projectFkIdIds, setProjectFkIdIds] = useState([]);
const [projectFkIdMap, setProjectFkIdMap] = useState<{ [key: number]: string }>({});
const handle_project_fk_id = (id: any) => {
if (project_fk_id_open) {
set_project_fk_id(undefined);
set_project_fk_id_open(false);
} else {
postProjectGetProjectById({ id: id }).then((resp) => {
set_project_fk_id(resp.data.project);
set_project_fk_id_open(true);
});
}
};
const handle_project_fk_id_column_open = () => {
if (project_fk_id_column_open) {
set_project_fk_id_column_open(false);
} else {
postProjectGetProjectNames({ ids: projectFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
if (v.id) {
a[v.id] = v.name;
}
});
setProjectFkIdMap(a);
});
set_project_fk_id_column_open(true);
}
};
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.BusinessImage) => {
deleteBusinessImageDeleteBusinessImage({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.BusinessImage>[] = [
{
title: (<FormattedMessage
id="resource.business_image.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="resource.business_image.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -126,266 +128,294 @@ const columns: ProColumns<API.BusinessImage>[] = [
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
title: <FormattedMessage id="resource.business_image.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.version"
defaultMessage="$$$"/>),
dataIndex: "version",
hideInSearch: true,
title: (
<FormattedMessage id="resource.business_image.table.list.version" defaultMessage="$$$" />
),
dataIndex: 'version',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.projectFkId"
defaultMessage="$$$"/>),
dataIndex: "projectFkId",
hideInSearch: false,
render: (text, record) => {
if (project_fk_id_column_open) {
return ( <a onClick={()=>{handle_project_fk_id(record.projectFkId)}}>{record?.projectFkId ? projectFkIdMap[record.projectFkId] : undefined}</a>)
} else {
return (<a onClick={()=>{handle_project_fk_id(record.projectFkId)}}>{record.projectFkId}</a>)
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
required={false} showSearch debounceTime={1000}
request={async (keyWord)=>{
const resp = await postProjectGetProjectFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}}
/>
);
title: (
<FormattedMessage
id="resource.business_image.table.list.projectFkId"
defaultMessage="$$$"
/>
),
dataIndex: 'projectFkId',
hideInSearch: false,
render: (text, record) => {
if (project_fk_id_column_open) {
return (
<a
onClick={() => {
handle_project_fk_id(record.projectFkId);
}}
>
{record?.projectFkId ? projectFkIdMap[record.projectFkId] : undefined}
</a>
);
} else {
return (
<a
onClick={() => {
handle_project_fk_id(record.projectFkId);
}}
>
{record.projectFkId}
</a>
);
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postProjectGetProjectFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
);
},
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.path"
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true,
title: <FormattedMessage id="resource.business_image.table.list.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.startCode"
defaultMessage="$$$"/>),
dataIndex: "startCode",
hideInSearch: true,
title: (
<FormattedMessage id="resource.business_image.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.config"
defaultMessage="$$$"/>),
dataIndex: "config",
hideInSearch: true,
hideInTable: true,
hideInDescriptions: true,
title: (
<FormattedMessage id="resource.business_image.table.list.config" defaultMessage="$$$" />
),
dataIndex: 'config',
hideInSearch: true,
hideInTable: true,
hideInDescriptions: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.configHash"
defaultMessage="$$$"/>),
dataIndex: "configHash",
hideInSearch: true,
title: (
<FormattedMessage id="resource.business_image.table.list.configHash" defaultMessage="$$$" />
),
dataIndex: 'configHash',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
title: (
<FormattedMessage id="resource.business_image.table.list.remark" defaultMessage="$$$" />
),
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.business_image.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="resource.business_image.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.business_image.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed:'right',
render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.BusinessImage>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
<Popconfirm
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data)=>{
let ProjectFkIdIds: any = data.map((v)=>{
return v.projectFkId
})
setProjectFkIdIds(ProjectFkIdIds)
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
columnsState={{
persistenceKey: 'business_image_list',
persistenceType: 'localStorage'
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.BusinessImage>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{
x: 1300,
}}
search={{
labelWidth: 120,
}}
onDataSourceChange={(data) => {
let ProjectFkIdIds: any = data.map((v) => {
return v.projectFkId;
});
setProjectFkIdIds(ProjectFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'business_image_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="project_fk_id_show"
onClick={() => {
handle_project_fk_id_column_open()
handle_project_fk_id_column_open();
}}
>
{
project_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
{project_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage
id="resource.business_image.table.list.projectFkId"
defaultMessage="$$$"/>
</Button>
defaultMessage="$$$"
/>
</Button>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postBusinessImageGetBusinessImageList({...reqParams})
let resp = await postBusinessImageGetBusinessImageList({ ...reqParams });
return {
data: resp.data.list.map((v: API.BusinessImage)=>{
return {...v, key: v.id}
data: resp.data.list.map((v: API.BusinessImage) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
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?.();
})
});
}}
>
<FormattedMessage
@ -393,36 +423,35 @@ return (
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ProjectColumnDrawer
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ProjectColumnDrawer
handleDrawer={handle_project_fk_id}
isShowDetail={project_fk_id_open}
columns={ProjectColumns}
currentRow={project_fk_id}
/>
</PageContainer>
);
</PageContainer>
);
};
export default BusinessImageList;
export default BusinessImageList;

@ -1,80 +1,78 @@
import {deleteModelCategoryDeleteModelCategory, postModelCategoryGetModelCategoryList, deleteModelCategoryDeleteModelCategoryByIds} from '@/services/resource/ModelCategory';
import {
deleteModelCategoryDeleteModelCategory,
deleteModelCategoryDeleteModelCategoryByIds,
postModelCategoryGetModelCategoryList,
} from '@/services/resource/ModelCategory';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, 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 CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelCategoryList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]);
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
} else {
setShowDetail(true)
}
}
const handleDestroy = async (selectedRow: API.ModelCategory) => {
deleteModelCategoryDeleteModelCategory({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
const columns: ProColumns<API.ModelCategory>[] = [
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]);
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.ModelCategory) => {
deleteModelCategoryDeleteModelCategory({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.ModelCategory>[] = [
{
title: (<FormattedMessage
id="resource.model_category.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="resource.model_category.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -91,168 +89,175 @@ const columns: ProColumns<API.ModelCategory>[] = [
},
{
title: (<FormattedMessage
id="resource.model_category.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
title: <FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_category.table.list.code"
defaultMessage="$$$"/>),
dataIndex: "code",
hideInSearch: true,
title: <FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$" />,
dataIndex: 'code',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_category.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
title: (
<FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$" />
),
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_category.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.model_category.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="resource.model_category.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.model_category.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed:'right',
render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.ModelCategory>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
<Popconfirm
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data)=>{
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
columnsState={{
persistenceKey: 'model_category_list',
persistenceType: 'localStorage'
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.ModelCategory>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data) => {}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'model_category_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postModelCategoryGetModelCategoryList({...reqParams})
let resp = await postModelCategoryGetModelCategoryList({ ...reqParams });
return {
data: resp.data.list.map((v: API.ModelCategory)=>{
return {...v, key: v.id}
data: resp.data.list.map((v: API.ModelCategory) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
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?.();
})
});
}}
>
<FormattedMessage
@ -260,30 +265,29 @@ return (
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
</PageContainer>
);
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
</PageContainer>
);
};
export default ModelCategoryList;
export default ModelCategoryList;

@ -1,115 +1,118 @@
import {ModelVersionColumns} from '@/pages/Resource/ModelVersionList/components/Columns';
import {postModelVersionGetModelVersionById, postModelVersionGetModelVersionFkSelect, postModelVersionGetModelVersionNames} from '@/services/resource/ModelVersion';
import {ColumnDrawer as ModelVersionColumnDrawer} from "@/pages/Resource/ModelVersionList/components/ColumnDrawer";
import {deleteModelImageDeleteModelImage, postModelImageGetModelImageList, deleteModelImageDeleteModelImageByIds} from '@/services/resource/ModelImage';
import { ColumnDrawer as ModelVersionColumnDrawer } from '@/pages/Resource/ModelVersionList/components/ColumnDrawer';
import { ModelVersionColumns } from '@/pages/Resource/ModelVersionList/components/Columns';
import {
deleteModelImageDeleteModelImage,
deleteModelImageDeleteModelImageByIds,
postModelImageGetModelImageList,
} from '@/services/resource/ModelImage';
import {
postModelVersionGetModelVersionById,
postModelVersionGetModelVersionFkSelect,
postModelVersionGetModelVersionNames,
} from '@/services/resource/ModelVersion';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, 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 CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelImageList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.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, 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 [modelVersionFkIdIds, setModelVersionFkIdIds] = useState([])
const [modelVersionFkIdMap, setModelVersionFkIdMap] = useState<{ [key: number]: string }>({})
const handle_model_version_fk_id = (id: any)=>{
if (model_version_fk_id_open) {
set_model_version_fk_id(undefined);
set_model_version_fk_id_open(false)
}else {
postModelVersionGetModelVersionById({id: id}).then((resp)=>{
set_model_version_fk_id(resp.data.modelVersion)
set_model_version_fk_id_open(true)
})
}
}
const handle_model_version_fk_id_column_open = ()=>{
if (model_version_fk_id_column_open) {
set_model_version_fk_id_column_open(false)
}else {
postModelVersionGetModelVersionNames({ids: modelVersionFkIdIds}).then((resp)=>{
let a: any = {}
resp.data.list.forEach((v: any)=>{
if (v.id) {
a[v.id] = v.name
}
})
setModelVersionFkIdMap(a)
})
set_model_version_fk_id_column_open(true)
}
}
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
} else {
setShowDetail(true)
}
}
const handleDestroy = async (selectedRow: API.ModelImage) => {
deleteModelImageDeleteModelImage({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
const columns: ProColumns<API.ModelImage>[] = [
/**
* @en-US Pop-up window of new window
* @zh-CN
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.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, 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 [modelVersionFkIdIds, setModelVersionFkIdIds] = useState([]);
const [modelVersionFkIdMap, setModelVersionFkIdMap] = useState<{ [key: number]: string }>({});
const handle_model_version_fk_id = (id: any) => {
if (model_version_fk_id_open) {
set_model_version_fk_id(undefined);
set_model_version_fk_id_open(false);
} else {
postModelVersionGetModelVersionById({ id: id }).then((resp) => {
set_model_version_fk_id(resp.data.modelVersion);
set_model_version_fk_id_open(true);
});
}
};
const handle_model_version_fk_id_column_open = () => {
if (model_version_fk_id_column_open) {
set_model_version_fk_id_column_open(false);
} else {
postModelVersionGetModelVersionNames({ ids: modelVersionFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
if (v.id) {
a[v.id] = v.name;
}
});
setModelVersionFkIdMap(a);
});
set_model_version_fk_id_column_open(true);
}
};
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.ModelImage) => {
deleteModelImageDeleteModelImage({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.ModelImage>[] = [
{
title: (<FormattedMessage
id="resource.model_image.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="resource.model_image.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -126,237 +129,266 @@ const columns: ProColumns<API.ModelImage>[] = [
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
title: <FormattedMessage id="resource.model_image.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"/>),
dataIndex: "modelVersionFkId",
hideInSearch: false,
render: (text, record) => {
if (model_version_fk_id_column_open) {
return ( <a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record?.modelVersionFkId ? modelVersionFkIdMap[record.modelVersionFkId] : undefined}</a>)
} else {
return (<a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record.modelVersionFkId}</a>)
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
required={false} showSearch debounceTime={1000}
request={async (keyWord)=>{
const resp = await postModelVersionGetModelVersionFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}}
/>
);
title: (
<FormattedMessage
id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"
/>
),
dataIndex: 'modelVersionFkId',
hideInSearch: false,
render: (text, record) => {
if (model_version_fk_id_column_open) {
return (
<a
onClick={() => {
handle_model_version_fk_id(record.modelVersionFkId);
}}
>
{record?.modelVersionFkId ? modelVersionFkIdMap[record.modelVersionFkId] : undefined}
</a>
);
} else {
return (
<a
onClick={() => {
handle_model_version_fk_id(record.modelVersionFkId);
}}
>
{record.modelVersionFkId}
</a>
);
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postModelVersionGetModelVersionFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
);
},
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.path"
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true,
title: <FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.startCode"
defaultMessage="$$$"/>),
dataIndex: "startCode",
hideInSearch: true,
title: (
<FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
title: <FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.model_image.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="resource.model_image.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage id="resource.model_image.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed:'right',
render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.ModelImage>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
<Popconfirm
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data)=>{
let ModelVersionFkIdIds: any = data.map((v)=>{
return v.modelVersionFkId
})
setModelVersionFkIdIds(ModelVersionFkIdIds)
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
columnsState={{
persistenceKey: 'model_image_list',
persistenceType: 'localStorage'
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.ModelImage>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{
x: 1300,
}}
search={{
labelWidth: 120,
}}
onDataSourceChange={(data) => {
let ModelVersionFkIdIds: any = data.map((v) => {
return v.modelVersionFkId;
});
setModelVersionFkIdIds(ModelVersionFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'model_image_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="model_version_fk_id_show"
onClick={() => {
handle_model_version_fk_id_column_open()
handle_model_version_fk_id_column_open();
}}
>
{
model_version_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
{model_version_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage
id="resource.model_image.table.list.modelVersionFkId"
defaultMessage="$$$"/>
</Button>
defaultMessage="$$$"
/>
</Button>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postModelImageGetModelImageList({...reqParams})
let resp = await postModelImageGetModelImageList({ ...reqParams });
return {
data: resp.data.list.map((v: API.ModelImage)=>{
return {...v, key: v.id}
data: resp.data.list.map((v: API.ModelImage) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
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?.();
})
});
}}
>
<FormattedMessage
@ -364,36 +396,35 @@ return (
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ModelVersionColumnDrawer
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ModelVersionColumnDrawer
handleDrawer={handle_model_version_fk_id}
isShowDetail={model_version_fk_id_open}
columns={ModelVersionColumns}
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" />,
dataIndex: 'id',
sorter: true,
width: 100,
fixed: 'left',
render: (dom, entity) => {
return (
<a
@ -334,41 +336,9 @@ const ModelVersionList: React.FC = () => {
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</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
<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>,
// eslint-disable-next-line react/jsx-key
<Popconfirm
title="设置为默认版本"
title="设为默认"
description="确认设置为默认版本吗?"
onConfirm={() => {
putAlgorithmModelUpdateAlgorithmModel({
@ -391,9 +361,43 @@ const ModelVersionList: React.FC = () => {
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
>
<Button key="set_default" type="link" size="small">
<FormattedMessage id="common.set_default" defaultMessage="$$$" />
{/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */}
</Button>
</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>
@ -470,9 +474,11 @@ const ModelVersionList: React.FC = () => {
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
fixedHeader={true}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{ x: 1300 }}
search={{
labelWidth: 120,
}}

@ -170,7 +170,7 @@ const AlgorithmSetting: React.FC = () => {
// console.log('clickTreeNode', projectCardListRef.current)
postGetProjectByGroupId({ id: record.id }).then((resp) => {
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: (
<>
<img src="/images/model.png" alt="" style={{ width: '50px' }} />
@ -185,7 +185,7 @@ const AlgorithmSetting: React.FC = () => {
handleUpdateModal();
}}
>
</Button>,
],
content: <ProjectCard info={item}></ProjectCard>,

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-06 16:12:17
* @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
* @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 [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> }) => {
return (
<div
@ -30,18 +52,28 @@ const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => {
paddingRight: 15
}}
>
<div style={{display: 'flex', alignItems: 'center'}}>
<span style={{fontWeight: 700, fontSize: 16, paddingRight: 10}}>{info.name}</span>
<Tag color="#5BD8A6"></Tag>
<div style={{display: 'flex', alignItems: 'center', paddingBottom: 10}}>
<span style={{fontWeight: 700, fontSize: 14, paddingRight: 10}}></span>
<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>
<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>
);
};

Loading…
Cancel
Save