订单列表完善
This commit is contained in:
parent
74c92216f8
commit
f494a44d81
|
|
@ -21,9 +21,9 @@
|
|||
: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="userId" label="用户id"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="100"></el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="150"></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">
|
||||
|
|
@ -47,9 +47,9 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="地址信息快照" width="180">
|
||||
<el-table-column prop="addressSnapshot.name" label="收货人" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" />
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" />
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180"/>
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180"/>
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180"/>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠卷信息快照" width="50">
|
||||
<el-table-column prop="couponSnapshot.name" label="优惠卷名称" />
|
||||
|
|
@ -60,13 +60,13 @@
|
|||
<el-table-column prop="orderStatus" label="快递单号"></el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row, 0)">
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" @click="">
|
||||
<el-button size="small" @click="deliverGoods(scope.row)">
|
||||
发货
|
||||
</el-button>
|
||||
<el-button size="small" @click="" type="warning" plain>
|
||||
<el-button size="small" @click="deleteOrder(scope.row)" type="warning" plain>
|
||||
取消订单
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -78,55 +78,47 @@
|
|||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
<!-- <el-dialog title="订单详情信息" v-model="orderList" width="60%">
|
||||
<el-form label-width="100px" size="default">
|
||||
<el-form-item label="订单id">
|
||||
<el-input v-model="orderList.id" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id">
|
||||
<el-input v-model="orderList.userId" autocomplete="off"></el-input>
|
||||
<el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
|
||||
<el-form label-width="100px" size="default" :model="editForm">
|
||||
<el-form-item label="订单编号">
|
||||
<el-input v-model="editForm.addressSnapshot" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称">
|
||||
<el-input v-model="orderList.addressSnapshot.name" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.addressSnapshot.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单编号">
|
||||
<el-input v-model="orderList.addressSnapshot" autocomplete="off"></el-input>
|
||||
<el-form-item label="收货手机">
|
||||
<el-input v-model="editForm.addressSnapshot.phone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="收货地址">
|
||||
<el-input v-model="orderList.addressSnapshot.region" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.addressSnapshot.region" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="orderList.addressSnapshot.detailAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="orderList.addressSnapshot.phone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券名称">
|
||||
<el-input v-model="orderList.couponSnapshot.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="满减金额">
|
||||
<el-input v-model="orderList.couponSnapshot.conditionAmount" autocomplete="off"></el-input>
|
||||
<!-- 这里的商品明细就不放图片了 -->
|
||||
<el-form-item label="商品明细">
|
||||
<el-input v-model="editForm.addressSnapshot.detailAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单总金额">
|
||||
<el-input v-model="orderList.totalAmount" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态">
|
||||
<el-input v-model="orderList.orderStatus" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="快递单号">
|
||||
<!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-input v-model="orderList.createTime" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.createTime" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间">
|
||||
<el-input v-model="orderList.updateTime" autocomplete="off"></el-input>
|
||||
<el-input v-model="editForm.updateTime" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button style="height: 30px;" @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click=save>确认</el-button>
|
||||
<el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -136,8 +128,8 @@ import { ElMessage } from "element-plus";
|
|||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const title = ref('')
|
||||
const editForm: any = ref({});
|
||||
const DialogVisible = ref(true);
|
||||
const editForm: any = ref({}); //编辑表单
|
||||
const DialogVisible = ref(false); //详情展示
|
||||
const name = ref('')
|
||||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
|
|
@ -165,11 +157,11 @@ const handleSelectionChange = (row: any) => {
|
|||
const getOrderList = async () => {
|
||||
try {
|
||||
const res = await myAxios.post('/order/list/page', { ...searchParams.value });
|
||||
console.log('订单信息--->', res.data.data);
|
||||
// console.log('订单信息--->', res.data.data);
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total)
|
||||
console.log('表单信息--->', tableData.value[0].orderItemList);
|
||||
// console.log('表单信息--->', tableData.value);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '获取数据失败',
|
||||
|
|
@ -184,14 +176,33 @@ const getOrderList = async () => {
|
|||
const delBatch = () => {
|
||||
//批量删除
|
||||
}
|
||||
const showDetail = (index: number, row: any, flag: number) => {
|
||||
//查看订单详情
|
||||
const showDetail = (index: number, row: any) => {
|
||||
title.value = "订单详情"
|
||||
DialogVisible.value = true;
|
||||
editForm.value = row;
|
||||
console.log('editForm--->',editForm.value);
|
||||
};
|
||||
const deleteProduct = async (index: number) => {
|
||||
//发货方法
|
||||
const deliverGoods = async (row : any)=>{
|
||||
// console.log('status--->',row.id);
|
||||
const res = await myAxios.post('/order/update',{
|
||||
id: row.id,
|
||||
orderStatus: "已发货"
|
||||
})
|
||||
//发货要改的，要有弹窗填写快递单号
|
||||
if(res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '发货成功'
|
||||
})
|
||||
getOrderList()
|
||||
}
|
||||
}
|
||||
//取消订单
|
||||
const deleteOrder = async (row : any) => {
|
||||
// console.log(typeof index)
|
||||
const res = await myAxios.post('/goods/delete', { id: index })
|
||||
const res = await myAxios.post('/goods/delete', { id: row.id })
|
||||
console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
|
|
@ -206,6 +217,10 @@ const reset = () => {
|
|||
|
||||
};
|
||||
const load = () => { }
|
||||
//保存订单状态
|
||||
const save =()=>{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,252 +1,41 @@
|
|||
<template>
|
||||
switch parent border: <el-switch v-model="parentBorder" /> switch child
|
||||
border: <el-switch v-model="childBorder" />
|
||||
<el-table :data="tableData" :border="parentBorder" style="width: 100%">
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div m="4">
|
||||
<p m="t-0 b-2">State: {{ props.row.state }}</p>
|
||||
<p m="t-0 b-2">City: {{ props.row.city }}</p>
|
||||
<p m="t-0 b-2">Address: {{ props.row.address }}</p>
|
||||
<p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
|
||||
<h3>Family</h3>
|
||||
<el-table :data="props.row.family" :border="childBorder">
|
||||
<el-table-column label="Name" prop="name" />
|
||||
<el-table-column label="State" prop="state" />
|
||||
<el-table-column label="City" prop="city" />
|
||||
<el-table-column label="Address" prop="address" />
|
||||
<el-table-column label="Zip" prop="zip" />
|
||||
</el-table>
|
||||
<div>
|
||||
<span
|
||||
:style="getStyle(1)"
|
||||
@click="selectText(1)"
|
||||
>
|
||||
文字1
|
||||
</span>
|
||||
<span
|
||||
:style="getStyle(2)"
|
||||
@click="selectText(2)"
|
||||
>
|
||||
文字2
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Date" prop="date" />
|
||||
<el-table-column label="Name" prop="name" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const parentBorder = ref(false)
|
||||
const childBorder = ref(false)
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-08',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-06',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2016-05-07',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const selectedText = ref(1); // 用来存储选中的文字
|
||||
|
||||
// 根据选中状态动态返回样式
|
||||
const getStyle = (textNum) => {
|
||||
return {
|
||||
'border-bottom': selectedText.value === textNum ? '2px solid black' : 'none',
|
||||
'cursor': 'pointer'
|
||||
};
|
||||
};
|
||||
|
||||
const selectText = (textNum) => {
|
||||
selectedText.value = textNum; // 更新选中的文字
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
margin-right: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user