124 lines
4.6 KiB
Vue
124 lines
4.6 KiB
Vue
<template>
|
|
<div v-if="visible" class="modal fade show" id="exampleModalCenter" tabindex="-1"
|
|
aria-labelledby="exampleModalLabel" style="display: block; padding-right: 15px;" _mstvisible="0"
|
|
aria-modal="true" role="dialog">
|
|
<div class="modal-dialog modal-dialog-centered" _mstvisible="1">
|
|
<div class="modal-content" _mstvisible="2">
|
|
<div class="modal-header" _mstvisible="3">
|
|
<h5 class="modal-title" id="exampleModalCenterTitle" _msttexthash="13222534" _msthash="147"
|
|
_mstvisible="4">{{ title }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"
|
|
_mstaria-label="59709" _msthash="148" _mstvisible="4" @click="cancel"></button>
|
|
</div>
|
|
<div class="formcontent">
|
|
<form>
|
|
<div class="row mb-3">
|
|
<label for="inputName3" class="col-sm-2 col-form-label">套餐名称</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" v-model="form.name" class="form-control" id="inputName3">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="inpuCallLimit3" class="col-sm-2 col-form-label">月调用次数</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" v-model="form.callLimit" class="form-control" id="inputCallLimit3">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="inputPrice3" class="col-sm-2 col-form-label">价格</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" v-model="form.price" class="form-control" id="inputPrice3" v-money>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="inputOneMinuteLimit3" class="col-sm-2 col-form-label">调用频率限制</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" v-model="form.oneMinuteLimit" class="form-control"
|
|
id="inputOneMinuteLimit3">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer" _mstvisible="3">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" _msttexthash="5889065"
|
|
_msthash="150" _mstvisible="4" @click="cancel">关闭</button>
|
|
<button type="button" class="btn btn-primary" _msttexthash="10744773" _msthash="151" _mstvisible="4"
|
|
@click="submit">保存更改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'PackageFormModal',
|
|
props: {
|
|
title: {
|
|
type: String
|
|
},
|
|
formType: {
|
|
type: String,
|
|
default: 'edit'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
packageId: -2,
|
|
packageList: [],
|
|
form: {
|
|
name: '',
|
|
callLimit: 0,
|
|
price: '0',
|
|
oneMinuteLimit: 0
|
|
},
|
|
resolve: null
|
|
};
|
|
},
|
|
methods: {
|
|
open(packageId = null, packageInfo = null) {
|
|
this.resetForm();
|
|
this.visible = true;
|
|
if (packageInfo != null) {
|
|
this.packageId = packageId;
|
|
this.form.name = packageInfo.name;
|
|
this.form.callLimit = packageInfo.callLimit;
|
|
this.form.price = packageInfo.price.toString();
|
|
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: '',
|
|
callLimit: 0,
|
|
price: '0',
|
|
oneMinuteLimit: 0
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.formcontent {
|
|
padding: 0 30px;
|
|
}
|
|
</style>
|