160 lines
4.0 KiB
Vue
160 lines
4.0 KiB
Vue
<template>
|
|
<div
|
|
v-if="visible"
|
|
class="modal fade show"
|
|
id="packageModal"
|
|
tabindex="-1"
|
|
aria-labelledby="packageModalLabel"
|
|
style="display: block; padding-right: 15px"
|
|
aria-modal="true"
|
|
role="dialog"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="packageModalTitle">{{ title }}</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="关闭"
|
|
@click="cancel"
|
|
></button>
|
|
</div>
|
|
<div class="formcontent">
|
|
<form>
|
|
<div class="row mb-3">
|
|
<label for="packageName" class="col-sm-2 col-form-label">套餐名</label>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="text"
|
|
v-model="form.name"
|
|
class="form-control"
|
|
id="packageName"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="packagePrice" class="col-sm-2 col-form-label">价格</label>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="number"
|
|
v-model="form.price"
|
|
class="form-control"
|
|
id="packagePrice"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="callLimit" class="col-sm-2 col-form-label">调用次数限制</label>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="number"
|
|
v-model="form.callLimit"
|
|
class="form-control"
|
|
id="callLimit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="oneMinuteLimit" class="col-sm-2 col-form-label"
|
|
>一分钟调用限制</label
|
|
>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="number"
|
|
v-model="form.oneMinuteLimit"
|
|
class="form-control"
|
|
id="oneMinuteLimit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
@click="cancel"
|
|
>
|
|
关闭
|
|
</button>
|
|
<button type="button" class="btn btn-primary" @click="submit">保存更改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "PackageFormModal",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "编辑套餐",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
packageId: null,
|
|
form: {
|
|
name: "",
|
|
price: "",
|
|
callLimit: "",
|
|
oneMinuteLimit: "",
|
|
},
|
|
resolve: null,
|
|
};
|
|
},
|
|
methods: {
|
|
open(packageId, packageInfo = null) {
|
|
this.resetForm();
|
|
this.visible = true;
|
|
this.packageId = packageId;
|
|
if (packageInfo) {
|
|
this.form.name = packageInfo.name;
|
|
this.form.price = packageInfo.price;
|
|
this.form.callLimit = packageInfo.callLimit;
|
|
this.form.oneMinuteLimit = packageInfo.oneMinuteLimit;
|
|
}
|
|
return new Promise((resolve) => {
|
|
this.resolve = resolve;
|
|
});
|
|
},
|
|
submit() {
|
|
this.visible = false;
|
|
this.resolve && this.resolve(this.form);
|
|
},
|
|
cancel() {
|
|
this.visible = false;
|
|
this.resolve && this.resolve(null);
|
|
},
|
|
resetForm() {
|
|
this.form = {
|
|
name: "",
|
|
price: "",
|
|
callLimit: "",
|
|
oneMinuteLimit: "",
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.formcontent {
|
|
padding: 0 30px;
|
|
}
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style>
|