From 0f50d478449c1fbe563098ce3d84185a7ed70e6d Mon Sep 17 00:00:00 2001
From: yuanteng <1876787513@qq.com>
Date: Tue, 29 Oct 2024 10:51:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header.vue          | 119 +++++++++++-----------
 src/utils/request.js                      |  34 -------
 src/views/Commodity/MerchandiseCenter.vue |   1 -
 src/views/Commodity/TypeManagement.vue    |  59 ++++++-----
 src/views/User/UserManagement.vue         |  93 ++++++++++++-----
 5 files changed, 159 insertions(+), 147 deletions(-)
 delete mode 100644 src/utils/request.js

diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 99f7887..2661a68 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -83,78 +83,83 @@
 
 <!--</style>-->
 <template>
-   <div style=" height: 70px; width: 1248px; display: flex;
+  <div style=" height: 70px; width: 1248px; display: flex;
       justify-content: space-between; align-items: center;">
-        <div style=" display: flex; justify-content: center;
+    <div style=" display: flex; justify-content: center;
         align-items: center; margin-left: 10px">
-        <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>
-        <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>
+      <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px">
+        <Expand />
+      </el-icon>
+      <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px">
+        <Fold />
+      </el-icon>
 
 
-          <el-breadcrumb separator="/">
-            <a-breadcrumb-item>{{route.name}}</a-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
+      <el-breadcrumb separator="/">
+        <a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
 
-        <div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">
-          <el-avatar style="margin-right: 10px">
-            <img src="../../assets/admin.jpg" alt="">
-          </el-avatar>
+    <div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
+      <el-avatar style="margin-right: 10px">
+        <img :src="store.loginUser.userAvatar" alt="">
+      </el-avatar>
 
-            <el-dropdown style="cursor: pointer;" size="default">
-            <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
-              <span>用户名称</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
-                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </div>
+      <el-dropdown style="cursor: pointer;" size="default">
+        <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
+          <span>{{ store.loginUser.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
+            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import {ref} from 'vue'
-  import emitter from '@/utils/emitter'
-  import {useRoute, useRouter} from "vue-router";
-  import myAxios from '@/api/myAxios';
-  import { userStore } from '@/store/userStore';
-  import { ElMessage } from 'element-plus';
+import { ref } from 'vue'
+import emitter from '@/utils/emitter'
+import { useRoute, useRouter } from "vue-router";
+import myAxios from '@/api/myAxios';
+import { userStore } from '@/store/userStore';
+import { ElMessage } from 'element-plus';
 
-  const router = useRouter();
-  const route = useRoute();
-  const offset = ref(20)
-  const showLog = ref(false)
-  const store = userStore()
+const router = useRouter();
+const route = useRoute();
+const offset = ref(20)
+const showLog = ref(false)
+const store = userStore()
 
-  const logout = async () => {
-    const res: any = await myAxios.post("/user/logout",{})
-    if(res.data.code == 1 && res.data) {
-      store.$reset()
-      await router.replace('/')
-      ElMessage({
-        type: 'info',
-        message: '登出成功',
-      })
-    }
+
+const logout = async () => {
+  const res: any = await myAxios.post("/user/logout", {})
+  if (res.data.code == 1 && res.data) {
+    store.$reset()
+    await router.replace('/')
+    ElMessage({
+      type: 'info',
+      message: '登出成功',
+    })
   }
-  const changeState = () => {
-    showLog.value = !showLog.value
-    emitter.emit('Aside', showLog.value)
-    if(showLog.value){
-        offset.value = -116
-    }else{
-        offset.value = 20
-    }
+}
+const changeState = () => {
+  showLog.value = !showLog.value
+  emitter.emit('Aside', showLog.value)
+  if (showLog.value) {
+    offset.value = -116
+  } else {
+    offset.value = 20
   }
+}
 
 </script>
 
 <style scoped>
-    :deep(.el-tooltip__trigger:focus-visible) {
-      outline: unset;
-    }
+:deep(.el-tooltip__trigger:focus-visible) {
+  outline: unset;
+}
 </style>
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
deleted file mode 100644
index 0f01292..0000000
--- a/src/utils/request.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import axios from 'axios'
-
-const instance = axios.create({
-    baseURL: 'http://localhost:9090'
-})
-instance.interceptors.request.use(
-    config =>{  // 拦截器成功函数
-        if(config.methods == "post"){
-            config.data = querystring.stringify(config.data)
-        }
-
-        // config:包含着网络请求的所有信息
-        return config;
-    },
-    error =>{  // 拦截器失败函数
-
-        // 返回错误信息
-        return Promise.reject(error)
-    }
-)
-
-// 拦截器----获取数据之前
-instance.interceptors.response.use(
-    response =>{  // 拦截器成功函数
-        return response.status == 200 ? Promise.resolve(response):Promise.reject(response)
-    },
-    error =>{  // 拦截器失败函数
-        const { response } = error;
-        errorHandle(response.status,response.info)
-    }
-)
-
-
-export default instance
\ No newline at end of file
diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index b69508f..7e9520f 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -247,7 +247,6 @@
 </template>
 
 <script setup lang="ts">
-import instance from '@/utils/request';
 import { ElMessage } from 'element-plus';
 import { ref, onMounted } from 'vue';
 const pageNum = ref(0);
diff --git a/src/views/Commodity/TypeManagement.vue b/src/views/Commodity/TypeManagement.vue
index dc19e5a..9cb6d30 100644
--- a/src/views/Commodity/TypeManagement.vue
+++ b/src/views/Commodity/TypeManagement.vue
@@ -51,7 +51,7 @@
   
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button @click="cancel" >取消</el-button>
         <el-button type="primary" @click="dialogVisible = false">
           提交
         </el-button>
@@ -75,22 +75,16 @@
       </template>
     </el-table-column>
   </el-table>
-  <button @click="pri">aaa</button>
 </template>
 
 <script setup lang="ts">
-import { ref , reactive} from 'vue'
-import { ElMessageBox } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import type { UploadFile } from 'element-plus';
+import { ref } from 'vue'
 import { userStore } from '../../store/userStore';
 
 const store = userStore()
 
 const dialogImageUrl = ref('');
 const disabled = ref(false);
-const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
-const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const imageUrl = ref('')
 const selectedItems = ref([])
 const dialogVisible = ref(false)
@@ -99,31 +93,37 @@ const form = ref({
   type_name: '',
   tips: ''
 })
-
-const pri =()=>{
-  console.log(store.loginUser);
-  
-}
-
-const handleSelectionChange = (row: any) => {
-  selectedItems.value = JSON.parse(JSON.stringify(row))
-}
-
-const Add_type =()=>{
-    dialogVisible.value = true;
-    form.value = {
-      img: '',
-      type_name: '',
-      tips: ''
-    }
-}
-const tableData = [
+const tableData = ref([
   {
     img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
     type_name: '材料包',
     tips: '提供用户自定义DIY',
   }
-]
+])
+
+const Add_type =()=>{
+    dialogVisible.value = true;
+    if(form.value.type_name) {
+      form.value = {
+        img: '',
+        type_name: '',
+        tips: ''
+      }
+    }
+    tableData.value.push(form.value)
+}
+const cancel = () => {
+  dialogVisible.value = false
+  resetForm();
+}
+
+const resetForm = () => {
+  form.value = {
+        img: '',
+        type_name: '',
+        tips: ''
+      }
+};
 
 // const handleClose = (done: () => void) => {
 //   ElMessageBox.confirm('确定不添加商品类别吗?')
@@ -134,6 +134,9 @@ const tableData = [
 //       // catch error
 //     })
 // }
+const handleSelectionChange = (row: any) => {
+  selectedItems.value = JSON.parse(JSON.stringify(row))
+}
 
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement;
diff --git a/src/views/User/UserManagement.vue b/src/views/User/UserManagement.vue
index 65a6b25..8d9f972 100644
--- a/src/views/User/UserManagement.vue
+++ b/src/views/User/UserManagement.vue
@@ -3,7 +3,7 @@
 
     <div style="margin: 10px 0">
       <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
-      <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
+      <el-button class="ml-5" type="primary" @click="onSearch(username)" style="height: 25px;">搜索</el-button>
       <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
     </div>
 <!--    <div style="margin: 15px 0">-->
@@ -28,13 +28,13 @@
               @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="id" label="序号" width="50"></el-table-column>
-      <el-table-column prop="username" label="用户昵称" ></el-table-column>
-      <el-table-column prop="avatar" label="头像"></el-table-column>
-      <el-table-column prop="identity" label="身份"></el-table-column>
+      <el-table-column prop="userName" label="用户昵称" ></el-table-column>
+      <el-table-column prop="userAvatar" label="头像"></el-table-column>
+      <el-table-column prop="userRole" label="身份"></el-table-column>
       <el-table-column prop="phone" label="手机号"></el-table-column>
       <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
+        <!-- <template slot-scope="scope">
+          <el-button type="success" @click="detail(scope.row)">详情 <i class="el-icon-edit"></i></el-button>
 
           <el-popconfirm
               class="ml-5"
@@ -45,22 +45,22 @@
               title="您确定删除吗？"
               @confirm="del(scope.row.id)"
           >
-            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
+            <el-button type="danger" slot="reference">封禁 <i class="el-icon-remove-outline"></i></el-button>
           </el-popconfirm>
 
-        </template>
+        </template> -->
       </el-table-column>
     </el-table>
+    <!-- 分页查询 -->
     <div style="padding: 10px 0">
       <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNum"
-          :page-size="pageSize"
+          :current-page="searchParams.current"
+          :page-size="searchParams.pageSize"
           :page-sizes="[2, 5, 10, 20]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"          
           :small="null"
-          :disabled="null"
-          :background="null"
+          background
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
       />
@@ -69,29 +69,68 @@
 </template>
 
 <script setup lang="ts">
-
-import instance from '@/utils/request';
+import { ElMessage } from 'element-plus';
+import myAxios from '@/api/myAxios';
 import {ref, onMounted} from 'vue'
+import { da } from 'element-plus/es/locales.mjs';
+//获取的所有数据
 const tableData = ref([])
-const pageNum = ref(0)
-const pageSize = ref(0)
+//筛选条数
 const total = ref(0)
+//请求参数
+const searchParams: any = ref({
+  //当前页码
+  current: 1,
+  //每页显示条数
+  pageSize: 5
+})
 
 onMounted(() => {
-  load()
+  getUserList()
 })
 const username = ref('')
 const reset =()=>{
   username.value = ''
+  onSearch(username.value)
+  getUserList()
 }
-const load = async () => {
-  await instance.get('/admin/findAllUsers').then(res => {
-    console.log(res.data.data)
-    res.data.data.foreach((item:any) => {
-      console.log(item)
-    })
-    tableData.value = res.data.data
-  })
+//用户信息列表
+const getUserList = async () => {
+  //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
+  const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
+    if(res.data.code === 1) {
+      //给前端表格赋值   字段名一定要对应
+      tableData.value = res.data.data.records
+      //筛选条数
+      total.value = parseInt(res.data.data.total)
+    }else {
+      ElMessage({
+        type: 'info',
+        message: '查询失败',
+      })
+    }
+}
+const handleSelectionChange  = (val:any)=>{
+  console.log(val)
+}
+// 处理页大小变化
+const handleSizeChange = (newSize:any) => {
+  searchParams.value.pageSize = newSize //新的页面条数
+  getUserList() //重新发起请求
+};
+
+// 处理当前页变化
+const handleCurrentChange = (Current:any) => {
+  searchParams.value.current = Current //新的当前页面
+  getUserList() //重新发起请求
+};
+
+//搜索按钮方法
+const onSearch = (data : String)=>{
+  console.log(data)
+  searchParams.value.userName = data
+  searchParams.value.current = 1
+  getUserList()
 }
 
 </script>