add views/tender/detailPage.vue

Strides-Admin/src/views/tender/detailPage.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="container" v-loading="loading">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="150px"
+      label-position="right">
+      <div class="content">
+        <div class="section-title">Tender Package</div>
+        <el-form-item
+          label="Tender Type:"
+          prop="tenderType"
+          class="add-input">
+          <el-input
+            v-model="form.tenderType"
+            maxlength="5"/>
+        </el-form-item>
+        <el-form-item
+          label="Concession Fee:"
+          class="add-input"
+          prop="concessionFee">
+          <el-input
+            v-model="form.concessionFee"
+            maxlength="10"/>
+        </el-form-item>
+      </div>
+      <div class="content flexcr">
+        <div class="buttons">
+          <el-button
+            @click="onBack"
+            type="primary"
+            class="cancel-button">
+            Cancel
+          </el-button>
+          <el-button
+            @click="onClickSave"
+            type="primary"
+            :loading="loadingSave">
+            &nbsp;Save&nbsp;
+          </el-button>
+        </div>
+        <audit-view
+          v-if="form.tenderPackageId"
+          url="dawn/api/v1/tender-package/audit-pages"
+          :params="form"
+          :audit="form.audit"/>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import api from '@/api/apiTender.js';
+import settings from '../../settings.js'
+import AuditView from "@/components/AuditView"
+export default {
+  data() {
+    return {
+      loading: false,
+      loadingSave: false,
+      isEdit: false,
+      form: {
+        tenderPackageId: "",
+        tenderType: "",
+        concessionFee: "",
+        audit: {}
+      },
+      currencyData: {
+        SG: "S$"
+      },
+      rules: {
+        tenderType: {
+          required: true,
+          trigger: "blur",
+          message: "Please input tender type"
+        },
+        concessionFee: [{
+          required: true,
+          trigger: 'blur',
+          message: 'Please input concession fee',
+        }, {
+          pattern: /^\d+(\.\d+)?$/,
+          trigger: 'blur',
+          message: 'Please type a correct fee',
+        }]
+      }
+    }
+  },
+  components: {AuditView},
+  created() {
+    if (this.$route.params.id) {
+      this.loading = true;
+      this.isEdit = true;
+      this.getPackageDetail();
+    }
+  },
+  methods: {
+    onBack() {
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: "/financial-management/tender-packages"
+        })
+      })
+    },
+    getPackageDetail() {
+      this.loading = true;
+      api.getTenderById(this.$route.params.id).then(res => {
+        if (res.data) {
+          this.form = res.data;
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    onClickSave() {
+      this.$refs.form.validate(result => {
+        if (result) {
+          this.loadingSave = true;
+          this.isEdit ? this.updatePackage() : this.addPackage();
+        }
+      });
+    },
+    addPackage() {
+      api.saveTender(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Successfully added"
+        });
+        this.onBack();
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+      }).finally(() => {
+        this.loadingSave = false;
+      });
+    },
+    updatePackage() {
+      api.updateTender(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Successfully updated"
+        });
+        this.onBack();
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+      }).finally(() => {
+        this.loadingSave = false;
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '../../styles/variables.scss';
+  .container {
+    width: 100%;
+    padding: 20px 60px;
+    min-height: $mainAppMinHeight;
+    background-color: #F0F5FC;
+  }
+  .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;
+  }
+  
+  .section-sub-title {
+    font-size: 14px;
+    padding-left: 5px;
+    font-weight: normal;
+  }
+  
+  .add-text {
+    width: 100%;
+    min-width: 100px;
+    max-width: 300px;
+  }
+  .add-text ::v-deep .el-textarea__inner {
+    font-family: sans-serif;
+  }
+  .add-input {
+    width: 100%;
+    min-width: 100px;
+    max-width: 400px;
+    margin-right: 15px;
+    ::v-deep .el-input,
+    ::v-deep .el-select {
+      width: 100%;
+    }
+  }
+  
+  .buttons {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  @media screen and (max-width: 1200px) {
+    .add-input {
+      min-width: 80px;
+      max-width: 300px;
+    }
+  }
+  @media screen and (max-width: 500px) {
+    .container {
+      padding: 0px;
+    }
+    .content {
+      padding: 15px 30px;
+    }
+    .add-input {
+      max-width: unset;
+      margin-right: 0px;
+    }
+  }
+</style>