供应商
This commit is contained in:
孙景学
180
src/pages/supplier/backend/changeProgressInquiry/index.tsx
Normal file
180
src/pages/supplier/backend/changeProgressInquiry/index.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { connect, useIntl } from 'umi';
|
||||
import { Form, Button, Table, Select, DatePicker, Input } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { getPage } from './services';
|
||||
import moment from 'moment';
|
||||
import DetailView from './components/DetailView';
|
||||
|
||||
interface Data {
|
||||
deptName: string;
|
||||
categoryName: string;
|
||||
createTime: string;
|
||||
exitTime: string;
|
||||
exitReason: string;
|
||||
}
|
||||
|
||||
const CooperateEnterprise: React.FC = () => {
|
||||
//双语
|
||||
const intl = useIntl();
|
||||
//查询
|
||||
const [searchForm] = Form.useForm();
|
||||
//列表数据
|
||||
const [data, setData] = useState<Data[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
||||
//弹出组件开关状态
|
||||
const [detailVisible, setDetailVisible] = useState(false);
|
||||
//弹出组件参数
|
||||
const [currentDetail, setCurrentDetail] = useState<Data | null>(null);
|
||||
//列表头部
|
||||
const columns: ColumnsType<Data> = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render: (_: any, __: any, index: number) => index + 1,
|
||||
},
|
||||
{
|
||||
title: '变更内容',
|
||||
dataIndex: 'deptName',
|
||||
key: 'deptName',
|
||||
},
|
||||
{
|
||||
title: '提交时间',
|
||||
dataIndex: 'categoryName',
|
||||
key: 'categoryName',
|
||||
},
|
||||
{
|
||||
title: '审批单位',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '审批状态',
|
||||
dataIndex: 'exitTime',
|
||||
key: 'exitTime',
|
||||
},
|
||||
{
|
||||
title: '审批时间',
|
||||
dataIndex: 'exitReason',
|
||||
key: 'exitReason',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text: string, record: Data) => (
|
||||
<Button type="link" onClick={() => handleDetail(record)}>
|
||||
查看
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
//重置
|
||||
const handleReset = () => {
|
||||
searchForm.resetFields();
|
||||
getList({ page: 1, pageSize: pagination.pageSize ?? 10, parentCode: '', startTime: '', endTime: '' });
|
||||
};
|
||||
//搜索
|
||||
const handleSearch = (values: any) => {
|
||||
const { parentCode, createTime } = values;
|
||||
const startTime = createTime ? moment(createTime[0]).format('YYYY-MM-DD') : '';
|
||||
const endTime = createTime ? moment(createTime[1]).format('YYYY-MM-DD') : '';
|
||||
getList({
|
||||
page: 1,
|
||||
pageSize: pagination.pageSize ?? 10,
|
||||
parentCode: parentCode || '',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
};
|
||||
//开启弹出
|
||||
const handleDetail = (record: Data) => {
|
||||
setCurrentDetail(record);
|
||||
setDetailVisible(true);
|
||||
};
|
||||
//关闭演出
|
||||
const handleDetailClose = () => {
|
||||
setDetailVisible(false);
|
||||
};
|
||||
//列表数据请求
|
||||
const getList = async (params: { page: number; pageSize: number; parentCode: string; startTime: string; endTime: string }) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code , data, total } = await getPage(params);
|
||||
if (code === 200) {
|
||||
setData(data);
|
||||
setPagination({ current: params.page, pageSize: params.pageSize, total });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
getList({ page: 1, pageSize: 10, parentCode: '', startTime: '', endTime: '' });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={searchForm}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="parentCode" label="变更内容">
|
||||
<Input placeholder="请输入变更内容" />
|
||||
</Form.Item>
|
||||
<Form.Item name="parentCode" label="审批单位">
|
||||
<Select placeholder="请选择审批单位">
|
||||
<Select.Option value="品类1">品类1</Select.Option>
|
||||
<Select.Option value="品类2">品类2</Select.Option>
|
||||
<Select.Option value="品类3">品类3</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="createTime" label="提交时间">
|
||||
<DatePicker.RangePicker placeholder={['开始时间', '结束时间']} />
|
||||
</Form.Item>
|
||||
<Form.Item name="parentCode" label="审批状态">
|
||||
<Select placeholder="请选择审批状态">
|
||||
<Select.Option value="品类1">品类1</Select.Option>
|
||||
<Select.Option value="品类2">品类2</Select.Option>
|
||||
<Select.Option value="品类3">品类3</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"
|
||||
className="custom-table"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
onChange={(pagination) => getList({ page: pagination.current!, pageSize: pagination.pageSize!, parentCode: '', startTime: '', endTime: '' })}
|
||||
/>
|
||||
<DetailView
|
||||
visible={detailVisible}
|
||||
onClose={handleDetailClose}
|
||||
detailId={10}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect()(CooperateEnterprise);
|
||||
Reference in New Issue
Block a user