|
|
@@ -1,53 +1,82 @@
|
|
|
<template>
|
|
|
<div class="opBtn">
|
|
|
- <VaButton color="info" :round="false" size="small" icon="preview" class="mr-6 mb-2" @click="showModal = true">
|
|
|
+ <VaButton color="info" :round="false" size="small" icon="preview" class="mr-6 mb-2" @click="goSee">
|
|
|
查看角色用户
|
|
|
</VaButton>
|
|
|
<VaModal
|
|
|
- v-model="showModal"
|
|
|
+ :model-value="showModal"
|
|
|
max-height="600px"
|
|
|
+ hide-default-actions
|
|
|
:noDismiss="true"
|
|
|
max-width="800px"
|
|
|
- ok-text="提交"
|
|
|
- cancelText="取消"
|
|
|
+
|
|
|
>
|
|
|
- <h3 class="va-h3">用户列表</h3>
|
|
|
- <VaDataTable :items="items">
|
|
|
+ <template #header>
|
|
|
+ <h3 class="va-h3">用户列表</h3>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <VaButton @click='showModal=false'>关闭</VaButton>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <VaDataTable :items="items" :columns='columns'>
|
|
|
<template #cell(img)="{ rowData }">
|
|
|
<VaAvatar :src="rowData.img" />
|
|
|
</template>
|
|
|
</VaDataTable>
|
|
|
+ <div class="pagination">
|
|
|
+ <VaPagination
|
|
|
+ @click="update"
|
|
|
+ v-model="pageInfo.pageNum"
|
|
|
+ :total="pageInfo.total"
|
|
|
+ :page-size="pageInfo.pageSize"
|
|
|
+ :visible-pages="4"
|
|
|
+ class="justify-center sm:justify-start"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</VaModal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import dict from '../../../../common/dict'
|
|
|
export default {
|
|
|
name: 'previewManByRoleBtn',
|
|
|
+ props:{
|
|
|
+ params:{
|
|
|
+ default:()=>{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ goSee(){
|
|
|
+ this.showModal = true
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ update(){
|
|
|
+ getList()
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ let params = {
|
|
|
+ pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
|
|
|
+ pageSize: this.pageInfo.pageSize,
|
|
|
+ roleIds: this.params.id,
|
|
|
+ }
|
|
|
+ this.$api.getUserList(params).then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ this.pageInfo.total = res.result.total
|
|
|
+ this.items = res.result.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
showModal: false,
|
|
|
- items: [
|
|
|
- {
|
|
|
- img: 'https://randomuser.me/api/portraits/women/5.jpg',
|
|
|
- name: 'Audrey Clay',
|
|
|
- phone: '13327777156',
|
|
|
- },
|
|
|
- {
|
|
|
- img: 'https://randomuser.me/api/portraits/men/1.jpg',
|
|
|
- name: 'Aguirre Klein',
|
|
|
- phone: '13327777156',
|
|
|
- },
|
|
|
- {
|
|
|
- img: 'https://randomuser.me/api/portraits/men/3.jpg',
|
|
|
- name: 'Tucker Kaufman',
|
|
|
- phone: '13327777156',
|
|
|
- },
|
|
|
- {
|
|
|
- img: 'https://randomuser.me/api/portraits/men/5.jpg',
|
|
|
- name: 'Herbert Keller',
|
|
|
- phone: '286 NW. Shore St.Longwood, FL 32779',
|
|
|
- },
|
|
|
+ pageInfo:dict.pageInfo,
|
|
|
+ items: [],
|
|
|
+ columns: [
|
|
|
+ { key: 'userName', label: 'userName' },
|
|
|
+ { key: 'name', label: 'name' },
|
|
|
+ { key: 'phone', label: 'phone' },
|
|
|
+ { key: 'gender', label: 'gender' },
|
|
|
],
|
|
|
}
|
|
|
},
|