订单列表：列表重构添加门店、物流检索条件

2023-08-22 18:47:31 +08:00 · 2023-08-22 18:47:31 +08:00 · 5dceda614a
commit 5dceda614a
parent 83e780da06
4 changed files with 97 additions and 63 deletions
--- a/src/api/mall/trade/delivery/express/index.ts
+++ b/src/api/mall/trade/delivery/express/index.ts
@ -19,7 +19,7 @@ export const getDeliveryExpress = async (id: number) => {
  return await request.get({ url: '/trade/delivery/express/get?id=' + id })
 }

-// 获得商品品牌精简信息列表
+// 获得快递公司精简信息列表
 export const getSimpleDeliveryExpressList = () => {
  return request.get({ url: '/trade/delivery/express/list-all-simple' })
 }
--- a/src/api/mall/trade/delivery/pickUpStore/index.ts
+++ b/src/api/mall/trade/delivery/pickUpStore/index.ts
@ -16,7 +16,7 @@ export interface DeliveryPickUpStoreVO {
 }

 // 查询自提门店列表
-export const getDeliveryPickUpStorePage = async (params: DeliveryPickUpStorePageReqVO) => {
+export const getDeliveryPickUpStorePage = async (params) => {
  return await request.get({ url: '/trade/delivery/pick-up-store/page', params })
 }

@ -25,6 +25,11 @@ export const getDeliveryPickUpStore = async (id: number) => {
  return await request.get({ url: '/trade/delivery/pick-up-store/get?id=' + id })
 }

+// 查询自提门店精简列表
+export const getListAllSimple = async () => {
+  return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
+}
+
 // 新增自提门店
 export const createDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) => {
  return await request.post({ url: '/trade/delivery/pick-up-store/create', data })
@ -39,8 +44,3 @@ export const updateDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) =>
 export const deleteDeliveryPickUpStore = async (id: number) => {
  return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
 }
-
-// 导出自提门店 Excel
-export const exportDeliveryPickUpStoreApi = async (params) => {
-  return await request.download({ url: '/trade/delivery/pick-up-store/export-excel', params })
-}
--- a/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/index.vue
@ -1,27 +1,27 @@
 <template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px">
      <el-form-item label="门店手机" prop="phone">
        <el-input
          v-model="queryParams.phone"
-          placeholder="请输门店手机"
-          clearable
-          @keyup.enter="handleQuery"
          class="!w-240px"
+          clearable
+          placeholder="请输门店手机"
+          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店名称" prop="name">
        <el-input
          v-model="queryParams.name"
-          placeholder="请输门店名称"
-          clearable
-          @keyup.enter="handleQuery"
          class="!w-240px"
+          clearable
+          placeholder="请输门店名称"
+          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="门店状态" clearable class="!w-240px">
+        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="门店状态">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
            :key="dict.value"
@ -33,32 +33,30 @@
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="datetimerange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['trade:delivery:pick-up-store:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
        </el-button>
        <el-button
-          type="success"
+          v-hasPermi="['trade:delivery:pick-up-store:create']"
          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['trade:delivery:pick-up-store:export']"
+          type="primary"
+          @click="openForm('create')"
        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
        </el-button>
      </el-form-item>
    </el-form>
@ -75,34 +73,34 @@
      </el-table-column>
      <el-table-column label="门店名称" prop="name" />
      <el-table-column label="门店手机" prop="phone" />
-      <el-table-column label="门店详细地址" align="center" prop="detailAddress" />
-      <el-table-column label="开启状态" align="center" prop="status">
+      <el-table-column align="center" label="门店详细地址" prop="detailAddress" />
+      <el-table-column align="center" label="开启状态" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
        align="center"
+        label="创建时间"
        prop="createTime"
        width="180"
-        :formatter="dateFormatter"
      />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
+            v-hasPermi="['trade:delivery:pick-up-store:update']"
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['trade:delivery:pick-up-store:update']"
          >
            编辑
          </el-button>
          <el-button
+            v-hasPermi="['trade:delivery:pick-up-store:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['trade:delivery:pick-up-store:delete']"
          >
            删除
          </el-button>
@ -113,18 +111,17 @@
  <!-- 表单弹窗：添加/修改 -->
  <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="DeliveryPickUpStore">
+<script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import DeliveryPickUpStoreForm from './PickUpStoreForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化

 const total = ref(0) // 列表的总页数
 const loading = ref(true) // 列表的加载中
-const exportLoading = ref(false) // 导出的加载中
 const list = ref<any[]>([]) // 列表的数据
 const queryParams = reactive({
  pageNo: 1,
@ -179,21 +176,6 @@ const resetQuery = () => {
  handleQuery()
 }

-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await DeliveryPickUpStoreApi.exportDeliveryPickUpStoreApi(queryParams)
-    download.excel(data, '自提门店.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /** 初始化 **/
 onMounted(() => {
  getList()
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@ -64,8 +64,34 @@
          />
        </el-select>
      </el-form-item>
-
-      <el-form-item label="订单搜索">
+      <el-form-item label="快递公司" prop="type">
+        <el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
+          <el-option
+            v-for="item in deliveryExpressList"
+            :key="item.id as string"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="自提门店" prop="type">
+        <el-select
+          v-model="queryParams.pickUpStoreId"
+          class="!w-280px"
+          clearable
+          multiple
+          placeholder="全部"
+        >
+          <el-option
+            v-for="item in pickUpStoreList"
+            :key="item.id as string"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- TODO 考虑是否移除或重构-->
+      <el-form-item label="聚合搜索">
        <el-input
          v-show="true"
          v-model="queryType.v"
@ -86,7 +112,6 @@
        </el-input>
      </el-form-item>
      <el-form-item>
-        <!-- TODO 订单按钮相关权限等订单完善后补齐 -->
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
@ -153,13 +178,31 @@
            </el-table-column>
            <el-table-column label="买家/收货人" min-width="160">
              <template #default>
-                <div class="flex flex-col">
+                <!-- 快递发货  -->
+                <div v-if="scope.row.deliveryType === 1" class="flex flex-col">
                  <span>买家：{{ scope.row.user.nickname }}</span>
                  <span>
                    收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
                    {{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
                  </span>
                </div>
+                <!-- 自提  -->
+                <div v-if="scope.row.deliveryType === 2" class="flex flex-col">
+                  <span>
+                    门店名称：
+                    {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
+                  </span>
+                  <span>
+                    门店手机：
+                    {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
+                  </span>
+                  <span>
+                    自提门店:
+                    {{
+                      pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress
+                    }}
+                  </span>
+                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="配送方式" width="120">
@ -169,6 +212,7 @@
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="160">
              <template #default>
+                <!-- TODO 权限后续补齐 -->
                <div class="flex justify-center items-center">
                  <el-button link type="primary" @click="openForm(scope.row.id)">
                    <Icon icon="ep:notification" />
@ -263,9 +307,11 @@ import OrderRemarksForm from './components/OrderRemarksForm.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { OrderItemRespVO, OrderVO } from '@/api/mall/trade/order'
+import { getListAllSimple } from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { formatToFraction } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
+import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'

 const { currentRoute, push } = useRouter() // 路由跳转

@ -320,7 +366,7 @@ const handleCommand = (command: string, row: OrderVO) => {
  }
 }
 const queryFormRef = ref<FormInstance>() // 搜索的表单
-//表单搜索 TODO 订单相关操作完成后立马实现
+//表单搜索
 const queryParams = reactive({
  pageNo: 1, //首页
  pageSize: 10, //页面大小
@ -337,6 +383,8 @@ const queryParams = reactive({
  createTime: [],
  spuName: '',
  itemCount: '',
+  pickUpStoreId: [],
+  logisticsId: null,
  all: ''
 })

@ -383,8 +431,12 @@ watch(
  }
 )

+const pickUpStoreList = ref([]) // 自提门店精简列表
+const deliveryExpressList = ref([]) // 物流公司
 /** 初始化 **/
 onMounted(async () => {
  await getList()
+  pickUpStoreList.value = await getListAllSimple()
+  deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>