ADD: 商品上架,下架

src/api/goods.js

@@ -7,6 +7,7 @@ export function getGoodsList(page, query={}){
     return axios.get(`/admin/goods/${page}${r}`)
 }
 
+// 批量上架,下架
 export function updateGoodsStatus(ids, status){
     return axios.post(`/admin/goods/changestatus`, {
         ids,

src/components/ListHeader.vue

@@ -8,6 +8,7 @@
                     <el-button  type="danger" size="small">批量删除</el-button>
                 </template>
             </el-popconfirm>
+            <slot/>
         </div>
         <el-tooltip v-if="btns.includes('refresh')" class="box-item" effect="dark" content="刷新数据" placement="top">
             <el-button text @click="$emit('refresh')">

src/composables/useCommon.js

@@ -103,6 +103,25 @@ export function useInitTable(opt = {}) {
             })
     }
 
+    // 批量修改状态
+    const handleMultiStatusChange = (status) => {
+        loading.value = true
+        opt.updateStatus(multiSelectionIds.value, status)
+            .then(res => {
+                toast("修改状态成功!")
+                // 清空选中
+                if (multipleTableRef.value) {
+                    multipleTableRef.value.clearSelection()
+                }
+                getData()
+            })
+            .finally(() => {
+                loading.value = false
+
+            })
+    }
+
+
     return {
         searchForm,
         resetSearchForm,
@@ -116,7 +135,8 @@ export function useInitTable(opt = {}) {
         handleStatusChange,
         handleSelectionChange,
         multipleTableRef,
-        handleMultiDelete
+        handleMultiDelete,
+        handleMultiStatusChange
     }
 
 

src/pages/goods/list.vue

@@ -23,10 +23,17 @@
             </Search>
 
             <!-- 新增 | 刷新 -->
-            <ListHeader @create="handleCreate" @refresh="getData" />
-
-            <el-table v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
+            <ListHeader layout="create,delete,refresh" @create="handleCreate" 
+            @refresh="getData" @delete="handleMultiDelete">
+                <el-button size="small" @click="handleMultiStatusChange(1)" v-if="searchForm.tab == 'all' || searchForm.tab == 'off'">上架</el-button>
+                <el-button size="small" @click="handleMultiStatusChange(0)" v-if="searchForm.tab == 'all' || searchForm.tab == 'saling'">下架</el-button>
+            </ListHeader>
+
+            <el-table ref="multipleTableRef"  @selection-change="handleSelectionChange"
+                v-loading="loading" element-loading-text="加载中..." 
+                element-loading-spinner="el-icon-loading"
                 :data="tableData" stripe style="width: 300%">
+                <el-table-column type="selection" width="55" />
                 <el-table-column label="商品" width="300">
                     <template #default="{ row }">
                         <div class="flex">
@@ -179,6 +186,10 @@ import { useInitTable, useInitForm } from "@/composables/useCommon.js"
 const roles = ref([])
 
 const {
+    handleSelectionChange,
+    multipleTableRef,
+    handleMultiDelete,
+    
     searchForm,
     resetSearchForm,
     tableData,
@@ -188,7 +199,7 @@ const {
     limit,
     getData,
     handleDelete,
-    handleStatusChange
+    handleMultiStatusChange
 } = useInitTable({
     searchForm: {
         title: "",
@@ -219,7 +230,7 @@ const {
     drawerTitle,
     handleSubmit,
     handleCreate,
-    handleEdit,
+    handleEdit
 
 } = useInitForm(
     {

src/pages/skus/list.vue

@@ -3,8 +3,12 @@
         <!-- 新增 | 刷新 -->
         <ListHeader layout="create,delete,refresh" @create="handleCreate" @refresh="getData" @delete="handleMultiDelete" />
 
-        <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" element-loading-text="加载中..."
-            element-loading-spinner="el-icon-loading" v-loading="loading" @selection-change="handleSelectionChange">
+        <el-table ref="multipleTableRef" 
+            :data="tableData" 
+            stripe style="width: 100%" element-loading-text="加载中..."
+            element-loading-spinner="el-icon-loading" 
+            v-loading="loading" 
+            @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" />
             <el-table-column prop="name" label="规格名称" />
             <el-table-column prop="default" label="规格值" width="380" />