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

src/view/sys/sys-user.vue

@@ -118,28 +118,28 @@
 </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() {
+export default {
+  name: 'sso-user',
+  data () {
     return {
-        fixedHeader: true,// 高度自适应
-        autoHeight: `${window.innerHeight} ` * 0.58,// 获取当前可视高度-定义Table高度
+      fixedHeader: true, // 高度自适应
+      autoHeight: `${window.innerHeight} ` * 0.58, // 获取当前可视高度-定义Table高度
       search: {
         username: ''
       },
       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,9 +243,9 @@
             let temp = this.transformStatus(value)
             return temp.text
           }
-          },
+        }
       ],
-        roleSelectList: [],          //角色列表
+      roleSelectList: [], // 角色列表
       isDefaultRoleId: [],
       dataList: [],
       tableLoading: false,
@@ -266,7 +269,7 @@
         phone: '',
         email: '',
         roleIds: [],
-          status: 0,
+        status: 0
       },
       ruleCustom: {
         username: [{
@@ -286,17 +289,17 @@
         }],
         roleIds: [{
           required: true, type: 'array', message: '请选择角色权限', trigger: 'blur'
-          }],
-        },
+        }]
+      }
     }
   },
   methods: {
-      getDataList() {
+    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;
+        let page = res.data.data
         this.pageTotal = page.total
         this.dataList = page.records
         // 延迟300毫秒，给它更流畅的感觉
@@ -305,7 +308,7 @@
         }, 300)
       })
     },
-      getRoleSelectList() {
+    getRoleSelectList () {
       // 加载角色下拉列表
       getRoleSelectList().then(res => {
         let roleSelectList = res.data.data || []
@@ -314,16 +317,16 @@
         this.formItem.roleIds = this.isDefaultRoleId
       })
     },
-      toAdd() {
+    toAdd () {
       this.formItem.roleIds = this.isDefaultRoleId
-        this.modalTitle = "添加"
+      this.modalTitle = '添加'
       this.modal = true
 
       this.addModal = true
       this.editModal = false
     },
-      toEdit(index) {
-        this.modalTitle = "编辑"
+    toEdit (index) {
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -348,7 +351,7 @@
         }
       })
     },
-      submit(formItem) {
+    submit (formItem) {
       // modal 提交
       this.$refs[formItem].validate((valid) => {
         if (valid) {
@@ -366,38 +369,38 @@
             userRoleStr: JSON.stringify(userAndRoleArr).toString()
           })
 
-            if (this.addModal) {//添加
+          if (this.addModal) { // 添加
             add(data).then(res => {
               this.getDataList()
-                this.$Message.success("添加成功!")
+              this.$Message.success('添加成功!')
             })
-            } else {//编辑
+          } else { // 编辑
             update(data).then(res => {
               this.getDataList()
-                this.$Message.success("编辑成功!")
+              this.$Message.success('编辑成功!')
             })
           }
           this.cancel()
         }
       })
     },
-      toResetPassword(index) {
+    toResetPassword (index) {
       let temp = this.dataList[index]
-        resetPassword( {id: temp.id} ).then(res => {
+      resetPassword({ id: temp.id }).then(res => {
         setTimeout(() => {
-            this.$Message.success("重置密码成功！")
+          this.$Message.success('重置密码成功！')
         }, 300)
       })
     },
-      cancel() {
+    cancel () {
       // Modal cancel
       this.modal = false
       this.refresh()
     },
-      toDelete(index) {
+    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() {
+    refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
-          username: '',
-        };
+        username: ''
+      }
       this.formItem = {
         id: '',
         username: '',
@@ -426,74 +429,74 @@
         phone: '',
         email: '',
         roleIds: [],
-          status: 0,
-        };
+        status: 0
+      }
     },
-      changePage(index) {
+    changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
-        this.getDataList();
+      this.pageParam.pageNum = index
+      this.getDataList()
     },
-      changePageSize(page) {
+    changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
-        this.pageParam.pageSize = page;
-        this.getDataList();
+      this.pageParam.pageNum = 1
+      this.pageParam.pageSize = page
+      this.getDataList()
     },
-      transformStatus(status) {
+    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) {
+    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() {
+    toExport () {
       // 导出到Excel
-        getDataList({pageNum: 1, pageSize: this.pageTotal || 1000}).then(res => {
+      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() {
+    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() {
+  created () {
     this.getDataList()
     this.getRoleSelectList()
   },
-    mounted() {
-      //this.getDataList()
-    }
+  mounted () {
+    // this.getDataList()
   }
+}
 </script>
 
 <style lang="less" scoped>