admin1/jiangchengfeiyi-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yuanteng 2024-11-12 19:50:54 +08:00
parent f494a44d81
commit 79da702e4c
6 changed files with 41 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layout/components/Aside.vue
View File

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

5
src/router/routes.ts
View File

@ -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")
}
]
},

31
src/views/Commodity/MerchandiseCenter.vue
View File

@ -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>

4
src/views/Coupons/CouponCenter.vue
View File

@ -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) => {

13
src/views/Orders/OrderList.vue
View File

@ -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([]) //订单中的商品明细，多个商品
//订单列表

202
src/views/Orders/orderOperations.vue
View File

@ -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>