Compare commits
No commits in common. "c76ceddd11fdb83251cec1a29a2bf909572f6859" and "cb230172dab2f5a6784ddad76678a3118999e4f0" have entirely different histories.
c76ceddd11
...
cb230172da
@ -19,7 +19,6 @@
|
|||||||
"@element-plus/icons-vue": "2.3.1",
|
"@element-plus/icons-vue": "2.3.1",
|
||||||
"@vueup/vue-quill": "1.2.0",
|
"@vueup/vue-quill": "1.2.0",
|
||||||
"@vueuse/core": "10.11.0",
|
"@vueuse/core": "10.11.0",
|
||||||
"address-parse": "^1.2.19",
|
|
||||||
"axios": "0.28.1",
|
"axios": "0.28.1",
|
||||||
"clipboard": "2.0.11",
|
"clipboard": "2.0.11",
|
||||||
"echarts": "5.5.1",
|
"echarts": "5.5.1",
|
||||||
|
|||||||
@ -1,44 +0,0 @@
|
|||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取商品管理列表
|
|
||||||
export function orderInfo(query) {
|
|
||||||
return request({
|
|
||||||
url: '/user-center/orderInfo/page',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//平台物流发货
|
|
||||||
export function createLogisticOrder(query) {
|
|
||||||
return request({
|
|
||||||
url: '/logistics/logisticorder/createLogisticOrder',
|
|
||||||
method: 'post',
|
|
||||||
data: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//获取订单详情
|
|
||||||
export function orderDetails(query) {
|
|
||||||
return request({
|
|
||||||
url: '/user-center/orderInfo/getById',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//同意退款与拒绝退款
|
|
||||||
export function refund(query) {
|
|
||||||
return request({
|
|
||||||
url: '/user-center/refund/audit',
|
|
||||||
method: 'post',
|
|
||||||
data: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//商家修改订单地址
|
|
||||||
export function merchantUpdateOrderAddress(query) {
|
|
||||||
return request({
|
|
||||||
url: '/user-center/orderInfo/merchantUpdateOrderAddress',
|
|
||||||
method: 'post',
|
|
||||||
data: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
14780
src/assets/address.json
14780
src/assets/address.json
File diff suppressed because it is too large
Load Diff
@ -32,13 +32,6 @@
|
|||||||
:cell-class-name="cellClassName"
|
:cell-class-name="cellClassName"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
>
|
>
|
||||||
<!-- 树形展开 -->
|
|
||||||
<el-table-column v-if="tree" type="expand">
|
|
||||||
<template #default="props">
|
|
||||||
<slot name="tree" :row="props.row"></slot>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<!-- 首列多选框 -->
|
<!-- 首列多选框 -->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-if="showSelection"
|
v-if="showSelection"
|
||||||
@ -122,10 +115,6 @@ const props = defineProps({
|
|||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
tree: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// 当前页码（由外部传入）
|
// 当前页码（由外部传入）
|
||||||
currentPage: {
|
currentPage: {
|
||||||
type: Number,
|
type: Number,
|
||||||
@ -212,12 +201,12 @@ const emit = defineEmits([
|
|||||||
// 每页数量（双向绑定）
|
// 每页数量（双向绑定）
|
||||||
const computedPageSize = computed({
|
const computedPageSize = computed({
|
||||||
get: () => props.pageSize,
|
get: () => props.pageSize,
|
||||||
set: (val) => emit("update:pageSize", val),
|
set: (val) => emit('update:pageSize', val)
|
||||||
});
|
});
|
||||||
// 当前页码（双向绑定）
|
// 当前页码（双向绑定）
|
||||||
const computedCurrentPage = computed({
|
const computedCurrentPage = computed({
|
||||||
get: () => props.currentPage,
|
get: () => props.currentPage,
|
||||||
set: (val) => emit("update:currentPage", val),
|
set: (val) => emit('update:currentPage', val)
|
||||||
});
|
});
|
||||||
|
|
||||||
// 分页大小改变
|
// 分页大小改变
|
||||||
|
|||||||
@ -107,35 +107,7 @@ export const constantRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/order',
|
|
||||||
component: Layout,
|
|
||||||
hidden: true,
|
|
||||||
redirect: 'noredirect',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'order/sendGoodsInfo/:activeTab?',
|
|
||||||
component: () => import('@/views/order/sendGoodsInfo'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "去发货",
|
|
||||||
icon: "star",
|
|
||||||
},
|
|
||||||
name: "sendGoodsInfo",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/orderDetails/:activeTab?',
|
|
||||||
component: () => import('@/views/order/orderDetails'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "订单详情",
|
|
||||||
icon: "star",
|
|
||||||
},
|
|
||||||
name: "orderDetails",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/user',
|
path: '/user',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
@ -377,109 +349,6 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/order',
|
|
||||||
name: "order",
|
|
||||||
component: Layout,
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "订单列表",
|
|
||||||
icon: "documentation",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'order/obligation',
|
|
||||||
component: () => import('@/views/order/obligation'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "待付款",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "obligation",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/sendGoods',
|
|
||||||
component: () => import('@/views/order/sendGoods'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "待发货",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "sendGoods",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/shipped',
|
|
||||||
component: () => import('@/views/order/shipped'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已发货",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "shipped",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/receivedGoods',
|
|
||||||
component: () => import('@/views/order/receivedGoods'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已收货",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "receivedGoods",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/completed',
|
|
||||||
component: () => import('@/views/order/completed'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已完成",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "completed",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/cancelled',
|
|
||||||
component: () => import('@/views/order/cancelled'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已取消",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "cancelled",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/salesService',
|
|
||||||
component: () => import('@/views/order/salesService'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "退货/退款",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "salesService",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/refunded',
|
|
||||||
component: () => import('@/views/order/refunded'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已退货/退款",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "refunded",
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// 动态路由，基于用户权限动态去加载
|
// 动态路由，基于用户权限动态去加载
|
||||||
|
|||||||
@ -1,594 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div @click="goSend(slotProps.row)" class="send-button">去发货</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: "7",
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
// { prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/sendGoodsInfo",
|
|
||||||
query: { data: JSON.stringify(data) },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,594 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div @click="goSend(slotProps.row)" class="send-button">去发货</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: "8",
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
// { prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/sendGoodsInfo",
|
|
||||||
query: { data: JSON.stringify(data) },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,615 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<!-- <div @click="goSend(slotProps.row)" class="send-button">去发货</div> -->
|
|
||||||
<div @click="goSend(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 1,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: data },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// const goSend = (data) => {
|
|
||||||
// router.push({
|
|
||||||
// path: "/order/order/sendGoodsInfo",
|
|
||||||
// query: { data: JSON.stringify(data) },
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,915 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="customer-box">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formInline"
|
|
||||||
:rules="rules"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<!-- 商品名称 -->
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
clearable
|
|
||||||
show-word-limit
|
|
||||||
maxlength="30"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
style="width: 800px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<!-- 商品分类 -->
|
|
||||||
<el-form-item label="商品分类" required>
|
|
||||||
<div style="display: flex; gap: 16px">
|
|
||||||
<el-form-item prop="categoryId1">
|
|
||||||
<el-select
|
|
||||||
v-model="formInline.categoryId1"
|
|
||||||
placeholder="请选择"
|
|
||||||
class="my-el-select"
|
|
||||||
@change="changeCategory1($event)"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in categoryList1"
|
|
||||||
:key="item.id"
|
|
||||||
:value="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="categoryId2">
|
|
||||||
<el-select
|
|
||||||
v-model="formInline.categoryId2"
|
|
||||||
placeholder="请选择"
|
|
||||||
class="my-el-select"
|
|
||||||
@change="changeCategory2($event)"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in categoryList2"
|
|
||||||
:key="item.id"
|
|
||||||
:value="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="categoryId3">
|
|
||||||
<el-select
|
|
||||||
v-model="formInline.categoryId3"
|
|
||||||
placeholder="请选择"
|
|
||||||
class="my-el-select"
|
|
||||||
@change="changeCategory3($event)"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in categoryList3"
|
|
||||||
:key="item.id"
|
|
||||||
:value="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 公共品牌 -->
|
|
||||||
<el-form-item
|
|
||||||
label="公共品牌"
|
|
||||||
prop="brandId"
|
|
||||||
v-show="formInline.goodCategorySelectType == 1"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.brandId"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入公共品牌"
|
|
||||||
style="width: 800px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 溯源编码 -->
|
|
||||||
<el-form-item
|
|
||||||
label="溯源编码"
|
|
||||||
prop="traceCode"
|
|
||||||
v-show="formInline.goodCategorySelectType == 1"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.traceCode"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入溯源编码"
|
|
||||||
style="width: 800px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 商品图片 -->
|
|
||||||
<el-form-item label="商品图片" prop="goodUrl" required>
|
|
||||||
<div>
|
|
||||||
<myUploadImage v-model="formInline.goodUrl"></myUploadImage>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 规格样式 -->
|
|
||||||
<el-form-item label="规格样式" prop="specStyle" required>
|
|
||||||
<el-radio-group
|
|
||||||
v-model="formInline.specStyle"
|
|
||||||
style="margin-top: -3px"
|
|
||||||
>
|
|
||||||
<el-radio value="1" size="large">单规格</el-radio>
|
|
||||||
<el-radio value="2" size="large">多规格</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<div v-if="formInline.specStyle == 1">
|
|
||||||
<!-- 销售价格 -->
|
|
||||||
<el-form-item label="销售价格" prop="salePrice" required>
|
|
||||||
<el-input-number
|
|
||||||
v-model="formInline.salePrice"
|
|
||||||
:min="1"
|
|
||||||
:precision="2"
|
|
||||||
:controls="false"
|
|
||||||
></el-input-number>
|
|
||||||
<span style="padding: 0 10px">元</span>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<!-- 库存数量 -->
|
|
||||||
<el-form-item label="库存数量" prop="stock" required>
|
|
||||||
<el-input-number
|
|
||||||
v-model="formInline.stock"
|
|
||||||
:min="1"
|
|
||||||
:controls="false"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<!-- 净含量 -->
|
|
||||||
<el-form-item label="净含量" prop="netContent" required>
|
|
||||||
<el-input-number
|
|
||||||
v-model="formInline.netContent"
|
|
||||||
:min="1"
|
|
||||||
:controls="false"
|
|
||||||
/>
|
|
||||||
<el-select
|
|
||||||
v-model="formInline.unit"
|
|
||||||
style="width: 80px; margin-left: 10px"
|
|
||||||
>
|
|
||||||
<el-option label="kg" value="kg" />
|
|
||||||
<el-option label="g" value="g" />
|
|
||||||
<el-option label="ml" value="ml" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<!-- 多规格 -->
|
|
||||||
<div v-else>
|
|
||||||
<el-form-item label="商品规格" prop="netWeight" required>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in formInline.netWeight"
|
|
||||||
:key="index"
|
|
||||||
class="attr-item"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="item.goodSpecs"
|
|
||||||
:value="item.goodSpecs"
|
|
||||||
class="attr-clomn"
|
|
||||||
placeholder="请输入规格名称"
|
|
||||||
/>
|
|
||||||
<el-icon
|
|
||||||
size="20px"
|
|
||||||
v-if="index !== 0"
|
|
||||||
@click="deleteSpecs(index)"
|
|
||||||
style="cursor: pointer"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<el-button
|
|
||||||
icon="plus"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
style="margin: 0"
|
|
||||||
@click="addSpecs"
|
|
||||||
>添加属性</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 价格库存 -->
|
|
||||||
<el-form-item label="价格库存" prop="netWeight" required>
|
|
||||||
<div class="attr-box">
|
|
||||||
<div class="attr-row">
|
|
||||||
<div class="attr-clomn color-gray">商品规格</div>
|
|
||||||
<div class="attr-clomn200 color-gray">销售价格</div>
|
|
||||||
<div class="attr-clomn color-gray">库存数量</div>
|
|
||||||
<div class="attr-clomn220 color-gray">净含量</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in formInline.netWeight"
|
|
||||||
:key="index"
|
|
||||||
class="attr-row"
|
|
||||||
>
|
|
||||||
<div class="attr-clomn">{{ item.goodSpecs }}</div>
|
|
||||||
<div class="attr-clomn200 flex-left-top">
|
|
||||||
<el-input-number
|
|
||||||
v-model="item.goodPrice"
|
|
||||||
:min="1"
|
|
||||||
:precision="2"
|
|
||||||
:controls="false"
|
|
||||||
></el-input-number>
|
|
||||||
<span style="padding: 0 10px">元</span>
|
|
||||||
</div>
|
|
||||||
<div class="attr-clomn">
|
|
||||||
<el-input-number
|
|
||||||
v-model="item.goodStock"
|
|
||||||
:min="1"
|
|
||||||
:controls="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="attr-clomn220 flex-left-top">
|
|
||||||
<el-input-number
|
|
||||||
v-model="item.netContent"
|
|
||||||
:min="1"
|
|
||||||
:controls="false"
|
|
||||||
/>
|
|
||||||
<el-select
|
|
||||||
v-model="item.unit"
|
|
||||||
style="width: 80px; margin-left: 10px"
|
|
||||||
>
|
|
||||||
<el-option label="kg" value="kg" />
|
|
||||||
<el-option label="g" value="g" />
|
|
||||||
<el-option label="ml" value="ml" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 商品属性 -->
|
|
||||||
<el-form-item label="商品属性" prop="attribute" required>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in formInline.attribute"
|
|
||||||
:key="index"
|
|
||||||
class="attr-item"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="item.name"
|
|
||||||
:value="item.name"
|
|
||||||
class="attr-input"
|
|
||||||
placeholder="请输入属性名称"
|
|
||||||
/>
|
|
||||||
<el-icon
|
|
||||||
size="20px"
|
|
||||||
v-if="index !== 0"
|
|
||||||
@click="deleteAttr(index)"
|
|
||||||
style="cursor: pointer"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<el-button
|
|
||||||
icon="plus"
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
style="margin: 0"
|
|
||||||
@click="addAttr"
|
|
||||||
>添加属性</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 属性内容 -->
|
|
||||||
<el-form-item label="属性内容" prop="attribute" required>
|
|
||||||
<div class="attr-box">
|
|
||||||
<div class="attr-row">
|
|
||||||
<div class="attr-input color-gray">属性名称</div>
|
|
||||||
<div class="attr-input color-gray">属性内容</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in formInline.attribute"
|
|
||||||
:key="index"
|
|
||||||
class="attr-row"
|
|
||||||
>
|
|
||||||
<div class="attr-input">{{ item.name }}</div>
|
|
||||||
<el-input v-model="item.value" class="attr-input" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 发货地址 -->
|
|
||||||
<el-form-item label="发货地址" required>
|
|
||||||
<div style="display: flex; gap: 16px">
|
|
||||||
<el-form-item prop="selectedAddress">
|
|
||||||
<!-- 省市区级联选择器 -->
|
|
||||||
<el-cascader
|
|
||||||
v-model="formInline.selectedAddress"
|
|
||||||
:options="addressOptions"
|
|
||||||
:props="cascaderProps"
|
|
||||||
placeholder="请选择省市区"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="detailAddress">
|
|
||||||
<!-- 详细地址输入框 -->
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.detailAddress"
|
|
||||||
placeholder="详细地址（如街道、门牌号等）"
|
|
||||||
style="width: 220px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 保障服务 -->
|
|
||||||
<el-form-item
|
|
||||||
label="保障服务"
|
|
||||||
prop="safeguard"
|
|
||||||
required
|
|
||||||
style="margin-bottom: 10px"
|
|
||||||
>
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isSafeguardSelected"
|
|
||||||
size="large"
|
|
||||||
style="margin-top: -3px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="color: #333"
|
|
||||||
v-for="(item, index) in formInline.safeguard.options"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
服务承诺：{{ item.text }}
|
|
||||||
</div>
|
|
||||||
</el-checkbox>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 优惠折扣 -->
|
|
||||||
<el-form-item label="优惠折扣" style="margin-bottom: 10px">
|
|
||||||
<div style="width: 100%">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isDiscountSettings"
|
|
||||||
size="large"
|
|
||||||
style="margin-top: -3px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="color: #333"
|
|
||||||
v-for="(item, index) in formInline.discountSettings.options"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
优惠设置：{{ item.text }}
|
|
||||||
</div>
|
|
||||||
</el-checkbox>
|
|
||||||
</div>
|
|
||||||
<div style="width: 100%">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isDiscountRebate"
|
|
||||||
size="large"
|
|
||||||
style="margin-top: -3px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="color: #333"
|
|
||||||
v-for="(item, index) in formInline.discountSettings.options"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
折扣设置：{{ item.text }}
|
|
||||||
</div>
|
|
||||||
</el-checkbox>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 商品详情 -->
|
|
||||||
<el-form-item label="商品详情" prop="detailUrl">
|
|
||||||
<div>
|
|
||||||
<myUploadImage
|
|
||||||
v-model="formInline.detailUrl"
|
|
||||||
:isShowSubscript="false"
|
|
||||||
></myUploadImage>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 商品视频 -->
|
|
||||||
<el-form-item label="商品视频" prop="videoUrl">
|
|
||||||
<div>
|
|
||||||
<myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="onSubmit"
|
|
||||||
style="margin: 10px 0 0 80px; width: 150px"
|
|
||||||
>确认编辑</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup name="editGoods">
|
|
||||||
import { ca } from "element-plus/es/locales.mjs";
|
|
||||||
import { ref, reactive, nextTick, onMounted, watch } from "vue";
|
|
||||||
import myUploadImage from "@/components/myUploadImage.vue";
|
|
||||||
import myUploadVideo from "@/components/myUploadVideo.vue";
|
|
||||||
import {
|
|
||||||
getGoodType,
|
|
||||||
goodEdit,
|
|
||||||
getGoodInfo,
|
|
||||||
getActiveInfos,
|
|
||||||
} from "@/api/goods/info";
|
|
||||||
import { getRegion } from "@/api/common";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const formRef = ref(null);
|
|
||||||
const formData = ref({});
|
|
||||||
const formInline = reactive({
|
|
||||||
goodName: "",
|
|
||||||
categoryId: "", //给后端的最后一级,
|
|
||||||
categoryId1: "", //一级,
|
|
||||||
categoryId2: "", //二级
|
|
||||||
categoryId3: "", //三级
|
|
||||||
goodUrl: "", //逗号分割的多个图片地址字符串
|
|
||||||
goodCategorySelectType: 2, // 商品分类一级选项
|
|
||||||
brandId: "", //品牌
|
|
||||||
traceCode: "", //溯源码
|
|
||||||
|
|
||||||
specStyle: "1", //规格样式 1单规格 2多规格
|
|
||||||
salePrice: 1, //销售价格-单规格
|
|
||||||
stock: 1, //库存数量-单规格
|
|
||||||
netContent: 1, //净含量-单规格
|
|
||||||
unit: "kg", //净含量单位-单规格
|
|
||||||
netWeight: [
|
|
||||||
//多规格集合
|
|
||||||
{
|
|
||||||
goodSpecs: "",
|
|
||||||
goodPrice: 1,
|
|
||||||
goodStock: 1,
|
|
||||||
netContent: 1,
|
|
||||||
unit: "kg",
|
|
||||||
},
|
|
||||||
], //规格
|
|
||||||
attribute: [
|
|
||||||
{
|
|
||||||
name: "", //属性
|
|
||||||
value: "", //内容
|
|
||||||
},
|
|
||||||
],
|
|
||||||
selectedAddress: [], //选中的省市区编码数组
|
|
||||||
areaAddress: "", //区域地址
|
|
||||||
detailAddress: "", //详细地址
|
|
||||||
sendAddress: "",
|
|
||||||
safeguard: {
|
|
||||||
isSelected: 1, //0未选中 1选中
|
|
||||||
options: [
|
|
||||||
// { id: 10, text: '该商品，支持【七天无理由退货】服务' },
|
|
||||||
],
|
|
||||||
}, //保障服务
|
|
||||||
discountSettings: {
|
|
||||||
isSelected: 0, //0未选中 1选中
|
|
||||||
options: [
|
|
||||||
// { id: 11, text: '支持【满100减10元】优惠活动' },
|
|
||||||
// { id: 13, text: '支持【满200减20元】优惠活动' },
|
|
||||||
],
|
|
||||||
}, //优惠设置
|
|
||||||
discountRebate: {
|
|
||||||
isSelected: 0, //0未选中 1选中
|
|
||||||
options: [
|
|
||||||
// { id: 12, text: '支持【满两件-打8折】优惠活动' },
|
|
||||||
// { id: 14, text: '支持【单件-打905折】优惠活动' },
|
|
||||||
],
|
|
||||||
}, //优惠折扣
|
|
||||||
detailUrl: "",
|
|
||||||
brandId: "",
|
|
||||||
traceCode: "",
|
|
||||||
videoUrl: "",
|
|
||||||
});
|
|
||||||
const rules = reactive({
|
|
||||||
goodName: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入商品名称",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
categoryId1: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
categoryId2: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
categoryId3: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
goodUrl: [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (value === "" || value.trim() === "") {
|
|
||||||
callback(new Error("请至少上传一张商品图片"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
specStyle: [{ required: true, message: "请选择规格样式", trigger: "change" }],
|
|
||||||
salePrice:
|
|
||||||
formInline.specStyle === "1"
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (!value || Number(value) <= 0) {
|
|
||||||
callback(new Error("请输入销售价格"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: ["blur", "change"],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
stock:
|
|
||||||
formInline.specStyle === "1"
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (!value || Number(value) <= 0) {
|
|
||||||
callback(new Error("请输入库存数量"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: ["blur", "change"],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
netContent:
|
|
||||||
formInline.specStyle === "1"
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (!value || Number(value) <= 0) {
|
|
||||||
callback(new Error("请输入净含量"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: ["blur", "change"],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
netWeight:
|
|
||||||
formInline.specStyle === "2"
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
// 检查是否至少有一个属性
|
|
||||||
if (!value || value.length === 0) {
|
|
||||||
return callback(new Error("至少需要添加一个属性"));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查每个属性名称是否已填写
|
|
||||||
const emptyNames = value.filter(
|
|
||||||
(item) => !item.goodSpecs?.trim()
|
|
||||||
);
|
|
||||||
if (emptyNames.length > 0) {
|
|
||||||
return callback(new Error("请填写所有商品规格"));
|
|
||||||
}
|
|
||||||
|
|
||||||
callback();
|
|
||||||
},
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
attribute: [
|
|
||||||
{
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
// 检查是否至少有一个属性
|
|
||||||
if (!value || value.length === 0) {
|
|
||||||
return callback(new Error("至少需要添加一个属性"));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查每个属性名称是否已填写
|
|
||||||
const emptyNames = value.filter((item) => !item.name?.trim());
|
|
||||||
if (emptyNames.length > 0) {
|
|
||||||
return callback(new Error("请填写所有属性名称和内容"));
|
|
||||||
}
|
|
||||||
|
|
||||||
callback();
|
|
||||||
},
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
selectedAddress: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (!value || value.length !== 3) {
|
|
||||||
callback(new Error("请选择完整的省市区"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
detailAddress: [
|
|
||||||
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const addSpecs = () => {
|
|
||||||
formInline.netWeight.push({
|
|
||||||
goodSpecs: "",
|
|
||||||
goodPrice: 1.0,
|
|
||||||
goodStock: 1,
|
|
||||||
netContent: 1,
|
|
||||||
unit: "kg",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const deleteSpecs = (index) => {
|
|
||||||
formInline.netWeight.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addAttr = () => {
|
|
||||||
formInline.attribute.push({
|
|
||||||
name: "",
|
|
||||||
value: "",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const deleteAttr = (index) => {
|
|
||||||
formInline.attribute.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
|
|
||||||
const selectedAddress = ref([]);
|
|
||||||
const detailAddress = ref("");
|
|
||||||
// 级联选择器配置
|
|
||||||
const cascaderProps = ref({
|
|
||||||
value: "name", // 选项值字段名
|
|
||||||
label: "name", // 选项标签字段名
|
|
||||||
children: "children", // 子选项字段名
|
|
||||||
});
|
|
||||||
// 省市区数据（示例）
|
|
||||||
const addressOptions = ref([
|
|
||||||
{
|
|
||||||
name: "云南省",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: "昆明市",
|
|
||||||
children: [{ name: "五华区" }, { name: "盘龙区" }, { name: "呈贡区" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "曲靖市",
|
|
||||||
children: [{ name: "麒麟区" }, { name: "沾益区" }],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "广东省",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: "广州市",
|
|
||||||
children: [{ name: "天河区" }, { name: "越秀区" }],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// 其他省份数据...
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 保障服务
|
|
||||||
const isSafeguardSelected = computed({
|
|
||||||
get: () => formInline.safeguard.isSelected === 1,
|
|
||||||
set: (val) => {
|
|
||||||
formInline.safeguard.isSelected = val ? 1 : 0;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 优惠设置
|
|
||||||
const isDiscountSettings = computed({
|
|
||||||
get: () => formInline.discountSettings.isSelected === 1,
|
|
||||||
set: (val) => {
|
|
||||||
formInline.discountSettings.isSelected = val ? 1 : 0;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 优惠折扣
|
|
||||||
const isDiscountRebate = computed({
|
|
||||||
get: () => formInline.discountRebate.isSelected === 1,
|
|
||||||
set: (val) => {
|
|
||||||
formInline.discountRebate.isSelected = val ? 1 : 0;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 文件上传前的校验
|
|
||||||
// const beforeUpload = (file) => {
|
|
||||||
// const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
|
|
||||||
// const isLt2M = file.size / 1024 / 1024 < 2
|
|
||||||
|
|
||||||
// if (!isImage) {
|
|
||||||
// ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// if (!isLt2M) {
|
|
||||||
// ElMessage.error('图片大小不能超过2MB!')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// return true
|
|
||||||
// }
|
|
||||||
// 文件变化时触发验证
|
|
||||||
// const handleChange = () => {
|
|
||||||
// console.log('文件变化时触发验证')
|
|
||||||
// nextTick(() => {
|
|
||||||
// console.log(formInline.images)
|
|
||||||
// formRef.value.validateField('images')
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// 移除文件时触发验证
|
|
||||||
// const handleRemove = (file) => {
|
|
||||||
// console.log('移除文件时触发验证')
|
|
||||||
// console.log(file)
|
|
||||||
// console.log(formInline.images)
|
|
||||||
// formInline.images = formInline.images.filter(item => item.uid !== file.uid)
|
|
||||||
// formRef.value.validateField('images')
|
|
||||||
// }
|
|
||||||
// 超出限制提示
|
|
||||||
// const handleExceed = () => {
|
|
||||||
// ElMessage.warning('最多只能上传5张图片!')
|
|
||||||
// }
|
|
||||||
|
|
||||||
const categoryList1 = ref([]);
|
|
||||||
const categoryList2 = ref([]);
|
|
||||||
const categoryList3 = ref([]);
|
|
||||||
|
|
||||||
const getGoodTypeList = async () => {
|
|
||||||
try {
|
|
||||||
let response = await getGoodType();
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
categoryList1.value = response.data;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const changeCategory1 = (id) => {
|
|
||||||
console.log(id);
|
|
||||||
formInline.categoryId1 = id;
|
|
||||||
formInline.categoryId2 = "";
|
|
||||||
categoryList2.value = categoryList1.value.filter(
|
|
||||||
(item) => item.id == id
|
|
||||||
)[0].children;
|
|
||||||
formInline.categoryId3 = "";
|
|
||||||
formInline.categoryId = "";
|
|
||||||
categoryList3.value = [];
|
|
||||||
if (id == 70) {
|
|
||||||
// 选择产出品70
|
|
||||||
formInline.goodCategorySelectType = 1;
|
|
||||||
} else {
|
|
||||||
// 选择投入品88
|
|
||||||
formInline.goodCategorySelectType = 2;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const changeCategory2 = (id) => {
|
|
||||||
console.log(id);
|
|
||||||
formInline.categoryId2 = id;
|
|
||||||
categoryList3.value = categoryList2.value.filter(
|
|
||||||
(item) => item.id == id
|
|
||||||
)[0].children;
|
|
||||||
formInline.categoryId3 = "";
|
|
||||||
formInline.categoryId = "";
|
|
||||||
};
|
|
||||||
const changeCategory3 = (id) => {
|
|
||||||
console.log(id);
|
|
||||||
formInline.categoryId3 = id;
|
|
||||||
formInline.categoryId = id;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async () => {
|
|
||||||
console.log(formInline);
|
|
||||||
try {
|
|
||||||
await formRef.value.validate();
|
|
||||||
console.log("验证通过!", formRef.value);
|
|
||||||
// 整理提交的参数
|
|
||||||
let params = { ...formInline };
|
|
||||||
if (formInline.specStyle == "1") {
|
|
||||||
params.netWeight = [
|
|
||||||
{
|
|
||||||
goodSpecs: "",
|
|
||||||
goodPrice: formInline.salePrice,
|
|
||||||
goodStock: formInline.stock,
|
|
||||||
netContent: formInline.netContent,
|
|
||||||
unit: formInline.unit,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
params.netWeight = formInline.netWeight;
|
|
||||||
}
|
|
||||||
params.areaAddress = params.selectedAddress.join(",");
|
|
||||||
|
|
||||||
params.safeguardSelected = formInline.safeguard.isSelected; //保障服务
|
|
||||||
params.discountSettingsSelected = formInline.discountSettings.isSelected; //优惠设置
|
|
||||||
params.discountRebateSelected = formInline.discountRebate.isSelected; //优惠折扣
|
|
||||||
|
|
||||||
// 调用接口提交
|
|
||||||
onGoodSave(params);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("验证失败", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onGoodSave = async (params) => {
|
|
||||||
let response = await goodEdit(params);
|
|
||||||
if (response.code === 200) {
|
|
||||||
ElMessage.success("编辑成功！");
|
|
||||||
formRef.value.resetFields();
|
|
||||||
} else {
|
|
||||||
ElMessage.error(response.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const getArea = async () => {
|
|
||||||
const res = await getRegion();
|
|
||||||
if (res.code === 200) {
|
|
||||||
addressOptions.value = res.data.list;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const activeInfoList = ref([]);
|
|
||||||
// 获取商品优惠信息配置项
|
|
||||||
const getActiveInfo = async () => {
|
|
||||||
const res = await getActiveInfos();
|
|
||||||
if (res.code === 200) {
|
|
||||||
activeInfoList.value = res.data;
|
|
||||||
} else {
|
|
||||||
ElMessage.error(res.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const getGoodsInfo = async (goodId) => {
|
|
||||||
const res = await getGoodInfo(goodId);
|
|
||||||
if (res.code == 200) {
|
|
||||||
Object.assign(formData.value, res.data);
|
|
||||||
Object.assign(formInline, res.data);
|
|
||||||
|
|
||||||
if (res.data.netWeight.length > 1) {
|
|
||||||
formInline.specStyle = "2";
|
|
||||||
} else {
|
|
||||||
formInline.specStyle = "1";
|
|
||||||
console.log(res.data.netWeight[0]);
|
|
||||||
formInline.salePrice = formData.value.netWeight[0]?.goodPrice ?? 1;
|
|
||||||
formInline.stock = formData.value.netWeight[0]?.goodStock ?? 1;
|
|
||||||
formInline.netContent = formData.value.netWeight[0]?.netContent ?? 1;
|
|
||||||
formInline.unit = formData.value.netWeight[0]?.unit ?? "kg";
|
|
||||||
}
|
|
||||||
|
|
||||||
formInline.categoryId1 = formData.value?.categoryId1 ?? "88";
|
|
||||||
formInline.categoryId2 = formData.value?.categoryId2 ?? "";
|
|
||||||
formInline.categoryId3 = formData.value?.categoryId3 ?? "";
|
|
||||||
|
|
||||||
formInline.selectedAddress = formData.value?.areaAddress?.split(",") ?? [];
|
|
||||||
|
|
||||||
formInline.goodUrl =
|
|
||||||
formData.value?.goodUrl?.split(",").slice(0, 5).join(",") ?? "";
|
|
||||||
formInline.detailUrl =
|
|
||||||
formData.value?.detailUrl?.split(",").slice(0, 5).join(",") ?? "";
|
|
||||||
formInline.videoUrl =
|
|
||||||
formData.value?.videoUrl?.split(",").slice(0, 1).join(",") ?? "";
|
|
||||||
|
|
||||||
formInline.safeguard = {
|
|
||||||
isSelected: formData.value?.safeguard?.isSelected ?? 1,
|
|
||||||
options: [...activeInfoList.value.safeguard.options],
|
|
||||||
};
|
|
||||||
formInline.discountSettings = {
|
|
||||||
isSelected: formData.value?.discountSettings?.isSelected ?? 0,
|
|
||||||
options: [...activeInfoList.value.discountSettings.options],
|
|
||||||
};
|
|
||||||
formInline.discountRebate = {
|
|
||||||
isSelected: formData.value?.discountRebate?.isSelected ?? 0,
|
|
||||||
options: [...activeInfoList.value.discountRebate.options],
|
|
||||||
};
|
|
||||||
if (formInline.categoryId1) {
|
|
||||||
categoryList2.value = categoryList1.value.filter(
|
|
||||||
(item) => item.id == formInline.categoryId1
|
|
||||||
)[0].children;
|
|
||||||
if (formInline.categoryId2) {
|
|
||||||
let item = categoryList2.value.filter(
|
|
||||||
(item) => item.id === formInline.categoryId2
|
|
||||||
);
|
|
||||||
categoryList3.value = item[0].children;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log(formInline);
|
|
||||||
} else {
|
|
||||||
ElMessage.error(res.msg);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => route.query,
|
|
||||||
(newVal) => {
|
|
||||||
console.log("watch商品id:", newVal.goodId);
|
|
||||||
if (newVal.goodId) {
|
|
||||||
getGoodsInfo(newVal.goodId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
onMounted(async () => {
|
|
||||||
const { edit, goodId } = route.query;
|
|
||||||
console.log("onMounted商品id:", goodId);
|
|
||||||
getActiveInfo();
|
|
||||||
await getGoodTypeList();
|
|
||||||
getArea();
|
|
||||||
if (goodId) {
|
|
||||||
getGoodsInfo(goodId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,619 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
title="退货/退款"
|
|
||||||
width="40%"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:label-position="labelPosition"
|
|
||||||
label-width="130px"
|
|
||||||
:model="formLabelAlign"
|
|
||||||
style="max-width: 1000px"
|
|
||||||
>
|
|
||||||
<el-form-item
|
|
||||||
v-if="refundState == '2'"
|
|
||||||
label="拒绝原因"
|
|
||||||
prop="rejectReason"
|
|
||||||
:rules="[{ required: true, message: '请输入拒绝原因' }]"
|
|
||||||
>
|
|
||||||
<el-input type="textarea" v-model="rejectReason" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="refundState == '1'"
|
|
||||||
label="退款金额"
|
|
||||||
prop="refundPrice"
|
|
||||||
:rules="[{ required: true, message: '请输入退款金额' }]"
|
|
||||||
>
|
|
||||||
<el-input type="number" v-model="refundPrice" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="submit()"> 确定 </el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont">
|
|
||||||
<!-- <el-table :data="tableData" style="width: 100%">
|
|
||||||
<el-table-column property="productId" label="商品ID" width="100" />
|
|
||||||
<el-table-column
|
|
||||||
property="productName"
|
|
||||||
label="商品名称"
|
|
||||||
width="300"
|
|
||||||
/>
|
|
||||||
<el-table-column label="图片" width="">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="scope.row.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="购买数量" width="">
|
|
||||||
<template #default="scope">{{ scope.row.quantity }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品单价" width="">
|
|
||||||
<template #default="scope">{{ scope.row.unitPrice }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="规格" width="">
|
|
||||||
<template #default="scope">{{ scope.row.unit }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品总价" width="">
|
|
||||||
<template #default="scope">{{ scope.row.subtotalAmount }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table> -->
|
|
||||||
<div class="order-list-warp">
|
|
||||||
<div class="order-list-warp-left">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-icon size="30"><LocationFilled /></el-icon>
|
|
||||||
<div class="order-list-warp-left-address">
|
|
||||||
<div>{{ detailsData.receiverAddress }}</div>
|
|
||||||
<div>
|
|
||||||
{{ detailsData.receiverName }} {{ detailsData.receiverPhone }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-left-title">商品信息</div>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in detailsData.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="order-list-warp-left-goods"
|
|
||||||
>
|
|
||||||
<div class="order-list-warp-left-goods-list">
|
|
||||||
<img
|
|
||||||
style="width: 100px; height: 100px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="order-list-warp-left-goods-list-info">
|
|
||||||
<div class="order-list-warp-left-goods-list-info-title">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-left-goods-list-info-info">
|
|
||||||
{{ item.unitPrice }}元/{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
color: #25bf82;
|
|
||||||
font-size: 15px;
|
|
||||||
width: 100px;
|
|
||||||
text-align: right;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-size: 15px;
|
|
||||||
color: #999999;
|
|
||||||
width: 100px;
|
|
||||||
text-align: right;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
x{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right">
|
|
||||||
<div style="margin-top: 20px">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
订单详情<text
|
|
||||||
style="
|
|
||||||
color: #409eff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 20px;
|
|
||||||
"
|
|
||||||
>{{
|
|
||||||
detailsData.orderStatus == "1"
|
|
||||||
? "待支付"
|
|
||||||
: detailsData.orderStatus == "2" ||
|
|
||||||
detailsData.orderStatus == "3"
|
|
||||||
? "待发货"
|
|
||||||
: detailsData.orderStatus == "4" ||
|
|
||||||
detailsData.orderStatus == "5"
|
|
||||||
? "已发货"
|
|
||||||
: detailsData.orderStatus == "6"
|
|
||||||
? "已收货"
|
|
||||||
: detailsData.orderStatus == "7"
|
|
||||||
? "已取消"
|
|
||||||
: detailsData.orderStatus == "8"
|
|
||||||
? "已完成"
|
|
||||||
: detailsData.orderStatus == "10"
|
|
||||||
? "退款中"
|
|
||||||
: ""
|
|
||||||
}}
|
|
||||||
</text>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>订单编号</div>
|
|
||||||
<div style="color: #000000">{{ detailsData.orderNo }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>订单备注</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
{{ detailsData.orderNote ?? "暂无备注" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>商品总数</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
{{ detailsData.totalQuantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
detailsData.orderStatus == '10' ||
|
|
||||||
detailsData.orderStatus == '11'
|
|
||||||
"
|
|
||||||
class="order-list-warp-right-list"
|
|
||||||
>
|
|
||||||
<div>退款理由</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
{{ detailsData.totalQuantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
detailsData.orderStatus == '10' ||
|
|
||||||
detailsData.orderStatus == '11'
|
|
||||||
"
|
|
||||||
class="order-list-warp-right-list"
|
|
||||||
>
|
|
||||||
<div>退款描述</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
{{ detailsData.totalQuantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>创建时间</div>
|
|
||||||
<div style="color: #999999">{{ detailsData.createTime }}</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="detailsData.paymentTime"
|
|
||||||
class="order-list-warp-right-list"
|
|
||||||
>
|
|
||||||
<div>付款时间</div>
|
|
||||||
<div style="color: #999999">{{ detailsData.paymentTime }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailsData.orderStatus != '1'" style="margin-top: 30px">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
付款信息
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>商品总价</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
￥{{ detailsData.totalAmount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>运费</div>
|
|
||||||
<div style="color: #000000">
|
|
||||||
￥{{ detailsData.totalShipFee }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>优惠金额</div>
|
|
||||||
<div style="color: #999999">
|
|
||||||
￥{{ detailsData.discountAmount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-list-warp-right-list">
|
|
||||||
<div>实付金额</div>
|
|
||||||
<div style="color: #999999">
|
|
||||||
￥{{ detailsData.payableAmount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="detailsData.orderStatus == '10'"
|
|
||||||
class="button-bottom"
|
|
||||||
@click="agree('同意')"
|
|
||||||
>
|
|
||||||
同意退款
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="detailsData.orderStatus == '10'"
|
|
||||||
class="button-bottoms"
|
|
||||||
@click="refuse('拒绝')"
|
|
||||||
>
|
|
||||||
拒绝退款
|
|
||||||
</div>
|
|
||||||
<!-- <div class="button-bottoms" @click="reAddress()">修改地址</div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
detailsData.orderStatus == '2' ||
|
|
||||||
detailsData.orderStatus == '3' ||
|
|
||||||
detailsData.orderStatus == '4' ||
|
|
||||||
detailsData.orderStatus == '5'
|
|
||||||
"
|
|
||||||
class="button-bottoms"
|
|
||||||
@click="refund()"
|
|
||||||
>
|
|
||||||
退货/退款
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="detailsData.orderStatus == '1'"
|
|
||||||
class="button-bottoms"
|
|
||||||
@click="doCancel"
|
|
||||||
>
|
|
||||||
取消订单
|
|
||||||
</div> -->
|
|
||||||
<!-- <div class="button-bottoms">打印订单</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import {
|
|
||||||
createLogisticOrder,
|
|
||||||
orderDetails,
|
|
||||||
refund,
|
|
||||||
} from "../../api/order/list";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { watch } from "vue";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const tableData = ref([]);
|
|
||||||
const detailsData = ref({});
|
|
||||||
const dialogVisible = ref(false);
|
|
||||||
const refundPrice = ref(null);
|
|
||||||
const rejectReason = ref("");
|
|
||||||
const refundState = ref(1);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => route.query.data,
|
|
||||||
(newSearch) => {
|
|
||||||
if (route.query.data) {
|
|
||||||
getOrderDetails();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// console.log(JSON.parse(route.query.data));
|
|
||||||
// tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
|
||||||
getOrderDetails();
|
|
||||||
});
|
|
||||||
|
|
||||||
const getOrderDetails = async () => {
|
|
||||||
let response = await orderDetails({ id: route.query.data });
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records[0].orderItemInfos;
|
|
||||||
detailsData.value = response.data.records[0];
|
|
||||||
// tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const inputData = reactive([
|
|
||||||
{
|
|
||||||
content: "",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
let list = ref([]);
|
|
||||||
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: "申通快递",
|
|
||||||
value: "shentong",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "韵达快递",
|
|
||||||
value: "yunda",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "京东快递",
|
|
||||||
value: "jd",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
let optionsValue = ref("申通快递");
|
|
||||||
|
|
||||||
const column = ref([
|
|
||||||
{ prop: "goodId", label: "ID", width: "150" },
|
|
||||||
{
|
|
||||||
prop: "productImage",
|
|
||||||
label: "商品图片",
|
|
||||||
width: "150",
|
|
||||||
},
|
|
||||||
{ prop: "productName", label: "商品名称", width: "150" },
|
|
||||||
{ prop: "goodPrice", label: "商品单价", width: "150" },
|
|
||||||
{ prop: "salesVolume", label: "购买数量", width: "150" },
|
|
||||||
{ prop: "pageView", label: "订单总价", width: "150" },
|
|
||||||
{ prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
{ prop: "isListed", label: "状态", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const addInput = () => {
|
|
||||||
inputData.push({
|
|
||||||
content: "",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteList = (index) => {
|
|
||||||
inputData.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const agree = () => {
|
|
||||||
refundState.value = "1";
|
|
||||||
dialogVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const refuse = () => {
|
|
||||||
refundState.value = "2";
|
|
||||||
dialogVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const submit = () => {
|
|
||||||
refund(
|
|
||||||
refundState.value == "1"
|
|
||||||
? {
|
|
||||||
id: detailsData.value.id,
|
|
||||||
approveStatus: refundState.value,
|
|
||||||
refundAmount: refundPrice.value,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
id: detailsData.value.id,
|
|
||||||
approveStatus: refundState.value,
|
|
||||||
refuseReason: rejectReason.value,
|
|
||||||
}
|
|
||||||
).then((res) => {
|
|
||||||
dialogVisible.value = false;
|
|
||||||
getOrderDetails();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const send = async () => {};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.order-list-warp {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
.order-list-warp-left {
|
|
||||||
width: 50%;
|
|
||||||
height: 60vh;
|
|
||||||
.order-list-warp-left-title {
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.order-list-warp-left-goods {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.order-list-warp-left-goods-list {
|
|
||||||
display: flex;
|
|
||||||
.order-list-warp-left-goods-list-info {
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
height: 100px;
|
|
||||||
.order-list-warp-left-goods-list-info-title {
|
|
||||||
text-align: left;
|
|
||||||
width: 300px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
.order-list-warp-left-goods-list-info-info {
|
|
||||||
margin-top: 10px;
|
|
||||||
text-align: left;
|
|
||||||
width: 300px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.order-list-warp-left-address {
|
|
||||||
font-size: 15px;
|
|
||||||
text-align: start;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.order-list-warp-right {
|
|
||||||
width: 40%;
|
|
||||||
height: 60vh;
|
|
||||||
.order-list-warp-right-list {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
div {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-bottom {
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100px;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 40px;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: #409eff;
|
|
||||||
}
|
|
||||||
.button-bottoms {
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 20px;
|
|
||||||
width: 100px;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 40px;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 15px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #707070;
|
|
||||||
}
|
|
||||||
.select-send {
|
|
||||||
padding: 5px 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 135px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.table-cont {
|
|
||||||
background-color: #f5f5f5 !important;
|
|
||||||
}
|
|
||||||
.sendGoods {
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 10px 10px 30px 10px;
|
|
||||||
}
|
|
||||||
.logistics {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.address {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #000000;
|
|
||||||
margin: 20px 0px;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 300px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 135px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,608 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<!-- <div @click="goSend(slotProps.row)" class="send-button">去发货</div> -->
|
|
||||||
<div @click="goSend(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 6,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: data },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,608 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div @click="goSend(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
<!-- <div @click="goSend(slotProps.row)" class="send-button">去发货</div> -->
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 3,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额", slotName: "totalAmount" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额", slotName: "payableAmount" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额", slotName: "discountAmount" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: data },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,635 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div @click="goSend(slotProps.row)" class="send-button">
|
|
||||||
同意退款
|
|
||||||
</div>
|
|
||||||
<div @click="goSend(slotProps.row)" class="send-buttons">
|
|
||||||
拒绝退款
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div @click="goSend(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 10,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "200" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: data },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-button {
|
|
||||||
float: left;
|
|
||||||
text-align: center;
|
|
||||||
width: 80px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-buttons {
|
|
||||||
margin-left: 10px;
|
|
||||||
float: left;
|
|
||||||
text-align: center;
|
|
||||||
width: 80px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: red;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,737 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
title="地址"
|
|
||||||
width="40%"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:label-position="labelPosition"
|
|
||||||
label-width="130px"
|
|
||||||
:model="formLabelAlign"
|
|
||||||
style="max-width: 1000px"
|
|
||||||
>
|
|
||||||
<el-form-item label="智能识别" prop="reciveAddress">
|
|
||||||
<el-input
|
|
||||||
v-model="formLabelAlign.reciveAddress"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="reciveData" icon="FullScreen" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="联系人"
|
|
||||||
prop="receiverName"
|
|
||||||
:rules="[{ required: true, message: '请输入联系人' }]"
|
|
||||||
>
|
|
||||||
<el-input v-model="formLabelAlign.receiverName" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="联系人手机号"
|
|
||||||
prop="receiverPhone"
|
|
||||||
:rules="[{ required: true, message: '请输入联系人手机号' }]"
|
|
||||||
>
|
|
||||||
<el-input v-model="formLabelAlign.receiverPhone" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="省市区"
|
|
||||||
prop="postArea"
|
|
||||||
:rules="[{ required: true, message: '省市区' }]"
|
|
||||||
>
|
|
||||||
<el-cascader
|
|
||||||
v-model="formLabelAlign.postArea"
|
|
||||||
style="width: 100%"
|
|
||||||
:props="props"
|
|
||||||
:options="options"
|
|
||||||
@change="handleChange"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="详细地址"
|
|
||||||
prop="postAddress"
|
|
||||||
:rules="[{ required: true, message: '详细地址' }]"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formLabelAlign.postAddress"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="submit()"> 确定 </el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div @click="goSend(slotProps.row)" class="send-button">去发货</div>
|
|
||||||
<div @click="upAddress(slotProps.row)" class="send-button">
|
|
||||||
修改收货地址
|
|
||||||
</div>
|
|
||||||
<div @click="goSends(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import json from "../../assets/address.json";
|
|
||||||
import AddressParse from "address-parse";
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo, merchantUpdateOrderAddress } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
let dialogVisible = ref(false);
|
|
||||||
let upid = ref(0);
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 3,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
const options = json;
|
|
||||||
const props = ref({
|
|
||||||
value: "label",
|
|
||||||
});
|
|
||||||
let formLabelAlign = reactive({
|
|
||||||
orderId: "",
|
|
||||||
receiverName: "",
|
|
||||||
receiverPhone: "",
|
|
||||||
postArea: "",
|
|
||||||
postAddress: "",
|
|
||||||
reciveAddress: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const reciveData = () => {
|
|
||||||
const [result] = AddressParse.parse(formLabelAlign.reciveAddress);
|
|
||||||
(formLabelAlign.receiverName = result.name),
|
|
||||||
(formLabelAlign.receiverPhone = result.mobile),
|
|
||||||
(formLabelAlign.postArea = [result.province, result.city, result.area]),
|
|
||||||
(formLabelAlign.postAddress = result.details);
|
|
||||||
};
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
try {
|
|
||||||
formLabelAlign.orderId = upid.value;
|
|
||||||
formLabelAlign.postArea = formLabelAlign.postArea.join(",");
|
|
||||||
let response = await merchantUpdateOrderAddress(formLabelAlign);
|
|
||||||
if (response.code == 200) {
|
|
||||||
dialogVisible.value = false;
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSends = (id) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: id },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额", slotName: "totalAmount" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额", slotName: "payableAmount" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额", slotName: "discountAmount" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "200" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
|
|
||||||
const upAddress = (data) => {
|
|
||||||
dialogVisible.value = true;
|
|
||||||
console.log("31231");
|
|
||||||
upid.value = data.id;
|
|
||||||
|
|
||||||
// router.push({
|
|
||||||
// path: "/order/order/sendGoodsInfo",
|
|
||||||
// query: { data: JSON.stringify(data) },
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/sendGoodsInfo",
|
|
||||||
query: { data: JSON.stringify(data) },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
width: 100px;
|
|
||||||
text-align: center;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,321 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont">
|
|
||||||
<el-table :data="tableData" style="width: 100%">
|
|
||||||
<!-- <el-table-column type="selection" width="55" /> -->
|
|
||||||
<el-table-column property="productId" label="商品ID" width="100" />
|
|
||||||
<el-table-column
|
|
||||||
property="productName"
|
|
||||||
label="商品名称"
|
|
||||||
width="300"
|
|
||||||
/>
|
|
||||||
<el-table-column label="图片" width="">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="scope.row.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="购买数量" width="">
|
|
||||||
<template #default="scope">{{ scope.row.quantity }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品单价" width="">
|
|
||||||
<template #default="scope">{{ scope.row.unitPrice }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="规格" width="">
|
|
||||||
<template #default="scope">{{ scope.row.unit }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品总价" width="">
|
|
||||||
<template #default="scope">{{ scope.row.subtotalAmount }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- <el-table-column label="收货地址" width="">
|
|
||||||
<template #default="scope">{{ scope.row.date }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="最晚发货时间" width="">
|
|
||||||
<template #default="scope">{{ scope.row.date }}</template>
|
|
||||||
</el-table-column> -->
|
|
||||||
</el-table>
|
|
||||||
<div class="select-send">
|
|
||||||
<el-radio-group v-model="radio1">
|
|
||||||
<el-radio value="2" size="large">平台物流</el-radio>
|
|
||||||
<el-radio value="1" size="large">第三方物流</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="radio1 == '2'"
|
|
||||||
style="
|
|
||||||
padding: 10px 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #fff;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<el-button @click="send()" type="primary">发货</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="sendGoods">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div class="logistics">
|
|
||||||
<div>选择物流：</div>
|
|
||||||
<el-select
|
|
||||||
v-model="optionsValue"
|
|
||||||
placeholder="选择物流"
|
|
||||||
style="width: 240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in inputData"
|
|
||||||
:key="index"
|
|
||||||
style="align-items: center"
|
|
||||||
class="logistics"
|
|
||||||
>
|
|
||||||
<div>物流单号：</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
style="margin: 5px 0px; width: 240px"
|
|
||||||
v-model="inputData[index].content"
|
|
||||||
placeholder="输入物流单号"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; align-items: center">
|
|
||||||
<div v-if="index == 0" style="margin-left: 10px">
|
|
||||||
<el-button type="primary" @click="addInput()"
|
|
||||||
>新增包裹</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div v-if="index !== 0" style="margin-left: 10px">
|
|
||||||
<el-button type="danger" @click="deleteList(index)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>共计{{ inputData.length }}个包裹</div>
|
|
||||||
<div>
|
|
||||||
<el-button @click="send()" type="primary">发货</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import { createLogisticOrder } from "../../api/order/list";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const tableData = ref([]);
|
|
||||||
const radio1 = ref("2");
|
|
||||||
onMounted(() => {
|
|
||||||
console.log(JSON.parse(route.query.data));
|
|
||||||
tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => route.query.data,
|
|
||||||
(newSearch) => {
|
|
||||||
if (route.query.data) {
|
|
||||||
console.log(JSON.parse(route.query.data));
|
|
||||||
tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputData = reactive([
|
|
||||||
{
|
|
||||||
content: "",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
let list = ref([]);
|
|
||||||
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: "申通快递",
|
|
||||||
value: "shentong",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "韵达快递",
|
|
||||||
value: "yunda",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "京东快递",
|
|
||||||
value: "jd",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
let optionsValue = ref("申通快递");
|
|
||||||
|
|
||||||
const column = ref([
|
|
||||||
{ prop: "goodId", label: "ID", width: "150" },
|
|
||||||
{
|
|
||||||
prop: "productImage",
|
|
||||||
label: "商品图片",
|
|
||||||
width: "150",
|
|
||||||
},
|
|
||||||
{ prop: "productName", label: "商品名称", width: "150" },
|
|
||||||
{ prop: "goodPrice", label: "商品单价", width: "150" },
|
|
||||||
{ prop: "salesVolume", label: "购买数量", width: "150" },
|
|
||||||
{ prop: "pageView", label: "订单总价", width: "150" },
|
|
||||||
{ prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
{ prop: "isListed", label: "状态", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const addInput = () => {
|
|
||||||
inputData.push({
|
|
||||||
content: "",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteList = (index) => {
|
|
||||||
inputData.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const send = async () => {
|
|
||||||
inputData.forEach((res) => {
|
|
||||||
list.value.push(res.content);
|
|
||||||
});
|
|
||||||
try {
|
|
||||||
let response = await createLogisticOrder({
|
|
||||||
orderId: JSON.parse(route.query.data).id,
|
|
||||||
waybillName: radio1.value == 2 ? "" : optionsValue.value,
|
|
||||||
waybillCode: radio1.value == 2 ? "" : list.value.join(","),
|
|
||||||
type: radio1.value,
|
|
||||||
});
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
router.back();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.select-send {
|
|
||||||
padding: 5px 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 135px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.table-cont {
|
|
||||||
background-color: #f5f5f5 !important;
|
|
||||||
}
|
|
||||||
.sendGoods {
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 10px 10px 30px 10px;
|
|
||||||
}
|
|
||||||
.logistics {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.address {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #000000;
|
|
||||||
margin: 20px 0px;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 300px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 135px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,713 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
title="地址"
|
|
||||||
width="40%"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:label-position="labelPosition"
|
|
||||||
label-width="130px"
|
|
||||||
:model="formLabelAlign"
|
|
||||||
style="max-width: 1000px"
|
|
||||||
>
|
|
||||||
<el-form-item label="智能识别" prop="reciveAddress">
|
|
||||||
<el-input
|
|
||||||
v-model="formLabelAlign.reciveAddress"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="reciveData" icon="FullScreen" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="联系人"
|
|
||||||
prop="receiverName"
|
|
||||||
:rules="[{ required: true, message: '请输入联系人' }]"
|
|
||||||
>
|
|
||||||
<el-input v-model="formLabelAlign.receiverName" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="联系人手机号"
|
|
||||||
prop="receiverPhone"
|
|
||||||
:rules="[{ required: true, message: '请输入联系人手机号' }]"
|
|
||||||
>
|
|
||||||
<el-input v-model="formLabelAlign.receiverPhone" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="省市区"
|
|
||||||
prop="postArea"
|
|
||||||
:rules="[{ required: true, message: '省市区' }]"
|
|
||||||
>
|
|
||||||
<el-cascader
|
|
||||||
v-model="formLabelAlign.postArea"
|
|
||||||
style="width: 100%"
|
|
||||||
:props="props"
|
|
||||||
:options="options"
|
|
||||||
@change="handleChange"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="详细地址"
|
|
||||||
prop="postAddress"
|
|
||||||
:rules="[{ required: true, message: '详细地址' }]"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formLabelAlign.postAddress"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="submit()"> 确定 </el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div ref="searchBarRef" class="search-box">
|
|
||||||
<div class="search-bar">
|
|
||||||
<div class="search-bar-left">
|
|
||||||
<!-- <div class="order-tab" style="margin-top: -10px">
|
|
||||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="t in bottomList"
|
|
||||||
:key="t.id"
|
|
||||||
:label="t.title + '(' + t.value + ')'"
|
|
||||||
:name="t.id"
|
|
||||||
>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div> -->
|
|
||||||
<el-form
|
|
||||||
style="margin-top: 25px"
|
|
||||||
ref="searchForm"
|
|
||||||
:inline="true"
|
|
||||||
:model="formInline"
|
|
||||||
class="demo-form-inline"
|
|
||||||
:label-width="'auto'"
|
|
||||||
>
|
|
||||||
<el-form-item label="商品名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入商品名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单编号" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入订单编号"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="买家名称" prop="goodName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.goodName"
|
|
||||||
placeholder="请输入买家名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<!-- <div class="table-toolbar">
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="btnStatus"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
>批量删除</el-button
|
|
||||||
>
|
|
||||||
<router-link to="/goods/goodsManage/addGoods">
|
|
||||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
|
||||||
>新增商品</el-button
|
|
||||||
>
|
|
||||||
</router-link>
|
|
||||||
</div> -->
|
|
||||||
<tableComponent
|
|
||||||
:preserve-expanded-content="preserveExpanded"
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="true"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
:loading="tableLoading"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal"
|
|
||||||
:current-page="formInline.current"
|
|
||||||
:page-size="formInline.size"
|
|
||||||
:showSort="true"
|
|
||||||
:tree="true"
|
|
||||||
>
|
|
||||||
<!-- 自定义-图片 -->
|
|
||||||
<template #goodUrl="slotProps">
|
|
||||||
<div class="table-cell-img-box">
|
|
||||||
<img
|
|
||||||
:src="slotProps.row.productImage"
|
|
||||||
class="table-cell-img"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 自定义 - 序号 -->
|
|
||||||
<template #totalAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.totalAmount"
|
|
||||||
>￥{{ slotProps.row.totalAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #payableAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.payableAmount"
|
|
||||||
>￥{{ slotProps.row.payableAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template #discountAmount="slotProps">
|
|
||||||
<span v-if="slotProps.row.discountAmount"
|
|
||||||
>￥{{ slotProps.row.discountAmount }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #tree="slotProps">
|
|
||||||
<div class="tree-goods">
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
height: 80 * (slotProps.row.orderItemInfos.length + 1) + 'px',
|
|
||||||
}"
|
|
||||||
class="tree-goods-subOrder"
|
|
||||||
>
|
|
||||||
<div class="tree-goods-subOrder-list">
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox>
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
src="../../assets/images/dark.svg"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">商品照片</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品名称</div>
|
|
||||||
<div class="tree-goods-subOrder-name">商品单价</div>
|
|
||||||
<div class="tree-goods-subOrder-name">购买数量</div>
|
|
||||||
<div class="tree-goods-subOrder-name">实付总金额</div>
|
|
||||||
<div class="tree-goods-subOrder-name">规格</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="item in slotProps.row.orderItemInfos"
|
|
||||||
:key="item.id"
|
|
||||||
class="tree-goods-subOrder-list"
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <el-checkbox
|
|
||||||
style="margin-right: 10px"
|
|
||||||
size="large"
|
|
||||||
v-model="checked2"
|
|
||||||
></el-checkbox> -->
|
|
||||||
<div class="tree-goods-subOrder-image">
|
|
||||||
<img
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="item.productImage"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productImage }}
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.productName }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.unitPrice }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
￥{{ item.subtotalAmount }}
|
|
||||||
</div>
|
|
||||||
<div class="tree-goods-subOrder-name">
|
|
||||||
{{ item.unit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="sendGoods">发货</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #isListed="slotProps">
|
|
||||||
<span v-if="slotProps.row.isListed == 0" class="color-blue"
|
|
||||||
>待上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 1" class="color-black"
|
|
||||||
>已上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 2" class="color-green"
|
|
||||||
>上架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 3" class="color-red"
|
|
||||||
>下架</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.isListed == 4" class="color-orange"
|
|
||||||
>审核中</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<div @click="goSends(slotProps.row.id)" class="send-buttons-info">
|
|
||||||
查看详情
|
|
||||||
</div>
|
|
||||||
<!-- <div @click="goSend(slotProps.row)" class="send-button">
|
|
||||||
修改收货地址
|
|
||||||
</div> -->
|
|
||||||
<!-- <el-tooltip effect="dark" placement="bottom-end">
|
|
||||||
<template #content>
|
|
||||||
<div class="custom-tooltip-content">
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="seeDetails(slotProps.row)"
|
|
||||||
>
|
|
||||||
<View />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toUpload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Upload />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="toDownload(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Download />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleEdit(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Edit />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon
|
|
||||||
class="el-icon-custom"
|
|
||||||
@click="handleDelete(slotProps.row)"
|
|
||||||
>
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-icon>
|
|
||||||
<More />
|
|
||||||
</el-icon>
|
|
||||||
</span>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import json from "../../assets/address.json";
|
|
||||||
import AddressParse from "address-parse";
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { orderInfo } from "@/api/order/list";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const preserveExpanded = ref(true);
|
|
||||||
let dialogVisible = ref(false);
|
|
||||||
const options = json;
|
|
||||||
const props = ref({
|
|
||||||
value: "label",
|
|
||||||
});
|
|
||||||
const formInline = reactive({
|
|
||||||
orderNo: "",
|
|
||||||
orderStatus: 4,
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
// let reciveAddress = ref("");
|
|
||||||
let formLabelAlign = reactive({
|
|
||||||
receiverName: "",
|
|
||||||
receiverPhone: "",
|
|
||||||
postArea: "",
|
|
||||||
postAddress: "",
|
|
||||||
reciveAddress: "",
|
|
||||||
});
|
|
||||||
const goodsCategoryList = ref([
|
|
||||||
{ name: "蔬菜", id: 1 },
|
|
||||||
{ name: "肥料", id: 2 },
|
|
||||||
{ name: "农药", id: 3 },
|
|
||||||
]);
|
|
||||||
const goodsBrandList = ref([
|
|
||||||
{ name: "品牌1", id: 1 },
|
|
||||||
{ name: "品牌2", id: 2 },
|
|
||||||
{ name: "品牌3", id: 3 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
console.log("submit!");
|
|
||||||
formInline.current = 1;
|
|
||||||
console.log(formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSends = (id) => {
|
|
||||||
router.push({
|
|
||||||
path: "/order/order/orderDetails",
|
|
||||||
query: { data: id },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
const submit = () => {
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const reciveData = () => {
|
|
||||||
const [result] = AddressParse.parse(formLabelAlign.reciveAddress);
|
|
||||||
(formLabelAlign.receiverName = result.name),
|
|
||||||
(formLabelAlign.receiverPhone = result.mobile),
|
|
||||||
(formLabelAlign.postArea = [result.province, result.city, result.area]),
|
|
||||||
(formLabelAlign.postAddress = result.details);
|
|
||||||
};
|
|
||||||
|
|
||||||
let activeCurrent = ref("1");
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: "全部", id: "1", value: 134 },
|
|
||||||
{ title: "已上架", id: "2", value: 97 },
|
|
||||||
{ title: "已下架", id: "3", value: 37 },
|
|
||||||
]);
|
|
||||||
const tabChange = (Event) => {
|
|
||||||
console.log(Event.index);
|
|
||||||
if (Event.index == "0") {
|
|
||||||
// 请求全部
|
|
||||||
formInline.type = "1";
|
|
||||||
} else if (Event.index == "1") {
|
|
||||||
// 请求已上架
|
|
||||||
formInline.type = "2";
|
|
||||||
} else if (Event.index == "2") {
|
|
||||||
// 请求已下架
|
|
||||||
formInline.type = "3";
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const selectedIds = ref([]);
|
|
||||||
const btnStatus = computed(() => {
|
|
||||||
return selectedIds.value.length <= 0;
|
|
||||||
});
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([]);
|
|
||||||
const columns1 = ref([
|
|
||||||
{ prop: "orderNo", label: "订单编号", width: "150" },
|
|
||||||
// {
|
|
||||||
// prop: "productImage",
|
|
||||||
// label: "商品图片",
|
|
||||||
// slotName: "goodUrl",
|
|
||||||
// width: "150",
|
|
||||||
// },
|
|
||||||
{ prop: "receiverName", label: "买家名称" },
|
|
||||||
{ prop: "receiverPhone", label: "买家电话" },
|
|
||||||
{ prop: "receiverAddress", label: "收货地址" },
|
|
||||||
{ prop: "totalQuantity", label: "商品数" },
|
|
||||||
{ prop: "totalAmount", label: "因付金额" },
|
|
||||||
{ prop: "payableAmount", label: "实付金额" },
|
|
||||||
{ prop: "discountAmount", label: "折扣金额" },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// prop: "subtotalAmount",
|
|
||||||
// label: "订单总价",
|
|
||||||
// width: "150",
|
|
||||||
// slotName: "subtotalAmount",
|
|
||||||
// },
|
|
||||||
// { prop: "stock", label: "子订单数量", width: "150" },
|
|
||||||
// { prop: "isListed", label: "状态", slotName: "isListed", width: "150" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action", width: "150" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 食物名词（仅限食物）
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合：形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
"goodId|+1": 10000,
|
|
||||||
"sort|+1": 1,
|
|
||||||
goodUrl: " @image", //商品图片
|
|
||||||
goodName: () => generateFoodNickname(), //商品名称
|
|
||||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
|
||||||
goodPrice: "@float(10, 200, 2, 2)", //商品售价
|
|
||||||
salesVolume: "@integer(1000, 20000)", //销量
|
|
||||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
|
||||||
stock: "@integer(5000, 90000)", //库存
|
|
||||||
isListed: "@pick([0, 1, 2, 3, 4])", //状态
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
tableLoading.value = true;
|
|
||||||
// 测试
|
|
||||||
// tableData.value = generateMockData();
|
|
||||||
// tableTotal.value = tableData.value.length;
|
|
||||||
// console.log(tableData.value);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await orderInfo(formInline);
|
|
||||||
console.log(response);
|
|
||||||
if (response.code == 200) {
|
|
||||||
tableData.value = response.data.records;
|
|
||||||
tableTotal.value = response.data.total;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
tableLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
formInline.current = page;
|
|
||||||
formInline.size = pageSize;
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection, ids) => {
|
|
||||||
console.log("选中项:", selection, ids);
|
|
||||||
selectedIds.value = ids;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
const toUpload = () => {
|
|
||||||
console.log("上架:");
|
|
||||||
};
|
|
||||||
const toDownload = () => {
|
|
||||||
console.log("下架:");
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
// 跳转路由并携带参数，行数据，和query的值edit
|
|
||||||
router.push({
|
|
||||||
path: "/goods/goodsManage/editGoods",
|
|
||||||
query: { goodId: row.goodId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const goSend = (data) => {
|
|
||||||
dialogVisible.value = true;
|
|
||||||
// router.push({
|
|
||||||
// path: "/order/order/sendGoodsInfo",
|
|
||||||
// query: { data: JSON.stringify(data) },
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
// 批量删除
|
|
||||||
const batchDelete = async () => {
|
|
||||||
console.log("要删除的行:", selectedIds.value.join(","));
|
|
||||||
ElMessage.success("删除成功");
|
|
||||||
// let res = await goodDelete({id: selectedIds.value});
|
|
||||||
// if (res.code == 200) {
|
|
||||||
// ElMessage.success("删除成功");
|
|
||||||
// loadData();
|
|
||||||
// } else {
|
|
||||||
// ElMessage.error("删除失败");
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿（根据实际样式调整）
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
columns.value = columns1.value;
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.send-buttons-info {
|
|
||||||
float: left;
|
|
||||||
width: 100px;
|
|
||||||
text-align: left;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.send-button {
|
|
||||||
text-align: center;
|
|
||||||
width: 100px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods {
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-left: 100px;
|
|
||||||
align-items: center;
|
|
||||||
.sendGoods {
|
|
||||||
margin-left: 15px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #409eff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder {
|
|
||||||
// display: flex;
|
|
||||||
// width: 1510px;
|
|
||||||
height: 60px;
|
|
||||||
.tree-goods-subOrder-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.tree-goods-subOrder-image {
|
|
||||||
width: 128px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.tree-goods-subOrder-name {
|
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table-toolbar {
|
|
||||||
width: 300px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 14px 16px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user