|
@@ -0,0 +1,204 @@
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
+import { PageContainer } from '@ant-design/pro-components';
|
|
|
+import { Button, Card, Form, Input, Space, Table } from 'antd';
|
|
|
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
+import type { ColumnsType } from 'antd/es/table';
|
|
|
+import { queryAfterSalesSupport } from '@/services/afterSales/afterSalesSupport';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+interface DataType {
|
|
|
+ name: string;
|
|
|
+ phone: string;
|
|
|
+ address: string;
|
|
|
+ installation_unit: string;
|
|
|
+ installer_name: string;
|
|
|
+ installer_phone: string;
|
|
|
+ dealer_name: string;
|
|
|
+ record_id: string;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 售后支持
|
|
|
+ * @constructor
|
|
|
+ */
|
|
|
+const AfterSalesSupport: React.FC = () => {
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const [dataList, setDataList] = useState([]);
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
+ const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
|
|
|
+ const [searchData, setSearchData] = useState<object | null>({});
|
|
|
+
|
|
|
+ // 获取列表信息
|
|
|
+ const getList = () => {
|
|
|
+ const params = {
|
|
|
+ q: 'page',
|
|
|
+ current: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ ...searchData,
|
|
|
+ };
|
|
|
+ queryAfterSalesSupport(params).then((res) => {
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ setDataList(res.data.list || []);
|
|
|
+ setPagination(res.data.pagination);
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, [searchData]);
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ const onFinish = () => {
|
|
|
+ form.validateFields().then((data) => {
|
|
|
+ setLoading(true);
|
|
|
+ setSearchData(data);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ const onReset = () => {
|
|
|
+ form.resetFields();
|
|
|
+ setLoading(true);
|
|
|
+ setSearchData(null);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 分页切换
|
|
|
+ const tableChange = (page: any) => {
|
|
|
+ setLoading(true);
|
|
|
+ const params = {
|
|
|
+ q: 'page',
|
|
|
+ current: page.current,
|
|
|
+ pageSize: page.pageSize,
|
|
|
+ ...searchData,
|
|
|
+ };
|
|
|
+ queryAfterSalesSupport(params).then((res) => {
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ setDataList(res.data.list || []);
|
|
|
+ setPagination(res.data.pagination);
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const columns: ColumnsType<DataType> = [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ key: 'index',
|
|
|
+ width: 80,
|
|
|
+ render: (_: any, _row: any, index: number) => index + 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户电话',
|
|
|
+ dataIndex: 'phone',
|
|
|
+ key: 'phone',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户地址',
|
|
|
+ dataIndex: 'address',
|
|
|
+ key: 'address',
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '安装单位名称',
|
|
|
+ dataIndex: 'installation_unit',
|
|
|
+ key: 'installation_unit',
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工人师傅姓名',
|
|
|
+ dataIndex: 'installer_name',
|
|
|
+ key: 'installer_name',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工人师傅电话',
|
|
|
+ dataIndex: 'installer_phone',
|
|
|
+ key: 'installer_phone',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '经销商单位',
|
|
|
+ dataIndex: 'dealer_name',
|
|
|
+ key: 'dealer_name',
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '主控编号',
|
|
|
+ dataIndex: 'main_code',
|
|
|
+ key: 'main_code',
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '安装时间',
|
|
|
+ dataIndex: 'install_time',
|
|
|
+ key: 'install_time',
|
|
|
+ render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '提交时间',
|
|
|
+ dataIndex: 'created_at',
|
|
|
+ key: 'created_at',
|
|
|
+ render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageContainer>
|
|
|
+ <div>
|
|
|
+ <Card>
|
|
|
+ <Form form={form} layout="inline" onFinish={onFinish}>
|
|
|
+ <Form.Item name="user_name" label="用户名称">
|
|
|
+ <Input placeholder="请输入用户名称" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="user_phone" label="用户电话">
|
|
|
+ <Input placeholder="请输入用户电话" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="user_address" label="地址">
|
|
|
+ <Input placeholder="请输入地址" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="main_code" label="主控编号">
|
|
|
+ <Input placeholder="请输入主控编号" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginBottom: '10px' }}>
|
|
|
+ <Space>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ <SearchOutlined />
|
|
|
+ 查询
|
|
|
+ </Button>
|
|
|
+ <Button htmlType="button" onClick={onReset}>
|
|
|
+ <ReloadOutlined />
|
|
|
+ 重置
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ <Table
|
|
|
+ columns={columns}
|
|
|
+ dataSource={dataList}
|
|
|
+ rowKey={(record) => record.record_id}
|
|
|
+ pagination={pagination}
|
|
|
+ loading={loading}
|
|
|
+ onChange={tableChange}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </PageContainer>
|
|
|
+ );
|
|
|
+};
|
|
|
+export default AfterSalesSupport;
|