vue项目: 修改用户信息

14_Vue项目/day-6/vue2-shop/src/api/users.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 
+// const axiosInstance = Vue.$http;
+
 /**
  * [分页获取用户列表]
  *
@@ -28,3 +30,19 @@ export function upload(url, data) {
     },
   });
 }
+
+export function deleteAvatar(path) {
+  return Vue.$http.get('/file/delete', {
+    params: {
+      path,
+    },
+  });
+}
+
+export function updateUser(user) {
+  return Vue.$http.put('/user/update', user);
+}
+
+export function getUserByID(id) {
+  return Vue.$http.get(`/user/find/id/${id}`);
+}

14_Vue项目/day-6/vue2-shop/src/views/system/users/components/UserEdit.vue

@@ -66,6 +66,7 @@
           :on-exceed="onExceed"
           ref="myupload"
           :before-remove="onBeforeRemove"
+          :on-remove="onRemove"
         >
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{ file }">
@@ -98,7 +99,9 @@
 
       <el-form-item class="align-right">
         <el-button @click="resetForm()">重置</el-button>
-        <el-button type="primary" @click="submitForm()">立即创建</el-button>
+        <el-button type="primary" @click="submitForm()">{{
+          id ? '保存修改' : '立即创建'
+        }}</el-button>
       </el-form-item>
     </el-form>
     <el-dialog :visible.sync="dialogVisible" append-to-body>
@@ -110,7 +113,13 @@
 <script>
 import { getAllRoles } from '@/api/roles';
 import { getAllDepts } from '@/api/dept';
-import { addUser, upload } from '@/api/users';
+import {
+  addUser,
+  upload,
+  deleteAvatar,
+  getUserByID,
+  updateUser,
+} from '@/api/users';
 
 export default {
   name: 'UserEdit',
@@ -161,8 +170,14 @@ export default {
     };
   },
   methods: {
-    onBeforeRemove() {
-      console.log(`output->this.$refs.myupload`, this.$refs.myupload);
+    onRemove() {
+      this.editForm.face = '';
+      this.fileList = [];
+    },
+    async onBeforeRemove() {
+      let { code } = await deleteAvatar(this.editForm.face).catch((err) => err);
+      // console.log(`output->this.$refs.myupload`, this.$refs.myupload);
+      return code === 200 ? true : false;
     },
     onExceed(files) {
       this.$message.warning('头像只能上传一个。');
@@ -191,7 +206,9 @@ export default {
     handlePictureCardPreview(file) {
       this.dialogVisible = true;
     },
-    handleRemove(file) {},
+    handleRemove(file) {
+      this.$refs.myupload.handleRemove();
+    },
     resetForm() {
       this.$refs.editForm.resetFields();
     },
@@ -207,6 +224,11 @@ export default {
       // 此时有两种可能：新增用户 修改用户
       if (this.id) {
         // 修改用户
+        let { code, msg } = await updateUser(this.editForm).catch((err) => err);
+
+        this.$message(msg);
+
+        code === 200 && this.$store.commit('users/setDialogVisible', false);
       } else {
         // 新增用户
         let { code, msg } = await addUser(this.editForm).catch((err) => err);
@@ -225,10 +247,25 @@ export default {
       let { code, data } = await getAllDepts().catch((err) => err);
       code === 200 && (this.depts = data.list);
     },
+    async getUserInfor(id) {
+      let { code, data } = await getUserByID(id).catch((err) => err);
+
+      if (code === 200) {
+        this.editForm = data;
+
+        this.fileList = [
+          {
+            name: data.face.slice(data.face.lastIndexOf('/') + 1),
+            url: data.face,
+          },
+        ];
+      }
+    },
   },
   mounted() {
     this.fetchRoles();
     this.fetchDepts();
+    this.id && this.getUserInfor(this.id);
   },
 };
 </script>