|
|
@@ -2,64 +2,71 @@
|
|
|
<div class="order-manage-container">
|
|
|
<div class="page-title"><i class="title-bar"></i><span>订单管理</span></div>
|
|
|
<!-- 搜索栏 -->
|
|
|
- <div class="search-bar">
|
|
|
- <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 200px" clearable @keyup.enter="handleQuery">
|
|
|
- <template #prefix
|
|
|
- ><el-icon><Search /></el-icon
|
|
|
- ></template>
|
|
|
- </el-input>
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.dateRange"
|
|
|
- type="daterange"
|
|
|
- range-separator="—"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- style="width: 240px"
|
|
|
- />
|
|
|
- <el-button type="primary" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button @click="handleReset">重置</el-button>
|
|
|
+ <div class="flex-row-between">
|
|
|
+ <div class="flex-row-start">
|
|
|
+ <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 260px" clearable @keyup.enter="handleQuery">
|
|
|
+ <template #prefix
|
|
|
+ ><el-icon><Search /></el-icon
|
|
|
+ ></template>
|
|
|
+ </el-input>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="—"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ style="width: 260px; margin-left: 10px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 筛选栏 -->
|
|
|
- <div class="filter-bar">
|
|
|
- <span class="filter-label">下单部门</span>
|
|
|
- <el-tree-select
|
|
|
- v-model="queryParams.department"
|
|
|
- style="width: 100px"
|
|
|
- :data="deptList"
|
|
|
- :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
|
|
|
- value-key="deptId"
|
|
|
- placeholder="请选择"
|
|
|
- check-strictly
|
|
|
- :render-after-expand="false"
|
|
|
- clearable
|
|
|
- >
|
|
|
- </el-tree-select>
|
|
|
- <span class="filter-label">状态</span>
|
|
|
- <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
|
|
|
- <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- <span class="filter-label">支付方式</span>
|
|
|
- <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable
|
|
|
- ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value"
|
|
|
- /></el-select>
|
|
|
- <div class="filter-right">
|
|
|
- <el-dropdown
|
|
|
- ><el-button
|
|
|
- >订单导出 <el-icon><ArrowDown /></el-icon></el-button
|
|
|
- ><template #dropdown
|
|
|
- ><el-dropdown-menu><el-dropdown-item>导出Excel</el-dropdown-item><el-dropdown-item>导出PDF</el-dropdown-item></el-dropdown-menu></template
|
|
|
- ></el-dropdown
|
|
|
+ <div class="flex-row-between" style="margin-top: 10px">
|
|
|
+ <div class="flex-row-start">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.department"
|
|
|
+ style="width: 160px"
|
|
|
+ :data="deptList"
|
|
|
+ :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
|
|
|
+ value-key="deptId"
|
|
|
+ placeholder="下单部门"
|
|
|
+ check-strictly
|
|
|
+ :render-after-expand="false"
|
|
|
+ clearable
|
|
|
>
|
|
|
- <el-dropdown
|
|
|
- ><el-button
|
|
|
- >订单打印 <el-icon><ArrowDown /></el-icon></el-button
|
|
|
- ><template #dropdown
|
|
|
+ </el-tree-select>
|
|
|
+ <el-select v-model="queryParams.status" placeholder="状态" style="width: 160px; margin-left: 10px" clearable>
|
|
|
+ <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="queryParams.payType" placeholder="支付方式" style="width: 160px; margin-left: 10px" clearable
|
|
|
+ ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="flex-row-start">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button
|
|
|
+ >订单导出 <el-icon><ArrowDown /></el-icon
|
|
|
+ ></el-button>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item>导出Excel</el-dropdown-item>
|
|
|
+ <el-dropdown-item>导出PDF</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <el-dropdown style="margin-left: 10px">
|
|
|
+ <el-button
|
|
|
+ >订单打印 <el-icon><ArrowDown /></el-icon
|
|
|
+ ></el-button>
|
|
|
+ <template #dropdown
|
|
|
><el-dropdown-menu
|
|
|
><el-dropdown-item>打印订单</el-dropdown-item><el-dropdown-item>打印发货单</el-dropdown-item></el-dropdown-menu
|
|
|
></template
|
|
|
- ></el-dropdown
|
|
|
- >
|
|
|
- <el-button>下载电子签单</el-button>
|
|
|
+ >
|
|
|
+ </el-dropdown>
|
|
|
+ <el-button style="margin-left: 10px">下载电子签单</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Tab切换 -->
|
|
|
@@ -76,29 +83,27 @@
|
|
|
<!-- 订单列表 -->
|
|
|
<div class="order-list">
|
|
|
<div v-for="order in orderList" :key="order.id" class="order-card">
|
|
|
- <div class="order-header">
|
|
|
- <el-checkbox v-model="order.checked" @change="handleOrderCheck" />
|
|
|
- <span class="order-time">{{ order.orderTime }}</span>
|
|
|
- <span class="order-info">订单号：{{ order.orderNo }}</span>
|
|
|
- <span class="order-info">下单人：{{ order.orderPerson }}</span>
|
|
|
- <span class="order-info">部门：{{ order.department }}</span>
|
|
|
- <el-button
|
|
|
- class="expand-btn"
|
|
|
- v-for="action in getOrderActions(order)"
|
|
|
- :key="action"
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- @click="handleAction(action, order)"
|
|
|
- >{{ action }}</el-button
|
|
|
- >
|
|
|
- <el-button v-if="order.products && order.products.length > 5" type="primary" link class="expand-btn" @click="handleExpand(order)"
|
|
|
- >{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowDown /></el-icon
|
|
|
- ></el-button>
|
|
|
+ <div class="order-header flex-row-between">
|
|
|
+ <div class="flex-row-start" style="gap: 0 15px">
|
|
|
+ <el-checkbox style="margin: 2px 0px 0px 0" v-model="order.checked" @change="handleOrderCheck" />
|
|
|
+ <div>{{ order.orderTime }}</div>
|
|
|
+ <div>订单号：{{ order.orderNo }}</div>
|
|
|
+ <div>下单人：{{ order.orderPerson }}</div>
|
|
|
+ <div>部门：{{ order.department }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-row-start">
|
|
|
+ <div class="expand-btn" v-for="action in getOrderActions(order)" :key="action" @click="handleAction(action, order)">{{ action }}</div>
|
|
|
+ <div class="open-btn" v-if="order.products && order.products.length > 5" @click="handleExpand(order)">
|
|
|
+ <span style="margin-right: 5px"> {{ order.expanded ? '收起' : '展开' }}</span>
|
|
|
+ <el-icon v-if="order.expanded"><ArrowUp /></el-icon>
|
|
|
+ <el-icon v-else><ArrowDown /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-if="order.countdown" class="countdown-bar">订单锁定剩余时间：{{ order.countdown }}</div>
|
|
|
<div class="product-list">
|
|
|
<div v-for="(item, itemIndex) in order.expanded ? order.products : order.products.slice(0, 5)" :key="itemIndex" class="product-row">
|
|
|
- <div class="product-cell product-info-cell">
|
|
|
+ <div class="product-info-cell">
|
|
|
<div class="product-image">
|
|
|
<el-image :src="item.image" fit="contain"
|
|
|
><template #error
|
|
|
@@ -107,31 +112,30 @@
|
|
|
></el-image>
|
|
|
</div>
|
|
|
<div class="product-detail">
|
|
|
- <div class="product-name">{{ item.name }}</div>
|
|
|
- <div class="product-spec">{{ item.spec1 }} {{ item.spec2 }}</div>
|
|
|
+ <div class="product-name ellipsis">{{ item.name }}</div>
|
|
|
+ <div class="product-spec">{{ item.spec1 }} | {{ item.spec2 }}</div>
|
|
|
<div class="product-price">¥{{ item.price }}</div>
|
|
|
+ <div class="cat-bnt">加入购物车</div>
|
|
|
</div>
|
|
|
<div class="product-quantity">x{{ item.quantity }}</div>
|
|
|
</div>
|
|
|
- <div class="product-cell amount-cell" v-if="itemIndex === 0">
|
|
|
+ <div class="amount-cell" v-if="itemIndex === 0">
|
|
|
<div class="amount-info">
|
|
|
- <span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span>
|
|
|
+ <span class="label">支付款：</span><span class="value highlight">¥{{ order.payAmount }}</span>
|
|
|
</div>
|
|
|
<div class="amount-info">
|
|
|
<span class="label">含运费：</span><span class="value">¥{{ order.freight }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="product-cell status-cell" v-if="itemIndex === 0">
|
|
|
+ <div class="status-cell" v-if="itemIndex === 0">
|
|
|
<span class="status-text" :style="{ color: getStatusColor(order.status) }">{{ order.statusText }}</span>
|
|
|
+ <span v-if="order.auditStatus" :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{
|
|
|
+ order.auditStatus == '0' ? '待审批' : order.auditStatus == '1' ? '审批通过' : '审批驳回'
|
|
|
+ }}</span>
|
|
|
<!-- <el-button type="primary" link size="small" @click="handleViewDetail(order)">查看订单轨迹</el-button> -->
|
|
|
- <template v-if="order.auditStatus"
|
|
|
- ><span :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{
|
|
|
- order.auditStatus == '0' ? '待审批' : order.auditStatus == '1' ? '审批通过' : '审批驳回'
|
|
|
- }}</span>
|
|
|
- <!-- <el-button type="primary" link size="small">查看审批流</el-button> -->
|
|
|
- </template>
|
|
|
<el-button v-if="order.fileCount" type="primary" link size="small">审核文件({{ order.fileCount }})</el-button>
|
|
|
</div>
|
|
|
+ <div v-else style="width: 340px"></div>
|
|
|
<!-- <div class="product-cell action-cell" v-if="itemIndex === 0">
|
|
|
<el-button
|
|
|
v-for="action in getOrderActions(order)"
|
|
|
@@ -697,7 +701,8 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- max-height: calc(100vh - 120px); // 减去顶部导航栏和其他元素高度
|
|
|
+ margin-bottom: 20px;
|
|
|
+ // max-height: calc(100vh - 120px); // 减去顶部导航栏和其他元素高度
|
|
|
}
|
|
|
.page-title {
|
|
|
font-size: 16px;
|
|
|
@@ -714,28 +719,7 @@ onMounted(() => {
|
|
|
background: #e60012;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
-.search-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-.filter-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
- .filter-label {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- .filter-right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
.tab-bar {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -766,8 +750,8 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.order-list {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
+ // flex: 1;
|
|
|
+ // overflow-y: auto;
|
|
|
margin-bottom: 15px;
|
|
|
.order-card {
|
|
|
border: 1px solid #eee;
|
|
|
@@ -775,19 +759,20 @@ onMounted(() => {
|
|
|
margin-bottom: 15px;
|
|
|
overflow: hidden;
|
|
|
.order-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
padding: 12px 15px;
|
|
|
background: #f9f9f9;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
- font-size: 13px;
|
|
|
- color: #666;
|
|
|
- .order-time {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ font-size: 14px;
|
|
|
+ color: #101828;
|
|
|
.expand-btn {
|
|
|
- margin-left: auto;
|
|
|
+ color: #165dff;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .open-btn {
|
|
|
+ color: #364153;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
.countdown-bar {
|
|
|
@@ -800,7 +785,7 @@ onMounted(() => {
|
|
|
.product-list {
|
|
|
.product-row {
|
|
|
display: flex;
|
|
|
- border-bottom: 1px solid #f5f5f5;
|
|
|
+ // border-bottom: 1px solid #f5f5f5;
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
@@ -812,9 +797,9 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.product-info-cell {
|
|
|
+ display: flex;
|
|
|
flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
+ padding: 15px;
|
|
|
gap: 15px;
|
|
|
.product-image {
|
|
|
width: 80px;
|
|
|
@@ -837,16 +822,16 @@ onMounted(() => {
|
|
|
}
|
|
|
.product-detail {
|
|
|
flex: 1;
|
|
|
+ width: 0;
|
|
|
.product-name {
|
|
|
font-size: 14px;
|
|
|
- color: #333;
|
|
|
+ color: #000000;
|
|
|
margin-bottom: 5px;
|
|
|
- line-height: 1.4;
|
|
|
}
|
|
|
.product-spec {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
- margin-bottom: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
.product-price {
|
|
|
font-size: 16px;
|
|
|
@@ -860,13 +845,14 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.amount-cell {
|
|
|
- width: 120px;
|
|
|
- border-left: 1px solid #f5f5f5;
|
|
|
+ width: 200px;
|
|
|
+ padding: 15px;
|
|
|
.amount-info {
|
|
|
margin-bottom: 5px;
|
|
|
.label {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
.value {
|
|
|
font-size: 14px;
|
|
|
@@ -880,16 +866,18 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.status-cell {
|
|
|
- width: 120px;
|
|
|
- border-left: 1px solid #f5f5f5;
|
|
|
+ width: 140px;
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
align-items: flex-start;
|
|
|
- gap: 5px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
.status-text {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.audit-status {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
&.success {
|
|
|
color: #e60012;
|
|
|
}
|
weixin_52219567