|
@@ -1,19 +1,17 @@
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
import { PageContainer } from '@ant-design/pro-components';
|
|
|
-import { Button, Card, Form, Input, message, Space, Table } from 'antd';
|
|
|
+import { Button, Card, DatePicker, Form, Input, message, Space, Table } from 'antd';
|
|
|
import { ReloadOutlined, SearchOutlined, DownloadOutlined } from '@ant-design/icons';
|
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
|
import { queryAfterSalesSupport } from '@/services/afterSales/afterSalesSupport';
|
|
|
import moment from 'moment';
|
|
|
import { queryExport } from '@/services/afterSales/afterSalesSupport';
|
|
|
+import Check from '@/pages/AfterSales/AfterSalesSupport/check';
|
|
|
|
|
|
interface DataType {
|
|
|
name: string;
|
|
|
phone: string;
|
|
|
address: string;
|
|
|
- installation_unit: string;
|
|
|
- installer_name: string;
|
|
|
- installer_phone: string;
|
|
|
dealer_name: string;
|
|
|
record_id: string;
|
|
|
}
|
|
@@ -28,6 +26,8 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
|
|
|
const [searchData, setSearchData] = useState<object | null>({});
|
|
|
+ const [checkVisible, setCheckVisible] = useState(false);
|
|
|
+ const [checkData, setCheckData] = useState(null);
|
|
|
|
|
|
// 获取列表信息
|
|
|
const getList = () => {
|
|
@@ -58,7 +58,12 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
const onFinish = () => {
|
|
|
form.validateFields().then((data) => {
|
|
|
setLoading(true);
|
|
|
- setSearchData(data);
|
|
|
+ const time = moment(data.time).format('YYYY-MM-DD');
|
|
|
+ setSearchData({
|
|
|
+ ...searchData,
|
|
|
+ ...data,
|
|
|
+ time: time,
|
|
|
+ });
|
|
|
});
|
|
|
};
|
|
|
|
|
@@ -106,6 +111,17 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ // 查看详情
|
|
|
+ const toDetail = (record: any) => {
|
|
|
+ setCheckVisible(true);
|
|
|
+ setCheckData(record.record_id);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 查看弹框回调
|
|
|
+ const onCheckCallback = () => {
|
|
|
+ setCheckVisible(false);
|
|
|
+ };
|
|
|
+
|
|
|
const columns: ColumnsType<DataType> = [
|
|
|
{
|
|
|
title: '序号',
|
|
@@ -131,24 +147,10 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
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,
|
|
|
+ render: (v) => {
|
|
|
+ const item = JSON.parse(v).join(' ');
|
|
|
+ return <div>{item}</div>;
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
title: '经销商单位',
|
|
@@ -157,16 +159,15 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
width: 300,
|
|
|
},
|
|
|
{
|
|
|
- title: '主控编号',
|
|
|
- dataIndex: 'main_code',
|
|
|
- key: 'main_code',
|
|
|
+ title: '机器条码编号',
|
|
|
+ dataIndex: 'machine_code',
|
|
|
+ key: 'machine_code',
|
|
|
width: 300,
|
|
|
},
|
|
|
{
|
|
|
- title: '安装时间',
|
|
|
- dataIndex: 'install_time',
|
|
|
- key: 'install_time',
|
|
|
- render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
|
|
|
+ title: '录入人',
|
|
|
+ dataIndex: 'installer_name',
|
|
|
+ key: 'installer_name',
|
|
|
width: 300,
|
|
|
},
|
|
|
{
|
|
@@ -176,6 +177,33 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
|
|
|
width: 300,
|
|
|
},
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ width: 300,
|
|
|
+ render: (v) =>
|
|
|
+ v && (
|
|
|
+ <span style={{ color: `${{ 1: 'red', 2: '#00a650', 3: '#d78f11' }[v]}` }}>
|
|
|
+ {{ 1: '草稿', 2: '已完成', 3: '隐蔽验收完成' }[v]}
|
|
|
+ </span>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ render: (_, record) => (
|
|
|
+ <Space size="middle">
|
|
|
+ <a
|
|
|
+ onClick={() => {
|
|
|
+ toDetail(record);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 详情
|
|
|
+ </a>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
return (
|
|
@@ -192,8 +220,14 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
<Form.Item name="user_address" label="地址">
|
|
|
<Input placeholder="请输入地址" />
|
|
|
</Form.Item>
|
|
|
- <Form.Item name="main_code" label="主控编号">
|
|
|
- <Input placeholder="请输入主控编号" />
|
|
|
+ <Form.Item name="machine_code" label="机器条码编号">
|
|
|
+ <Input placeholder="请输入机器条码编号" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="dealer_name" label="经销商单位">
|
|
|
+ <Input placeholder="请输入经销商单位" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="time" label="经销商单位">
|
|
|
+ <DatePicker />
|
|
|
</Form.Item>
|
|
|
<Form.Item style={{ marginBottom: '10px' }}>
|
|
|
<Space>
|
|
@@ -220,6 +254,10 @@ const AfterSalesSupport: React.FC = () => {
|
|
|
loading={loading}
|
|
|
onChange={tableChange}
|
|
|
/>
|
|
|
+
|
|
|
+ {checkVisible && (
|
|
|
+ <Check params={checkData} visible={checkVisible} callback={onCheckCallback} />
|
|
|
+ )}
|
|
|
</Card>
|
|
|
</div>
|
|
|
</PageContainer>
|