商品导出和加价利润率

src/api/goods/index.js

@@ -11,7 +11,9 @@ const api = {
   delete: '/goods/delete',
   state: '/goods/state',
   category: '/goods/category',
-  sale: '/goods/sale'
+  sale: '/goods/sale',
+  addPrice:'/goods/addPrice',
+  exportData:'/goods/export',
 }
 
 // 列表记录
@@ -119,3 +121,24 @@ export function sale (data) {
     data: data
   })
 }
+/**
+ * 加价率
+ * @param {*} data
+ */
+export function addPrice (data) {
+  return axios({
+    url: api.addPrice,
+    method: 'post',
+    data: data
+  })
+}/**
+ * 归类
+ * @param {*} data
+ */
+export function exportData (data) {
+  return axios({
+    url: api.exportData,
+    method: 'post',
+    data: data
+  })
+}

src/views/dataCenter/goods/Index.vue

@@ -87,6 +87,31 @@
           @change="onChangeCategory"
         ></a-tree-select>
       </a-modal>
+      <a-modal
+        v-model:visible="priceVisible"
+        width="450px"
+        title="分类加价"
+        @ok="handleUpdatePrice(selectedRowKeys, categoryPriceIds, rate)"
+      >
+        <div style="display: flex" class="fen">
+          <span style="margin-right: 5px">商品分类：</span
+          ><a-tree-select
+            style="width: 326px"
+            placeholder="请选择商品分类"
+            :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
+            :treeData="categoryListTree"
+            treeCheckable
+            treeCheckStrictly
+            allowClear
+            @change="onChangeCategoryPrice"
+          ></a-tree-select>
+        </div>
+
+        <div class="fen">
+          <span style="margin-right: 5px">加价利润率：</span>
+          <input placeholder="请输入加价利润率" @input="validateAmount" v-model="rate" class="input" type="text" />
+        </div>
+      </a-modal>
       <a-modal
         v-model:visible="saleVisible"
         width="250px"
@@ -124,8 +149,18 @@
               @click="handleUpdateStatus(selectedRowKeys, 2)"
               >移除</a-button
             >
-            <a-button style="background-color: green; color: #fff" @click="visible = true">归类</a-button>
+            <a-button style="background-color: green; color: #fff; border: none" @click="visible = true">归类</a-button>
-            <a-button style="background-color: blue; color: #fff" @click="saleVisible = true">停售</a-button>
+            <a-button style="background-color: blue; color: #fff; border: none" @click="saleVisible = true"
+              >停售</a-button
+            >
+            <a-button style="background-color: #6370e4; color: #fff; border: none" @click="priceVisible = true"
+              >分类加价</a-button
+            >
+            <a-button
+              style="background-color: #501212; color: #fff; border: none"
+              @click="handleExport(selectedRowKeys)"
+              >导出</a-button
+            >
             <a-button icon="delete" @click="handleDelete(selectedRowKeys)">删除</a-button>
           </a-button-group>
         </div>
@@ -307,6 +342,7 @@ export default {
       checkList: [],
       visible: false,
       saleVisible: false,
+      priceVisible: false,
       goodsType: [
         { name: '自营', val: 1 },
         { name: 'POP', val: 2 },
@@ -329,6 +365,8 @@ export default {
       ],
       is_sale: 0,
       categoryIds: [],
+      categoryPriceIds: [],
+      rate: '',
     }
   },
   created() {
@@ -350,6 +388,24 @@ export default {
     },
   },
   methods: {
+    validateAmount() {
+      let row = this.rate
+      console.log(row)
+      //金额不能小于0
+      if (row < 0) {
+        this.$message.error('金额不能小于0')
+        this.rate = ''
+      } else if (row.startsWith('0')) {
+        this.money = ''
+        //金额小数部分不能超过2位
+      }else if(!/^\d+(\.\d{1,2})?$/.test(row)){
+        this.$message.error('请输入数字！')
+        this.money = ''
+      }else if (row.split('.')[1] && row.split('.')[1].length > 2) {
+        this.$message.error('金额小数部分不能超过2位，请修改')
+        this.rate = ''
+      }
+    },
     // 复制
     handleCopy(val) {
       let that = this
@@ -471,6 +527,33 @@ export default {
           this.isLoading = false
         })
     },
+    // 分类加价
+    onChangeCategoryPrice(list) {
+      this.categoryPriceIds = []
+      list.forEach((item) => {
+        this.categoryPriceIds.push(item.value)
+      })
+    },
+    handleUpdatePrice(goodsIds, categoryIds, rate) {
+      if (categoryIds.length == 0) {
+        this.$message.warn('请至少选择1个商品分类', 1.5)
+        return
+      }
+      if (!rate) {
+        this.$message.warn('请输入加价利润率', 1.5)
+        return
+      }
+      this.isLoading = true
+      GoodsApi.addPrice({ goodsIds, categoryIds, rate })
+        .then((result) => {
+          this.priceVisible = false
+          this.$message.success(result.message, 1.5)
+          this.handleRefresh()
+        })
+        .finally((result) => {
+          this.isLoading = false
+        })
+    },
     // 停售
     handleUpdateSales(goodsIds, is_sale) {
       this.isLoading = true
@@ -485,6 +568,32 @@ export default {
           this.isLoading = false
         })
     },
+    // 导出
+    handleExport() {
+      const formData = this.searchForm.getFieldsValue()
+      this.isLoading = true
+      GoodsApi.exportData(this.queryParam)
+        .then((result) => {
+          // this.exportData(result.data.list.data)
+          this.$message.success(result.message, 1.5)
+          this.handleRefresh()
+        })
+        .finally((result) => {
+          this.isLoading = false
+        })
+    },
+    exportData(itemList) {
+      const content = itemList.map((item) => `${item.goods_id},${item.channel_name}`).join('\n')
+      const blob = new Blob(['\ufeff', content], { type: 'text/csv;charset=utf-8;' })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', 'export.csv')
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+    },
     // 删除记录
     handleDelete(goodsIds) {
       const app = this
@@ -548,4 +657,30 @@ export default {
     margin-right: 5px;
   }
 }
+.fen {
+  span {
+    color: #555;
+    width: 80px;
+  }
+  .input {
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    height: 32px;
+    width: 316px;
+    margin-top: 10px;
+    padding-left: 10px;
+  }
+  input::-webkit-input-placeholder {
+    // 针对 谷歌 内核
+    color: #bfbfbf;
+  }
+  input:-moz-placeholder {
+    // 火狐
+    color: #bfbfbf;
+  }
+  input:-ms-input-placeholder {
+    // 微软ie
+    color: #bfbfbf;
+  }
+}
 </style>