feats

src/App.vue

@@ -27,4 +27,9 @@ a {
 }
 
 #app {}
+
+.el-avatar {
+  background-color: transparent !important;
+  border: 1px solid rgba(0,0,0, .06);
+}
 </style>

src/components/PageHeader/index.vue

@@ -0,0 +1,56 @@
+<template>
+
+</template>
+
+<script>
+import { onMounted, onUpdated, watch } from 'vue'
+import { useModel } from '@/store'
+
+export default {
+  props: {
+    title: undefined,
+    back: Boolean,
+    actions: Array,
+  },
+
+  emits: ['click'],
+
+  setup(props, context) {
+    const {
+      setPageTitle,
+      setBack,
+      setClick,
+      setActions,
+     } = useModel('pageHeader')
+
+    // watch 不能正常监控所有类型的 props 变化
+    const handlePropsChange = () => {
+      if (props.title) {
+        setPageTitle(props.title)
+      }
+
+      if (typeof props.back === 'boolean') {
+        setBack(props.back)
+      }
+
+      if (props.actions && props.actions.length) {
+        setActions(props.actions)
+      }
+    }
+
+    onMounted(() => {
+      setClick(e => {
+        context.emit('click', e)
+      })
+      
+      handlePropsChange()
+    })
+
+    onUpdated(() => {
+      handlePropsChange()
+    })
+
+    return {}
+  }
+}
+</script>

src/layouts/UserLayout/components/Menu/MenuTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <i v-if="menu.icon" :class="menu.icon">&nbsp;</i>
+  <i v-if="menu.icon" :class="['menu-icon', menu.icon]">&nbsp;</i>
   <span>{{menu.title}}</span>
 </template>
 
@@ -15,3 +15,11 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.menu-icon {
+  font-size: 1.2em;
+  display: inline-block;
+  padding-right: .2em;
+}
+</style>

src/layouts/UserLayout/components/PageHeader.vue

@@ -59,7 +59,7 @@ export default {
       setPageTitle((route.meta || {}).title)
       setClick()
       setBack(false)
-      setActions(false)
+      setActions()
     })
 
     return {

src/layouts/UserLayout/components/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown>
+  <el-dropdown @command="handleCommand">
     <span class="el-dropdown-link">
       <el-avatar :src="avatar"></el-avatar>
       <i class="el-icon-arrow-down el-icon--right"></i>
@@ -7,7 +7,7 @@
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item>修改密码</el-dropdown-item>
-        <el-dropdown-item>退 出</el-dropdown-item>
+        <el-dropdown-item command="logout">退 出</el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -15,21 +15,36 @@
 
 <script>
 import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import store from '@/store'
 
 const { useModel } = store
 
 export default {
   setup(props) {
-    const user = useModel('user')
+    const { user, logout } = useModel('user')
+    const route = useRoute()
+    const router = useRouter()
 
     const avatar = computed(() => {
       return user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
     })
 
+    const handleCommand = command => {
+      if (command === 'logout') {
+        logout().then(() => {
+          router.push({
+            name: 'login',
+            query: {from: encodeURIComponent(route.path)}
+          })
+        })
+      }
+    }
+
     return {
       user,
-      avatar
+      avatar,
+      handleCommand
     }
   }
 }

src/main.js

@@ -5,6 +5,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 
 import Cell from '@/components/Cell/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
 import QueryForm from '@/components/QueryForm/index.vue'
 import QueryTable from '@/components/QueryTable/index.vue'
 import App from './App.vue'
@@ -17,6 +18,7 @@ app.config.errorHandler = (err, vm, info) => {
 }
 
 app.component('cell', Cell)
+app.component('page-header', PageHeader)
 app.component('query-form', QueryForm)
 app.component('query-table', QueryTable)
 

src/service/user.js

@@ -4,6 +4,10 @@ export default {
     url: '/login',
     method: 'post'
   },
+  logout: {
+    url: '/logout',
+    method: 'post'
+  },
   detail: {
     url: '/admin/sysUser/${id}',    
   },
@@ -13,5 +17,9 @@ export default {
   save: {
     url: '/admin/sysUser',
     method: 'post'
+  },
+  update: {
+    url: '/admin/sysUser/${id}',
+    method: 'put'
   }
 }

src/store/models/system.js

@@ -11,7 +11,7 @@ export default () => {
     },
     menu: {
       backgroundColor: '#001529',
-      textColor: 'rgba(255, 255, 255, .65)',
+      textColor: 'rgba(255, 255, 255, .75)',
       activeTextColor: 'rgb(24, 144, 255)',
     }
   })

src/store/models/user.js

@@ -1,7 +1,7 @@
 import { reactive } from "vue"
 import service from '@/service'
 import request from '@/utils/request'
-import { setToken } from '@/utils/token'
+import { setToken, removeToken } from '@/utils/token'
 import { replacePathParam } from '@/utils'
 
 export default () => {
@@ -33,6 +33,12 @@ export default () => {
     })
   }
 
+  const logout = () => {
+    return request(service.user.logout).then(res => {
+      return removeToken()
+    })
+  }
+
   const saveUser = data => {
     return request({
       ...service.user.save,
@@ -42,12 +48,25 @@ export default () => {
     })
   }
 
+  const updateUser = data => {
+    const params = {
+      ...service.user.update,
+      data,
+    }
+
+    return request(replacePathParam(params, {id: data.userId})).then(res => {
+      return res
+    })
+  }
+
   return {
     user,
     getUser,
     getCurrent,
     setUser,
     login,
-    saveUser
+    logout,
+    saveUser,
+    updateUser,
   }
 }

src/utils/token.js

@@ -18,3 +18,8 @@ export function setToken (token) {
   window.localStorage.setItem('token', token)
   window.localStorage.setItem('token-created-at', now.valueOf())
 }
+
+export function removeToken() {
+  window.localStorage.removeItem('token')
+  window.localStorage.removeItem('token-created-at')
+}

src/views/User/Edit.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="user-form" v-loading="loading">
+    <page-header :title="formData.name || '人员新增'" :back="true" />
     <el-form :model="formData" label-width="100px">
       <el-form-item label="名称" prop="name">
         <el-input v-model="formData.name" />
@@ -7,6 +8,25 @@
       <el-form-item label="手机号" prop="phone">
         <el-input v-model="formData.phone" />
       </el-form-item>
+      <el-form-item label="头像" prop="avatar">
+        <el-dropdown @command="handleAvatar($event)">
+          <span class="el-dropdown-link">
+            <el-avatar :src="formData.avatar" :size="98"></el-avatar>
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="avatar in avatars"
+                :key="avatar"
+                :command="avatar"
+              >
+                <el-avatar :src="avatar" :size="98"></el-avatar>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-form-item>
       <el-form-item label="登录账号" prop="loginName">
         <el-input v-model="formData.loginName" />
       </el-form-item>
@@ -15,24 +35,27 @@
       </el-form-item>
       <el-form-item label="角色">
         <el-radio-group v-model="formData.roleId">
-          <el-radio :label="2">业务人员</el-radio>
-          <el-radio :label="3">运营人员</el-radio>
+          <el-radio :label="'2'">业务人员</el-radio>
+          <el-radio :label="'3'">运营人员</el-radio>
         </el-radio-group>
       </el-form-item>
       <div class="user-form__action">
         <el-button type="primary" @click="submit"><i class="fa fa-save">&nbsp;</i> 保 存</el-button>
-        <el-button>取 消</el-button>
+        <el-button @click="handleCancel()">重置密码</el-button>
+        <el-button @click="handleCancel()">取 消</el-button>
       </div>
     </el-form>
   </div>
 </template>
 
 <script>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, onUpdated, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElNotification } from 'element-plus'
 import { useModel } from '@/store'
 
+const defaultAvatars = new Array(12).fill('*').map((_, inx) => `https://zhiyun-image.oss-cn-shanghai.aliyuncs.com/common/images/avatar/${inx+1}.png`)
+
 export default {
   setup(props) {
     const loading = ref(false)
@@ -42,12 +65,33 @@ export default {
 
     const { id } = route.query
 
-    const { saveUser, getUser } = useModel('user')
-    const { setPageTitle, setBack } = useModel('pageHeader')
+    const { saveUser, updateUser, getUser } = useModel('user')
 
     const submit = () => {
+      if (!id) {
+        saveFormData(formData)
+      } else {
+        updateFormData({
+          ...formData,
+          userId: id,
+        })
+      }
+    }
+
+    const updateFormData = data => {
       loading.value = true
-      saveUser(formData).then(res => {
+      updateUser(data).then(res => {
+        loading.value = false
+        ElNotification.success({message: '更新成功'})
+      }).catch(e => {
+        console.error(e)
+        loading.value = false
+      })
+    }
+
+    const saveFormData = data => {
+      loading.value = true
+      saveUser(data).then(res => {
         loading.value = false
         ElNotification.success({message: '提交成功'})
         router.replace({name: 'user.edit', query: {id: res.userId}})      
@@ -57,9 +101,15 @@ export default {
       })
     }
 
-    onMounted(() => {
-      setBack(true)
+    const handleCancel = () => {
+      router.go(-1)
+    }
+
+    const handleAvatar = e => {
+      formData.avatar = e
+    }
 
+    onMounted(() => {
       if (id) {
         loading.value = true
         getUser(id).then(res => {
@@ -76,7 +126,10 @@ export default {
 
     return {
       formData,
-      submit
+      submit,
+      handleCancel,
+      avatars: defaultAvatars,
+      handleAvatar,
     }
   }
 }

src/views/User/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <page-header :actions="actions" @click="handleAdd" />
     <query-table v-model="list" :request="getUserList" row-key="userId">
         <template v-slot:search="slotProps">
           <el-form-item label="姓名" prop="name">
@@ -12,7 +13,7 @@
         <template #table>
           <el-table-column prop="avatar" label="头像">
             <template #default="scope">
-              <el-avatar :src="scope.row.avatar"></el-avatar>
+              <el-avatar :src="scope.row.avatar" :size="98"></el-avatar>
             </template>
           </el-table-column>
           <el-table-column prop="name" label="名称"></el-table-column>
@@ -46,7 +47,7 @@ import dayjs from 'dayjs'
 import request from '@/utils/request'
 import service from '@/service'
 import Pagination from '@/components/Pagination/index.vue'
-import { useModel } from '@/store'
+// import { useModel } from '@/store'
 
 const getUserList = params => request({
   ...service.user.list,
@@ -62,8 +63,6 @@ export default {
     const list = ref([])
     const router = useRouter()
 
-    const { setBack, setActions, setClick } = useModel('pageHeader')
-
     const formatDate = dt => dayjs(dt).format('YYYY-MM-DD HH:mm')
     const transferStatus = st => st === 1 ? '正常' : '异常'
 
@@ -71,21 +70,13 @@ export default {
       router.push({name: 'user.edit'})
     }
 
-    onMounted(() => {
-      setBack(true)
-      setActions([{ icon: 'el-icon-plus', text: '新增' }])
-      setClick(handleAdd)
-    })
-
-    watch(list, () => {
-      console.log('---------->', list)
-    }, {immediate: true})
-
     return {
       list,
       formatDate,
       transferStatus,
       getUserList,
+      actions: [{ icon: 'el-icon-plus', text: '新增' }],
+      handleAdd,
     }
   }
 }