供应商
This commit is contained in:
孙景学
@ -0,0 +1,232 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
//第三方UI库/组件
|
||||
import { Form, Button, Table, Select, Input, Space, message } from 'antd';
|
||||
import { SearchOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
//类型定义
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
//umi 相关
|
||||
import { connect } from 'umi';
|
||||
//本地组件、弹窗、业务逻辑
|
||||
import SupplierViewModal from './components/SupplierViewModal';
|
||||
import SupplierDetailModal from './components/SupplierDetailModal';
|
||||
//本地服务/接口
|
||||
import { list, systemDict } from './services';
|
||||
|
||||
const { Option } = Select;
|
||||
//下拉数据接口
|
||||
type OptionType = { label: string; value: string };
|
||||
// 列表数据接口
|
||||
interface Data {
|
||||
id: number;
|
||||
name: string;
|
||||
region: string;
|
||||
supplierType: string;
|
||||
regTime: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const mySupplierInquiry: React.FC = () => {
|
||||
//搜搜表单
|
||||
const [form] = Form.useForm();
|
||||
//列表数据
|
||||
const [data, setData] = useState<Data[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 188 });
|
||||
//查看是否显示状态
|
||||
const [viewVisible, setViewVisible] = useState(false);
|
||||
//准入明细是否显示状态
|
||||
const [detailVisible, setDetailVisible] = useState(false);
|
||||
//查看、准入明细 参数传递
|
||||
const [currentRecord, setCurrentRecord] = useState<any>(null);
|
||||
// 境内/境外下拉数据
|
||||
const [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
|
||||
//集采类别
|
||||
const [categoryOptions, setCategoryOptions] = useState<OptionType[]>([]);
|
||||
//集采库
|
||||
const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
message.success('导出成功（此处为前端示例，实际应调接口）');
|
||||
};
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
getList();
|
||||
};
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
getList();
|
||||
};
|
||||
//列表方法
|
||||
const getList = async (page: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data, msg, total } = await list({ page, pageSize });
|
||||
if (code === 200) {
|
||||
setData(data);
|
||||
setPagination({ current: page, pageSize, total });
|
||||
} else {
|
||||
message.error(msg)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
// 境内/境外 下拉
|
||||
systemDict('regionOptions').then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setRegionOptions(data)
|
||||
}
|
||||
});
|
||||
// 集采类别 下拉
|
||||
systemDict('categoryOptions').then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setCategoryOptions(data)
|
||||
}
|
||||
});
|
||||
// 集采库 下拉
|
||||
systemDict('storeOptions').then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setStoreOptions(data)
|
||||
}
|
||||
});
|
||||
getList();
|
||||
}, []);
|
||||
|
||||
|
||||
const columns: ColumnsType<Data> = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 60,
|
||||
render: (_: any, __: any, idx: number) => idx + 1,
|
||||
},
|
||||
{
|
||||
title: '供应商名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '统一社会信用代码/税号',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '境内/境外',
|
||||
dataIndex: 'region',
|
||||
key: 'region',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '企业类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'regTime',
|
||||
key: 'regTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'option',
|
||||
align: 'center',
|
||||
render: (record: any) => (
|
||||
<Space>
|
||||
<a
|
||||
style={{ color: '#1677ff' }}
|
||||
onClick={() => { setCurrentRecord(record); setViewVisible(true); }}
|
||||
>查看</a>
|
||||
<a
|
||||
style={{ color: '#1677ff' }}
|
||||
onClick={() => { setCurrentRecord(record); setDetailVisible(true); }}
|
||||
>准入明细</a>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
layout="inline"
|
||||
style={{ marginBottom: 12, }}
|
||||
>
|
||||
<Form.Item name="name" label="供应商名称">
|
||||
<Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="category" label="集采类别">
|
||||
<Select style={{ width: 150 }} allowClear>
|
||||
{categoryOptions.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="store" label="集采库">
|
||||
<Select style={{ width: 150 }} allowClear>
|
||||
{storeOptions.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="region" label="境内/境外">
|
||||
<Select style={{ width: 130 }} allowClear>
|
||||
{regionOptions.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" icon={<DownloadOutlined />} style={{ marginRight: 8 }} onClick={handleExport}>
|
||||
数据导出
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />} htmlType="submit" onClick={handleSearch}>
|
||||
查询
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} 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)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect()(mySupplierInquiry);
|
||||
Reference in New Issue
Block a user