修改配色
This commit is contained in:
parent
d6fc9ae3e9
commit
1705ace101
|
|
@ -1,42 +1,28 @@
|
||||||
// 将Flutter的颜色值转换为React Native可用的格式
|
|
||||||
// Flutter: 0xff05dcef -> React Native: #05dcef
|
|
||||||
|
|
||||||
export const theme = {
|
export const theme = {
|
||||||
colors: {
|
colors: {
|
||||||
// 基础颜色
|
// 基础颜色
|
||||||
primary: '#4158D0', // 主色调
|
aqua: '#05DCEF', // 青色主色调 (0xff05dcef)
|
||||||
secondary: '#C850C0', // 次要色调
|
|
||||||
tertiary: '#FFCC70', // 第三色调
|
|
||||||
background: '#ffffff', // 背景色
|
background: '#ffffff', // 背景色
|
||||||
|
backgroundGray: '#F5F5F5', // 灰色背景
|
||||||
text: '#333333', // 文本颜色
|
text: '#333333', // 文本颜色
|
||||||
textLight: '#666666', // 次要文本颜色
|
textLight: '#666666', // 次要文本颜色
|
||||||
border: '#dddddd', // 边框颜色
|
border: '#dddddd', // 边框颜色
|
||||||
error: '#ff3b30', // 错误颜色
|
error: '#ff3b30', // 错误颜色
|
||||||
success: '#4cd964', // 成功颜色
|
|
||||||
warning: '#ff9500', // 警告颜色
|
|
||||||
cyan: '#00FFFF', // 青色背景
|
cyan: '#00FFFF', // 青色背景
|
||||||
|
lightGreen: '#7FFFAA', // 浅绿色
|
||||||
|
|
||||||
// 渐变色配置
|
// 渐变色配置
|
||||||
gradients: {
|
gradients: {
|
||||||
primary: ['#4158D0', '#C850C0', '#FFCC70'], // 主要渐变(蓝紫金)
|
primary: ['#05DCEF', '#7DE2F5', '#B8F2FF'], // 主要渐变(青蓝白,小清新)
|
||||||
contrast: ['#00F5A0', '#00D9F5'], // 对比渐变(绿青)
|
contrast: ['#00F5A0', '#00D9F5'], // 对比渐变(绿青)
|
||||||
card: ['#9795F0', '#E3C3F1'], // 卡片渐变(柔和紫色)
|
header: ['#05DCEF', '#7DE2F5'], // 头部渐变
|
||||||
login: ['#4158D0', '#C850C0', '#FFCC70'], // 登录页面专用渐变
|
button: ['#05DCEF', '#7DE2F5'], // 按钮渐变
|
||||||
loginWave: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.2)'], // 登录页面波浪渐变
|
|
||||||
header: ['#4158D0', '#C850C0'], // 头部渐变
|
|
||||||
button: ['#4158D0', '#C850C0'], // 按钮渐变
|
|
||||||
// 波浪背景渐变
|
|
||||||
wave: {
|
|
||||||
start: 'rgba(255, 255, 255, 0.3)',
|
|
||||||
middle: 'rgba(255, 255, 255, 0.2)',
|
|
||||||
end: 'rgba(255, 255, 255, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 图表颜色
|
// 图表颜色
|
||||||
chart: {
|
chart: {
|
||||||
blue: '#0077B6', // 深蓝色
|
cyan: '#00FFFF', // 青色
|
||||||
orange: '#FB8500', // 明亮的橙色
|
lightGreen: '#7FFFAA', // 浅绿色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -103,11 +89,7 @@ export const theme = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// 波浪效果配置
|
|
||||||
wave: {
|
|
||||||
height: 60,
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 类型定义
|
// 类型定义
|
||||||
|
|
|
||||||
|
|
@ -56,14 +56,14 @@ export const HomeScreen: React.FC = () => {
|
||||||
{
|
{
|
||||||
name: '空闲',
|
name: '空闲',
|
||||||
population: 40,
|
population: 40,
|
||||||
color: theme.colors.chart.blue,
|
color: theme.colors.chart.cyan,
|
||||||
legendFontColor: theme.colors.textLight,
|
legendFontColor: theme.colors.textLight,
|
||||||
legendFontSize: theme.fontSize.regular,
|
legendFontSize: theme.fontSize.regular,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '占用',
|
name: '占用',
|
||||||
population: 60,
|
population: 60,
|
||||||
color: theme.colors.chart.orange,
|
color: theme.colors.chart.lightGreen,
|
||||||
legendFontColor: theme.colors.textLight,
|
legendFontColor: theme.colors.textLight,
|
||||||
legendFontSize: theme.fontSize.regular,
|
legendFontSize: theme.fontSize.regular,
|
||||||
},
|
},
|
||||||
|
|
@ -77,14 +77,14 @@ export const HomeScreen: React.FC = () => {
|
||||||
|
|
||||||
if (!fontLoaded) {
|
if (!fontLoaded) {
|
||||||
return (
|
return (
|
||||||
<View style={[styles.loadingContainer, { backgroundColor: theme.colors.background }]}>
|
<View style={[styles.loadingContainer, { backgroundColor: theme.colors.backgroundGray }]}>
|
||||||
<Text style={{ color: theme.colors.text }}>加载图标中...</Text>
|
<Text style={{ color: theme.colors.text }}>加载图标中...</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
|
<SafeAreaView style={[styles.container, { backgroundColor: theme.colors.backgroundGray }]}>
|
||||||
{/* 头部区域 */}
|
{/* 头部区域 */}
|
||||||
<View style={styles.headerSection}>
|
<View style={styles.headerSection}>
|
||||||
{/* 渐变背景 */}
|
{/* 渐变背景 */}
|
||||||
|
|
@ -141,7 +141,7 @@ export const HomeScreen: React.FC = () => {
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 主体内容 */}
|
{/* 主体内容 */}
|
||||||
<View style={[styles.mainContent, { backgroundColor: '#FFFFFF' }]}>
|
<View style={[styles.mainContent, { backgroundColor: theme.colors.backgroundGray }]}>
|
||||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||||
{/* 快捷操作区 */}
|
{/* 快捷操作区 */}
|
||||||
<View style={styles.quickActions}>
|
<View style={styles.quickActions}>
|
||||||
|
|
@ -210,7 +210,7 @@ export const HomeScreen: React.FC = () => {
|
||||||
navigation.navigate(item.route);
|
navigation.navigate(item.route);
|
||||||
}}>
|
}}>
|
||||||
<View style={styles.drawerIconContainer}>
|
<View style={styles.drawerIconContainer}>
|
||||||
<Icon name={item.icon} size={28} color={theme.colors.primary} />
|
<Icon name={item.icon} size={28} color={theme.colors.aqua} />
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.drawerItemText, { color: theme.colors.text }]}>
|
<Text style={[styles.drawerItemText, { color: theme.colors.text }]}>
|
||||||
{item.title}
|
{item.title}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import {
|
||||||
SafeAreaView,
|
SafeAreaView,
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import {httpService} from '../../services/http';
|
|
||||||
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
|
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
|
||||||
import {useNavigation} from '@react-navigation/native';
|
import {useNavigation} from '@react-navigation/native';
|
||||||
import {RootStackParamList} from '../../navigation/types';
|
import {RootStackParamList} from '../../navigation/types';
|
||||||
|
|
@ -17,11 +16,15 @@ import {useTheme} from '../../contexts/ThemeContext';
|
||||||
import Icon from 'react-native-vector-icons/MaterialIcons';
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||||||
import LinearGradient from 'react-native-linear-gradient';
|
import LinearGradient from 'react-native-linear-gradient';
|
||||||
import Svg, {Path} from 'react-native-svg';
|
import Svg, {Path} from 'react-native-svg';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
interface StockInEmptyResponse {
|
interface StockInEmptyResponse {
|
||||||
code: number;
|
code: number;
|
||||||
message: string;
|
message: string;
|
||||||
data: string;
|
data: {
|
||||||
|
code: number;
|
||||||
|
message: string;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
type StockInEmptyScreenNavigationProp = NativeStackNavigationProp<
|
type StockInEmptyScreenNavigationProp = NativeStackNavigationProp<
|
||||||
|
|
@ -46,22 +49,19 @@ export const StockInEmpty: React.FC = () => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const response = await httpService.post<StockInEmptyResponse>(
|
const response = await axios.post<StockInEmptyResponse>(
|
||||||
'/api/vehicle/empty-in',
|
'/api/vehicle/empty-in',
|
||||||
{vehicleNo: vehicleNo.trim()}
|
{vehicleNo: vehicleNo.trim()}
|
||||||
);
|
);
|
||||||
|
|
||||||
if (response.code !== 200) {
|
if (response.status !== 200) {
|
||||||
Alert.alert('警告', '服务器请求失败', [
|
Alert.alert('警告', '服务器请求失败', [
|
||||||
{text: '我知道了', style: 'cancel'},
|
{text: '我知道了', style: 'cancel'},
|
||||||
]);
|
]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确保response.data是字符串类型
|
const responseData = response.data;
|
||||||
const responseData = typeof response.data === 'string'
|
|
||||||
? JSON.parse(response.data)
|
|
||||||
: response.data;
|
|
||||||
|
|
||||||
if (responseData.code === 200) {
|
if (responseData.code === 200) {
|
||||||
Alert.alert('成功', '', [
|
Alert.alert('成功', '', [
|
||||||
|
|
@ -74,7 +74,7 @@ export const StockInEmpty: React.FC = () => {
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Alert.alert('请求发生错误', `请求服务器发生错误:${error}`, [
|
Alert.alert('请求发生错误', `请求服务器发生错误:${error instanceof Error ? error.message : String(error)}`, [
|
||||||
{text: '我知道了', style: 'cancel'},
|
{text: '我知道了', style: 'cancel'},
|
||||||
]);
|
]);
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -86,7 +86,7 @@ export const StockInEmpty: React.FC = () => {
|
||||||
<SafeAreaView style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
<SafeAreaView style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
||||||
{/* 头部导航栏 */}
|
{/* 头部导航栏 */}
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[theme.colors.primary, theme.colors.secondary, theme.colors.tertiary]}
|
colors={theme.colors.gradients.primary}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
style={styles.header}>
|
style={styles.header}>
|
||||||
|
|
@ -108,23 +108,17 @@ export const StockInEmpty: React.FC = () => {
|
||||||
style={styles.waveSvg}
|
style={styles.waveSvg}
|
||||||
preserveAspectRatio="none">
|
preserveAspectRatio="none">
|
||||||
<Path
|
<Path
|
||||||
fill={`${theme.colors.tertiary}40`}
|
fill={`${theme.colors.aqua}30`}
|
||||||
d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
||||||
/>
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 主体内容 */}
|
{/* 主体内容 */}
|
||||||
<View style={styles.content}>
|
<View style={[styles.content, { backgroundColor: theme.colors.backgroundGray }]}>
|
||||||
<LinearGradient
|
|
||||||
colors={theme.colors.gradients.contrast}
|
|
||||||
style={StyleSheet.absoluteFill}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 0}}
|
|
||||||
/>
|
|
||||||
{/* 说明文字 */}
|
{/* 说明文字 */}
|
||||||
<View style={[styles.infoSection, {backgroundColor: `${theme.colors.primary}15`}]}>
|
<View style={[styles.infoSection, {backgroundColor: `${theme.colors.aqua}15`}]}>
|
||||||
<Icon name="info-outline" size={24} color={theme.colors.primary} />
|
<Icon name="info-outline" size={24} color={theme.colors.aqua} />
|
||||||
<Text style={[styles.infoText, {color: theme.colors.text}]}>
|
<Text style={[styles.infoText, {color: theme.colors.text}]}>
|
||||||
请扫描或输入载具号进行空载具入库操作
|
请扫描或输入载具号进行空载具入库操作
|
||||||
</Text>
|
</Text>
|
||||||
|
|
@ -139,7 +133,7 @@ export const StockInEmpty: React.FC = () => {
|
||||||
borderColor: theme.colors.border,
|
borderColor: theme.colors.border,
|
||||||
backgroundColor: `${theme.colors.background}CC`,
|
backgroundColor: `${theme.colors.background}CC`,
|
||||||
}]}>
|
}]}>
|
||||||
<Icon name="qr-code-scanner" size={24} color={theme.colors.primary} style={styles.inputIcon} />
|
<Icon name="qr-code-scanner" size={24} color={theme.colors.aqua} style={styles.inputIcon} />
|
||||||
<TextInput
|
<TextInput
|
||||||
style={[styles.input, {color: theme.colors.text}]}
|
style={[styles.input, {color: theme.colors.text}]}
|
||||||
value={vehicleNo}
|
value={vehicleNo}
|
||||||
|
|
@ -160,7 +154,7 @@ export const StockInEmpty: React.FC = () => {
|
||||||
|
|
||||||
{/* 提交按钮 */}
|
{/* 提交按钮 */}
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[theme.colors.primary, theme.colors.secondary]}
|
colors={theme.colors.gradients.button}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
style={[styles.submitButton, loading && styles.submitButtonDisabled]}>
|
style={[styles.submitButton, loading && styles.submitButtonDisabled]}>
|
||||||
|
|
|
||||||
|
|
@ -42,9 +42,6 @@ const StockInWheelManual: React.FC = () => {
|
||||||
const [packageData, setPackageData] = useState<PackageDataItem[]>([]);
|
const [packageData, setPackageData] = useState<PackageDataItem[]>([]);
|
||||||
const [packageDataId, setPackageDataId] = useState(0);
|
const [packageDataId, setPackageDataId] = useState(0);
|
||||||
const [lastProcessedVehicleCode, setLastProcessedVehicleCode] = useState('');
|
const [lastProcessedVehicleCode, setLastProcessedVehicleCode] = useState('');
|
||||||
const [areaID, setAreaID] = useState('有卤');
|
|
||||||
const [status, setStatus] = useState('合格');
|
|
||||||
const [factory, setFactory] = useState('二厂');
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const vehicleInputRef = useRef<TextInput>(null);
|
const vehicleInputRef = useRef<TextInput>(null);
|
||||||
|
|
@ -176,15 +173,9 @@ const StockInWheelManual: React.FC = () => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const areaIDIndex = areaID === '有卤' ? 1 : 2;
|
const areaIDIndex = 1; // 默认有卤
|
||||||
const factoryIndex = factory === '二厂' ? 2 : 3;
|
const factoryIndex = 2; // 默认二厂
|
||||||
const statusIndex = {
|
const statusIndex = 1; // 默认合格
|
||||||
合格: 1,
|
|
||||||
不合格: 2,
|
|
||||||
封存: 3,
|
|
||||||
待检: 4,
|
|
||||||
进口物料: 5,
|
|
||||||
}[status] || 1;
|
|
||||||
|
|
||||||
const confirm = await new Promise(resolve =>
|
const confirm = await new Promise(resolve =>
|
||||||
Alert.alert(
|
Alert.alert(
|
||||||
|
|
@ -239,11 +230,11 @@ const StockInWheelManual: React.FC = () => {
|
||||||
<View style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
<View style={[styles.container, {backgroundColor: theme.colors.background}]}>
|
||||||
{/* 头部导航栏 */}
|
{/* 头部导航栏 */}
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[theme.colors.primary, theme.colors.secondary, theme.colors.tertiary]}
|
colors={theme.colors.gradients.primary}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
style={styles.header}>
|
style={styles.header}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.backButton}
|
style={styles.backButton}
|
||||||
onPress={() => navigation.goBack()}>
|
onPress={() => navigation.goBack()}>
|
||||||
<Icon name="arrow-back" size={24} color={theme.colors.background} />
|
<Icon name="arrow-back" size={24} color={theme.colors.background} />
|
||||||
|
|
@ -263,23 +254,17 @@ const StockInWheelManual: React.FC = () => {
|
||||||
style={styles.waveSvg}
|
style={styles.waveSvg}
|
||||||
preserveAspectRatio="none">
|
preserveAspectRatio="none">
|
||||||
<Path
|
<Path
|
||||||
fill={`${theme.colors.tertiary}40`}
|
fill={`${theme.colors.aqua}30`}
|
||||||
d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
||||||
/>
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={styles.mainContent}>
|
<View style={[styles.mainContent, { backgroundColor: theme.colors.backgroundGray }]}>
|
||||||
<LinearGradient
|
|
||||||
colors={theme.colors.gradients.contrast}
|
|
||||||
style={StyleSheet.absoluteFill}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 0}}
|
|
||||||
/>
|
|
||||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||||
{/* 信息提示区 */}
|
{/* 信息提示区 */}
|
||||||
<View style={[styles.infoSection, {backgroundColor: `${theme.colors.primary}15`}]}>
|
<View style={[styles.infoSection, {backgroundColor: `${theme.colors.aqua}15`}]}>
|
||||||
<Icon name="info-outline" size={24} color={theme.colors.primary} />
|
<Icon name="info-outline" size={24} color={theme.colors.aqua} />
|
||||||
<Text style={[styles.infoText, {color: theme.colors.text}]}>
|
<Text style={[styles.infoText, {color: theme.colors.text}]}>
|
||||||
请先扫描载具号,然后添加物料信息进行码盘入库
|
请先扫描载具号,然后添加物料信息进行码盘入库
|
||||||
</Text>
|
</Text>
|
||||||
|
|
@ -292,7 +277,7 @@ const StockInWheelManual: React.FC = () => {
|
||||||
borderColor: theme.colors.border,
|
borderColor: theme.colors.border,
|
||||||
backgroundColor: `${theme.colors.background}CC`,
|
backgroundColor: `${theme.colors.background}CC`,
|
||||||
}]}>
|
}]}>
|
||||||
<Icon name="qr-code-scanner" size={24} color={theme.colors.primary} style={styles.inputIcon} />
|
<Icon name="qr-code-scanner" size={24} color={theme.colors.aqua} style={styles.inputIcon} />
|
||||||
<TextInput
|
<TextInput
|
||||||
ref={vehicleInputRef}
|
ref={vehicleInputRef}
|
||||||
style={[styles.input, {color: theme.colors.text}]}
|
style={[styles.input, {color: theme.colors.text}]}
|
||||||
|
|
@ -318,7 +303,7 @@ const StockInWheelManual: React.FC = () => {
|
||||||
borderColor: theme.colors.border,
|
borderColor: theme.colors.border,
|
||||||
backgroundColor: `${theme.colors.background}CC`,
|
backgroundColor: `${theme.colors.background}CC`,
|
||||||
}]}>
|
}]}>
|
||||||
<Icon name="qr-code-2" size={24} color={theme.colors.primary} style={styles.inputIcon} />
|
<Icon name="qr-code-2" size={24} color={theme.colors.aqua} style={styles.inputIcon} />
|
||||||
<TextInput
|
<TextInput
|
||||||
ref={goodsInputRef}
|
ref={goodsInputRef}
|
||||||
style={[styles.input, {color: theme.colors.text}]}
|
style={[styles.input, {color: theme.colors.text}]}
|
||||||
|
|
@ -337,126 +322,10 @@ const StockInWheelManual: React.FC = () => {
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 选项区域 */}
|
|
||||||
<View style={styles.optionsContainer}>
|
|
||||||
{/* 区域选择 */}
|
|
||||||
<View style={styles.optionGroup}>
|
|
||||||
<Text style={[styles.optionLabel, {color: theme.colors.text}]}>区域</Text>
|
|
||||||
<View style={styles.radioGroup}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.radioButton,
|
|
||||||
{borderColor: theme.colors.border},
|
|
||||||
areaID === '有卤' && styles.radioButtonActive,
|
|
||||||
areaID === '有卤' && {backgroundColor: theme.colors.primary},
|
|
||||||
]}
|
|
||||||
onPress={() => setAreaID('有卤')}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.radioText,
|
|
||||||
{color: theme.colors.text},
|
|
||||||
areaID === '有卤' && {color: theme.colors.background},
|
|
||||||
]}>
|
|
||||||
有卤
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.radioButton,
|
|
||||||
{borderColor: theme.colors.border},
|
|
||||||
areaID === '无卤' && styles.radioButtonActive,
|
|
||||||
areaID === '无卤' && {backgroundColor: theme.colors.primary},
|
|
||||||
]}
|
|
||||||
onPress={() => setAreaID('无卤')}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.radioText,
|
|
||||||
{color: theme.colors.text},
|
|
||||||
areaID === '无卤' && {color: theme.colors.background},
|
|
||||||
]}>
|
|
||||||
无卤
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 工厂选择 */}
|
|
||||||
<View style={styles.optionGroup}>
|
|
||||||
<Text style={[styles.optionLabel, {color: theme.colors.text}]}>工厂</Text>
|
|
||||||
<View style={styles.radioGroup}>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.radioButton,
|
|
||||||
{borderColor: theme.colors.border},
|
|
||||||
factory === '二厂' && styles.radioButtonActive,
|
|
||||||
factory === '二厂' && {backgroundColor: theme.colors.primary},
|
|
||||||
]}
|
|
||||||
onPress={() => setFactory('二厂')}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.radioText,
|
|
||||||
{color: theme.colors.text},
|
|
||||||
factory === '二厂' && {color: theme.colors.background},
|
|
||||||
]}>
|
|
||||||
二厂
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.radioButton,
|
|
||||||
{borderColor: theme.colors.border},
|
|
||||||
factory === '三厂' && styles.radioButtonActive,
|
|
||||||
factory === '三厂' && {backgroundColor: theme.colors.primary},
|
|
||||||
]}
|
|
||||||
onPress={() => setFactory('三厂')}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.radioText,
|
|
||||||
{color: theme.colors.text},
|
|
||||||
factory === '三厂' && {color: theme.colors.background},
|
|
||||||
]}>
|
|
||||||
三厂
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 状态选择 - 改为与区域、工厂相同的样式 */}
|
|
||||||
<View style={styles.optionGroup}>
|
|
||||||
<Text style={[styles.optionLabel, {color: theme.colors.text}]}>状态</Text>
|
|
||||||
<View style={styles.radioGroup}>
|
|
||||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
|
||||||
<View style={styles.radioGroup}>
|
|
||||||
{['合格', '不合格', '封存', '待检', '进口物料'].map((item) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={item}
|
|
||||||
style={[
|
|
||||||
styles.radioButton,
|
|
||||||
{borderColor: theme.colors.border},
|
|
||||||
status === item && styles.radioButtonActive,
|
|
||||||
status === item && {backgroundColor: theme.colors.primary},
|
|
||||||
]}
|
|
||||||
onPress={() => setStatus(item)}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.radioText,
|
|
||||||
{color: theme.colors.text},
|
|
||||||
status === item && {color: theme.colors.background},
|
|
||||||
]}>
|
|
||||||
{item}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 操作按钮区 */}
|
{/* 操作按钮区 */}
|
||||||
<View style={styles.buttonGroup}>
|
<View style={styles.buttonGroup}>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[theme.colors.primary, theme.colors.secondary]}
|
colors={theme.colors.gradients.button}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
style={styles.button}>
|
style={styles.button}>
|
||||||
|
|
@ -471,7 +340,7 @@ const StockInWheelManual: React.FC = () => {
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
|
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[theme.colors.success, theme.colors.secondary]}
|
colors={theme.colors.gradients.button}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
style={styles.button}>
|
style={styles.button}>
|
||||||
|
|
@ -489,37 +358,32 @@ const StockInWheelManual: React.FC = () => {
|
||||||
{/* 物料列表 */}
|
{/* 物料列表 */}
|
||||||
<View style={styles.tableContainer}>
|
<View style={styles.tableContainer}>
|
||||||
<View style={styles.tableHeader}>
|
<View style={styles.tableHeader}>
|
||||||
<Icon name="list-alt" size={24} color={theme.colors.primary} />
|
<Icon name="list-alt" size={24} color={theme.colors.aqua} />
|
||||||
<Text style={[styles.tableTitle, {color: theme.colors.text}]}>
|
<Text style={[styles.tableTitle, {color: theme.colors.text}]}>
|
||||||
已添加物料 ({packageData.length})
|
已添加物料 ({packageData.length})
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{packageData.map((item, index) => (
|
{packageData.map((item) => (
|
||||||
<View
|
<View
|
||||||
key={item.id}
|
key={item.id}
|
||||||
style={[styles.card]}>
|
style={[styles.card]}>
|
||||||
<LinearGradient
|
<View style={[StyleSheet.absoluteFill, {borderRadius: 12, backgroundColor: theme.colors.background}]} />
|
||||||
colors={theme.colors.gradients.contrast}
|
|
||||||
style={[StyleSheet.absoluteFill, {borderRadius: 12}]}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 0}}
|
|
||||||
/>
|
|
||||||
{/* 卡片头部 */}
|
{/* 卡片头部 */}
|
||||||
<View style={styles.cardHeader}>
|
<View style={styles.cardHeader}>
|
||||||
<View style={styles.cardHeaderLeft}>
|
<View style={styles.cardHeaderLeft}>
|
||||||
<Text style={[styles.cardHeaderText, {color: theme.colors.background}]}>
|
<Text style={[styles.cardHeaderText, {color: theme.colors.text}]}>
|
||||||
序号:{item.id}
|
序号:{item.id}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.cardHeaderText, {color: theme.colors.background}]}>
|
<Text style={[styles.cardHeaderText, {color: theme.colors.text}]}>
|
||||||
采购单号:{item.segment1}
|
采购单号:{item.segment1}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.cardActions}>
|
<View style={styles.cardActions}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.cardActionButton, {backgroundColor: `${theme.colors.primary}15`}]}
|
style={[styles.cardActionButton, {backgroundColor: `${theme.colors.aqua}15`}]}
|
||||||
onPress={() => showDetails(item)}>
|
onPress={() => showDetails(item)}>
|
||||||
<Icon name="info-outline" size={20} color={theme.colors.primary} />
|
<Icon name="info-outline" size={20} color={theme.colors.aqua} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.cardActionButton, {backgroundColor: `${theme.colors.error}15`}]}
|
style={[styles.cardActionButton, {backgroundColor: `${theme.colors.error}15`}]}
|
||||||
|
|
@ -533,37 +397,37 @@ const StockInWheelManual: React.FC = () => {
|
||||||
<View style={styles.cardContent}>
|
<View style={styles.cardContent}>
|
||||||
<View style={styles.cardRow}>
|
<View style={styles.cardRow}>
|
||||||
<View style={styles.cardField}>
|
<View style={styles.cardField}>
|
||||||
<Text style={[styles.cardLabel, {color: theme.colors.background}]}>物料号</Text>
|
<Text style={[styles.cardLabel, {color: theme.colors.textLight}]}>物料号</Text>
|
||||||
<Text style={[styles.cardValue, {color: theme.colors.background}]}>{item.itemId}</Text>
|
<Text style={[styles.cardValue, {color: theme.colors.text}]}>{item.itemId}</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.cardField}>
|
<View style={styles.cardField}>
|
||||||
<Text style={[styles.cardLabel, {color: theme.colors.background}]}>批次号</Text>
|
<Text style={[styles.cardLabel, {color: theme.colors.textLight}]}>批次号</Text>
|
||||||
<Text style={[styles.cardValue, {color: theme.colors.background}]}>{item.batch}</Text>
|
<Text style={[styles.cardValue, {color: theme.colors.text}]}>{item.batch}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={styles.cardRow}>
|
<View style={styles.cardRow}>
|
||||||
<View style={styles.cardField}>
|
<View style={styles.cardField}>
|
||||||
<Text style={[styles.cardLabel, {color: theme.colors.background}]}>数量</Text>
|
<Text style={[styles.cardLabel, {color: theme.colors.textLight}]}>数量</Text>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.editableValue}
|
style={styles.editableValue}
|
||||||
onPress={() => modifyNumber(item.id)}>
|
onPress={() => modifyNumber(item.id)}>
|
||||||
<Text style={[styles.cardValue, {color: theme.colors.background}]}>
|
<Text style={[styles.cardValue, {color: theme.colors.text}]}>
|
||||||
{item.quantity}
|
{item.quantity}
|
||||||
</Text>
|
</Text>
|
||||||
<Icon name="edit" size={16} color={theme.colors.background} />
|
<Icon name="edit" size={16} color={theme.colors.text} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.cardField}>
|
<View style={styles.cardField}>
|
||||||
<Text style={[styles.cardLabel, {color: theme.colors.background}]}>重量</Text>
|
<Text style={[styles.cardLabel, {color: theme.colors.textLight}]}>重量</Text>
|
||||||
<Text style={[styles.cardValue, {color: theme.colors.background}]}>{item.weight}</Text>
|
<Text style={[styles.cardValue, {color: theme.colors.text}]}>{item.weight}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={styles.cardRow}>
|
<View style={styles.cardRow}>
|
||||||
<View style={styles.cardField}>
|
<View style={styles.cardField}>
|
||||||
<Text style={[styles.cardLabel, {color: theme.colors.background}]}>生产日期</Text>
|
<Text style={[styles.cardLabel, {color: theme.colors.textLight}]}>生产日期</Text>
|
||||||
<Text style={[styles.cardValue, {color: theme.colors.background}]}>{item.productData}</Text>
|
<Text style={[styles.cardValue, {color: theme.colors.text}]}>{item.productData}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
@ -576,7 +440,7 @@ const StockInWheelManual: React.FC = () => {
|
||||||
{loading && (
|
{loading && (
|
||||||
<View style={[styles.loadingOverlay, {backgroundColor: 'rgba(0, 0, 0, 0.7)'}]}>
|
<View style={[styles.loadingOverlay, {backgroundColor: 'rgba(0, 0, 0, 0.7)'}]}>
|
||||||
<View style={[styles.loadingCard, {backgroundColor: theme.colors.background}]}>
|
<View style={[styles.loadingCard, {backgroundColor: theme.colors.background}]}>
|
||||||
<ActivityIndicator size="large" color={theme.colors.primary} />
|
<ActivityIndicator size="large" color={theme.colors.aqua} />
|
||||||
<Text style={[styles.loadingText, {color: theme.colors.text}]}>
|
<Text style={[styles.loadingText, {color: theme.colors.text}]}>
|
||||||
正在请求入库...
|
正在请求入库...
|
||||||
</Text>
|
</Text>
|
||||||
|
|
@ -675,36 +539,7 @@ const styles = StyleSheet.create({
|
||||||
clearButton: {
|
clearButton: {
|
||||||
padding: 4,
|
padding: 4,
|
||||||
},
|
},
|
||||||
optionsContainer: {
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
optionGroup: {
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
optionLabel: {
|
|
||||||
fontSize: 16,
|
|
||||||
marginBottom: 8,
|
|
||||||
fontWeight: '500',
|
|
||||||
},
|
|
||||||
radioGroup: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
gap: 12,
|
|
||||||
},
|
|
||||||
radioButton: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderRadius: 8,
|
|
||||||
paddingVertical: 8,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
minWidth: 80,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
radioButtonActive: {
|
|
||||||
borderColor: 'transparent',
|
|
||||||
},
|
|
||||||
radioText: {
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: '500',
|
|
||||||
},
|
|
||||||
buttonGroup: {
|
buttonGroup: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
gap: 12,
|
gap: 12,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user