2024.10.22 - 爆品分类和配销产品主图

src/api/explosiveProduct/category.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+// 查询分类列表
+export function getExplosiveProductCategory(data) {
+  return request({
+    url: '/explosive-products-category/getExplosiveProductsCategoryAll',
+    method: 'post',
+    data
+  })
+}
+
+//  新增分类
+export function addExplosiveProductCategory(data){
+  return request({
+    url: '/explosive-products-category/addExplosiveProductsCategory',
+    method: 'post',
+    data
+  })
+}
+
+
+//  编辑分类
+export function editExplosiveProductCategory(data){
+  return request({
+    url: '/explosive-products-category/updateExplosiveProductsCategory',
+    method: 'post',
+    data
+  })
+}
+
+
+// 删除分类
+export function  deleteExplosiveProductCategory(params){
+  return request({
+    url: "/explosive-products-category/deleteExplosiveProductsCategory",
+    method: "POST",
+    params
+  })
+}

src/views/explosiveProduct/category/EditCategory.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-dialog :title="dialogTitle" :visible.sync="editCategoryVsible" width="30%">
+    <el-form ref="editCategoryFormRef" :model="form" :rules="rules">
+      <el-form-item label="分类名称" prop="categoryName">
+        <el-input v-model="form.categoryName" placeholder="请填写分类名称"></el-input>
+      </el-form-item>
+
+      <el-form-item label="分类图片" prop="categoryImage">
+        <ImageUpload :limit="1" v-model="form.categoryImage"></ImageUpload>
+      </el-form-item>
+
+      <el-form-item label="排序值" prop="categorySort">
+        <el-input v-model="form.categorySort" placeholder="请填写排序值"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" :loading="isLoading" @click="handleConfirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import ImageUpload from '@/components/ImageUpload'
+import { addExplosiveProductCategory, editExplosiveProductCategory } from '@/api/explosiveProduct/category'
+
+export default {
+  components: { ImageUpload },
+  data() {
+    return {
+      editCategoryVsible: false,
+      dialogTitle: '新增分类',
+      form: {
+        id: '',
+        categoryName: '',
+        categoryImage: '',
+        categorySort: ''
+      },
+      rules: {
+        categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
+        categoryImage: [{ required: true, message: '请上传分类图片', trigger: 'blur' }]
+      },
+      isLoading: false,
+      categoryList: []
+    }
+  },
+
+  watch: {
+    editCategoryVsible(val) {
+      if (!val) {
+        this.form = {
+          id: '',
+          categoryName: '',
+          categoryImage: '',
+          categorySort: ''
+        }
+        this.dialogTitle = '新增分类'
+      }
+    }
+  },
+
+  methods: {
+    open(row) {
+      if (row) {
+        this.form.id = row.id
+        this.form.categoryName = row.categoryName
+        this.form.categoryImage = row.categoryImage
+        this.form.categorySort = row.categorySort
+        this.dialogTitle = '编辑分类'
+      }
+
+      this.editCategoryVsible = true
+    },
+
+
+
+    // 关闭弹窗
+    handleClose() {
+      this.editCategoryVsible = false
+    },
+
+    // 确定提交
+    async handleConfirm() {
+      try {
+        this.isLoading = true
+        await this.$refs.editCategoryFormRef.validate()
+        const api = this.form.id ? editExplosiveProductCategory : addExplosiveProductCategory
+        const res = await api(this.form)
+        if (res.code === '200') {
+          this.$message({
+            message: this.form.id ? '编辑成功' : '添加成功',
+            type: 'success'
+          })
+          this.$emit('refresh')
+          this.handleClose()
+        }
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/explosiveProduct/category/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="payreturnPage">
+    <!-- 搜索 -->
+    <div class="formSearch">
+      <!-- 搜索条件 -->
+      <el-form :inline="true" :model="query" class="demo-form-inline">
+        <el-form-item label="爆品名称">
+          <el-input v-model="query.categoryName" maxlength="20" placeholder="分类名称" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button plain @click="clear">重置</el-button>
+          <el-button type="primary" plain @click="handleAddCategory">新增爆品商品</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="tableBox">
+      <el-table ref="multipleTable" :data="tableData" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
+        <el-table-column prop="categoryName" label="分类名称" align="center" width="220" />
+        <el-table-column prop="categoryImage" label="分类图片" align="center">
+          <template slot-scope="scope">
+            <el-image :preview-src-list="[scope.row.categoryImage]" style="width: 80px; height: 80px; border-radius: 10px;e" :src="scope.row.categoryImage"></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="categorySort" label="排序值" align="center" width="220" />
+        <el-table-column prop="createTime" label="创建时间" align="center" width="220" />
+
+        <el-table-column label="操作" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="btnList">
+              <el-button type="text" @click="handleAddCategory(scope.row)">编辑</el-button>
+              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+              <!--  <el-button type="text" @click="deleteHotGoods(scope.row)">删除</el-button>
+              <el-button type="text" @click="editGift(scope.row)">编辑配销产品</el-button> -->
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye">
+        <el-pagination
+          :current-page="query.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <!-- 新增，编辑 -->
+    <EditCategory @refresh="search" ref="editCategoryRef"></EditCategory>
+  </div>
+</template>
+
+<script>
+import { getExplosiveProductCategory, deleteExplosiveProductCategory } from '@/api/explosiveProduct/category'
+import EditCategory from './EditCategory.vue'
+
+export default {
+  components: { EditCategory },
+  data() {
+    return {
+      query: { page: 1, pageSize: 10, categoryName: '' },
+      total: 1,
+      tableData: []
+    }
+  },
+  created() {
+    this.getAll()
+  },
+  methods: {
+    async getAll() {
+      const res = await getExplosiveProductCategory(this.query)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    },
+    handleSizeChange(val) {
+      this.query.pageSize = val
+      this.getAll()
+    },
+    handleCurrentChange(val) {
+      this.query.page = val
+      this.getAll()
+    },
+    search() {
+      this.total = 1
+      this.query.page = 1
+      this.getAll()
+    },
+    clear() {
+      this.query = {
+        page: 1,
+        pageSize: 10
+      }
+    },
+
+    // 新增，编辑分类
+    handleAddCategory(row) {
+      this.$refs.editCategoryRef.open(row)
+    },
+
+    // 删除
+    handleDelete(row) {
+      this.$confirm(`是否删除【${row.categoryName}】这项分类?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await deleteExplosiveProductCategory({ categoryId: row.id })
+          if (res.code == '200') {
+            this.$message.success('删除成功')
+            this.search()
+          }
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payreturnPage {
+  padding: 30px;
+
+  .tableBox {
+    .fenye {
+      margin: 20px;
+    }
+  }
+}
+</style>

src/views/active/hot/AddExplosiveProductsSubsidiary.vue → src/views/explosiveProduct/list/AddExplosiveProductsSubsidiary.vue

@@ -4,7 +4,7 @@
       <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
         <el-form-item label="配销商品" prop="subsidiaryProductId">
           <el-select
-          :disabled="!!this.form.id"
+            :disabled="!!this.form.id"
             @change="handleSelectGoods"
             style="width: 100%"
             v-model="form.subsidiaryProductId"
@@ -26,6 +26,9 @@
         <el-form-item label="配销商品价格" prop="subsidiaryPrice">
           <el-input v-model="form.subsidiaryPrice" prefix="¥" placeholder="请填写配销商品价格"></el-input>
         </el-form-item>
+        <el-form-item label="配销产品图片" prop="subsidiaryImage">
+          <ImageUpload :limit="1" v-model="form.subsidiaryImage"></ImageUpload>
+        </el-form-item>
       </el-form>
     </div>
 
@@ -46,8 +49,10 @@
 <script>
 import { getClassifyGetAll } from '@/api/commodity'
 import { addExplosiveProductsSubsidiary, editExplosiveProductsSubsidiary } from '@/api/active/active_hot'
+import ImageUpload from '@/components/ImageUpload'
 
 export default {
+  components: { ImageUpload },
   data() {
     return {
       isLoading: false,
@@ -58,13 +63,15 @@ export default {
         explosiveId: void 0,
         subsidiaryName: '',
         subsidiaryPrice: '',
-        subsidiaryProductId: ''
+        subsidiaryProductId: '',
+        subsidiaryImage: ''
       },
       goodsList: [],
       searchGoodsLoading: false,
       rules: {
         subsidiaryProductId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
         subsidiaryName: [{ required: true, message: '请输入配销产品名称', trigger: 'blur' }],
+        subsidiaryImage: [{ required: true, message: '请上传配销产品图片', trigger: 'change' }],
         subsidiaryPrice: [
           { required: true, message: '请输入配销产品价格', trigger: 'blur' },
           {
@@ -97,6 +104,7 @@ export default {
         this.form.subsidiaryPrice = Number(item.subsidiaryPrice) || 0
         this.form.subsidiaryProductId = Number(item.subsidiaryProductId)
         this.form.subsidiaryName = item.subsidiaryName
+        this.form.subsidiaryImage = item.subsidiaryImage
         this.dialogTitle = '编辑配销产品'
       }
       this.form.explosiveId = pid
@@ -109,6 +117,7 @@ export default {
       if (currentGoods) {
         this.form.subsidiaryName = currentGoods.productName
         this.form.subsidiaryPrice = Number(currentGoods.price) || 0
+        this.form.subsidiaryImage = currentGoods.image
       }
     },
 
@@ -156,7 +165,8 @@ export default {
         explosiveId: void 0,
         subsidiaryName: '',
         subsidiaryPrice: '',
-        subsidiaryProductId: ''
+        subsidiaryProductId: '',
+        subsidiaryImage: ''
       }
       this.goodsList = []
     },

src/views/active/hot/ExplosiveProductsSubsidiary.vue → src/views/explosiveProduct/list/ExplosiveProductsSubsidiary.vue

@@ -9,6 +9,11 @@
       <el-table v-loading="refreshLoading" border :data="hotGoodsDetail.subsidiaryList" :style="{ width: '100%' }">
         <el-table-column align="center" prop="subsidiaryName" label="配销产品名称" />
         <el-table-column align="center" prop="subsidiaryPrice" label="配销产品价格" />
+        <el-table-column prop="subsidiaryImage" label="爆品图片" align="center">
+          <template slot-scope="scope">
+            <el-image :preview-src-list="[scope.row.subsidiaryImage]" style="width: 80px; height: 80px; border-radius: 10px;e" :src="scope.row.subsidiaryImage"></el-image>
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="操作">
           <template slot-scope="scope">
             <el-button size="mini" type="text" @click="handleAdd(scope.row)">编辑</el-button>

src/views/active/hot/HotGoodsAdd.vue → src/views/explosiveProduct/list/HotGoodsAdd.vue

@@ -1,6 +1,11 @@
 <template>
   <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="hotGoodsAddVisible" width="30%" :before-close="handleBeforeClose">
     <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+      <el-form-item label="爆品分类" prop="categoryId">
+        <el-select v-model="form.categoryId" placeholder="请选择爆品分类">
+          <el-option v-for="item in categoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="产品" prop="productId">
         <el-select
           :disabled="!!this.form.id"
@@ -50,11 +55,13 @@
 import ImageUpload from '@/components/ImageUpload'
 import { getClassifyGetAll } from '@/api/commodity'
 import { addHotGoods, editHotGoods } from '@/api/active/active_hot'
+import { getExplosiveProductCategory } from '@/api/explosiveProduct/category'
 
 export default {
   components: { ImageUpload },
   data() {
     return {
+      categoryList: [],
       goodsList: [],
       hotGoodsAddVisible: false,
       searchGoodsLoading: false,
@@ -66,9 +73,11 @@ export default {
         productName: '',
         productImage: '',
         productPrice: '',
-        isPut: 1
+        isPut: 1,
+        categoryId: ''
       },
       rules: {
+        categoryId: [{ required: true, message: '请选择爆品分类', trigger: 'blur' }],
         productId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
         productName: [{ required: true, message: '请输入爆品名称', trigger: 'blur' }],
         productImage: [{ required: true, message: '请输入爆品主图链接', trigger: 'blur' }],
@@ -110,11 +119,20 @@ export default {
         this.form.productImage = row.productImage
         this.form.productPrice = row.productPrice
         this.form.isPut = row.isPut
+        this.form.categoryId = row.categoryId || ''
         this.dialogTitle = '编辑爆款产品'
       }
+      this.getCategory()
       this.hotGoodsAddVisible = true
     },
 
+    async getCategory() {
+      const res = await getExplosiveProductCategory({ page: 1, pageSize: 10000 })
+      if (res.code === '200') {
+        this.categoryList = res.data.list
+      }
+    },
+
     handleBeforeClose(done) {
       this.reset()
       done()
@@ -160,7 +178,8 @@ export default {
         productName: '',
         productImage: '',
         productPrice: '',
-        isPut: 1
+        isPut: 1,
+        categoryId: ''
       }
       this.goodsList = []
     },