页面列表与按钮样式 调整
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
//第三方UI库/组件
|
||||
import { Form, Button, Table, Select, Input, Space, Tooltip, message } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
//类型定义
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
//umi 相关
|
||||
@ -11,6 +11,8 @@ import SupplierViewModal from './components/SupplierViewModal';
|
||||
import SupplierDetailModal from './components/SupplierDetailModal';
|
||||
//本地服务/接口
|
||||
import { getRegisterPage } from './services';
|
||||
//统一列表分页
|
||||
import tableProps from '@/utils/tableProps'
|
||||
|
||||
// 列表数据接口
|
||||
interface Data {
|
||||
@ -77,7 +79,7 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
setData(data.records);
|
||||
setPagination({ current: pageNo, pageSize, total: data.total });
|
||||
} else {
|
||||
message.error(message)
|
||||
message.error(message)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@ -116,9 +118,9 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
key: 'name',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
render: (dom, record) =>
|
||||
render: (dom, record) =>
|
||||
<Tooltip title={record.name}>
|
||||
<a
|
||||
<a
|
||||
onClick={() => {
|
||||
dispatch({
|
||||
type: 'globalModal/show',
|
||||
@ -137,13 +139,15 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
dataIndex: 'supplierTypeCn',
|
||||
key: 'supplierTypeCn',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '供应商分类',
|
||||
dataIndex: 'enterpriseTypeCn',
|
||||
key: 'enterpriseTypeCn',
|
||||
align: 'center',
|
||||
|
||||
width: 160,
|
||||
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
@ -151,11 +155,13 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'accessStatusCn',
|
||||
key: 'accessStatusCn',
|
||||
width: 160,
|
||||
align: 'center',
|
||||
render: (val: string) =>
|
||||
<span style={{
|
||||
@ -166,6 +172,7 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
title: '操作',
|
||||
key: 'option',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
render: (record) => (
|
||||
<Space>
|
||||
<a
|
||||
@ -182,58 +189,62 @@ const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{/* 查询区 */}
|
||||
<Form
|
||||
form={form}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="name" label="供应商名称">
|
||||
<Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear maxLength={20} />
|
||||
</Form.Item>
|
||||
<Form.Item name="supplierType" label="境内/境外">
|
||||
<Select style={{ width: 160 }} placeholder="请选择境内/境外" allowClear>
|
||||
{regionOptions.map(opt => (
|
||||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="accessStatus" label="状态">
|
||||
<Select style={{ width: 160 }} placeholder="请选择状态" allowClear>
|
||||
{statusOptions.map(opt => (
|
||||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>查询</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* 列表 */}
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
{/* 查看组件 */}
|
||||
<SupplierViewModal
|
||||
visible={viewVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setViewVisible(false)}
|
||||
/>
|
||||
{/* 准入明细组件 */}
|
||||
<SupplierDetailModal
|
||||
visible={detailVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setDetailVisible(false)}
|
||||
/>
|
||||
<div className="common-container">
|
||||
<div className="filter-action-row">
|
||||
<Form
|
||||
form={form}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="name" label="供应商名称">
|
||||
<Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear maxLength={20} />
|
||||
</Form.Item>
|
||||
<Form.Item name="supplierType" label="境内/境外">
|
||||
<Select style={{ width: 160 }} placeholder="请选择境内/境外" allowClear>
|
||||
{regionOptions.map(opt => (
|
||||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="accessStatus" label="状态">
|
||||
<Select style={{ width: 160 }} placeholder="请选择状态" allowClear>
|
||||
{statusOptions.map(opt => (
|
||||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.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>
|
||||
</div>
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{...tableProps.pagination, total: pagination.total }}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
style={{ flex: 1, minHeight: 0 }}
|
||||
scroll={{ y: 'calc(100vh - 350px)' }}
|
||||
/>
|
||||
{/* 查看组件 */}
|
||||
<SupplierViewModal
|
||||
visible={viewVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setViewVisible(false)}
|
||||
/>
|
||||
{/* 准入明细组件 */}
|
||||
<SupplierDetailModal
|
||||
visible={detailVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setDetailVisible(false)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user