104 lines
3.5 KiB
Vue
104 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
|
||
|
|
<div class="gva-search-box">
|
||
|
|
<el-form ref="searchForm" :inline="true" :model="searchInfo">
|
||
|
|
<el-form-item label="用户名">
|
||
|
|
<el-input v-model="searchInfo.username" placeholder="用户名" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="昵称">
|
||
|
|
<el-input v-model="searchInfo.nickname" placeholder="昵称" />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
|
||
|
|
<el-button icon="refresh" @click="onReset"> 重置 </el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div class="gva-table-box">
|
||
|
|
<div class="gva-btn-list">
|
||
|
|
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table :data="tableData" row-key="ID">
|
||
|
|
<el-table-column align="left" label="头像" min-width="75">
|
||
|
|
<template #default="scope">
|
||
|
|
<CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="left" label="ID" min-width="50" prop="ID" />
|
||
|
|
<el-table-column align="left" label="用户名" min-width="150" prop="userName" />
|
||
|
|
<el-table-column align="left" label="昵称" min-width="150" prop="nickName" />
|
||
|
|
<el-table-column align="left" label="手机号" min-width="180" prop="phone" />
|
||
|
|
<el-table-column align="left" label="邮箱" min-width="180" prop="email" />
|
||
|
|
|
||
|
|
<el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button>
|
||
|
|
<el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="gva-pagination">
|
||
|
|
<el-pagination
|
||
|
|
:current-page="page"
|
||
|
|
:page-size="pageSize"
|
||
|
|
:page-sizes="[10, 30, 50, 100]"
|
||
|
|
:total="total"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { getUserList, setUserAuthorities, register, deleteUser } from '@/api/user'
|
||
|
|
|
||
|
|
import { getAuthorityList } from '@/api/authority'
|
||
|
|
import CustomPic from '@/components/customPic/index.vue'
|
||
|
|
import WarningBar from '@/components/warningBar/warningBar.vue'
|
||
|
|
import { setUserInfo, resetPassword } from '@/api/user.js'
|
||
|
|
|
||
|
|
import { nextTick, ref, watch } from 'vue'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import SelectImage from '@/components/selectImage/selectImage.vue'
|
||
|
|
import { useAppStore } from '@/pinia'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'User'
|
||
|
|
})
|
||
|
|
|
||
|
|
const appStore = useAppStore()
|
||
|
|
|
||
|
|
const searchInfo = ref({
|
||
|
|
username: '',
|
||
|
|
nickname: '',
|
||
|
|
phone: '',
|
||
|
|
email: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const onSubmit = () => {
|
||
|
|
page.value = 1
|
||
|
|
getTableData()
|
||
|
|
}
|
||
|
|
|
||
|
|
const onReset = () => {
|
||
|
|
searchInfo.value = {
|
||
|
|
username: '',
|
||
|
|
nickname: '',
|
||
|
|
phone: '',
|
||
|
|
email: ''
|
||
|
|
}
|
||
|
|
getTableData()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.header-img-box {
|
||
|
|
@apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
|
||
|
|
}
|
||
|
|
</style>
|