9 changed files with 328 additions and 6 deletions
@ -0,0 +1,13 @@ |
|||||
|
import axios from '@/libs/api.request' |
||||
|
|
||||
|
/** |
||||
|
* 获取应用数据 |
||||
|
* @returns {wx.RequestTask | never} |
||||
|
*/ |
||||
|
export const getList = (params) => { |
||||
|
return axios.request({ |
||||
|
url: 'WechatUser/index', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,308 @@ |
|||||
|
<template> |
||||
|
<div id="wxulist"> |
||||
|
<!-- 查询条件 --> |
||||
|
<Row> |
||||
|
<Col span="24"> |
||||
|
<Card class="margin-bottom-10"> |
||||
|
<Form inline> |
||||
|
<FormItem class="margin-bottom-0"> |
||||
|
<Select v-model="searchConf.status" clearable placeholder='请选择状态' style="width:120px"> |
||||
|
<Option :value="1">启用</Option> |
||||
|
<Option :value="0">禁用</Option> |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
<FormItem class="margin-bottom-0"> |
||||
|
<Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:120px"> |
||||
|
<Option :value="1">AppId</Option> |
||||
|
<Option :value="2">应用名称</Option> |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
<FormItem class="margin-bottom-0"> |
||||
|
<Input v-model="searchConf.keywords" placeholder=""></Input> |
||||
|
</FormItem> |
||||
|
<FormItem class="margin-bottom-0"> |
||||
|
<Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button> |
||||
|
</FormItem> |
||||
|
</Form> |
||||
|
</Card> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
|
||||
|
<Row> |
||||
|
<Col span="24"> |
||||
|
<Card> |
||||
|
<!-- 用户列表 --> |
||||
|
<div> |
||||
|
<Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table> |
||||
|
</div> |
||||
|
<div class="margin-top-15" style="text-align: center"> |
||||
|
<Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page> |
||||
|
</div> |
||||
|
</Card> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.api-box { |
||||
|
max-height: 300px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.api-group { |
||||
|
margin-top: 10px; |
||||
|
border: 1px solid #dddee1; |
||||
|
border-radius: 5px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script> |
||||
|
import { getList } from '@/api/wechat' |
||||
|
// |
||||
|
export default { |
||||
|
name: 'interface_list', |
||||
|
data () { |
||||
|
return { |
||||
|
appGroup: [], |
||||
|
columnsList: [{ |
||||
|
title: '序号', |
||||
|
type: 'index', |
||||
|
width: 65, |
||||
|
align: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
title: 'openid', |
||||
|
align: 'openid', |
||||
|
key: 'openid', |
||||
|
minWidth: 330 |
||||
|
}, |
||||
|
{ |
||||
|
title: '头像', |
||||
|
align: 'center', |
||||
|
key: 'headimgurl', |
||||
|
width: 100, |
||||
|
render: (h, params) => { |
||||
|
return h('img', { |
||||
|
attrs: { |
||||
|
src: params.row.headimgurl, |
||||
|
style: 'width:72px;height:72px;' |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '上次登录时间', |
||||
|
align: 'center', |
||||
|
key: 'last_login_time', |
||||
|
width: 210 |
||||
|
}, |
||||
|
{ |
||||
|
title: '创建时间', |
||||
|
align: 'center', |
||||
|
key: 'create_time', |
||||
|
width: 310 |
||||
|
}, |
||||
|
{ |
||||
|
title: '手机号码', |
||||
|
align: 'center', |
||||
|
key: 'phone', |
||||
|
width: 260 |
||||
|
}, |
||||
|
{ |
||||
|
title: '状态', |
||||
|
align: 'center', |
||||
|
key: 'status', |
||||
|
width: 200, |
||||
|
render: (h, params) => { |
||||
|
let _st = params.row.status === 0 ? '禁用' : '正常' |
||||
|
return h('p', [ |
||||
|
_st |
||||
|
]) |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
tableData: [], |
||||
|
groupInfo: {}, |
||||
|
groupList: {}, |
||||
|
tableShow: { |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
listCount: 0 |
||||
|
}, |
||||
|
searchConf: { |
||||
|
type: '', |
||||
|
keywords: '', |
||||
|
status: '' |
||||
|
}, |
||||
|
modalSetting: { |
||||
|
show: false, |
||||
|
loading: false, |
||||
|
index: 0 |
||||
|
}, |
||||
|
formItem: { |
||||
|
app_name: '', |
||||
|
app_id: '', |
||||
|
app_secret: '', |
||||
|
app_info: '', |
||||
|
app_api: {}, |
||||
|
app_group: 'default', |
||||
|
id: 0 |
||||
|
}, |
||||
|
ruleValidate: { |
||||
|
app_name: [{ |
||||
|
required: true, |
||||
|
message: '应用名称不能为空', |
||||
|
trigger: 'blur' |
||||
|
}] |
||||
|
}, |
||||
|
checkAllStatus: {}, |
||||
|
checkAllIndeterminate: {}, |
||||
|
buttonShow: { |
||||
|
edit: true, |
||||
|
del: true, |
||||
|
changeStatus: true |
||||
|
}, |
||||
|
listLoading: false |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
let vm = this |
||||
|
vm.getList() |
||||
|
vm.hasRule('App/edit').then(res => { |
||||
|
vm.buttonShow.edit = res |
||||
|
}) |
||||
|
vm.hasRule('App/del').then(res => { |
||||
|
vm.buttonShow.del = res |
||||
|
}) |
||||
|
vm.hasRule('App/changeStatus').then(res => { |
||||
|
vm.buttonShow.changeStatus = res |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
alertAdd () { |
||||
|
let vm = this |
||||
|
getAll().then(response => { |
||||
|
vm.appGroup = response.data.data.list |
||||
|
}) |
||||
|
getAppInfo().then(response => { |
||||
|
let res = response.data |
||||
|
vm.formItem.app_id = res.data.app_id |
||||
|
vm.formItem.app_secret = res.data.app_secret |
||||
|
vm.groupInfo = res.data.groupInfo |
||||
|
vm.groupList = res.data.apiList |
||||
|
for (let index in vm.groupInfo) { |
||||
|
vm.$set(vm.checkAllStatus, index, false) |
||||
|
vm.$set(vm.checkAllIndeterminate, index, false) |
||||
|
vm.$set(vm.formItem.app_api, index, []) |
||||
|
} |
||||
|
}) |
||||
|
vm.modalSetting.show = true |
||||
|
}, |
||||
|
submit () { |
||||
|
let vm = this |
||||
|
vm.$refs['myForm'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
vm.modalSetting.loading = true |
||||
|
if (vm.formItem.id === 0) { |
||||
|
add(vm.formItem).then(response => { |
||||
|
vm.$Message.success(response.data.msg) |
||||
|
vm.getList() |
||||
|
vm.cancel() |
||||
|
}).catch(() => { |
||||
|
vm.modalSetting.loading = false |
||||
|
}) |
||||
|
} else { |
||||
|
edit(vm.formItem).then(response => { |
||||
|
vm.$Message.success(response.data.msg) |
||||
|
vm.getList() |
||||
|
vm.cancel() |
||||
|
}).catch(() => { |
||||
|
vm.modalSetting.loading = false |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
cancel () { |
||||
|
this.formItem.id = 0 |
||||
|
this.$refs['myForm'].resetFields() |
||||
|
this.modalSetting.show = false |
||||
|
this.modalSetting.loading = false |
||||
|
this.modalSetting.index = 0 |
||||
|
}, |
||||
|
changePage (page) { |
||||
|
this.tableShow.currentPage = page |
||||
|
this.getList() |
||||
|
}, |
||||
|
changeSize (size) { |
||||
|
this.tableShow.pageSize = size |
||||
|
this.getList() |
||||
|
}, |
||||
|
handleCheckAll (groupId) { |
||||
|
if (this.checkAllStatus[groupId]) { |
||||
|
this.checkAllStatus[groupId] = false |
||||
|
} else { |
||||
|
this.checkAllStatus[groupId] = !this.checkAllStatus[groupId] |
||||
|
} |
||||
|
this.checkAllIndeterminate[groupId] = false |
||||
|
|
||||
|
if (this.checkAllStatus[groupId]) { |
||||
|
let vm = this |
||||
|
this.groupList[groupId].forEach(item => { |
||||
|
vm.formItem.app_api[groupId].push(item.hash) |
||||
|
}) |
||||
|
} else { |
||||
|
this.formItem.app_api[groupId] = [] |
||||
|
} |
||||
|
}, |
||||
|
checkAllGroupChange (groupId) { |
||||
|
if (this.formItem.app_api[groupId].length === this.groupList[groupId].length) { |
||||
|
this.checkAllIndeterminate[groupId] = false |
||||
|
this.checkAllStatus[groupId] = true |
||||
|
} else if (this.formItem.app_api[groupId].length > 0) { |
||||
|
this.checkAllIndeterminate[groupId] = true |
||||
|
this.checkAllStatus[groupId] = false |
||||
|
} else { |
||||
|
this.checkAllIndeterminate[groupId] = false |
||||
|
this.checkAllStatus[groupId] = false |
||||
|
} |
||||
|
}, |
||||
|
search () { |
||||
|
this.tableShow.currentPage = 1 |
||||
|
this.getList() |
||||
|
}, |
||||
|
refreshAppSecret () { |
||||
|
let vm = this |
||||
|
refreshAppSecretApi().then(response => { |
||||
|
vm.formItem.app_secret = response.data.data.app_secret |
||||
|
}) |
||||
|
}, |
||||
|
getList () { |
||||
|
let vm = this |
||||
|
vm.listLoading = true |
||||
|
getList({ |
||||
|
page: vm.tableShow.currentPage, |
||||
|
size: vm.tableShow.pageSize, |
||||
|
type: vm.searchConf.type, |
||||
|
keywords: vm.searchConf.keywords, |
||||
|
status: vm.searchConf.status |
||||
|
}).then(response => { |
||||
|
vm.tableData = response.data.data.list |
||||
|
vm.tableShow.listCount = response.data.data.count |
||||
|
vm.listLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
doCancel (data) { |
||||
|
if (!data) { |
||||
|
this.formItem.id = 0 |
||||
|
this.$refs['myForm'].resetFields() |
||||
|
this.modalSetting.loading = false |
||||
|
this.modalSetting.index = 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue