|
|
@@ -0,0 +1,401 @@
|
|
|
+/**
|
|
|
+ * 添加/编辑 Vehicle页面
|
|
|
+ * @邠心vbe on 2024/01/30
|
|
|
+ */
|
|
|
+import React, { Component } from 'react';
|
|
|
+import { View, Text, StyleSheet, TextInput, Image, Pressable, ScrollView } from 'react-native';
|
|
|
+import Dialog from '../../components/Dialog';
|
|
|
+import apiUser from '../../api/apiUser';
|
|
|
+import TextView from '../../components/TextView';
|
|
|
+import Dropdown from '../../components/Dropdown';
|
|
|
+import { TypeImageList } from '../chargeV2/Charging';
|
|
|
+import ImageCropPicker from 'react-native-image-crop-picker';
|
|
|
+import { UploadThemes } from '../../components/ThemesConfig';
|
|
|
+import apiUpload from '../../api/apiUpload';
|
|
|
+
|
|
|
+const options = {
|
|
|
+ width: 300,
|
|
|
+ height: 300,
|
|
|
+ cropping: true,
|
|
|
+ multiple: false,
|
|
|
+ mediaType: 'photo',
|
|
|
+ writeTempFile: false,
|
|
|
+ compressImageQuality: 0.8,
|
|
|
+ compressImageMaxWidth: 720,
|
|
|
+ compressImageMaxHeight: 1280,
|
|
|
+ ...UploadThemes
|
|
|
+}
|
|
|
+
|
|
|
+export default class VehicleDetail extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ isEdit: false,
|
|
|
+ vehicleInfo: {
|
|
|
+ brand: "",
|
|
|
+ model: "",
|
|
|
+ connectorType: ""
|
|
|
+ },
|
|
|
+ brandOptions: [],
|
|
|
+ modelOptions: [],
|
|
|
+ typeOptions: []
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this.getBrandOptions();
|
|
|
+ const params = this.props.route.params;
|
|
|
+ if (params.id) {
|
|
|
+ this.setState({
|
|
|
+ isEdit: true
|
|
|
+ })
|
|
|
+ Dialog.showProgressDialog();
|
|
|
+ this.getVehicleData(params.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getBrandOptions() {
|
|
|
+ apiUser.getVehicleBrandList().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.setState({
|
|
|
+ brandOptions: res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort(err)
|
|
|
+ });
|
|
|
+ const types = []
|
|
|
+ TypeImageList.forEach((item, index) => {
|
|
|
+ types.push(item.name);
|
|
|
+ })
|
|
|
+ this.setState({
|
|
|
+ typeOptions: types
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ getModelOptions() {
|
|
|
+ console.log("getModelOptions", this.state.vehicleInfo);
|
|
|
+ if (this.state.vehicleInfo.brand) {
|
|
|
+ apiUser.getVehicleModelByBrand({
|
|
|
+ brand: this.state.vehicleInfo.brand
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.setState({
|
|
|
+ modelOptions: res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ toastShort(err)
|
|
|
+ this.setState({
|
|
|
+ modelOptions: []
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ modelOptions: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getVehicleData(id) {
|
|
|
+ apiUser.getVehicleById({
|
|
|
+ vehiclePk: id
|
|
|
+ }).then(res => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ if (res.data) {
|
|
|
+ const info = res.data;
|
|
|
+ this.setState({
|
|
|
+ vehicleInfo: info
|
|
|
+ }, () => {
|
|
|
+ this.getModelOptions();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort(err)
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ changeForm(key, value) {
|
|
|
+ const form = {
|
|
|
+ ...this.state.vehicleInfo
|
|
|
+ }
|
|
|
+ form[key] = value;
|
|
|
+ this.setState({
|
|
|
+ vehicleInfo: form
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ uploadImage() {
|
|
|
+ ImageCropPicker.openPicker({
|
|
|
+ ...options,
|
|
|
+ cropperToolbarTitle: $t('common.cropperTitle')
|
|
|
+ }).then(image => {
|
|
|
+ if (image.path) {
|
|
|
+ apiUpload.uploadImage(image.path, image.mime, 'PDVL').then(res => {
|
|
|
+ if (res.success && res.data.picturePath) {
|
|
|
+ this.changeForm("vehiclePhoto", res.data.picturePath)
|
|
|
+ toastShort($t('common.uploadSuccess'));
|
|
|
+ } else {
|
|
|
+ toastShort($t('common.uploadFailed'));
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ toastShort(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err1 => {
|
|
|
+ //console.log(err1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ validate() {
|
|
|
+ if (!this.state.vehicleInfo.brand) {
|
|
|
+ toastShort($t('profile.msgSelectBrand'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.state.vehicleInfo.vehicleModelId) {
|
|
|
+ toastShort($t('profile.msgSelectModel'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.state.vehicleInfo.licensePlate) {
|
|
|
+ toastShort($t('profile.msgInputPlate'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.state.vehicleInfo.batteryCapacity) {
|
|
|
+ toastShort($t('profile.msgInputBatCap'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.state.vehicleInfo.connectorType) {
|
|
|
+ toastShort($t('profile.msgSelectType'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.state.vehicleInfo.vehiclePhoto) {
|
|
|
+ toastShort($t('profile.msgVehiclePhoto'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.state.isEdit) {
|
|
|
+ this.updateVehicle(this.state.vehicleInfo)
|
|
|
+ } else {
|
|
|
+ this.addVehicle(this.state.vehicleInfo)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ addVehicle(params) {
|
|
|
+ Dialog.showProgressDialog();
|
|
|
+ apiUser.addVehicle(params).then(res => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort($t('common.addSuccess'));
|
|
|
+ goBack();
|
|
|
+ }).catch((err) => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ updateVehicle(params) {
|
|
|
+ Dialog.showProgressDialog();
|
|
|
+ apiUser.updateVehicle(params).then(res => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort($t('common.updateSuccess'));
|
|
|
+ goBack();
|
|
|
+ }).catch((err) => {
|
|
|
+ Dialog.dismissLoading();
|
|
|
+ toastShort(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <ScrollView
|
|
|
+ style={styles.container}
|
|
|
+ contentContainerStyle={$padding(16)}>
|
|
|
+ <View style={ui.flexc}>
|
|
|
+ <MaterialCommunityIcons
|
|
|
+ name="form-dropdown"
|
|
|
+ size={20}
|
|
|
+ color={textPrimary}
|
|
|
+ style={ui.bold}
|
|
|
+ />
|
|
|
+ <TextView style={styles.titleText}>{$t('profile.vehicleBrand')}</TextView>
|
|
|
+ </View>
|
|
|
+ <Dropdown
|
|
|
+ style={styles.formDropdown}
|
|
|
+ list={this.state.brandOptions}
|
|
|
+ placeholder={$t('profile.selectBrand')}
|
|
|
+ title={$t('profile.vehicleBrand')}
|
|
|
+ value={this.state.vehicleInfo.brand}
|
|
|
+ autoSelect={false}
|
|
|
+ onChange={value => {
|
|
|
+ this.changeForm("brand", value);
|
|
|
+ this.getModelOptions();
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Dropdown
|
|
|
+ style={styles.formDropdown}
|
|
|
+ list={this.state.modelOptions}
|
|
|
+ placeholder={$t('profile.selectModel')}
|
|
|
+ title={$t('profile.vehicleModel')}
|
|
|
+ value={this.state.vehicleInfo.vehicleModelId}
|
|
|
+ valueKey={"vehicleModelId"}
|
|
|
+ nameKey={"model"}
|
|
|
+ autoSelect={true}
|
|
|
+ onChange={value => this.changeForm("vehicleModelId", value)}
|
|
|
+ />
|
|
|
+ <TextInput
|
|
|
+ style={styles.formInput}
|
|
|
+ defaultValue={this.state.vehicleInfo.licensePlate}
|
|
|
+ placeholder={$t('profile.enterLicensePlate')}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ maxLength={20}
|
|
|
+ onChangeText={text => this.changeForm("licensePlate", text)}
|
|
|
+ />
|
|
|
+ <View style={styles.formInputRow}>
|
|
|
+ <TextInput
|
|
|
+ style={styles.itemInput}
|
|
|
+ defaultValue={this.state.vehicleInfo.batteryCapacity}
|
|
|
+ placeholder={$t('profile.enterBatteryCapacity')}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ maxLength={20}
|
|
|
+ keyboardType='decimal-pad'
|
|
|
+ onChangeText={text => this.changeForm("batteryCapacity", text)}
|
|
|
+ />
|
|
|
+ <TextView style={styles.titleText}>kWh</TextView>
|
|
|
+ </View>
|
|
|
+ <View style={ui.flexc}>
|
|
|
+ <MaterialCommunityIcons
|
|
|
+ name="form-dropdown"
|
|
|
+ size={20}
|
|
|
+ color={textPrimary}
|
|
|
+ style={ui.bold}
|
|
|
+ />
|
|
|
+ <TextView style={styles.titleText}>{$t('profile.connecterType')}</TextView>
|
|
|
+ </View>
|
|
|
+ <Dropdown
|
|
|
+ style={styles.formDropdown}
|
|
|
+ list={this.state.typeOptions}
|
|
|
+ placeholder={$t('profile.selectConnecterType')}
|
|
|
+ title={$t('profile.connecterType')}
|
|
|
+ value={this.state.vehicleInfo.connectorType}
|
|
|
+ onChange={value => this.changeForm("connectorType", value)}
|
|
|
+ autoSelect={false}
|
|
|
+ />
|
|
|
+ <View style={ui.flexc}>
|
|
|
+ <MaterialCommunityIcons
|
|
|
+ name="tray-arrow-up"
|
|
|
+ size={20}
|
|
|
+ color={textPrimary}
|
|
|
+ style={ui.bold}
|
|
|
+ />
|
|
|
+ <TextView style={styles.titleText}>{$t('profile.plsUploadImageCar')}</TextView>
|
|
|
+ </View>
|
|
|
+ <View style={styles.uploadGroup}>
|
|
|
+ { this.state.vehicleInfo.vehiclePhoto
|
|
|
+ ? <Pressable
|
|
|
+ onPress={() => this.uploadImage()}>
|
|
|
+ <Image
|
|
|
+ style={styles.uploadImage}
|
|
|
+ source={{uri: this.state.vehicleInfo.vehiclePhoto}}
|
|
|
+ />
|
|
|
+ </Pressable>
|
|
|
+ : <Pressable
|
|
|
+ style={styles.uploadView}
|
|
|
+ onPress={() => this.uploadImage()}>
|
|
|
+ <MaterialCommunityIcons
|
|
|
+ name="tray-arrow-up"
|
|
|
+ size={32}
|
|
|
+ color={textCancel}
|
|
|
+ style={ui.bold}
|
|
|
+ />
|
|
|
+ <TextView style={styles.uploadTitle}>{$t('profile.selectUpload')}</TextView>
|
|
|
+ <TextView style={styles.uploadDesc}>{$t('profile.max4mbPhoto')}</TextView>
|
|
|
+ </Pressable>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View style={styles.buttonView}>
|
|
|
+ <Button
|
|
|
+ text={$t('common.save')}
|
|
|
+ elevation={1.5}
|
|
|
+ onClick={() => {
|
|
|
+ this.validate();
|
|
|
+ }}/>
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ container: {
|
|
|
+ flex: 1
|
|
|
+ },
|
|
|
+ titleText: {
|
|
|
+ padding: 8,
|
|
|
+ fontSize: 14,
|
|
|
+ color: textPrimary,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ formInput: {
|
|
|
+ ...$margin(8, 0),
|
|
|
+ padding: 12,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderRadius: 4,
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderColor: "#EAEAEA",
|
|
|
+ },
|
|
|
+ formDropdown: {
|
|
|
+ ...$margin(8, 0),
|
|
|
+ padding: 12,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderRadius: 4,
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderColor: "#EAEAEA",
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row'
|
|
|
+ },
|
|
|
+ formInputRow: {
|
|
|
+ ...$margin(8, 0),
|
|
|
+ padding: 8,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderRadius: 4,
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderColor: "#EAEAEA",
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row'
|
|
|
+ },
|
|
|
+ itemInput: {
|
|
|
+ flex: 1,
|
|
|
+ padding: 4
|
|
|
+ },
|
|
|
+ uploadView: {
|
|
|
+ width: 160,
|
|
|
+ height: 160,
|
|
|
+ ...$margin(8, 0),
|
|
|
+ padding: 8,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderRadius: 4,
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderColor: "#EAEAEA",
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ },
|
|
|
+ uploadImage: {
|
|
|
+ width: 160,
|
|
|
+ height: 160,
|
|
|
+ ...$margin(8, 0)
|
|
|
+ },
|
|
|
+ uploadTitle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: textPrimary,
|
|
|
+ paddingTop: 8
|
|
|
+ },
|
|
|
+ uploadDesc: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: textCancel,
|
|
|
+ paddingTop: 2
|
|
|
+ },
|
|
|
+ buttonView: {
|
|
|
+ marginTop: 32,
|
|
|
+ marginBottom: 8
|
|
|
+ }
|
|
|
+})
|
