表格降序、批量删除、序号化

src/layout/components/Aside.vue

@@ -82,11 +82,7 @@
 
             <el-menu-item index="/OrderList">
               <el-icon><Menu /></el-icon>
-              <span slot="title">商品订单列表</span>
+              <span slot="title">实体商品订单列表</span>
-            </el-menu-item>
-            <el-menu-item index="/orderOperations">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">商品订单操作</span>
             </el-menu-item>
           </el-sub-menu>
         </el-menu>

src/router/routes.ts

@@ -57,11 +57,6 @@ export const routes = [
                 path: '/CouponCenter',
                 name:'优惠券中心',
                 component: ()=> import("../views/Coupons/CouponCenter.vue")
-            },
-            {
-                path: '/orderOperations',
-                name:'商品订单操作',
-                component: ()=> import("../views/Orders/orderOperations.vue")
             }
         ]
     },

src/views/Commodity/MerchandiseCenter.vue

@@ -33,7 +33,11 @@
       :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @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="80"></el-table-column>
+      <el-table-column prop="id" label="商品编号" width="80">
+        <template #default="{ $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
       <el-table-column prop="goodImg" label="商品图片">
         <template #default="scope">
           <div>
@@ -174,10 +178,10 @@
 
 <script setup lang="ts">
 import { ElMessage , type UploadProps , genFileId ,type UploadRawFile  } from 'element-plus';
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, toRaw } from 'vue';
 import myAxios from "@/api/myAxios";
 const total = ref(0); //总页数
-const id = ref([]);
+const idList = ref([]);
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
   pageSize: 5, //每页显示条数
@@ -269,8 +273,10 @@ const deleteProduct = async (index: number) => {
   }
   getTypeList()
 }
+//选中发生的方法--->将其赋值给批量删除的数组
 const handleSelectionChange = (row: any) => {
-  id.value = JSON.parse(JSON.stringify(row));
+  idList.value = row.map((item : any)=>item.id)
+  // console.log('id->',productId.value);
 };
 //详情或编辑 
 const ReviseOrView = (index: number, row: any , flag : number) => {
@@ -346,14 +352,27 @@ const handleChange = async (file: any, flag: number) => {
     flag ? editForm.value.detailImg = res.data.data : editForm.value.goodImg = res.data.data
   }
 }
-
 const onSearch = (data : String)=>{ //搜索按钮方法
   searchParams.value.name = data
   searchParams.value.current = 1
   getProductList()
 }
-const delBatch =()=>{
  //批量删除
+const delBatch = async ()=>{
+  console.log(idList.value);
+  const res = await myAxios.post('/goods/delBatch',{
+    idList: idList.value
+  })
+  console.log(res.data);
+  if(res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '批量删除成功'
+    })
+    getProductList()
+  } else {
+    ElMessage.error('删除失败')
+  }
 }
 const load =()=>{}
 </script>

src/views/Coupons/CouponCenter.vue

@@ -148,7 +148,9 @@ const fileSimple = ref()
 const disabled = ref(true)
 const searchParams: any = ref({ //分页
   current: 1,
-  pageSize: 5
+  pageSize: 5,
+  sortField: "id",  //根据ID分类
+  sortOrder: "descend" //降序
 })
 //删除图片
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {

src/views/Orders/OrderList.vue

@@ -20,10 +20,14 @@
     :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
     :header-cell-style="{ 'text-align': 'center' }">
     <el-table-column type="selection" width="55" fixed="left"></el-table-column>
-    <el-table-column prop="id" label="订单编号" width="80"></el-table-column>
+    <el-table-column prop="id" label="订单序号" width="80">
+      <template #default="{ $index }">
+        {{ $index + 1 }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
     <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
     <el-table-column prop="userName" label="用户名" width="80"></el-table-column>
-    <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
     <el-table-column label="所购买的商品" width="100">
       <el-table-column label="展开所有商品" type="expand" width="100">
         <template #default="props">
@@ -133,8 +137,11 @@ const DialogVisible = ref(false); //详情展示
 const name = ref('')
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
-  pageSize: 5 //每页显示条数
+  pageSize: 5, //每页显示条数
+  sortField: "id",  //根据ID分类
+  sortOrder: "descend" //降序
 })
+const id = ref({})
 const num = ref(0)
 const orderDetail: any = ref([])  //订单中的商品明细，多个商品
 //订单列表

src/views/Orders/orderOperations.vue

@@ -1,202 +0,0 @@
-<template>
-  <div>
-    <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
-              v-model="id"></el-input>
-    <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
-    <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
-  </div>
-    <div style="margin: 15px 0">
-      <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-                     title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
-        <template #reference>
-          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
-            <Remove />
-          </el-icon></el-button>
-        </template>
-      </el-popconfirm>
-    </div>
-    <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
-              :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @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="订单id" width="80"></el-table-column>
-      <el-table-column prop="goodSnapshot.name" label="商品名称"></el-table-column>
-      <el-table-column prop="quantity" label="购买数量" width="180"></el-table-column>
-      <el-table-column prop="totalAmount" label="订单总金额"></el-table-column>
-      <el-table-column prop="createTime" label="下单时间"></el-table-column>
-      <el-table-column prop="orderNumber" label="快递单号"></el-table-column>
-      <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
-      <el-table-column label="操作" width="250px">
-        <template #default="scope">
-          <el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
-            编辑
-          </el-button>
-          <el-button plain @click="dialogFormVisible = true">
-            发货
-          </el-button>
-          <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-                         title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
-            <template #reference>
-              <el-button  class="ml-5" type="danger">取消订单</el-button>
-            </template>
-          </el-popconfirm>
-          <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
-                         title="您确定删除吗？">
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="padding: 10px 0">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                     :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
-                     :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
-                     :total="total" />
-    </div>
-  <!--  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">-->
-  <!--    <el-form :model="">-->
-  <!--      <el-form-item label="快递单号" :label-width="formLabelWidth">-->
-  <!--        <el-input v-model=" " autocomplete="off" />-->
-  <!--      </el-form-item>-->
-  <!--    </el-form>-->
-  <!--    <template #footer>-->
-  <!--      <div class="dialog-footer">-->
-  <!--        <el-button @click="dialogFormVisible = false">取消</el-button>-->
-  <!--        <el-button type="primary" @click="dialogFormVisible = false">-->
-  <!--          确定-->
-  <!--        </el-button>-->
-  <!--      </div>-->
-  <!--    </template>-->
-  <!--  </el-dialog>-->
-  </template>
-  
-  <script lang="ts" setup>
-  import {ref,onMounted} from "vue";
-  import myAxios from "@/api/myAxios";
-  import {ElMessage} from "element-plus";
-  const tableData : any= ref([]);
-  const total = ref(0);
-  const num  = ref(0)
-  const dialogFormVisible = ref(false)
-  const formLabelWidth = '140px'
-  onMounted(()=>{
-    getOrderList()
-  })
-  
-  const searchParams: any = ref({ //封装分页
-    current: 1, //当前页码
-    pageSize: 5 //每页显示条数
-  })
-  const handleSizeChange = (newSize: any) => {
-    searchParams.value.pageSize = newSize //新的页面数
-    getOrderList()
-  }
-  const handleCurrentChange = (Current: any) => {
-    searchParams.value.current = Current
-    getOrderList()
-  }
-  const handleSelectionChange = (row: any) => {
-    // id.value = JSON.parse(JSON.stringify(row));
-  }
-  const getOrderList = async () => {
-    try {
-      const res = await myAxios.post('/order/list/page', { ...searchParams.value });
-        // console.log(res)
-      if (res.data.code === 1) {
-        tableData.value = res.data.data.records
-        total.value = parseInt(res.data.data.total)
-        for(let key in tableData.value) {
-          num.value = parseInt(key)
-          const resOrderDetail = await myAxios.post('/order/list/item',{id:tableData.value[key].id})
-          if( resOrderDetail.data.code === 1 ) {
-            tableData.value.goodSnapshot= resOrderDetail.data.data[key].goodSnapshot
-            tableData.value.quantity = resOrderDetail.data.data[key].quality
-            // console.log(resOrderDetail.data.data[0].goodSnapshot.name)
-            console.log( tableData.value.goodSnapshot.name)
-            console.log( resOrderDetail.data.data[key].quantity)
-          }
-        }
-      } else {
-        ElMessage({
-          message: '获取数据失败',
-        });
-      }
-    } catch (error) {
-      ElMessage({
-        message: '发生错误',
-      });
-    }
-  }
-  
-  
-  // const getItemList = async (id: number) => {
-  //   try {
-  //     const res = await myAxios.post('/order/list/item', { id:tableData.value[key].id});
-  //     console.log(res)
-  //     if (res.data.code === 1) {
-  //       tableData.value = res.data.data.records;
-  //       total.value = parseInt(res.data.data.total)
-  //     } else {
-  //       ElMessage({
-  //         message: '获取数据失败',
-  //       });
-  //     }
-  //   } catch (error) {
-  //     ElMessage({
-  //       message: '发生错误',
-  //     });
-  //   }
-  // }
-  
-  // const orderList = ref({
-  // id:'',
-  // userId:'',
-  // addressSnapshot:{
-  // name:'',
-  // phone:'',
-  // region:'',
-  // detailAddress:''
-  // },
-  // couponSnapshot:{
-  // name:'',
-  // conditionAmount:''
-  // },
-  // totalAmount:'',
-  // orderStatus:'',
-  // createTime:'',
-  // updateTime:'',
-  // isDelete:'',
-  // orderNumber:''
-  // })
-  const delBatch =()=>{
-    //批量取消
-  }
-  //发货
-  const shipments = (index: number, row: any , flag : number) => {
-  
-  };
-  //编辑
-  const ReviseOrView = (index: number, row: any , flag : number) => {
-  
-  };
-  const deleteProduct = async (index: number) => {
-    console.log(typeof index)
-    const res = await myAxios.post('/goods/delete', { id: index })
-    console.log(res)
-    if (res.data.code === 1) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功',
-      })
-      getOrderList()
-    }
-  }
-  const reset = () => {
-    id.value = '';
-  
-  };
-  const load =()=>{}
-  </script>
-  
-  <style lang="scss" scoped>
-  
-  </style>