个人与集团供应商
This commit is contained in:
孙景学
@ -0,0 +1,98 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, TreeSelect, Button, message } from 'antd';
|
||||
//本地服务/接口
|
||||
import { treeData } from '../services';
|
||||
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CategoryAddModal: React.FC<Props> = ({ visible, onCancel }) => {
|
||||
const [value, setValue] = useState<string[]>([]);
|
||||
// 树数据
|
||||
const [dataTree, setDataTree] = useState<any[]>([]);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) setValue([]);
|
||||
//tree数据
|
||||
treeData().then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setDataTree(data)
|
||||
}
|
||||
})
|
||||
}, [visible]);
|
||||
|
||||
// 提交方法
|
||||
const handleOk = async () => {
|
||||
if (value.length === 0) {
|
||||
message.warning('请选择品类');
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// TODO: 替换为你自己的接口调用
|
||||
// const res = await addCategory({ categoryIds: value });
|
||||
// 假设接口成功
|
||||
// if (res.code === 200) {
|
||||
// message.success('新增品类成功');
|
||||
// onCancel();
|
||||
// } else {
|
||||
// message.error(res.msg || '操作失败');
|
||||
// }
|
||||
// 示例（去掉上面的注释用你自己的接口）
|
||||
setTimeout(() => {
|
||||
message.success('新增品类成功');
|
||||
setSubmitting(false);
|
||||
onCancel();
|
||||
}, 800);
|
||||
} catch (e) {
|
||||
message.error('提交失败');
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
title='品类'
|
||||
onCancel={onCancel}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: 32 }}>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ minWidth: 120 }}
|
||||
loading={submitting}
|
||||
onClick={handleOk}
|
||||
>确定</Button>
|
||||
<Button style={{ minWidth: 120 }} onClick={onCancel}>取消</Button>
|
||||
</div>
|
||||
}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
bodyStyle={{ minHeight: 300 }}
|
||||
>
|
||||
<TreeSelect
|
||||
style={{ width: '100%' }}
|
||||
value={value}
|
||||
treeData={dataTree}
|
||||
placeholder="请选择品类"
|
||||
allowClear
|
||||
multiple
|
||||
treeCheckable
|
||||
showSearch
|
||||
filterTreeNode={(input, node:any) =>
|
||||
(node.title as string).toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
onChange={setValue}
|
||||
dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryAddModal;
|
||||
@ -0,0 +1,171 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
//第三方UI库/组件
|
||||
import { Modal, Form, Input, Button, Table, message, Tooltip } from "antd";
|
||||
//类型定义
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
//umi 相关
|
||||
import { useIntl } from 'umi';
|
||||
//本地服务/接口
|
||||
import { getCategoryPage } from '../services';
|
||||
//本地组件
|
||||
import CategoryAddModal from './CategoryAddModal';
|
||||
|
||||
interface Data {
|
||||
id: number;
|
||||
unit: string;
|
||||
category: string;
|
||||
accessTime: string;
|
||||
exitTime?: string;
|
||||
grayTime?: string;
|
||||
blackTime?: string;
|
||||
}
|
||||
//主体接口
|
||||
interface SupplierAccessDetailModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
record?: string;
|
||||
}
|
||||
//主体
|
||||
const SupplierAccessDetailModal: React.FC<SupplierAccessDetailModalProps> = ({ visible, onCancel, record }) => {
|
||||
//双语
|
||||
const intl = useIntl();
|
||||
//查询表单
|
||||
const [form] = Form.useForm();
|
||||
//列表渲染数据
|
||||
const [data, setData] = useState<Data[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0, });
|
||||
//品类弹窗状态
|
||||
const [addModalVisible, setAddModalVisible] = useState(false);
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
getList();
|
||||
};
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
getList();
|
||||
};
|
||||
//列表方法
|
||||
const getList = async (pageNo: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data, message } = await getCategoryPage({ pageNo, pageSize, supplierId: record });
|
||||
if (code === 200) {
|
||||
setData(data.records);
|
||||
setPagination({ current: pageNo, pageSize, total: data.total });
|
||||
} else {
|
||||
message.error(message)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
if(visible) {
|
||||
getList();
|
||||
}
|
||||
}, [visible])
|
||||
// 列表头部数据
|
||||
const columns:ColumnsType<Data> = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
align: "center",
|
||||
render: (_: any, __: any, idx: number) => idx + 1,
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: "准入单位",
|
||||
dataIndex: "deptId",
|
||||
key: "deptId",
|
||||
align: "left",
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: "准入品类",
|
||||
dataIndex: "categoryNames",
|
||||
key: "categoryNames",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "准入时间",
|
||||
dataIndex: "accessTime",
|
||||
key: "accessTime",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "退出时间",
|
||||
dataIndex: "exitTime",
|
||||
key: "exitTime",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "进入黑名单时间",
|
||||
dataIndex: "blackTime",
|
||||
key: "blackTime",
|
||||
align: "center",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
title="准入明细"
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
width={1000}
|
||||
destroyOnClose
|
||||
>
|
||||
{/* 查询栏 */}
|
||||
<Form form={form} layout="inline" style={{ marginBottom: 16 }}>
|
||||
<Form.Item name="keyword">
|
||||
<Input
|
||||
placeholder="请输入准入单位或准入品类关键字"
|
||||
style={{ width: 300 }}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
查询
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ background: "#52a8ff", borderColor: "#52a8ff" }}
|
||||
onClick={() => setAddModalVisible(true)}
|
||||
>
|
||||
新增品类
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* 表格内容 */}
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
{/* 新增品类弹窗 */}
|
||||
<CategoryAddModal
|
||||
visible={addModalVisible}
|
||||
onCancel={() => setAddModalVisible(false)}
|
||||
// onOk={...} // 根据你的业务需要加
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierAccessDetailModal;
|
||||
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
//第三方UI库/组件
|
||||
import { Modal } from "antd";
|
||||
//本地组件、业务逻辑
|
||||
import CompanyInfo from '@/components/CompanyInfo';
|
||||
//主体接口
|
||||
interface SupplierViewModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
record?: any;
|
||||
}
|
||||
// 查看主体
|
||||
const SupplierViewModal: React.FC<SupplierViewModalProps> = ({ visible, onCancel, record }) => {
|
||||
return (
|
||||
<Modal visible={visible} title="供应商信息查看" onCancel={onCancel} footer={null} width='80%' destroyOnClose >
|
||||
<CompanyInfo viewType={true} record={record} />
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierViewModal;
|
||||
Reference in New Issue
Block a user