add app/pages/vehicles/VehicleDetail.js

Strides-SPAPP/app/pages/vehicles/VehicleDetail.js

@@ -0,0 +1,419 @@
+/**
+ * 添加/编辑 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';
+import utils from '../../utils/utils';
+import app from '../../../app.json';
+
+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() {
+    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) {
+      if (app.vehicle.showLicencePlate) {
+        toastShort($t('profile.msgInputPlate'));
+      } else {
+        toastShort($t('profile.msgInputCarNo'));
+      }
+      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;
+    }*/
+    //console.log("车辆信息", this.state.vehicleInfo);
+    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);
+    });
+  }
+
+  getAsterisk() {
+    if (app.vehicle.showRequiredAsterisk) {
+      return " *";
+    } else {
+      return "";
+    }
+  }
+
+  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') + this.getAsterisk()}
+          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') + this.getAsterisk()}
+          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(app.vehicle.showLicencePlate ? 'profile.enterLicensePlate' : 'profile.enterLicenseNumber') + this.getAsterisk()}
+          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>
+        { app.vehicle.requireConnectorType && <>
+          <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}
+          />
+        </> }
+        { app.vehicle.requireImageUpload && <>
+        <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: utils.getImageUrl(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
+  }
+})