样式: 用户管理页昵称列头像改为主色渐变，与右上角头像一致

src/view/sys/sys-user.vue

@@ -120,11 +120,11 @@
 <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 { nginxPath } from '@/common/js/common'
+import { objectUtil, exportExcel } from '@/common/js/util'
 
 export default {
-    name: "sso-user",
+  name: 'sso-user',
   data () {
     return {
       fixedHeader: true, // 高度自适应
@@ -134,12 +134,12 @@
       },
       listColumns: [
         {
-            title: "#",
+          title: '#',
           type: 'index',
           width: 60,
           align: 'center',
           indexMethod: (row) => {
-              return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
+            return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
           }
         },
         {
@@ -165,7 +165,10 @@
                     style: {
                       marginRight: '8px',
                       verticalAlign: 'middle',
-                        backgroundColor: '#2d8cf0'
+                      // 与右上角用户头像同款渐变，无图时显示白色首字
+                      background: 'linear-gradient(135deg, #4f6ef7, #7c5cf0)',
+                      color: '#fff',
+                      fontWeight: 500
                     }
                   },
                   text
@@ -186,12 +189,12 @@
         {
           title: '联系电话',
           key: 'phone',
-            width: 150,
+          width: 150
         },
         {
           title: '电子邮箱',
           key: 'email',
-            width: 180,
+          width: 180
         },
         {
           title: '状态',
@@ -201,7 +204,7 @@
           width: 120,
           render: (h, params) => {
             let temp = this.transformStatus(params.row.status)
-              return h("Tag", {
+            return h('Tag', {
               props: {
                 color: temp.color
               }
@@ -240,7 +243,7 @@
             let temp = this.transformStatus(value)
             return temp.text
           }
-          },
+        }
       ],
       roleSelectList: [], // 角色列表
       isDefaultRoleId: [],
@@ -266,7 +269,7 @@
         phone: '',
         email: '',
         roleIds: [],
-          status: 0,
+        status: 0
       },
       ruleCustom: {
         username: [{
@@ -286,8 +289,8 @@
         }],
         roleIds: [{
           required: true, type: 'array', message: '请选择角色权限', trigger: 'blur'
-          }],
-        },
+        }]
+      }
     }
   },
   methods: {
@@ -296,7 +299,7 @@
       let data = objectUtil.trimJoin(temp, this.search)
       this.tableLoading = true
       getDataList(data).then(res => {
-          let page = res.data.data;
+        let page = res.data.data
         this.pageTotal = page.total
         this.dataList = page.records
         // 延迟300毫秒，给它更流畅的感觉
@@ -316,14 +319,14 @@
     },
     toAdd () {
       this.formItem.roleIds = this.isDefaultRoleId
-        this.modalTitle = "添加"
+      this.modalTitle = '添加'
       this.modal = true
 
       this.addModal = true
       this.editModal = false
     },
     toEdit (index) {
-        this.modalTitle = "编辑"
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -369,12 +372,12 @@
           if (this.addModal) { // 添加
             add(data).then(res => {
               this.getDataList()
-                this.$Message.success("添加成功!")
+              this.$Message.success('添加成功!')
             })
           } else { // 编辑
             update(data).then(res => {
               this.getDataList()
-                this.$Message.success("编辑成功!")
+              this.$Message.success('编辑成功!')
             })
           }
           this.cancel()
@@ -385,7 +388,7 @@
       let temp = this.dataList[index]
       resetPassword({ id: temp.id }).then(res => {
         setTimeout(() => {
-            this.$Message.success("重置密码成功！")
+          this.$Message.success('重置密码成功！')
         }, 300)
       })
     },
@@ -397,7 +400,7 @@
     toDelete (index) {
       let temp = this.dataList[index]
       if (temp.username === 'admin' && temp.userType === 'userType001') {
-          this.$Message.warning("系统内置管理员账号不可删除！")
+        this.$Message.warning('系统内置管理员账号不可删除！')
         return
       }
 
@@ -407,17 +410,17 @@
       remove(data).then(res => {
         this.refresh()
         this.getDataList()
-          this.$Message.success("删除成功!")
+        this.$Message.success('删除成功!')
       })
     },
     refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
-          username: '',
-        };
+        username: ''
+      }
       this.formItem = {
         id: '',
         username: '',
@@ -426,65 +429,65 @@
         phone: '',
         email: '',
         roleIds: [],
-          status: 0,
-        };
+        status: 0
+      }
     },
     changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
-        this.getDataList();
+      this.pageParam.pageNum = index
+      this.getDataList()
     },
     changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
-        this.pageParam.pageSize = page;
-        this.getDataList();
+      this.pageParam.pageNum = 1
+      this.pageParam.pageSize = page
+      this.getDataList()
     },
     transformStatus (status) {
       let object = {}
       switch (status) {
         case 0 :
-            object.color = "blue"
-            object.text = "正常"
-            break;
+          object.color = 'blue'
+          object.text = '正常'
+          break
         case 9 :
-            object.color = "red"
-            object.text = "已注销"
-            break;
+          object.color = 'red'
+          object.text = '已注销'
+          break
       }
-        return object;
+      return object
     },
     transformUserType (userType) {
       // userType 转换
       switch (userType) {
         case 'userType001':
-            userType = "超级管理员"
-            break;
+          userType = '超级管理员'
+          break
         case 'userType002':
-            userType = "普通用户"
-            break;
+          userType = '普通用户'
+          break
         default:
-            userType = "-"
-            break;
+          userType = '-'
+          break
       }
-        return userType;
+      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, "用户数据")
+        exportExcel(this.exportColumns, data, '用户数据')
       })
     },
     toDownload () {
       // 下载Excel模板
       getExcelTemplate().then((res) => {
-          let a = document.createElement('a');
-          a.href = nginxPath + "/excelTemplate" + res.data.data.fileSuffix;
-          a.click();
+        let a = document.createElement('a')
+        a.href = nginxPath + '/excelTemplate' + res.data.data.fileSuffix
+        a.click()
       })
-      },
+    }
   },
   created () {
     this.getDataList()