vue项目: 布局组件开发-搭建用户管理页面

14_Vue项目/day-4/vue2-shop/src/layout/components/AppHeader.vue

@@ -35,6 +35,7 @@ export default {
           // 1 清除本地存储的数据
           localStorage.clear();
           sessionStorage.clear();
+          this.$store.commit('system/clearTabs');
           // 2 将页面导航到登录上
           this.$router.push({ name: 'login' });
           break;

14_Vue项目/day-4/vue2-shop/src/store/modules/system.js

@@ -39,5 +39,9 @@ export default {
 
       state.tabs.splice(delTabIndex, 1);
     },
+    clearTabs(state) {
+      state.tabs = [];
+      state.activedTabValue = '01';
+    },
   },
 };

14_Vue项目/day-4/vue2-shop/src/views/Login.vue

@@ -53,8 +53,8 @@ export default {
       // 添加表单数据对象
       userForm: {
         // 下面的属性名称 尽量和后台接口对应上
-        username: '',
-        password: '',
+        username: 'admin',
+        password: '123456',
       },
       rules: {
         username: [

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

@@ -1,5 +1,73 @@
 <template>
-  <div>
-    <p>用户管理</p>
+  <div class="users">
+    <div class="search">
+      <el-row :style="{ padding: '16px' }">
+        <el-col :span="12">
+          <i class="el-icon-search"></i>
+          <span :style="{ marginLeft: '4px' }">筛选搜索</span>
+        </el-col>
+        <el-col :span="12" :style="{ textAlign: 'right' }">
+          <el-button size="mini" plain>重置</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" plain
+            >查询</el-button
+          >
+        </el-col>
+      </el-row>
+      <el-row :style="{ marginLeft: '32px' }">
+        <el-form inline>
+          <el-form-item label="用户名：">
+            <el-input placeholder="根据用户名检索..." size="mini" />
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </div>
+    <div :style="{ border: '1px solid #ccc', borderRadius: '4px' }">
+      <el-row :style="{ padding: '16px' }">
+        <el-col :span="12">
+          <i class="el-icon-notebook-2"></i>
+          <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-col>
+      </el-row>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      :style="{ width: '100%', marginTop: '16px' }"
+    >
+      <el-table-column prop="face" label="头像"> </el-table-column>
+      <el-table-column prop="username" label="账号"> </el-table-column>
+      <el-table-column prop="nickname" label="昵称"> </el-table-column>
+      <el-table-column prop="password" label="密码"> </el-table-column>
+      <el-table-column prop="roleId" label="角色"> </el-table-column>
+      <el-table-column prop="deptName" label="部门"> </el-table-column>
+      <el-table-column prop="insertTime" label="创建时间"> </el-table-column>
+      <el-table-column fixed="right" label="操作" width="80">
+        <template>
+          <el-button type="primary" icon="el-icon-edit" circle></el-button>
+          <el-button type="danger" icon="el-icon-delete" circle></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row :style="{ marginTop: '16px' }">
+      <el-col :span="24" :style="{ textAlign: 'right' }">
+        <el-pagination
+          :page-size="10"
+          layout="total, prev, pager, next"
+          :total="400"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
+<style scoped>
+.search {
+  margin: 16px 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+</style>