add src/views/tender/detail.vue

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

@@ -0,0 +1,199 @@
+<template>
+  <el-dialog
+    class="dialog-tender-detail"
+    :visible="visible"
+    :before-close="e => hideDialog(false)"
+    :title="isEdit ? 'Update Package' : 'Create Package'">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="150px"
+      label-position="top"
+      v-loading="loading">
+      <div class="content">
+        <div class="flexcr">
+          <el-form-item
+            label="Tender Type:"
+            prop="tenderType"
+            class="add-input">
+            <el-input
+              v-model="form.tenderType"
+              maxlength="5"/>
+          </el-form-item>
+        </div>
+        <div class="flexcr">
+          <el-form-item
+            label="Concession Fee:"
+            class="add-input"
+            prop="concessionFee">
+            <el-input
+              v-model="form.concessionFee"
+              maxlength="10"/>
+          </el-form-item>
+        </div>
+      </div>
+      <div class="buttons">
+        <el-button
+          @click="onClickSave"
+          type="primary"
+          :loading="loadingSave">
+          <span style="padding: 0 20px;">SAVE</span>
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import api from '@/api/apiTender.js';
+export default {
+  name: "TenderDetailDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String|Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      loadingSave: false,
+      form: {
+        tenderPackageId: "",
+        tenderType: "",
+        concessionFee: ""
+      },
+      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',
+        }]
+      }
+    }
+  },
+  watch: {
+    id(n, o) {
+      if (this.visible && n) {
+        this.$nextTick(() => {
+          this.getPackageDetail();
+        })
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.form = {
+        tenderPackageId: "",
+        tenderType: "",
+        concessionFee: ""
+      }
+      this.loading = false;
+      this.$nextTick(() => {
+        if (this.$refs['form']) {
+          this.$refs['form'].clearValidate();
+        }
+      })
+    },
+    hideDialog(success) {
+      this.init();
+      this.$emit("hide", success || false);
+    },
+    getPackageDetail() {
+      this.loading = true;
+      api.getTenderById(this.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.hideDialog(true);
+      }).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.hideDialog(true);
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+      }).finally(() => {
+        this.loadingSave = false;
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .dialog-tender-detail >>> .el-dialog {
+    width: 100%;
+    max-width: 450px;
+  }
+  
+  .dialog-tender-detail >>> .el-form {
+    padding-right: 10px;
+  }
+  
+  .add-input {
+    width: 100%;
+    min-width: 100px;
+  }
+  
+  .buttons {
+    text-align: center;
+    padding-top: 20px;
+  }
+  
+</style>