vue项目: 布局组件开发-分页-编辑用户页面搭建

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

@@ -1,5 +1,4 @@
 import { getUsersByPage } from '@/api/users';
-import { createLogger } from 'vuex';
 
 export default {
   namespaced: true,
@@ -12,6 +11,14 @@ export default {
     },
     users: [],
   },
+  getters: {
+    total(state) {
+      return state.pageInfo.totalElements;
+    },
+    page(state) {
+      return state.pageInfo.pno;
+    },
+  },
   mutations: {
     setUsers(state, users) {
       state.users = users;

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

@@ -0,0 +1,79 @@
+<template>
+  <el-form
+    label-width="40px"
+    :model="editForm"
+    :rules="rules"
+    ref="editForm"
+    size="mini"
+  >
+    <el-form-item label="账号" prop="username">
+      <el-input
+        v-model="editForm.username"
+        placeholder="账号..."
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="密码" prop="password">
+      <el-input
+        type="password"
+        v-model="editForm.password"
+        clearable
+        placeholder="密码..."
+        show-password
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="昵称" prop="nickname">
+      <el-input
+        v-model="editForm.nickname"
+        placeholder="昵称..."
+        clearable
+      ></el-input>
+    </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-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-select>
+    </el-form-item>
+
+    <el-form-item class="align-right">
+      <el-button @click="resetForm()">重置</el-button>
+      <el-button type="primary" @click="submitForm()">立即创建</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'UserEdit',
+  props: ['id'],
+  data() {
+    return {
+      editForm: {
+        username: '',
+        password: '',
+        nickname: '',
+        roleId: '',
+        deptId: '',
+        face: '',
+      },
+    };
+  },
+  methods: {
+    resetForm() {},
+    submitForm() {},
+  },
+};
+</script>
+
+<style lang="css" scoped>
+.align-right {
+  text-align: right;
+}
+</style>

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

@@ -38,7 +38,14 @@
           <span :style="{ marginLeft: '4px' }">用户列表</span>
         </el-col>
         <el-col :span="12" :style="{ textAlign: 'right' }">
-          <el-button size="mini" plain icon="el-icon-plus"> 添加 </el-button>
+          <el-button
+            size="mini"
+            plain
+            icon="el-icon-plus"
+            @click="openDialog()"
+          >
+            添加
+          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -86,6 +93,7 @@
             icon="el-icon-edit"
             circle
             size="mini"
+            @click="openDialog(row.id)"
           ></el-button>
           <el-popconfirm
             confirm-button-text="确认"
@@ -110,25 +118,41 @@
     <el-row :style="{ marginTop: '16px' }">
       <el-col :span="24" :style="{ textAlign: 'right' }">
         <el-pagination
+          :current-page="page"
           :page-size="10"
           layout="total, prev, pager, next"
-          :total="400"
+          :total="total"
+          small
+          @current-change="onCurrentChange"
         >
         </el-pagination>
       </el-col>
     </el-row>
+    <el-dialog
+      :title="editUserID ? '修改用户' : '新增用户'"
+      :visible.sync="dialogVisible"
+      width="40%"
+      @close="resetDialog"
+      center
+    >
+      <UserEdit :id="editUserID" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import { getAllRoles } from '@/api/roles';
 import { deleteUser } from '@/api/users';
 
+import UserEdit from './components/UserEdit.vue';
+
 export default {
   name: 'Users',
   data() {
     return {
+      dialogVisible: false,
+      editUserID: '',
       filterName: '',
       roles: [],
     };
@@ -141,8 +165,23 @@ export default {
   },
   computed: {
     ...mapState('users', ['users', 'pageInfo']),
+    ...mapGetters('users', ['total', 'page']),
   },
   methods: {
+    resetDialog() {
+      this.editUserID = '';
+    },
+    openDialog(id) {
+      // if (id) this.editUserID = id;
+      id && (this.editUserID = id);
+      this.dialogVisible = true;
+    },
+    // 页码变化时
+    onCurrentChange(pno) {
+      // console.log(`output->pno`, pno);
+      this.$store.commit('users/setPage', { pno });
+      this.loadData();
+    },
     // 删除用户
     async onDeleteUser(id) {
       // console.log(`output->id`, id);
@@ -180,6 +219,9 @@ export default {
       this.roles = data.list;
     }
   },
+  components: {
+    UserEdit,
+  },
 };
 </script>