|
|
@@ -0,0 +1,149 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ class="dialog-end-transaction"
|
|
|
+ :visible="visible"
|
|
|
+ :before-close="e => hideDialog(false)"
|
|
|
+ title="End Transaction">
|
|
|
+ <el-form
|
|
|
+ ref="endForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-position="top">
|
|
|
+ <div class="form-row">
|
|
|
+ <el-form-item
|
|
|
+ prop="stopReason"
|
|
|
+ class="form-item"
|
|
|
+ label="Stop Reason:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.stopReason"
|
|
|
+ class="flex-item"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="autosize"
|
|
|
+ maxlength="30"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="flexcc" style="margin-top: 50px;">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="margin: 0 10px;"
|
|
|
+ @click="onClickEnd"
|
|
|
+ :loading="endLoading">
|
|
|
+ End Transaction
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from '../../http/api/transaction'
|
|
|
+export default {
|
|
|
+ name: "EndTransactionDialog",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ type: String|Number,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ stopReason: "",
|
|
|
+ transactionPk: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ stopReason: {
|
|
|
+ required: true,
|
|
|
+ message: "Stop reason is required",
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ },
|
|
|
+ autosize: {
|
|
|
+ minRows: 3,
|
|
|
+ maxRows: 6,
|
|
|
+ },
|
|
|
+ endLoading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ id(n, o) {
|
|
|
+ if (this.visible && n) {
|
|
|
+ this.form.transactionPk = this.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hideDialog(success) {
|
|
|
+ this.stopReason = "";
|
|
|
+ this.$emit("hide", success || false);
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ this.$refs['endForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.onClickEnd();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClickEnd() {
|
|
|
+ this.$confirm('This operation only for settling abnormal transactions and will not end charging. Select Confirm to proceed.', 'Warning', {
|
|
|
+ confirmButtonText: 'Confirm',
|
|
|
+ cancelButtonText: 'Cancel',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(res => {
|
|
|
+ this.endTransaction();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ endTransaction() {
|
|
|
+ this.endLoading = true;
|
|
|
+ api.endTransaction(this.form).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: 'Operation Successfully!'
|
|
|
+ })
|
|
|
+ this.hideDialog(true)
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: err
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.endLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog-end-transaction {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.dialog-end-transaction >>> .el-dialog {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+.dialog-end-transaction >>> .el-form {
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+.form-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 0 10px;
|
|
|
+}
|
|
|
+.form-item {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+</style>
|