|
|
@@ -0,0 +1,847 @@
|
|
|
+<template>
|
|
|
+ <div class="view-container" v-loading="pageLoading">
|
|
|
+ <el-form
|
|
|
+ ref="addForm"
|
|
|
+ :rules="rules"
|
|
|
+ :model="siteForm"
|
|
|
+ label-position="left"
|
|
|
+ label-width="120px"
|
|
|
+ style="width: 100%;">
|
|
|
+ <div class="flexr">
|
|
|
+ <div class="flexl flex1">
|
|
|
+ <div class="view-content flex1">
|
|
|
+ <div class="section-title" id="idSiteInfo">Site Information</div>
|
|
|
+ <el-form-item
|
|
|
+ label="Site Name:"
|
|
|
+ prop="siteName">
|
|
|
+ <el-input
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ v-model="siteForm.siteName"
|
|
|
+ class="input-text" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="locationLatitude"
|
|
|
+ label="Latitude:">
|
|
|
+ <el-input
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ v-model="siteForm.locationLatitude"
|
|
|
+ class="input-text" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="locationLongitude"
|
|
|
+ label="Longitude:">
|
|
|
+ <el-input
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ v-model="siteForm.locationLongitude"
|
|
|
+ class="input-text"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="address.countryCode"
|
|
|
+ label="Country:">
|
|
|
+ <el-select
|
|
|
+ v-model="siteForm.address.countryCode"
|
|
|
+ class="input-text"
|
|
|
+ :disabled="isMCSTUser">
|
|
|
+ <el-option
|
|
|
+ v-for="item in countryOptions"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="address.city"
|
|
|
+ label="City:">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.address.city"
|
|
|
+ class="input-text"
|
|
|
+ :disabled="isMCSTUser"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="address.street"
|
|
|
+ label="Street:">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.address.street"
|
|
|
+ class="input-text"
|
|
|
+ :disabled="isMCSTUser"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="address.zipCode"
|
|
|
+ label="Postal Code:">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.address.zipCode"
|
|
|
+ class="input-text"
|
|
|
+ :disabled="isMCSTUser"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="view-content">
|
|
|
+ <div class="section-title">Additional Information</div>
|
|
|
+ <el-form-item
|
|
|
+ label-width="130px"
|
|
|
+ label="Operating Hours:"
|
|
|
+ class="flex-item">
|
|
|
+ <div class="flexc">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.operatingHours"
|
|
|
+ :disabled="isMCSTUser || !!siteForm.endlessService"
|
|
|
+ class="input-text" />
|
|
|
+ <el-switch
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ @change="changeEndless"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ inactive-text="24/7"
|
|
|
+ v-model="siteForm.endlessService">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label-width="130px"
|
|
|
+ label="Parking Fee:"
|
|
|
+ class="flex-item">
|
|
|
+ <div class="flexc">
|
|
|
+ <el-input
|
|
|
+ :disabled="isMCSTUser || !!siteForm.free"
|
|
|
+ v-model="siteForm.parkingFee"
|
|
|
+ class="input-text" />
|
|
|
+ <el-switch
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ @change="changeParkingFree"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ inactive-text="Free"
|
|
|
+ v-model="siteForm.free">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label-width="130px"
|
|
|
+ label="Additional Notes:">
|
|
|
+ <el-input
|
|
|
+ :disabled="isMCSTUser"
|
|
|
+ v-model="siteForm.additionalNotes"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="autosize"
|
|
|
+ class="input-text" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label-width="130px"
|
|
|
+ label="Carpark Code:">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.carParkCode"
|
|
|
+ class="input-text" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flexl flex1">
|
|
|
+ <div class="view-content" style="padding: 15px;">
|
|
|
+ <dashboard
|
|
|
+ :enable="isEdit"
|
|
|
+ :info="summaryInfo"
|
|
|
+ :siteId="siteForm.sitePk"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="view-content flex1">
|
|
|
+ <div class="section-title flexcr">
|
|
|
+ Site Summary
|
|
|
+ <div class="section-sub-title">(Currency Used: {{currencyData[siteForm.address.countryCode]}})</div>
|
|
|
+ </div>
|
|
|
+ <Summary
|
|
|
+ :info="summaryInfo"
|
|
|
+ :currency="currencyData[siteForm.address.countryCode]"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="view-content" id="idSiteTypes">
|
|
|
+ <div class="section-title">Site EMAIL Configuration</div>
|
|
|
+ <email-recipient v-model="siteForm.emails"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="view-content">
|
|
|
+ <div class="section-title">TIME CONFIGURATION</div>
|
|
|
+ <div style="overflow-x: auto;">
|
|
|
+ <site-type-with-time
|
|
|
+ :siteTypes="siteForm.siteTypes"
|
|
|
+ @change="changeSiteTypes"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="view-content" id="idChargeRates">
|
|
|
+ <div class="section-title flexcr">
|
|
|
+ CHARGE SITE RATE
|
|
|
+ <div class="section-sub-title">(Currency Used: {{currencyData[siteForm.address.countryCode]}})</div>
|
|
|
+ </div>
|
|
|
+ <charge-rate
|
|
|
+ v-model="ratesForm.chargeRates"/>
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title flexcr">
|
|
|
+ SPECIAL CHARGE RATE
|
|
|
+ <div class="section-sub-title">(Currency Used: {{currencyData[siteForm.address.countryCode]}})</div>
|
|
|
+ </div>
|
|
|
+ <charge-rate
|
|
|
+ isSpecial
|
|
|
+ v-model="ratesForm.specialChargeRates"/>
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title">Reservations</div>
|
|
|
+ <reservation
|
|
|
+ :enabled.sync="siteForm.enableReservation"
|
|
|
+ :limit.sync="siteForm.timeLimit"
|
|
|
+ />
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title">LOAD BALANCING</div>
|
|
|
+ <Balancing v-model="balancingForm"/>
|
|
|
+ <template v-if="enableWhitelistFleet">
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title">WHITELIST FLEET</div>
|
|
|
+ <white-list-fleet v-model="siteForm.fleetWhitelist"/>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="enableWhitelistUser">
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title">WHITELIST USERS</div>
|
|
|
+ <white-list-user v-model="siteForm.whitelistUser"/>
|
|
|
+ </template>
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title flexcwr">
|
|
|
+ Idle Fee SETTINGS
|
|
|
+ <div class="idle-switch">
|
|
|
+ <el-switch
|
|
|
+ inactive-text="Enable Idle Fee"
|
|
|
+ v-model="siteForm.enableIdleFee"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20" v-if="siteForm.enableIdleFee">
|
|
|
+ <el-col :xs="24" :md="12" :lg="8">
|
|
|
+ <el-form-item
|
|
|
+ label="Effective From:"
|
|
|
+ label-width="130px"
|
|
|
+ prop="effectiveFrom">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="siteForm.effectiveFrom"
|
|
|
+ class="input-text"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :md="12" :lg="8">
|
|
|
+ <el-form-item
|
|
|
+ label="Effective To:"
|
|
|
+ label-width="130px"
|
|
|
+ prop="effectiveTo">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="siteForm.effectiveTo"
|
|
|
+ class="input-text"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :md="12" :lg="8">
|
|
|
+ <el-form-item
|
|
|
+ label="Idle Fee:"
|
|
|
+ label-width="130px"
|
|
|
+ prop="idleFee">
|
|
|
+ <el-input
|
|
|
+ v-model="siteForm.idleFee"
|
|
|
+ class="input-text"
|
|
|
+ oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
|
|
+ maxlength="6"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :md="12" :lg="8">
|
|
|
+ <el-form-item
|
|
|
+ label="Every (minute):"
|
|
|
+ label-width="130px"
|
|
|
+ prop="everyMinute">
|
|
|
+ <el-input
|
|
|
+ maxlength="4"
|
|
|
+ v-model.number="siteForm.everyMinute"
|
|
|
+ class="input-text"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :md="12" :lg="8">
|
|
|
+ <el-form-item
|
|
|
+ label="Effective Date:"
|
|
|
+ label-width="130px"
|
|
|
+ prop="effectiveDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="siteForm.effectiveDate"
|
|
|
+ class="input-text"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="view-content flexcr">
|
|
|
+ <div class="buttons">
|
|
|
+ <el-button
|
|
|
+ class="cancel-button"
|
|
|
+ type="primary"
|
|
|
+ @click="handleClickCancleButton">
|
|
|
+ Cancel
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ class="confirm-button"
|
|
|
+ type="primary"
|
|
|
+ @click="handleClickSaveButton">
|
|
|
+ Save
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="update-by"
|
|
|
+ v-if="isEdit">
|
|
|
+ <span
|
|
|
+ class="add-text"
|
|
|
+ :title='"CREATED BY " + siteForm.createdBy + " ON " + siteForm.createdOn'>
|
|
|
+ LAST UPDATED BY {{siteForm.updatedBy}} TIMESTAMP: {{siteForm.updatedOn}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Summary from './components/Summary'
|
|
|
+import Dashboard from './components/Dashboard'
|
|
|
+import ChargeRate from './components/ChargeRate'
|
|
|
+import Balancing from './components/Balancing'
|
|
|
+import EmailRecipient from './components/EmailRecipient'
|
|
|
+import Reservation from './components/Reservations'
|
|
|
+import WhiteListFleet from './components/WhiteListFleet'
|
|
|
+import WhiteListUser from './components/WhiteListUser'
|
|
|
+import SiteTypeWithTime from './components/SiteTypeWithTime'
|
|
|
+import waves from '@/directive/waves' // waves directive
|
|
|
+import site from '../../http/api/site'
|
|
|
+import { getRoleName } from '@/utils/auth'
|
|
|
+import { fetchFleetCompanyOptions } from '@/http/api/driver'
|
|
|
+export default {
|
|
|
+ directives: { waves },
|
|
|
+ components: {
|
|
|
+ Balancing,
|
|
|
+ ChargeRate,
|
|
|
+ Dashboard,
|
|
|
+ EmailRecipient,
|
|
|
+ Reservation,
|
|
|
+ WhiteListUser,
|
|
|
+ WhiteListFleet,
|
|
|
+ SiteTypeWithTime,
|
|
|
+ Summary
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageLoading: false,
|
|
|
+ isMCSTUser: false,
|
|
|
+ countryOptions: [],
|
|
|
+ siteForm: {
|
|
|
+ sitePk: "",
|
|
|
+ siteName: "",
|
|
|
+ siteTypes: [],
|
|
|
+ emails: [],
|
|
|
+ carParkCode: "",
|
|
|
+ address: {
|
|
|
+ city: "",
|
|
|
+ countryCode: "SG",
|
|
|
+ street: "",
|
|
|
+ zipCode: ""
|
|
|
+ },
|
|
|
+ free: false,
|
|
|
+ endlessService: false,//24/7
|
|
|
+ additionalNotes: "",
|
|
|
+ //罚款部分
|
|
|
+ enableIdleFee: false,//idle Fee
|
|
|
+ idleFee: "",//idle Fee
|
|
|
+ everyMinute: "",//idle Fee
|
|
|
+ effectiveDate: "",//idle Fee
|
|
|
+ effectiveFrom: "",//idle Fee
|
|
|
+ effectiveTo: "",//idle Fee
|
|
|
+ //预订部分
|
|
|
+ enableReservation: false,//预订
|
|
|
+ timeLimit: null,//预订
|
|
|
+
|
|
|
+ parkingFee: "",
|
|
|
+ whitelistUser: [],
|
|
|
+ fleetWhitelist: [],
|
|
|
+ operatingHours: "",
|
|
|
+ locationLatitude: "",
|
|
|
+ locationLongitude: "",
|
|
|
+ chargeRates: [],
|
|
|
+ specialChargeRates: [],
|
|
|
+ loadBalancing: "",//负载均衡
|
|
|
+ staticMaxAmpere: "",//负载均衡
|
|
|
+ siteChargingProfiles: null,//负载均衡
|
|
|
+ },
|
|
|
+ ratesForm: {
|
|
|
+ chargeRates: [{
|
|
|
+ rate: '',
|
|
|
+ rateType: '',
|
|
|
+ chargeTypePk: ''
|
|
|
+ }],
|
|
|
+ specialChargeRates: [{
|
|
|
+ rate: '',
|
|
|
+ rateType: '',
|
|
|
+ chargeTypePk: '',
|
|
|
+ fleetCompanyId: ''
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ balancingForm: {
|
|
|
+ loadBalancing: 'dynamic',
|
|
|
+ staticMaxAmpere: 0,
|
|
|
+ siteChargingProfiles: [{
|
|
|
+ boxInUse: '',
|
|
|
+ chargingProfilePk: ''
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ currencyData: {
|
|
|
+ SG: "S$"
|
|
|
+ },
|
|
|
+ autosize: {
|
|
|
+ minRows: 3,
|
|
|
+ maxRows: 6,
|
|
|
+ },
|
|
|
+ summaryInfo: {},
|
|
|
+ rules: {
|
|
|
+ siteName: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Site Name is required',
|
|
|
+ },
|
|
|
+ locationLatitude: [{
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Latitude is required',
|
|
|
+ }, {
|
|
|
+ pattern: /^[\-\+]?((0|([1-8]\d?))(\.\d{1,8})?|90(\.0{1,8})?)$/,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type a correct latitude',
|
|
|
+ }],
|
|
|
+ locationLongitude: [{
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Longitude is required',
|
|
|
+ }, {
|
|
|
+ pattern: /^[\-\+]?(0(\.\d{1,8})?|([1-9](\d)?)(\.\d{1,8})?|1[0-7]\d{1}(\.\d{1,8})?|180\.0{1,8})$/,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type a correct longitude',
|
|
|
+ }],
|
|
|
+ address: {
|
|
|
+ street: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Address is required',
|
|
|
+ },
|
|
|
+ zipCode: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Postal Code is required',
|
|
|
+ },
|
|
|
+ city: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'City is required',
|
|
|
+ },
|
|
|
+ countryCode: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Country is required',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ idleFee: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Idle fee is required'
|
|
|
+ },
|
|
|
+ effectiveDate: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'change',
|
|
|
+ message: 'Effective Date is required'
|
|
|
+ },
|
|
|
+ effectiveFrom: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'change',
|
|
|
+ message: 'Effective From is required'
|
|
|
+ },
|
|
|
+ effectiveTo: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'change',
|
|
|
+ message: 'Effective To is required'
|
|
|
+ },
|
|
|
+ everyMinute: [{
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Every is required'
|
|
|
+ }, {
|
|
|
+ type: 'number',
|
|
|
+ message: 'Every is a number'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ enablePublic: false,
|
|
|
+ enableWhitelistUser: false,
|
|
|
+ enableWhitelistFleet: false,
|
|
|
+ isEdit: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.pageLoading = true;
|
|
|
+ this.isMCSTUser = getRoleName() === "MCST";
|
|
|
+ this.getCountryOptions()
|
|
|
+ if (this.$route.params.id) {
|
|
|
+ this.isEdit = true;
|
|
|
+ this.getSiteInfo()
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pageLoading = false;
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCountryOptions() {
|
|
|
+ site.getCountryList().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.countryOptions = res.data
|
|
|
+ const sign = {}
|
|
|
+ res.data.forEach(item => {
|
|
|
+ sign[item.value] = item.currencySymbol
|
|
|
+ })
|
|
|
+ this.currencyData = sign;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSiteInfo() {
|
|
|
+ site.getSiteInfo({
|
|
|
+ sitePk: this.$route.params.id,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.siteForm = res.data;
|
|
|
+ this.applySiteInfo();
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.pageLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ applySiteInfo() {
|
|
|
+ if (this.siteForm.chargeRates) {
|
|
|
+ const rate = [], srate = []
|
|
|
+ this.siteForm.chargeRates.forEach(item => {
|
|
|
+ if (item.fleetCompanyId) {
|
|
|
+ srate.push(item)
|
|
|
+ } else {
|
|
|
+ rate.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (rate.length > 0) {
|
|
|
+ this.ratesForm.chargeRates = rate;
|
|
|
+ }
|
|
|
+ if (srate.length > 0) {
|
|
|
+ this.ratesForm.specialChargeRates = srate;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.siteForm.siteSummary) {
|
|
|
+ this.summaryInfo = Object.assign(this.siteForm.siteSummary, {});
|
|
|
+ delete this.siteForm.siteSummary;
|
|
|
+ }
|
|
|
+ this.balancingForm = {
|
|
|
+ loadBalancing: this.siteForm.loadBalancing || 'dynamic',
|
|
|
+ staticMaxAmpere: this.siteForm.staticMaxAmpere || 0,
|
|
|
+ siteChargingProfiles: this.siteForm.siteChargingProfiles || [{
|
|
|
+ boxInUse: '',
|
|
|
+ chargingProfilePk: ''
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeEndless(value) {
|
|
|
+ if (value) {
|
|
|
+ this.siteForm.operatingHours = ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeParkingFree(value) {
|
|
|
+ if (value) {
|
|
|
+ this.siteForm.parkingFee = ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeSiteTypes(data) {
|
|
|
+ if (this.isEdit && this.pageLoading) {
|
|
|
+ console.log("changeSiteTypes", data);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.siteForm.siteTypes = data;
|
|
|
+ for (let type of data) {
|
|
|
+ if (type.siteType == "PRI_USR_WHI") {
|
|
|
+ this.enableWhitelistUser = (type.allDay || (type.startTime && type.endTime))
|
|
|
+ } else if (type.siteType == "PRI_FLE_WHI") {
|
|
|
+ this.enableWhitelistFleet = (type.allDay || (type.startTime && type.endTime))
|
|
|
+ } else if (type.siteType == "PUB") {
|
|
|
+ this.enablePublic = (type.allDay || (type.startTime && type.endTime))
|
|
|
+ } else {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClickCancleButton() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/site-management/index"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClickSaveButton() {
|
|
|
+ this.$refs['addForm'].validate(result => {
|
|
|
+ if (result) {
|
|
|
+ const rates = [];
|
|
|
+ this.ratesForm.chargeRates.forEach(item => {
|
|
|
+ if (item.rate) {
|
|
|
+ rates.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ratesForm.specialChargeRates.forEach(item => {
|
|
|
+ if (item.rate) {
|
|
|
+ rates.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (rates.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please add at least one rate",
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ this.scrollToView("idChargeRates", true);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.siteForm.enableReservation) {
|
|
|
+ this.siteForm.timeLimit = "";
|
|
|
+ }
|
|
|
+ const chargeProfiles = []
|
|
|
+ this.balancingForm.siteChargingProfiles.forEach(item => {
|
|
|
+ if (item.boxInUse && item.chargingProfilePk)
|
|
|
+ chargeProfiles.push(item)
|
|
|
+ })
|
|
|
+ this.siteForm.siteChargingProfiles = chargeProfiles
|
|
|
+ if (this.balancingForm.loadBalancing == 'dynamic') {
|
|
|
+ this.siteForm.staticMaxAmpere = ""
|
|
|
+ } else {
|
|
|
+ this.siteForm.staticMaxAmpere = this.balancingForm.staticMaxAmpere
|
|
|
+ }
|
|
|
+ this.siteForm.loadBalancing = this.balancingForm.loadBalancing
|
|
|
+ if (!this.enablePublic && !this.enableWhitelistFleet && !this.enableWhitelistUser) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please set time configuration",
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ this.scrollToView("idSiteTypes");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.enableWhitelistUser) {
|
|
|
+ let _list = []
|
|
|
+ this.siteForm.whitelistUser.forEach(item => {
|
|
|
+ if (item.mobileNumber && item.licenceNumber) {
|
|
|
+ _list.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (_list.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please add at least one whitelist user",
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.siteForm.whitelistUser = _list;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.siteForm.whitelistUser = [];
|
|
|
+ }
|
|
|
+ if (this.enableWhitelistFleet) {
|
|
|
+ let _list = []
|
|
|
+ this.siteForm.fleetWhitelist.forEach(item => {
|
|
|
+ if (item.mobileNumber && item.licenceNumber) {
|
|
|
+ _list.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (_list.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please add at least one whitelist fleet",
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.siteForm.fleetWhitelist = _list;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.siteForm.fleetWhitelist = []
|
|
|
+ }
|
|
|
+ this.pageLoading = true;
|
|
|
+ console.log("form", this.siteForm);
|
|
|
+ if (this.isEdit) {
|
|
|
+ this.updateSite();
|
|
|
+ } else {
|
|
|
+ this.addSite()
|
|
|
+ }
|
|
|
+ //this.editSiteWithForm();
|
|
|
+ } else {
|
|
|
+ this.scrollToView("idSiteInfo", true);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ scrollToView(id, alignToTop) {
|
|
|
+ //console.log("scrollToView", !alignToTop);
|
|
|
+ window.requestAnimationFrame(() => {
|
|
|
+ document.getElementById(id).scrollIntoView(!alignToTop, {
|
|
|
+ block: "start",
|
|
|
+ behavior: "smooth"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isSiteTypeEnable(index, isSwitch) {
|
|
|
+ for (let i = 0; i < this.siteForm.siteTypes.length; i++) {
|
|
|
+ let type = this.siteForm.siteTypes[i];
|
|
|
+ if (type.allDay) {
|
|
|
+ if (index == i && isSwitch) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ addSite() {
|
|
|
+ site.addSite(this.siteForm).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: "Add site success",
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ this.handleClickCancleButton();
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error",
|
|
|
+ duration: 5000,
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.pageLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateSite() {
|
|
|
+ site.updateSite(this.siteForm).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: "Update site success",
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ this.handleClickCancleButton();
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error",
|
|
|
+ duration: 5000,
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.pageLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang='scss'>
|
|
|
+ @import '../../styles/element-ui.scss';
|
|
|
+ @import '../../styles/variables.scss';
|
|
|
+
|
|
|
+ .view-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 60px;
|
|
|
+ min-height: $mainAppMinHeight;
|
|
|
+ background-color: #F0F5FC;
|
|
|
+ }
|
|
|
+
|
|
|
+ .view-content {
|
|
|
+ margin: 0 8px 16px;
|
|
|
+ padding: 15px 50px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 800px) {
|
|
|
+ .view-container {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .view-content {
|
|
|
+ padding: 15px 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 500px) {
|
|
|
+ .view-container {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ .view-content {
|
|
|
+ padding: 15px 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sparator {
|
|
|
+ margin: 10px -30px;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #F0F5FC;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: sans-serif;
|
|
|
+ text-transform: uppercase;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-sub-title {
|
|
|
+ font-size: 14px;
|
|
|
+ padding-left: 5px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-text {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-text {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ max-width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-text ::v-deep .el-textarea__inner,
|
|
|
+ .input-text ::v-deep .el-textarea__inner {
|
|
|
+ font-family: sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-button {
|
|
|
+ width: 94px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-button {
|
|
|
+ width: 94px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background: $--color-primary;
|
|
|
+ border: 1px solid $--color-primary;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-switch__label.el-switch__label--left span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ .idle-switch {
|
|
|
+ font-size: 13px;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+</style>
|
