|
|
@@ -2,146 +2,117 @@
|
|
|
<ContentWrap class="order-div">
|
|
|
<!-- 搜索 -->
|
|
|
<div style="position: relative;">
|
|
|
- <div style="text-align: right;background: #fafbfc;padding: 10px;">
|
|
|
-
|
|
|
- <el-button :icon="Operation" @click="showSearchMore" />
|
|
|
+ <div style="text-align: right;padding: 10px;">
|
|
|
+ <el-input v-model="queryParams['userNickname']" class="!w-240px" placeholder="搜索客户名称" @keyup.enter="handleQuery">
|
|
|
+ <template #suffix>
|
|
|
+ <Icon class="mr-5px" icon="ep:search" @click="handleQuery" style="cursor: pointer;" />
|
|
|
+ </template>
|
|
|
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Operation" @click="showSearchMore" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- <div class="searchMore" v-if="searchMoreShow">
|
|
|
+ <div class="searchMore" v-show="searchMoreShow">
|
|
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
|
|
|
- <el-form-item label="订单状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)" :key="dict.value"
|
|
|
- :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="支付方式" prop="payChannelCode">
|
|
|
- <el-select v-model="queryParams.payChannelCode" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)" :key="dict.value"
|
|
|
- :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="创建时间" prop="createTime">
|
|
|
- <el-date-picker v-model="queryParams.createTime"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-280px"
|
|
|
- end-placeholder="自定义时间" start-placeholder="自定义时间" type="daterange"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="订单来源" prop="terminal">
|
|
|
- <el-select v-model="queryParams.terminal" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TERMINAL)" :key="dict.value"
|
|
|
- :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="订单类型" prop="type">
|
|
|
- <el-select v-model="queryParams.type" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_TYPE)" :key="dict.value"
|
|
|
- :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="配送方式" prop="deliveryType">
|
|
|
- <el-select v-model="queryParams.deliveryType" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)" :key="dict.value"
|
|
|
- :label="dict.label" :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.EXPRESS.type" label="快递公司"
|
|
|
- prop="logisticsId">
|
|
|
- <el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
|
|
|
- <el-option v-for="item in deliveryExpressList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type" label="自提门店"
|
|
|
- prop="pickUpStoreId">
|
|
|
- <el-select v-model="queryParams.pickUpStoreId" class="!w-280px" clearable multiple placeholder="全部">
|
|
|
- <el-option v-for="item in pickUpStoreList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type" label="核销码"
|
|
|
- prop="pickUpVerifyCode">
|
|
|
- <el-input v-model="queryParams.pickUpVerifyCode" class="!w-280px" clearable placeholder="请输入自提核销码"
|
|
|
- @keyup.enter="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="聚合搜索">
|
|
|
- <el-input v-show="true" v-model="queryParams[queryType.queryParam]"
|
|
|
- :type="queryType.queryParam === 'userId' ? 'number' : 'text'" class="!w-280px" clearable
|
|
|
- placeholder="请输入">
|
|
|
- <template #prepend>
|
|
|
- <el-select v-model="queryType.queryParam" class="!w-110px" clearable placeholder="全部"
|
|
|
- @change="inputChangeSelect">
|
|
|
- <el-option v-for="dict in dynamicSearchList" :key="dict.value" :label="dict.label"
|
|
|
+ <el-form-item label="订单状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" clearable placeholder="全部">
|
|
|
+ <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)" :key="dict.value"
|
|
|
+ :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支付方式" prop="payChannelCode">
|
|
|
+ <el-select v-model="queryParams.payChannelCode" clearable placeholder="全部">
|
|
|
+ <el-option v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)" :key="dict.value"
|
|
|
+ :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间" prop="createTime">
|
|
|
+ <el-date-picker v-model="queryParams.createTime"
|
|
|
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" end-placeholder="自定义时间"
|
|
|
+ start-placeholder="自定义时间" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" style="width: auto;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单来源" prop="terminal">
|
|
|
+ <el-select v-model="queryParams.terminal" clearable placeholder="全部">
|
|
|
+ <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TERMINAL)" :key="dict.value" :label="dict.label"
|
|
|
:value="dict.value" />
|
|
|
</el-select>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-row>
|
|
|
- <el-col>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="hideSearchMore">
|
|
|
- 收起
|
|
|
- </el-button>
|
|
|
- <el-button @click="resetQuery">
|
|
|
- <!-- <Icon class="mr-5px" icon="ep:refresh" /> -->
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
- <el-button @click="handleQuery" plain type="primary">
|
|
|
- <Icon class="mr-5px" icon="ep:search" />
|
|
|
- 搜索
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </el-form>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单类型" prop="type">
|
|
|
+ <el-select v-model="queryParams.type" clearable placeholder="全部">
|
|
|
+ <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_TYPE)" :key="dict.value"
|
|
|
+ :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="配送方式" prop="deliveryType">
|
|
|
+ <el-select v-model="queryParams.deliveryType" clearable placeholder="全部">
|
|
|
+ <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)" :key="dict.value"
|
|
|
+ :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.EXPRESS.type" label="快递公司"
|
|
|
+ prop="logisticsId">
|
|
|
+ <el-select v-model="queryParams.logisticsId" clearable placeholder="全部">
|
|
|
+ <el-option v-for="item in deliveryExpressList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type" label="自提门店"
|
|
|
+ prop="pickUpStoreId">
|
|
|
+ <el-select v-model="queryParams.pickUpStoreId" clearable multiple placeholder="全部">
|
|
|
+ <el-option v-for="item in pickUpStoreList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type" label="核销码"
|
|
|
+ prop="pickUpVerifyCode">
|
|
|
+ <el-input v-model="queryParams.pickUpVerifyCode" clearable placeholder="请输入自提核销码"
|
|
|
+ @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="聚合搜索">
|
|
|
+ <el-input v-show="true" v-model="queryParams[queryType.queryParam]"
|
|
|
+ :type="queryType.queryParam === 'userId' ? 'number' : 'text'" clearable placeholder="请输入">
|
|
|
+
|
|
|
+ <template #prepend>
|
|
|
+ <el-select v-model="queryType.queryParam" class="!w-110px" clearable placeholder="全部"
|
|
|
+ @change="inputChangeSelect">
|
|
|
+ <el-option v-for="dict in dynamicSearchList" :key="dict.value" :label="dict.label"
|
|
|
+ :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="hideSearchMore">
|
|
|
+ 收起
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery">
|
|
|
+ <!-- <Icon class="mr-5px" icon="ep:refresh" /> -->
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleQuery" plain type="primary">
|
|
|
+ <Icon class="mr-5px" icon="ep:search" />
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 列表 -->
|
|
|
- <!-- <el-table v-loading="loading" :data="list" row-key="id">
|
|
|
- <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
|
|
|
- <template #default="{ row }">
|
|
|
- <div class="flex items-center justify-center">
|
|
|
- <el-button v-hasPermi="['trade:order:query']" link type="primary" >
|
|
|
- <Icon icon="ep:notification" />
|
|
|
- 详情
|
|
|
- </el-button>
|
|
|
- <el-dropdown v-hasPermi="['trade:order:update']"
|
|
|
- @command="(command) => handleCommand(command, row)">
|
|
|
- <el-button link type="primary">
|
|
|
- <Icon icon="ep:d-arrow-right" />
|
|
|
- 更多
|
|
|
- </el-button>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- 如果是【快递】，并且【未发货】，则展示【发货】按钮
|
|
|
- <el-dropdown-item v-if="
|
|
|
- row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
|
|
|
- row.status === TradeOrderStatusEnum.UNDELIVERED.status
|
|
|
- "command="delivery">
|
|
|
- <Icon icon="ep:takeaway-box" />
|
|
|
- 发货
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item command="remark">
|
|
|
- <Icon icon="ep:chat-line-square" />
|
|
|
- 备注
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </OrderTableColumn>
|
|
|
- </el-table> -->
|
|
|
+
|
|
|
<el-row>
|
|
|
-
|
|
|
- <el-col v-for="(o, index) in list" class="product-card" :key="index" :span="7" :xl="7" :lg="7" :md="24" :sm="24" :xs="24" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
|
|
|
- <el-card @click="openDetail('view',o,o.no)">
|
|
|
+
|
|
|
+ <el-col v-for="(o, index) in list" class="product-card" :key="index" :span="7" :xl="7" :lg="7" :md="24" :sm="24"
|
|
|
+ :xs="24" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
|
|
|
+ <el-card @click="openDetail('view', o, o.no)">
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
|
|
|
<p style="width: 95%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
|
|
|
- title=""><span v-for="item in o.items" :key="item.id">{{item.spuName}}</span>
|
|
|
+ title=""><span v-for="item in o.items" :key="item.id">{{ item.spuName }}</span>
|
|
|
</p>
|
|
|
- <div class="setting" @click.stop="" >
|
|
|
- <el-dropdown v-hasPermi="['trade:order:update']" @command="(command) => handleCommand(command, row)">
|
|
|
+ <div class="setting" @click.stop="">
|
|
|
+ <el-dropdown v-hasPermi="['trade:order:update']" @command="(command) => handleCommand(command, row)">
|
|
|
<span>
|
|
|
<el-icon size="20" color="rgb(220 223 231)" v-show="o.showSetting">
|
|
|
<Operation />
|
|
|
@@ -150,20 +121,25 @@
|
|
|
<arrow-down />
|
|
|
</el-icon> -->
|
|
|
</span>
|
|
|
- <template #dropdown >
|
|
|
+
|
|
|
+ <template #dropdown>
|
|
|
<el-dropdown-menu @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
|
|
|
- <el-dropdown-item @click="handleDelivery(o.id)" v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status">发货</el-dropdown-item>
|
|
|
- <el-dropdown-item @click="handleRemark(o.id,o.remark)">备注</el-dropdown-item>
|
|
|
- <el-dropdown-item @click="handleInvoice" v-if="o.status === TradeOrderStatusEnum.COMPLETED.status">开发票</el-dropdown-item>
|
|
|
- <el-dropdown-item v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status" @click="updateAddress(o.id,o.receiverAreaName,o.receiverMobile,o.receiverAreaId,o.receiverDetailAddress)">修改地址</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="handleDelivery(o.id)"
|
|
|
+ v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status">发货</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="handleRemark(o.id, o.remark)">备注</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="handleInvoice"
|
|
|
+ v-if="o.status === TradeOrderStatusEnum.COMPLETED.status">开发票</el-dropdown-item>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status"
|
|
|
+ @click="updateAddress(o.id, o.receiverAreaName, o.receiverMobile, o.receiverAreaId, o.receiverDetailAddress)">修改地址</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display:flex;align-items: center;">
|
|
|
- <div style="width: 206px;height: 116px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;"
|
|
|
- >
|
|
|
+ <div
|
|
|
+ style="width: 206px;height: 116px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;">
|
|
|
<img :src="o.items[0].picUrl" style="width: auto;height: auto;max-width: 100%;max-height: 100%;" />
|
|
|
</div>
|
|
|
|
|
|
@@ -171,9 +147,9 @@
|
|
|
<p>¥{{ o.payPrice }}</p>
|
|
|
<p>{{ o.no }}</p>
|
|
|
<p>{{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, o.status)?.label }}</p>
|
|
|
- <p>{{o.user.nickname}}</p>
|
|
|
- <p><span class="year">{{timestampToY(o.createTime)}}</span>{{ timestampToMD(o.createTime) }}</p>
|
|
|
-
|
|
|
+ <p>{{ o.user.nickname }}</p>
|
|
|
+ <p><span class="year">{{ timestampToY(o.createTime) }}</span>{{ timestampToMD(o.createTime) }}</p>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -196,64 +172,128 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import type { FormInstance } from 'element-plus'
|
|
|
- import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
|
|
|
- import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
|
|
|
- import * as TradeOrderApi from '@/api/mall/trade/order'
|
|
|
- import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
|
|
|
- import { DICT_TYPE, getIntDictOptions, getStrDictOptions,getDictObj } from '@/utils/dict'
|
|
|
- import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
|
|
|
- import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
|
|
|
- import { Setting, Search, Operation } from '@element-plus/icons-vue'
|
|
|
- import { OrderTableColumn } from './components'
|
|
|
- import { formatDate } from '@/utils/formatTime'
|
|
|
- import OrderIndex from "./components/OrderIndex.vue"
|
|
|
- import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
|
|
|
-
|
|
|
- //时间戳转换为yyyy/mm/dd
|
|
|
- function timestampToMD(timestamp) {
|
|
|
- var date = new Date(timestamp);
|
|
|
- var year = date.getFullYear();
|
|
|
- var month = ("0" + (date.getMonth() + 1)).slice(-2); // 补零操作
|
|
|
- var day = ("0" + date.getDate()).slice(-2);
|
|
|
- return month + "/" + day;
|
|
|
- }
|
|
|
- function timestampToY(timestamp) {
|
|
|
- var date = new Date(timestamp);
|
|
|
- var year = date.getFullYear();
|
|
|
- var month = ("0" + (date.getMonth() + 1)).slice(-2); // 补零操作
|
|
|
- var day = ("0" + date.getDate()).slice(-2);
|
|
|
- return year + "/" ;
|
|
|
- }
|
|
|
- const searchMoreShow = ref(false)
|
|
|
- // 鼠标移入显示变动图标
|
|
|
- function handleMouseOver(index) {
|
|
|
- list.value[index].showSetting = true;
|
|
|
- }
|
|
|
- // 鼠标移出不显示图标
|
|
|
- function handleMouseOut(index) {
|
|
|
- list.value[index].showSetting = false;
|
|
|
- }
|
|
|
- // 打开更多搜索条件
|
|
|
- const showSearchMore = () => {
|
|
|
- searchMoreShow.value = !searchMoreShow.value
|
|
|
- }
|
|
|
- const hideSearchMore = () => {
|
|
|
+import type { FormInstance } from 'element-plus'
|
|
|
+import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
|
|
|
+import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
|
|
|
+import * as TradeOrderApi from '@/api/mall/trade/order'
|
|
|
+import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
|
|
|
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions, getDictObj } from '@/utils/dict'
|
|
|
+import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
|
|
|
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
|
|
|
+import { Setting, Search, Operation } from '@element-plus/icons-vue'
|
|
|
+import { OrderTableColumn } from './components'
|
|
|
+import { formatDate } from '@/utils/formatTime'
|
|
|
+import OrderIndex from "./components/OrderIndex.vue"
|
|
|
+import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
|
|
|
+
|
|
|
+//时间戳转换为yyyy/mm/dd
|
|
|
+function timestampToMD(timestamp) {
|
|
|
+ var date = new Date(timestamp);
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = ("0" + (date.getMonth() + 1)).slice(-2); // 补零操作
|
|
|
+ var day = ("0" + date.getDate()).slice(-2);
|
|
|
+ return month + "/" + day;
|
|
|
+}
|
|
|
+function timestampToY(timestamp) {
|
|
|
+ var date = new Date(timestamp);
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = ("0" + (date.getMonth() + 1)).slice(-2); // 补零操作
|
|
|
+ var day = ("0" + date.getDate()).slice(-2);
|
|
|
+ return year + "/";
|
|
|
+}
|
|
|
+const searchMoreShow = ref(false)
|
|
|
+// 鼠标移入显示变动图标
|
|
|
+function handleMouseOver(index) {
|
|
|
+ list.value[index].showSetting = true;
|
|
|
+}
|
|
|
+// 鼠标移出不显示图标
|
|
|
+function handleMouseOut(index) {
|
|
|
+ list.value[index].showSetting = false;
|
|
|
+}
|
|
|
+// 打开更多搜索条件
|
|
|
+const showSearchMore = () => {
|
|
|
+ searchMoreShow.value = !searchMoreShow.value
|
|
|
+}
|
|
|
+const hideSearchMore = () => {
|
|
|
+ searchMoreShow.value = false
|
|
|
+}
|
|
|
+const formRef = ref()
|
|
|
+const openDetail = (type: string, row: {}, no: string) => {
|
|
|
+ formRef.value.open(type, row, no)
|
|
|
+}
|
|
|
+
|
|
|
+defineOptions({ name: 'TradeOrder' })
|
|
|
+const { currentRoute, push } = useRouter() // 路由跳转
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
+const total = ref(2) // 列表的总页数
|
|
|
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
|
|
|
+const queryFormRef = ref<FormInstance>() // 搜索的表单
|
|
|
+// 表单搜索
|
|
|
+const queryParams = ref({
|
|
|
+ pageNo: 1, // 页数
|
|
|
+ pageSize: 10, // 每页显示数量
|
|
|
+ status: undefined, // 订单状态
|
|
|
+ payChannelCode: undefined, // 支付方式
|
|
|
+ createTime: undefined, // 创建时间
|
|
|
+ terminal: undefined, // 订单来源
|
|
|
+ type: undefined, // 订单类型
|
|
|
+ deliveryType: undefined, // 配送方式
|
|
|
+ logisticsId: undefined, // 快递公司
|
|
|
+ pickUpStoreId: undefined, // 自提门店
|
|
|
+ pickUpVerifyCode: undefined // 自提核销码
|
|
|
+})
|
|
|
+const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
|
|
|
+
|
|
|
+// 订单聚合搜索 select 类型配置（动态搜索）
|
|
|
+const dynamicSearchList = ref([
|
|
|
+ { value: 'no', label: '订单号' },
|
|
|
+ { value: 'userId', label: '用户UID' },
|
|
|
+ { value: 'userNickname', label: '用户昵称' },
|
|
|
+ { value: 'userMobile', label: '用户电话' }
|
|
|
+])
|
|
|
+/**
|
|
|
+ * 聚合搜索切换查询对象时触发
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const inputChangeSelect = (val: string) => {
|
|
|
+ dynamicSearchList.value
|
|
|
+ .filter((item) => item.value !== val)
|
|
|
+ ?.forEach((item1) => {
|
|
|
+ // 清除集合搜索无用属性
|
|
|
+ if (queryParams.value.hasOwnProperty(item1.value)) {
|
|
|
+
|
|
|
+ delete queryParams.value[item1.value]
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 查询列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await TradeOrderApi.getOrderPage(unref(queryParams))
|
|
|
+ data.list.forEach(obj => {
|
|
|
+ obj.showSetting = false;
|
|
|
+ });
|
|
|
+ list.value = data.list
|
|
|
+ total.value = data.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
searchMoreShow.value = false
|
|
|
+
|
|
|
}
|
|
|
- const formRef = ref()
|
|
|
- const openDetail = (type:string,row : {},no:string) => {
|
|
|
- formRef.value.open(type,row,no)
|
|
|
- }
|
|
|
-
|
|
|
- defineOptions({ name: 'TradeOrder' })
|
|
|
- const { currentRoute, push } = useRouter() // 路由跳转
|
|
|
- const loading = ref(true) // 列表的加载中
|
|
|
- const total = ref(2) // 列表的总页数
|
|
|
- const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
|
|
|
- const queryFormRef = ref<FormInstance>() // 搜索的表单
|
|
|
- // 表单搜索
|
|
|
- const queryParams = ref({
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = async () => {
|
|
|
+ queryParams.value.pageNo = 1
|
|
|
+ await getList()
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields()
|
|
|
+ queryParams.value = {
|
|
|
pageNo: 1, // 页数
|
|
|
pageSize: 10, // 每页显示数量
|
|
|
status: undefined, // 订单状态
|
|
|
@@ -265,205 +305,162 @@
|
|
|
logisticsId: undefined, // 快递公司
|
|
|
pickUpStoreId: undefined, // 自提门店
|
|
|
pickUpVerifyCode: undefined // 自提核销码
|
|
|
- })
|
|
|
- const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
|
|
|
-
|
|
|
- // 订单聚合搜索 select 类型配置（动态搜索）
|
|
|
- const dynamicSearchList = ref([
|
|
|
- { value: 'no', label: '订单号' },
|
|
|
- { value: 'userId', label: '用户UID' },
|
|
|
- { value: 'userNickname', label: '用户昵称' },
|
|
|
- { value: 'userMobile', label: '用户电话' }
|
|
|
- ])
|
|
|
- /**
|
|
|
- * 聚合搜索切换查询对象时触发
|
|
|
- * @param val
|
|
|
- */
|
|
|
- const inputChangeSelect = (val : string) => {
|
|
|
- dynamicSearchList.value
|
|
|
- .filter((item) => item.value !== val)
|
|
|
- ?.forEach((item1) => {
|
|
|
- // 清除集合搜索无用属性
|
|
|
- if (queryParams.value.hasOwnProperty(item1.value)) {
|
|
|
- delete queryParams.value[item1.value]
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+
|
|
|
+// /** 查看订单详情 */
|
|
|
+// const openDetail = (id : number) => {
|
|
|
+// push({ name: 'TradeOrderDetail', params: { id } })
|
|
|
+// }
|
|
|
+
|
|
|
+/** 操作分发 */
|
|
|
+const deliveryFormRef = ref()
|
|
|
+const updateRemarkForm = ref()
|
|
|
+const updateAddressFormRef = ref() // 收货地址表单 Ref
|
|
|
+const updateAddress = (id, receiverName, receiverMobile, receiverAreaId, receiverDetailAddress) => {
|
|
|
+ updateAddressFormRef.value.open(id, receiverName, receiverMobile, receiverAreaId, receiverDetailAddress)
|
|
|
+}
|
|
|
+const handleDelivery = (id) => {
|
|
|
+ deliveryFormRef.value?.open("订单列表", id)
|
|
|
+}
|
|
|
+const handleRemark = (id) => {
|
|
|
+ updateRemarkForm.value?.open(id)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
|
|
|
+watch(
|
|
|
+ () => currentRoute.value,
|
|
|
+ () => {
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+)
|
|
|
|
|
|
- /** 查询列表 */
|
|
|
- const getList = async () => {
|
|
|
- loading.value = true
|
|
|
- try {
|
|
|
- const data = await TradeOrderApi.getOrderPage(unref(queryParams))
|
|
|
- data.list.forEach(obj => {
|
|
|
- obj.showSetting = false;
|
|
|
- });
|
|
|
- list.value = data.list
|
|
|
- total.value = data.total
|
|
|
- } finally {
|
|
|
- loading.value = false
|
|
|
- searchMoreShow.value = false
|
|
|
+const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
|
|
|
+const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(async () => {
|
|
|
+ await getList()
|
|
|
+ pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
|
|
|
+ deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+})
|
|
|
|
|
|
- /** 搜索按钮操作 */
|
|
|
- const handleQuery = async () => {
|
|
|
- queryParams.value.pageNo = 1
|
|
|
- await getList()
|
|
|
- }
|
|
|
+</script>
|
|
|
|
|
|
- /** 重置按钮操作 */
|
|
|
- const resetQuery = () => {
|
|
|
- queryFormRef.value?.resetFields()
|
|
|
- queryParams.value = {
|
|
|
- pageNo: 1, // 页数
|
|
|
- pageSize: 10, // 每页显示数量
|
|
|
- status: undefined, // 订单状态
|
|
|
- payChannelCode: undefined, // 支付方式
|
|
|
- createTime: undefined, // 创建时间
|
|
|
- terminal: undefined, // 订单来源
|
|
|
- type: undefined, // 订单类型
|
|
|
- deliveryType: undefined, // 配送方式
|
|
|
- logisticsId: undefined, // 快递公司
|
|
|
- pickUpStoreId: undefined, // 自提门店
|
|
|
- pickUpVerifyCode: undefined // 自提核销码
|
|
|
- }
|
|
|
- handleQuery()
|
|
|
+<style lang="scss" scoped>
|
|
|
+//当屏幕最大宽度为768时，走这套样式
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .year {
|
|
|
+ display: none
|
|
|
}
|
|
|
|
|
|
- // /** 查看订单详情 */
|
|
|
- // const openDetail = (id : number) => {
|
|
|
- // push({ name: 'TradeOrderDetail', params: { id } })
|
|
|
- // }
|
|
|
-
|
|
|
- /** 操作分发 */
|
|
|
- const deliveryFormRef = ref()
|
|
|
- const updateRemarkForm = ref()
|
|
|
- const updateAddressFormRef = ref() // 收货地址表单 Ref
|
|
|
- const updateAddress = (id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress) => {
|
|
|
- updateAddressFormRef.value.open(id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress)
|
|
|
- }
|
|
|
- const handleDelivery = (id) =>{
|
|
|
- deliveryFormRef.value?.open("订单列表",id)
|
|
|
+ .product-card {
|
|
|
+ margin: 10px 0 !important;
|
|
|
+ ;
|
|
|
}
|
|
|
- const handleRemark = (id,remark) => {
|
|
|
- updateRemarkForm.value?.open(id,remark)
|
|
|
+
|
|
|
+ ::v-deep(.el-pagination__sizes),
|
|
|
+ ::v-deep(.el-pagination__jump) {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
|
|
|
- // 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
|
|
|
- watch(
|
|
|
- () => currentRoute.value,
|
|
|
- () => {
|
|
|
- getList()
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
|
|
|
- const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
|
|
|
- /** 初始化 **/
|
|
|
- onMounted(async () => {
|
|
|
- await getList()
|
|
|
- pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
|
|
|
- deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- .year{
|
|
|
- display:none
|
|
|
- }
|
|
|
- }
|
|
|
- .order-div {
|
|
|
- position: relative;
|
|
|
- min-height: 400px;
|
|
|
- }
|
|
|
+.order-div {
|
|
|
+ position: relative;
|
|
|
+ min-height: 400px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
|
|
|
|
|
|
- ::v-deep .parent-tabs .el-tabs__nav-wrap::after {
|
|
|
- position: static !important;
|
|
|
+::v-deep .parent-tabs .el-tabs__nav-wrap::after {
|
|
|
+ position: static !important;
|
|
|
|
|
|
- }
|
|
|
+}
|
|
|
+::v-deep .el-card__body{
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+::v-deep .parent-tabs .el-tabs__active-bar {
|
|
|
|
|
|
- ::v-deep .parent-tabs .el-tabs__active-bar {
|
|
|
+ background-color: unset;
|
|
|
+}
|
|
|
|
|
|
- background-color: unset;
|
|
|
- }
|
|
|
+.searchMore {
|
|
|
+ text-align: right;
|
|
|
+ background: #f3f5f8;
|
|
|
+ padding: 10px;
|
|
|
+ position: absolute;
|
|
|
+ // height: 100px;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ z-index: 111;
|
|
|
+ box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
- .searchMore {
|
|
|
- text-align: right;
|
|
|
- background: #f3f5f8;
|
|
|
- padding: 10px;
|
|
|
- position: absolute;
|
|
|
- // height: 100px;
|
|
|
- width: calc(100% - 20px);
|
|
|
- z-index: 111;
|
|
|
- box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
+}
|
|
|
+
|
|
|
+.el-tabs {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 111;
|
|
|
+ top: 25px;
|
|
|
+ left: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-card {
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 10px;
|
|
|
+
|
|
|
+ .el-card {
|
|
|
+ padding: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ padding: unset;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .el-tabs {
|
|
|
+ .setting {
|
|
|
+ width: 30px;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
position: absolute;
|
|
|
- z-index: 111;
|
|
|
- top: 25px;
|
|
|
- left: 40px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
- .product-card {
|
|
|
-
|
|
|
- font-size: 14px;
|
|
|
- margin: 10px;
|
|
|
-
|
|
|
- .el-card {
|
|
|
- padding: 15px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
+ .setting :focus-visible {
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.el-card__body) {
|
|
|
- padding: unset;
|
|
|
- }
|
|
|
- }
|
|
|
+ .setting:focus-visible {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
|
|
|
- .setting {
|
|
|
- width: 30px;
|
|
|
- top: 0px;
|
|
|
- right: 0px;
|
|
|
- position: absolute;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .setting :focus-visible {
|
|
|
- outline: 0;
|
|
|
- }
|
|
|
- .setting:focus-visible {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .setting:hover {
|
|
|
- background: #666
|
|
|
- }
|
|
|
+ .setting:hover {
|
|
|
+ background: #666
|
|
|
+ }
|
|
|
|
|
|
- p,
|
|
|
- div {
|
|
|
- margin: unset;
|
|
|
- padding: unset;
|
|
|
- }
|
|
|
+ p,
|
|
|
+ div {
|
|
|
+ margin: unset;
|
|
|
+ padding: unset;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .spu-table-expand {
|
|
|
- padding-left: 42px;
|
|
|
+.spu-table-expand {
|
|
|
+ padding-left: 42px;
|
|
|
|
|
|
- :deep(.el-form-item__label) {
|
|
|
- width: 82px;
|
|
|
- font-weight: bold;
|
|
|
- color: #99a9bf;
|
|
|
- }
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ width: 82px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #99a9bf;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
RuHu.Xu