From d1a3fe5d5a91ea5f782d1c83abb7b6a111ec0a14 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 18 Oct 2023 11:33:42 +0800
Subject: [PATCH 01/13] =?UTF-8?q?=E8=90=A5=E9=94=80=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=B5=8F=E8=A7=88=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/promotion/article/ArticleForm.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue
index 36fc13409..2f99fa387 100644
--- a/src/views/mall/promotion/article/ArticleForm.vue
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -40,16 +40,6 @@
             <UploadImg v-model="formData.picUrl" height="80px" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="浏览次数" prop="browseCount">
-            <el-input-number
-              v-model="formData.browseCount"
-              :min="0"
-              clearable
-              controls-position="right"
-            />
-          </el-form-item>
-        </el-col>
         <el-col :span="12">
           <el-form-item label="排序" prop="sort">
             <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
@@ -141,7 +131,6 @@ const formData = ref({
   author: undefined,
   picUrl: undefined,
   introduction: undefined,
-  browseCount: 0,
   sort: 0,
   status: 0,
   spuId: undefined,
@@ -215,7 +204,6 @@ const resetForm = () => {
     author: undefined,
     picUrl: undefined,
     introduction: undefined,
-    browseCount: 0,
     sort: 0,
     status: 0,
     spuId: undefined,
-- 
Gitee


From 04d88ce1a61cacbf613f7d77565334bc15abfd12 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 18 Oct 2023 17:20:13 +0800
Subject: [PATCH 02/13] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=9A=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=97=E6=8A=BD=E7=A6=BB?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=B8=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/trade/delivery/pickUpStore/index.ts  |   2 +-
 .../order/components/OrderTableColumn.vue     | 222 +++++++++++++
 .../mall/trade/order/components/index.ts      |   3 +
 src/views/mall/trade/order/index.vue          | 302 ++++--------------
 4 files changed, 281 insertions(+), 248 deletions(-)
 create mode 100644 src/views/mall/trade/order/components/OrderTableColumn.vue
 create mode 100644 src/views/mall/trade/order/components/index.ts

diff --git a/src/api/mall/trade/delivery/pickUpStore/index.ts b/src/api/mall/trade/delivery/pickUpStore/index.ts
index 82ba66c4f..c31750218 100644
--- a/src/api/mall/trade/delivery/pickUpStore/index.ts
+++ b/src/api/mall/trade/delivery/pickUpStore/index.ts
@@ -26,7 +26,7 @@ export const getDeliveryPickUpStore = async (id: number) => {
 }
 
 // 查询自提门店精简列表
-export const getListAllSimple = async () => {
+export const getListAllSimple = async (): Promise<DeliveryPickUpStoreVO[]> => {
   return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
 }
 
diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
new file mode 100644
index 000000000..89a1ed254
--- /dev/null
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-table-column class-name="order-table-col">
+    <template #header>
+      <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
+      <div class="flex items-center" style="width: 100%">
+        <div class="ml-100px mr-200px">商品信息</div>
+        <div class="mr-60px">单价(元)/数量</div>
+        <div class="mr-60px">售后状态</div>
+        <div class="mr-60px">实付金额(元)</div>
+        <div class="mr-60px">买家/收货人</div>
+        <div class="mr-60px">配送方式</div>
+        <div class="mr-60px">订单状态</div>
+        <div class="mr-60px">操作</div>
+      </div>
+    </template>
+    <template #default="scope">
+      <el-table
+        :border="true"
+        :data="scope.row.items"
+        :header-cell-style="headerStyle"
+        :span-method="spanMethod"
+        style="width: 100%"
+      >
+        <el-table-column class-name="table-col-1" min-width="300" prop="spuName">
+          <template #header>
+            <div
+              class="flex items-center"
+              style="width: 100%; height: 35px; background-color: #f7f7f7"
+            >
+              <span class="mr-20px">订单号：{{ scope.row.no }} </span>
+              <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
+              <span>订单来源：</span>
+              <dict-tag :type="DICT_TYPE.TERMINAL" :value="scope.row.terminal" class="mr-20px" />
+              <span>支付方式：</span>
+              <dict-tag
+                v-if="scope.row.payChannelCode"
+                :type="DICT_TYPE.PAY_CHANNEL_CODE"
+                :value="scope.row.payChannelCode"
+                class="mr-20px"
+              />
+              <span v-else class="mr-20px">未支付</span>
+              <span v-if="scope.row.payTime" class="mr-20px">
+                支付时间：{{ formatDate(scope.row.payTime) }}
+              </span>
+              <span>订单类型：</span>
+              <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
+            </div>
+          </template>
+          <template #default="{ row }">
+            <div class="flex items-center">
+              <el-image
+                :src="row.picUrl"
+                class="mr-10px h-30px w-30px"
+                @click="imagePreview(row.picUrl)"
+              />
+              <span class="mr-10px">{{ row.spuName }}</span>
+              <el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
+                {{ property.propertyName }}: {{ property.valueName }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column class-name="table-col-2" label="商品原价*数量" prop="price" width="150">
+          <template #default="{ row }">
+            {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          class-name="table-col-3"
+          label="售后状态"
+          prop="afterSaleStatus"
+          width="120"
+        >
+          <template #default="{ row }">
+            <dict-tag
+              :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+              :value="row.afterSaleStatus"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          class-name="table-col-4"
+          label="实际支付"
+          min-width="120"
+          prop="payPrice"
+        >
+          <template #default>
+            {{ floatToFixed2(scope.row.payPrice) + '元' }}
+          </template>
+        </el-table-column>
+        <el-table-column class-name="table-col-5" label="买家/收货人" min-width="160">
+          <template #default>
+            <!-- 快递发货  -->
+            <div
+              v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              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 === DeliveryTypeEnum.PICK_UP.type"
+              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" class-name="table-col-6" label="配送方式" width="120">
+          <template #default>
+            <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" class-name="table-col-7" label="订单状态" width="120">
+          <template #default>
+            <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          class-name="table-col-8"
+          fixed="right"
+          label="操作"
+          width="160"
+        >
+          <template #default>
+            <slot :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+  </el-table-column>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { DeliveryTypeEnum } from '@/utils/constants'
+import { formatDate } from '@/utils/formatTime'
+import { floatToFixed2 } from '@/utils'
+import * as TradeOrderApi from '@/api/mall/trade/order'
+import { OrderVO } from '@/api/mall/trade/order'
+import { TableColumnCtx } from 'element-plus'
+import { createImageViewer } from '@/components/ImageViewer'
+import type { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
+
+defineOptions({ name: 'OrderTableColumn' })
+
+const props = defineProps<{
+  list: OrderVO[]
+  pickUpStoreList: DeliveryPickUpStoreVO[]
+}>()
+
+const headerStyle = ({ row, columnIndex }: any) => {
+  // 表头第一行第一列占 8
+  if (columnIndex === 0) {
+    row[columnIndex].colSpan = 8
+  } else {
+    // 其余的不要
+    row[columnIndex].colSpan = 0
+    return {
+      display: 'none'
+    }
+  }
+}
+
+interface SpanMethodProps {
+  row: TradeOrderApi.OrderItemRespVO
+  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
+  rowIndex: number
+  columnIndex: number
+}
+
+type spanMethodResp = number[] | { rowspan: number; colspan: number } | undefined
+const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethodResp => {
+  const len = props.list.find(
+    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
+  )?.items?.length
+  // 要合并的列，从零开始
+  const colIndex = [3, 4, 5, 6, 7]
+  if (colIndex.includes(columnIndex)) {
+    // 除了第一行其余的不要
+    if (rowIndex !== 0) {
+      return {
+        rowspan: 0,
+        colspan: 0
+      }
+    }
+    // 动态合并行
+    return {
+      rowspan: len!,
+      colspan: 1
+    }
+  }
+}
+
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
+<style lang="scss" scoped>
+:deep(.order-table-col > .cell) {
+  padding: 0;
+}
+</style>
diff --git a/src/views/mall/trade/order/components/index.ts b/src/views/mall/trade/order/components/index.ts
new file mode 100644
index 000000000..9cce9fac4
--- /dev/null
+++ b/src/views/mall/trade/order/components/index.ts
@@ -0,0 +1,3 @@
+import OrderTableColumn from './OrderTableColumn.vue'
+
+export { OrderTableColumn }
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 33d985489..94cd8c175 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -163,177 +163,42 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column class-name="order-table-col">
-        <template #header>
-          <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
-          <div class="flex items-center" style="width: 100%">
-            <div class="ml-100px mr-200px">商品信息</div>
-            <div class="mr-60px">单价(元)/数量</div>
-            <div class="mr-60px">售后状态</div>
-            <div class="mr-60px">实付金额(元)</div>
-            <div class="mr-60px">买家/收货人</div>
-            <div class="mr-60px">配送方式</div>
-            <div class="mr-60px">订单状态</div>
-            <div class="mr-60px">操作</div>
-          </div>
-        </template>
-        <template #default="scope">
-          <el-table
-            :border="true"
-            :data="scope.row.items"
-            :header-cell-style="headerStyle"
-            :span-method="spanMethod"
-            style="width: 100%"
-          >
-            <el-table-column min-width="300" prop="spuName">
-              <template #header>
-                <div
-                  class="flex items-center"
-                  style="width: 100%; height: 35px; background-color: #f7f7f7"
-                >
-                  <span class="mr-20px">订单号：{{ scope.row.no }} </span>
-                  <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
-                  <span>订单来源：</span>
-                  <dict-tag
-                    :type="DICT_TYPE.TERMINAL"
-                    :value="scope.row.terminal"
-                    class="mr-20px"
-                  />
-                  <span>支付方式：</span>
-                  <dict-tag
-                    v-if="scope.row.payChannelCode"
-                    :type="DICT_TYPE.PAY_CHANNEL_CODE"
-                    :value="scope.row.payChannelCode"
-                    class="mr-20px"
-                  />
-                  <v-else v-else class="mr-20px">未支付</v-else>
-                  <span v-if="scope.row.payTime" class="mr-20px">
-                    支付时间：{{ formatDate(scope.row.payTime) }}
-                  </span>
-                  <span>订单类型：</span>
-                  <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
-                </div>
-              </template>
-              <template #default="{ row }">
-                <div class="flex items-center">
-                  <el-image
-                    :src="row.picUrl"
-                    class="mr-10px h-30px w-30px"
-                    @click="imagePreview(row.picUrl)"
-                  />
-                  <span class="mr-10px">{{ row.spuName }}</span>
-                  <el-tag
-                    v-for="property in row.properties"
-                    :key="property.propertyId"
-                    class="mr-10px"
+      <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
+        <template #default="{ row }">
+          <!-- TODO 权限后续补齐 -->
+          <div class="flex items-center justify-center">
+            <el-button link type="primary" @click="openDetail(row.id)">
+              <Icon icon="ep:notification" />
+              详情
+            </el-button>
+            <el-dropdown @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"
                   >
-                    {{ property.propertyName }}: {{ property.valueName }}
-                  </el-tag>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品原价*数量" prop="price" width="150">
-              <template #default="{ row }">
-                {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
-              </template>
-            </el-table-column>
-            <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
-              <template #default="{ row }">
-                <dict-tag
-                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                  :value="row.afterSaleStatus"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
-              <template #default>
-                {{ floatToFixed2(scope.row.payPrice) + '元' }}
+                    <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-table-column>
-            <el-table-column label="买家/收货人" min-width="160">
-              <template #default>
-                <!-- 快递发货  -->
-                <div
-                  v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
-                  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 === DeliveryTypeEnum.PICK_UP.type"
-                  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">
-              <template #default>
-                <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="订单状态" width="120">
-              <template #default>
-                <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" fixed="right" label="操作" width="160">
-              <template #default>
-                <!-- TODO 权限后续补齐 -->
-                <div class="flex items-center justify-center">
-                  <el-button link type="primary" @click="openDetail(scope.row.id)">
-                    <Icon icon="ep:notification" />
-                    详情
-                  </el-button>
-                  <el-dropdown @command="(command) => handleCommand(command, scope.row)">
-                    <el-button link type="primary">
-                      <Icon icon="ep:d-arrow-right" />
-                      更多
-                    </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
-                        <el-dropdown-item
-                          v-if="
-                            scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
-                            scope.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>
-            </el-table-column>
-          </el-table>
+            </el-dropdown>
+          </div>
         </template>
-      </el-table-column>
+      </OrderTableColumn>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -350,22 +215,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { FormInstance, TableColumnCtx } from 'element-plus'
+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 } from '@/utils/dict'
-import { formatDate } from '@/utils/formatTime'
-import { floatToFixed2 } from '@/utils'
-import { createImageViewer } from '@/components/ImageViewer'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
+import { OrderTableColumn } from './components'
 
 defineOptions({ name: 'TradeOrder' })
 
 const { currentRoute, push } = useRouter() // 路由跳转
-
 const loading = ref(true) // 列表的加载中
 const total = ref(2) // 列表的总页数
 const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
@@ -374,15 +236,15 @@ const queryFormRef = ref<FormInstance>() // 搜索的表单
 const queryParams = ref({
   pageNo: 1, // 页数
   pageSize: 10, // 每页显示数量
-  status: null, // 订单状态
-  payChannelCode: null, // 支付方式
-  createTime: null, // 创建时间
-  terminal: null, // 订单来源
-  type: null, // 订单类型
-  deliveryType: null, // 配送方式
-  logisticsId: null, // 快递公司
-  pickUpStoreId: null, // 自提门店
-  pickUpVerifyCode: null // 自提核销码
+  status: undefined, // 订单状态
+  payChannelCode: undefined, // 支付方式
+  createTime: undefined, // 创建时间
+  terminal: undefined, // 订单来源
+  type: undefined, // 订单类型
+  deliveryType: undefined, // 配送方式
+  logisticsId: undefined, // 快递公司
+  pickUpStoreId: undefined, // 自提门店
+  pickUpVerifyCode: undefined // 自提核销码
 })
 const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
 
@@ -408,48 +270,6 @@ const inputChangeSelect = (val: string) => {
     })
 }
 
-const headerStyle = ({ row, columnIndex }: any) => {
-  // 表头第一行第一列占 8
-  if (columnIndex === 0) {
-    row[columnIndex].colSpan = 8
-  } else {
-    // 其余的不要
-    row[columnIndex].colSpan = 0
-    return {
-      display: 'none'
-    }
-  }
-}
-
-interface SpanMethodProps {
-  row: TradeOrderApi.OrderItemRespVO
-  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
-  rowIndex: number
-  columnIndex: number
-}
-
-const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
-  const len = list.value.find(
-    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
-  )?.items?.length
-  // 要合并的列，从零开始
-  const colIndex = [3, 4, 5, 6, 7]
-  if (colIndex.includes(columnIndex)) {
-    // 除了第一行其余的不要
-    if (rowIndex !== 0) {
-      return {
-        rowspan: 0,
-        colspan: 0
-      }
-    }
-    // 动态合并行
-    return {
-      rowspan: len,
-      colspan: 1
-    }
-  }
-}
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -472,28 +292,21 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = {
-    pickUpVerifyCode: null, // 自提核销码
     pageNo: 1, // 页数
     pageSize: 10, // 每页显示数量
-    status: null, // 订单状态
-    payChannelCode: null, // 支付方式
-    createTime: null, // 创建时间
-    terminal: null, // 订单来源
-    type: null, // 订单类型
-    deliveryType: null, // 配送方式
-    logisticsId: null, // 快递公司
-    pickUpStoreId: null // 自提门店
+    status: undefined, // 订单状态
+    payChannelCode: undefined, // 支付方式
+    createTime: undefined, // 创建时间
+    terminal: undefined, // 订单来源
+    type: undefined, // 订单类型
+    deliveryType: undefined, // 配送方式
+    logisticsId: undefined, // 快递公司
+    pickUpStoreId: undefined, // 自提门店
+    pickUpVerifyCode: undefined // 自提核销码
   }
   handleQuery()
 }
 
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
 /** 查看订单详情 */
 const openDetail = (id: number) => {
   push({ name: 'TradeOrderDetail', params: { id } })
@@ -521,8 +334,8 @@ watch(
   }
 )
 
-const pickUpStoreList = ref([]) // 自提门店精简列表
-const deliveryExpressList = ref([]) // 物流公司
+const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
+const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
 /** 初始化 **/
 onMounted(async () => {
   await getList()
@@ -530,8 +343,3 @@ onMounted(async () => {
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
-<style lang="scss" scoped>
-:deep(.order-table-col > .cell) {
-  padding: 0;
-}
-</style>
-- 
Gitee


From 5270c83876980719f3c6127d4f13bb9dd77835bf Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 10:36:52 +0800
Subject: [PATCH 03/13] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=9A=E5=AE=8C=E5=96=84=E8=A1=A8=E5=A4=B4=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/OrderTableColumn.vue     | 92 ++++++++++++-------
 1 file changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index 89a1ed254..da0e15327 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -1,27 +1,43 @@
 <template>
   <el-table-column class-name="order-table-col">
     <template #header>
-      <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
       <div class="flex items-center" style="width: 100%">
-        <div class="ml-100px mr-200px">商品信息</div>
-        <div class="mr-60px">单价(元)/数量</div>
-        <div class="mr-60px">售后状态</div>
-        <div class="mr-60px">实付金额(元)</div>
-        <div class="mr-60px">买家/收货人</div>
-        <div class="mr-60px">配送方式</div>
-        <div class="mr-60px">订单状态</div>
-        <div class="mr-60px">操作</div>
+        <div :style="{ width: orderTableHeadWidthList[0] + 'px' }" class="flex justify-center">
+          商品信息
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[1] + 'px' }" class="flex justify-center">
+          单价(元)/数量
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[2] + 'px' }" class="flex justify-center">
+          售后状态
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[3] + 'px' }" class="flex justify-center">
+          实付金额(元)
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[4] + 'px' }" class="flex justify-center">
+          买家/收货人
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[5] + 'px' }" class="flex justify-center">
+          配送方式
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[6] + 'px' }" class="flex justify-center">
+          订单状态
+        </div>
+        <div :style="{ width: orderTableHeadWidthList[7] + 'px' }" class="flex justify-center">
+          操作
+        </div>
       </div>
     </template>
     <template #default="scope">
       <el-table
+        :ref="setOrderTableRef"
         :border="true"
         :data="scope.row.items"
         :header-cell-style="headerStyle"
         :span-method="spanMethod"
         style="width: 100%"
       >
-        <el-table-column class-name="table-col-1" min-width="300" prop="spuName">
+        <el-table-column min-width="300" prop="spuName">
           <template #header>
             <div
               class="flex items-center"
@@ -60,17 +76,12 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column class-name="table-col-2" label="商品原价*数量" prop="price" width="150">
+        <el-table-column label="商品原价*数量" prop="price" width="150">
           <template #default="{ row }">
             {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
           </template>
         </el-table-column>
-        <el-table-column
-          class-name="table-col-3"
-          label="售后状态"
-          prop="afterSaleStatus"
-          width="120"
-        >
+        <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
           <template #default="{ row }">
             <dict-tag
               :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
@@ -78,18 +89,12 @@
             />
           </template>
         </el-table-column>
-        <el-table-column
-          align="center"
-          class-name="table-col-4"
-          label="实际支付"
-          min-width="120"
-          prop="payPrice"
-        >
+        <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
           <template #default>
             {{ floatToFixed2(scope.row.payPrice) + '元' }}
           </template>
         </el-table-column>
-        <el-table-column class-name="table-col-5" label="买家/收货人" min-width="160">
+        <el-table-column label="买家/收货人" min-width="160">
           <template #default>
             <!-- 快递发货  -->
             <div
@@ -122,23 +127,17 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column align="center" class-name="table-col-6" label="配送方式" width="120">
+        <el-table-column align="center" label="配送方式" width="120">
           <template #default>
             <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
           </template>
         </el-table-column>
-        <el-table-column align="center" class-name="table-col-7" label="订单状态" width="120">
+        <el-table-column align="center" label="订单状态" width="120">
           <template #default>
             <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
           </template>
         </el-table-column>
-        <el-table-column
-          align="center"
-          class-name="table-col-8"
-          fixed="right"
-          label="操作"
-          width="160"
-        >
+        <el-table-column align="center" fixed="right" label="操作" width="160">
           <template #default>
             <slot :row="scope.row"></slot>
           </template>
@@ -154,7 +153,7 @@ import { formatDate } from '@/utils/formatTime'
 import { floatToFixed2 } from '@/utils'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { OrderVO } from '@/api/mall/trade/order'
-import { TableColumnCtx } from 'element-plus'
+import type { TableColumnCtx, TableInstance } from 'element-plus'
 import { createImageViewer } from '@/components/ImageViewer'
 import type { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 
@@ -208,6 +207,29 @@ const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethod
   }
 }
 
+/** 解决 ref 在 v-for 中的获取问题*/
+const setOrderTableRef = (el: TableInstance) => {
+  if (!el) return
+  // 只要第一个表也就是开始的第一行
+  if (el.tableId !== 'el-table_2') {
+    return
+  }
+  tableHeadWidthAuto(el)
+}
+// 头部 col 宽度初始化
+const orderTableHeadWidthList = ref([300, 150, 120, 120, 160, 120, 120, 160])
+// 头部宽度自适应
+const tableHeadWidthAuto = (el: TableInstance) => {
+  const columns = el.store.states.columns.value
+  if (columns.length === 0) {
+    return
+  }
+  columns.forEach((col: TableColumnCtx<TableInstance>, index: number) => {
+    if (col.realWidth) {
+      orderTableHeadWidthList.value[index] = col.realWidth
+    }
+  })
+}
 /** 商品图预览 */
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
-- 
Gitee


From 70778fd9e6142d615fee800b53ac060733ef915a Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 10:54:10 +0800
Subject: [PATCH 04/13] =?UTF-8?q?UserOrderList=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../member/user/detail/UserOrderList.vue      | 335 ++++++------------
 1 file changed, 105 insertions(+), 230 deletions(-)

diff --git a/src/views/member/user/detail/UserOrderList.vue b/src/views/member/user/detail/UserOrderList.vue
index 86c121bc4..1f4359ca7 100644
--- a/src/views/member/user/detail/UserOrderList.vue
+++ b/src/views/member/user/detail/UserOrderList.vue
@@ -74,7 +74,11 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="queryParams.deliveryType === 1" label="快递公司">
+      <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"
@@ -84,7 +88,11 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="queryParams.deliveryType === 2" label="自提门店">
+      <el-form-item
+        v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
+        label="自提门店"
+        prop="pickUpStoreId"
+      >
         <el-select
           v-model="queryParams.pickUpStoreId"
           class="!w-280px"
@@ -100,27 +108,45 @@
           />
         </el-select>
       </el-form-item>
-      <!-- TODO 聚合搜索等售后结束后实现-->
-      <!--      <el-form-item label="聚合搜索">-->
-      <!--        <el-input-->
-      <!--          v-show="true"-->
-      <!--          v-model="queryType.v"-->
-      <!--          class="!w-280px"-->
-      <!--          clearable-->
-      <!--          placeholder="请输入"-->
-      <!--        >-->
-      <!--          <template #prepend>-->
-      <!--            <el-select v-model="queryType.k" class="!w-110px" clearable placeholder="全部">-->
-      <!--              <el-option-->
-      <!--                v-for="dict in searchList"-->
-      <!--                :key="dict.value"-->
-      <!--                :label="dict.label"-->
-      <!--                :value="dict.value"-->
-      <!--              />-->
-      <!--            </el-select>-->
-      <!--          </template>-->
-      <!--        </el-input>-->
-      <!--      </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]"
+          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"
+                :value="dict.value"
+              />
+            </el-select>
+          </template>
+        </el-input>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
@@ -137,143 +163,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column class-name="order-table-col">
-        <template #header>
-          <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
-          <div class="flex items-center" style="width: 100%">
-            <div class="ml-100px mr-200px">商品信息</div>
-            <div class="mr-60px">单价(元)/数量</div>
-            <div class="mr-60px">售后状态</div>
-            <div class="mr-60px">实付金额(元)</div>
-            <div class="mr-60px">买家/收货人</div>
-            <div class="mr-60px">配送方式</div>
-            <div class="mr-60px">订单状态</div>
-            <div class="mr-60px">操作</div>
-          </div>
-        </template>
-        <template #default="scope">
-          <el-table
-            :border="true"
-            :data="scope.row.items"
-            :header-cell-style="headerStyle"
-            :span-method="spanMethod"
-            style="width: 100%"
-          >
-            <el-table-column min-width="300" prop="spuName">
-              <template #header>
-                <div
-                  class="flex items-center"
-                  style="width: 100%; height: 35px; background-color: #f7f7f7"
-                >
-                  <span class="mr-20px">订单号：{{ scope.row.no }} </span>
-                  <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
-                  <span>订单来源：</span>
-                  <dict-tag
-                    :type="DICT_TYPE.TERMINAL"
-                    :value="scope.row.terminal"
-                    class="mr-20px"
-                  />
-                  <span>支付方式：</span>
-                  <dict-tag
-                    v-if="scope.row.payChannelCode"
-                    :type="DICT_TYPE.PAY_CHANNEL_CODE"
-                    :value="scope.row.payChannelCode"
-                    class="mr-20px"
-                  />
-                  <v-else v-else class="mr-20px">未支付</v-else>
-                  <span v-if="scope.row.payTime" class="mr-20px">
-                    支付时间：{{ formatDate(scope.row.payTime) }}
-                  </span>
-                  <span>订单类型：</span>
-                  <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
-                </div>
-              </template>
-              <template #default="{ row }">
-                <div class="flex items-center">
-                  <el-image
-                    :src="row.picUrl"
-                    class="w-30px h-30px mr-10px"
-                    @click="imagePreview(row.picUrl)"
-                  />
-                  <span class="mr-10px">{{ row.spuName }}</span>
-                  <el-tag
-                    v-for="property in row.properties"
-                    :key="property.propertyId"
-                    class="mr-10px"
-                  >
-                    {{ property.propertyName }}: {{ property.valueName }}
-                  </el-tag>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品原价*数量" prop="price" width="150">
-              <template #default="{ row }">
-                {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
-              </template>
-            </el-table-column>
-            <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
-              <template #default="{ row }">
-                <dict-tag
-                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                  :value="row.afterSaleStatus"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
-              <template #default>
-                {{ floatToFixed2(scope.row.payPrice) + '元' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="买家/收货人" min-width="160">
-              <template #default>
-                <!-- 快递发货  -->
-                <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">
-              <template #default>
-                <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="订单状态" width="120">
-              <template #default>
-                <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" fixed="right" label="操作" width="160">
-              <template #default>
-                <el-button link type="primary" @click="openDetail(scope.row.id)">
-                  <Icon icon="ep:notification" />
-                  详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
+      <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openDetail(row.id)">
+            <Icon icon="ep:notification" />
+            详情
+          </el-button>
         </template>
-      </el-table-column>
+      </OrderTableColumn>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -284,66 +181,82 @@
     />
   </ContentWrap>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as OrderApi from '@/api/mall/trade/order/index'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
-import { formatDate } from '@/utils/formatTime'
-import { floatToFixed2 } from '@/utils'
 import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
-import { createImageViewer } from '@/components/ImageViewer'
-import * as TradeOrderApi from '@/api/mall/trade/order'
-import { FormInstance, TableColumnCtx } from 'element-plus'
+import { FormInstance } from 'element-plus'
+import { OrderTableColumn } from '@/views/mall/trade/order/components'
+import { DeliveryTypeEnum } from '@/utils/constants'
 
 const { push } = useRouter() // 路由跳转
 
-const { userId }: { userId: number } = defineProps({
-  userId: {
-    type: Number,
-    required: true
-  }
-})
+const { userId } = defineProps<{
+  userId: number
+}>()
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const pickUpStoreList = ref([]) // 自提门店精简列表
-const deliveryExpressList = ref([]) // 物流公司
+const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
+const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
 const queryFormRef = ref<FormInstance>() // 搜索的表单
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  createDate: [],
-  userId: NaN
+// 表单搜索
+const queryParams = ref({
+  pageNo: 1, // 页数
+  pageSize: 10, // 每页显示数量
+  userId: userId,
+  status: undefined, // 订单状态
+  payChannelCode: undefined, // 支付方式
+  createTime: undefined, // 创建时间
+  terminal: undefined, // 订单来源
+  type: undefined, // 订单类型
+  deliveryType: undefined, // 配送方式
+  logisticsId: undefined, // 快递公司
+  pickUpStoreId: undefined, // 自提门店
+  pickUpVerifyCode: undefined // 自提核销码
 })
-const headerStyle = ({ row, columnIndex }: any) => {
-  // 表头第一行第一列占 8
-  if (columnIndex === 0) {
-    row[columnIndex].colSpan = 8
-  } else {
-    // 其余的不要
-    row[columnIndex].colSpan = 0
-    return {
-      display: 'none'
-    }
-  }
+const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
+
+// 订单聚合搜索 select 类型配置（动态搜索）
+const dynamicSearchList = ref([
+  { value: 'no', label: '订单号' },
+  { 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 handleQuery = async () => {
-  queryParams.pageNo = 1
+  queryParams.value.pageNo = 1
   await getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
+  queryParams.value.userId = userId
   handleQuery()
 }
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await OrderApi.getOrderPage(queryParams)
-    console.log(data)
+    const data = await OrderApi.getOrderPage(queryParams.value)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -351,42 +264,6 @@ const getList = async () => {
   }
 }
 
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
-interface SpanMethodProps {
-  row: TradeOrderApi.OrderItemRespVO
-  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
-  rowIndex: number
-  columnIndex: number
-}
-
-const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
-  const len = list.value.find(
-    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
-  )?.items?.length
-  // 要合并的列，从零开始
-  const colIndex = [3, 4, 5, 6, 7]
-  if (colIndex.includes(columnIndex)) {
-    // 除了第一行其余的不要
-    if (rowIndex !== 0) {
-      return {
-        rowspan: 0,
-        colspan: 0
-      }
-    }
-    // 动态合并行
-    return {
-      rowspan: len,
-      colspan: 1
-    }
-  }
-}
-
 /** 查看订单详情 */
 const openDetail = (id: number) => {
   push({ name: 'TradeOrderDetail', params: { orderId: id } })
@@ -394,10 +271,8 @@ const openDetail = (id: number) => {
 
 /** 初始化 **/
 onMounted(async () => {
-  queryParams.userId = userId
   await getList()
   pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
-<style scoped lang="scss"></style>
-- 
Gitee


From 094f8e16db9f09586ba359b1d9043dbc84c820d0 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 11:10:33 +0800
Subject: [PATCH 05/13] =?UTF-8?q?OrderTableColumn:=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=88=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/trade/order/components/OrderTableColumn.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index da0e15327..c9aa89069 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -63,14 +63,18 @@
             </div>
           </template>
           <template #default="{ row }">
-            <div class="flex items-center">
+            <div class="flex flex-wrap">
               <el-image
                 :src="row.picUrl"
-                class="mr-10px h-30px w-30px"
+                class="mb-[13px] mr-[10px] h-[40px] w-[40px] v-middle"
                 @click="imagePreview(row.picUrl)"
               />
-              <span class="mr-10px">{{ row.spuName }}</span>
-              <el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
+              <span class="mb-[13px] mr-[10px]">{{ row.spuName }}</span>
+              <el-tag
+                v-for="property in row.properties"
+                :key="property.propertyId"
+                class="mb-[13px] mr-[10px]"
+              >
                 {{ property.propertyName }}: {{ property.valueName }}
               </el-tag>
             </div>
-- 
Gitee


From 5b3bcecef2355e2b30f0251c0d52b07c487c74e8 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 15:54:23 +0800
Subject: [PATCH 06/13] =?UTF-8?q?OrderTableColumn:=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=88=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/OrderTableColumn.vue     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index c9aa89069..5d1e25eec 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -40,8 +40,8 @@
         <el-table-column min-width="300" prop="spuName">
           <template #header>
             <div
-              class="flex items-center"
-              style="width: 100%; height: 35px; background-color: #f7f7f7"
+              class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
+              style="background-color: #f7f7f7"
             >
               <span class="mr-20px">订单号：{{ scope.row.no }} </span>
               <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
@@ -64,16 +64,31 @@
           </template>
           <template #default="{ row }">
             <div class="flex flex-wrap">
-              <el-image
-                :src="row.picUrl"
-                class="mb-[13px] mr-[10px] h-[40px] w-[40px] v-middle"
-                @click="imagePreview(row.picUrl)"
-              />
-              <span class="mb-[13px] mr-[10px]">{{ row.spuName }}</span>
+              <div class="mb-[10px] mr-[10px] flex items-start">
+                <div class="mr-[10px]">
+                  <el-image
+                    :src="row.picUrl"
+                    class="!h-[45px] !w-[45px]"
+                    fit="contain"
+                    @click="imagePreview(row.picUrl)"
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <icon icon="ep:picture" />
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <ElTooltip :content="row.spuName" placement="top">
+                  <span class="overflow-ellipsis max-h-[45px] overflow-hidden">
+                    {{ row.spuName }}
+                  </span>
+                </ElTooltip>
+              </div>
               <el-tag
                 v-for="property in row.properties"
                 :key="property.propertyId"
-                class="mb-[13px] mr-[10px]"
+                class="mb-[10px] mr-[10px]"
               >
                 {{ property.propertyName }}: {{ property.valueName }}
               </el-tag>
-- 
Gitee


From 3464bb9c74a0f3de9efc6ee5a4c42bac81c67485 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 17:33:42 +0800
Subject: [PATCH 07/13] =?UTF-8?q?SPU:=20=E6=96=B0=E5=A2=9E=E4=BC=98?=
 =?UTF-8?q?=E6=83=A0=E5=8D=B7=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |   8 +-
 src/utils/dict.ts                             |   1 +
 .../mall/product/spu/form/CouponSelect.vue    | 217 ++++++++++++++++++
 .../product/spu/form/OtherSettingsForm.vue    |  26 ++-
 src/views/mall/product/spu/index.vue          |  13 +-
 5 files changed, 251 insertions(+), 14 deletions(-)
 create mode 100644 src/views/mall/product/spu/form/CouponSelect.vue

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index 5cc4d8fef..b38beda94 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -28,14 +28,14 @@ export interface Sku {
 export interface Spu {
   id?: number
   name?: string // 商品名称
-  categoryId?: number | null // 商品分类
+  categoryId?: number | undefined // 商品分类
   keyword?: string // 关键字
-  unit?: number | null // 单位
+  unit?: number | undefined // 单位
   picUrl?: string // 商品封面图
   sliderPicUrls?: string[] // 商品轮播图
   introduction?: string // 商品简介
-  deliveryTemplateId?: number | null // 运费模版
-  brandId?: number | null // 商品品牌编号
+  deliveryTemplateId?: number | undefined // 运费模版
+  brandId?: number | undefined // 商品品牌编号
   specType?: boolean // 商品规格
   subCommissionType?: boolean // 分销类型
   skus?: Sku[] // sku数组
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 1fc0ab27b..15d35b8ea 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -155,6 +155,7 @@ export enum DICT_TYPE {
   // ========== MALL - 商品模块 ==========
   PRODUCT_UNIT = 'product_unit', // 商品单位
   PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
+  PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举
 
   // ========== MALL - 交易模块 ==========
   EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
diff --git a/src/views/mall/product/spu/form/CouponSelect.vue b/src/views/mall/product/spu/form/CouponSelect.vue
new file mode 100644
index 000000000..de0a2ed4e
--- /dev/null
+++ b/src/views/mall/product/spu/form/CouponSelect.vue
@@ -0,0 +1,217 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <!-- 搜索工作栏 -->
+    <ContentWrap>
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="82px"
+      >
+        <el-form-item label="优惠券名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            class="!w-240px"
+            clearable
+            placeholder="请输入优惠劵名"
+            @keyup="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="优惠类型" prop="discountType">
+          <el-select
+            v-model="queryParams.discountType"
+            class="!w-240px"
+            clearable
+            placeholder="请选择优惠券类型"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券状态" prop="status">
+          <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"
+              :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-240px"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <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-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="优惠券名称" min-width="140" prop="name" />
+        <el-table-column label="类型" min-width="80" prop="productScope">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠" min-width="100" prop="discount">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
+            {{ discountFormat(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="领取方式" min-width="100" prop="takeType">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="validityTypeFormat"
+          align="center"
+          label="使用时间"
+          prop="validityType"
+          width="185"
+        />
+        <el-table-column align="center" label="发放数量" prop="totalCount" />
+        <el-table-column
+          :formatter="remainedCountFormat"
+          align="center"
+          label="剩余数量"
+          prop="totalCount"
+        />
+        <el-table-column
+          :formatter="takeLimitCountFormat"
+          align="center"
+          label="领取上限"
+          prop="takeLimitCount"
+        />
+        <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
+          :formatter="dateFormatter"
+          align="center"
+          label="创建时间"
+          prop="createTime"
+          width="180"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  validityTypeFormat
+} from '@/views/mall/promotion/coupon/formatter'
+import { dateFormatter } from '@/utils/formatTime'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+
+defineOptions({ name: 'CouponSelect' })
+
+defineProps<{
+  multipleSelection: { id: number; name: string }[]
+}>()
+const emit = defineEmits<{
+  (e: 'update:multipleSelection', v: { id: number; name: string }[])
+}>()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('选择优惠卷') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: null,
+  discountType: null,
+  type: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 执行查询
+    const data = await CouponTemplateApi.getCouponTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef?.value?.resetFields()
+  handleQuery()
+}
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetQuery()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
+  emit(
+    'update:multipleSelection',
+    val.map((item) => ({ id: item.id, name: item.name }))
+  )
+}
+const submitForm = async () => {}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/mall/product/spu/form/OtherSettingsForm.vue b/src/views/mall/product/spu/form/OtherSettingsForm.vue
index a2f2afc6b..0576427d2 100644
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
@@ -43,16 +43,22 @@
       <el-col :span="24">
         <!--   TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
         <el-form-item label="活动优先级">
-          <el-tag>默认</el-tag>
-          <el-tag class="ml-2" type="success">秒杀</el-tag>
-          <el-tag class="ml-2" type="info">砍价</el-tag>
-          <el-tag class="ml-2" type="warning">拼团</el-tag>
+          <el-tag
+            v-for="type in getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM)"
+            :key="type.value as number"
+            :type="type.colorType"
+            class="mr-[10px]"
+          >
+            {{ type.label }}
+          </el-tag>
         </el-form-item>
       </el-col>
-      <!-- TODO @puhui999：等优惠劵 ok 在搞 -->
       <el-col :span="24">
         <el-form-item label="赠送优惠劵">
-          <el-button>选择优惠券</el-button>
+          <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+            {{ coupon.name }}
+          </el-tag>
+          <el-button @click="openCouponSelect">选择优惠券</el-button>
         </el-form-item>
       </el-col>
     </el-row>
@@ -82,6 +88,7 @@
       <el-tag class="ml-2" type="warning">拼团</el-tag>
     </template>
   </Descriptions>
+  <CouponSelect ref="couponSelectRef" />
 </template>
 <script lang="ts" setup>
 import type { Spu } from '@/api/mall/product/spu'
@@ -89,6 +96,8 @@ import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 import { otherSettingsSchema } from './spu.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import CouponSelect from './CouponSelect.vue'
 
 defineOptions({ name: 'OtherSettingsForm' })
 
@@ -104,6 +113,11 @@ const props = defineProps({
   activeName: propTypes.string.def(''),
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
+const couponSelectRef = ref() // 优惠卷模版选择
+const couponTemplateList = ref<{ id: number; name: string }[]>([]) // 选择的优惠卷
+const openCouponSelect = () => {
+  couponSelectRef.value?.open()
+}
 
 const otherSettingsFormRef = ref() // 表单Ref
 // 表单数据
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 6fc14ca30..27a4bd2d8 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@@ -24,8 +24,8 @@
           :props="defaultProps"
           class="w-1/1"
           clearable
-          placeholder="请选择商品分类"
           filterable
+          placeholder="请选择商品分类"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -48,7 +48,12 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button v-hasPermi="['product:spu:create']" plain type="primary" @click="openForm">
+        <el-button
+          v-hasPermi="['product:spu:create']"
+          plain
+          type="primary"
+          @click="openForm(undefined)"
+        >
           <Icon class="mr-5px" icon="ep:plus" />
           新增
         </el-button>
@@ -278,8 +283,8 @@ const queryParams = ref({
   pageSize: 10,
   tabType: 0,
   name: '',
-  categoryId: null,
-  createTime: []
+  categoryId: undefined,
+  createTime: undefined
 }) // 查询参数
 const queryFormRef = ref() // 搜索的表单Ref
 
-- 
Gitee


From 18df708b49ca43690622ecb12aead6d3b59e1b1d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 11:48:59 +0800
Subject: [PATCH 08/13] =?UTF-8?q?SPU:=20=E5=AE=8C=E5=96=84=E4=BC=98?=
 =?UTF-8?q?=E6=83=A0=E5=8D=B7=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |  6 +++++
 .../mall/product/spu/form/CouponSelect.vue    |  9 +++++---
 .../product/spu/form/OtherSettingsForm.vue    | 22 +++++++++++--------
 src/views/mall/product/spu/form/index.vue     | 11 +++++-----
 src/views/mall/product/spu/form/spu.data.ts   |  2 +-
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index b38beda94..d5251630d 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -25,6 +25,11 @@ export interface Sku {
   salesCount?: number // 商品销量
 }
 
+export interface GiveCouponTemplate {
+  id?: number
+  name?: string // 优惠券名称
+}
+
 export interface Spu {
   id?: number
   name?: string // 商品名称
@@ -55,6 +60,7 @@ export interface Spu {
   stock?: number // 商品库存
   createTime?: Date // 商品创建时间
   status?: number // 商品状态
+  giveCouponTemplate?: GiveCouponTemplate[]
 }
 
 // 获得 Spu 列表
diff --git a/src/views/mall/product/spu/form/CouponSelect.vue b/src/views/mall/product/spu/form/CouponSelect.vue
index de0a2ed4e..e0f32af2d 100644
--- a/src/views/mall/product/spu/form/CouponSelect.vue
+++ b/src/views/mall/product/spu/form/CouponSelect.vue
@@ -150,14 +150,15 @@ import {
 } from '@/views/mall/promotion/coupon/formatter'
 import { dateFormatter } from '@/utils/formatTime'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import type { GiveCouponTemplate } from '@/api/mall/product/spu'
 
 defineOptions({ name: 'CouponSelect' })
 
 defineProps<{
-  multipleSelection: { id: number; name: string }[]
+  multipleSelection: GiveCouponTemplate[]
 }>()
 const emit = defineEmits<{
-  (e: 'update:multipleSelection', v: { id: number; name: string }[])
+  (e: 'update:multipleSelection', v: GiveCouponTemplate[])
 }>()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('选择优惠卷') // 弹窗的标题
@@ -212,6 +213,8 @@ const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
     val.map((item) => ({ id: item.id, name: item.name }))
   )
 }
-const submitForm = async () => {}
+const submitForm = () => {
+  dialogVisible.value = false
+}
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/views/mall/product/spu/form/OtherSettingsForm.vue b/src/views/mall/product/spu/form/OtherSettingsForm.vue
index 0576427d2..033806b69 100644
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
@@ -82,16 +82,15 @@
       {{ row.recommendGood ? '是' : '否' }}
     </template>
     <template #activityOrders>
-      <el-tag>默认</el-tag>
-      <el-tag class="ml-2" type="success">秒杀</el-tag>
-      <el-tag class="ml-2" type="info">砍价</el-tag>
-      <el-tag class="ml-2" type="warning">拼团</el-tag>
+      <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+        {{ coupon.name }}
+      </el-tag>
     </template>
   </Descriptions>
-  <CouponSelect ref="couponSelectRef" />
+  <CouponSelect ref="couponSelectRef" v-model:multiple-selection="couponTemplateList" />
 </template>
 <script lang="ts" setup>
-import type { Spu } from '@/api/mall/product/spu'
+import type { GiveCouponTemplate, Spu } from '@/api/mall/product/spu'
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
@@ -113,8 +112,8 @@ const props = defineProps({
   activeName: propTypes.string.def(''),
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
-const couponSelectRef = ref() // 优惠卷模版选择
-const couponTemplateList = ref<{ id: number; name: string }[]>([]) // 选择的优惠卷
+const couponSelectRef = ref() // 优惠卷模版选择 Ref
+const couponTemplateList = ref<GiveCouponTemplate[]>([]) // 选择的优惠卷
 const openCouponSelect = () => {
   couponSelectRef.value?.open()
 }
@@ -129,7 +128,8 @@ const formData = ref<Spu>({
   recommendBenefit: false, // 是否优惠
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
-  recommendGood: false // 是否优品
+  recommendGood: false, // 是否优品
+  giveCouponTemplate: [] // 赠送的优惠券
 })
 // 表单规则
 const rules = reactive({
@@ -163,6 +163,9 @@ watch(
       return
     }
     copyValueToTarget(formData.value, data)
+    if (data.giveCouponTemplate) {
+      couponTemplateList.value = data.giveCouponTemplate
+    }
     recommendOptions.forEach(({ value }) => {
       if (formData.value[value] && !checkboxGroup.value.includes(value)) {
         checkboxGroup.value.push(value)
@@ -189,6 +192,7 @@ const validate = async () => {
       throw new Error('商品其他设置未完善！！')
     } else {
       // 校验通过更新数据
+      formData.value.giveCouponTemplate = couponTemplateList.value
       Object.assign(props.propFormData, formData.value)
     }
   })
diff --git a/src/views/mall/product/spu/form/index.vue b/src/views/mall/product/spu/form/index.vue
index c10c6b83c..3d8c2aff2 100644
--- a/src/views/mall/product/spu/form/index.vue
+++ b/src/views/mall/product/spu/form/index.vue
@@ -62,14 +62,14 @@ const otherSettingsRef = ref() // 其他设置Ref
 // spu 表单数据
 const formData = ref<ProductSpuApi.Spu>({
   name: '', // 商品名称
-  categoryId: null, // 商品分类
+  categoryId: undefined, // 商品分类
   keyword: '', // 关键字
-  unit: null, // 单位
+  unit: undefined, // 单位
   picUrl: '', // 商品封面图
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
-  deliveryTemplateId: null, // 运费模版
-  brandId: null, // 商品品牌
+  deliveryTemplateId: undefined, // 运费模版
+  brandId: undefined, // 商品品牌
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: [
@@ -94,7 +94,8 @@ const formData = ref<ProductSpuApi.Spu>({
   recommendBenefit: false, // 是否优惠
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
-  recommendGood: false // 是否优品
+  recommendGood: false, // 是否优品
+  giveCouponTemplate: [] // 赠送的优惠券
 })
 
 /** 获得详情 */
diff --git a/src/views/mall/product/spu/form/spu.data.ts b/src/views/mall/product/spu/form/spu.data.ts
index 41c43df90..e35042d64 100644
--- a/src/views/mall/product/spu/form/spu.data.ts
+++ b/src/views/mall/product/spu/form/spu.data.ts
@@ -96,7 +96,7 @@ export const otherSettingsSchema = reactive<CrudSchema[]>([
   },
   {
     label: '赠送的优惠劵',
-    field: 'giveCouponTemplateIds'
+    field: 'giveCouponTemplate'
   },
   {
     label: '活动显示排序',
-- 
Gitee


From 01d78429cc68139d87138c66db93f85aec94dc14 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 15:35:01 +0800
Subject: [PATCH 09/13] =?UTF-8?q?SPU:=20=E5=AE=8C=E5=96=84=E4=BC=98?=
 =?UTF-8?q?=E6=83=A0=E5=8D=B7=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |  3 +-
 .../product/spu/form/OtherSettingsForm.vue    | 55 +++++++++++++------
 src/views/mall/product/spu/form/index.vue     |  5 +-
 src/views/mall/product/spu/form/spu.data.ts   |  2 +-
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index d5251630d..0d0d5b00d 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -60,7 +60,8 @@ export interface Spu {
   stock?: number // 商品库存
   createTime?: Date // 商品创建时间
   status?: number // 商品状态
-  giveCouponTemplate?: GiveCouponTemplate[]
+  activityOrders: number[] // 活动排序
+  giveCouponTemplates: GiveCouponTemplate[] // 优惠卷
 }
 
 // 获得 Spu 列表
diff --git a/src/views/mall/product/spu/form/OtherSettingsForm.vue b/src/views/mall/product/spu/form/OtherSettingsForm.vue
index 033806b69..d7217cfee 100644
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
@@ -44,7 +44,7 @@
         <!--   TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
         <el-form-item label="活动优先级">
           <el-tag
-            v-for="type in getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM)"
+            v-for="type in promotionTypes"
             :key="type.value as number"
             :type="type.colorType"
             class="mr-[10px]"
@@ -55,7 +55,11 @@
       </el-col>
       <el-col :span="24">
         <el-form-item label="赠送优惠劵">
-          <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+          <el-tag
+            v-for="coupon in formData.giveCouponTemplates"
+            :key="coupon.id as number"
+            class="mr-[10px]"
+          >
             {{ coupon.name }}
           </el-tag>
           <el-button @click="openCouponSelect">选择优惠券</el-button>
@@ -67,35 +71,49 @@
   <!-- 情况二：详情 -->
   <Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
     <template #recommendHot="{ row }">
-      {{ row.recommendHot ? '是' : '否' }}
+      <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendHot" />
     </template>
     <template #recommendBenefit="{ row }">
-      {{ row.recommendBenefit ? '是' : '否' }}
+      <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendBenefit" />
     </template>
     <template #recommendBest="{ row }">
-      {{ row.recommendBest ? '是' : '否' }}
+      <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendBest" />
     </template>
     <template #recommendNew="{ row }">
-      {{ row.recommendNew ? '是' : '否' }}
+      <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendNew" />
     </template>
     <template #recommendGood="{ row }">
-      {{ row.recommendGood ? '是' : '否' }}
+      <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendGood" />
+    </template>
+    <template #activityOrders="{ row }">
+      <el-tag
+        v-for="activityType in row.activityOrders"
+        :key="activityType"
+        :type="promotionTypes.find((item) => item.value === activityType)?.colorType"
+        class="mr-[10px]"
+      >
+        {{ promotionTypes.find((item) => item.value === activityType)?.label }}
+      </el-tag>
     </template>
-    <template #activityOrders>
-      <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+    <template #giveCouponTemplates="{ row }">
+      <el-tag
+        v-for="coupon in row.giveCouponTemplates"
+        :key="coupon.id as number"
+        class="mr-[10px]"
+      >
         {{ coupon.name }}
       </el-tag>
     </template>
   </Descriptions>
-  <CouponSelect ref="couponSelectRef" v-model:multiple-selection="couponTemplateList" />
+  <CouponSelect ref="couponSelectRef" v-model:multiple-selection="formData.giveCouponTemplates" />
 </template>
 <script lang="ts" setup>
-import type { GiveCouponTemplate, Spu } from '@/api/mall/product/spu'
+import type { Spu } from '@/api/mall/product/spu'
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 import { otherSettingsSchema } from './spu.data'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
 import CouponSelect from './CouponSelect.vue'
 
 defineOptions({ name: 'OtherSettingsForm' })
@@ -112,12 +130,16 @@ const props = defineProps({
   activeName: propTypes.string.def(''),
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
+
+// 优惠卷
 const couponSelectRef = ref() // 优惠卷模版选择 Ref
-const couponTemplateList = ref<GiveCouponTemplate[]>([]) // 选择的优惠卷
 const openCouponSelect = () => {
   couponSelectRef.value?.open()
 }
 
+// 活动优先级处理
+const promotionTypes = ref<DictDataType[]>(getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM))
+
 const otherSettingsFormRef = ref() // 表单Ref
 // 表单数据
 const formData = ref<Spu>({
@@ -129,7 +151,8 @@ const formData = ref<Spu>({
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
   recommendGood: false, // 是否优品
-  giveCouponTemplate: [] // 赠送的优惠券
+  activityOrders: [], // 活动排序
+  giveCouponTemplates: [] // 赠送的优惠券
 })
 // 表单规则
 const rules = reactive({
@@ -163,9 +186,6 @@ watch(
       return
     }
     copyValueToTarget(formData.value, data)
-    if (data.giveCouponTemplate) {
-      couponTemplateList.value = data.giveCouponTemplate
-    }
     recommendOptions.forEach(({ value }) => {
       if (formData.value[value] && !checkboxGroup.value.includes(value)) {
         checkboxGroup.value.push(value)
@@ -192,7 +212,6 @@ const validate = async () => {
       throw new Error('商品其他设置未完善！！')
     } else {
       // 校验通过更新数据
-      formData.value.giveCouponTemplate = couponTemplateList.value
       Object.assign(props.propFormData, formData.value)
     }
   })
diff --git a/src/views/mall/product/spu/form/index.vue b/src/views/mall/product/spu/form/index.vue
index 3d8c2aff2..4b122a367 100644
--- a/src/views/mall/product/spu/form/index.vue
+++ b/src/views/mall/product/spu/form/index.vue
@@ -95,7 +95,8 @@ const formData = ref<ProductSpuApi.Spu>({
   recommendBest: false, // 是否精品
   recommendNew: false, // 是否新品
   recommendGood: false, // 是否优品
-  giveCouponTemplate: [] // 赠送的优惠券
+  activityOrders: [], // 活动排序
+  giveCouponTemplates: [] // 赠送的优惠券
 })
 
 /** 获得详情 */
@@ -109,7 +110,7 @@ const getDetail = async () => {
     try {
       const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
       res.skus?.forEach((item) => {
-        if (isDetail.value === true) {
+        if (isDetail.value) {
           item.price = floatToFixed2(item.price)
           item.marketPrice = floatToFixed2(item.marketPrice)
           item.costPrice = floatToFixed2(item.costPrice)
diff --git a/src/views/mall/product/spu/form/spu.data.ts b/src/views/mall/product/spu/form/spu.data.ts
index e35042d64..8900efde6 100644
--- a/src/views/mall/product/spu/form/spu.data.ts
+++ b/src/views/mall/product/spu/form/spu.data.ts
@@ -96,7 +96,7 @@ export const otherSettingsSchema = reactive<CrudSchema[]>([
   },
   {
     label: '赠送的优惠劵',
-    field: 'giveCouponTemplate'
+    field: 'giveCouponTemplates'
   },
   {
     label: '活动显示排序',
-- 
Gitee


From 1e8945de63f398fd2284843c5a70283b3ea18bf6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 16:36:50 +0800
Subject: [PATCH 10/13] =?UTF-8?q?SPU:=20=E6=96=B0=E5=A2=9E=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E6=B4=BB=E5=8A=A8=E4=BC=98=E5=85=88=E7=BA=A7=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  2 +-
 package.json                                  |  4 +-
 .../product/spu/form/ActivityOrdersSort.vue   | 59 +++++++++++++++++++
 .../product/spu/form/OtherSettingsForm.vue    | 14 ++---
 4 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 src/views/mall/product/spu/form/ActivityOrdersSort.vue

diff --git a/.env b/.env
index 3c5303b5b..c079b1536 100644
--- a/.env
+++ b/.env
@@ -11,7 +11,7 @@ VITE_OPEN=true
 VITE_APP_TENANT_ENABLE=true
 
 # 验证码的开关
-VITE_APP_CAPTCHA_ENABLE=true
+VITE_APP_CAPTCHA_ENABLE=false
 
 # 百度统计
 VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
diff --git a/package.json b/package.json
index 22334907b..5bbf4fd8e 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "pinia": "^2.1.6",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
+    "sortablejs": "^1.15.0",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
     "video.js": "^7.21.5",
@@ -82,10 +83,11 @@
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.2",
     "@types/qs": "^6.9.8",
+    "@types/sortablejs": "^1.15.4",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "@unocss/transformer-variant-group": "^0.56.1",
     "@unocss/eslint-config": "^0.56.1",
+    "@unocss/transformer-variant-group": "^0.56.1",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
diff --git a/src/views/mall/product/spu/form/ActivityOrdersSort.vue b/src/views/mall/product/spu/form/ActivityOrdersSort.vue
new file mode 100644
index 000000000..eb524860b
--- /dev/null
+++ b/src/views/mall/product/spu/form/ActivityOrdersSort.vue
@@ -0,0 +1,59 @@
+<template>
+  <div ref="elTagWrappingRef">
+    <template v-if="activityOrders && activityOrders.length > 0">
+      <el-tag
+        v-for="activityType in activityOrders"
+        :key="activityType"
+        :type="promotionTypes.find((item) => item.value === activityType)?.colorType"
+        class="mr-[10px]"
+      >
+        {{ promotionTypes.find((item) => item.value === activityType)?.label }}
+      </el-tag>
+    </template>
+    <template v-else>
+      <el-tag
+        v-for="type in promotionTypes"
+        :key="type.value as number"
+        :type="type.colorType"
+        class="mr-[10px]"
+      >
+        {{ type.label }}
+      </el-tag>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import Sortable from 'sortablejs'
+import type { DictDataType } from '@/utils/dict'
+
+defineOptions({ name: 'ActivityOrdersSort' })
+const props = defineProps<{
+  promotionTypes: DictDataType[]
+  activityOrders: number[]
+}>()
+const emit = defineEmits<{
+  (e: 'update:activityOrders', v: number[])
+}>()
+const elTagWrappingRef = ref() // elTag 容器 Ref
+
+const initSortable = () => {
+  new Sortable(elTagWrappingRef.value, {
+    swapThreshold: 1,
+    animation: 150,
+    onEnd: (el) => {
+      const innerText = el.to.innerText
+      // 将字符串按换行符分割成数组
+      const activityOrder = innerText.split('\n')
+      // 根据字符串中的顺序重新排序数组
+      const sortedActivityOrder = activityOrder.map((activityName) => {
+        return props.promotionTypes.find((item) => item.label === activityName)?.value
+      })
+      emit('update:activityOrders', sortedActivityOrder as number[])
+    }
+  })
+}
+onMounted(async () => {
+  await nextTick()
+  initSortable()
+})
+</script>
diff --git a/src/views/mall/product/spu/form/OtherSettingsForm.vue b/src/views/mall/product/spu/form/OtherSettingsForm.vue
index d7217cfee..24498860a 100644
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
@@ -41,16 +41,11 @@
         </el-form-item>
       </el-col>
       <el-col :span="24">
-        <!--   TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
         <el-form-item label="活动优先级">
-          <el-tag
-            v-for="type in promotionTypes"
-            :key="type.value as number"
-            :type="type.colorType"
-            class="mr-[10px]"
-          >
-            {{ type.label }}
-          </el-tag>
+          <ActivityOrdersSort
+            v-model:activity-orders="formData.activityOrders"
+            :promotion-types="promotionTypes"
+          />
         </el-form-item>
       </el-col>
       <el-col :span="24">
@@ -115,6 +110,7 @@ import { copyValueToTarget } from '@/utils'
 import { otherSettingsSchema } from './spu.data'
 import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
 import CouponSelect from './CouponSelect.vue'
+import ActivityOrdersSort from './ActivityOrdersSort.vue'
 
 defineOptions({ name: 'OtherSettingsForm' })
 
-- 
Gitee


From 2a150cf0c0b330dc2a4bf331cb83c074c6ba2f42 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 21:42:50 +0800
Subject: [PATCH 11/13] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E5=B7=AE=E5=BC=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/package.json b/package.json
index 37801eef9..e81fe5509 100644
--- a/package.json
+++ b/package.json
@@ -84,10 +84,6 @@
     "@types/qrcode": "^1.5.2",
     "@types/qs": "^6.9.8",
     "@types/sortablejs": "^1.15.4",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "@unocss/eslint-config": "^0.56.1",
-    "@unocss/transformer-variant-group": "^0.56.1",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "@unocss/transformer-variant-group": "^0.56.5",
-- 
Gitee


From 0730e215d89c7de7f5f5e67bffdf61074f855cd1 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 22:16:18 +0800
Subject: [PATCH 12/13] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=20review=20=E6=8F=90=E5=88=B0=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/article/ArticleForm.vue    | 33 +++++++++----------
 src/views/mall/promotion/article/index.vue    | 19 +++++------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue
index 80248f6a6..1e44fad65 100644
--- a/src/views/mall/promotion/article/ArticleForm.vue
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -40,7 +40,6 @@
             <UploadImg v-model="formData.picUrl" height="80px" />
           </el-form-item>
         </el-col>
-        <!-- TODO @puhui999：浏览次数，不能修改 -->
         <el-col :span="12">
           <el-form-item label="排序" prop="sort">
             <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
@@ -59,19 +58,6 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <!-- TODO @puhui999：可以使用 SpuTableSelect -->
-        <el-col :span="12">
-          <el-form-item label="商品关联" prop="spuId">
-            <el-select v-model="formData.spuId" placeholder="请选择">
-              <el-option
-                v-for="item in spuList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
         <el-col :span="12">
           <el-form-item label="是否热门" prop="recommendHot">
             <el-radio-group v-model="formData.recommendHot">
@@ -98,6 +84,14 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
+        <el-col :span="24">
+          <el-form-item label="商品关联" prop="spuId">
+            <el-tag v-if="formData.spuId" class="mr-10px">
+              {{ spuList.find((item) => item.id === formData.spuId)?.name }}
+            </el-tag>
+            <el-button @click="spuSelectRef?.open()">选择商品</el-button>
+          </el-form-item>
+        </el-col>
         <el-col :span="24">
           <el-form-item label="文章内容">
             <Editor v-model="formData.content" height="150px" />
@@ -110,12 +104,14 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <SpuSelect ref="spuSelectRef" @confirm="selectSpu" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import * as ArticleApi from '@/api/mall/promotion/article'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
 import * as ProductSpuApi from '@/api/mall/product/spu'
+import { SpuSelect } from '@/views/mall/promotion/components'
 
 defineOptions({ name: 'PromotionArticleForm' })
 
@@ -135,7 +131,7 @@ const formData = ref({
   introduction: undefined,
   sort: 0,
   status: 0,
-  spuId: undefined,
+  spuId: 0,
   recommendHot: false,
   recommendBanner: false,
   content: undefined
@@ -152,7 +148,10 @@ const formRules = reactive({
   content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-
+const spuSelectRef = ref() // 商品和属性选择 Ref
+const selectSpu = (spuId: number) => {
+  formData.value.spuId = spuId
+}
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -208,7 +207,7 @@ const resetForm = () => {
     introduction: undefined,
     sort: 0,
     status: 0,
-    spuId: undefined,
+    spuId: 0,
     recommendHot: false,
     recommendBanner: false,
     content: undefined
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
index fb5c48d8d..1dc0928d4 100644
--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -78,23 +78,23 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="编号" prop="id" min-width="60" />
-      <el-table-column align="center" label="封面" prop="picUrl" min-width="80">
+      <el-table-column align="center" label="编号" min-width="60" prop="id" />
+      <el-table-column align="center" label="封面" min-width="80" prop="picUrl">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="标题" prop="title" min-width="180" />
-      <el-table-column align="center" label="分类" prop="categoryId" min-width="180">
+      <el-table-column align="center" label="标题" min-width="180" prop="title" />
+      <el-table-column align="center" label="分类" min-width="180" prop="categoryId">
         <template #default="scope">
           {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="浏览量" prop="browseCount" min-width="180" />
-      <el-table-column align="center" label="作者" prop="author" min-width="180" />
-      <el-table-column align="center" label="文章简介" prop="introduction" min-width="250" />
-      <el-table-column align="center" label="排序" prop="sort" min-width="60" />
-      <el-table-column align="center" label="状态" prop="status" min-width="60">
+      <el-table-column align="center" label="浏览量" min-width="180" prop="browseCount" />
+      <el-table-column align="center" label="作者" min-width="180" prop="author" />
+      <el-table-column align="center" label="文章简介" min-width="250" prop="introduction" />
+      <el-table-column align="center" label="排序" min-width="60" prop="sort" />
+      <el-table-column align="center" label="状态" min-width="60" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
@@ -167,7 +167,6 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 /** 文章封面预览 */
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
-- 
Gitee


From 491b3a5018db069f0237473441b1189273ee0f0d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 21 Oct 2023 02:40:20 +0800
Subject: [PATCH 13/13] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20banner=20=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/market/banner/index.ts           |  36 ++++
 src/views/mall/promotion/article/index.vue    |   1 -
 .../promotion/market/banner/BannerForm.vue    | 142 +++++++++++++
 .../mall/promotion/market/banner/index.vue    | 199 ++++++++++++++++++
 4 files changed, 377 insertions(+), 1 deletion(-)
 create mode 100644 src/api/mall/market/banner/index.ts
 create mode 100644 src/views/mall/promotion/market/banner/BannerForm.vue
 create mode 100644 src/views/mall/promotion/market/banner/index.vue

diff --git a/src/api/mall/market/banner/index.ts b/src/api/mall/market/banner/index.ts
new file mode 100644
index 000000000..af96b8f93
--- /dev/null
+++ b/src/api/mall/market/banner/index.ts
@@ -0,0 +1,36 @@
+import request from '@/config/axios'
+
+export interface BannerVO {
+  id: number
+  title: string
+  picUrl: string
+  status: number
+  url: string
+  sort: number
+  memo: string
+}
+
+// 查询Banner管理列表
+export const getBannerPage = async (params) => {
+  return await request.get({ url: `/market/banner/page`, params })
+}
+
+// 查询Banner管理详情
+export const getBanner = async (id: number) => {
+  return await request.get({ url: `/market/banner/get?id=` + id })
+}
+
+// 新增Banner管理
+export const createBanner = async (data: BannerVO) => {
+  return await request.post({ url: `/market/banner/create`, data })
+}
+
+// 修改Banner管理
+export const updateBanner = async (data: BannerVO) => {
+  return await request.put({ url: `/market/banner/update`, data })
+}
+
+// 删除Banner管理
+export const deleteBanner = async (id: number) => {
+  return await request.delete({ url: `/market/banner/delete?id=` + id })
+}
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
index 1dc0928d4..123fdde75 100644
--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -78,7 +78,6 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="编号" min-width="60" prop="id" />
       <el-table-column align="center" label="封面" min-width="80" prop="picUrl">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
diff --git a/src/views/mall/promotion/market/banner/BannerForm.vue b/src/views/mall/promotion/market/banner/BannerForm.vue
new file mode 100644
index 000000000..42405d417
--- /dev/null
+++ b/src/views/mall/promotion/market/banner/BannerForm.vue
@@ -0,0 +1,142 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="Banner标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入Banner标题" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="图片">
+            <UploadImg v-model="formData.picUrl" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="跳转地址" prop="url">
+            <el-input v-model="formData.url" placeholder="请输入跳转地址" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="排序" prop="sort">
+            <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="描述" prop="memo">
+            <el-input v-model="formData.memo" placeholder="请输入描述" type="textarea" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as BannerApi from '@/api/mall/market/banner'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  title: undefined,
+  picUrl: undefined,
+  status: 0,
+  url: undefined,
+  sort: 0,
+  memo: undefined
+})
+const formRules = reactive({
+  title: [{ required: true, message: 'Banner标题不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '图片URL不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }],
+  url: [{ required: true, message: '跳转地址不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await BannerApi.getBanner(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as BannerApi.BannerVO
+    if (formType.value === 'create') {
+      await BannerApi.createBanner(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await BannerApi.updateBanner(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: undefined,
+    picUrl: undefined,
+    status: 0,
+    url: undefined,
+    sort: 0,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/promotion/market/banner/index.vue b/src/views/mall/promotion/market/banner/index.vue
new file mode 100644
index 000000000..6050abb54
--- /dev/null
+++ b/src/views/mall/promotion/market/banner/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="100px"
+    >
+      <el-form-item label="Banner标题" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          class="!w-240px"
+          clearable
+          placeholder="请输入Banner标题"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="活动状态" prop="status">
+        <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"
+            :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-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <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
+          v-hasPermi="['market:banner:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="Banner标题" prop="title" />
+      <el-table-column align="center" label="图片" min-width="80" prop="picUrl">
+        <template #default="{ row }">
+          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
+        </template>
+      </el-table-column>
+      <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 align="center" label="跳转地址" prop="url" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="排序" prop="sort" />
+      <el-table-column align="center" label="描述" prop="memo" />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['market:banner:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['market:banner:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BannerForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as BannerApi from '@/api/mall/market/banner'
+import BannerForm from './BannerForm.vue'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'Banner' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  title: null,
+  status: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 文章封面预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BannerApi.getBannerPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await BannerApi.deleteBanner(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
-- 
Gitee