electripper-v2-ui/src/views/bst/order/components/OrderDeductDialog.vue
2025-05-20 17:17:21 +08:00

105 lines
2.3 KiB
Vue

<template>
<el-dialog
title="押金抵扣"
:visible.sync="dialogVisible"
width="500px"
append-to-body
@open="handleOpen"
>
<el-form :model="form" :rules="rules" ref="form" label-width="5em" v-loading="loading" size="small">
<el-form-item label="抵扣金额" prop="amount">
<el-input-number
v-model="form.amount"
type="number"
placeholder="请输入抵扣金额"
:min="0"
controls-position="right"
style="width: 100%;"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="success" plain @click="handleSubmit()" icon="el-icon-check" :loading="submitLoading">确定</el-button>
<el-button plain @click="handleCancel()" icon="el-icon-close" :loading="submitLoading">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { deductOrder, getOrder } from '@/api/bst/order';
export default {
props: {
id: {
type: String,
default: null
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
detail: {},
form: {},
loading: false,
submitLoading: false,
rules: {
}
}
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
},
},
methods: {
getDetail() {
this.loading = true;
getOrder(this.id).then(response => {
this.detail = response.data;
}).finally(() => {
this.loading = false;
});
},
handleOpen() {
this.getDetail();
this.reset();
},
reset() {
this.form = {
id: this.id,
amount: null,
};
this.resetForm('form');
},
handleSubmit() {
this.$refs.form.validate().then(() => {
this.submitLoading = true;
deductOrder(this.form).then((response) => {
if (response.code == 200) {
this.$message.success('操作成功');
this.dialogVisible = false;
this.$emit('success');
}
}).finally(() => {
this.submitLoading = false;
});
});
},
handleCancel() {
this.dialogVisible = false;
}
}
}
</script>
<style lang="scss" scoped>
</style>