vue项目: 布局组件开发-分页-新增用户

14_Vue项目/day-5/vue2-shop/src/api/dept.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export function getAllDepts() {
+  return Vue.$http.get('/dept/list/all');
+}

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

@@ -16,3 +16,7 @@ export function getUsersByPage(params) {
 export function deleteUser(id) {
   return Vue.$http.delete('/user/id/' + id);
 }
+
+export function addUser(user) {
+  return Vue.$http.put('/user/insert', user);
+}

14_Vue项目/day-5/vue2-shop/src/store/index.js

@@ -6,7 +6,7 @@ import usersModule from './modules/users';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {
     userInfo: {},
     menus: [
@@ -49,3 +49,10 @@ export default new Vuex.Store({
   },
   plugins: [],
 });
+
+store.subscribe((mutation, state) => {
+  console.log(mutation.type);
+  console.log(mutation.payload);
+});
+
+export default store;

14_Vue项目/day-5/vue2-shop/src/store/modules/users.js

@@ -3,6 +3,7 @@ import { getUsersByPage } from '@/api/users';
 export default {
   namespaced: true,
   state: {
+    dialogVisible: false,
     pageInfo: {
       pno: 1, // 页码 默认值为 第一页
       psize: 10, // 每页条目，默认 每页显示10条数据
@@ -20,6 +21,9 @@ export default {
     },
   },
   mutations: {
+    setDialogVisible(state, val) {
+      state.dialogVisible = val;
+    },
     setUsers(state, users) {
       state.users = users;
     },

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

@@ -1,6 +1,6 @@
 <template>
   <el-form
-    label-width="40px"
+    label-width="52px"
     :model="editForm"
     :rules="rules"
     ref="editForm"
@@ -31,14 +31,22 @@
     </el-form-item>
     <el-form-item label="角色" prop="roleId">
       <el-select v-model="editForm.roleId" placeholder="请选择角色...">
-        <el-option label="管理员" value="1"></el-option>
-        <el-option label="测试人员" value="2"></el-option>
+        <el-option
+          v-for="r of roles"
+          :key="r.id"
+          :label="r.name"
+          :value="r.id"
+        ></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="部门" prop="deptId">
       <el-select v-model="editForm.deptId" placeholder="请选择部门...">
-        <el-option label="总经办" value="1"></el-option>
-        <el-option label="开发部" value="2"></el-option>
+        <el-option
+          v-for="d of depts"
+          :key="d.id"
+          :label="d.name"
+          :value="d.id"
+        ></el-option>
       </el-select>
     </el-form-item>
 
@@ -50,6 +58,10 @@
 </template>
 
 <script>
+import { getAllRoles } from '@/api/roles';
+import { getAllDepts } from '@/api/dept';
+import { addUser } from '@/api/users';
+
 export default {
   name: 'UserEdit',
   props: ['id'],
@@ -63,11 +75,77 @@ export default {
         deptId: '',
         face: '',
       },
+      rules: {
+        username: [
+          {
+            required: true,
+            message: '账号必须填写！',
+            trigger: 'blur',
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: '密码必须填写！',
+            trigger: 'blur',
+          },
+          {
+            min: 3,
+            max: 16,
+            message: '密码长度在3-16之间!',
+            trigger: 'blur',
+          },
+        ],
+        nickname: [
+          {
+            required: true,
+            message: '昵称必须填写！',
+            trigger: 'blur',
+          },
+        ],
+      },
+      roles: [],
+      depts: [],
     };
   },
   methods: {
-    resetForm() {},
-    submitForm() {},
+    resetForm() {
+      this.$refs.editForm.resetFields();
+    },
+    async submitForm() {
+      let valid = await this.$refs.editForm.validate().catch((err) => false);
+
+      // if (valid) {
+      //   // ...
+      // }
+      if (!valid) return;
+
+      // 表单验证成功
+      // 此时有两种可能：新增用户 修改用户
+      if (this.id) {
+        // 修改用户
+      } else {
+        // 新增用户
+        let { code, msg } = await addUser(this.editForm).catch((err) => err);
+
+        this.$message(msg);
+
+        // 如果添加成功 需要将对话框关闭同时刷新数据
+        this.$store.commit('users/setDialogVisible', false);
+      }
+    },
+    async fetchRoles() {
+      let { code, data } = await getAllRoles().catch((err) => err);
+      code === 200 && (this.roles = data.list);
+    },
+    async fetchDepts() {
+      let { code, data } = await getAllDepts().catch((err) => err);
+      code === 200 && (this.depts = data.list);
+    },
+  },
+  mounted() {
+    this.fetchRoles();
+    this.fetchDepts();
   },
 };
 </script>

14_Vue项目/day-5/vue2-shop/src/views/system/users/index.vue

@@ -151,7 +151,6 @@ export default {
   name: 'Users',
   data() {
     return {
-      dialogVisible: false,
       editUserID: '',
       filterName: '',
       roles: [],
@@ -164,12 +163,21 @@ export default {
     // },
   },
   computed: {
+    dialogVisible: {
+      get() {
+        return this.$store.state.users.dialogVisible;
+      },
+      set(val) {
+        this.$store.commit('users/setDialogVisible', val);
+      },
+    },
     ...mapState('users', ['users', 'pageInfo']),
     ...mapGetters('users', ['total', 'page']),
   },
   methods: {
     resetDialog() {
       this.editUserID = '';
+      this.loadData(); // 每一次对话框关闭 需要重载数据
     },
     openDialog(id) {
       // if (id) this.editUserID = id;