feat: 商品管理+首页商品合并

src/config/menuList.ts

@@ -16,7 +16,7 @@ export default [
     modifyTime: '2024-07-15 15:45:58',
     tag: null,
     childList: [
-      {
+      /*  {
         id: 38,
         resourceName: '首页商品',
         resourceType: 1,
@@ -33,7 +33,7 @@ export default [
         modifyTime: '2024-06-19 17:56:01',
         tag: null,
         childList: []
-      },
+      }, */
       {
         id: 39,
         resourceName: '商品管理',

src/views/goods/appCategory/index.vue

@@ -152,8 +152,13 @@ const onClickChooseResourceBtn = (data: Data) => {
   curFileData.value = data
   showFileExplorer.value = true
 }
-const handleChooseResourceFileCallback = (files: FileItem[], curFileData: Data) => {
+const handleChooseResourceFileCallback = async (files: FileItem[], curFileData: Data) => {
-  curFileData.imageUrl = files[0].resourceUrl
+  const imgUrl = files[0].resourceUrl
+  await api.commodity.updateAppCategory.post!({
+    id: curFileData.id,
+    imageUrl: imgUrl
+  })
+  curFileData.imageUrl = imgUrl
 }
 </script>
 

src/views/goods/commodity/config.ts

@@ -19,9 +19,9 @@ export const initConfig = () => {
       isNew: { label: '新品', slot: 'isNew' },
       isFlash: { label: '限时秒杀', slot: 'isFlash' },
       btn: {
-        types: ['primary', 'info', 'warning', 'success', 'danger'],
+        types: ['primary', 'info', 'danger'],
-        names: ['编辑', '复制', '加入首页', '上下架', '删除'],
+        names: ['编辑', '复制', '删除'],
-        width: 230
+        width: 150
       }
     }
   })

src/views/goods/commodity/detail-dialog/editor.vue

@@ -9,7 +9,7 @@
     <Editor
       style="height: 500px; overflow-y: hidden"
       v-model="model"
-      :defaultConfig="{ placeholder: '请输入内容...' }"
+      :defaultConfig="editorConfig"
       mode="default"
       @onCreated="
         (editor: any) => {
@@ -23,15 +23,44 @@
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { ElMessage } from 'element-plus'
 
 const model = defineModel()
 
-// 模拟 ajax 异步获取内容
+// 编辑器配置
-/* onMounted(() => {
+const editorConfig = {
-  setTimeout(() => {
+  placeholder: '请输入内容...',
-    // model.value = '<p>模拟 Ajax 异步设置内容</p>'
+  MENU_CONF: {
-  }, 1500)
+    uploadImage: {
-}) */
+      // 自定义上传
+      async customUpload(file: File, insertFn: (url: string, alt: string, href: string) => void) {
+        try {
+          // 创建 FormData
+          const form = new FormData()
+          form.append('files', file)
+
+          // 调用上传接口
+          const res = await api.resource.uploadFile.post!<any>(form)
+
+          // 获取图片 URL
+          const imageUrl = res.data[0]?.url
+          if (imageUrl) {
+            // 插入图片到编辑器
+            insertFn(imageUrl, file.name, imageUrl)
+          } else {
+            ElMessage.error('图片上传失败')
+          }
+        } catch (error) {
+          console.error('图片上传失败:', error)
+          ElMessage.error('图片上传失败')
+        }
+      }
+    }
+  }
+}
+
+// 工具栏配置
+const toolbarConfig = {}
 
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()

src/views/goods/commodity/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <search-module :search="search" :table="table">
+    <search-module :search="search" :table="table" @search="onSearch">
       <template #btn>
         <el-button @click="onAddOrEdit('add', null)" type="success">新增</el-button>
       </template>
@@ -24,34 +24,60 @@
         </el-tree-select>
       </template>
     </search-module>
-    <table-module :table="table">
+    <div class="bg-white mt-2.5 pt-2.5 pl-2.5">
-      <template #headerBtn>
+      <el-radio-group v-model="commodityType" @change="onChangeCommodityType">
-        <el-radio-group v-model="commodityType" @change="onChangeCommodityType">
+        <el-radio-button
-          <el-radio-button
+          v-for="item in commodityTypeOptions"
-            v-for="item in commodityTypeOptions"
+          :key="item.value"
-            :key="item.value"
+          :value="item.value"
-            :value="item.value"
+          >{{ item.label }}</el-radio-button
-            >{{ item.label }}</el-radio-button
+        >
-          >
+      </el-radio-group>
-        </el-radio-group>
+    </div>
-      </template>
+    <table-module :table="table" v-show="commodityType !== 'frontPage'" class="!mt-0">
       <template #status="{ row }">
-        <el-icon v-if="row.status === 'online'" color="green"><Check /></el-icon>
+        <el-switch
-        <el-icon v-else color="red"><Close /></el-icon>
+          v-model="row.status"
+          :active-value="'online'"
+          :inactive-value="'down'"
+          size="small"
+          @change="onChangeStatus(row)"
+        />
       </template>
       <template #isNew="{ row }">
-        <el-icon v-if="row.isNew" color="green"><Check /></el-icon>
+        <el-switch
-        <el-icon v-else color="red"><Close /></el-icon>
+          v-model="row.isNew"
+          :active-value="1"
+          :inactive-value="0"
+          size="small"
+          @change="onChangeCommodityOtherStatus(row, 'isNew')"
+        />
       </template>
       <template #isFlash="{ row }">
-        <el-icon v-if="row.isFlash" color="green"><Check /></el-icon>
+        <el-switch
-        <el-icon v-else color="red"><Close /></el-icon>
+          v-model="row.isFlash"
+          :active-value="1"
+          :inactive-value="0"
+          size="small"
+          @change="onChangeCommodityOtherStatus(row, 'isFlash')"
+        />
       </template>
       <template #frontPage="{ row }">
-        <el-icon v-if="row.frontPage" color="green"><Check /></el-icon>
+        <el-switch
-        <el-icon v-else color="red"><Close /></el-icon>
+          v-model="row.frontPage"
+          :active-value="1"
+          :inactive-value="0"
+          size="small"
+          @change="onChangeCommodityOtherStatus(row, 'frontPage')"
+        />
       </template>
     </table-module>
+    <home-goods
+      v-show="commodityType === 'frontPage'"
+      :rondomNumber="rondomNumber"
+      :searchData="search.$data"
+      class="!mt-0"
+    ></home-goods>
   </div>
 </template>
 
@@ -59,8 +85,7 @@
 import { ElMessage } from 'element-plus'
 import { initConfig } from './config'
 import { useCommodityType, handleLoadNode } from './use-method'
-import { Check } from '@element-plus/icons-vue'
+import HomeGoods from '../home-goods/index.vue'
-import { Close } from '@element-plus/icons-vue'
 
 const router = useRouter()
 /** 新增&编辑 */
@@ -76,18 +101,7 @@ const onAddOrEdit = (type: string, row: any) => {
 const onCopy = async (row: any) => {
   await api.commodity.copyCommodity.post!({ productId: row.id })
   ElMessage.success('复制成功')
-  table.value.$onGetData(table.value)
+  table.value.$onGetData(table.value, 1, search)
-}
-
-// 加入首页
-const onAddHome = (row: any) => {
-  handleMessageBox({
-    msg: `是否加入首页?`,
-    success: api.commodity.changeCommodityInfo.post!,
-    data: { id: row.id, frontPage: 1 }
-  }).then(() => {
-    table.value.$onGetData(table.value)
-  })
 }
 
 // 删除
@@ -97,32 +111,54 @@ const onDelete = (row: any) => {
     success: api.commodity.changeCommodityInfo.post!,
     data: { id: row.id, isDelete: 1 }
   }).then(() => {
-    table.value.$onGetData(table.value)
+    table.value.$onGetData(table.value, 1, search)
   })
 }
 
 // 改变上下架
 const onChangeStatus = (row: any) => {
-  const type = row.status === 'online' ? '下架' : '上架'
+  const type = row.status === 'online' ? '上架' : '下架'
   handleMessageBox({
     msg: `是否确认${type}吗?`,
     success: api.commodity.changeCommodityInfo.post!,
     data: {
       id: row.id,
-      status: row.status === 'online' ? 'down' : 'online'
+      status: row.status
+    },
+    fail: () => {
+      row.status = row.status === 'online' ? 'down' : 'online'
     }
-  }).then(() => {
-    table.value.$onGetData(table.value)
   })
+    .then(() => {
+      table.value.$onGetData(table.value, 1, search)
+    })
+    .catch(() => {
+      row.status = row.status === 'online' ? 'down' : 'online'
+    })
 }
 
+/** 改变其他状态 */
+const onChangeCommodityOtherStatus = (row: any, status: string) => {
+  const type = { isNew: '新品', isFlash: '限时秒杀', frontPage: '加入首页' }[status]
+  handleMessageBox({
+    msg: `是否将此商品${row[status] === 1 ? '设置' : '取消'}${type}吗?`,
+    success: api.commodity.changeCommodityInfo.post!,
+    data: {
+      id: row.id,
+      [status]: row[status]
+    },
+    fail: () => {
+      row[status] = row[status] === 1 ? 0 : 1
+    }
+  }).catch(() => {
+    row[status] = row[status] === 1 ? 0 : 1
+  })
+}
 /** 初始化页面 */
 const ConfigData = initConfig()
 const { search, table } = handleInit(ConfigData, api.commodity.getCommodityList.post, [
   onAddOrEdit.bind(null, 'edit'),
   onCopy,
-  onAddHome,
-  onChangeStatus,
   onDelete
 ])
 const { commodityType, onChangeCommodityType, commodityTypeOptions } = useCommodityType(
@@ -131,6 +167,15 @@ const { commodityType, onChangeCommodityType, commodityTypeOptions } = useCommod
 )
 onChangeCommodityType(commodityType.value)
 
+const rondomNumber = ref(NaN)
+const onSearch = (val: any) => {
+  if (search.value.$data.status === 'frontPage') {
+    rondomNumber.value = Math.random()
+  } else {
+    table.value.$onGetData(table.value, 1, val)
+  }
+}
+
 /** 页面缓存 */
 defineOptions({ name: 'Commodity' })
 </script>

src/views/goods/commodity/use-method.ts

@@ -1,32 +1,35 @@
-type TCommodityType = 'all' | 'online' | 'down' | 'draft' | 'delete'
+type TCommodityType = 'all' | 'online' | 'down' | 'draft' | 'delete' | 'frontPage'
 
 export const useCommodityType = (search: any, table: any) => {
   let beforeValue = 'online'
   const commodityType = ref<TCommodityType>('online')
   const commodityTypeOptions = [
     { label: '在线商品', value: 'online' },
+    { label: '首页商品', value: 'frontPage' },
     { label: '所有商品', value: 'all' },
     { label: '下架商品', value: 'down' },
     { label: '草稿', value: 'draft' },
     { label: '已删商品', value: 'delete' }
   ]
-  const cacheTableData = { all: [], online: [], down: [], draft: [], delete: [] } // 缓存表单数据
+  const cacheTableData = { all: [], online: [], down: [], draft: [], delete: [], frontPage: [] } // 缓存表单数据
-  const cacheTablePage = { all: {}, online: {}, down: {}, draft: {}, delete: {} } // 缓存表单页面数据
+  const cacheTablePage = { all: {}, online: {}, down: {}, draft: {}, delete: {}, frontPage: {} } // 缓存表单页面数据
-  const onChangeCommodityType = (type: 'all' | 'online' | 'down' | 'draft' | 'delete') => {
+  const onChangeCommodityType = (
+    type: 'all' | 'online' | 'down' | 'draft' | 'delete' | 'frontPage'
+  ) => {
     cacheTableData[beforeValue as typeof type] = toRaw(table.value.$data)
     cacheTablePage[beforeValue as typeof type] = toRaw(table.value.$pages)
     beforeValue = type
-    search.value.$default = { status: type }
+    search.value.$default.status = type
-    search.value.$data = { status: type }
+    search.value.$data.status = type
-    handleSetTableConfig(table, type)
+    // handleSetTableConfig(table, type)
     if (cacheTableData[type].length) {
       table.value.$data = cacheTableData[type]
       table.value.$pages = cacheTablePage[type]
     } else {
       if (type === 'all') {
-        search.value.$data = { status: '' }
+        search.value.$data.status = ''
         table.value.$onGetData(table.value, 1, search)
-      } else {
+      } else if (type !== 'frontPage') {
         table.value.$onGetData(table.value, 1, search)
       }
     }

src/views/goods/home-goods/config.ts

@@ -1,10 +1,6 @@
 const configData = ref()
 export const initConfig = () => {
   configData.value = pageConfig({
-    search: {
-      comTitle: { label: '标题', clearable: true },
-      adminCategoryId: { label: '类目', slot: 'adminCategoryId' }
-    },
     table: {
       id: { label: '产品ID' },
       title: { label: '标题' },
@@ -15,12 +11,13 @@ export const initConfig = () => {
         label: '在线',
         slot: 'status'
       },
+      frontPage: { label: '加入首页', slot: 'frontPage' },
       isNew: { label: '新品', slot: 'isNew' },
       isFlash: { label: '限时秒杀', slot: 'isFlash' },
       btn: {
-        types: ['primary', 'warning', 'success', 'danger'],
+        types: ['primary', 'warning', 'danger'],
-        names: ['编辑', '移除首页', '上架', '下架'],
+        names: ['编辑', '复制', '删除'],
-        width: 200
+        width: 150
       }
     }
   })

src/views/goods/home-goods/index.vue

@@ -1,39 +1,42 @@
 <template>
   <div>
-    <search-module :search="search" :table="table">
-      <template #adminCategoryId>
-        <el-tree-select
-          show-checkbox
-          v-model="search.$data.adminCategoryId"
-          :props="{
-            label: 'label',
-            children: 'children',
-            disabled: 'disabled',
-            isLeaf: (data: any) => {
-              return !data.hasChild
-            }
-          }"
-          :render-after-expand="false"
-          :load="handleLoadNode"
-          lazy
-          style="width: 240px"
-        >
-        </el-tree-select>
-      </template>
-    </search-module>
     <div id="table-drag-wrap">
       <table-module :table="table">
         <template #status="{ row }">
-          <el-icon v-if="row.status === 'online'" color="green"><Check /></el-icon>
+          <el-switch
-          <el-icon v-else color="red"><Close /></el-icon>
+            v-model="row.status"
+            :active-value="'online'"
+            :inactive-value="'down'"
+            size="small"
+            @change="onChangeStatus(row)"
+          />
+        </template>
+        <template #frontPage="{ row }">
+          <el-switch
+            v-model="row.frontPage"
+            :active-value="1"
+            :inactive-value="0"
+            @change="onChangeCommodityOtherStatus(row, 'frontPage')"
+            size="small"
+          />
         </template>
         <template #isNew="{ row }">
-          <el-icon v-if="row.isNew" color="green"><Check /></el-icon>
+          <el-switch
-          <el-icon v-else color="red"><Close /></el-icon>
+            v-model="row.isNew"
+            :active-value="1"
+            :inactive-value="0"
+            @change="onChangeCommodityOtherStatus(row, 'isNew')"
+            size="small"
+          ></el-switch>
         </template>
         <template #isFlash="{ row }">
-          <el-icon v-if="row.isFlash" color="green"><Check /></el-icon>
+          <el-switch
-          <el-icon v-else color="red"><Close /></el-icon>
+            v-model="row.isFlash"
+            :active-value="1"
+            :inactive-value="0"
+            @change="onChangeCommodityOtherStatus(row, 'isFlash')"
+            size="small"
+          ></el-switch>
         </template>
       </table-module>
     </div>
@@ -43,46 +46,65 @@
 <script lang="ts" setup>
 import { useDraggable } from 'vue-draggable-plus'
 import { initConfig } from './config'
-import { Check } from '@element-plus/icons-vue'
-import { Close } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 
-// 移除首页
+const props = defineProps<{ searchData: any; rondomNumber: number }>()
-const onRemoveHome = (row: any) => {
+
-  handleMessageBox({
+/** 复制 */
-    msg: `是否加入首页?`,
+const onCopy = async (row: any) => {
-    success: api.commodity.changeCommodityInfo.post!,
+  await api.commodity.copyCommodity.post!({ productId: row.id })
-    data: { id: row.id, frontPage: 0 }
+  ElMessage.success('复制成功')
-  }).then(() => {
+  table.value.$onGetData(table.value, 1, { ...props.searchData, frontPage: 1, status: undefined })
-    table.value.$onGetData(table.value)
-  })
 }
 
-// 下架
+// 改变上下架
-const onDown = (row: any) => {
+const onChangeStatus = (row: any) => {
+  const type = row.status === 'online' ? '上架' : '下架'
   handleMessageBox({
-    msg: `是否确认下架该商品?`,
+    msg: `是否确认${type}吗?`,
     success: api.commodity.changeCommodityInfo.post!,
     data: {
       id: row.id,
-      status: 'down'
+      status: row.status
+    },
+    fail: () => {
+      row.status = row.status === 'online' ? 'down' : 'online'
     }
+  })
+    .then(() => {
+      table.value.$onGetData(table.value, 1, {
+        ...props.searchData,
+        frontPage: 1,
+        status: undefined
+      })
+    })
+    .catch(() => {
+      row.status = row.status === 'online' ? 'down' : 'online'
+    })
+}
+
+// 删除
+const onDelete = (row: any) => {
+  handleMessageBox({
+    msg: `是否确认删除吗?`,
+    success: api.commodity.changeCommodityInfo.post!,
+    data: { id: row.id, isDelete: 1 }
   }).then(() => {
-    table.value.$onGetData(table.value)
+    table.value.$onGetData(table.value, 1, { ...props.searchData, frontPage: 1, status: undefined })
   })
 }
 
-// 上架
+const onChangeCommodityOtherStatus = (row: any, status: string) => {
-const onUp = (row: any) => {
+  const type = { isNew: '新品', isFlash: '限时秒杀' }[status]
   handleMessageBox({
-    msg: `是否确认上架该商品?`,
+    msg: `是否将此商品${row[status] === 1 ? '设置' : '取消'}${type}吗?`,
     success: api.commodity.changeCommodityInfo.post!,
-    data: {
+    data: { id: row.id, [status]: row[status] },
-      id: row.id,
+    fail: () => {
-      status: 'online'
+      row[status] = row[status] === 1 ? 0 : 1
     }
-  }).then(() => {
+  }).catch(() => {
-    table.value.$onGetData(table.value)
+    row[status] = row[status] === 1 ? 0 : 1
   })
 }
 
@@ -93,15 +115,13 @@ const onEdit = (row: any) => {
 
 /** 初始化页面 */
 const ConfigData = initConfig()
-const { search, table } = handleInit(ConfigData, api.commodity.getCommodityList.post, [
+const { table } = handleInit(ConfigData, api.commodity.getCommodityList.post, [
   onEdit,
-  onRemoveHome,
+  onCopy,
-  onUp,
+  onDelete
-  onDown
 ])
-search.value.$default = { frontPage: 1 }
 table.value.$pages.pageSize = 1000
-table.value.$onGetData(table.value, 1, search)
+table.value.$onGetData(table.value, 1, { frontPage: 1 })
 
 // 拖拽实例
 let draggableInstance: any = null
@@ -151,6 +171,28 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.searchData,
+  (val) => {
+    if (val.status === 'frontPage' && !table.value.$data.length) {
+      table.value.$onGetData(table.value, 1, { ...val, frontPage: 1, status: undefined })
+    }
+  }
+)
+
+watch(
+  () => props.rondomNumber,
+  (val) => {
+    if (val) {
+      table.value.$onGetData(table.value, 1, {
+        ...props.searchData,
+        frontPage: 1,
+        status: undefined
+      })
+    }
+  }
+)
+
 // 树结构懒加载后台类目
 const handleLoadNode = (node: any, resolve: any) => {
   api.commodity.getCategoryList.post!<any>({ parentId: node.data.value || 0 }).then((res) => {