From 049a6f74769a64332d1b66f38a8f0b7bacae00e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 26 Jul 2024 02:47:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=95=86=E5=93=81=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E6=94=AF=E6=8C=81=E5=A4=9A=E8=A7=84=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                              |    5 +
 src/api/shop/goods/model/index.ts             |   42 +-
 src/api/shop/goodsSku/model/index.ts          |    1 +
 src/api/shop/goodsSpec/model/index.ts         |    3 +-
 src/api/shop/specValue/model/index.ts         |    1 +
 src/api/system/file/model/index.ts            |    2 +
 src/components/SelectGoodsCategory/index.vue  |    1 +
 .../SelectSpec/components/select-data.vue     |  169 +++
 src/components/SelectSpec/index.vue           |   79 +-
 src/views/booking/goods/add/index.vue         |    2 +-
 .../shop/{goods.bak => demo}/add/index.vue    |    0
 .../components/goodsEdit.vue                  |    0
 .../{goods.bak => demo}/components/search.vue |    0
 src/views/shop/{goods.bak => demo}/index.vue  |    0
 src/views/shop/goods/add/index.vue            | 1046 +++++++++++++++++
 src/views/shop/goods/components/goodsEdit.vue |  765 ++++++++++++
 src/views/shop/goods/components/search.vue    |  145 +++
 src/views/shop/goods/index.vue                |  392 ++++++
 18 files changed, 2594 insertions(+), 59 deletions(-)
 create mode 100644 src/components/SelectSpec/components/select-data.vue
 rename src/views/shop/{goods.bak => demo}/add/index.vue (100%)
 rename src/views/shop/{goods.bak => demo}/components/goodsEdit.vue (100%)
 rename src/views/shop/{goods.bak => demo}/components/search.vue (100%)
 rename src/views/shop/{goods.bak => demo}/index.vue (100%)
 create mode 100644 src/views/shop/goods/add/index.vue
 create mode 100644 src/views/shop/goods/components/goodsEdit.vue
 create mode 100644 src/views/shop/goods/components/search.vue
 create mode 100644 src/views/shop/goods/index.vue

diff --git a/src/api/index.ts b/src/api/index.ts
index 401f07f..a5b707f 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -38,6 +38,11 @@ export interface PageParam {
   companyId?: number;
   // 商户ID
   merchantId?: number;
+  merchantName?: string;
+  categoryIds?: any;
+  // 商品分类
+  categoryId?: number;
+  categoryName?: string;
   // 搜素关键词
   keywords?: string;
   // 起始时间
diff --git a/src/api/shop/goods/model/index.ts b/src/api/shop/goods/model/index.ts
index 759b98c..c3d6839 100644
--- a/src/api/shop/goods/model/index.ts
+++ b/src/api/shop/goods/model/index.ts
@@ -1,6 +1,6 @@
 import type { PageParam } from '@/api';
-import { GoodsSpec } from '@/api/shop/goodsSpec/model';
-import { GoodsSku } from '@/api/shop/goodsSku/model';
+import { GoodsSpec } from "@/api/shop/goodsSpec/model";
+import { GoodsSku } from "@/api/shop/goodsSku/model";
 
 export interface GoodsCount {
   totalNum: number;
@@ -18,59 +18,64 @@ export interface Goods {
   type?: number;
   // 商品编码
   code?: string;
-  // 商品名称
+  // 商品标题
   goodsName?: string;
   // 商品封面图
   image?: string;
   // 商品详情
   content?: string;
-  // 商品附件
-  files?: string;
-  // 分类ID
+  // 商品分类ID
   categoryId?: number;
+  // 一级分类
   categoryParent?: string;
+  // 二级分类
   categoryChildren?: string;
-  // 分类名称
-  categoryName?: string;
-  // 规格
+  // 商品规格 0单规格 1多规格
   specs?: number;
   // 货架
   position?: string;
   // 进货价格
-  price?: number;
+  price?: string;
   // 销售价格
   salePrice?: string;
+  // 库存计算方式(10下单减库存 20付款减库存)
+  deductStockType?: number;
+  // 封面图
+  files?: string;
   // 销量
   sales?: number;
   // 库存
   stock?: number;
   // 商品重量
   goodsWeight?: number;
-  // 库存计算方式
-  deductStockType?: number;
+  // 消费赚取积分
+  gainIntegral?: number;
   // 推荐
   recommend?: number;
-  // 状态, 0正常, 1待修,2异常已修，3异常未修
+  // 商户ID
+  merchantId?: number;
+  // 商户名称
+  merchantName?: string;
+  // 状态（0：未上架，1：上架）
   isShow?: number;
+  // 状态, 0上架 1待上架 2待审核 3审核不通过
   status?: number;
   // 备注
   comments?: string;
   // 排序号
   sortNumber?: number;
-  // 所有人
+  // 用户ID
   userId?: number;
   // 是否删除, 0否, 1是
   deleted?: number;
   // 租户id
   tenantId?: number;
-  // 商户ID
-  merchantId?: number;
-  // 店铺名称
-  merchantName?: string;
   // 创建时间
   createTime?: string;
   // 修改时间
   updateTime?: string;
+  // 显示规格名
+  specName?: string;
   // 商品规格
   goodsSpecs?: GoodsSpec[];
   // 商品sku列表
@@ -89,7 +94,6 @@ export interface BathSet {
  */
 export interface GoodsParam extends PageParam {
   goodsId?: number;
-  status?: number;
   isShow?: number;
   stock?: number;
   keywords?: string;
diff --git a/src/api/shop/goodsSku/model/index.ts b/src/api/shop/goodsSku/model/index.ts
index f3950af..c0a2266 100644
--- a/src/api/shop/goodsSku/model/index.ts
+++ b/src/api/shop/goodsSku/model/index.ts
@@ -36,6 +36,7 @@ export interface GoodsSku {
   tenantId?: number;
   // 创建时间
   createTime?: string;
+  images?: any;
 }
 
 /**
diff --git a/src/api/shop/goodsSpec/model/index.ts b/src/api/shop/goodsSpec/model/index.ts
index 99da558..0d4cfd5 100644
--- a/src/api/shop/goodsSpec/model/index.ts
+++ b/src/api/shop/goodsSpec/model/index.ts
@@ -14,7 +14,7 @@ export interface GoodsSpec {
   specName?: string;
   // 规格值
   valueList?: any[];
-  specValues?: string;
+  specValue?: string;
   // 活动类型 0=商品，1=秒杀，2=砍价，3=拼团
   type?: string;
   // 租户id
@@ -26,5 +26,6 @@ export interface GoodsSpec {
  */
 export interface GoodsSpecParam extends PageParam {
   id?: number;
+  goodsId: number;
   keywords?: string;
 }
diff --git a/src/api/shop/specValue/model/index.ts b/src/api/shop/specValue/model/index.ts
index a794343..eb1e717 100644
--- a/src/api/shop/specValue/model/index.ts
+++ b/src/api/shop/specValue/model/index.ts
@@ -20,6 +20,7 @@ export interface SpecValue {
   label?: string;
   value?: string;
   detail?: [string];
+  specName?: string;
 }
 
 /**
diff --git a/src/api/system/file/model/index.ts b/src/api/system/file/model/index.ts
index bcd0541..1977ed2 100644
--- a/src/api/system/file/model/index.ts
+++ b/src/api/system/file/model/index.ts
@@ -35,6 +35,8 @@ export interface FileRecord {
   createNickname?: string;
   // 是否编辑状态
   isUpdate?: boolean;
+  // 商品SKU索引
+  index?: any;
 }
 
 /**
diff --git a/src/components/SelectGoodsCategory/index.vue b/src/components/SelectGoodsCategory/index.vue
index 9ae183c..9ead2a0 100644
--- a/src/components/SelectGoodsCategory/index.vue
+++ b/src/components/SelectGoodsCategory/index.vue
@@ -47,6 +47,7 @@
   };
 
   const onChange = (item: any, value: ValueType) => {
+    console.log(item,value);
     emit('done', item, value);
   };
 
diff --git a/src/components/SelectSpec/components/select-data.vue b/src/components/SelectSpec/components/select-data.vue
new file mode 100644
index 0000000..64ecc69
--- /dev/null
+++ b/src/components/SelectSpec/components/select-data.vue
@@ -0,0 +1,169 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="specId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'image'">
+          <a-image
+            v-if="record.image"
+            :src="record.image"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'specValue'">
+          <a-space direction="vertical">
+            <template
+              v-for="(item, index) in JSON.parse(record.specValue)"
+              :key="index"
+            >
+              <div class="text-left">
+                <span class="text-gray-400 mr-2">{{ item.value }} :</span>
+                <ele-tag
+                  shape="round"
+                  size="small"
+                  v-for="(sub, subIndex) in item.detail"
+                  :key="subIndex"
+                >
+                  {{ sub }}
+                </ele-tag>
+              </div>
+            </template>
+          </a-space>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-radio @click="onRadio(record)" />
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageSpec } from '@/api/shop/spec';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Spec, SpecParam } from '@/api/shop/spec/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 商户类型
+    shopType?: string;
+    // 修改回显的数据
+    data?: Spec | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Spec): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    },
+    {
+      title: '规格',
+      dataIndex: 'specName',
+      key: 'specName',
+      align: 'center'
+    },
+    {
+      title: '规格值',
+      dataIndex: 'specValue',
+      key: 'specValue'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    if (props.shopType == 'empty') {
+      where.emptyType = true;
+    } else {
+      where.shopType = props.shopType;
+    }
+    return pageSpec({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: SpecParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  const onRadio = (record: Spec) => {
+    updateVisible(false);
+    emit('done', record);
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Spec) => {
+    return {
+      // 行点击事件
+      // onClick: () => {
+      //   updateVisible(false);
+      //   emit('done', record);
+      // },
+      // 行双击事件
+      onDblclick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>
diff --git a/src/components/SelectSpec/index.vue b/src/components/SelectSpec/index.vue
index 515f516..bd3421c 100644
--- a/src/components/SelectSpec/index.vue
+++ b/src/components/SelectSpec/index.vue
@@ -1,58 +1,61 @@
-<!-- 选择下拉框 -->
 <template>
-  <a-select
-    :allow-clear="allowClear"
-    :show-search="showSearch"
-    optionFilterProp="label"
-    :options="specDict"
-    :value="value"
-    :placeholder="placeholder"
-    @update:value="updateValue"
-    :style="`width: ${width}px`"
-    @blur="onBlur"
-    @change="onChange"
-  />
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
   import { Spec } from '@/api/shop/spec/model';
 
-  const props = withDefaults(
+  withDefaults(
     defineProps<{
-      value?: string;
+      value?: any;
+      customerType?: string;
       placeholder?: string;
-      showSearch?: string;
-      allowClear?: boolean;
-      width?: number;
-      specDict?: Spec[];
-      index?: number;
     }>(),
     {
-      placeholder: '请选择服务器厂商'
+      placeholder: '请选择商户'
     }
   );
 
   const emit = defineEmits<{
-    (e: 'update:value', value: string): void;
-    (e: 'blur'): void;
-    (e: 'done', value: Spec, index: number): void;
+    (e: 'done', Merchant): void;
+    (e: 'clear'): void;
   }>();
 
-  /* 更新选中数据 */
-  const updateValue = (value: string) => {
-    emit('update:value', value);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Spec | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Spec) => {
+    current.value = row ?? null;
+    showEdit.value = true;
   };
 
-  /* 失去焦点 */
-  const onBlur = () => {
-    emit('blur');
-  };
-
-  const onChange = (value: string) => {
-    props.specDict?.map((d) => {
-      if (d.value == value) {
-        emit('done', d, Number(props.index));
-      }
-    });
+  const onChange = (row) => {
+    emit('done', row);
   };
 </script>
diff --git a/src/views/booking/goods/add/index.vue b/src/views/booking/goods/add/index.vue
index 79ba709..643c1d2 100644
--- a/src/views/booking/goods/add/index.vue
+++ b/src/views/booking/goods/add/index.vue
@@ -792,7 +792,7 @@
           specId: d.specId,
           name: d.specName,
           value: d.specName,
-          list: d.specValues?.map(v => {
+          list: d.specValue?.map(v => {
             return {
               specId: v.specId,
               specValueId: v.specValueId,
diff --git a/src/views/shop/goods.bak/add/index.vue b/src/views/shop/demo/add/index.vue
similarity index 100%
rename from src/views/shop/goods.bak/add/index.vue
rename to src/views/shop/demo/add/index.vue
diff --git a/src/views/shop/goods.bak/components/goodsEdit.vue b/src/views/shop/demo/components/goodsEdit.vue
similarity index 100%
rename from src/views/shop/goods.bak/components/goodsEdit.vue
rename to src/views/shop/demo/components/goodsEdit.vue
diff --git a/src/views/shop/goods.bak/components/search.vue b/src/views/shop/demo/components/search.vue
similarity index 100%
rename from src/views/shop/goods.bak/components/search.vue
rename to src/views/shop/demo/components/search.vue
diff --git a/src/views/shop/goods.bak/index.vue b/src/views/shop/demo/index.vue
similarity index 100%
rename from src/views/shop/goods.bak/index.vue
rename to src/views/shop/demo/index.vue
diff --git a/src/views/shop/goods/add/index.vue b/src/views/shop/goods/add/index.vue
new file mode 100644
index 0000000..ac07895
--- /dev/null
+++ b/src/views/shop/goods/add/index.vue
@@ -0,0 +1,1046 @@
+<template>
+  <a-page-header
+    :title="isUpdate ? '编辑商品' : '新增商品'"
+    @back="push('/goods/index')"
+  >
+    <div class="ele-cell ele-cell-align-top">
+      <div class="ele-cell-content">
+        <a-form
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          :label-col="{ md: { span: 3 }, sm: { span: 4 }, xs: { span: 24 } }"
+          :wrapper-col="{
+            md: { span: 14 },
+            sm: { span: 24 },
+            xs: { span: 24 }
+          }"
+        >
+          <a-card title="基础信息" :bordered="false" class="goods-form">
+            <a-row :gutter="16">
+              <a-col
+                v-bind="
+                  styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 8 }
+                "
+              >
+                <a-form-item label="选择店铺" name="merchantId" v-if="!form.merchantId">
+                  <SelectMerchant
+                    :placeholder="`选择商户`"
+                    class="input-item"
+                    v-model:value="form.merchantName"
+                    @done="chooseMerchantId"
+                  />
+                </a-form-item>
+                <a-form-item
+                  label="商品类型"
+                  name="type"
+                >
+                  <a-space>
+                    <a-button
+                      :type="form.type == 1 ? 'primary' : ''"
+                      @click="onType(1)"
+                      :ghost="form.type == 1"
+                      >实物商品</a-button
+                    >
+                    <a-button
+                      :type="form.type == 2 ? 'primary' : ''"
+                      @click="onType(2)"
+                      :ghost="form.type == 2"
+                      >虚拟商品</a-button
+                    >
+                  </a-space>
+                  <div class="ele-text-placeholder">
+                    {{ form.type == 1
+                    ? `支持快递邮寄、同城配送或到店自提方式发货`
+                    : '电子券码等，线下到店核销，无需备货' }}
+                  </div>
+                </a-form-item>
+                <a-form-item label="商品分类" name="categoryId">
+                  <SelectGoodsCategory
+                    :data="data"
+                    placeholder="请选择商品分类"
+                    v-model:value="category"
+                    @done="chooseGoodsCategory"
+                  />
+                  <a-space style="margin-top: 10px">
+                    <a @click="openUrl('/goods/category')">去新增</a>
+                  </a-space>
+                </a-form-item>
+                <a-form-item
+                  label="商品图片和视频"
+                  name="images">
+                  <SelectFile
+                    :placeholder="`请选择视频文件`"
+                    :limit="1"
+                    :data="images"
+                    @done="chooseImage"
+                    @del="onDeleteItem"
+                  />
+                  <div class="ele-text-placeholder">上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div>
+                </a-form-item>
+                <a-form-item label="商品名称" name="goodsName">
+                  <a-space style="margin-bottom: 20px">
+                    <a-input
+                      allow-clear
+                      show-count
+                      :maxlength="60"
+                      style="width: 558px"
+                      placeholder="请输入商品名称"
+                      v-model:value="form.goodsName"
+                    />
+                  </a-space>
+                </a-form-item>
+                <a-form-item label="商品卖点" name="comments">
+                  <a-input
+                    allow-clear
+                    :maxlength="60"
+                    style="width: 558px"
+                    placeholder="此款商品美观大方 性价比较高 不容错过"
+                    v-model:value="form.comments"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+          <a-card title="规格售价与库存" :bordered="false" class="goods-form">
+            <a-form-item label="规格类型" name="specs">
+              <a-radio-group v-model:value="form.specs">
+                <a-radio :value="0">单规格</a-radio>
+                <a-radio :value="1">多规格</a-radio>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item label="商品价格" name="price" v-if="form.specs == 0">
+              <a-input-number :placeholder="`商品价格`" style="width: 180px" v-model:value="form.price" />
+              <div class="ele-text-placeholder">商品的实际购买金额，最低0.01</div>
+            </a-form-item>
+            <a-form-item label="划线价格" name="salePrice" v-if="form.specs == 0">
+              <a-input-number :placeholder="`划线价格`" style="width: 180px" v-model:value="form.salePrice" />
+              <div class="ele-text-placeholder">划线价仅用于商品页展示</div>
+            </a-form-item>
+            <a-form-item label="当前库存" name="stock" v-if="form.specs == 0">
+              <a-input-number :placeholder="`划线价格`" style="width: 180px" v-model:value="form.stock" />
+              <div class="ele-text-placeholder">商品的实际库存数量，为0时用户无法下单</div>
+            </a-form-item>
+            <!-- 商品多规格 -->
+            <a-form-item label="商品规格" name="skuList" v-if="form.specs == 1">
+              <template v-for="(item, index) in specList" :key="index">
+                <a-card class="spec-card">
+                  <template #title>
+                  <span style="margin-right: 10px">{{
+                      `属性${index + 1}`
+                    }}</span>
+                    <SelectSpec
+                      placeholder="请选择属性"
+                      :width="130"
+                      :specDict="specDict"
+                      :index="index"
+                      v-model:value="specList[index].specName"
+                      @done="changeAttr"
+                    />
+                  </template>
+                  <template #extra>
+                    <a @click="delAttribute(index)">删除属性</a>
+                  </template>
+                  <!--属性列表-->
+                  <div class="spec-list">
+                    <template v-for="(val,valIndex) in item.valueList" :key="valIndex">
+                      <a-tag color="#108ee9" closable @close="onClose(index,valIndex)">{{ val.specValue }}</a-tag>
+                    </template>
+                    <SelectSpecValue
+                      placeholder="请选择规格值"
+                      :width="130"
+                      :specId="item.specId"
+                      :index="index"
+                      @done="changeAttrValue"
+                    />
+                  </div>
+                </a-card>
+              </template>
+              <a-card :bordered="false" v-if="specList.length < 3">
+                <a @click="addAttribute"
+                ><PlusCircleOutlined style="margin-right: 4px" />创建新属性</a
+                >
+              </a-card>
+              skuList: {{ skuList }}
+              <!--            <a-divider />-->
+              <!--            {{ form.goodsSkus }}-->
+              <a-divider />
+              <!--            {{ skuColumns }}-->
+              <!-- 生生的sku数据 -->
+              <div class="sku-table">
+                <a-table
+                  :pagination="false"
+                  :dataSource="skuList"
+                  :columns="skuColumns"
+                  :scroll="{ y: 500 }"
+                >
+                  <template #bodyCell="{ record, column, index }">
+                    <template v-if="column.key === 'line'">
+                      {{ index + 1 }}
+                    </template>
+                    <template v-if="column.key === 'image'">
+                      <SelectFile
+                        :placeholder="`请选择商品图片`"
+                        :limit="1"
+                        :data="record.images || []"
+                        :index="index"
+                        @done="chooseImageItem"
+                        @del="onDeleteItem"
+                      />
+                    </template>
+                    <template v-if="column.key === 'price'">
+                      <a-input :placeholder="`商品价格`" v-model:value="skuList[index].price" />
+                    </template>
+                    <template v-if="column.key === 'salePrice'">
+                      <a-input :placeholder="`市场价`" v-model:value="record.salePrice" />
+                    </template>
+                    <template v-if="column.key === 'stock'">
+                      <a-input :placeholder="`库存`" v-model:value="record.stock" />
+                    </template>
+                    <template v-if="column.key === 'skuNo'">
+                      <a-input :placeholder="`编码`" v-model:value="record.skuNo" />
+                    </template>
+                  </template>
+                </a-table>
+                <!--              {{ skuColumns }}-->
+              </div>
+              <div class="bath-set">
+                <!--              <h5 class="title">批量设置</h5>-->
+                <a-space class="list">
+                  <a-input
+                    :placeholder="`售卖价`"
+                    v-model:value="bathSet.price"
+                  />
+                  <a-input
+                    :placeholder="`市场价`"
+                    v-model:value="bathSet.salePrice"
+                  />
+                  <a-input :placeholder="`库存`" v-model:value="bathSet.stock" />
+                  <a-input
+                    :placeholder="`规格编码`"
+                    v-model:value="bathSet.skuNo"
+                  />
+                  <a-button type="primary" @click="onBathSet">批量设置</a-button>
+                </a-space>
+              </div>
+            </a-form-item>
+            <a-form-item label="库存计算方式" name="deductStockType">
+              <a-radio-group v-model:value="form.deductStockType">
+                <a-radio :value="10">下单减库存</a-radio>
+                <a-radio :value="20">付款减库存</a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-card>
+
+          <a-card title="商品详情" :bordered="false" class="goods-form">
+            <!-- 编辑器 -->
+            <tinymce-editor
+              ref="editorRef"
+              class="content"
+              v-model:value="content"
+              :disabled="disabled"
+              :init="config"
+              placeholder="图片直接粘贴自动上传"
+              @paste="onPaste"
+            />
+            <div style="margin-top: 20px">
+              <SelectFile
+                :placeholder="`请选择视频文件`"
+                :limit="9"
+                :data="files"
+                @done="chooseFile"
+                @del="onDeleteFile"
+              />
+            </div>
+            <div class="ele-text-placeholder"
+              >最多上传20个素材，拖拽可进行排序，单张图片需限制在10M以内</div
+            >
+          </a-card>
+
+          <a-card title="商品参数" :bordered="false" class="goods-form" />
+
+          <a-card title="更多设置" :bordered="false" class="goods-form" />
+          <a-card :bordered="false" class="goods-form">
+            <a-button type="primary" block size="large" @click="save">保存</a-button>
+          </a-card>
+
+
+          <div class="body-bottom"></div>
+
+
+          <a-card
+            :bordered="false"
+            class="goods-form"
+            style="position: fixed; bottom: 0; opacity: 0.9"
+          >
+<!--              <div style="width: 100px">-->
+<!--                <a-button block danger size="large" @click="save"-->
+<!--                  >删除</a-button-->
+<!--                >-->
+<!--              </div>-->
+              <div style="width: 100px">
+                <a-button type="primary" block size="large" @click="save">保存</a-button>
+              </div>
+<!--              <div style="width: 100px">-->
+<!--                <a-button type="primary" block size="large" @click="save"-->
+<!--                  >上架</a-button-->
+<!--                >-->
+<!--              </div>-->
+          </a-card>
+        </a-form>
+      </div>
+      <!-- 载入模拟器 -->
+      <Simulator :form="form" />
+    </div>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  // 表单数据
+  import useFormData from '@/utils/use-form-data';
+  import { reactive, ref, unref, watch } from 'vue';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { Form, message } from 'ant-design-vue';
+  import { getDictionaryOptions, getMerchantId, openUrl } from "@/utils/common";
+  import { addGoods, updateGoods } from '@/api/shop/goods';
+  import { useRouter } from 'vue-router';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { BathSet, Goods } from '@/api/shop/goods/model';
+  import {PlusCircleOutlined} from '@ant-design/icons-vue';
+  import { getGoods } from '@/api/shop/goods';
+  import { listGoodsCategory } from '@/api/shop/goodsCategory';
+  import { FileRecord } from '@/api/system/file/model';
+  import {toTreeData, uuid} from 'ele-admin-pro';
+  import { ArticleCategory } from '@/api/cms/category/model';
+  import TinymceEditor from "@/components/TinymceEditor/index.vue";
+  import {uploadFile, uploadOss} from "@/api/system/file";
+  import {ColumnItem} from "ele-admin-pro/es/ele-pro-table/types";
+  import {listSpec} from '@/api/shop/spec';
+  import {Spec} from "@/api/shop/spec/model";
+  import { getMerchantName } from "@/utils/merchant";
+  import router from "@/router";
+  import { Merchant } from "@/api/shop/merchant/model";
+
+  const { currentRoute } = useRouter();
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const { push } = useRouter();
+  const useForm = Form.useForm;
+  const fileList = ref<any[]>([]);
+  const files = ref<ItemType[]>([]);
+  const imgList = ref<any[]>([]);
+  const specList = ref<any[]>([]);
+  const skuList = ref<any[]>([]);
+  const specDict = ref<any[]>([]);
+  const disabled = ref(false);
+  const addColumns = ref<ColumnItem[]>([]);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const content = ref('');
+  const loading = ref(false);
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+  const category = ref<string[]>([]);
+  // 树形数据
+  const data = ref<ArticleCategory[]>([]);
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+  // 选中数据
+  const current = ref<ArticleCategory | any>(null);
+  // 字典数据
+  const goodsAttr = getDictionaryOptions('goodsAttr');
+  const index = ref(0);
+
+  const { form, assignFields } = useFormData<Goods>({
+    goodsId: undefined,
+    type: 1,
+    goodsName: '',
+    image: '',
+    content: '',
+    code: '',
+    categoryId: undefined,
+    categoryName: '',
+    categoryParent: '',
+    categoryChildren: '',
+    specs: 0,
+    goodsSkus: [],
+    goodsSpecs: [],
+    position: undefined,
+    price: undefined,
+    salePrice: undefined,
+    sales: undefined,
+    stock: 1000,
+    deductStockType: 20,
+    files: '',
+    comments: '',
+    recommend: 0,
+    sortNumber: undefined,
+    status: undefined,
+    merchantName: '',
+    merchantId: getMerchantId()
+  });
+  const skuColumns = ref<ColumnItem[]>([
+    {
+      dataIndex: 'line',
+      key: 'line'
+    }
+  ]);
+  const defaultColumns = ref<ColumnItem[]>([
+    {
+      title: '预览图',
+      dataIndex: 'image',
+      width: 120,
+      align: 'center',
+      key: 'image'
+    },
+    {
+      title: '商品价格',
+      dataIndex: 'price',
+      width: 120,
+      align: 'center',
+      key: 'price'
+    },
+    {
+      title: '划线价格',
+      dataIndex: 'salePrice',
+      width: 120,
+      align: 'center',
+      key: 'salePrice'
+    },
+    {
+      title: '库存数量',
+      dataIndex: 'stock',
+      width: 120,
+      align: 'center',
+      key: 'stock'
+    },
+    {
+      title: '规格编码',
+      dataIndex: 'skuNo',
+      width: 120,
+      align: 'center',
+      key: 'skuNo'
+    }
+  ]);
+
+  const bathSet = ref<BathSet>({});
+
+  // 表单验证规则
+  const rules = reactive({
+    type: [
+      {
+        required: true,
+        message: '请选择商品类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    specs: [
+      {
+        required: true,
+        message: '请选择规格类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    price: [
+      {
+        required: true,
+        message: '请填写商品价格',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    stock: [
+      {
+        required: true,
+        message: '请填写商品库存',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    merchantId: [
+      {
+        required: true,
+        message: '请选择店铺',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    categoryId: [
+      {
+        required: true,
+        type: 'string',
+        message: '选择商品分类',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (!form.categoryId) {
+            return Promise.reject('选择商品分类');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    goodsName: [
+      {
+        required: true,
+        message: '请选择商品名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const onType = (index: number) => {
+    form.type = index;
+  };
+
+  const addAttribute = () => {
+    specList.value.push({
+      specId: 0,
+      specName: undefined,
+      valueList: []
+    })
+  };
+
+  const delAttribute = (index) => {
+    specList.value.splice(index,1);
+    skuColumns.value.splice(index,1);
+  };
+
+  const changeAttr = (item: Spec,index: number) => {
+    // 排重（未做）
+    specList.value[index].specId = item.specId;
+    specList.value[index].specName = item.value;
+    specList.value[index].valueList = [];
+  };
+
+  const changeAttrValue = (item: any, index: number) => {
+    specList.value[index].specId = item.specId;
+    // 添加属性
+    const length = specList.value[index].valueList.length;
+    specList.value[index].valueList.push({
+      specValueId: item.specValueId,
+      specValue: item.value,
+      specId: item.specId
+    })
+    // 组装表头
+    const arr = ref<any>([]);
+    specList.value.map((d) => {
+      arr.value.push({
+        title: d.specName,
+        dataIndex: `specValue${length}`,
+        key: `specValue${length}`,
+        width: 70,
+        align: 'center',
+      })
+    })
+    // 组装skuList
+    setTimeout(() => {
+      generateSku();
+    },200);
+  }
+
+  // 生成sku
+  const generateSku = () => {
+    skuColumns.value = [
+      {
+        dataIndex: 'line',
+        width: 50,
+        key: 'line'
+      }
+    ];
+    // 根据选中的sku生成表格列
+    specList.value.forEach((item,index) => {
+      skuColumns.value.push({
+        title: item.specName,
+        dataIndex: `specValue${index}`,
+        key: `specValue${index}`,
+        align: 'center',
+      });
+    });
+
+    // 增加额外的列
+    const dataList = [
+      {
+        title: '商品图片',
+        dataIndex: 'image',
+        width: 120,
+        align: 'center',
+        key: 'image',
+      },
+      {
+        title: '价格',
+        dataIndex: 'price',
+        key: 'price',
+        width: 120,
+        align: 'center',
+      },
+      {
+        title: '市场价',
+        dataIndex: 'salePrice',
+        width: 120,
+        align: 'center',
+        key: 'salePrice'
+      },
+      {
+        title: '库存',
+        dataIndex: 'stock',
+        width: 120,
+        align: 'center',
+        key: 'stock'
+      },
+      {
+        title: 'SKU编码',
+        dataIndex: 'skuNo',
+        width: 120,
+        align: 'center',
+        key: 'skuNo'
+      }
+    ];
+
+    dataList.forEach((item) => {
+      skuColumns.value.push({
+        title: item.title,
+        dataIndex: item.key,
+        key: item.key,
+        align: 'center',
+      });
+    });
+
+    // 组合规格值
+    const attrList = [];
+    specList.value.forEach((item, index) => {
+      attrList.push([]);
+      const propType = `specValue${index}`;
+      item.valueList.forEach((subItem) => {
+        attrList[index].push({
+          propValue: subItem.specValue,
+          propCode: null,
+          propType: propType
+        });
+      });
+    });
+    const attrs = differentCombinations(attrList);
+
+    // 将规格值加入到表格列中
+    attrs.forEach((itemList, index) => {
+      // skuList.value[index] = [];
+      itemList.forEach((subItem) => {
+        console.log(index)
+        console.log(subItem);
+        const key = subItem.propType;
+        const value = subItem.propValue;
+        skuList.value[index][key] = value;
+        skuList.value[index]['pirce'] = 0.1
+      });
+    });
+  };
+
+  // 生成sku函数
+  const differentCombinations = function (param) {
+    return param.reduce(
+      (a, b) => {
+        const ret = [];
+        a.forEach((i) => b.forEach((j) => ret.push(i.concat([j]))));
+        return ret;
+      },
+      [[]]
+    );
+  };
+
+  const onClose = (index: number, valIndex: number) => {
+    specList.value[index].valueList.splice(valIndex,1);
+  }
+
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.url;
+  };
+
+  const chooseImageItem = (data: FileRecord) => {
+    const index = data?.index;
+    skuList.value[index].images = []
+    skuList.value[index].images.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    skuList.value[index].image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  const onDeleteFile = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const chooseGoodsCategory = (item,value) => {
+    console.log(item);
+    console.log(value);
+    form.categoryId = value[1].value;
+    form.categoryParent = value[0].label;
+    form.categoryChildren = value[1].label;
+  }
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    form.merchantName = item.merchantName;
+    form.merchantId = item.merchantId;
+  };
+
+  const onBathSet = () => {
+    skuList.value.map(d => {
+      console.log(d);
+      d.price = bathSet.value.price;
+      d.salePrice = bathSet.value.salePrice;
+      d.stock = bathSet.value.stock;
+      d.skuNo = bathSet.value.skuNo;
+    })
+  }
+
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 240,
+    plugins: 'code preview fullscreen searchreplace save autosave link autolink image media table codesample lists advlist charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
+    toolbar: false,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file).then(res => {
+        success(res.path)
+      }).catch((msg) => {
+        error(msg);
+      })
+    },
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  const reload = () => {
+    // 读取商品分类
+    listGoodsCategory()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d) => {
+          d.key = d.categoryId;
+          d.value = d.categoryId;
+          if (typeof d.categoryId === 'number') {
+            eks.push(d.categoryId);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = toTreeData({
+          data: list.map((d) => {
+            d.disabled = d.type != 0;
+            return d;
+          }),
+          idField: 'categoryId',
+          parentIdField: 'parentId'
+        });
+        if (list.length) {
+          if (typeof list[0].categoryId === 'number') {
+            selectedRowKeys.value = [list[0].categoryId];
+          }
+          current.value = list[0];
+        } else {
+          selectedRowKeys.value = [];
+          current.value = null;
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    // 规格列表
+    listSpec({}).then(list => {
+      specDict.value = list.map((d,i) => {
+        return {
+          specId: d.specId,
+          name: d.specName,
+          value: d.specName,
+          list: d.specValues?.map(v => {
+            return {
+              specId: v.specId,
+              specValueId: v.specValueId,
+              name: v.specValue,
+              value: v.specValue
+            }
+          })
+        };
+      })
+    })
+    // 读取商品信息
+    if (form.goodsId) {
+      images.value = [];
+      files.value = [];
+      category.value = [];
+      content.value = '';
+      getGoods(form.goodsId).then((data) => {
+        assignFields(data);
+        if (data.image) {
+          const arr = JSON.parse(data.image);
+          arr.map((img) => {
+            images.value.push({
+              uid: uuid(),
+              url: img,
+              status: 'done'
+            });
+          });
+        }
+        if (data.files) {
+          const arr = JSON.parse(data.files);
+          arr.map((img) => {
+            files.value.push({
+              uid: uuid(),
+              url: img,
+              status: 'done'
+            });
+          });
+        }
+        if(data.content){
+          content.value = data.content;
+        }
+        if(data.goodsSpecs){
+          specList.value = data.goodsSpecs.map(d => {
+            d.valueList = [];
+            const split = d.specValues?.split(',');
+            split?.map(text => {
+              d.valueList?.push({
+                specValue: text
+              })
+            })
+            return d;
+          });
+        }
+
+        setTimeout(() => {
+          if(data.categoryParent){
+            console.log(category.value);
+            category.value.push(data.categoryParent);
+          }
+          if(data.categoryChildren){
+            category.value.push(data.categoryChildren);
+          }
+          if(data.goodsSkus){
+            skuList.value = data.goodsSkus;
+            generateSku();
+          }
+        },300)
+      });
+    }
+  };
+
+  const { validate, resetFields, validateInfos } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        images.value.map((d) => {
+          imgList.value.push(d.url);
+        });
+        files.value.map((d) => {
+          fileList.value.push(d.url);
+        });
+        skuList.value.map(d => {
+          d.images = undefined
+        })
+        if(getMerchantId()){
+          form.merchantId = getMerchantId();
+          form.merchantName = getMerchantName();
+        }
+        const formData = {
+          ...form,
+          content: content.value,
+          image: JSON.stringify(imgList.value),
+          files: JSON.stringify(fileList.value),
+          goodsSpecs: specList.value,
+          goodsSkus: skuList.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateGoods : addGoods;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            imgList.value = []
+            fileList.value = []
+            category.value = []
+            resetFields();
+            message.success(msg);
+            setTimeout(() => {
+              router.go(-1)
+            },1000)
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { query } = unref(route);
+      const { goodsId } = query;
+      if (goodsId) {
+        form.goodsId = Number(goodsId);
+        isUpdate.value = true;
+        reload();
+      } else {
+        isUpdate.value = false;
+        imgList.value = []
+        fileList.value = []
+        // images.value = [];
+        // skuList.value = [];
+        // specList.value = [];
+        // category.value = [];
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsAdd'
+  };
+</script>
+<style lang="less" scoped>
+  .goods-form {
+    width: 1020px;
+    margin-bottom: 10px;
+    .spec-card {
+      margin-top: 20px;
+      background-color: #f8fcff;
+      .spec-list {
+        margin-left: 52px;
+        .spec-value-list {
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          .image {
+            margin-top: 10px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+  .body-bottom {
+    height: 100px;
+  }
+  .bath-set {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    .list {
+      width: 100%;
+      margin: 10px 0;
+      display: flex;
+    }
+  }
+  .sku-table {
+    .goods-list {
+      .head {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #eeeeee;
+        div {
+          padding: 6px;
+          width: 25%;
+        }
+      }
+      .table-td {
+        display: flex;
+        justify-content: space-between;
+        div {
+          width: 25%;
+          padding: 6px;
+        }
+      }
+    }
+    .desc {
+      margin-top: 20px;
+      padding: 10px 0;
+    }
+  }
+  .preview-ui {
+    position: fixed;
+    top: 155px;
+    right: 30px;
+    background: url('@/assets/img/app-ui.png');
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: 100%;
+    width: 390px;
+    height: 844px;
+  }
+  .ele-text-placeholder{
+    line-height: 2em;
+  }
+</style>
diff --git a/src/views/shop/goods/components/goodsEdit.vue b/src/views/shop/goods/components/goodsEdit.vue
new file mode 100644
index 0000000..443cbaa
--- /dev/null
+++ b/src/views/shop/goods/components/goodsEdit.vue
@@ -0,0 +1,765 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="900"
+    :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: 3, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-tabs type="card" v-model:active-key="active" @change="onChange">
+        <a-tab-pane tab="基本信息" key="base">
+          <a-form-item label="商品类型" name="type">
+            <a-space>
+              <a-button
+                :type="form.type == 1 ? 'primary' : ''"
+                @click="onType(1)"
+                :ghost="form.type == 1"
+                >实物商品</a-button
+              >
+              <a-button
+                :type="form.type == 2 ? 'primary' : ''"
+                @click="onType(2)"
+                :ghost="form.type == 2"
+                >虚拟商品</a-button
+              >
+            </a-space>
+            <div class="ele-text-placeholder">
+              {{
+                form.type == 1
+                  ? `支持快递邮寄、同城配送或到店自提方式发货`
+                  : '电子券码等，线下到店核销，无需备货'
+              }}
+            </div>
+          </a-form-item>
+          <a-form-item
+            label="选择店铺"
+            name="merchantId"
+          >
+            <SelectMerchant
+              :placeholder="`选择商户`"
+              class="input-item"
+              style="width: 558px"
+              v-model:value="form.merchantName"
+              @done="chooseMerchantId"
+            />
+          </a-form-item>
+          <a-form-item label="商品名称" name="goodsName">
+            <a-input
+              allow-clear
+              style="width: 558px"
+              placeholder="请输入商品名称"
+              v-model:value="form.goodsName"
+            />
+          </a-form-item>
+          <a-form-item label="商品分类" name="categoryId">
+            <SelectGoodsCategory
+              :data="data"
+              placeholder="请选择商品分类"
+              style="width: 558px"
+              v-model:value="category"
+              @done="chooseGoodsCategory"
+            />
+          </a-form-item>
+          <a-form-item label="商品卖点" name="comments">
+            <a-input
+              allow-clear
+              :maxlength="60"
+              style="width: 558px"
+              placeholder="此款商品美观大方 性价比较高 不容错过"
+              v-model:value="form.comments"
+            />
+          </a-form-item>
+          <a-form-item label="单位名称" name="unitName">
+            <a-input
+              allow-clear
+              style="width: 558px"
+              placeholder="单位名称，如(个)"
+              v-model:value="form.unitName"
+            />
+          </a-form-item>
+          <a-form-item label="商品价格" name="price">
+            <a-input-number
+              :placeholder="`商品价格`"
+              style="width: 240px"
+              v-model:value="form.price"
+            />
+            <div class="ele-text-placeholder">商品的实际购买金额，最低0.01</div>
+          </a-form-item>
+          <a-form-item label="市场价" name="salePrice">
+            <a-input-number
+              :placeholder="`市场价`"
+              style="width: 240px"
+              v-model:value="form.salePrice"
+            />
+            <div class="ele-text-placeholder">划线价仅用于商品页展示</div>
+          </a-form-item>
+          <a-form-item label="当前库存" name="stock">
+            <a-input-number
+              :placeholder="`商品库存`"
+              style="width: 240px"
+              v-model:value="form.stock"
+            />
+            <div class="ele-text-placeholder">划线价仅用于商品页展示</div>
+          </a-form-item>
+          <a-form-item label="商品图片" name="image">
+            <SelectFile
+              :placeholder="`请选择视频文件`"
+              :limit="1"
+              :data="images"
+              @done="chooseImage"
+              @del="onDeleteItem"
+            />
+            <div class="ele-text-placeholder"
+              >支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div
+            >
+          </a-form-item>
+          <a-form-item label="轮播图" name="files">
+            <SelectFile
+              :placeholder="`请选择视频文件`"
+              :limit="9"
+              :data="files"
+              @done="chooseFile"
+              @del="onDeleteFile"
+            />
+          </a-form-item>
+          <a-form-item label="状态" name="isShow">
+            <a-radio-group v-model:value="form.isShow">
+              <a-radio :value="1">上架</a-radio>
+              <a-radio :value="0">下架</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane tab="商品规格" key="spec">
+          <a-form-item label="规格类型" name="specs">
+            <a-radio-group v-model:value="form.specs">
+              <a-radio :value="0">单规格</a-radio>
+              <a-radio :value="1">多规格</a-radio>
+            </a-radio-group>
+
+          </a-form-item>
+          <a-form-item name="multipleSpec" v-if="form.specs == 1">
+            <div class="w-[300px] ml-10">
+              <SelectSpec
+                placeholder="选择规格"
+                :width="130"
+                v-model:value="form.specName"
+                @done="onSpec"
+              />
+            </div>
+          </a-form-item>
+          <a-form-item name="specValue" v-if="form.specs == 1">
+            <a-space direction="vertical" class="ml-[40px]">
+              <template v-for="(item, index) in spec" :key="index">
+                <div class="text-left flex items-center leading-10 text-gray-400">
+                  <div class="mr-2">{{ item.value }} :</div>
+                  <CloseCircleOutlined
+                    class="cursor-pointer"
+                    @click="onClose(index)"
+                  />
+                </div>
+                <ele-edit-tag
+                  v-model:data="item.detail"
+                  size="middle"
+                  shape="round"
+                />
+              </template>
+              <a-card class="ml-[40px]" v-if="showSpecForm">
+                <a-form-item name="name">
+                  <a-input
+                    allow-clear
+                    placeholder="请输入规格"
+                    v-model:value="name"
+                  />
+                </a-form-item>
+                <a-form-item name="value">
+                  <a-input
+                    allow-clear
+                    placeholder="请输入规格值"
+                    v-model:value="value"
+                  />
+                </a-form-item>
+                <a-space>
+                  <a-button type="primary" @click="addSpecValue">确定</a-button>
+                  <a-button @click="openSpecForm">取消</a-button>
+                </a-space>
+              </a-card>
+              <a-space v-if="spec.length > 0">
+                <a-button type="primary" class="mt-5" @click="openSpecForm"
+                >添加新规格</a-button
+                >
+                <a-button type="primary" class="mt-5" @click="generateSku"
+                >生成SKU</a-button
+                >
+              </a-space>
+            </a-space>
+          </a-form-item>
+          <a-form-item name="oneSpec">
+            <div class="w-full">
+              <div class="sku-table">
+                <a-table
+                  :pagination="false"
+                  :dataSource="skuList"
+                  :columns="columns"
+                  :scroll="{ y: 500 }"
+                >
+                  <template #bodyCell="{ record, column, index }">
+                    <template v-if="column.key === 'line'">
+                      {{ index + 1 }}
+                    </template>
+                    <template v-if="column.key === 'image'">
+                      <SelectFile
+                        :placeholder="`请选择商品图片`"
+                        :limit="1"
+                        :data="record.images || []"
+                        :index="index"
+                        @done="chooseSkuImage"
+                        @del="onDeleteSkuItem"
+                      />
+                    </template>
+                    <template v-if="column.key === 'price'">
+                      <a-input :placeholder="`成本价`" v-model:value="skuList[index].price" />
+                    </template>
+                    <template v-if="column.key === 'salePrice'">
+                      <a-input :placeholder="`售价`" v-model:value="record.salePrice" />
+                    </template>
+                    <template v-if="column.key === 'stock'">
+                      <a-input :placeholder="`库存`" v-model:value="record.stock" />
+                    </template>
+                    <template v-if="column.key === 'skuNo'">
+                      <a-input :placeholder="`编码`" v-model:value="record.skuNo" />
+                    </template>
+                  </template>
+                </a-table>
+              </div>
+            </div>
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane tab="商品详情" key="content">
+          <a-form-item name="content">
+            <!-- 编辑器 -->
+            <tinymce-editor
+              ref="editorRef"
+              class="content"
+              v-model:value="content"
+              :disabled="disabled"
+              :init="config"
+              placeholder="图片直接粘贴自动上传"
+              @paste="onPaste"
+            />
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane tab="营销设置" key="coupon">
+          <a-form-item label="货架" name="position">
+            <a-input
+              allow-clear
+              style="width: 250px"
+              placeholder="请输入货架"
+              v-model:value="form.position"
+            />
+          </a-form-item>
+          <a-form-item label="商品重量" name="goodsWeight">
+            <a-input
+              allow-clear
+              style="width: 250px"
+              placeholder="请输入商品重量"
+              v-model:value="form.goodsWeight"
+            />
+          </a-form-item>
+          <a-form-item label="销量" name="sales">
+            <a-input-number
+              allow-clear
+              style="width: 250px"
+              placeholder="请输入销量"
+              v-model:value="form.sales"
+            />
+          </a-form-item>
+          <a-form-item label="获取积分" name="gainIntegral">
+            <a-input-number
+              :placeholder="`消费获取的积分`"
+              style="width: 250px"
+              v-model:value="form.gainIntegral"
+            />
+          </a-form-item>
+          <a-form-item label="库存计算方式" name="deductStockType">
+            <a-radio-group v-model:value="form.deductStockType">
+              <a-radio :value="20">付款减库存</a-radio>
+              <a-radio :value="10">下单减库存</a-radio>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="9999"
+              style="width: 250px"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { CloseCircleOutlined } from '@ant-design/icons-vue';
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addGoods, getGoods, updateGoods } from "@/api/shop/goods";
+  import { Goods } from '@/api/shop/goods/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { uploadFile, uploadOss } from "@/api/system/file";
+  import { SpecValue } from "@/api/shop/specValue/model";
+  import { Spec } from "@/api/shop/spec/model";
+  import {ColumnItem} from "ele-admin-pro/es/ele-pro-table/types";
+  import { GoodsSku } from "@/api/shop/goodsSku/model";
+  import { GoodsSpec } from "@/api/shop/goodsSpec/model";
+  import { getGoodsSpec, pageGoodsSpec } from "@/api/shop/goodsSpec";
+  import { openUrl } from "@/utils/common";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Goods | 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 content = ref('');
+  const disabled = ref(false);
+  // 当前选项卡
+  const active = ref('spec');
+
+  const spec = ref<SpecValue[]>([]);
+  const showSpecForm = ref(false);
+  const name = ref();
+  const value = ref();
+  const skuList = ref<GoodsSku[]>([{images: []}]);
+  const fileList = ref<any[]>([]);
+  const files = ref<ItemType[]>([]);
+  const goodsSpec = ref<GoodsSpec>();
+  const category = ref<string[]>([]);
+
+  const columns = [
+    {
+      title: '图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center'
+    },
+    {
+      title: '售价',
+      dataIndex: 'salePrice',
+      key: 'salePrice',
+      align: 'center',
+    },
+    {
+      title: '成本价',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center',
+    },
+    {
+      title: '库存',
+      dataIndex: 'stock',
+      key: 'stock',
+      align: 'center',
+    },
+    {
+      title: '商品编号',
+      dataIndex: 'skuNo',
+      key: 'skuNo',
+      align: 'center',
+    },
+  ];
+
+  // 用户信息
+  const form = reactive<Goods>({
+    goodsId: undefined,
+    type: 1,
+    code: undefined,
+    goodsName: undefined,
+    image: undefined,
+    content: undefined,
+    categoryId: undefined,
+    categoryParent: undefined,
+    categoryChildren: undefined,
+    specs: 0,
+    position: undefined,
+    price: undefined,
+    salePrice: undefined,
+    files: undefined,
+    sales: 0,
+    gainIntegral: 0,
+    goodsWeight: undefined,
+    recommend: undefined,
+    merchantId: undefined,
+    merchantName: undefined,
+    stock: 1000,
+    deductStockType: 20,
+    isShow: 1,
+    status: 0,
+    comments: '',
+    sortNumber: 100,
+    specName: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    type: [
+      {
+        required: true,
+        message: '请选择商品类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    image: [
+      {
+        required: true,
+        message: '请上传图片',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    files: [
+      {
+        required: true,
+        message: '请上传图片',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    specs: [
+      {
+        required: true,
+        message: '请选择规格类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    price: [
+      {
+        required: true,
+        message: '请填写商品价格',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    stock: [
+      {
+        required: true,
+        message: '请填写商品库存',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    merchantId: [
+      {
+        required: true,
+        message: '请选择店铺',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    categoryId: [
+      {
+        required: true,
+        type: 'string',
+        message: '选择商品分类',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (!form.categoryId) {
+            return Promise.reject('选择商品分类');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    goodsName: [
+      {
+        required: true,
+        message: '请选择商品名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const onType = (index: number) => {
+    form.type = index;
+  };
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    form.merchantName = item.merchantName;
+    form.merchantId = item.merchantId;
+  };
+
+  const chooseGoodsCategory = (item,value) => {
+    form.categoryId = value[1].value;
+    form.categoryParent = value[0].label;
+    form.categoryChildren = value[1].label;
+  }
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const chooseSkuImage = (data: FileRecord) => {
+    const index = data?.index;
+    skuList.value[index].images?.push({
+      uid: uuid(),
+      url: data.path,
+      status: 'done'
+    });
+    skuList.value[index].image = data.path;
+  }
+
+  const onDeleteSkuItem = (index: number) => {
+    images.value.splice(index, 1);
+  };
+
+  const onChange = () => {
+    // reload();
+  };
+
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const onClose = (index) => {
+    spec.value.splice(index, 1);
+  };
+
+  const openSpecForm = () => {
+    showSpecForm.value = !showSpecForm.value;
+  };
+
+  const onSpec = (row: Spec) => {
+    form.specName = row.specName;
+    goodsSpec.value = row;
+    if(row.specValue){
+      spec.value = JSON.parse(row?.specValue);
+    }
+  }
+
+  // 新增规格
+  const addSpecValue = () => {
+    if (!name.value || !value.value) {
+      message.error(`请输入规格和规格值`);
+      return false;
+    }
+    const findIndex = spec.value.findIndex((d) => d.value == name.value);
+    if (findIndex == 0) {
+      message.error(`${name.value}已存在)`);
+      return false;
+    }
+    spec.value.push({
+      value: name.value,
+      detail: [value.value]
+    });
+    name.value = '';
+    value.value = '';
+    openSpecForm();
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  const onDeleteFile = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 240,
+    plugins: 'code preview fullscreen searchreplace save autosave link autolink image media table codesample lists advlist charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
+    toolbar: false,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file).then(res => {
+        success(res.path)
+      }).catch((msg) => {
+        error(msg);
+      })
+    },
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        files.value.map((d) => {
+          fileList.value.push(d.url);
+        });
+        const formData = {
+          ...form,
+          content: content.value,
+          files: JSON.stringify(fileList.value),
+          goodsSpecs: goodsSpec.value,
+          goodsSkus: skuList.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateGoods : addGoods;
+        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'
+            });
+          }
+          if(props.data.goodsSpecs){
+            goodsSpec.value = props.data.goodsSpecs[0];
+            if(props.data.specs == 1){
+              form.specName = props.data.goodsSpecs[0].specName;
+            }
+          }
+          if(props.data.goodsSkus){
+            skuList.value = props.data.goodsSkus.map(d => {
+              d.images = [];
+              d.images.push({
+                uid: uuid(),
+                url: d.image,
+                status: 'done'
+              })
+              return d;
+            });
+          }
+
+          isUpdate.value = true;
+        } else {
+          spec.value = [];
+          goodsSpec.value = {};
+          skuList.value = [];
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/shop/goods/components/search.vue b/src/views/shop/goods/components/search.vue
new file mode 100644
index 0000000..fdd46b1
--- /dev/null
+++ b/src/views/shop/goods/components/search.vue
@@ -0,0 +1,145 @@
+<!-- 搜索表单 -->
+<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-radio-group v-model:value="type" @change="handleSearch">
+      <a-radio-button value="出售中"
+        >出售中({{ goodsCount?.totalNum }})</a-radio-button
+      >
+      <a-radio-button value="待上架"
+        >待上架({{ goodsCount?.totalNum2 }})</a-radio-button
+      >
+      <a-radio-button value="已售罄"
+        >已售罄({{ goodsCount?.totalNum3 }})</a-radio-button
+      >
+    </a-radio-group>
+    <SelectMerchant
+      :placeholder="`选择商户`"
+      class="input-item"
+      v-model:value="where.merchantName"
+      @done="chooseMerchantId"
+    />
+    <SelectGoodsCategory
+      class="input-item"
+      :placeholder="`请选择商品分类`"
+      v-model:value="where.categoryId"
+      @done="chooseGoodsCategory"
+    />
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      v-model:value="where.keywords"
+      @pressEnter="reload"
+      @search="reload"
+    />
+    <a-button @click="reset">重置</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 { ref, watch } from 'vue';
+  import { getCount } from '@/api/shop/goods';
+  import type { GoodsCount, GoodsParam } from '@/api/shop/goods/model';
+  import useSearch from '@/utils/use-search';
+  import { useRouter } from 'vue-router';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
+  const { currentRoute } = useRouter();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const type = ref<string>();
+  // 统计数据
+  const goodsCount = ref<GoodsCount>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<GoodsParam>({
+    goodsId: undefined,
+    isShow: undefined,
+    stock: undefined,
+    categoryId: undefined,
+    keywords: ''
+  });
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  const handleSearch = (e) => {
+    const text = e.target.value;
+    resetFields();
+    if (text === '出售中') {
+      where.isShow = 1;
+    }
+    if (text === '待上架') {
+      where.isShow = 0;
+    }
+    if (text === '已售罄') {
+      where.stock = 0;
+    }
+    emit('search', where);
+  };
+
+  const reload = () => {
+    getCount().then((data: any) => {
+      goodsCount.value = data;
+    });
+    emit('search', where);
+  };
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    where.merchantName = item.merchantName;
+    where.merchantId = item.merchantId;
+    reload();
+  };
+
+  const chooseGoodsCategory = (
+    category: GoodsCategory,
+    data: GoodsCategory
+  ) => {
+    where.categoryName = data[1].label;
+    where.categoryId = data[1].value;
+    reload();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    type.value = '';
+    reload();
+  };
+
+  // watch(
+  //   () => props.selection,
+  //   () => {}
+  // );
+  watch(
+    currentRoute,
+    () => {
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/shop/goods/index.vue b/src/views/shop/goods/index.vue
new file mode 100644
index 0000000..6c83d2b
--- /dev/null
+++ b/src/views/shop/goods/index.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          :scroll="{ x: 1200 }"
+          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 === 'type'">
+              <a-tag v-if="record.type === 0">虚拟商品</a-tag>
+              <a-tag v-if="record.type === 1">实物商品</a-tag>
+            </template>
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="80" />
+            </template>
+            <template v-if="column.key === 'salePrice'">
+              ￥{{ formatNumber(record.salePrice) }}
+            </template>
+            <template v-if="column.key === 'isShow'">
+              <a-tag
+                v-if="record.isShow === 1"
+                color="green"
+                class="cursor-pointer"
+                @click="onUpdate(record)"
+                >出售中</a-tag
+              >
+              <a-tag
+                v-if="record.isShow === 0"
+                color="red"
+                class="cursor-pointer"
+                @click="onUpdate(record)"
+                >已下架</a-tag
+              >
+            </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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsEdit 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 GoodsEdit from './components/goodsEdit.vue';
+  import {
+    pageGoods,
+    removeGoods,
+    removeBatchGoods,
+    updateGoods
+  } from '@/api/shop/goods';
+  import type { Goods, GoodsParam } from '@/api/shop/goods/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Goods[]>([]);
+  // 当前编辑数据
+  const current = ref<Goods | 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 pageGoods({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '商品ID',
+      dataIndex: 'goodsId',
+      key: 'goodsId',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '商品图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center'
+    },
+    {
+      title: '所属门店',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      ellipsis: true,
+      align: 'center'
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'goodsName',
+      key: 'goodsName',
+      align: 'center'
+    },
+    {
+      title: '商品编码',
+      dataIndex: 'code',
+      key: 'code',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '分类ID',
+      dataIndex: 'categoryId',
+      key: 'categoryId',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '一级分类',
+      dataIndex: 'categoryParent',
+      key: 'categoryParent',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '二级分类',
+      dataIndex: 'categoryChildren',
+      key: 'categoryChildren',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '多规格',
+      dataIndex: 'specs',
+      key: 'specs',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '货架',
+      dataIndex: 'position',
+      key: 'position',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '商品价格',
+      dataIndex: 'salePrice',
+      key: 'salePrice',
+      sorter: true,
+      align: 'center'
+    },
+    {
+      title: '进货价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '库存计算方式',
+      dataIndex: 'deductStockType',
+      key: 'deductStockType',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '销量',
+      dataIndex: 'sales',
+      key: 'sales',
+      sorter: true,
+      align: 'center'
+    },
+    {
+      title: '库存',
+      dataIndex: 'stock',
+      key: 'stock',
+      sorter: true,
+      align: 'center'
+    },
+    {
+      title: '商品重量',
+      dataIndex: 'goodsWeight',
+      key: 'goodsWeight',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      sorter: true,
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '商户ID',
+      dataIndex: 'merchantId',
+      key: 'merchantId',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'isShow',
+      key: 'isShow',
+      sorter: true,
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      sorter: true,
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      sorter: true
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Goods) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  const onUpdate = (row?: Goods) => {
+    const isShow = row?.isShow == 0 ? 1 : 0;
+    updateGoods({ ...row, isShow }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 删除单个 */
+  const remove = (row: Goods) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoods(row.goodsId)
+      .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);
+        removeBatchGoods(selection.value.map((d) => d.goodsId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Goods) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Goods'
+  };
+</script>
+
+<style lang="less" scoped></style>