xudan/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加库位屏幕的下拉刷新功能，优化API响应处理，改进界面样式和用户体验

Browse Source
This commit is contained in:
xudan 2025-07-25 16:47:01 +08:00
parent 4ee7e9af54
commit c03df200ab
6 changed files with 282 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config.json
View File

@ -9,7 +9,9 @@
"apiEndpoints": {
"getTasks": "/api/vwed-task/list",
"getTaskDetail": "/api/vwed-task/{taskId}",
"runTask": "/api/vwed-task-edit/run"
"runTask": "/api/vwed-task-edit/run",
"getLocationList": "/api/vwed-operate-point/list",
"batchUpdateLocation": "/api/vwed-operate-point/batch-status"
},
"taskApiEndpoints": {
"getTaskList": "/task",

276
src/screens/LocationScreen.tsx
View File

@ -1,7 +1,16 @@
import React, { useEffect, useState, useCallback } from 'react';
import { StyleSheet, View, FlatList, Text, ActivityIndicator, Alert } from 'react-native';
import { SearchBar, CheckBox, Button, useTheme, Overlay, ListItem } from '@rneui/themed';
import {
StyleSheet,
View,
FlatList,
Text,
ActivityIndicator,
Alert,
RefreshControl,
} from 'react-native';
import { SearchBar, CheckBox, Button, Overlay, ListItem } from '@rneui/themed';
import api from '../services/api';
import { getConfig } from '../services/configService';
interface Location {
id: string;
@ -13,20 +22,35 @@ interface Location {
}
const LocationScreen = () => {
const { theme } = useTheme();
const [locations, setLocations] = useState<Location[]>([]);
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(true);
const [selectedLocations, setSelectedLocations] = useState<string[]>([]);
const [isOverlayVisible, setOverlayVisible] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);
const fetchData = useCallback(async (query = '') => {
setLoading(true);
try {
const response = await api.get('/api/vwed-operate-point/list', {
const config = await getConfig();
const endpoint =
(config?.apiEndpoints as any)?.getLocationList ||
'/api/vwed-operate-point/list';
const response = await api.get(endpoint, {
params: { layer_name: query },
});
setLocations(response.storage_locations);
console.log('API Response:', response); // 调试日志
// API 拦截器已经处理了响应，直接使用返回的数据
const data = response as any;
if (data && data.storage_locations) {
setLocations(data.storage_locations);
} else if (Array.isArray(data)) {
setLocations(data);
} else {
console.warn('Unexpected response format:', data);
setLocations([]);
}
} catch (error) {
console.error(error);
Alert.alert('错误', '加载库位列表失败。');
@ -43,9 +67,20 @@ const LocationScreen = () => {
fetchData(search);
};
const handleRefresh = useCallback(async () => {
setIsRefreshing(true);
try {
await fetchData(search);
} catch (error) {
console.error('刷新失败:', error);
} finally {
setIsRefreshing(false);
}
}, [fetchData, search]);
const toggleSelection = (id: string) => {
setSelectedLocations(prev =>
prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id],
);
};
@ -56,12 +91,19 @@ const LocationScreen = () => {
}
setOverlayVisible(false);
try {
const response = await api.put('/api/vwed-operate-point/batch-status', {
const config = await getConfig();
const endpoint =
(config?.apiEndpoints as any)?.batchUpdateLocation ||
'/api/vwed-operate-point/batch-status';
const response = await api.put(endpoint, {
layer_names: selectedLocations,
action: action,
});
const { success_count, failed_count, results } = response;
console.log('Batch Update Response:', response); // 调试日志
// API 拦截器已经处理了响应，直接使用返回的数据
const { success_count, failed_count, results } = response as any;
let message = `批量操作完成：\n成功 ${success_count} 个, 失败 ${failed_count} 个。\n\n`;
if (failed_count > 0) {
message += '失败详情：\n';
@ -75,7 +117,7 @@ const LocationScreen = () => {
fetchData(search);
setSelectedLocations([]);
} catch (error) {
} catch (error: any) {
console.error(error);
Alert.alert('错误', `批量操作失败: ${error.message}`);
}
@ -91,72 +133,137 @@ const LocationScreen = () => {
];
const renderItem = ({ item }: { item: Location }) => (
<View style={[styles.itemContainer, { backgroundColor: theme.colors.background }]}>
<View style={styles.itemContainer}>
<CheckBox
checked={selectedLocations.includes(item.id)}
onPress={() => toggleSelection(item.id)}
containerStyle={{ backgroundColor: 'transparent' }}
containerStyle={styles.checkboxContainer}
checkedColor="#4CAF50"
uncheckedColor="#666"
/>
<Text style={[styles.itemText, { color: theme.colors.black }]}>{item.layer_name}</Text>
<Text style={[styles.itemText, { color: item.is_occupied ? 'red' : 'green' }]}>{item.is_occupied ? '是' : '否'}</Text>
<Text style={[styles.itemText, { color: item.is_locked ? 'red' : 'green' }]}>{item.is_locked ? '是' : '否'}</Text>
<Text style={[styles.itemText, { color: item.is_empty_tray ? 'orange' : 'green' }]}>{item.is_empty_tray ? '是' : '否'}</Text>
<Text style={[styles.itemText, { color: item.is_disabled ? 'red' : 'green' }]}>{item.is_disabled ? '是' : '否'}</Text>
<Text style={styles.itemText}>{item.layer_name}</Text>
<Text
style={[
styles.itemText,
{ color: item.is_occupied ? '#F44336' : '#4CAF50' },
]}
>
{item.is_occupied ? '是' : '否'}
</Text>
<Text
style={[
styles.itemText,
{ color: item.is_locked ? '#F44336' : '#4CAF50' },
]}
>
{item.is_locked ? '是' : '否'}
</Text>
<Text
style={[
styles.itemText,
{ color: item.is_empty_tray ? '#FF9800' : '#4CAF50' },
]}
>
{item.is_empty_tray ? '是' : '否'}
</Text>
<Text
style={[
styles.itemText,
{ color: item.is_disabled ? '#F44336' : '#4CAF50' },
]}
>
{item.is_disabled ? '是' : '否'}
</Text>
</View>
);
if (loading) {
return (
<View style={styles.loader}>
<ActivityIndicator size="large" color={theme.colors.primary} />
<ActivityIndicator size="large" color="#4CAF50" />
<Text style={styles.loadingText}>加载中...</Text>
</View>
);
}
return (
<View style={[styles.container, { backgroundColor: theme.colors.grey5 }]}>
<View style={styles.searchContainer}>
<SearchBar
placeholder="搜索库位..."
onChangeText={setSearch}
value={search}
containerStyle={styles.searchBarContainer}
inputContainerStyle={{ backgroundColor: theme.colors.grey4 }}
/>
<Button title="搜索" onPress={handleSearch} buttonStyle={styles.searchButton} />
</View>
<View style={styles.container}>
<View style={styles.searchContainer}>
<SearchBar
placeholder="搜索库位..."
onChangeText={setSearch}
value={search}
containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchInputContainer}
inputStyle={styles.searchInput}
placeholderTextColor="#999"
searchIcon={{ color: '#999' }}
clearIcon={{ color: '#999' }}
/>
<Button
title="搜索"
onPress={handleSearch}
buttonStyle={styles.searchButton}
titleStyle={styles.searchButtonText}
/>
</View>
<Button
title="批量操作"
onPress={() => setOverlayVisible(true)}
containerStyle={styles.batchButtonContainer}
buttonStyle={{ backgroundColor: theme.colors.primary }}
buttonStyle={styles.batchButton}
titleStyle={styles.batchButtonText}
/>
<Overlay isVisible={isOverlayVisible} onBackdropPress={() => setOverlayVisible(false)}>
<View>
<Overlay
isVisible={isOverlayVisible}
onBackdropPress={() => setOverlayVisible(false)}
overlayStyle={styles.overlay}
>
<View style={styles.overlayContainer}>
<Text style={styles.overlayTitle}>选择操作</Text>
{actions.map((item, index) => (
<ListItem key={index} onPress={() => handleBatchUpdate(item.action)} bottomDivider>
<ListItem
key={index}
onPress={() => handleBatchUpdate(item.action)}
bottomDivider
containerStyle={styles.listItemContainer}
>
<ListItem.Content>
<ListItem.Title>{item.title}</ListItem.Title>
<ListItem.Title style={styles.listItemTitle}>
{item.title}
</ListItem.Title>
</ListItem.Content>
</ListItem>
))}
</View>
</Overlay>
<View style={[styles.headerContainer, { backgroundColor: theme.colors.grey4 }]}>
<Text style={[styles.headerText, { color: theme.colors.black }]}>库位名称</Text>
<Text style={[styles.headerText, { color: theme.colors.black }]}>是否占用</Text>
<Text style={[styles.headerText, { color: theme.colors.black }]}>是否锁定</Text>
<Text style={[styles.headerText, { color: theme.colors.black }]}>空托盘</Text>
<Text style={[styles.headerText, { color: theme.colors.black }]}>是否禁用</Text>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>库位名称</Text>
<Text style={styles.headerText}>是否占用</Text>
<Text style={styles.headerText}>是否锁定</Text>
<Text style={styles.headerText}>空托盘</Text>
<Text style={styles.headerText}>是否禁用</Text>
</View>
<FlatList
data={locations}
renderItem={renderItem}
keyExtractor={(item) => item.id}
keyExtractor={item => item.id}
ItemSeparatorComponent={() => <View style={styles.separator} />}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
colors={['#4CAF50']}
tintColor="#4CAF50"
title="下拉刷新"
titleColor="#999"
/>
}
showsVerticalScrollIndicator={false}
/>
</View>
);
@ -165,55 +272,132 @@ const LocationScreen = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#1a1a1a',
},
loader: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1a1a1a',
},
loadingText: {
color: '#999',
marginTop: 10,
fontSize: 16,
},
searchContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#2a2a2a',
paddingHorizontal: 10,
paddingVertical: 5,
},
searchBarContainer: {
flex: 1,
backgroundColor: 'transparent',
borderTopWidth: 0,
borderBottomWidth: 0,
paddingHorizontal: 0,
},
searchInputContainer: {
backgroundColor: '#333',
borderRadius: 8,
},
searchInput: {
color: '#fff',
fontSize: 16,
},
searchButton: {
marginRight: 10,
backgroundColor: '#4CAF50',
borderRadius: 8,
paddingHorizontal: 20,
paddingVertical: 12,
marginLeft: 10,
},
searchButtonText: {
color: '#fff',
fontWeight: 'bold',
},
batchButtonContainer: {
margin: 10,
margin: 15,
},
batchButton: {
backgroundColor: '#2196F3',
borderRadius: 8,
paddingVertical: 12,
},
batchButtonText: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16,
},
overlay: {
backgroundColor: '#2a2a2a',
borderRadius: 12,
padding: 0,
},
overlayContainer: {
minWidth: 250,
paddingVertical: 10,
},
overlayTitle: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
paddingVertical: 15,
borderBottomWidth: 1,
borderBottomColor: '#444',
},
listItemContainer: {
backgroundColor: 'transparent',
paddingVertical: 15,
paddingHorizontal: 20,
borderBottomColor: '#444',
},
listItemTitle: {
fontSize: 16,
textAlign: 'center',
color: '#fff',
},
itemContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 8,
paddingVertical: 12,
paddingHorizontal: 10,
backgroundColor: '#2a2a2a',
},
checkboxContainer: {
backgroundColor: 'transparent',
borderWidth: 0,
padding: 0,
marginLeft: 0,
marginRight: 5,
},
itemText: {
flex: 1,
textAlign: 'center',
fontSize: 14,
color: '#fff',
},
headerContainer: {
flexDirection: 'row',
padding: 12,
backgroundColor: '#333',
borderBottomWidth: 1,
borderBottomColor: '#ccc',
borderBottomColor: '#444',
},
headerText: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 16,
color: '#fff',
},
separator: {
height: 1,
backgroundColor: '#e0e0e0',
backgroundColor: '#333',
},
});
export default LocationScreen;
export default LocationScreen;

53
src/screens/SettingsScreen.tsx
View File

@ -24,6 +24,7 @@ export default function SettingsScreen() {
const [settings, setSettings] = useState<AppSettings>({
configFileName: '',
serverUrl: '',
taskServerUrl: '',
});
const [loading, setLoading] = useState(false);
const [configStatus, setConfigStatus] = useState<string>('未加载');
@ -251,14 +252,29 @@ export default function SettingsScreen() {
<Text style={styles.sectionTitle}>服务器设置</Text>
<View style={styles.inputGroup}>
<Text style={styles.label}>服务器地址：</Text>
<Text style={styles.label}>库位管理服务器地址：</Text>
<TextInput
style={styles.textInput}
value={settings.serverUrl}
onChangeText={text =>
setSettings(prev => ({ ...prev, serverUrl: text }))
}
placeholder="http://localhost:3000/api"
placeholder="http://192.168.189.206:8000"
placeholderTextColor="#999"
autoCapitalize="none"
keyboardType="url"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.label}>任务管理服务器地址：</Text>
<TextInput
style={styles.textInput}
value={settings.taskServerUrl}
onChangeText={text =>
setSettings(prev => ({ ...prev, taskServerUrl: text }))
}
placeholder="http://192.168.189.206:8080/jeecg-boot"
placeholderTextColor="#999"
autoCapitalize="none"
keyboardType="url"
@ -308,7 +324,7 @@ export default function SettingsScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
backgroundColor: '#1a1a1a',
},
content: {
padding: 20,
@ -318,10 +334,10 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 30,
color: '#333',
color: '#fff',
},
section: {
backgroundColor: 'white',
backgroundColor: '#2a2a2a',
borderRadius: 10,
padding: 20,
marginBottom: 20,
@ -330,7 +346,7 @@ const styles = StyleSheet.create({
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowOpacity: 0.3,
shadowRadius: 3.84,
elevation: 5,
},
@ -338,7 +354,7 @@ const styles = StyleSheet.create({
fontSize: 18,
fontWeight: 'bold',
marginBottom: 15,
color: '#333',
color: '#fff',
},
inputGroup: {
marginBottom: 15,
@ -346,7 +362,7 @@ const styles = StyleSheet.create({
label: {
fontSize: 16,
marginBottom: 8,
color: '#333',
color: '#fff',
fontWeight: '500',
},
inputRow: {
@ -356,16 +372,17 @@ const styles = StyleSheet.create({
textInput: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
borderColor: '#444',
borderRadius: 8,
padding: 12,
fontSize: 16,
backgroundColor: '#fafafa',
backgroundColor: '#333',
color: '#fff',
},
extension: {
marginLeft: 8,
fontSize: 16,
color: '#666',
color: '#999',
fontWeight: '500',
},
statusRow: {
@ -375,12 +392,12 @@ const styles = StyleSheet.create({
},
statusLabel: {
fontSize: 16,
color: '#333',
color: '#fff',
fontWeight: '500',
},
statusText: {
fontSize: 16,
color: '#007AFF',
color: '#4CAF50',
marginLeft: 8,
},
button: {
@ -418,7 +435,7 @@ const styles = StyleSheet.create({
marginTop: 10,
},
infoSection: {
backgroundColor: 'white',
backgroundColor: '#2a2a2a',
borderRadius: 10,
padding: 20,
marginBottom: 20,
@ -427,12 +444,12 @@ const styles = StyleSheet.create({
fontSize: 18,
fontWeight: 'bold',
marginBottom: 15,
color: '#333',
color: '#fff',
},
infoText: {
fontSize: 14,
lineHeight: 20,
color: '#666',
color: '#999',
marginBottom: 5,
},
loadingOverlay: {
@ -441,7 +458,7 @@ const styles = StyleSheet.create({
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
backgroundColor: 'rgba(26, 26, 26, 0.8)',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
@ -449,7 +466,7 @@ const styles = StyleSheet.create({
loadingText: {
marginTop: 10,
fontSize: 16,
color: '#007AFF',
color: '#4CAF50',
},
clearButton: {
backgroundColor: '#FF3B30',

13
src/services/api.ts
View File

@ -11,7 +11,18 @@ api.interceptors.request.use(
async config => {
const appConfig = await getConfig();
const settings = await getSettings();
const serverUrl = settings.serverUrl || appConfig?.serverUrl;
// 优先使用设置中的服务器地址，然后是配置文件中的地址
let serverUrl = '';
// 根据请求的URL判断使用哪个服务器地址
if (config.url?.includes('/task')) {
// 任务管理相关的API使用taskServerUrl
serverUrl = settings.taskServerUrl || appConfig?.taskServerUrl || '';
} else {
// 其他API使用普通的serverUrl（库位管理等）
serverUrl = settings.serverUrl || appConfig?.serverUrl || '';
}
if (!serverUrl) {
const error = new Error('服务器地址未配置');

1
src/services/configService.ts
View File

@ -8,6 +8,7 @@ const CONFIG_CACHE_KEY = 'cached_config';
const DEFAULT_SETTINGS: AppSettings = {
configFileName: 'config.json',
serverUrl: '',
taskServerUrl: '',
};
// 获取设置

1
src/types/config.ts
View File

@ -28,4 +28,5 @@ export interface AppConfig {
export interface AppSettings {
configFileName: string;
serverUrl: string;
taskServerUrl?: string; // 任务管理服务器地址
}