U optimize request

This commit is contained in:
zhenorzz 2021-05-17 14:28:06 +08:00
parent 59154c47c2
commit 36d765efe1
7 changed files with 96 additions and 159 deletions

View File

@ -1,5 +1,4 @@
import Axios from './axios'
import { HttpResponse, Pagination, Total, ID } from './types'
import { Request, Pagination, ID, Total } from './types'
export class NamespaceData {
public datagram!: {
@ -29,7 +28,7 @@ export class NamespaceUserData {
}
}
export class NamespaceList {
export class NamespaceList extends Request {
readonly url = '/namespace/getList'
readonly method = 'get'
@ -39,48 +38,29 @@ export class NamespaceList {
list: NamespaceData['datagram']['detail'][]
}
constructor(pagination: Pagination) {
super()
this.pagination = pagination
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
params: { ...this.pagination },
})
this.param = { ...pagination }
}
}
export class NamespaceTotal {
export class NamespaceTotal extends Request {
readonly url = '/namespace/getTotal'
readonly method = 'get'
public datagram!: Total
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
})
}
}
export class NamespaceUserOption {
export class NamespaceUserOption extends Request {
readonly url = '/namespace/getUserOption'
readonly method = 'get'
public datagram!: {
list: NamespaceUserData['datagram']['detail'][]
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
})
}
}
export class NamespaceUserList {
export class NamespaceUserList extends Request {
readonly url = '/namespace/getBindUserList'
readonly method = 'get'
public param: ID
@ -88,18 +68,12 @@ export class NamespaceUserList {
list: NamespaceUserData['datagram']['detail'][]
}
constructor(param: NamespaceUserList['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
params: { ...this.param },
})
}
}
export class NamespaceAdd {
export class NamespaceAdd extends Request {
readonly url = '/namespace/add'
readonly method = 'post'
public param: {
@ -107,18 +81,12 @@ export class NamespaceAdd {
}
public datagram!: ID
constructor(param: NamespaceAdd['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class NamespaceEdit {
export class NamespaceEdit extends Request {
readonly url = '/namespace/edit'
readonly method = 'put'
public param: {
@ -126,18 +94,12 @@ export class NamespaceEdit {
name: string
}
constructor(param: NamespaceEdit['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class NamespaceUserAdd {
export class NamespaceUserAdd extends Request {
readonly url = '/namespace/addUser'
readonly method = 'post'
public param: {
@ -146,31 +108,19 @@ export class NamespaceUserAdd {
role: string
}
constructor(param: NamespaceUserAdd['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class NamespaceUserRemove {
export class NamespaceUserRemove extends Request {
readonly url = '/namespace/removeUser'
readonly method = 'delete'
public param: {
namespaceUserId: number
}
constructor(param: NamespaceUserRemove['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}

View File

@ -1,4 +1,7 @@
// 接口响应通过格式
import Axios from './axios'
import { Method, AxiosRequestConfig } from 'axios'
export interface HttpResponse<T> {
code: number
message: string
@ -17,3 +20,23 @@ export interface Total {
export interface ID {
id: number
}
export abstract class Request {
abstract url: string
abstract method: Method
public param!: ID | Record<string, unknown>
public datagram!: never | Total | ID | Record<string, unknown>
public request(): Promise<HttpResponse<this['datagram']>> {
const config: AxiosRequestConfig = {
url: this.url,
method: this.method,
}
if (this.method.toLowerCase() === 'get') {
config.params = { ...this.param }
} else {
config.data = { ...this.param }
}
return Axios.request(config)
}
}

View File

@ -1,7 +1,6 @@
import Axios from './axios'
import { HttpResponse, Pagination, Total, ID } from './types'
import { Request, Pagination, ID, Total } from './types'
export class Login {
export class Login extends Request {
readonly url = '/user/login'
readonly method = 'post'
public param: {
@ -12,18 +11,12 @@ export class Login {
namespaceList: { id: number; name: string; role: string }[]
}
constructor(param: Login['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class Info {
export class Info extends Request {
readonly url = '/user/info'
readonly method = 'get'
public datagram!: {
@ -34,12 +27,6 @@ export class Info {
superManager: number
}
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
})
}
}
export class UserData {
@ -59,7 +46,7 @@ export class UserData {
}
}
export class UserList {
export class UserList extends Request {
readonly url = '/user/getList'
readonly method = 'get'
@ -69,32 +56,19 @@ export class UserList {
list: UserData['datagram']['detail'][]
}
constructor(pagination: Pagination) {
super()
this.pagination = pagination
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
params: { ...this.pagination },
})
this.param = { ...pagination }
}
}
export class UserTotal {
export class UserTotal extends Request {
readonly url = '/user/getTotal'
readonly method = 'get'
public datagram!: Total
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
})
}
}
export class UserOption {
export class UserOption extends Request {
readonly url = '/user/getOption'
readonly method = 'get'
public datagram!: {
@ -111,15 +85,9 @@ export class UserOption {
updateTime: string
}[]
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
})
}
}
export class UserAdd {
export class UserAdd extends Request {
readonly url = '/user/add'
readonly method = 'post'
public param: {
@ -129,20 +97,13 @@ export class UserAdd {
contact: string
superManager: number
}
public datagram!: ID
constructor(param: UserAdd['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<this['datagram']>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class UserEdit {
export class UserEdit extends Request {
readonly url = '/user/edit'
readonly method = 'put'
public param: {
@ -153,34 +114,22 @@ export class UserEdit {
superManager: number
}
constructor(param: UserEdit['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class UserRemove {
export class UserRemove extends Request {
readonly url = '/user/remove'
readonly method = 'delete'
public param: ID
constructor(param: ID) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}
export class UserChangePassword {
export class UserChangePassword extends Request {
readonly url = '/user/changePassword'
readonly method = 'put'
public param: {
@ -188,13 +137,7 @@ export class UserChangePassword {
newPwd: string
}
constructor(param: UserChangePassword['param']) {
super()
this.param = param
}
public request(): Promise<HttpResponse<never>> {
return Axios.request({
url: this.url,
method: this.method,
data: { ...this.param },
})
}
}

View File

@ -1036,7 +1036,7 @@ import {
getBindServerList,
getReviewList,
} from '@/api/project'
import { getUserOption } from '@/api/namespace'
import { NamespaceUserOption } from '@/api/namespace'
import { role } from '@/utils/namespace'
import { empty, parseTime, parseGitURL } from '@/utils'
import { defineComponent } from 'vue'
@ -1264,7 +1264,7 @@ export default defineComponent({
parseTime,
parseGitURL,
getUserOption() {
getUserOption().then((response) => {
new NamespaceUserOption().request().then((response) => {
this.userOption = response.data.list
})
},

View File

@ -51,7 +51,11 @@
</el-select>
</el-form-item>
<el-form-item style="margin-right: 0px; margin-bottom: 5px">
<el-button type="primary" @click="handleAddUser">
<el-button
type="primary"
:disabled="formProps.disabled"
@click="addUser"
>
{{ $t('confirm') }}
</el-button>
<el-button @click="showUserAddView = false">
@ -62,6 +66,7 @@
</el-row>
</el-row>
<el-table
v-loading="tableLoading"
border
stripe
highlight-current-row
@ -139,11 +144,17 @@ export default defineComponent({
emit('update:modelValue', val)
},
})
let tableLoading = ref(false)
const getBindUserList = (namespaceId: number) => {
new NamespaceUserList({ id: namespaceId }).request().then((response) => {
tableData.value = response.data.list
})
tableLoading.value = true
new NamespaceUserList({ id: namespaceId })
.request()
.then((response) => {
tableData.value = response.data.list
})
.finally(() => {
tableLoading.value = false
})
}
watch(
() => props.modelValue,
@ -168,6 +179,7 @@ export default defineComponent({
role,
dialogVisible,
getBindUserList,
tableLoading,
tableData,
showUserAddView,
handleAddUser,
@ -180,7 +192,7 @@ export default defineComponent({
disabled: false,
},
formData: {
namespaceId: this.namespaceId,
namespaceId: 0,
userIds: [],
role: '',
},
@ -197,6 +209,11 @@ export default defineComponent({
},
}
},
watch: {
namespaceId: function (newVal) {
this.formData.namespaceId = newVal
},
},
methods: {
addUser() {
;(this.$refs.addUserForm as Validator).validate((valid: boolean) => {

View File

@ -97,15 +97,18 @@
/>
</el-row>
</template>
<script>
<script lang="ts">
import {
NamespaceList,
NamespaceTotal,
NamespaceAdd,
NamespaceEdit,
NamespaceData,
} from '@/api/namespace'
import { role } from '@/utils/namespace'
import tableHeight from '@/mixin/tableHeight'
import { ElMessage } from 'element-plus'
import Validator from 'async-validator'
import TheUserDialog from './components/TheUserDialog.vue'
import { defineComponent } from 'vue'
export default defineComponent({
@ -119,7 +122,7 @@ export default defineComponent({
dialogUserVisible: false,
selectedItem: {},
tableLoading: false,
tableData: [],
tableData: [] as NamespaceList['datagram']['list'],
pagination: {
page: 1,
rows: 16,
@ -131,6 +134,7 @@ export default defineComponent({
},
formData: {
id: 0,
name: '',
},
formRules: {
name: [{ required: true, message: 'Name required', trigger: 'blur' }],
@ -161,7 +165,7 @@ export default defineComponent({
})
},
handlePageChange(val) {
handlePageChange(val = 1) {
this.pagination.page = val
this.getList()
},
@ -171,18 +175,18 @@ export default defineComponent({
this.dialogVisible = true
},
handleEdit(data) {
handleEdit(data: NamespaceData['datagram']['detail']) {
this.formData = Object.assign({}, data)
this.dialogVisible = true
},
handleUser(data) {
handleUser(data: NamespaceData['datagram']['detail']) {
this.selectedItem = data
this.dialogUserVisible = true
},
submit() {
this.$refs.form.validate((valid) => {
;(this.$refs.form as Validator).validate((valid: boolean) => {
if (valid) {
if (this.formData.id === 0) {
this.add()
@ -197,12 +201,12 @@ export default defineComponent({
add() {
this.formProps.disabled = true
new NamespaceAdd()
.request(this.formData)
new NamespaceAdd(this.formData)
.request()
.then(() => {
this.getList()
this.getTotal()
this.$message.success('Need to login again')
ElMessage.success('Need to login again')
})
.finally(() => {
this.formProps.disabled = this.dialogVisible = false
@ -215,7 +219,7 @@ export default defineComponent({
.request()
.then(() => {
this.getList()
this.$message.success('Success')
ElMessage.success('Success')
})
.finally(() => {
this.formProps.disabled = this.dialogVisible = false

View File

@ -873,7 +873,7 @@
<script>
import tableHeight from '@/mixin/tableHeight'
import { parseGitURL } from '@/utils'
import { getUserOption } from '@/api/namespace'
import { NamespaceUserOption } from '@/api/namespace'
import { getOption as getServerOption } from '@/api/server'
import {
getList,