diff --git a/web-fe/src/constants/constants.ts b/web-fe/src/constants/constants.ts index a21dcfe..ea477d2 100644 --- a/web-fe/src/constants/constants.ts +++ b/web-fe/src/constants/constants.ts @@ -28,6 +28,11 @@ export const PRIORITY_MAP = { 3: '三级', } as const; +export const STATUS_MAP = { + 1: '启用', + 2: '禁用', +} as const; + export const USER_TYPE_OPTIONS = [ { value: 1, label: '域用户' }, { value: 0, label: '本地用户' }, diff --git a/web-fe/src/pages/terminal/index.less b/web-fe/src/pages/terminal/index.less index 6b26fb9..fe4f5d1 100644 --- a/web-fe/src/pages/terminal/index.less +++ b/web-fe/src/pages/terminal/index.less @@ -1,5 +1,5 @@ .user_content { - display: flex; + display: flex; width: 100%; height: 100%; background-color: #f7f8fa; @@ -29,8 +29,10 @@ background-color: #fff; padding: 8px; .teble_box { + display: flex; + flex-direction: column; width: 100%; - height: calc(100% - 40px); + height: calc(100% - 50px); overflow: hidden; } } @@ -41,5 +43,60 @@ position: absolute; left: 5px; } + .images-list-table { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + // 表格适应样式 + .ant-table-wrapper { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-table { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + .ant-table-container { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + .ant-table-header { + flex-shrink: 0; + } + .ant-table-body { + flex: 1; + overflow: auto !important; + } + } + // 确保分页器在底部正确显示 + .ant-table-pagination { + flex-shrink: 0; + // 确保分页器始终可见 + position: relative; + z-index: 1; + } + } + } + } + } + } } } diff --git a/web-fe/src/pages/terminal/index.tsx b/web-fe/src/pages/terminal/index.tsx index a3737f1..8ae6c5d 100644 --- a/web-fe/src/pages/terminal/index.tsx +++ b/web-fe/src/pages/terminal/index.tsx @@ -8,7 +8,8 @@ import { DeleteOutlined, DownOutlined, PlusOutlined, - TeamOutlined, + RedoOutlined, + GoldOutlined, } from '@ant-design/icons'; import { Button, @@ -185,7 +186,7 @@ const UserListPage: React.FC = () => { title: '序号', dataIndex: 'order', key: 'order', - width: 80, + width: 60, align: 'center', render: (_: any, record: any, index: number) => {index + 1}, }, @@ -193,41 +194,53 @@ const UserListPage: React.FC = () => { title: '终端名称', dataIndex: 'device_name', key: 'device_name', - width: 220, + width: 250, + ellipsis: true, align: 'center', render: (text) => { - return {text || '--'}; + return {text || '--'}; }, }, { title: '序列号', dataIndex: 'device_id', key: 'device_id', - width: 220, + width: 250, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + return {text || '--'}; }, }, { title: '终端分组', dataIndex: 'device_group_name', key: 'device_group_name', - width: 220, + width: 200, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + return ( +
+ {text || '--'} +
+ ); }, }, { - title: '终端类型', + title: '类型', dataIndex: 'device_type', key: 'device_type', width: 150, align: 'center', + ellipsis: true, render: (text: number) => { const key = text as keyof typeof DEVICE_TYPE_MAP; - return {DEVICE_TYPE_MAP[key] || '--'}; + return ( + + {DEVICE_TYPE_MAP[key] || '--'} + + ); }, }, { @@ -236,18 +249,28 @@ const UserListPage: React.FC = () => { key: 'model', width: 150, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + return ( +
+ {text || '--'} +
+ ); }, }, { title: 'IP地址', dataIndex: 'ip_addr', key: 'ip_addr', - width: 150, + width: 200, + ellipsis: true, align: 'center', render: (text) => { - return {text || '--'}; + return ( +
+ {text || '--'} +
+ ); }, }, { @@ -256,8 +279,13 @@ const UserListPage: React.FC = () => { key: 'mac_addr', ellipsis: true, align: 'center', + width: 200, render: (text) => { - return {text || '--'}; + return ( +
+ {text || '--'} +
+ ); }, }, { @@ -266,8 +294,13 @@ const UserListPage: React.FC = () => { key: 'description', ellipsis: true, align: 'center', + width: 200, render: (text) => { - return {text || '--'}; + return ( +
+ {text || '--'} +
+ ); }, }, { @@ -403,6 +436,14 @@ const UserListPage: React.FC = () => {
+
@@ -441,8 +483,10 @@ const UserListPage: React.FC = () => { childrenField="children" defaultExpandAll={true} onSelect={onOrgSelect} + showIcon={true} selectedKeys={selectedOrg ? [selectedOrg] : []} - icon={} + // switcherIcon={} + icon={} />
@@ -473,9 +517,9 @@ const UserListPage: React.FC = () => { 删除 */} - + */}
@@ -489,34 +533,52 @@ const UserListPage: React.FC = () => { setCurrentPage(1); // Reset to first page when searching }} /> +
- { - return `共${total}条数据`; - }, - }} - scroll={{ x: 'max-content', y: 55 * 12 }} - /> +
+
{ + return `共${total}条数据`; + }, + }} + // scroll={{ x: 'max-content', y: 55 * 12 }} + scroll={{ + x: 'max-content', + y: 'max-content', // 关键:允许内容决定高度 + }} + style={{ + height: '100%', + display: 'flex', + flexDirection: 'column', + }} + /> + diff --git a/web-fe/src/pages/userList/index.less b/web-fe/src/pages/userList/index.less index 6b26fb9..fe4f5d1 100644 --- a/web-fe/src/pages/userList/index.less +++ b/web-fe/src/pages/userList/index.less @@ -1,5 +1,5 @@ .user_content { - display: flex; + display: flex; width: 100%; height: 100%; background-color: #f7f8fa; @@ -29,8 +29,10 @@ background-color: #fff; padding: 8px; .teble_box { + display: flex; + flex-direction: column; width: 100%; - height: calc(100% - 40px); + height: calc(100% - 50px); overflow: hidden; } } @@ -41,5 +43,60 @@ position: absolute; left: 5px; } + .images-list-table { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + // 表格适应样式 + .ant-table-wrapper { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-table { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + .ant-table-container { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + .ant-table-header { + flex-shrink: 0; + } + .ant-table-body { + flex: 1; + overflow: auto !important; + } + } + // 确保分页器在底部正确显示 + .ant-table-pagination { + flex-shrink: 0; + // 确保分页器始终可见 + position: relative; + z-index: 1; + } + } + } + } + } + } } } diff --git a/web-fe/src/pages/userList/index.tsx b/web-fe/src/pages/userList/index.tsx index 8510beb..6c6bcf7 100644 --- a/web-fe/src/pages/userList/index.tsx +++ b/web-fe/src/pages/userList/index.tsx @@ -3,6 +3,7 @@ import { ERROR_CODE, GENDER_MAP, PRIORITY_MAP, + STATUS_MAP, USER_TYPE_MAP, } from '@/constants/constants'; import CustomTree from '@/pages/components/customTree'; @@ -204,8 +205,9 @@ const UserListPage: React.FC = () => { key: 'user_name', width: 150, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + return {text || '--'}; }, }, { @@ -214,8 +216,9 @@ const UserListPage: React.FC = () => { key: 'user_group_name', width: 150, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + return {text || '--'}; }, }, { @@ -224,8 +227,14 @@ const UserListPage: React.FC = () => { key: 'status', width: 150, align: 'center', + ellipsis: true, render: (text) => { - return {text || '--'}; + const key = text as keyof typeof STATUS_MAP; + return ( + + {STATUS_MAP[key] || '--'} + + ); }, }, { @@ -234,9 +243,14 @@ const UserListPage: React.FC = () => { key: 'user_type', width: 150, align: 'center', + ellipsis: true, render: (text: number) => { const key = text as keyof typeof USER_TYPE_MAP; - return {USER_TYPE_MAP[key] || '--'}; + return ( + + {USER_TYPE_MAP[key] || '--'} + + ); }, }, { @@ -245,9 +259,14 @@ const UserListPage: React.FC = () => { key: 'priority', width: 150, align: 'center', + ellipsis: true, render: (text: number) => { const key = text as keyof typeof PRIORITY_MAP; - return {PRIORITY_MAP[key] || '--'}; + return ( + + {PRIORITY_MAP[key] || '--'} + + ); }, }, { @@ -256,46 +275,65 @@ const UserListPage: React.FC = () => { key: 'gender', width: 150, align: 'center', + ellipsis: true, render: (text: number) => { const key = text as keyof typeof GENDER_MAP; - return {GENDER_MAP[key] || '--'}; + return ( + + {GENDER_MAP[key] || '--'} + + ); }, }, { title: '电话', dataIndex: 'cell_phone', key: 'cell_phone', - width: 150, + width: 180, align: 'center', + ellipsis: true, render: (text: any) => { - return {text || '--'}; + return {text || '--'}; }, }, { title: '出生日期', dataIndex: 'birthday', key: 'birthday', - width: 150, + width: 180, align: 'center', + ellipsis: true, render: (text: any) => { - return {text || '--'}; + return {text || '--'}; }, }, { title: '身份证号', dataIndex: 'identity_no', key: 'identity_no', - width: 150, + width: 230, + ellipsis: true, align: 'center', render: (text: any) => { - return {text || '--'}; + return {text || '--'}; + }, + }, + { + title: '邮箱', + dataIndex: 'email', + key: 'email', + width: 150, + align: 'center', + ellipsis: true, + render: (text: any) => { + return {text || '--'}; }, }, { title: '操作', key: 'actions', align: 'center', - width: 150, + width: 160, fixed: 'right', render: (_, record) => (
@@ -427,6 +465,7 @@ const UserListPage: React.FC = () => { defaultExpandAll onSelect={onOrgSelect} selectedKeys={selectedOrg ? [selectedOrg] : []} + showIcon={true} icon={} /> @@ -465,9 +504,6 @@ const UserListPage: React.FC = () => { 删除 */} -
@@ -481,34 +517,51 @@ const UserListPage: React.FC = () => { setCurrentPage(1); // Reset to first page when searching }} /> +
-
{ - return `共${total}条数据`; - }, - }} - // rowSelection={{ - // selectedRowKeys, - // onChange: onSelectChange, - // }} - scroll={{ x: 'max-content', y: 55 * 12 }} - /> +
+
{ + return `共${total}条数据`; + }, + }} + // rowSelection={{ + // selectedRowKeys, + // onChange: onSelectChange, + // }} + // scroll={{ x: 'max-content', y: 55 * 12 }} + scroll={{ + y: 'max-content', // 关键:允许内容决定高度 + }} + style={{ + height: '100%', + display: 'flex', + flexDirection: 'column', + }} + /> + diff --git a/web-fe/src/pages/userList/mod/eidtUser/index.tsx b/web-fe/src/pages/userList/mod/eidtUser/index.tsx index 759cc59..8318b83 100644 --- a/web-fe/src/pages/userList/mod/eidtUser/index.tsx +++ b/web-fe/src/pages/userList/mod/eidtUser/index.tsx @@ -16,6 +16,7 @@ import { Select, TreeSelect, } from 'antd'; +import moment from 'moment'; import React, { useEffect } from 'react'; interface UserEditModalProps { @@ -43,7 +44,11 @@ const UserEditModal: React.FC = ({ if (id) { getUserById({ id }).then((res) => { const { data } = res; - form.setFieldsValue(data); + const { birthday } = data || {}; + const record = { ...data }; + delete record.birthday; + if (birthday) record.birthday = moment(birthday); + form.setFieldsValue(record); }); } else { const initialValues = { @@ -56,8 +61,12 @@ const UserEditModal: React.FC = ({ const handleOk = async () => { const values = await form.validateFields(); + const { birthday } = values || {}; + const record = { ...values }; + delete record.birthday; + if (birthday) record.birthday = moment(birthday).format('YYYY-MM-DD'); try { - const params = { ...values }; + const params = { ...record }; if (id) { params.id = id; } @@ -154,7 +163,7 @@ const UserEditModal: React.FC = ({ > @@ -203,9 +212,11 @@ const UserEditModal: React.FC = ({ >