|
|
@@ -121,6 +121,75 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ prop="siteInformation.type"
|
|
|
+ label="Type:">
|
|
|
+ <div class="type-row" v-for="(item, index) in siteTypeTable">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="item.startTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ :placeholder="item.label"
|
|
|
+ :disabled="isSiteTypeEnable(index)"/>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="item.endTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="End Time"
|
|
|
+ :disabled="isSiteTypeEnable(index)"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="sparator"></div>
|
|
|
+ <div class="section-title">
|
|
|
+ EMAIL
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ :model="this"
|
|
|
+ :rules="rule"
|
|
|
+ ref="recipForm"
|
|
|
+ label-position="left"
|
|
|
+ label-width="150px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="16" :md="10" :lg="9">
|
|
|
+ <el-form-item
|
|
|
+ label="Recipients:"
|
|
|
+ prop="recipient">
|
|
|
+ <el-input
|
|
|
+ class="input-text"
|
|
|
+ v-model="recipient"
|
|
|
+ placeholder="Add text"
|
|
|
+ maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addRecipient">
|
|
|
+ Add
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item
|
|
|
+ label="Added Recipients:">
|
|
|
+ <div class="receip-item" v-for="(item, index) in recipients" :key="index">
|
|
|
+ <span>{{item}}</span>
|
|
|
+ <i class="el-icon-close" @click="deleteRecipient(index)"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="link-button"
|
|
|
+ v-if="recipients.length > 0"
|
|
|
+ @click="clearAllRecipient">Clear All</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
<div class="sparator"></div>
|
|
|
<div class="section-title">
|
|
|
TIME CONFIGURATION
|
|
|
@@ -605,6 +674,9 @@ export default {
|
|
|
maxRows: 6,
|
|
|
},
|
|
|
pageLoading: false,
|
|
|
+
|
|
|
+ recipient: '',
|
|
|
+ recipients: [],
|
|
|
siteTypeTable: [{
|
|
|
siteType: "",
|
|
|
allDay: false,
|
|
|
@@ -630,7 +702,7 @@ export default {
|
|
|
siteName: '',
|
|
|
latitude: '',
|
|
|
longitude: '',
|
|
|
- type: '',
|
|
|
+ type: 'PUBLIC',
|
|
|
},
|
|
|
additionalInformation: {
|
|
|
operatingHours: '',
|
|
|
@@ -669,7 +741,13 @@ export default {
|
|
|
everyMinute: ''
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ rule: {
|
|
|
+ "recipient": {
|
|
|
+ pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type a correct recipient'
|
|
|
+ }
|
|
|
+ },
|
|
|
rules: {
|
|
|
siteInformation: {
|
|
|
siteName: {
|
|
|
@@ -932,7 +1010,7 @@ export default {
|
|
|
endlessService,
|
|
|
additionalNotes,
|
|
|
operatingHours,
|
|
|
-
|
|
|
+ emails = [],
|
|
|
siteName,
|
|
|
//siteType,
|
|
|
siteTypes,
|
|
|
@@ -976,7 +1054,8 @@ export default {
|
|
|
this.updateSiteModel.idle.effectiveFrom = data.effectiveFrom
|
|
|
this.updateSiteModel.idle.effectiveDate = data.effectiveDate
|
|
|
this.updateSiteModel.idle.enableIdleFee = data.enableIdleFee
|
|
|
-
|
|
|
+
|
|
|
+ if (emails) this.recipients = emails;
|
|
|
chargeRates.forEach(item => {
|
|
|
if (item.fleetCompanyId) {
|
|
|
const index = this.updateSiteModel.specialChargeRates.length - 1
|
|
|
@@ -1286,6 +1365,28 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ addRecipient() {
|
|
|
+ if (this.recipient) {
|
|
|
+ this.$refs["recipForm"].validate(result => {
|
|
|
+ if (result) {
|
|
|
+ this.recipients.push(this.recipient);
|
|
|
+ this.recipient = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteRecipient(index) {
|
|
|
+ this.recipients.splice(index, 1);
|
|
|
+ },
|
|
|
+ clearAllRecipient() {
|
|
|
+ this.$confirm('Clear all recipients?', 'Prompt', {
|
|
|
+ confirmButtonText: 'Confirm',
|
|
|
+ cancelButtonText: 'Cancel',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(res => {
|
|
|
+ this.recipients = [];
|
|
|
+ })
|
|
|
+ },
|
|
|
handleClickCancleButton() {
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
@@ -1394,7 +1495,8 @@ export default {
|
|
|
siteChargingProfiles: chargeProfiles,
|
|
|
loadBalancing: this.balancingForm.loadBalancing,
|
|
|
staticMaxAmpere: this.balancingForm.staticMaxAmpere,
|
|
|
- ...this.updateSiteModel.idle
|
|
|
+ ...this.updateSiteModel.idle,
|
|
|
+ emails: this.recipients
|
|
|
};
|
|
|
|
|
|
site.updateSite(data)
|
|
|
@@ -1456,6 +1558,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
+ @import '../../styles/element-ui.scss';
|
|
|
@import '../../styles/variables.scss';
|
|
|
|
|
|
.view-container {
|
|
|
@@ -1466,7 +1569,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.view-content {
|
|
|
- padding: 15px 80px;
|
|
|
+ padding: 15px 60px;
|
|
|
border-radius: 6px;
|
|
|
background-color: white;
|
|
|
}
|
|
|
@@ -1528,19 +1631,14 @@ export default {
|
|
|
.cancel-button {
|
|
|
width: 94px;
|
|
|
height: 40px;
|
|
|
- color: #555;
|
|
|
- background: #FFFFFF;
|
|
|
- border: 1px solid #001489;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.confirm-button {
|
|
|
width: 94px;
|
|
|
height: 40px;
|
|
|
margin-left: 20px;
|
|
|
- background: #001489;
|
|
|
- border: 1px solid #001489;
|
|
|
+ background: $--color-primary;
|
|
|
+ border: 1px solid $--color-primary;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
@@ -1556,4 +1654,39 @@ export default {
|
|
|
margin-left: -5px;
|
|
|
padding-right: 10px;
|
|
|
}
|
|
|
+ .type-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .type-row > div {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .link-button {
|
|
|
+ color: #3179E4;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 -10px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .receip-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1em;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .receip-item i {
|
|
|
+ color: #666;
|
|
|
+ padding: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .receip-item i:hover,
|
|
|
+ .receip-item i:active,
|
|
|
+ .link-button:hover {
|
|
|
+ color: #ff5500;
|
|
|
+ }
|
|
|
</style>
|
