页面列表与按钮样式 调整

This commit is contained in:
孙景学
2025-07-10 15:38:05 +08:00
parent 42eca55bc1
commit 7049687456
33 changed files with 1525 additions and 1647 deletions

View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Table, Space, Modal, message } from 'antd';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//查看弹窗
import ViewModal from './components/ViewModal';
@ -8,8 +9,10 @@ import ResultModal from './components/ResultModal';
//发起准入 弹窗
import CreateModal from './components/CreateModal';
import CategorySelector from '@/components/CategorySelector';
//接口
import { getPage, startApprove } from './services'
//统一列表分页
import tableProps from '@/utils/tableProps'
const { Option } = Select;
@ -60,6 +63,13 @@ const AccessManagement: React.FC = () => {
const values = form.getFieldsValue();
getList(values, 1, 10);
};
// 重置
const handleReset = () => {
form.resetFields()
const values = form.getFieldsValue();
getList(values, 1, 10);
};
const handleApproval = (id: string) => {
Modal.confirm({
title: '是否确认发起审批?',
@ -82,10 +92,10 @@ const AccessManagement: React.FC = () => {
render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
},
{ title: '准入工作', ellipsis: true, dataIndex: 'accessWorkName' },
{ title: '准入单位', ellipsis: true,dataIndex: 'deptId' },
{ title: '准入部门', ellipsis: true,dataIndex: 'deptId' },
{ title: '准入方式', ellipsis: true,dataIndex: 'accessTypeText' },
{ title: '申请时间', ellipsis: true,dataIndex: 'createTime' },
{ title: '准入单位', ellipsis: true, dataIndex: 'deptId' },
{ title: '准入部门', ellipsis: true, dataIndex: 'deptId' },
{ title: '准入方式', ellipsis: true, dataIndex: 'accessTypeText' },
{ title: '申请时间', ellipsis: true, dataIndex: 'createTime' },
{ title: '状态', dataIndex: 'reviewStatusText' },
{
title: '操作',
@ -111,54 +121,63 @@ const AccessManagement: React.FC = () => {
return (
<>
<Form layout="inline" form={form} onFinish={getList}>
<Form.Item name="accessType" label="准入方式">
<Select style={{ width: 150 }} placeholder="请选择准入方式" allowClear >
<Option value="online">线</Option>
<Option value="offline">线</Option>
<Option value="scattered">//</Option>
</Select>
</Form.Item>
<Form.Item name="deptId" label="准入单位">
<Select style={{ width: 150 }} placeholder="请选择" allowClear>
</Select>
</Form.Item>
<Form.Item name="categoryId" label="准入品类">
<CategorySelector multiple={false} style={{ width: 150 }} />
</Form.Item>
<Form.Item name="approveStatus" label="状态">
<Select style={{ width: 150 }} placeholder="请选择状态" allowClear>
<Option value="0"></Option>
<Option value="1"></Option>
<Option value="2"></Option>
<Option value="3"></Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"></Button>
</Form.Item>
<Form.Item>
<Button onClick={() => {
form.resetFields()
<div className="common-container">
<div className="filter-action-row">
<Form layout="inline" form={form} className="filter-form" onFinish={getList}>
<Form.Item name="accessType" label="准入方式">
<Select style={{ width: 150 }} placeholder="请选择准入方式" allowClear >
<Option value="online">线</Option>
<Option value="offline">线</Option>
<Option value="scattered">//</Option>
</Select>
</Form.Item>
<Form.Item name="deptId" label="准入单位">
<Select style={{ width: 150 }} placeholder="请选择" allowClear>
</Select>
</Form.Item>
<Form.Item name="categoryId" label="准入品类">
<CategorySelector multiple={false} style={{ width: 150 }} />
</Form.Item>
<Form.Item name="approveStatus" label="状态">
<Select style={{ width: 150 }} placeholder="请选择状态" allowClear>
<Option value="0"></Option>
<Option value="1"></Option>
<Option value="2"></Option>
<Option value="3"></Option>
</Select>
</Form.Item>
<Form.Item>
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} >
</Button>
</Form.Item>
<Form.Item>
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} ></Button>
</Form.Item>
<Form.Item style={{ marginLeft: 'auto' }}>
<Button className="buttonFunctionBlock" type="primary" onClick={() => openModal('create')} >
</Button>
</Form.Item>
</Form>
</div>
<Table
rowKey="key"
dataSource={data}
columns={columns}
loading={loading}
pagination={{...tableProps.pagination, total: pagination.total }}
onChange={(pagination) => {
const values = form.getFieldsValue();
getList(values, 1, 10);
}}></Button>
</Form.Item>
</Form>
<div style={{ marginTop: 16, marginBottom: 16 }}>
<Button type="primary" onClick={() => openModal('create')}></Button>
getList(values, pagination.current!, pagination.pageSize!)
}}
style={{ flex: 1, minHeight: 0 }}
scroll={{ y: 'calc(100vh - 350px)' }}
/>
</div>
<Table
rowKey="key"
dataSource={data}
columns={columns}
loading={loading}
pagination={pagination}
onChange={(pagination) => {
const values = form.getFieldsValue();
getList(values, pagination.current!, pagination.pageSize!)
}}
/>
{/* 弹窗区 */}
<ViewModal visible={modalInfo.type === 'view' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
<ResultModal visible={modalInfo.type === 'result' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />