新增导入附件组件

components/ImportFile/index.d.ts

@@ -0,0 +1,29 @@
+import type { FormInstance, FormProps } from "antd/es/form";
+import type { FC, ReactNode } from "react";
+
+/**
+ * 表单值类型
+ */
+export type FormValues = Record<string, any>;
+
+export interface ImportFileProps extends Omit<FormProps, "form"> {
+  /** 弹窗是否显示 */
+  visible: boolean;
+  /** 弹窗标题 */
+  title?: string;
+  /** 模板文件地址 */
+  templateUrl: string;
+  /** 子组件 */
+  children?: ReactNode | ((props: { form: FormInstance }) => ReactNode);
+  /** 确认回调 */
+  onConfirm: (values: FormValues) => void;
+  /** 取消回调 */
+  onCancel: () => void;
+}
+
+/**
+ * 导入文件组件
+ */
+declare const ImportFile: FC<ImportFileProps>;
+
+export default ImportFile;

components/ImportFile/index.js

@@ -0,0 +1,87 @@
+import { Button, Form, Modal } from "antd";
+import { getFileUrl } from "../../utils";
+import Upload from "../Upload";
+
+/**
+ * 导入文件组件
+ */
+const ImportFile = (props) => {
+  const {
+    visible,
+    onCancel,
+    onConfirm,
+    title = "导入",
+    templateUrl,
+    labelCol = { span: 4 },
+    children,
+    ...restProps
+  } = props;
+
+  const [form] = Form.useForm();
+
+  // 关闭弹窗
+  const handleClose = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  // 提交表单
+  const handleSubmit = (values) => {
+    onConfirm(values);
+    handleClose();
+  };
+
+  // 导出模板
+  const handleExportTemplate = () => {
+    Modal.confirm({
+      title: "提示",
+      content: "确定要下载excel模板吗？",
+      okText: "确定",
+      cancelText: "取消",
+      onOk: () => {
+        const fileUrl = getFileUrl();
+        window.open(fileUrl + templateUrl);
+      },
+    });
+  };
+
+  return (
+    <Modal
+      title={title}
+      open={visible}
+      onCancel={handleClose}
+      width={600}
+      footer={[
+        templateUrl && (
+          <Button key="export" onClick={handleExportTemplate}>
+            导出模板
+          </Button>
+        ),
+        <Button key="cancel" onClick={handleClose}>
+          取消
+        </Button>,
+        <Button key="submit" type="primary" onClick={form.submit}>
+          确定
+        </Button>,
+      ]}
+    >
+      <Form
+        form={form}
+        labelCol={labelCol}
+        wrapperCol={{ span: 24 - labelCol.span }}
+        scrollToFirstError
+        onFinish={handleSubmit}
+        {...restProps}
+      >
+        {children && typeof children === "function" ? children({ form }) : children}
+        <Form.Item label="附件" name="file" rules={[{ required: true, message: "附件不能为空" }]}>
+          <Upload accept=".xls,.xlsx" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+ImportFile.displayName = "ImportFile";
+
+export default ImportFile;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.16",
+  "version": "1.0.17",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",