From 284e8fbcab2a59953547efc67b05d16f494c933d Mon Sep 17 00:00:00 2001 From: wangyunfei888 <1224056307@qq.com> Date: Mon, 29 Dec 2025 16:31:03 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BusinessPlanManagement.js | 12 + .../BusinessPlanDrawer.js | 318 ++++++++++++++++++ .../BusinessPlanDrawer.less | 163 +++++++++ 3 files changed, 493 insertions(+) diff --git a/src/pages/business_planmanage/components/BusinessPlanManagement.js b/src/pages/business_planmanage/components/BusinessPlanManagement.js index cbcd128..e3fa8df 100644 --- a/src/pages/business_planmanage/components/BusinessPlanManagement.js +++ b/src/pages/business_planmanage/components/BusinessPlanManagement.js @@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react'; import styles from './BusinessPlanManagement.less'; import { Select, Space, Button, Input, DatePicker } from 'antd'; import { PlusOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons'; +import BusinessPlanDrawer from './second_oil_components/BusinessPlanDrawer'; import StandardTable from '@/components/StandardTable'; import topIcon from '@/assets/business_planmanage/jyjhgl1.svg'; import topIcon2 from '@/assets/business_planmanage/jyjhgl2.svg'; @@ -10,6 +11,7 @@ import topIcon4 from '@/assets/business_planmanage/jyjhgl4.svg'; const BusinessPlanManagement = () => { const [searchKeyword, setSearchKeyword] = useState(''); const [selectedRows, setSelectedRows] = useState([]); + const [drawerVisible, setDrawerVisible] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); // 列表筛选与数据（演示数据，可替换为接口） @@ -227,6 +229,7 @@ const BusinessPlanManagement = () => { type="primary" icon={} className={styles.addBtn} + onClick={() => setDrawerVisible(true)} > 新增计划 @@ -257,6 +260,15 @@ const BusinessPlanManagement = () => { onChangePageSize={(size) => { setPageSize(size); setCurrentPage(1); }} /> + setDrawerVisible(false)} + onSubmit={(values) => { + // TODO: 调用新增接口后刷新列表 + console.log('submit', values); + setDrawerVisible(false); + }} + /> diff --git a/src/pages/business_planmanage/components/second_oil_components/BusinessPlanDrawer.js b/src/pages/business_planmanage/components/second_oil_components/BusinessPlanDrawer.js index e69de29..016af30 100644 --- a/src/pages/business_planmanage/components/second_oil_components/BusinessPlanDrawer.js +++ b/src/pages/business_planmanage/components/second_oil_components/BusinessPlanDrawer.js @@ -0,0 +1,318 @@ +import React, { useMemo, useState } from 'react'; +import { Drawer, Steps, Form, Input, Select, DatePicker, Upload, Button, Space, message, Progress } from 'antd'; +import { InboxOutlined, DeleteOutlined, DownloadOutlined, CloseOutlined } from '@ant-design/icons'; +import styles from './BusinessPlanDrawer.less'; + +const { Step } = Steps; +const { TextArea } = Input; + +/** + * 多步抽屉表单：父组件控制 visible/onClose/onSubmit/initialValues + */ +const BusinessPlanDrawer = ({ + visible, + onClose, + onSubmit, + initialValues = {}, + title = '新增经营计划', +}) => { + const [current, setCurrent] = useState(0); // 当前步骤索引 + const [form] = Form.useForm(); // 表单实例 + const [uploadingFiles, setUploadingFiles] = useState([]); // 正在上传的文件 + const [uploadedFiles, setUploadedFiles] = useState([]); // 已完成上传的文件 + + // 步骤配置：决定进度条和内容块 + const steps = useMemo( + () => [ + { key: 'basic', title: '基础信息' }, + { key: 'cargo', title: '货品信息' }, + { key: 'vessel', title: '舰具信息' }, + { key: 'upload', title: '附件上传' }, + ], + [], + ); + + // 下一步：无需必填校验，直接切换 + const handleNext = () => { + setCurrent((c) => Math.min(c + 1, steps.length - 1)); + }; + + // 上一步：简单回退 + const handlePrev = () => setCurrent((c) => Math.max(c - 1, 0)); + + // 提交：不做必填校验，直接取表单值 + const handleFinish = async () => { + const values = await form.getFieldsValue(); + values.files = uploadedFiles; + onSubmit?.(values); + message.success('已提交'); + }; + + const formatSize = (size) => { + if (!size && size !== 0) return ''; + const mb = size / (1024 * 1024); + return `${mb.toFixed(1)} MB`; + }; + + // 模拟上传：推进进度到100%后移入已上传列表 + const startMockUpload = (file) => { + const item = { uid: file.uid, name: file.name, size: file.size, percent: 0 }; + setUploadingFiles((prev) => [...prev, item]); + let percent = 0; + const timer = setInterval(() => { + percent = Math.min(percent + 20, 100); + setUploadingFiles((prev) => prev.map((f) => (f.uid === file.uid ? { ...f, percent } : f))); + if (percent === 100) { + clearInterval(timer); + setUploadingFiles((prev) => prev.filter((f) => f.uid !== file.uid)); + setUploadedFiles((prev) => [{ ...item, percent: 100 }, ...prev]); + } + }, 180); + }; + + const handleRemoveUploaded = (uid) => { + setUploadedFiles((prev) => prev.filter((f) => f.uid !== uid)); + }; + + // 按步骤渲染表单内容 + const renderStepContent = () => { + const stepKey = steps[current].key; + switch (stepKey) { + case 'basic': + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +