From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目

---
 src/views/mall/product/spu/index.vue |  457 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 457 insertions(+), 0 deletions(-)

diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
new file mode 100644
index 0000000..e12403c
--- /dev/null
+++ b/src/views/mall/product/spu/index.vue
@@ -0,0 +1,457 @@
+<!-- 鍟嗗搧涓績 - 鍟嗗搧鍒楄〃  -->
+<template>
+  <doc-alert title="銆愬晢鍝併�戝晢鍝� SPU 涓� SKU" url="https://doc.iocoder.cn/mall/product-spu-sku/" />
+
+  <!-- 鎼滅储宸ヤ綔鏍� -->
+  <ContentWrap>
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <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="categoryId">
+        <el-cascader
+          v-model="queryParams.categoryId"
+          :options="categoryList"
+          :props="defaultProps"
+          class="w-1/1"
+          clearable
+          filterable
+          placeholder="璇烽�夋嫨鍟嗗搧鍒嗙被"
+        />
+      </el-form-item>
+      <el-form-item label="鍒涘缓鏃堕棿" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="缁撴潫鏃ユ湡"
+          start-placeholder="寮�濮嬫棩鏈�"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          鎼滅储
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          閲嶇疆
+        </el-button>
+        <el-button
+          v-hasPermi="['product:spu:create']"
+          plain
+          type="primary"
+          @click="openForm(undefined)"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          鏂板
+        </el-button>
+        <el-button
+          v-hasPermi="['product:spu:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          瀵煎嚭
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 鍒楄〃 -->
+  <ContentWrap>
+    <el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick">
+      <el-tab-pane
+        v-for="item in tabsData"
+        :key="item.type"
+        :label="item.name + '(' + item.count + ')'"
+        :name="item.type"
+      />
+    </el-tabs>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column type="expand">
+        <template #default="{ row }">
+          <el-form class="spu-table-expand" label-position="left">
+            <el-row>
+              <el-col :span="24">
+                <el-row>
+                  <el-col :span="8">
+                    <el-form-item label="鍟嗗搧鍒嗙被:">
+                      <span>{{ formatCategoryName(row.categoryId) }}</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="甯傚満浠�:">
+                      <span>{{ fenToYuan(row.marketPrice) }}</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="鎴愭湰浠�:">
+                      <span>{{ fenToYuan(row.costPrice) }}</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-row>
+                  <el-col :span="8">
+                    <el-form-item label="娴忚閲�:">
+                      <span>{{ row.browseCount }}</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="铏氭嫙閿�閲�:">
+                      <span>{{ row.virtualSalesCount }}</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column label="鍟嗗搧缂栧彿" min-width="140" prop="id" />
+      <el-table-column label="鍟嗗搧淇℃伅" min-width="300">
+        <template #default="{ row }">
+          <div class="flex">
+            <el-image
+              fit="cover"
+              :src="row.picUrl"
+              class="flex-none w-50px h-50px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <div class="ml-4 overflow-hidden">
+              <el-tooltip effect="dark" :content="row.name" placement="top">
+                <div>
+                  {{ row.name }}
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="浠锋牸" min-width="160" prop="price">
+        <template #default="{ row }"> 楼 {{ fenToYuan(row.price) }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="閿�閲�" min-width="90" prop="salesCount" />
+      <el-table-column align="center" label="搴撳瓨" min-width="90" prop="stock" />
+      <el-table-column align="center" label="鎺掑簭" min-width="70" prop="sort" />
+      <el-table-column align="center" label="閿�鍞姸鎬�" min-width="80">
+        <template #default="{ row }">
+          <template v-if="row.status >= 0">
+            <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              active-text="涓婃灦"
+              inactive-text="涓嬫灦"
+              inline-prompt
+              @change="handleStatusChange(row)"
+            />
+          </template>
+          <template v-else>
+            <el-tag type="info">鍥炴敹绔�</el-tag>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="鍒涘缓鏃堕棿"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column align="center" fixed="right" label="鎿嶄綔" min-width="200">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openDetail(row.id)"> 璇︽儏 </el-button>
+          <el-button
+            v-hasPermi="['product:spu:update']"
+            link
+            type="primary"
+            @click="openForm(row.id)"
+          >
+            淇敼
+          </el-button>
+          <template v-if="queryParams.tabType === 4">
+            <el-button
+              v-hasPermi="['product:spu:delete']"
+              link
+              type="danger"
+              @click="handleDelete(row.id)"
+            >
+              鍒犻櫎
+            </el-button>
+            <el-button
+              v-hasPermi="['product:spu:update']"
+              link
+              type="primary"
+              @click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)"
+            >
+              鎭㈠
+            </el-button>
+          </template>
+          <template v-else>
+            <el-button
+              v-hasPermi="['product:spu:update']"
+              link
+              type="danger"
+              @click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)"
+            >
+              鍥炴敹
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 鍒嗛〉 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { TabsPaneContext } from 'element-plus'
+import { createImageViewer } from '@/components/ImageViewer'
+import { dateFormatter } from '@/utils/formatTime'
+import { defaultProps, handleTree, treeToString } from '@/utils/tree'
+import { ProductSpuStatusEnum } from '@/utils/constants'
+import { fenToYuan } from '@/utils'
+import download from '@/utils/download'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import * as ProductCategoryApi from '@/api/mall/product/category'
+
+defineOptions({ name: 'ProductSpu' })
+
+const message = useMessage() // 娑堟伅寮圭獥
+const route = useRoute() // 璺敱
+const { t } = useI18n() // 鍥介檯鍖�
+const { push } = useRouter() // 璺敱璺宠浆
+
+const loading = ref(false) // 鍒楄〃鐨勫姞杞戒腑
+const exportLoading = ref(false) // 瀵煎嚭鐨勫姞杞戒腑
+const total = ref(0) // 鍒楄〃鐨勬�婚〉鏁�
+const list = ref<ProductSpuApi.Spu[]>([]) // 鍒楄〃鐨勬暟鎹�
+// tabs 鏁版嵁
+const tabsData = ref([
+  {
+    name: '鍑哄敭涓�',
+    type: 0,
+    count: 0
+  },
+  {
+    name: '浠撳簱涓�',
+    type: 1,
+    count: 0
+  },
+  {
+    name: '宸插敭缃�',
+    type: 2,
+    count: 0
+  },
+  {
+    name: '璀︽垝搴撳瓨',
+    type: 3,
+    count: 0
+  },
+  {
+    name: '鍥炴敹绔�',
+    type: 4,
+    count: 0
+  }
+])
+
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  tabType: 0,
+  name: '',
+  categoryId: undefined,
+  createTime: undefined
+}) // 鏌ヨ鍙傛暟
+const queryFormRef = ref() // 鎼滅储鐨勮〃鍗昍ef
+
+/** 鏌ヨ鍒楄〃 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductSpuApi.getSpuPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 鍒囨崲 Tab */
+const handleTabClick = (tab: TabsPaneContext) => {
+  queryParams.value.tabType = tab.paneName as number
+  getList()
+}
+
+/** 鑾峰緱姣忎釜 Tab 鐨勬暟閲� */
+const getTabsCount = async () => {
+  const res = await ProductSpuApi.getTabsCount()
+  for (let objName in res) {
+    tabsData.value[Number(objName)].count = res[objName]
+  }
+}
+
+/** 娣诲姞鍒颁粨搴� / 鍥炴敹绔欑殑鐘舵�� */
+const handleStatus02Change = async (row: any, newStatus: number) => {
+  try {
+    // 浜屾纭
+    const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '鍔犲叆鍒板洖鏀剁珯' : '鎭㈠鍒颁粨搴�'
+    await message.confirm(`纭瑕�"${row.name}"${text}鍚楋紵`)
+    // 鍙戣捣淇敼
+    await ProductSpuApi.updateStatus({ id: row.id, status: newStatus })
+    message.success(text + '鎴愬姛')
+    // 鍒锋柊 tabs 鏁版嵁
+    await getTabsCount()
+    // 鍒锋柊鍒楄〃
+    await getList()
+  } catch {}
+}
+
+/** 鏇存柊涓婃灦/涓嬫灦鐘舵�� */
+const handleStatusChange = async (row: any) => {
+  try {
+    // 浜屾纭
+    const text = row.status ? '涓婃灦' : '涓嬫灦'
+    await message.confirm(`纭瑕�${text}"${row.name}"鍚楋紵`)
+    // 鍙戣捣淇敼
+    await ProductSpuApi.updateStatus({ id: row.id, status: row.status })
+    message.success(text + '鎴愬姛')
+    // 鍒锋柊 tabs 鏁版嵁
+    await getTabsCount()
+    // 鍒锋柊鍒楄〃
+    await getList()
+  } catch {
+    // 寮傚父鏃讹紝闇�瑕侀噸缃洖涔嬪墠鐨勫��
+    row.status =
+      row.status === ProductSpuStatusEnum.DISABLE.status
+        ? ProductSpuStatusEnum.ENABLE.status
+        : ProductSpuStatusEnum.DISABLE.status
+  }
+}
+
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = async (id: number) => {
+  try {
+    // 鍒犻櫎鐨勪簩娆＄‘璁�
+    await message.delConfirm()
+    // 鍙戣捣鍒犻櫎
+    await ProductSpuApi.deleteSpu(id)
+    message.success(t('common.delSuccess'))
+    // 鍒锋柊tabs鏁版嵁
+    await getTabsCount()
+    // 鍒锋柊鍒楄〃
+    await getList()
+  } catch {}
+}
+
+/** 鍟嗗搧鍥鹃瑙� */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 鏂板鎴栦慨鏀� */
+const openForm = (id?: number) => {
+  // 淇敼
+  if (typeof id === 'number') {
+    push({ name: 'ProductSpuEdit', params: { id } })
+    return
+  }
+  // 鏂板
+  push({ name: 'ProductSpuAdd' })
+}
+
+/** 鏌ョ湅鍟嗗搧璇︽儏 */
+const openDetail = (id: number) => {
+  push({ name: 'ProductSpuDetail', params: { id } })
+}
+
+/** 瀵煎嚭鎸夐挳鎿嶄綔 */
+const handleExport = async () => {
+  try {
+    // 瀵煎嚭鐨勪簩娆＄‘璁�
+    await message.exportConfirm()
+    // 鍙戣捣瀵煎嚭
+    exportLoading.value = true
+    const data = await ProductSpuApi.exportSpu(queryParams.value)
+    download.excel(data, '鍟嗗搧鍒楄〃.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 鑾峰彇鍒嗙被鐨勮妭鐐圭殑瀹屾暣缁撴瀯 */
+const categoryList = ref() // 鍒嗙被鏍�
+const formatCategoryName = (categoryId: number) => {
+  return treeToString(categoryList.value, categoryId)
+}
+
+/** 婵�娲绘椂 */
+onActivated(() => {
+  getList()
+})
+
+/** 鍒濆鍖� **/
+onMounted(async () => {
+  // 瑙ｆ瀽璺敱鐨� categoryId
+  if (route.query.categoryId) {
+    queryParams.value.categoryId = route.query.categoryId
+  }
+  // 鑾峰緱鍟嗗搧淇℃伅
+  await getTabsCount()
+  await getList()
+  // 鑾峰緱鍒嗙被鏍�
+  const data = await ProductCategoryApi.getCategoryList({})
+  categoryList.value = handleTree(data, 'id', 'parentId')
+})
+</script>
+<style lang="scss" scoped>
+.spu-table-expand {
+  padding-left: 42px;
+
+  :deep(.el-form-item__label) {
+    width: 82px;
+    font-weight: bold;
+    color: #99a9bf;
+  }
+}
+</style>

--
Gitblit v1.8.0