|
|
@@ -0,0 +1,472 @@
|
|
|
+<template>
|
|
|
+ <div class="card-container">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-position="right"
|
|
|
+ label-width="150px"
|
|
|
+ style="width: 100%;"
|
|
|
+ v-loading="loading.page">
|
|
|
+ <div class="flexr">
|
|
|
+ <div class="flex1 card-content">
|
|
|
+ <div class="section-title">Maintenance Info</div>
|
|
|
+ <el-form-item
|
|
|
+ label="Maintenance Type:"
|
|
|
+ prop="maintenanceType">
|
|
|
+ <el-select
|
|
|
+ class="add-text"
|
|
|
+ placeholder="Maintenance Type"
|
|
|
+ v-model="form.maintenanceType">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in options.type"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="item"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Type Category:"
|
|
|
+ prop="maintenanceTypeCategory">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ v-model="form.maintenanceTypeCategory"
|
|
|
+ placeholder="Maintenance Type Category"
|
|
|
+ maxlength="30"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Carpark Code:"
|
|
|
+ prop="carparkCode">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ v-model="form.carparkCode"
|
|
|
+ placeholder="Carpark Code"
|
|
|
+ maxlength="10"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Chargers:"
|
|
|
+ prop="chargeBoxIds">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ class="add-text"
|
|
|
+ v-model="form.chargeBoxIds"
|
|
|
+ placeholder="Filter by Station ID"
|
|
|
+ multiple
|
|
|
+ filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in options.station"
|
|
|
+ :key="index"
|
|
|
+ :label="item.chargeBoxId"
|
|
|
+ :value="item.chargeBoxId"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="startTime"
|
|
|
+ label="Start Date Time:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.startTime"
|
|
|
+ class="add-text"
|
|
|
+ type="datetime"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="endTime"
|
|
|
+ label="End Date Time:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.endTime"
|
|
|
+ class="add-text"
|
|
|
+ type="datetime"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"
|
|
|
+ :default-value="form.startTime"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Send Notification:">
|
|
|
+ <el-switch
|
|
|
+ v-model="form.notification"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Remarks:">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ :autosize="autosize"
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="5000"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="flex1 card-content">
|
|
|
+ <div class="section-title">Evidences</div>
|
|
|
+ <el-form-item
|
|
|
+ label="Reported By:"
|
|
|
+ label-width="120px">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ v-model="form.reportedBy"
|
|
|
+ maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Approved By:"
|
|
|
+ label-width="120px">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ v-model="form.approvedBy"
|
|
|
+ maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Evidence:"
|
|
|
+ class="is-required"
|
|
|
+ label-width="120px">
|
|
|
+ <el-upload
|
|
|
+ class="logo-upload"
|
|
|
+ action
|
|
|
+ :limit="1"
|
|
|
+ :show-file-list="false"
|
|
|
+ :file-list="[]"
|
|
|
+ :on-remove="file => removeEvidence(file)"
|
|
|
+ :http-request="file => uploadEvidence(file)"
|
|
|
+ accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
+ v-loading="loading.upload">
|
|
|
+ <el-image
|
|
|
+ v-if="evidences.length > 0"
|
|
|
+ :src="evidences[0].url"
|
|
|
+ title="Click to update logo"/>
|
|
|
+ <i v-else
|
|
|
+ class="el-icon-plus avatar-uploader-icon"
|
|
|
+ title="Click to select file"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content flexcr">
|
|
|
+ <div class="buttons">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="cancel-button"
|
|
|
+ @click="onBack">
|
|
|
+ Back
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="onClickSave"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading.save">
|
|
|
+ Save
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <audit-view
|
|
|
+ v-if="form.downtimeId"
|
|
|
+ url="dawn/api/v1/downtime/audit-pages"
|
|
|
+ :params="{downtimeId: form.downtimeId}"
|
|
|
+ :audit="form.audit"/>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from '../../api/apiMaintain.js';
|
|
|
+import charge from '../../http/api/charge'
|
|
|
+import apiBase from '../../api/apiBase.js';
|
|
|
+import AuditView from "@/components/AuditView"
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: {
|
|
|
+ page: false,
|
|
|
+ save: false,
|
|
|
+ upload: false,
|
|
|
+ option: false
|
|
|
+ },
|
|
|
+ isEdit: false,
|
|
|
+ form: {
|
|
|
+ downtimeId: "",
|
|
|
+ carparkCode: "",
|
|
|
+ chargerId: "",
|
|
|
+ chargeBoxIds: [],
|
|
|
+ maintenanceType: "",
|
|
|
+ maintenanceTypeCategory: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ notification: false,
|
|
|
+ notificationSent: "",
|
|
|
+ remark: "",
|
|
|
+ reportedBy: "",
|
|
|
+ approvedBy: "",
|
|
|
+ evidenceUrl: "",
|
|
|
+ audit: {}
|
|
|
+ },
|
|
|
+ autosize: {
|
|
|
+ minRows: 3,
|
|
|
+ maxRows: 10,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ maintenanceType: {
|
|
|
+ required: true,
|
|
|
+ trigger: "change",
|
|
|
+ message: "Please select maintenance type"
|
|
|
+ },
|
|
|
+ startTime: [{
|
|
|
+ message: "Please select start date time",
|
|
|
+ trigger: "change",
|
|
|
+ required: true,
|
|
|
+ }],
|
|
|
+ endTime: [{
|
|
|
+ message: "Please select end date time",
|
|
|
+ trigger: "change",
|
|
|
+ required: true,
|
|
|
+ }],
|
|
|
+ chargeBoxIds: {
|
|
|
+ required: true,
|
|
|
+ trigger: "change",
|
|
|
+ message: "Please select at least one charger"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ type: [],
|
|
|
+ station: []
|
|
|
+ },
|
|
|
+ evidences: [],
|
|
|
+ feedbackInfo: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {AuditView},
|
|
|
+ created() {
|
|
|
+ this.getTypeOptions();
|
|
|
+ this.getStationOptions();
|
|
|
+ if (this.$route.params.id) {
|
|
|
+ this.isEdit = true;
|
|
|
+ this.getMaintainInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTypeOptions() {
|
|
|
+ api.getMaintainTypeOptions().then(res => {
|
|
|
+ if (res.data && res.data.length > 0) {
|
|
|
+ this.options.type = res.data;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getStationOptions() {
|
|
|
+ this.loading.option = true;
|
|
|
+ charge.getStationPages({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 500,
|
|
|
+ pageVo: {
|
|
|
+ criteria: ""
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.options.station = res.data;
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.option = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getMaintainInfo() {
|
|
|
+ this.loading.page = true;
|
|
|
+ api.getMaintainById(this.$route.params.id).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.notificationSent) {
|
|
|
+ res.data.notification = true;
|
|
|
+ } else {
|
|
|
+ res.data.notification = false;
|
|
|
+ }
|
|
|
+ if (res.data.chargerId) {
|
|
|
+ res.data.chargeBoxIds = res.data.chargerId.split(",")
|
|
|
+ } else {
|
|
|
+ res.data.chargeBoxIds = [];
|
|
|
+ }
|
|
|
+ this.form = res.data;
|
|
|
+ if (this.form.evidenceUrl) {
|
|
|
+ this.evidences.push({
|
|
|
+ path: this.form.evidenceUrl,
|
|
|
+ url: this.$imageSrc(this.form.evidenceUrl)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.page = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadEvidence(file) {
|
|
|
+ this.loading.upload = true;
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('file', file.file)
|
|
|
+ apiBase.uploadImage(formData).then(res => {
|
|
|
+ if (this.evidences.length == 0) {
|
|
|
+ this.evidences.push({
|
|
|
+ url: ""
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.evidences[0] = ({
|
|
|
+ path: res.data.picturePath,
|
|
|
+ url: this.$imageSrc(res.data.picturePath)
|
|
|
+ })
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.upload = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeEvidence(file) {
|
|
|
+ this.evidences = []
|
|
|
+ this.form.providerLogo = ""
|
|
|
+ },
|
|
|
+ onBack() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/incident-management/maintenance-settings"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClickSave() {
|
|
|
+ this.$refs.form.validate(result => {
|
|
|
+ if (result) {
|
|
|
+ if (this.evidences.length > 0) {
|
|
|
+ this.form.evidenceUrl = this.evidences[0].path
|
|
|
+ } else {
|
|
|
+ this.form.evidenceUrl = "";
|
|
|
+ }
|
|
|
+ /*if (!this.form.evidenceUrl) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please upload evidence",
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }*/
|
|
|
+ this.form.notificationSent = this.form.notification ? "Y" : "";
|
|
|
+ this.form.chargerId = this.form.chargeBoxIds.join(",");
|
|
|
+ const params = {...this.form};
|
|
|
+ delete params.notification;
|
|
|
+ delete params.chargeBoxIds;
|
|
|
+ this.loading.save = true;
|
|
|
+ this.isEdit ? this.updateMaintain(params) : this.addMaintain(params);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addMaintain(params) {
|
|
|
+ api.creatMaintainPlan(params).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: 'Add maintenance successfully',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.onBack();
|
|
|
+ }).catch(err => {
|
|
|
+ this.loading.save = false;
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateMaintain(params) {
|
|
|
+ api.updateMaintainPlan(params).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: 'Update maintenance successfully',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.onBack();
|
|
|
+ }).catch(err => {
|
|
|
+ this.loading.save = false;
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped="scoped" lang='scss'>
|
|
|
+@import '../../styles/variables.scss';
|
|
|
+
|
|
|
+.card-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 60px;
|
|
|
+ min-height: $mainAppMinHeight;
|
|
|
+ background-color: #F0F5FC;
|
|
|
+}
|
|
|
+.card-content {
|
|
|
+ margin: 0 8px 16px;
|
|
|
+ padding: 15px 80px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ color: #333;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ user-select: none;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: sans-serif;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+.add-text {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 100px;
|
|
|
+ max-width: 300px;
|
|
|
+}
|
|
|
+.add-text ::v-deep .el-textarea__inner {
|
|
|
+ font-family: sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.list-item-icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 10px 22px;
|
|
|
+}
|
|
|
+.buttons {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 500px) {
|
|
|
+ .card-container {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ padding: 15px 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.logo-upload {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ ::v-deep .el-image {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 6px;
|
|
|
+ img {
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ color: #8c939d;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 28px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 150px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+}
|
|
|
+</style>
|