feat: 新增物联网卡-导入,导出

src/pages/iot-card/CardManagement/ExportModal.tsx

@@ -0,0 +1,47 @@
+import { Modal, Radio, Space } from 'antd';
+import { useRef } from 'react';
+import { service } from './index';
+import { downloadFile } from '@/utils/util';
+
+type ExportModalType = {
+  onCancel: () => void;
+  keys: string[];
+};
+
+const ExportModal = (props: ExportModalType) => {
+  const type = useRef<string>('xlsx');
+
+  const downloadFileFn = async () => {
+    service._export(type.current, props.keys).then((res) => {
+      if (res.status === 200) {
+        const blob = new Blob([res.data], { type: type.current });
+        const url = URL.createObjectURL(blob);
+        downloadFile(url);
+      }
+    });
+  };
+
+  return (
+    <Modal title={'导出'} visible={true} onCancel={props.onCancel} onOk={downloadFileFn}>
+      <div style={{ paddingLeft: 30 }}>
+        <Space>
+          <span>文件格式：</span>
+          <Radio.Group
+            options={[
+              { label: 'xlsx', value: 'xlsx' },
+              { label: 'csv', value: 'csv' },
+            ]}
+            onChange={(e) => {
+              type.current = e.target.value;
+            }}
+            defaultValue={type.current}
+            optionType="button"
+            buttonStyle="solid"
+          />
+        </Space>
+      </div>
+    </Modal>
+  );
+};
+
+export default ExportModal;

src/pages/iot-card/CardManagement/ImportModal.tsx

@@ -0,0 +1,129 @@
+import { Button, Form, message, Modal, Radio, Select, Upload } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
+import { useRequest } from 'ahooks';
+import { service } from '@/pages/iot-card/CardManagement/index';
+import Token from '@/utils/token';
+import SystemConst from '@/utils/const';
+import { downloadFile } from '@/utils/util';
+import { CheckOutlined } from '@ant-design/icons';
+
+type ImportModalType = {
+  onCancel: () => void;
+};
+
+const ImportModal = (props: ImportModalType) => {
+  const [fileType, setFileType] = useState('xlsx');
+  const [configId, setConfigId] = useState('');
+  const [total, setTotal] = useState(0);
+
+  const { data: platformList, run: platformRun } = useRequest(service.queryPlatformNoPage, {
+    manual: false,
+    formatResult(result) {
+      return result.data;
+    },
+  });
+
+  const submitData = useCallback(
+    (result: any) => {
+      service._import(configId, { fileUrl: result }).then((resp) => {
+        if (resp.status === 200) {
+          setTotal(resp.result.total);
+          message.success('导入成功');
+        } else {
+          message.error(resp.message || '导入失败');
+        }
+      });
+    },
+    [configId],
+  );
+
+  const fileChange = (info: any) => {
+    if (info.file.status === 'done') {
+      const resp = info.file.result || { result: '' };
+      submitData(resp.result);
+    }
+  };
+
+  const downFileFn = (type: string) => {
+    const url = `/${SystemConst.API_BASE}/network/card/template.${type}`;
+    downloadFile(url);
+  };
+
+  useEffect(() => {
+    platformRun({
+      sorts: [{ name: 'createTime', order: 'desc' }],
+      terms: [{ column: 'state', value: 'enabled' }],
+    });
+  }, []);
+
+  return (
+    <Modal title={'导入'} visible={true} onOk={props.onCancel} onCancel={props.onCancel}>
+      <Form layout={'vertical'}>
+        <Form.Item label={'平台对接'}>
+          <Select
+            showSearch
+            placeholder={'请选择平台对接'}
+            fieldNames={{ label: 'name', value: 'id' }}
+            options={platformList}
+            filterOption={(input, option) => {
+              if (option?.name) {
+                return option.name.includes(input);
+              }
+              return false;
+            }}
+            onChange={(key) => {
+              setConfigId(key);
+            }}
+          />
+        </Form.Item>
+        {configId && (
+          <>
+            <Form.Item label={'文件格式'}>
+              <Radio.Group
+                options={[
+                  { label: 'xlsx', value: 'xlsx' },
+                  { label: 'csv', value: 'csv' },
+                ]}
+                onChange={(e) => {
+                  setFileType(e.target.value);
+                }}
+                defaultValue={fileType}
+                optionType="button"
+                buttonStyle="solid"
+              />
+            </Form.Item>
+            <Form.Item label={'文件上传'}>
+              <Upload
+                accept={`.${fileType || 'xlsx'}`}
+                action={`/${SystemConst.API_BASE}/file/static`}
+                headers={{
+                  'X-Access-Token': Token.get(),
+                }}
+                showUploadList={false}
+                onChange={fileChange}
+              >
+                <Button>上传文件</Button>
+              </Upload>
+            </Form.Item>
+            <Form.Item label={'下载模板'}>
+              <Button icon={'file'} onClick={() => downFileFn('xlsx')}>
+                .xlsx
+              </Button>
+              <Button icon={'file'} onClick={() => downFileFn('csv')}>
+                .csv
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form>
+      {total && (
+        <div>
+          <CheckOutlined style={{ color: '#2F54EB', marginRight: 8 }} />
+          已完成 总数量 <span style={{ color: '#2F54EB' }}>{total}</span>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default ImportModal;

src/pages/iot-card/CardManagement/SaveModal.tsx

@@ -24,7 +24,7 @@ const Save = (props: SaveType) => {
 
   useEffect(() => {
     platformRun({
-      sorts: [{ order: 'desc' }],
+      sorts: [{ name: 'createTime', order: 'desc' }],
       terms: [{ column: 'state', value: 'enabled' }],
     });
     // if (props.type === 'edit' && form) {

src/pages/iot-card/CardManagement/index.tsx

@@ -14,6 +14,7 @@ import {
   CheckCircleOutlined,
 } from '@ant-design/icons';
 import SaveModal from './SaveModal';
+import ExportModal from '@/pages/iot-card/CardManagement/ExportModal';
 import Service from './service';
 
 export const service = new Service('network/card');
@@ -237,6 +238,14 @@ const CardManagementNode = () => {
           }}
         />
       )}
+      {exportVisible && (
+        <ExportModal
+          keys={bindKeys}
+          onCancel={() => {
+            setExportVisible(false);
+          }}
+        />
+      )}
       <SearchComponent<CardManagement>
         field={columns}
         target="iot-card-management"

src/utils/BaseService.ts

@@ -63,7 +63,7 @@ class BaseService<T> implements IBaseService<T> {
     return this.uri;
   }
 
-  POST(url: string, data: Partial<T> = {}, params?: any, options?: any) {
+  POST(url: string, data: Partial<T> = {}, params?: any, options?: any): Promise<any> {
     return request(url, {
       method: 'POST',
       data,
@@ -72,7 +72,7 @@ class BaseService<T> implements IBaseService<T> {
     });
   }
 
-  GET(url: string, params?: Partial<T>, options?: any) {
+  GET(url: string, params?: Partial<T>, options?: any): Promise<any> {
     return request(url, {
       method: 'GET',
       params,
@@ -80,7 +80,7 @@ class BaseService<T> implements IBaseService<T> {
     });
   }
 
-  PATCH(url: string, data?: Partial<T>, options?: any) {
+  PATCH(url: string, data?: Partial<T>, options?: any): Promise<any> {
     return request(url, {
       method: 'PATCH',
       data,
@@ -88,7 +88,7 @@ class BaseService<T> implements IBaseService<T> {
     });
   }
 
-  DELETE(url: string, params?: Partial<T>, options?: any) {
+  DELETE(url: string, params?: Partial<T>, options?: any): Promise<any> {
     return request(url, {
       method: 'DELETE',
       params,
@@ -96,7 +96,7 @@ class BaseService<T> implements IBaseService<T> {
     });
   }
 
-  PUT(url: string, data?: Partial<T>, options?: any) {
+  PUT(url: string, data?: Partial<T>, options?: any): Promise<any> {
     return request(url, {
       method: 'PUT',
       data,