vue项目: 布局组件开发-用户列表-检索&删除&角色名称显示

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

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

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

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

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

@@ -7,8 +7,13 @@
           <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 size="mini" plain @click="filterName = ''">重置</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-search"
+            plain
+            @click="loadData"
             >查询</el-button
           >
         </el-col>
@@ -16,7 +21,12 @@
       <el-row :style="{ marginLeft: '32px' }">
         <el-form inline>
           <el-form-item label="用户名：">
-            <el-input placeholder="根据用户名检索..." size="mini" />
+            <el-input
+              placeholder="根据用户名检索..."
+              size="mini"
+              clearable
+              v-model="filterName"
+            />
           </el-form-item>
         </el-form>
       </el-row>
@@ -47,7 +57,13 @@
       <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="roleId" label="角色">
+        <template v-slot="{ row }">
+          <el-tag :type="row.roleId == 1 ? 'warning' : ''">{{
+            showRoleName(row.roleId)
+          }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column prop="deptName" label="部门"> </el-table-column>
       <el-table-column prop="insertTime" label="创建时间">
         <template v-slot="{ row }">
@@ -64,19 +80,30 @@
         </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="88">
-        <template>
+        <template v-slot="{ row }">
           <el-button
             type="primary"
             icon="el-icon-edit"
             circle
             size="mini"
           ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            circle
-            size="mini"
-          ></el-button>
+          <el-popconfirm
+            confirm-button-text="确认"
+            confirm-button-type="danger"
+            cancel-button-text="取消"
+            icon="el-icon-info"
+            icon-color="red"
+            title="您确定删除当前用户吗？"
+            @confirm="onDeleteUser(row.id)"
+          >
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="mini"
+              slot="reference"
+            ></el-button>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -95,16 +122,63 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
+import { getAllRoles } from '@/api/roles';
+import { deleteUser } from '@/api/users';
+
 export default {
   name: 'Users',
+  data() {
+    return {
+      filterName: '',
+      roles: [],
+    };
+  },
+  filters: {
+    // 根据角色id 显示出 对应角色的名称
+    // showRoleName(rid) {
+    //   return this.roles.find((r) => r.id === rid).name;
+    // },
+  },
   computed: {
     ...mapState('users', ['users', 'pageInfo']),
   },
   methods: {
+    // 删除用户
+    async onDeleteUser(id) {
+      // console.log(`output->id`, id);
+
+      if (id === 1) {
+        return this.$message({
+          type: 'error',
+          message: '不能删除超级管理员',
+          duration: 1000,
+          showClose: true,
+        });
+      }
+      let { code, msg } = await deleteUser(id);
+      this.$message({
+        type: 'success',
+        message: msg,
+        duration: 1000,
+        showClose: true,
+      });
+
+      if (code === 200) this.loadData();
+    },
+    showRoleName(rid) {
+      return this.roles.find((r) => r.id === rid)?.name;
+    },
+    loadData() {
+      this.fetchUsersByPage(this.filterName);
+    },
     ...mapActions('users', ['fetchUsersByPage']),
   },
-  mounted() {
-    this.fetchUsersByPage('');
+  async mounted() {
+    this.loadData();
+    let { code, data } = await getAllRoles().catch((err) => err);
+    if (code === 200) {
+      this.roles = data.list;
+    }
   },
 };
 </script>