nanxun/ql_apimanager_frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

y1111 #7

Open
chuyang wants to merge 3 commits from y1111 into main
pull from: y1111
merge into: nanxun:main
Conversation 0 Commits 3 Files Changed 8 +698 -323
8 changed files with 698 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/DataTable.vue
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6 text-center"> <div class="col-sm-12 col-md-6 text-center">
<button class="btn btn-sm btn-primary ms-2" @click="handleAddUser"> <button class="btn btn-sm btn-primary ms-2" @click="handleAddDate">
添加 添加
</button> </button>
<button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete"> <button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete">
@ -351,7 +351,9 @@ export default {
this.$emit("dataDelete", id); this.$emit("dataDelete", id);
}, },
handleSearch() {}, handleSearch() {},
handleAddUser() {}, handleAddDate() {
this.$emit("dateAdd", {});
},
handleBatchDelete() {}, handleBatchDelete() {},
}, },
watch: { watch: {

159
src/components/PackageFormModal.vue Normal file
View File

@ -0,0 +1,159 @@
<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>

25
src/request/api.js
View File

@ -29,6 +29,19 @@ const getUserInfoById = async (id) => await request.get(`/api/Admin/UserInfo?use
//更新用户信息 //更新用户信息
const updateUserInfo = async (id,param) => await request.post(`/api/Admin/UpdateUser?userId=${id}`,param) const updateUserInfo = async (id,param) => await request.post(`/api/Admin/UpdateUser?userId=${id}`,param)
//获取套餐列表（分页）
const getPackageList =async (pageIndex,pageSize,desc)=> await request.get(`api/Package/GetPackageList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
//获取指定套餐信息
const getPackageInfo = async (id) => await request.get(`/api/Package/GetPackageInfo?packageId=${id}`)
//删除指定套餐
const deletePackage = async (id) => await request.delete(`/api/Package/DeletePackage?packageId=${id}`)
//更新指定套餐信息
const updatePackage = async (id, param) => await request.post(`/api/Package/UpdatePackage?packageId=${id}`, param)
const addPackage = async (param) => await request.post('/api/Package/AddPackage', param)
//获取api列表 //获取api列表
const getApiList = async (pageIndex,pageSize,desc) => await request.get(`/api/apis/ApiList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`) const getApiList = async (pageIndex,pageSize,desc) => await request.get(`/api/apis/ApiList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
@ -41,9 +54,6 @@ const getApiInfoById = async (id) => await request.get(`/api/Apis/ApiInfo?apiId=
//更新API信息 //更新API信息
const updateApiInfo = async (id,param) => await request.post(`/api/Apis/UpdateApi?apiId=${id}`,param) const updateApiInfo = async (id,param) => await request.post(`/api/Apis/UpdateApi?apiId=${id}`,param)
//获取套餐列表
const getPackageList = async (pageIndex,pageSize,desc) => await request.get(`/api/Package/GetPackageList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
//更新系统配置 //更新系统配置
const updateSystemConfig = async (configName,configBody) => await request.post('/api/SystemConfig/UpdateSystemConfig',{configName:configName,configBody:configBody}) const updateSystemConfig = async (configName,configBody) => await request.post('/api/SystemConfig/UpdateSystemConfig',{configName:configName,configBody:configBody})
@ -58,10 +68,15 @@ export default {
deleteUser, deleteUser,
getUserInfoById, getUserInfoById,
updateUserInfo, updateUserInfo,
getApiList, getPackageList,
getPackageInfo,
deletePackage,
updatePackage,
addPackage,
deleteApi, deleteApi,
getApiInfoById, getApiInfoById,
updateApiInfo, updateApiInfo,
getPackageList, getPackageList,
updateSystemConfig updateSystemConfig,
getApiList
} }

6
src/views/Notfound.vue
View File

@ -5,9 +5,9 @@
<div class="error-info"> <div class="error-info">
<h1>404</h1> <h1>404</h1>
<p> <p>
It seems that the page you are looking for no longer exists.<br />Please 抱歉，您访问的页面不存在，可能网址有误，或者已被删除<br />
contact our <a href="#">help center</a> or go to the 点击返回
<RouterLink to="/home">homepage</RouterLink>. <RouterLink to="/home">首页</RouterLink>.
</p> </p>
</div> </div>
<div class="error-image"></div> <div class="error-image"></div>

220
src/views/auth/Login.vue
View File

@ -1,114 +1,134 @@
<template> <template>
<div class="container"> <div class="container">
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-md-12 col-lg-4"> <div class="col-md-12 col-lg-4">
<div class="card login-box-container"> <div class="card login-box-container">
<div class="card-body"> <div class="card-body">
<div class="authent-logo"> <div class="authent-logo">
<img src="../../assets/images/logo@2x.png" alt=""> <img src="../../assets/images/logo@2x.png" alt="" />
</div>
<div class="authent-text">
<p>欢迎访问{{ systemname }}!</p>
<p>请登录你的账户.</p>
</div>
<form>
<div class="mb-3">
<div class="form-floating">
<input v-model="formdata.username" type="text" class="form-control"
id="floatingInput" placeholder="username">
<label for="floatingInput">用户名</label>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input v-model="formdata.password" type="password" class="form-control"
id="floatingPassword" placeholder="Password">
<label for="floatingPassword">密码</label>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<div class="d-grid">
<button type="button" class="btn btn-info m-b-xs" @click="login">登录</button>
<button class="btn btn-primary">三方登录</button>
</div>
</form>
<div class="authent-reg">
<p>没有账户？<router-link to="register">点击创建</router-link></p>
</div>
</div>
</div>
</div> </div>
<div class="authent-text">
<p>欢迎访问{{ systemname }}!</p>
<p>请登录你的账户.</p>
</div>
<form>
<div class="mb-3">
<div class="form-floating">
<input
v-model="formdata.username"
type="text"
class="form-control"
id="floatingInput"
placeholder="username"
/>
<label for="floatingInput">用户名</label>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input
v-model="formdata.password"
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
<label for="floatingPassword">密码</label>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<div class="d-grid">
<button type="button" class="btn btn-info m-b-xs" @click="login">
登录
</button>
<button class="btn btn-primary">三方登录</button>
</div>
</form>
<div class="authent-reg">
<p>没有账户？<router-link to="register">点击创建</router-link></p>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import md5 from 'blueimp-md5'; import md5 from "blueimp-md5";
import { mapGetters } from 'vuex'; import { mapGetters } from "vuex";
import auth from '@/utils/auth'; import auth from "@/utils/auth";
export default { export default {
data() { data() {
return { return {
formdata: { formdata: {
username: '', username: "",
password: '' password: "",
} },
};
},
methods: {
/**
* 用户登录
*/
async login() {
//记录原始密码，用于修改MD5后还原原始文本
const passwordOld = this.formdata.password;
this.formdata.password = md5(passwordOld);
try {
const res = await this.$api.login(this.formdata);
let msg = "";
let type = "danger";
switch (res.code) {
case 2000:
msg = "登录成功";
break;
case 2001:
msg = "用户名或密码错误";
break;
case 2002:
msg = "账户被禁用";
break;
case 2004:
msg = "用户不存在";
break;
default:
msg = "登录失败";
break;
} }
}, if (res.code == 2000) {
methods: { //储存登录凭证
/** auth.setAccessToken(res.data.token);
* 用户登录 auth.setRefreshToken(res.data.refreshToken);
*/ auth.setUserId(res.data.userInfo.id);
async login() { this.$store.commit("userinfo/SET_USERINFO", res.data.userInfo);
//记录原始密码，用于修改MD5后还原原始文本 type = "success";
const passwordOld = this.formdata.password this.$alert(msg, type);
this.formdata.password = md5(passwordOld) this.$router.push("/layout/index");
try { } else {
const res = await this.$api.login(this.formdata) this.$alert(msg, type);
let msg = ''
let type = 'danger'
switch (res.code) {
case 2000: msg = '登录成功'; break
case 2001: msg = '用户名或密码错误'; break
case 2002: msg = '账户被禁用'; break
case 2004: msg = '用户不存在'; break
default: msg = '登录失败'; break
}
if (res.code == 2000) {
//储存登录凭证
auth.setAccessToken(res.data.token)
auth.setRefreshToken(res.data.refreshToken)
auth.setUserId(res.data.userInfo.id)
this.$store.commit('userinfo/SET_USERINFO', res.data.userInfo)
type = 'success'
this.$alert(msg, type)
this.$router.push('/layout/index')
}else{
this.$alert(msg, type)
}
} catch (e) {
console.log(e)
this.$alert('未知错误', 'error')
} finally {
//还原密码文本
this.formdata.password = passwordOld
}
} }
} catch (e) {
console.log(e);
this.$alert("未知错误", "error");
} finally {
//还原密码文本
this.formdata.password = passwordOld;
}
}, },
computed: { },
/** computed: {
* 初始化系统配置 /**
*/ * 初始化系统配置
...mapGetters('config', ['systemname']) */
} ...mapGetters("config", ["systemname"]),
} },
};
</script> </script>
<style scoped></style> <style scoped></style>

409
src/views/auth/Register.vue
View File

@ -1,194 +1,251 @@
<template> <template>
<div class="login-page" :class="{'no-loader':loader}"> <div class="login-page" :class="{ 'no-loader': loader }">
<div class='loader'> <div class="loader">
<div class='spinner-grow text-primary' role='status'> <div class="spinner-grow text-primary" role="status">
<span class='sr-only'>Loading...</span> <span class="sr-only">Loading...</span>
</div>
</div>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-12 col-lg-4">
<div class="card login-box-container">
<div class="card-body">
<div class="authent-logo">
<img src="../../assets/images/logo@2x.png" alt="" />
</div>
<div class="authent-text">
<p>欢迎访问{{ systemname }}!</p>
<p>此处注册您的账户</p>
</div>
<form>
<div class="mb-3">
<div class="form-floating">
<input
type="text"
class="form-control"
:class="{ 'is-invalid': error.username }"
id="floatingInput"
placeholder="账号"
v-model="form.username"
@blur="verification_username"
/>
<label for="floatingInput">账号</label>
<div class="invalid-feedback" :class="{ 'd-none': !error.username }">
{{ error.username }}
</div>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input
type="email"
class="form-control"
:class="{ 'is-invalid': error.email }"
id="floatingInput1"
placeholder="邮箱地址"
v-model="form.email"
@blur="verification_email"
/>
<label for="floatingInput">邮箱地址</label>
<div class="invalid-feedback" :class="{ 'd-none': !error.email }">
{{ error.email }}
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group">
<div class="form-floating">
<input
type="text"
class="form-control"
:class="{ 'is-invalid': error.validatecode }"
id="floatingPassword"
placeholder="验证码"
v-model="form.validatecode"
@blur="verification_validatecode"
/>
<label for="floatingPassword">验证码</label>
</div>
<button class="btn btn-primary ms-2" type="button" @click="GetCode">
{{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
</button>
<div
class="invalid-feedback"
:class="{ 'd-none': !error.validatecode }"
>
{{ error.validatecode }}
</div>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input
type="password"
class="form-control"
:class="{ 'is-invalid': error.password }"
id="floatingPassword1"
placeholder="密码"
v-model="form.password"
@blur="verification_password"
/>
<label for="floatingPassword">密码</label>
<div class="invalid-feedback" :class="{ 'd-none': !error.password }">
{{ error.password }}
</div>
</div>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-model="form.check"
@blur="verification_check"
/>
<label class="form-check-label" for="exampleCheck1"
>我同意 <a href="#">条款与细则</a></label
>
<div class="invalid-feedback" :class="{ 'd-none': form.check }">
{{ error.agrement }}
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary m-b-xs" @click="submit">
注册
</button>
</div>
</form>
<div class="authent-login">
<p>已经有了账号? <RouterLink to="/login">登录</RouterLink></p>
</div>
</div> </div>
</div> </div>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-12 col-lg-4">
<div class="card login-box-container">
<div class="card-body">
<div class="authent-logo">
<img src="../../assets/images/logo@2x.png" alt="">
</div>
<div class="authent-text">
<p>Welcome to IO!</p>
<p>Enter your details to create your account</p>
</div>
<form>
<div class="mb-3">
<div class="form-floating">
<input type="text" class="form-control" :class="{'is-invalid': error.username}" id="floatingInput" placeholder="账号" v-model="form.username" @blur="verification_username">
<label for="floatingInput">账号</label>
<div class="invalid-feedback" :class="{'d-none': !error.username}">
{{ error.username }}
</div>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="email" class="form-control" :class="{'is-invalid': error.email}" id="floatingInput1" placeholder="邮箱地址" v-model="form.email" @blur="verification_email">
<label for="floatingInput">邮箱地址</label>
<div class="invalid-feedback" :class="{'d-none': !error.email}">
{{ error.email }}
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group">
<div class="form-floating">
<input type="text" class="form-control" :class="{'is-invalid': error.validatecode}" id="floatingPassword" placeholder="验证码" v-model="form.validatecode" @blur="verification_validatecode">
<label for="floatingPassword">验证码</label>
</div>
<button class="btn btn-primary ms-2" type="button" @click="GetCode"> {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}</button>
<div class="invalid-feedback" :class="{'d-none': !error.validatecode}">
{{ error.validatecode }}
</div>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="password" class="form-control" :class="{'is-invalid': error.password}" id="floatingPassword1" placeholder="密码" v-model="form.password" @blur="verification_password">
<label for="floatingPassword">密码</label>
<div class="invalid-feedback" :class="{'d-none': !error.password}">
{{ error.password }}
</div>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="form.check" @blur="verification_check">
<label class="form-check-label" for="exampleCheck1">我同意 <a href="#">条款与细则</a></label>
<div class="invalid-feedback" :class="{'d-none': form.check}">
{{ error.agrement }}
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary m-b-xs" @click="submit">注册</button>
</div>
</form>
<div class="authent-login">
<p>已经有了账号? <RouterLink to="/login">登录</RouterLink></p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { SendValidateCode_api,registered_api } from '@/request/api' import { mapGetters } from "vuex";
export default { export default {
name: 'Register', name: "Register",
data() { data() {
return { return {
loader:false, loader: false,
form:{ form: {
username: '', username: "",
password: '', password: "",
validatecode: '', validatecode: "",
email: '', email: "",
check: false, check: false,
}, },
error: { error: {
username: '', username: "",
password: '', password: "",
validatecode: '', validatecode: "",
email: '', email: "",
agrement :'' agrement: "",
}, },
countdown: 0 countdown: 0,
} };
},
mounted() {
this.loader = true;
},
computed: {
/**
* 初始化系统配置
*/
...mapGetters("config", ["systemname"]),
},
methods: {
verification_username() {
if (!this.form.username || this.form.username.length > 20) {
this.error.username = "账号不能为空或超过20个字符";
} else {
this.error.username = "";
}
}, },
mounted() { verification_email() {
this.loader=true const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!this.form.email) {
this.error.email = "邮箱不能为空";
} else if (!emailPattern.test(this.form.email)) {
this.error.email = "邮箱格式不正确";
} else {
this.error.email = "";
}
}, },
methods: { verification_password() {
verification_username() { if (!this.form.password || this.form.password.length < 6) {
if (!this.form.username || this.form.username.length >20) { this.error.password = "密码不能为空或小于6个字符";
this.error.username = '账号不能为空或超过20个字符' } else {
}else { this.error.password = "";
this.error.username = '' }
} },
}, verification_validatecode() {
verification_email() { if (!this.form.validatecode || this.form.validatecode.length != 5) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ this.error.validatecode = "验证码错误";
if (!this.form.email) { } else {
this.error.email = '邮箱不能为空' this.error.validatecode = "";
}else if (!emailPattern.test(this.form.email)) { }
this.error.email = '邮箱格式不正确' },
}else { verification_check() {
this.error.email = '' if (!this.form.check) {
} this.error.agrement = "请同意条款与细则";
}, } else {
verification_password() { this.error.agrement = "";
if (!this.form.password || this.form.password.length < 6) { }
this.error.password = '密码不能为空或小于6个字符' },
}else { async GetCode() {
this.error.password = '' this.verification_email();
} if (!this.error.email) {
}, let res = await this.$api.SendValidateCode(this.form.email);
verification_validatecode() { this.countdown = 60;
if (!this.form.validatecode || this.form.validatecode.length != 5) { this.startCountdown();
this.error.validatecode = '验证码错误' }
}else { },
this.error.validatecode = '' startCountdown() {
} const timer = setInterval(() => {
}, if (this.countdown > 0) {
verification_check() { this.countdown--;
if (!this.form.check) { } else {
this.error.agrement = '请同意条款与细则' clearInterval(timer);
}else {
this.error.agrement = ''
}
},
async GetCode() {
this.verification_email()
if (!this.error.email) {
let res=await this.$api.SendValidateCode(this.form.email)
this.countdown = 60
this.startCountdown()
}
},
startCountdown() {
const timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(timer);
}
}, 1000)
},
async submit() {
this.verification_username()
this.verification_email()
this.verification_password()
this.verification_validatecode()
this.verification_check()
if (!this.error.username && !this.error.email && !this.error.password && !this.error.validatecode && !this.error.agrement) {
let res=await this.$api.register({
username: this.form.username,
password: this.form.password,
email: this.form.email,
verificationCode: this.form.validatecode
})
if (res.code == 1000) {
this.$router.push('/login')
}
}
}
} }
}, 1000);
},
async submit() {
this.verification_username();
this.verification_email();
this.verification_password();
this.verification_validatecode();
this.verification_check();
if (
!this.error.username &&
!this.error.email &&
!this.error.password &&
!this.error.validatecode &&
!this.error.agrement
) {
let res = await this.$api.register({
username: this.form.username,
password: this.form.password,
email: this.form.email,
verificationCode: this.form.validatecode,
});
if (res.code == 1000) {
this.$router.push("/login");
} }
}
},
},
};
</script> </script>
<style scoped> <style scoped>
.invalid-feedback { .invalid-feedback {
display: block !important; display: block !important;
} }
</style> </style>

118
src/views/layout/Packages.vue
View File

@ -0,0 +1,118 @@
<template>
<div class="main-wrapper">
<div class="row">
<div class="col" v-if="isLoaded">
<DataTable
title="套餐管理"
:headers="tableHeaders"
:rows="tableData"
:data-count="tableData.length"
@pageChanged="pageChangedHandle"
@dataDelete="deleteHandle"
@dataModify="modifyHandle"
@dateAdd="addHandle"
/>
<PackageFormModal ref="packageFormModal" :title="message" />
</div>
</div>
</div>
</template>
<script>
import DataTable from "@/components/DataTable.vue";
import PackageFormModal from "@/components/PackageFormModal.vue";
export default {
components: {
DataTable,
PackageFormModal,
},
data() {
return {
message: "",
dataCount: 0,
isLoaded: false,
tableHeaders: [
{ text: "编号", value: "id", width: "155px" },
{ text: "套餐名", value: "name", width: "214px" },
{ text: "价格", value: "price", width: "82px" },
{ text: "调用次数限制", value: "callLimit", width: "103px" },
{ text: "一分钟调用限制", value: "oneMinuteLimit", width: "300px" },
],
tableData: [],
};
},
methods: {
async loadPackesList(pageIndex = 1, pageSize = 10, desc = false) {
try {
const res = await this.$api.getPackageList(pageIndex, pageSize, desc);
if (res.code == "1000") {
this.tableData = res.data;
}
} catch (e) {
this.$alert("用户列表数据加载失败!", "danger");
console.error(e);
}
},
async pageChangedHandle(newval) {
await this.loadPackesList(newval.pageIndex, newval.pageSize, false);
},
async deleteHandle(id) {
const confirmRes = await this.$confirm("删除", "是否删除此套餐？");
if (!confirmRes) return;
try {
const res = await this.$api.deletePackage(id);
if (res.code != 1000) {
this.$alert(res.message, "danger");
return;
}
this.$alert("删除成功", "success");
} catch (e) {
this.$alert(e, "danger");
}
},
async modifyHandle(id) {
try {
//加载套餐信息到新窗口
this.message = "修改套餐";
const userinfoRes = await this.$api.getPackageInfo(id);
if (userinfoRes.code != 1000) {
this.$alert(userinfoRes.message, "danger");
return;
}
//拉起修改弹窗
const res = await this.$refs.packageFormModal.open(id, userinfoRes.data);
//弹窗返回为null表示用户关闭了窗口，不执行操作
if (res == null) return;
const modifyRes = await this.$api.updatePackage(id, res);
if (modifyRes.code != 1000) {
this.$alert(modifyRes.message, "danger");
return;
}
this.$alert("修改成功", "success");
} catch (e) {
this.$alert(e, "danger");
}
},
async addHandle() {
try {
this.message = "添加套餐";
const res = await this.$refs.packageFormModal.open(null);
//弹窗返回为null表示用户关闭了窗口，不执行操作
if (res == null) return;
const modifyRes = await this.$api.addPackage(res);
if (modifyRes.code != 1000) {
this.$alert(modifyRes.message, "danger");
return;
}
this.$alert("添加成功", "success");
} catch (e) {
this.$alert(e, "danger");
}
},
},
mounted() {
this.isLoaded = true;
this.loadPackesList();
},
};
</script>

78
src/views/layout/Users.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<div class="main-wrapper"> <div class="main-wrapper">
<div class="row"> <div class="row">
<div class="col" v-if="isLoaded"> <div class="col" v-if="isLoaded">
<DataTable title="用户管理" :headers="tableHeaders" :rows="tableData" :data-count="dataCount" <DataTable
@pageChanged="pageChangedHandle" @dataDelete="deleteHandle" @dataModify="modifyHandle" /> title="用户管理"
:headers="tableHeaders"
:rows="tableData"
:data-count="dataCount"
@pageChanged="pageChangedHandle"
@dataDelete="deleteHandle"
@dataModify="modifyHandle"
/>
<user-form-modal title="修改用户" ref="userModal" /> <user-form-modal title="修改用户" ref="userModal" />
</div> </div>
</div> </div>
@ -12,13 +18,13 @@
</template> </template>
<script> <script>
import DataTable from '@/components/DataTable.vue'; import DataTable from "@/components/DataTable.vue";
import UserFormModal from '../../components/UserFormModal.vue'; import UserFormModal from "../../components/UserFormModal.vue";
export default { export default {
components: { components: {
DataTable, DataTable,
UserFormModal UserFormModal,
}, },
data() { data() {
return { return {
@ -31,7 +37,7 @@ export default {
{ text: "余额", value: "balance", width: "29px", type: "money" }, { text: "余额", value: "balance", width: "29px", type: "money" },
{ text: "状态", value: "isBan", width: "82px", type: "bool" }, { text: "状态", value: "isBan", width: "82px", type: "bool" },
{ text: "角色", value: "roles", width: "103px", type: "arrObj", child: "role" }, { text: "角色", value: "roles", width: "103px", type: "arrObj", child: "role" },
{ text: "创建时间", value: "created", width: "103px", type: "datetime" } { text: "创建时间", value: "created", width: "103px", type: "datetime" },
], ],
tableData: [], tableData: [],
}; };
@ -39,61 +45,59 @@ export default {
methods: { methods: {
async loadUserList(pageIndex = 1, pageSize = 10, desc = false) { async loadUserList(pageIndex = 1, pageSize = 10, desc = false) {
try { try {
const res = await this.$api.getUserList(pageIndex, pageSize, desc) const res = await this.$api.getUserList(pageIndex, pageSize, desc);
if (res.code == '1000') { if (res.code == "1000") {
this.tableData = res.data this.tableData = res.data;
} }
} catch (e) { } catch (e) {
this.$alert('用户列表数据加载失败!', 'danger') this.$alert("用户列表数据加载失败!", "danger");
console.error(e) console.error(e);
} }
}, },
async pageChangedHandle(newval) { async pageChangedHandle(newval) {
await this.loadUserList(newval.pageIndex, newval.pageSize, false) await this.loadUserList(newval.pageIndex, newval.pageSize, false);
}, },
async deleteHandle(id) { async deleteHandle(id) {
const confirmRes = await this.$confirm('删除', '是否删除用户？') const confirmRes = await this.$confirm("删除", "是否删除用户？");
if (!confirmRes) return; if (!confirmRes) return;
try { try {
const res = await this.$api.deleteUser(id) const res = await this.$api.deleteUser(id);
if (res.code != 1000) { if (res.code != 1000) {
this.$alert(res.message, 'danger') this.$alert(res.message, "danger");
return; return;
} }
this.$alert('删除成功', 'success') this.$alert("删除成功", "success");
} catch (e) { } catch (e) {
this.$alert(e, 'danger') this.$alert(e, "danger");
} }
}, },
async modifyHandle(id) { async modifyHandle(id) {
try { try {
//加载用户信息到新窗口 //加载用户信息到新窗口
const userinfoRes = await this.$api.getUserInfoById(id) const userinfoRes = await this.$api.getUserInfoById(id);
if(userinfoRes.code != 1000){ if (userinfoRes.code != 1000) {
this.$alert(userinfoRes.message,'danger') this.$alert(userinfoRes.message, "danger");
return return;
} }
//拉起修改弹窗 //拉起修改弹窗
const res = await this.$refs.userModal.open(id,userinfoRes.data) const res = await this.$refs.userModal.open(id, userinfoRes.data);
//弹窗返回为null表示用户关闭了窗口，不执行操作 //弹窗返回为null表示用户关闭了窗口，不执行操作
if(res == null) return if (res == null) return;
const modifyRes = await this.$api.updateUserInfo(id,res) const modifyRes = await this.$api.updateUserInfo(id, res);
if(modifyRes.code != 1000){ if (modifyRes.code != 1000) {
this.$alert(modifyRes.message, 'danger') this.$alert(modifyRes.message, "danger");
return return;
} }
this.$alert('修改成功', 'success') this.$alert("修改成功", "success");
} catch (e) { } catch (e) {
this.$alert(e, 'danger') this.$alert(e, "danger");
} }
} },
}, },
async mounted() { async mounted() {
await this.loadUserList() await this.loadUserList();
this.dataCount = (await this.$api.getUserCount()).data this.dataCount = (await this.$api.getUserCount()).data;
this.isLoaded = true this.isLoaded = true;
} },
}; };
</script> </script>