Browse Source

fix(compiler): 新增用户管理的公司搜索功能,售后支持新增搜索和详情页面

shylock 3 months ago
parent
commit
80d05c84ea

+ 132 - 0
src/pages/AfterSales/AfterSalesSupport/check.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { Descriptions, Modal, Image } from 'antd';
+import { queryAfterSalesSupportDetail } from '@/services/afterSales/afterSalesSupport';
+
+interface checkProps {
+  params: any;
+  visible: boolean;
+  callback: () => void;
+}
+
+/**
+ * 售后支持详情页面
+ * @param props
+ * @constructor
+ */
+const Check: React.FC<checkProps> = (props) => {
+  const { visible, callback, params } = props;
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    queryAfterSalesSupportDetail(params).then((res) => {
+      if (res && res.code === 0) {
+        const newData = res.data;
+        const files = res.data.files;
+        const newFiles = {};
+        files.forEach((item: any) => {
+          newFiles[item.type] = item;
+        });
+        newData.files = newFiles;
+        setData(newData);
+      }
+    });
+  }, []);
+
+  // 确定
+  const onOk = () => {
+    callback();
+  };
+
+  // 取消
+  const onCancel = () => {
+    callback();
+  };
+
+  return (
+    <Modal title="查看详情" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
+      {data && data.record_id && (
+        <Descriptions bordered>
+          <Descriptions.Item label="用户姓名">{data?.name}</Descriptions.Item>
+          <Descriptions.Item label="用户电话">{data?.phone}</Descriptions.Item>
+          <Descriptions.Item label="用户地址">
+            {data && data?.address && JSON.parse(data.address).join(' ')}
+          </Descriptions.Item>
+          <Descriptions.Item label="详细地址" span={2}>
+            {data?.detailed_address}
+          </Descriptions.Item>
+          <Descriptions.Item label="经销商单位">{data?.dealer_name}</Descriptions.Item>
+          <Descriptions.Item label="产品类型">{data?.product_type}</Descriptions.Item>
+          <Descriptions.Item label="产品型号" span={2}>
+            {data?.device_type}
+          </Descriptions.Item>
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="主控器码">{data?.main_code}</Descriptions.Item>
+          )}
+          <Descriptions.Item label={`${data?.product_type}条码`}>
+            {data?.machine_code}
+          </Descriptions.Item>
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="分风箱电控盒二维码">
+              {data?.electric_control_code}
+            </Descriptions.Item>
+          )}
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="定位图">
+              <Image width={80} src={data && data.files && data?.files[1].url} />
+            </Descriptions.Item>
+          )}
+          <Descriptions.Item label="风道或管理图">
+            <Image width={80} src={data && data.files && data?.files[7].url} />
+          </Descriptions.Item>
+          <Descriptions.Item label="整体安装图片">
+            <Image width={80} src={data && data.files && data?.files[8].url} />
+          </Descriptions.Item>
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="电控安装箱">
+              <Image width={80} src={data && data.files && data?.files[9].url} />
+            </Descriptions.Item>
+          )}
+          <Descriptions.Item label="隐蔽工程验收单">
+            <Image width={80} src={data && data.files && data?.files[10].url} />
+          </Descriptions.Item>
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="电气部分">
+              <Image width={80} src={data && data.files && data?.files[11].url} />
+            </Descriptions.Item>
+          )}
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="主控二维码">
+              <Image width={80} src={data && data.files && data?.files[14].url} />
+            </Descriptions.Item>
+          )}
+          {data?.product_type === '分风箱' && (
+            <Descriptions.Item label="墙孔照片">
+              <Image width={80} src={data && data.files && data?.files[15].url} />
+            </Descriptions.Item>
+          )}
+          {(data?.product_type === '新风加湿一体机' || data?.product_type === '新风除湿一体机') && (
+            <Descriptions.Item label="机器条码">
+              <Image width={80} src={data && data.files && data?.files[17].url} />
+            </Descriptions.Item>
+          )}
+          {data && data.files && data?.files[16] && data?.files[16].url && (
+            <Descriptions.Item label="其他">
+              <Image width={80} src={data && data.files && data?.files[16].url} />
+            </Descriptions.Item>
+          )}
+          {data && data.files && data?.files[12] && data?.files[12].url && (
+            <Descriptions.Item label="风口照片">
+              <Image width={80} src={data && data.files && data?.files[12].url} />
+            </Descriptions.Item>
+          )}
+          {data && data.files && data?.files[13] && data?.files[13].url && (
+            <Descriptions.Item label="调试验收单">
+              <Image width={80} src={data && data.files && data?.files[13].url} />
+            </Descriptions.Item>
+          )}
+        </Descriptions>
+      )}
+    </Modal>
+  );
+};
+export default Check;

+ 70 - 32
src/pages/AfterSales/AfterSalesSupport/index.tsx

@@ -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>

+ 0 - 1
src/pages/setting/UserManagement/edit.tsx

@@ -277,7 +277,6 @@ const Edit: React.FC<userEditPros> = (props) => {
               {...formItemLayout}
               name="districts"
               label="地区"
-              rules={[{ required: true, message: '请选择地区' }]}
               initialValue={
                 detailData?.districts.map((item: any) => [
                   item.province_id,

+ 8 - 0
src/pages/setting/UserManagement/index.tsx

@@ -218,6 +218,11 @@ const UserManagement: React.FC = () => {
       dataIndex: 'phone',
       key: 'phone',
     },
+    {
+      title: '公司名称',
+      dataIndex: 'company',
+      key: 'company',
+    },
     {
       title: '状态',
       dataIndex: 'status',
@@ -332,6 +337,9 @@ const UserManagement: React.FC = () => {
                 : null}
             </Select>
           </Form.Item>
+          <Form.Item name="company" label="公司名称">
+            <Input placeholder="请输入公司名称" />
+          </Form.Item>
           <Form.Item style={{ marginBottom: '10px' }}>
             <Space>
               <Button type="primary" htmlType="submit">

+ 8 - 0
src/services/afterSales/afterSalesSupport.ts

@@ -9,6 +9,14 @@ export async function queryAfterSalesSupport(param: object) {
   return request(`/web/v1/after_sales?${stringify(param)}`);
 }
 
+/**
+ * 查询售后支持详情
+ * @param record_id
+ */
+export async function queryAfterSalesSupportDetail(record_id: string) {
+  return request(`/web/v1/after_sales/${record_id}`);
+}
+
 /**
  * 导出售后支持列表
  * @param params