初始化

2024-04-28 16:20:45 +08:00
parent 3f2749b6c4
commit 58929c05ef
687 changed files with 90151 additions and 13 deletions
--- a/src/views/MiniMall/Product/Comp/ProductAttributesAddForm.vue
+++ b/src/views/MiniMall/Product/Comp/ProductAttributesAddForm.vue
@@ -0,0 +1,98 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="属性名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名称" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" name="ProductPropertyForm" setup>
+import * as PropertyApi from '@/api/mall/product/property'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('添加商品属性') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  name: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const attributeList = ref([]) // 商品属性列表
+const props = defineProps({
+  propertyList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) return
+    attributeList.value = data
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as PropertyApi.PropertyVO
+    // 检查属性是否已存在，如果有则返回属性和其下属性值
+    const res = await PropertyApi.getPropertyListAndValue({ name: data.name })
+    if (res.length === 0) {
+      const propertyId = await PropertyApi.createProperty(data)
+      attributeList.value.push({ id: propertyId, ...formData.value, values: [] })
+    } else {
+      if (res[0].values === null) {
+        res[0].values = []
+      }
+      attributeList.value.push(res[0]) // 因为只用一个
+    }
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    name: '',
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
--- a/src/views/MiniMall/Product/Comp/SkuList.vue
+++ b/src/views/MiniMall/Product/Comp/SkuList.vue
@@ -0,0 +1,317 @@
+<template>
+  <el-table
+    :data="isBatch ? skuList : formData.skus"
+    border
+    class="tabNumWidth"
+    max-height="500"
+    size="small"
+  >
+    <el-table-column align="center" fixed="left" label="图片" min-width="100">
+      <template #default="{ row }">
+        <UploadImg v-model="row.picUrl" height="80px" width="100%" />
+      </template>
+    </el-table-column>
+    <template v-if="formData.specType && !isBatch">
+      <!--  根据商品属性动态添加 -->
+      <el-table-column
+        v-for="(item, index) in tableHeaders"
+        :key="index"
+        :label="item.label"
+        align="center"
+        min-width="120"
+      >
+        <template #default="{ row }">
+          <!-- TODO puhui999：展示成蓝色，有点区分度哈 -->
+          {{ row.properties[index]?.valueName }}
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column align="center" label="商品条码" min-width="168">
+      <template #default="{ row }">
+        <el-input v-model="row.barCode" class="w-100%" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="销售价(元)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number v-model="row.price" :min="0" :precision="2" :step="0.1" class="w-100%" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="市场价(元)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.marketPrice"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="成本价(元)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number
+          v-model="row.costPrice"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="w-100%"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="库存" min-width="168">
+      <template #default="{ row }">
+        <el-input-number v-model="row.stock" :min="0" class="w-100%" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="重量(kg)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number v-model="row.weight" :min="0" :precision="2" :step="0.1" class="w-100%" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="体积(m^3)" min-width="168">
+      <template #default="{ row }">
+        <el-input-number v-model="row.volume" :min="0" :precision="2" :step="0.1" class="w-100%" />
+      </template>
+    </el-table-column>
+    <template v-if="formData.subCommissionType">
+      <el-table-column align="center" label="一级返佣(元)" min-width="168">
+        <template #default="{ row }">
+          <el-input-number
+            v-model="row.subCommissionFirstPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-100%"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="二级返佣(元)" min-width="168">
+        <template #default="{ row }">
+          <el-input-number
+            v-model="row.subCommissionSecondPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-100%"
+          />
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column v-if="formData.specType" align="center" fixed="right" label="操作" width="80">
+      <template #default="{ row }">
+        <el-button v-if="isBatch" link size="small" type="primary" @click="batchAdd">
+          批量添加
+        </el-button>
+        <el-button v-else link size="small" type="primary" @click="deleteSku(row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" name="SkuList" setup>
+import { PropType } from 'vue'
+import { copyValueToTarget } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
+import { UploadImg } from '@/components/UploadFile'
+import type { Property, SkuType, SpuType } from '@/api/mall/product/spu'
+
+const props = defineProps({
+  propFormData: {
+    type: Object as PropType<SpuType>,
+    default: () => {}
+  },
+  propertyList: {
+    type: Array,
+    default: () => []
+  },
+  isBatch: propTypes.bool.def(false) // 是否作为批量操作组件
+})
+const formData = ref<SpuType>() // 表单数据
+const skuList = ref<SkuType[]>([
+  {
+    price: 0, // 商品价格
+    marketPrice: 0, // 市场价
+    costPrice: 0, // 成本价
+    barCode: '', // 商品条码
+    picUrl: '', // 图片地址
+    stock: 0, // 库存
+    weight: 0, // 商品重量
+    volume: 0, // 商品体积
+    subCommissionFirstPrice: 0, // 一级分销的佣金
+    subCommissionSecondPrice: 0 // 二级分销的佣金
+  }
+]) // 批量添加时的临时数据
+// TODO @puhui999：保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
+
+/** 批量添加 */
+const batchAdd = () => {
+  formData.value.skus.forEach((item) => {
+    copyValueToTarget(item, skuList.value[0])
+  })
+}
+
+/** 删除 sku */
+const deleteSku = (row) => {
+  const index = formData.value.skus.findIndex(
+    // 直接把列表转成字符串比较
+    (sku) => JSON.stringify(sku.properties) === JSON.stringify(row.properties)
+  )
+  formData.value.skus.splice(index, 1)
+}
+const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
+
+/**
+ * 将传进来的值赋值给 skuList
+ */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) return
+    formData.value = data
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/** 生成表数据 */
+const generateTableData = (propertyList: any[]) => {
+  // 构建数据结构
+  const propertyValues = propertyList.map((item) =>
+    item.values.map((v) => ({
+      propertyId: item.id,
+      propertyName: item.name,
+      valueId: v.id,
+      valueName: v.name
+    }))
+  )
+  // TODO @puhui：是不是 buildSkuList，这样容易理解一点哈。item 改成 sku
+  const buildList = build(propertyValues)
+  // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
+  if (!validateData(propertyList)) {
+    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
+    formData.value!.skus = []
+  }
+  for (const item of buildList) {
+    const row = {
+      properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      subCommissionFirstPrice: 0,
+      subCommissionSecondPrice: 0
+    }
+    // 如果存在属性相同的 sku 则不做处理
+    const index = formData.value!.skus.findIndex(
+      (sku) => JSON.stringify(sku.properties) === JSON.stringify(row.properties)
+    )
+    if (index !== -1) {
+      continue
+    }
+    formData.value.skus.push(row)
+  }
+}
+
+/**
+ * 生成 skus 前置校验
+ */
+const validateData = (propertyList: any[]) => {
+  const skuPropertyIds = []
+  formData.value.skus.forEach((sku) =>
+    sku.properties
+      ?.map((property) => property.propertyId)
+      .forEach((propertyId) => {
+        if (skuPropertyIds.indexOf(propertyId) === -1) {
+          skuPropertyIds.push(propertyId)
+        }
+      })
+  )
+  const propertyIds = propertyList.map((item) => item.id)
+  return skuPropertyIds.length === propertyIds.length
+}
+
+/** 构建所有排列组合 */
+const build = (propertyValuesList: Property[][]) => {
+  if (propertyValuesList.length === 0) {
+    return []
+  } else if (propertyValuesList.length === 1) {
+    return propertyValuesList[0]
+  } else {
+    const result: Property[][] = []
+    const rest = build(propertyValuesList.slice(1))
+    for (let i = 0; i < propertyValuesList[0].length; i++) {
+      for (let j = 0; j < rest.length; j++) {
+        // 第一次不是数组结构，后面的都是数组结构
+        if (Array.isArray(rest[j])) {
+          result.push([propertyValuesList[0][i], ...rest[j]])
+        } else {
+          result.push([propertyValuesList[0][i], rest[j]])
+        }
+      }
+    }
+    return result
+  }
+}
+
+/** 监听属性列表，生成相关参数和表头 */
+watch(
+  () => props.propertyList,
+  (propertyList) => {
+    // 如果不是多规格则结束
+    if (!formData.value.specType) {
+      return
+    }
+    // 如果当前组件作为批量添加数据使用，则重置表数据
+    if (props.isBatch) {
+      skuList.value = [
+        {
+          price: 0,
+          marketPrice: 0,
+          costPrice: 0,
+          barCode: '',
+          picUrl: '',
+          stock: 0,
+          weight: 0,
+          volume: 0,
+          subCommissionFirstPrice: 0,
+          subCommissionSecondPrice: 0
+        }
+      ]
+    }
+
+    // 判断代理对象是否为空
+    if (JSON.stringify(propertyList) === '[]') {
+      return
+    }
+    // 重置表头
+    tableHeaders.value = []
+    // 生成表头
+    propertyList.forEach((item, index) => {
+      // name加属性项index区分属性值
+      tableHeaders.value.push({ prop: `name${index}`, label: item.name })
+    })
+
+    // 如果回显的 sku 属性和添加的属性一致则不处理
+    if (validateData(propertyList)) {
+      return
+    }
+    // 添加新属性没有属性值也不做处理
+    if (propertyList.some((item) => item.values.length === 0)) {
+      return
+    }
+    // 生成 table 数据，即 sku 列表
+    generateTableData(propertyList)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+// 暴露出生成 sku 方法，给添加属性成功时调用
+defineExpose({ generateTableData })
+</script>
--- a/src/views/MiniMall/Product/add.vue
+++ b/src/views/MiniMall/Product/add.vue
@@ -0,0 +1,252 @@
+<template>
+  <el-tabs v-model="tabName" type="border-card" tab-position="top">
+    <el-tab-pane label="商品信息" name="basic">
+      <el-form :model="form" ref="spuForm" :rules="rules" label-width="90px">
+        <el-row :gutter="20">
+          <el-col :span="8" :offset="0">
+            <el-form-item label="产品名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入产品名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="0">
+            <el-form-item label="分类" prop="category">
+              <el-input v-model="form.category" placeholder="请输入分类" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="0">
+            <el-form-item label="品牌" prop="brand">
+              <el-input v-model="form.brand" placeholder="请输入品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="产品简介" prop="intro">
+              <el-input
+                v-model="form.intro"
+                type="textarea"
+                :autosize="{ minRows: 4 }"
+                placeholder="请输入产品简介"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="主图" prop="picUrl">
+              <UploadImg v-model="form.picUrl" height="100px" width="100px" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24" :offset="0">
+            <el-form-item label="轮播图" prop="sliderPicUrls">
+              <UploadImgs v-model:modelValue="form.sliderPicUrls" height="100px" width="100px" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24" :offset="0">
+            <el-form-item label="商品规格">
+              <el-button @click="handleAddSpec">添加规格</el-button>
+              <el-col v-for="(item, index) in form.specsList" :key="index">
+                <div>
+                  <el-text class="mx-1">属性名：</el-text>
+                  <el-tag class="mx-1" closable type="success" @close="handleCloseProperty(index)"
+                    >{{ item.name }}
+                  </el-tag>
+                </div>
+                <div>
+                  <el-text class="mx-1">属性值：</el-text>
+                  <el-tag
+                    v-for="(value, valueIndex) in item.values"
+                    :key="value.id"
+                    class="mx-1"
+                    closable
+                    @close="handleCloseValue(index, valueIndex)"
+                  >
+                    {{ value.name }}
+                  </el-tag>
+                  <el-input
+                    v-show="inputVisible(index)"
+                    :id="`input${index}`"
+                    :ref="setInputRef"
+                    v-model="inputValue"
+                    class="!w-20"
+                    size="small"
+                    @blur="handleInputConfirm(index, item.id)"
+                    @keyup.enter="handleInputConfirm(index, item.id)"
+                  />
+                  <el-button
+                    v-show="!inputVisible(index)"
+                    class="button-new-tag ml-1"
+                    size="small"
+                    @click="showInput(index)"
+                  >
+                    + 添加
+                  </el-button>
+                </div>
+                <el-divider class="my-10px" />
+              </el-col>
+            </el-form-item>
+            <el-form-item>
+              <el-table :data="form.skuList">
+                <el-table-column type="index" width="50" />
+                <el-table-column prop="specsName" label="规格名称">
+                  <template #default="{ row }">
+                    <el-input v-model="row.specsName" placeholder="请输入" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  v-for="col in form.specsList"
+                  :prop="col.id"
+                  :key="col.id"
+                  :label="col.name"
+                />
+                <el-table-column prop="price" label="销售价">
+                  <template #default="{ row }">
+                    <el-input-number v-model="row.price" :min="0.01" :step="1" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="intro" label="简介">
+                  <template #default="{ row }">
+                    <el-input v-model="row.intro" placeholder="请输入简介" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div class="mt-20px flex justify-center">
+        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button plain>重置</el-button>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="详细信息" name="detail">
+      <Editor v-model:modelValue="form.description" />
+    </el-tab-pane>
+  </el-tabs>
+  <ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="form.specsList" />
+</template>
+
+<script setup>
+import ProductAttributesAddForm from './Comp/ProductAttributesAddForm.vue'
+const route = useRoute()
+const message = useMessage() // 消息弹窗
+
+const tabName = ref('basic')
+const form = ref({
+  name: '',
+  category: '',
+  brand: '',
+  intro: '',
+  picUrl: '',
+  sliderPicUrls: [],
+  specsList: [],
+  skuList: [],
+  description: null
+})
+const rules = ref({})
+const attributesAddFormRef = ref() // 添加商品属性表单
+
+/** 删除属性*/
+function handleCloseProperty(index) {
+  form.value.specsList?.splice(index, 1)
+}
+
+const attributeIndex = ref(null)
+// 输入框显隐控制
+const inputVisible = computed(() => (index) => {
+  if (attributeIndex.value === null) return false
+  if (attributeIndex.value === index) return true
+})
+
+const inputValue = ref('') // 输入框值
+/** 输入框失去焦点或点击回车时触发 */
+async function handleInputConfirm(index, propertyId) {
+  if (inputValue.value) {
+    // 保存属性值
+    try {
+      // const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
+      const id = propertyId || parseInt(Math.random() * 1000000)
+      form.value.specsList[index].values.push({ id, name: inputValue.value })
+      message.success('添加成功')
+    } catch {
+      message.error('添加失败，请重试')
+    }
+  }
+  attributeIndex.value = null
+  inputValue.value = ''
+  form.value.skuList = getTableList()
+}
+
+function getTableList() {
+  let list = []
+  form.value.specsList.map((item) => {
+    if (!list.length) {
+      item.values.map((it) => {
+        const obj = {}
+        obj[it.id] = it.name
+        list.push(obj)
+      })
+    } else {
+      item.values.map((it, index) => {
+        if (index < list.length) {
+          list[index][it.id] = it.name
+        } else {
+          const obj = {}
+          obj[it.id] = it.name
+          list.push(obj)
+        }
+      })
+    }
+  })
+  return list
+}
+
+const inputRef = ref([]) //标签输入框Ref
+/** 显示输入框并获取焦点 */
+const showInput = async (index) => {
+  attributeIndex.value = index
+  inputRef.value[index].focus()
+}
+
+/** 解决 ref 在 v-for 中的获取问题*/
+const setInputRef = (el) => {
+  if (el === null || typeof el === 'undefined') return
+  // 如果不存在id相同的元素才添加
+  if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
+    inputRef.value.push(el)
+  }
+}
+
+function handleAddSpec() {
+  const id = parseInt(Math.random() * 1000)
+  form.value.specsList.push({ name: `测试规格${id}`, id, values: [] })
+}
+
+function onSubmit() {
+  message.success('保存成功！')
+}
+
+onMounted(() => {
+  if (route.query?.id) {
+    form.value = {
+      name: '商品名称哦~'
+    }
+  } else {
+    form.value = {
+      name: '',
+      category: '',
+      brand: '',
+      intro: '',
+      picUrl: '',
+      sliderPicUrls: [],
+      specsList: [],
+      skuList: [],
+      description: null
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/MiniMall/Product/index.vue
+++ b/src/views/MiniMall/Product/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <el-form
+    ref="queryFormRef"
+    :inline="true"
+    :model="queryParams"
+    class="-mb-15px"
+    label-width="68px"
+  >
+    <!-- TODO @puhui999：品牌应该是数据下拉哈 -->
+    <el-form-item label="品牌名称" prop="name">
+      <el-input
+        v-model="queryParams.name"
+        class="!w-240px"
+        clearable
+        placeholder="请输入品牌名称"
+        @keyup.enter="handleQuery"
+      />
+    </el-form-item>
+    <el-form-item label="创建时间" prop="createTime">
+      <el-date-picker
+        v-model="queryParams.createTime"
+        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        class="!w-240px"
+        end-placeholder="结束日期"
+        start-placeholder="开始日期"
+        type="daterange"
+        value-format="YYYY-MM-DD HH:mm:ss"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="handleQuery">
+        <Icon class="mr-5px" icon="ep:search" />
+        搜索
+      </el-button>
+      <el-button @click="resetQuery">
+        <Icon class="mr-5px" icon="ep:refresh" />
+        重置
+      </el-button>
+      <el-button plain type="primary" @click="openForm">
+        <Icon class="mr-5px" icon="ep:plus" />
+        新增
+      </el-button>
+    </el-form-item>
+  </el-form>
+
+  <!-- 列表 -->
+  <el-table v-loading="loading" class="mt-20px" :data="list" border>
+    <el-table-column type="expand" width="30">
+      <template #default="scope">
+        <div class="pl-100px pr-100px">
+          <el-table :data="scope.row.specsList">
+            <el-table-column label="规格名称" prop="" />
+            <el-table-column label="颜色" prop="color" />
+            <el-table-column label="售价" prop="price" />
+            <el-table-column label="成本价" prop="" />
+            <el-table-column label="简介" prop="intro" />
+          </el-table>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column key="id" label="产品编码" prop="id" />
+    <el-table-column show-overflow-tooltip label="产品名称" min-width="200" prop="name" />
+    <el-table-column label="分类" min-width="90" prop="salesCount" />
+    <el-table-column label="品牌" min-width="90" prop="stock" />
+    <el-table-column label="商品图" min-width="80">
+      <template #default="{ row }">
+        <el-image :src="row.picUrl" @click="imagePreview(row.picUrl)" class="w-30px h-30px" />
+      </template>
+    </el-table-column>
+    <el-table-column label="简介" min-width="70" prop="sort" />
+    <el-table-column :formatter="dateFormatter" label="创建时间" prop="createTime" width="180" />
+    <el-table-column fixed="right" label="操作" min-width="80">
+      <template #default="{ row }">
+        <!-- TODO @puhui999：【详情】，可以后面点做哈 -->
+        <el-button link type="primary" @click="openForm(row.id)"> 修改 </el-button>
+        <el-button link type="danger" @click="handleDelete(row.id)"> 删除 </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <!-- 分页 -->
+  <Pagination
+    v-model:limit="queryParams.pageSize"
+    v-model:page="queryParams.pageNo"
+    :total="total"
+    @pagination="getList"
+  />
+</template>
+
+<script setup name="Product">
+import { dateFormatter } from '@/utils/formatTime'
+import { createImageViewer } from '@/components/ImageViewer'
+
+const { currentRoute, push } = useRouter()
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10
+}) // 查询参数
+
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+
+/** 删除按钮操作 */
+function handleDelete() {
+  console.log('123')
+  // try {
+  //   // 删除的二次确认
+  //   await message.delConfirm()
+  //   // 发起删除
+  //   // await ProductSpuApi.deleteSpu(id)
+  //   message.success(t('common.delSuccess'))
+  //   // 刷新列表
+  //   await getList()
+  // } catch { }
+}
+
+function getList() {
+  list.value = [
+    {
+      id: '1234',
+      name: '爱玩熊攀岩墙',
+      specsList: [
+        {
+          color: '黑色',
+          price: 1234
+        },
+        {
+          color: '灰色',
+          price: 4231
+        }
+      ]
+    },
+    {
+      id: '12345',
+      name: '熊攀尼攀岩墙',
+      specsList: [
+        {
+          color: '黑色',
+          price: 12345
+        }
+      ]
+    }
+  ]
+}
+/** 商品图预览 */
+function imagePreview(imgUrl) {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/**
+ * 新增或修改
+ *
+ * @param id 商品 SPU 编号
+ */
+function openForm(id) {
+  // 修改
+  if (typeof id == 'number') {
+    push({
+      path: '/miniMall/productEdit',
+      query: { id }
+    })
+    return
+  }
+  // 新增
+  push('/miniMall/productAdd')
+}
+
+watch(
+  () => currentRoute.value,
+  () => {
+    getList()
+  }
+)
+
+handleQuery()
+</script>
+
+<style lang="scss" scoped>
+.demo-table-expand {
+  padding-left: 42px;
+
+  :deep(.el-form-item__label) {
+    width: 82px;
+    font-weight: bold;
+    color: #99a9bf;
+  }
+}
+</style>