样式: 用户管理页昵称列头像改为主色渐变,与右上角头像一致
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 44s

This commit is contained in:
张家训
2026-10-20 18:48:37 +08:00
parent 3b591486b6
commit fd18675883
+370 -367
View File
@@ -118,382 +118,385 @@
</template>
<script>
import { getDataList, add, update, remove, getExcelTemplate, resetPassword } from '@/api/sys/sys-user'
import { getRoleSelectList } from '@/api/sys/sys-role'
import { nginxPath } from "@/common/js/common";
import { objectUtil, utils, exportExcel } from "@/common/js/util";
import { getDataList, add, update, remove, getExcelTemplate, resetPassword } from '@/api/sys/sys-user'
import { getRoleSelectList } from '@/api/sys/sys-role'
import { nginxPath } from '@/common/js/common'
import { objectUtil, exportExcel } from '@/common/js/util'
export default {
name: "sso-user",
data() {
return {
fixedHeader: true,// 高度自适应
autoHeight: `${window.innerHeight} ` * 0.58,// 获取当前可视高度-定义Table高度
search: {
username: ''
},
listColumns: [
{
title: "#",
type: 'index',
width: 60,
align: 'center',
indexMethod: (row) => {
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
}
},
{
title: '登录账号',
key: 'username',
width: 150
},
{
title: '用户昵称',
key: 'nickname',
minWidth: 200,
render: (h, params) => {
const row = params.row
const text = (row.nickname || row.username || 'U').trim().charAt(0)
return h('div',
[
h('Avatar',
{
props: {
shape: 'square',
src: row.avatar || ''
},
style: {
marginRight: '8px',
verticalAlign: 'middle',
backgroundColor: '#2d8cf0'
}
},
text
),
h('span', row.nickname)
]
)
}
},
{
title: '用户类型',
key: 'userType',
width: 120,
render: (h, params) => {
return h('div', this.transformUserType(params.row.userType))
}
},
{
title: '联系电话',
key: 'phone',
width: 150,
},
{
title: '电子邮箱',
key: 'email',
width: 180,
},
{
title: '状态',
key: 'status',
fixed: 'right',
align: 'center',
width: 120,
render: (h, params) => {
let temp = this.transformStatus(params.row.status)
return h("Tag", {
props: {
color: temp.color
}
}, temp.text
)
}
},
{
title: '操作区',
slot: 'action',
width: 300,
fixed: 'right',
align: 'center'
export default {
name: 'sso-user',
data () {
return {
fixedHeader: true, // 高度自适应
autoHeight: `${window.innerHeight} ` * 0.58, // 获取当前可视高度-定义Table高度
search: {
username: ''
},
listColumns: [
{
title: '#',
type: 'index',
width: 60,
align: 'center',
indexMethod: (row) => {
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
}
],
exportColumns: [
{
title: '登录账号',
key: 'username'
},
{
title: '用户类型',
key: 'userType',
callback: (value) => {
return this.transformUserType(value)
},
{
title: '登录账号',
key: 'username',
width: 150
},
{
title: '用户昵称',
key: 'nickname',
minWidth: 200,
render: (h, params) => {
const row = params.row
const text = (row.nickname || row.username || 'U').trim().charAt(0)
return h('div',
[
h('Avatar',
{
props: {
shape: 'square',
src: row.avatar || ''
},
style: {
marginRight: '8px',
verticalAlign: 'middle',
// 与右上角用户头像同款渐变,无图时显示白色首字
background: 'linear-gradient(135deg, #4f6ef7, #7c5cf0)',
color: '#fff',
fontWeight: 500
}
},
text
),
h('span', row.nickname)
]
)
}
},
{
title: '用户类型',
key: 'userType',
width: 120,
render: (h, params) => {
return h('div', this.transformUserType(params.row.userType))
}
},
{
title: '联系电话',
key: 'phone',
width: 150
},
{
title: '电子邮箱',
key: 'email',
width: 180
},
{
title: '状态',
key: 'status',
fixed: 'right',
align: 'center',
width: 120,
render: (h, params) => {
let temp = this.transformStatus(params.row.status)
return h('Tag', {
props: {
color: temp.color
}
}, temp.text
)
}
},
{
title: '操作区',
slot: 'action',
width: 300,
fixed: 'right',
align: 'center'
}
],
exportColumns: [
{
title: '登录账号',
key: 'username'
},
{
title: '用户类型',
key: 'userType',
callback: (value) => {
return this.transformUserType(value)
}
},
{
title: '联系电话',
key: 'phone'
},
{
title: '状态',
key: 'status',
callback: (value) => {
let temp = this.transformStatus(value)
return temp.text
}
}
],
roleSelectList: [], // 角色列表
isDefaultRoleId: [],
dataList: [],
tableLoading: false,
pageTotal: 0, // 总页数
pageSize: 10, // 每页显示条数
pageCurrent: 1, // 当前页
pageParam: { // 调用时候的分页参数
pageNum: 1,
pageSize: 10
},
modal: false,
modalTitle: '',
addModal: false, // 添加
editModal: false, // 编辑
submitLoading: false,
formItem: {
id: '',
username: '',
userType: 'userType001',
nickname: '',
phone: '',
email: '',
roleIds: [],
status: 0
},
ruleCustom: {
username: [{
required: true, message: '请输入登录账号', trigger: 'blur'
}],
userType: [{
required: true, message: '请选择用户类型', trigger: 'blur'
}],
nickname: [{
required: true, message: '请输入用户昵称', trigger: 'blur'
}],
phone: [{
required: true, message: '请输入联系电话', trigger: 'blur'
}],
email: [{
required: true, message: '请输入电子邮箱', trigger: 'blur'
}],
roleIds: [{
required: true, type: 'array', message: '请选择角色权限', trigger: 'blur'
}]
}
}
},
methods: {
getDataList () {
let temp = JSON.parse(JSON.stringify(this.pageParam))
let data = objectUtil.trimJoin(temp, this.search)
this.tableLoading = true
getDataList(data).then(res => {
let page = res.data.data
this.pageTotal = page.total
this.dataList = page.records
// 延迟300毫秒,给它更流畅的感觉
setTimeout(() => {
this.tableLoading = false
}, 300)
})
},
getRoleSelectList () {
// 加载角色下拉列表
getRoleSelectList().then(res => {
let roleSelectList = res.data.data || []
this.roleSelectList = roleSelectList
this.isDefaultRoleId = roleSelectList.length > 0 ? [roleSelectList[0].value] : []
this.formItem.roleIds = this.isDefaultRoleId
})
},
toAdd () {
this.formItem.roleIds = this.isDefaultRoleId
this.modalTitle = '添加'
this.modal = true
this.addModal = true
this.editModal = false
},
toEdit (index) {
this.modalTitle = '编辑'
let temp = this.dataList[index]
this.addModal = false
this.editModal = true
this.modal = true
this.$nextTick(() => {
// 清除上次校验状态,避免编辑回显报红
if (this.$refs.formItem) {
this.$refs.formItem.resetFields()
}
this.formItem.id = temp.id
this.formItem.username = temp.username
this.formItem.nickname = temp.nickname
this.formItem.userType = temp.userType
this.formItem.phone = temp.phone
this.formItem.email = temp.email
if (temp.roleIds != null && temp.roleIds !== '') {
this.formItem.roleIds = temp.roleIds.split(',')
} else {
this.formItem.roleIds = []
}
})
},
submit (formItem) {
// modal 提交
this.$refs[formItem].validate((valid) => {
if (valid) {
let roleIdArr = this.formItem.roleIds
let userAndRoleArr = []
for (let i = 0; i < roleIdArr.length; i++) {
let roleAndMenu = {
userId: this.formItem.id,
roleId: roleIdArr[i]
}
},
{
title: '联系电话',
key: 'phone'
},
{
title: '状态',
key: 'status',
callback: (value) => {
let temp = this.transformStatus(value)
return temp.text
}
},
],
roleSelectList: [], //角色列表
isDefaultRoleId: [],
dataList: [],
tableLoading: false,
pageTotal: 0, // 总页数
pageSize: 10, // 每页显示条数
pageCurrent: 1, // 当前页
pageParam: { // 调用时候的分页参数
pageNum: 1,
pageSize: 10
},
modal: false,
modalTitle: '',
addModal: false, // 添加
editModal: false, // 编辑
submitLoading: false,
formItem: {
id: '',
username: '',
userType: 'userType001',
nickname: '',
phone: '',
email: '',
roleIds: [],
status: 0,
},
ruleCustom: {
username: [{
required: true, message: '请输入登录账号', trigger: 'blur'
}],
userType: [{
required: true, message: '请选择用户类型', trigger: 'blur'
}],
nickname: [{
required: true, message: '请输入用户昵称', trigger: 'blur'
}],
phone: [{
required: true, message: '请输入联系电话', trigger: 'blur'
}],
email: [{
required: true, message: '请输入电子邮箱', trigger: 'blur'
}],
roleIds: [{
required: true, type: 'array', message: '请选择角色权限', trigger: 'blur'
}],
},
userAndRoleArr.push(roleAndMenu)
}
let temp = JSON.parse(JSON.stringify(this.formItem))
let data = objectUtil.trimJoin(temp, {
userRoleStr: JSON.stringify(userAndRoleArr).toString()
})
if (this.addModal) { // 添加
add(data).then(res => {
this.getDataList()
this.$Message.success('添加成功!')
})
} else { // 编辑
update(data).then(res => {
this.getDataList()
this.$Message.success('编辑成功!')
})
}
this.cancel()
}
})
},
toResetPassword (index) {
let temp = this.dataList[index]
resetPassword({ id: temp.id }).then(res => {
setTimeout(() => {
this.$Message.success('重置密码成功!')
}, 300)
})
},
cancel () {
// Modal cancel
this.modal = false
this.refresh()
},
toDelete (index) {
let temp = this.dataList[index]
if (temp.username === 'admin' && temp.userType === 'userType001') {
this.$Message.warning('系统内置管理员账号不可删除!')
return
}
let data = {
id: temp.id
}
remove(data).then(res => {
this.refresh()
this.getDataList()
this.$Message.success('删除成功!')
})
},
refresh () {
this.pageParam = {
pageNum: 1,
pageSize: 10
}
this.search = {
username: ''
}
this.formItem = {
id: '',
username: '',
userType: 'userType001',
nickname: '',
phone: '',
email: '',
roleIds: [],
status: 0
}
},
methods: {
getDataList() {
let temp = JSON.parse(JSON.stringify(this.pageParam))
let data = objectUtil.trimJoin(temp, this.search)
this.tableLoading = true
getDataList(data).then(res => {
let page = res.data.data;
this.pageTotal = page.total
this.dataList = page.records
// 延迟300毫秒,给它更流畅的感觉
setTimeout(() => {
this.tableLoading = false
}, 300)
})
},
getRoleSelectList() {
// 加载角色下拉列表
getRoleSelectList().then(res => {
let roleSelectList = res.data.data || []
this.roleSelectList = roleSelectList
this.isDefaultRoleId = roleSelectList.length > 0 ? [roleSelectList[0].value] : []
this.formItem.roleIds = this.isDefaultRoleId
})
},
toAdd() {
this.formItem.roleIds = this.isDefaultRoleId
this.modalTitle = "添加"
this.modal = true
this.addModal = true
this.editModal = false
},
toEdit(index) {
this.modalTitle = "编辑"
let temp = this.dataList[index]
this.addModal = false
this.editModal = true
this.modal = true
this.$nextTick(() => {
// 清除上次校验状态,避免编辑回显报红
if (this.$refs.formItem) {
this.$refs.formItem.resetFields()
}
this.formItem.id = temp.id
this.formItem.username = temp.username
this.formItem.nickname = temp.nickname
this.formItem.userType = temp.userType
this.formItem.phone = temp.phone
this.formItem.email = temp.email
if (temp.roleIds != null && temp.roleIds !== '') {
this.formItem.roleIds = temp.roleIds.split(',')
} else {
this.formItem.roleIds = []
}
})
},
submit(formItem) {
// modal 提交
this.$refs[formItem].validate((valid) => {
if (valid) {
let roleIdArr = this.formItem.roleIds
let userAndRoleArr = []
for (let i = 0; i < roleIdArr.length; i++) {
let roleAndMenu = {
userId: this.formItem.id,
roleId: roleIdArr[i]
}
userAndRoleArr.push(roleAndMenu)
}
let temp = JSON.parse(JSON.stringify(this.formItem))
let data = objectUtil.trimJoin(temp, {
userRoleStr: JSON.stringify(userAndRoleArr).toString()
})
if (this.addModal) {//添加
add(data).then(res => {
this.getDataList()
this.$Message.success("添加成功!")
})
} else {//编辑
update(data).then(res => {
this.getDataList()
this.$Message.success("编辑成功!")
})
}
this.cancel()
}
})
},
toResetPassword(index) {
let temp = this.dataList[index]
resetPassword( {id: temp.id} ).then(res => {
setTimeout(() => {
this.$Message.success("重置密码成功!")
}, 300)
})
},
cancel() {
// Modal cancel
this.modal = false
this.refresh()
},
toDelete(index) {
let temp = this.dataList[index]
if (temp.username === 'admin' && temp.userType === 'userType001') {
this.$Message.warning("系统内置管理员账号不可删除!")
return
}
let data = {
id: temp.id
}
remove(data).then(res => {
this.refresh()
this.getDataList()
this.$Message.success("删除成功!")
})
},
refresh() {
this.pageParam = {
pageNum: 1,
pageSize: 10
};
this.search = {
username: '',
};
this.formItem = {
id: '',
username: '',
userType: 'userType001',
nickname: '',
phone: '',
email: '',
roleIds: [],
status: 0,
};
},
changePage(index) {
// 需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1)
this.pageParam.pageNum = index;
this.getDataList();
},
changePageSize(page) {
// 切换分页条数
this.pageParam.pageNum = 1;
this.pageParam.pageSize = page;
this.getDataList();
},
transformStatus(status) {
let object = {}
switch (status) {
case 0 :
object.color = "blue"
object.text = "正常"
break;
case 9 :
object.color = "red"
object.text = "已注销"
break;
}
return object;
},
transformUserType(userType) {
// userType 转换
switch (userType) {
case 'userType001':
userType = "超级管理员"
break;
case 'userType002':
userType = "普通用户"
break;
default:
userType = "-"
break;
}
return userType;
},
toExport() {
// 导出到Excel
getDataList({pageNum: 1, pageSize: this.pageTotal || 1000}).then(res => {
let page = res.data.data
let data = (page && page.records) ? page.records : this.dataList
exportExcel(this.exportColumns, data, "用户数据")
})
},
toDownload() {
// 下载Excel模板
getExcelTemplate().then((res) => {
let a = document.createElement('a');
a.href = nginxPath + "/excelTemplate" + res.data.data.fileSuffix;
a.click();
})
},
},
created() {
changePage (index) {
// 需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1)
this.pageParam.pageNum = index
this.getDataList()
this.getRoleSelectList()
},
mounted() {
//this.getDataList()
changePageSize (page) {
// 切换分页条数
this.pageParam.pageNum = 1
this.pageParam.pageSize = page
this.getDataList()
},
transformStatus (status) {
let object = {}
switch (status) {
case 0 :
object.color = 'blue'
object.text = '正常'
break
case 9 :
object.color = 'red'
object.text = '已注销'
break
}
return object
},
transformUserType (userType) {
// userType 转换
switch (userType) {
case 'userType001':
userType = '超级管理员'
break
case 'userType002':
userType = '普通用户'
break
default:
userType = '-'
break
}
return userType
},
toExport () {
// 导出到Excel
getDataList({ pageNum: 1, pageSize: this.pageTotal || 1000 }).then(res => {
let page = res.data.data
let data = (page && page.records) ? page.records : this.dataList
exportExcel(this.exportColumns, data, '用户数据')
})
},
toDownload () {
// 下载Excel模板
getExcelTemplate().then((res) => {
let a = document.createElement('a')
a.href = nginxPath + '/excelTemplate' + res.data.data.fileSuffix
a.click()
})
}
},
created () {
this.getDataList()
this.getRoleSelectList()
},
mounted () {
// this.getDataList()
}
}
</script>
<style lang="less" scoped>