添加商家分类管理页面、商家管理修改

src/api/shop.js

@@ -47,6 +47,24 @@ export function businessCategoryStatus(categoryId) {
 }
 
 
+// 查询商家分类列表
+export function businessCategoryRelationPage(query) {
+  return request({
+    url: '/business/businessCategoryRelation/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增商家分类关联
+export function businessCategoryRelationAdd(data) {
+  return request({
+    url: `/business/businessCategoryRelation/add`,
+    method: 'post',
+    data
+  })
+}
+
 // 新增商家
 export function businessAdd(data) {
   return request({

src/views/goods/components/goodsAddTab1.vue

@@ -147,7 +147,7 @@
         ></el-input>
       </el-form-item>
 
-      <!-- <el-form-item label="商品类型" prop="productPaymentMode">
+      <el-form-item label="商品类型" prop="productPaymentMode">
         <el-select
           v-model="form.productPaymentMode"
           :disabled="
@@ -164,7 +164,7 @@
             :value="v.value"
           />
         </el-select>
-      </el-form-item> -->
+      </el-form-item>
 
       <el-form-item label="是否可以赠送积分" prop="canGivePoint">
         <el-radio-group v-model="form.canGivePoint">

src/views/goods/list.vue

@@ -69,12 +69,12 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-    <!-- <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8">
       <el-tabs v-model="productPaymentMode" @tab-click="handleClick">
         <el-tab-pane label="普通商品" name="0"></el-tab-pane>
         <el-tab-pane label="积分商品" name="1"></el-tab-pane>
       </el-tabs>
-    </el-row> -->
+    </el-row>
     <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" @sort-change="sortChange"
       :border="TableBorder" :size="ELTableSize">
       <el-table-column type="index" width="55" label="序号" align="center">

src/views/shop/category.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize"
+            label-width="auto">
+
+            <el-form-item label="分类名称" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入" clearable
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+
+            <el-form-item label="状态" prop="shelvedStatus">
+                <el-select v-model="queryParams.shelvedStatus" placeholder="请选择" clearable>
+                    <el-option label="上架" :value="1" />
+                    <el-option label="下架" :value="0" />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-button type="primary" :size="ELsize" @click="handleAdd()">新增</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table :border="TableBorder" :size="ELTableSize" v-loading="loading" :data="dataList">
+            <el-table-column type="index" width="55" label="序号" align="center">
+                <template slot-scope="{$index}">
+                    {{ $getTableIndex(queryParams, $index + 1) }}
+                </template>
+            </el-table-column>
+            <el-table-column label="分类名称" align="center" prop="name" show-overflow-tooltip>
+                <template slot-scope="{row}">
+                    {{ row.name | TableItemEmpty }}
+                </template>
+            </el-table-column>
+            <el-table-column label="分类图标" align="center" prop="categoryIcon" show-overflow-tooltip>
+                <template slot-scope="{row}">
+                    <el-image :src="row.categoryIcon" fit="fill" :preview-src-list="[row.categoryIcon]" style="width: 50px; height: 50px" />
+                </template>
+            </el-table-column>
+            <el-table-column label="排序" align="center">
+                <template slot-scope="{row}">
+                    {{ row.orderIndex | TableItemEmpty }}
+                </template>
+            </el-table-column>
+
+            <el-table-column label="状态" align="center">
+                <template slot-scope="{row}">
+                    <!-- <StatusTag :status-vo="row.shelvedStatus | ShopStatusOptionFilter(true)" /> -->
+                    <el-tag :type="row.shelvedStatus ? 'success' : 'danger'">{{ row.shelvedStatus ? '上架' : '下架'
+                    }}</el-tag>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="创建时间" align="center">
+                <template slot-scope="{row}">
+                    {{ row.createTime | TableItemEmpty }}
+                </template>
+            </el-table-column>
+
+            <el-table-column label="操作" align="center" width="150">
+                <template slot-scope="{row}">
+                    <el-button type="text" :size="ELTableSize" @click="handleAdd(row)">修改</el-button>
+                    <el-button type="text" :size="ELTableSize" @click="handleDelete(row)">删除</el-button>
+                    <el-button type="text" :size="ELTableSize" @click="handleShelved(row)">{{ row.shelvedStatus ? '下架' :
+                        '上架' }}</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <AddCategory ref="addCategoryRef" @success="getList" />
+    </div>
+</template>
+
+<script>
+import { businessCategoryPage, businessCategoryDel, businessCategoryStatus } from "@/api/shop.js";
+import getListApi from "@/mixins/getListApi";
+import AddCategory from "./components/AddCategory.vue";
+
+export default {
+    mixins: [getListApi],
+    components: { AddCategory },
+    data() {
+        return {
+            listURL: businessCategoryPage,
+        }
+    },
+    created() {
+    },
+    methods: {
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.categoryId;
+            const categoryName = row.name || '';
+            this.$MessageBoxConfirm({
+                text: `是否删除"${categoryName}"分类？`, confirmCallback: async (callback) => {
+                    try {
+                        await businessCategoryDel(ids);
+                        this.$successMsg(`删除"${categoryName}"分类成功`);
+                        this.getList();
+                    } catch { } finally {
+                        callback && callback();
+                    }
+                }
+            });
+        },
+        /** 上架/下架按钮操作 */
+        handleShelved(row) {
+            const ids = row.categoryId;
+            const categoryName = row.name || '';
+            this.$MessageBoxConfirm({
+                text: `是否${row.shelvedStatus ? '下架' : '上架'}"${categoryName}"分类？`, confirmCallback: async (callback) => {
+                    try {
+                        await businessCategoryStatus(ids, row.shelvedStatus ? 0 : 1);
+                        this.$successMsg(`${row.shelvedStatus ? '下架' : '上架'}"${categoryName}"分类成功`);
+                        this.getList();
+                    } catch { } finally {
+                        callback && callback();
+                    }
+                }
+            });
+        },
+        /** 新增按钮操作 */
+        handleAdd(row) {
+            this.$refs.addCategoryRef.open(row);
+        },
+    }
+}
+</script>
+
+<style lang='scss' scoped></style>

src/views/shop/components/AddCategory.vue

@@ -0,0 +1,97 @@
+<template>
+    <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
+        :wrapperClosable="true" :size="$drawerWidth(700)">
+        <el-form :model="FormData" ref="form" :size="ELsize" label-width="auto" :rules="rules">
+            <el-form-item label="分类名称" prop="name">
+                <el-input v-model="FormData.name" placeholder="请输入分类名称" :maxlength="50" />
+            </el-form-item>
+            <el-form-item label="分类图标" prop="categoryIcon">
+                <ImageUpload v-model="FormData.categoryIcon" :limit="1" />
+            </el-form-item>
+            <el-form-item label="排序" prop="orderIndex">
+                <el-input v-model="FormData.orderIndex" placeholder="请输入排序" :minlength="0"/>
+            </el-form-item>
+            <el-form-item label="是否上架" prop="shelvedStatus">
+                <el-radio-group v-model="FormData.shelvedStatus">
+                    <el-radio :label="1">上架</el-radio>
+                    <el-radio :label="0">下架</el-radio>
+                </el-radio-group>
+            </el-form-item>
+        </el-form>
+
+
+        <template v-slot:footer>
+            <el-button type="primary" :loading="loading" :size="ELsize" @click="handleSubmit">确定</el-button>
+            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
+        </template>
+    </Drawer>
+</template>
+
+<script>
+import { businessCategoryAdd, businessCategoryEdit } from "@/api/shop.js";
+export default {
+    data() {
+        return {
+            DrawerTitle: '新增商家分类',
+            DrawerVisible: false,
+            skeletonLoading: false,
+            FormData: {
+                name: '',
+                orderIndex: 1,
+                shelvedStatus: 1,
+            },
+            loading: false,
+            rules: {
+                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
+                orderIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+                shelvedStatus: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
+                categoryIcon: [{ required: true, message: '请上传分类图标', trigger: 'change' }],
+            },
+        };
+    },
+    created() {
+        // setTimeout(() => {
+        //     this.openHandle({ businessId: 22, businessName: "总部国际专卖店" })
+        // }, 100);
+    },
+
+    methods: {
+        open(row) {
+            if (row) {
+                this.DrawerTitle = '修改商家分类';
+                this.FormData = {
+                    ...row,
+                    shelvedStatus: row.shelvedStatus ? 1 : 0,
+                };
+            } else {
+                this.DrawerTitle = '新增商家分类';
+            }
+            this.DrawerVisible = true;
+        },
+        handleSubmit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    // this.$emit('submit', this.FormData);
+                    let url = this.FormData.categoryId ? businessCategoryEdit : businessCategoryAdd;
+                    url(this.FormData).then(res => {
+                        this.loading = false;
+                        if (res.code === 200) {
+                            this.$message.success(this.FormData.id ? '修改成功' : '新增成功');
+                            this.DrawerVisible = false;
+                            this.FormData = {
+                                name: '',
+                                orderIndex: 1,
+                                shelvedStatus: 1,
+                            };
+                            this.$emit('success');
+                        }
+                    })
+                } else {
+                    console.log('校验失败');
+                }
+            });
+        }
+    }
+};
+</script>

src/views/shop/components/SetCategory.vue

@@ -0,0 +1,79 @@
+<template>
+    <el-dialog :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
+        :wrapperClosable="true" width="600px">
+        <el-form :model="FormData" ref="form" :size="ELsize" label-width="auto">
+            <el-form-item label="分类" prop="categoryIds">
+                <el-select v-model="FormData.categoryIds" placeholder="请选择分类" clearable filterable multiple
+                    style="width: 100%;">
+                    <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.name"
+                        :value="item.categoryId" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click.stop="DrawerVisible = false">取消</el-button>
+            <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { businessCategoryList, businessCategoryRelationPage, businessCategoryRelationAdd } from "@/api/shop.js";
+export default {
+    data() {
+        return {
+            DrawerTitle: '设置分类',
+            DrawerVisible: false,
+            skeletonLoading: false,
+            FormData: {
+                businessId: '',
+                categoryIds: [],
+            },
+            loading: false,
+            categoryList: [],
+        };
+    },
+    created() {
+        this.getCategoryList();
+    },
+
+    methods: {
+        open(row) {
+            businessCategoryRelationPage({
+                businessId: row.businessId,
+            }).then(res => {
+                if (res.code === 200) {
+                    this.FormData.categoryIds = res.data.map(item => item.categoryId) || [];
+                    this.FormData.businessId = row.businessId;
+                    this.DrawerVisible = true;
+                }
+            })
+        },
+        getCategoryList() {
+            businessCategoryList().then(res => {
+                if (res.code === 200) {
+                    this.categoryList = res.data || [];
+                }
+            })
+        },
+        handleSubmit() {
+            // console.log(this.FormData)
+            // return
+            this.loading = true;
+            businessCategoryRelationAdd({
+                businessId: this.FormData.businessId,
+                categoryIds: this.FormData.categoryIds || [],
+            }).then(res => {
+                this.loading = false;
+                if (res.code === 200) {
+                    this.$message.success('设置成功');
+                    this.DrawerVisible = false;
+                    this.$emit('success');
+                }
+            }).catch(() => {
+                this.loading = false;
+            })
+        }
+    }
+};
+</script>

src/views/shop/list.vue

@@ -87,9 +87,10 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="操作" align="center" width="120">
+      <el-table-column label="操作" align="center" width="170">
         <template slot-scope="{row}">
           <el-button type="text" :size="ELTableSize" @click="handleUpdate(row)">修改</el-button>
+          <el-button type="text" :size="ELTableSize" @click="handleSetCategory(row)">设置分类</el-button>
           <el-dropdown style="margin-left: 5px;">
             <el-button type="text" :size="ELTableSize">更多<i class="el-icon-arrow-down" /></el-button>
             <!-- <span class="el-dropdown-link">
@@ -137,6 +138,8 @@
     <!-- <QueueOrder ref="queueOrderRef" /> -->
     <!-- 排队导入 -->
     <!-- <QueueImport ref="queueImportRef" :ImportApi="importSubsidyQueueApi" @refresh="getList" /> -->
+
+    <SetCategory ref="setCategoryRef" @success="getList" />
   </div>
 </template>
 
@@ -151,6 +154,7 @@ import QueueImport from "@/components/FileImport/index.vue";
 import getListApi from "@/mixins/getListApi";
 import { ShopTypeOption, ShopTypeEnum, ShopStatusEnum } from "@/utils/statusEnum.js";
 import { importSubsidyQueueApi } from "@/api/shop";
+import SetCategory from "@/views/shop/components/SetCategory.vue";
 
 export default {
   mixins: [getListApi],
@@ -159,7 +163,8 @@ export default {
     PayConfig,
     BusinessData,
     QueueOrder,
-    QueueImport
+    QueueImport,
+    SetCategory
   },
   data() {
     return {
@@ -272,7 +277,9 @@ export default {
         path: '/shop/details'
       })
     },
-
+    handleSetCategory(row) {
+      this.$refs.setCategoryRef.open(row)
+    }
   }
 }
 </script>