管理端细节修改

2026-05-07 15:34:38 +08:00
parent ffad9432c5
commit 13bd39fbed
36 changed files with 2915 additions and 1482 deletions
--- a/src/views/order/index/components/GoodsListCollapse.vue
+++ b/src/views/order/index/components/GoodsListCollapse.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="goods_info">
+    <div v-for="(item, index) in showList" :key="item.id || index" class="row">
+      <el-image :src="item.productImg" class="cover" lazy />
+      <div class="info">
+        <div class="name">
+          <span :class="[item.isVip == 1 ? 'colorStyle' : '']">
+            {{ item.productName }}
+          </span>
+          <span v-if="item.refundNum" class="refund">(退 - {{ item.refundNum }})</span>
+        </div>
+        <div class="sku">{{ item.skuName }}</div>
+      </div>
+    </div>
+
+    <div v-if="needShowMore" class="show-more" @click="showAll = !showAll">
+      {{ showAll ? "收起" : "查看全部" }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+// 接收商品列表
+const props = defineProps<{
+  goods: any[];
+}>();
+
+// 组件内部独立状态，自己控制，不影响外部
+const showAll = ref(false);
+
+// 计算需要展示的列表
+const showList = computed(() => {
+  const list = props.goods || [];
+  return showAll.value ? list : list.slice(0, 2);
+});
+
+// 是否需要显示查看更多
+const needShowMore = computed(() => {
+  return (props.goods || []).length > 2;
+});
+</script>
+
+<style scoped lang="scss">
+.goods_info {
+  .row {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &:not(:first-child) {
+      margin-top: 10px;
+    }
+
+    .cover {
+      width: 40px;
+      height: 40px;
+      object-fit: cover;
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      margin-top: 2px;
+      text-align: center;
+
+      .name {
+        font-size: 12px;
+      }
+
+      .sku {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.show-more {
+  color: #1989fa;
+  font-size: 12px;
+  margin-top: 6px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.colorStyle {
+  color: #ffc315;
+}
+
+.refund {
+  color: #ff9731;
+  font-weight: bold;
+}
+</style>
--- a/src/views/order/index/config/config.ts
+++ b/src/views/order/index/config/config.ts
@@ -2,10 +2,10 @@ import type { statusType } from "@/api/order/order";
 export const statusOptions: statusOptions[] = [
  { label: "全部", value: "" },
  { label: "待支付", value: "unpaid" },
-  { label: "制作中", value: "in-production" },
-  { label: "待取餐", value: "wait-out" },
+  // { label: "制作中", value: "in-production" },
+  // { label: "待取餐", value: "wait-out" },
  { label: "订单完成", value: "done" },
-  { label: "申请退单", value: "refunding" },
+  // { label: "申请退单", value: "refunding" },
  { label: "退单", value: "refund" },
  { label: "部分退单", value: "part_refund" },
  { label: "取消订单", value: "cancelled" },
@@ -107,6 +107,14 @@ export function returnOptionsLabel(optionsType: optionsType, value: string | num
  const option = options.find((item) => item.value === value);
  return option ? option.label : "";
 }
+export function returnPayTypeOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType).filter(v => v.value);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}


 export interface options {
--- a/src/views/order/index/config/content.ts
+++ b/src/views/order/index/config/content.ts
@@ -86,6 +86,14 @@ const contentConfig: IContentConfig = {
      prop: "payAmount",
      width: 120,
    },
+    {
+      label: "支付方式",
+      align: "center",
+      prop: "payType",
+      width: 120,
+      templet: "custom",
+      slotName: "payType",
+    },
    {
      label: "订单金额 (扣除各类折扣)",
      align: "center",
--- a/src/views/order/index/index.vue
+++ b/src/views/order/index/index.vue
@@ -2,19 +2,37 @@
  <div class="app-container">
    <!-- 列表 -->
    <!-- 搜索 -->
-    <page-search ref="searchRef" :search-config="searchConfig" :isOpenAutoSearch="true" @query-click="handleQueryClick"
-      @reset-click="handleResetClick" />
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      :isOpenAutoSearch="true"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
    <!-- 列表 -->
-    <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
-      @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
-      @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
      <template #originAmount="scope">
        {{ returnOriginAmount(scope.row) }}
      </template>

      <template #orderNo="scope">
        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-          <el-tooltip class="box-item" effect="dark" :content="scope.row.orderNo" placement="top-start">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="scope.row.orderNo"
+            placement="top-start"
+          >
            {{ scope.row.orderNo }}
          </el-tooltip>
        </div>
@@ -26,7 +44,7 @@
        </el-tag>
      </template>
      <template #goods="scope">
-        <div class="goods_info">
+        <!-- <div class="goods_info">
          <div v-for="item in scope.row.goods" :key="item.id" class="row">
            <el-image :src="item.productImg" class="cover" lazy />
            <div class="info">
@@ -39,7 +57,8 @@
              <div class="sku">{{ item.skuName }}</div>
            </div>
          </div>
-        </div>
+        </div> -->
+        <GoodsListCollapse :goods="scope.row.goods" />
      </template>
      <template #table="scope">
        <div>
@@ -47,14 +66,14 @@
            名称：
            <el-tag type="primary">{{ scope.row.tableName || "无" }}</el-tag>
          </p>
-          <p v-if="scope.row.tableCode">编号：{{ scope.row.tableCode }}</p>
+          <!-- <p v-if="scope.row.tableCode">编号：{{ scope.row.tableCode }}</p> -->
        </div>
      </template>

      <!-- 打印状态 -->
      <template #printStatus="scope">
        <span v-if="scope.row.printStatus.length > 0" style="color: var(--el-color-danger)">
-          打印失败（{{scope.row.printStatus.map(item => item.name).join('、')}}）
+          打印失败（{{ scope.row.printStatus.map((item) => item.name).join("、") }}）
        </span>
      </template>

@@ -68,14 +87,25 @@
      </template>
      <template #mobile="scope">
        <el-text>{{ scope.row[scope.prop] }}</el-text>
-        <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+      <template #payType="scope">
+        {{ returnPayTypeOptionsLabel(scope.prop, scope.row[scope.prop]) }}
      </template>
      <template #operate="scope">
        <div>
          <el-button link @click="printOrderHandle(scope.row)">打印</el-button>
          <el-button link @click="showdetail(scope.row)">详情</el-button>
-          <el-button v-if="scope.row.status == 'done'" link>开票</el-button>
-          <el-button v-if="scope.row.status == 'unpaid'" type="primary" @click="toPayOrder(scope.row)">
+          <!-- <el-button v-if="scope.row.status == 'done'" link>开票</el-button> -->
+          <el-button
+            v-if="scope.row.status == 'unpaid'"
+            type="primary"
+            @click="toPayOrder(scope.row)"
+          >
            结账
          </el-button>
        </div>
@@ -91,7 +121,11 @@
    </page-modal>

    <!-- 编辑 -->
-    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    >
      <template #url="scope">
        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
@@ -111,8 +145,8 @@ import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
-import { returnOptionsLabel } from "./config/config";
-
+import { returnOptionsLabel, returnPayTypeOptionsLabel } from "./config/config";
+import GoodsListCollapse from "./components/GoodsListCollapse.vue";
 const {
  searchRef,
  contentRef,
@@ -161,7 +195,7 @@ async function printOrderHandle(order: getListResponse) {
  try {
    await orderApi.printOrder({
      id: order.id,
-      type: 0
+      type: 0,
    });
    ElMessage.success("打印成功");
  } catch (error) {
@@ -370,7 +404,7 @@ function showdetail(row: OrderInfoVo) {
    left: 36%;
    padding: 18px;

-    >div:first-child {
+    > div:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
@@ -381,7 +415,7 @@ function showdetail(row: OrderInfoVo) {
      transform: translateX(-80px);
    }

-    >div:last-child {
+    > div:last-child {
      text-align: center;
    }
  }