6
6
This commit is contained in:
@ -1,249 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Typography, Card, Space, Divider } from '@douyinfe/semi-ui';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { RecordSelectionCard } from './components/RecordSelectionCard';
|
||||
import { useRecordSelection } from './hooks/useRecordSelection';
|
||||
import { QueryResultsDisplay } from './components/QueryResultsDisplay';
|
||||
import { LabelSelectionCard } from './components/LabelSelectionCard';
|
||||
import { TimelineModal } from './components/TimelineModal';
|
||||
import { apiService } from './services/apiService';
|
||||
import { TABLE_CONFIG, LABEL_CONFIG } from './constants/config';
|
||||
import type { RecordDetail, QueryResult, LabelOptions } from './types';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
export default function App() {
|
||||
// 使用自定义 Hook 管理记录选择
|
||||
const {
|
||||
selectedRecords,
|
||||
recordDetails,
|
||||
loading,
|
||||
handleSelectRecords,
|
||||
handleClearRecords
|
||||
} = useRecordSelection();
|
||||
|
||||
// 查询结果状态
|
||||
const [queryResults, setQueryResults] = useState<QueryResult[]>([]);
|
||||
const [secondaryProcessResults, setSecondaryProcessResults] = useState<QueryResult[]>([]);
|
||||
const [pricingDetailsResults, setPricingDetailsResults] = useState<QueryResult[]>([]);
|
||||
const [queryLoading, setQueryLoading] = useState(false);
|
||||
const [secondaryProcessLoading, setSecondaryProcessLoading] = useState(false);
|
||||
const [pricingDetailsLoading, setPricingDetailsLoading] = useState(false);
|
||||
|
||||
// 标签相关状态
|
||||
const [labelOptions, setLabelOptions] = useState<LabelOptions>({});
|
||||
const [selectedLabels, setSelectedLabels] = useState<{[key: string]: string | string[]}>({});
|
||||
const [expectedDate, setExpectedDate] = useState<Date | null>(null);
|
||||
const [labelLoading, setLabelLoading] = useState(false);
|
||||
|
||||
// 时效计算相关状态
|
||||
const [timelineVisible, setTimelineVisible] = useState(false);
|
||||
const [timelineLoading, setTimelineLoading] = useState(false);
|
||||
const [timelineResults, setTimelineResults] = useState<any[]>([]);
|
||||
const [timelineAdjustments, setTimelineAdjustments] = useState<{[key: number]: number}>({});
|
||||
|
||||
// 初始化标签选项
|
||||
useEffect(() => {
|
||||
const initializeLabelOptions = async () => {
|
||||
setLabelLoading(true);
|
||||
try {
|
||||
const options = await apiService.fetchLabelOptions();
|
||||
setLabelOptions(options);
|
||||
} catch (error) {
|
||||
console.error('获取标签选项失败:', error);
|
||||
} finally {
|
||||
setLabelLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initializeLabelOptions();
|
||||
}, []);
|
||||
|
||||
// 当记录选择变化时，自动执行查询
|
||||
useEffect(() => {
|
||||
if (selectedRecords.length > 0 && recordDetails.length > 0) {
|
||||
// 自动清空标签选择
|
||||
setSelectedLabels({});
|
||||
setExpectedDate(null);
|
||||
|
||||
// 提取第一条记录的标签信息
|
||||
const firstRecord = recordDetails[0];
|
||||
const extractedLabels: {[key: string]: string | string[]} = {};
|
||||
|
||||
// 提取标签1-10的值
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const labelKey = `标签${i}`;
|
||||
const fieldValue = firstRecord[labelKey];
|
||||
if (fieldValue && fieldValue !== '') {
|
||||
const isMultiSelect = i === 7 || i === 8 || i === 10;
|
||||
if (isMultiSelect && Array.isArray(fieldValue)) {
|
||||
extractedLabels[labelKey] = fieldValue;
|
||||
} else if (!isMultiSelect && typeof fieldValue === 'string') {
|
||||
extractedLabels[labelKey] = fieldValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedLabels(extractedLabels);
|
||||
|
||||
// 顺序执行查询
|
||||
executeQueries();
|
||||
}
|
||||
}, [selectedRecords, recordDetails]);
|
||||
|
||||
// 执行所有查询
|
||||
const executeQueries = async () => {
|
||||
try {
|
||||
await Promise.all([
|
||||
handleQueryDatabase(),
|
||||
handleSecondaryProcessQuery(),
|
||||
handlePricingDetailsQuery()
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('查询执行失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 面料数据查询
|
||||
const handleQueryDatabase = async () => {
|
||||
if (selectedRecords.length === 0) return;
|
||||
|
||||
setQueryLoading(true);
|
||||
try {
|
||||
const results = await apiService.queryDatabase(selectedRecords);
|
||||
setQueryResults(results);
|
||||
} catch (error) {
|
||||
console.error('面料数据查询失败:', error);
|
||||
setQueryResults([]);
|
||||
} finally {
|
||||
setQueryLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 二次工艺查询
|
||||
const handleSecondaryProcessQuery = async () => {
|
||||
if (selectedRecords.length === 0) return;
|
||||
|
||||
setSecondaryProcessLoading(true);
|
||||
try {
|
||||
const results = await apiService.querySecondaryProcess(selectedRecords);
|
||||
setSecondaryProcessResults(results);
|
||||
} catch (error) {
|
||||
console.error('二次工艺查询失败:', error);
|
||||
setSecondaryProcessResults([]);
|
||||
} finally {
|
||||
setSecondaryProcessLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 工艺价格查询
|
||||
const handlePricingDetailsQuery = async () => {
|
||||
if (selectedRecords.length === 0 || recordDetails.length === 0) return;
|
||||
|
||||
const packId = recordDetails[0]?.packId;
|
||||
if (!packId) {
|
||||
console.error('缺少 packId，无法执行工艺价格查询');
|
||||
return;
|
||||
}
|
||||
|
||||
setPricingDetailsLoading(true);
|
||||
try {
|
||||
const results = await apiService.queryPricingDetails(packId);
|
||||
setPricingDetailsResults(results);
|
||||
} catch (error) {
|
||||
console.error('工艺价格查询失败:', error);
|
||||
setPricingDetailsResults([]);
|
||||
} finally {
|
||||
setPricingDetailsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 标签选择变化处理
|
||||
const handleLabelChange = (labelKey: string, value: string | string[]) => {
|
||||
setSelectedLabels(prev => ({
|
||||
...prev,
|
||||
[labelKey]: value
|
||||
}));
|
||||
};
|
||||
|
||||
// 计算预计时间
|
||||
const handleCalculateTimeline = async () => {
|
||||
if (Object.keys(selectedLabels).length === 0) {
|
||||
console.warn('请先选择标签');
|
||||
return;
|
||||
}
|
||||
|
||||
setTimelineLoading(true);
|
||||
try {
|
||||
const results = await apiService.calculateTimeline(selectedLabels, expectedDate);
|
||||
setTimelineResults(results);
|
||||
setTimelineVisible(true);
|
||||
} catch (error) {
|
||||
console.error('时效计算失败:', error);
|
||||
} finally {
|
||||
setTimelineLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清空所有数据
|
||||
const handleClearAll = () => {
|
||||
handleClearRecords();
|
||||
setSelectedLabels({});
|
||||
setExpectedDate(null);
|
||||
setQueryResults([]);
|
||||
setSecondaryProcessResults([]);
|
||||
setPricingDetailsResults([]);
|
||||
setTimelineResults([]);
|
||||
setTimelineAdjustments({});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<Title heading={2} style={{ marginBottom: '24px', textAlign: 'center' }}>
|
||||
版单数据管理系统
|
||||
</Title>
|
||||
|
||||
{/* 记录选择卡片 */}
|
||||
<RecordSelectionCard
|
||||
selectedRecords={selectedRecords}
|
||||
recordDetails={recordDetails}
|
||||
loading={loading}
|
||||
onSelectRecords={handleSelectRecords}
|
||||
onClearRecords={handleClearAll}
|
||||
/>
|
||||
|
||||
{/* 标签选择卡片 */}
|
||||
{labelOptions && Object.keys(labelOptions).length > 0 && (
|
||||
<LabelSelectionCard
|
||||
labelOptions={labelOptions}
|
||||
selectedLabels={selectedLabels}
|
||||
expectedDate={expectedDate}
|
||||
timelineLoading={timelineLoading}
|
||||
onLabelChange={handleLabelChange}
|
||||
onExpectedDateChange={setExpectedDate}
|
||||
onCalculateTimeline={handleCalculateTimeline}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 查询结果展示 */}
|
||||
<QueryResultsDisplay
|
||||
queryResults={queryResults}
|
||||
secondaryProcessResults={secondaryProcessResults}
|
||||
pricingDetailsResults={pricingDetailsResults}
|
||||
queryLoading={queryLoading}
|
||||
secondaryProcessLoading={secondaryProcessLoading}
|
||||
pricingDetailsLoading={pricingDetailsLoading}
|
||||
/>
|
||||
|
||||
{/* 时效计算模态框 */}
|
||||
<TimelineModal
|
||||
visible={timelineVisible}
|
||||
loading={timelineLoading}
|
||||
results={timelineResults}
|
||||
adjustments={timelineAdjustments}
|
||||
onClose={() => setTimelineVisible(false)}
|
||||
onAdjustmentChange={setTimelineAdjustments}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user