修复订单商品页面

.env.development

@@ -1,2 +1,2 @@
 VITE_APP_NAME=后台管理(开发环境)
-#VITE_API_URL=http://127.0.0.1:9200/api
+VITE_API_URL=http://127.0.0.1:9200/api

src/api/shop/shopOrderGoods/index.ts

@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { ShopOrderGoods, ShopOrderGoodsParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询商品信息
+ */
+export async function pageShopOrderGoods(params: ShopOrderGoodsParam) {
+  const res = await request.get<ApiResult<PageResult<ShopOrderGoods>>>(
+    MODULES_API_URL + '/shop/shop-order-goods/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询商品信息列表
+ */
+export async function listShopOrderGoods(params?: ShopOrderGoodsParam) {
+  const res = await request.get<ApiResult<ShopOrderGoods[]>>(
+    MODULES_API_URL + '/shop/shop-order-goods',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加商品信息
+ */
+export async function addShopOrderGoods(data: ShopOrderGoods) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-order-goods',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改商品信息
+ */
+export async function updateShopOrderGoods(data: ShopOrderGoods) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-order-goods',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除商品信息
+ */
+export async function removeShopOrderGoods(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-order-goods/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除商品信息
+ */
+export async function removeBatchShopOrderGoods(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-order-goods/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询商品信息
+ */
+export async function getShopOrderGoods(id: number) {
+  const res = await request.get<ApiResult<ShopOrderGoods>>(
+    MODULES_API_URL + '/shop/shop-order-goods/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/shop/shopOrderGoods/model/index.ts

@@ -0,0 +1,71 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 商品信息
+ */
+export interface ShopOrderGoods {
+  // 自增ID
+  id?: number;
+  // 关联订单表id
+  orderId?: number;
+  // 订单标识
+  orderCode?: string;
+  // 关联商户ID
+  merchantId?: number;
+  // 商户名称
+  merchantName?: string;
+  // 商品封面图
+  image?: string;
+  // 关联商品id
+  goodsId?: number;
+  // 商品名称
+  goodsName?: string;
+  // 商品规格
+  spec?: string;
+  //
+  skuId?: number;
+  // 单价
+  price?: string;
+  // 购买数量
+  totalNum?: number;
+  // 0 未付款 1已付款，2无需付款或占用状态
+  payStatus?: number;
+  // 0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款
+  orderStatus?: number;
+  // 是否免费：0收费、1免费
+  isFree?: string;
+  // 系统版本 0当前版本 其他版本
+  version?: number;
+  // 预约时间段
+  timePeriod?: string;
+  // 预定日期
+  dateTime?: string;
+  // 开场时间
+  startTime?: string;
+  // 结束时间
+  endTime?: string;
+  // 毫秒时间戳
+  timeFlag?: string;
+  // 过期时间
+  expirationTime?: string;
+  // 备注
+  comments?: string;
+  // 用户id
+  userId?: number;
+  // 租户id
+  tenantId?: number;
+  // 更新时间
+  updateTime?: string;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 商品信息搜索条件
+ */
+export interface ShopOrderGoodsParam extends PageParam {
+  id?: number;
+  orderId?: number;
+  orderNo?: string;
+  keywords?: string;
+}

src/views/shop/shopOrder/components/bszxPayEdit.vue

@@ -1,249 +0,0 @@
-<!-- 编辑弹窗 -->
-<template>
-  <ele-modal
-    :width="800"
-    :visible="visible"
-    :maskClosable="false"
-    :maxable="maxable"
-    :title="isUpdate ? '编辑捐款记录' : '添加捐款记录'"
-    :body-style="{ paddingBottom: '28px' }"
-    @update:visible="updateVisible"
-    @ok="save"
-  >
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
-      :wrapper-col="
-        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
-      "
-    >
-      <a-form-item label="年龄" name="age">
-        <a-input
-          allow-clear
-          placeholder="请输入年龄"
-          v-model:value="form.age"
-        />
-      </a-form-item>
-      <a-form-item label="姓名" name="name">
-        <a-input
-          allow-clear
-          placeholder="请输入姓名"
-          v-model:value="form.name"
-        />
-      </a-form-item>
-      <a-form-item label="性别 1男 2女" name="sex">
-        <a-input
-          allow-clear
-          placeholder="请输入性别 1男 2女"
-          v-model:value="form.sex"
-        />
-      </a-form-item>
-      <a-form-item label="手机号码" name="phone">
-        <a-input
-          allow-clear
-          placeholder="请输入手机号码"
-          v-model:value="form.phone"
-        />
-      </a-form-item>
-      <a-form-item label="班级" name="className">
-        <a-input
-          allow-clear
-          placeholder="请输入班级"
-          v-model:value="form.className"
-        />
-      </a-form-item>
-      <a-form-item label="年级" name="gradeName">
-        <a-input
-          allow-clear
-          placeholder="请输入年级"
-          v-model:value="form.gradeName"
-        />
-      </a-form-item>
-      <a-form-item label="居住地址" name="address">
-        <a-input
-          allow-clear
-          placeholder="请输入居住地址"
-          v-model:value="form.address"
-        />
-      </a-form-item>
-      <a-form-item label="工作单位" name="workUnit">
-        <a-input
-          allow-clear
-          placeholder="请输入工作单位"
-          v-model:value="form.workUnit"
-        />
-      </a-form-item>
-      <a-form-item label="职务" name="position">
-        <a-input
-          allow-clear
-          placeholder="请输入职务"
-          v-model:value="form.position"
-        />
-      </a-form-item>
-      <a-form-item label="捐赠证书" name="certificate">
-        <a-input
-          allow-clear
-          placeholder="请输入捐赠证书"
-          v-model:value="form.certificate"
-        />
-      </a-form-item>
-      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
-        <a-input-number
-          :min="0"
-          :max="9999"
-          class="ele-fluid"
-          placeholder="请输入排序号"
-          v-model:value="form.sortNumber"
-        />
-      </a-form-item>
-      <a-form-item label="备注" name="comments">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入描述"
-          v-model:value="form.comments"
-        />
-      </a-form-item>
-      <a-form-item label="状态" name="status">
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
-        </a-radio-group>
-      </a-form-item>
-    </a-form>
-  </ele-modal>
-</template>
-
-<script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
-  import { addBszxPay, updateBszxPay } from '@/api/bszx/bszxPay';
-  import { BszxPay } from '@/api/bszx/bszxPay/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-
-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-
-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 修改回显的数据
-    data?: BszxPay | null;
-  }>();
-
-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
-
-  // 提交状态
-  const loading = ref(false);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
-
-  // 用户信息
-  const form = reactive<BszxPay>({
-    id: undefined,
-    age: undefined,
-    name: undefined,
-    sex: undefined,
-    phone: undefined,
-    className: undefined,
-    gradeName: undefined,
-    address: undefined,
-    workUnit: undefined,
-    position: undefined,
-    number: undefined,
-    extra: undefined,
-    dateTime: undefined,
-    certificate: undefined,
-    formData: undefined,
-    formId: undefined,
-    userId: undefined,
-    comments: undefined,
-    status: undefined,
-    deleted: undefined,
-    tenantId: undefined,
-    createTime: undefined,
-    sortNumber: 100
-  });
-
-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
-
-  // 表单验证规则
-  const rules = reactive({
-    appBszxPayName: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写应用-百色中学-捐款记录名称',
-        trigger: 'blur'
-      }
-    ]
-  });
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
-    }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form
-        };
-        const saveOrUpdate = isUpdate.value ? updateBszxPay : addBszxPay;
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-      })
-      .catch(() => {});
-  };
-
-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        images.value = [];
-        if (props.data) {
-          assignObject(form, props.data);
-          isUpdate.value = true;
-        } else {
-          isUpdate.value = false;
-        }
-      } else {
-        resetFields();
-      }
-    },
-    { immediate: true }
-  );
-</script>

src/views/shop/shopOrder/components/orderInfo.vue

@@ -97,7 +97,7 @@
               已核销
             </a-tooltip>
           </a-tag>
-          <a-tag v-if="form.deliveryStatus == 30" color="bule">部分核销</a-tag>
+          <a-tag v-if="form.deliveryStatus == 30" color="blue">部分核销</a-tag>
         </a-descriptions-item>
         <!-- 第五排-->
         <a-descriptions-item
@@ -178,6 +178,13 @@
                 <IdcardOutlined class="tag-icon"/>
                 IC季卡
               </a-tag>
+              <a-tag v-if="form.payType == 18">
+                <IdcardOutlined class="tag-icon"/>
+                代付
+              </a-tag>
+            </template>
+            <template v-else>
+              <span class="text-gray-400">未支付</span>
             </template>
           </a-tooltip>
         </a-descriptions-item>
@@ -219,7 +226,7 @@
     <a-card class="order-card" :bordered="false">
       <a-spin :spinning="loading">
         <a-table
-          :data-source="orderInfo"
+          :data-source="orderGoods"
           :columns="columns"
           :pagination="false"
         />
@@ -236,13 +243,16 @@ import {ColumnItem} from 'ele-admin-pro/es/ele-pro-table/types';
 import {
   CheckOutlined,
   CloseOutlined,
-  CoffeeOutlined
+  CoffeeOutlined,
+  WechatOutlined,
+  AlipayCircleOutlined,
+  IdcardOutlined
 } from '@ant-design/icons-vue';
 import {ShopOrder} from '@/api/shop/shopOrder/model';
 import {BszxPay} from '@/api/bszx/bszxPay/model';
-import {pageBszxPay} from '@/api/bszx/bszxPay';
 import {toDateString} from 'ele-admin-pro';
 import {copyText} from "@/utils/common";
+import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
 
 const useForm = Form.useForm;
 
@@ -264,7 +274,7 @@ const isUpdate = ref(false);
 // 是否显示最大化切换按钮
 const maxAble = ref(true);
 // 订单信息
-const orderInfo = ref<BszxPay[]>([]);
+const orderGoods = ref<BszxPay[]>([]);
 
 // 步骤条
 const steps = ref<step[]>([
@@ -447,15 +457,26 @@ const updateVisible = (value: boolean) => {
 const columns = ref<ColumnItem[]>([
   {
     title: '商品名称',
-    dataIndex: 'formName',
-    key: 'formName',
+    dataIndex: 'goodsName',
+    key: 'goodsName',
     align: 'center',
     width: 280
   },
   {
     title: '金额',
     dataIndex: 'price',
-    align: 'center'
+    align: 'center',
+    customRender: ({ record }) => {
+      return `￥${record.price || 0}`;
+    }
+  },
+  {
+    title: '数量',
+    dataIndex: 'quantity',
+    align: 'center',
+    customRender: ({ record }) => {
+      return record.quantity || 1;
+    }
   },
   {
     title: '备注',
@@ -464,9 +485,12 @@ const columns = ref<ColumnItem[]>([
     align: 'center'
   },
   {
-    title: '操作',
+    title: '是否免费',
     dataIndex: 'isFree',
-    align: 'center'
+    align: 'center',
+    customRender: ({ record }) => {
+      return record.isFree ? '是' : '否';
+    }
   }
 ]);
 
@@ -532,7 +556,7 @@ const loadSteps = (order) => {
 // const getOrderInfo = () => {
 //   const orderId = props.data?.orderId;
 //   listOrderInfo({ orderId }).then((data) => {
-//     orderInfo.value = data.filter((d) => d.totalNum > 0);
+//     orderGoods.value = data.filter((d) => d.totalNum > 0);
 //   });
 // };
 
@@ -547,16 +571,29 @@ watch(
       if (props.data) {
         loading.value = true;
         assignObject(form, props.data);
-        pageBszxPay({orderNo: form.orderNo}).then((res) => {
-          if (res?.list) {
-            orderInfo.value = res?.list;
-          }
+
+        // 加载订单商品
+        if (form.orderId) {
+          listShopOrderGoods({orderId: form.orderId})
+            .then((data) => {
+              orderGoods.value = data || [];
+            })
+            .catch((error) => {
+              console.error('加载订单商品失败:', error);
+              orderGoods.value = [];
+            })
+            .finally(() => {
               loading.value = false;
             });
+        } else {
+          loading.value = false;
+        }
+
         loadSteps(props.data);
       }
     } else {
       resetFields();
+      orderGoods.value = [];
     }
   }
 );

src/views/shop/shopOrder/index.vue

@@ -1,8 +1,5 @@
 <template>
   <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
-    <template #extra>
-      <Extra/>
-    </template>
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
       <ele-pro-table
         ref="tableRef"
@@ -106,12 +103,9 @@ import type {
 } from 'ele-admin-pro/es/ele-pro-table/types';
 import Search from './components/search.vue';
 import {getPageTitle} from "@/utils/common";
-import Extra from "@/views/bszx/extra.vue";
-import {pageBszxOrder} from "@/api/bszx/bszxOrder";
 import OrderInfo from './components/orderInfo.vue';
 import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
-import {repairOrder, updateShopOrder} from "@/api/shop/shopOrder";
-import {message} from "ant-design-vue";
+import {pageShopOrder, repairOrder} from "@/api/shop/shopOrder";
 import {updateUser} from "@/api/system/user";
 import {getPayType} from '@/utils/shop';
 
@@ -140,7 +134,7 @@ const datasource: DatasourceFunction = ({
   if (filters) {
     where.status = filters.status;
   }
-  return pageBszxOrder({
+  return pageShopOrder({
     ...where,
     ...orders,
     page,
@@ -157,18 +151,6 @@ const columns = ref<ColumnItem[]>([
     align: 'center',
     width: 200,
   },
-  {
-    title: '姓名',
-    dataIndex: 'realName',
-    key: 'realName',
-    align: 'center'
-  },
-  {
-    title: '手机号码',
-    dataIndex: 'phone',
-    key: 'phone',
-    align: 'center'
-  },
   {
     title: '实付金额',
     dataIndex: 'payPrice',

src/views/shop/shopOrderGoods/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/shopOrderGoods/components/shopOrderGoodsEdit.vue

@@ -0,0 +1,359 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商品信息' : '添加商品信息'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="关联订单表id" name="orderId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联订单表id"
+          v-model:value="form.orderId"
+        />
+      </a-form-item>
+      <a-form-item label="订单标识" name="orderCode">
+        <a-input
+          allow-clear
+          placeholder="请输入订单标识"
+          v-model:value="form.orderCode"
+        />
+      </a-form-item>
+      <a-form-item label="关联商户ID" name="merchantId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联商户ID"
+          v-model:value="form.merchantId"
+        />
+      </a-form-item>
+      <a-form-item label="商户名称" name="merchantName">
+        <a-input
+          allow-clear
+          placeholder="请输入商户名称"
+          v-model:value="form.merchantName"
+        />
+      </a-form-item>
+        <a-form-item
+          label="商品封面图"
+          name="image">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseImage"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+      <a-form-item label="关联商品id" name="goodsId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联商品id"
+          v-model:value="form.goodsId"
+        />
+      </a-form-item>
+      <a-form-item label="商品名称" name="goodsName">
+        <a-input
+          allow-clear
+          placeholder="请输入商品名称"
+          v-model:value="form.goodsName"
+        />
+      </a-form-item>
+      <a-form-item label="商品规格" name="spec">
+        <a-input
+          allow-clear
+          placeholder="请输入商品规格"
+          v-model:value="form.spec"
+        />
+      </a-form-item>
+      <a-form-item label="" name="skuId">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.skuId"
+        />
+      </a-form-item>
+      <a-form-item label="单价" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入单价"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="购买数量" name="totalNum">
+        <a-input
+          allow-clear
+          placeholder="请输入购买数量"
+          v-model:value="form.totalNum"
+        />
+      </a-form-item>
+      <a-form-item label="0 未付款 1已付款，2无需付款或占用状态" name="payStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入0 未付款 1已付款，2无需付款或占用状态"
+          v-model:value="form.payStatus"
+        />
+      </a-form-item>
+      <a-form-item label="0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款" name="orderStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
+          v-model:value="form.orderStatus"
+        />
+      </a-form-item>
+      <a-form-item label="是否免费：0收费、1免费" name="isFree">
+        <a-input
+          allow-clear
+          placeholder="请输入是否免费：0收费、1免费"
+          v-model:value="form.isFree"
+        />
+      </a-form-item>
+      <a-form-item label="系统版本 0当前版本 其他版本" name="version">
+        <a-input
+          allow-clear
+          placeholder="请输入系统版本 0当前版本 其他版本"
+          v-model:value="form.version"
+        />
+      </a-form-item>
+      <a-form-item label="预约时间段" name="timePeriod">
+        <a-input
+          allow-clear
+          placeholder="请输入预约时间段"
+          v-model:value="form.timePeriod"
+        />
+      </a-form-item>
+      <a-form-item label="预定日期" name="dateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入预定日期"
+          v-model:value="form.dateTime"
+        />
+      </a-form-item>
+      <a-form-item label="开场时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入开场时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="结束时间" name="endTime">
+        <a-input
+          allow-clear
+          placeholder="请输入结束时间"
+          v-model:value="form.endTime"
+        />
+      </a-form-item>
+      <a-form-item label="毫秒时间戳" name="timeFlag">
+        <a-input
+          allow-clear
+          placeholder="请输入毫秒时间戳"
+          v-model:value="form.timeFlag"
+        />
+      </a-form-item>
+      <a-form-item label="过期时间" name="expirationTime">
+        <a-input
+          allow-clear
+          placeholder="请输入过期时间"
+          v-model:value="form.expirationTime"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="用户id" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户id"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="更新时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入更新时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addShopOrderGoods, updateShopOrderGoods } from '@/api/shop/shopOrderGoods';
+  import { ShopOrderGoods } from '@/api/shop/shopOrderGoods/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ShopOrderGoods | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<ShopOrderGoods>({
+    id: undefined,
+    orderId: undefined,
+    orderCode: undefined,
+    merchantId: undefined,
+    merchantName: undefined,
+    image: undefined,
+    goodsId: undefined,
+    goodsName: undefined,
+    spec: undefined,
+    skuId: undefined,
+    price: undefined,
+    totalNum: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    isFree: undefined,
+    version: undefined,
+    timePeriod: undefined,
+    dateTime: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    timeFlag: undefined,
+    expirationTime: undefined,
+    comments: undefined,
+    userId: undefined,
+    tenantId: undefined,
+    updateTime: undefined,
+    createTime: undefined,
+    shopOrderGoodsId: undefined,
+    shopOrderGoodsName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    shopOrderGoodsName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商品信息名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateShopOrderGoods : addShopOrderGoods;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/shopOrderGoods/index.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="shopOrderGoodsId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ShopOrderGoodsEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import ShopOrderGoodsEdit from './components/shopOrderGoodsEdit.vue';
+  import { pageShopOrderGoods, removeShopOrderGoods, removeBatchShopOrderGoods } from '@/api/shop/shopOrderGoods';
+  import type { ShopOrderGoods, ShopOrderGoodsParam } from '@/api/shop/shopOrderGoods/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<ShopOrderGoods[]>([]);
+  // 当前编辑数据
+  const current = ref<ShopOrderGoods | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageShopOrderGoods({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '自增ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '关联订单表id',
+      dataIndex: 'orderId',
+      key: 'orderId',
+      align: 'center',
+    },
+    {
+      title: '订单标识',
+      dataIndex: 'orderCode',
+      key: 'orderCode',
+      align: 'center',
+    },
+    {
+      title: '关联商户ID',
+      dataIndex: 'merchantId',
+      key: 'merchantId',
+      align: 'center',
+    },
+    {
+      title: '商户名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      align: 'center',
+    },
+    {
+      title: '商品封面图',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+    },
+    {
+      title: '关联商品id',
+      dataIndex: 'goodsId',
+      key: 'goodsId',
+      align: 'center',
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'goodsName',
+      key: 'goodsName',
+      align: 'center',
+    },
+    {
+      title: '商品规格',
+      dataIndex: 'spec',
+      key: 'spec',
+      align: 'center',
+    },
+    {
+      title: '',
+      dataIndex: 'skuId',
+      key: 'skuId',
+      align: 'center',
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center',
+    },
+    {
+      title: '购买数量',
+      dataIndex: 'totalNum',
+      key: 'totalNum',
+      align: 'center',
+    },
+    {
+      title: '0 未付款 1已付款，2无需付款或占用状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      align: 'center',
+    },
+    {
+      title: '0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款',
+      dataIndex: 'orderStatus',
+      key: 'orderStatus',
+      align: 'center',
+    },
+    {
+      title: '是否免费：0收费、1免费',
+      dataIndex: 'isFree',
+      key: 'isFree',
+      align: 'center',
+    },
+    {
+      title: '系统版本 0当前版本 其他版本',
+      dataIndex: 'version',
+      key: 'version',
+      align: 'center',
+    },
+    {
+      title: '预约时间段',
+      dataIndex: 'timePeriod',
+      key: 'timePeriod',
+      align: 'center',
+    },
+    {
+      title: '预定日期',
+      dataIndex: 'dateTime',
+      key: 'dateTime',
+      align: 'center',
+    },
+    {
+      title: '开场时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      align: 'center',
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      align: 'center',
+    },
+    {
+      title: '毫秒时间戳',
+      dataIndex: 'timeFlag',
+      key: 'timeFlag',
+      align: 'center',
+    },
+    {
+      title: '过期时间',
+      dataIndex: 'expirationTime',
+      key: 'expirationTime',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '用户id',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: ShopOrderGoodsParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: ShopOrderGoods) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: ShopOrderGoods) => {
+    const hide = message.loading('请求中..', 0);
+    removeShopOrderGoods(row.shopOrderGoodsId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchShopOrderGoods(selection.value.map((d) => d.shopOrderGoodsId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: ShopOrderGoods) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ShopOrderGoods'
+  };
+</script>
+
+<style lang="less" scoped></style>