add views/maintain/detail.vue

Strides-Admin/src/views/maintain/detail.vue

@@ -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">
+            &nbsp;Save&nbsp;
+          </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>