Tao Chen
80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="list-query" shadow="hover">
|
|
<el-form inline label-width="80px">
|
|
<el-form-item :label="T('Username')">
|
|
<el-input v-model="listQuery.username"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
|
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card class="list-body" shadow="hover">
|
|
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
|
<el-table-column prop="id" label="ID" align="center"></el-table-column>
|
|
<el-table-column prop="username" :label="T('Username')" align="center"/>
|
|
<el-table-column prop="email" :label="T('Email')" align="center"/>
|
|
<el-table-column prop="nickname" :label="T('Nickname')" align="center"/>
|
|
<el-table-column :label="T('Group')" align="center">
|
|
<template #default="{row}">
|
|
<span v-if="row.group_id"> <el-tag>{{ listRes.groups?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
|
|
<span v-else> - </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
|
|
<el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
|
|
<el-table-column :label="T('Actions')" align="center" width="650">
|
|
<template #default="{row}">
|
|
<el-button @click="toTag(row)">{{ T('UserTags') }}</el-button>
|
|
<el-button @click="toAddressBook(row)">{{ T('UserAddressBook') }}</el-button>
|
|
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
|
<el-button type="warning" @click="changePass(row)">{{ T('ResetPassword') }}</el-button>
|
|
<el-button type="danger" @click="remove(row)">{{ T('Delete') }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card class="list-page" shadow="hover">
|
|
<el-pagination background
|
|
layout="prev, pager, next, sizes, jumper"
|
|
:page-sizes="[10,20,50,100]"
|
|
v-model:page-size="listQuery.page_size"
|
|
v-model:current-page="listQuery.page"
|
|
:total="listRes.total">
|
|
</el-pagination>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRepositories, useDel, useToEditOrAdd, useChangePwd } from '@/views/user/composables'
|
|
import { T } from '@/utils/i18n'
|
|
//列表
|
|
const {
|
|
listRes,
|
|
listQuery,
|
|
handlerQuery,
|
|
getList,
|
|
} = useRepositories()
|
|
|
|
const { toEdit, toAdd, toAddressBook, toTag } = useToEditOrAdd()
|
|
|
|
const { changePass } = useChangePwd()
|
|
|
|
//删除
|
|
const { del } = useDel()
|
|
const remove = async (row) => {
|
|
const res = await del(row.id)
|
|
if (res) {
|
|
getList(listQuery)
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|