temu-plugin/src/view/shein/CostManageShein.vue

<template>
  <ai-list class="list" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <ai-title
      slot="title"
      title="成本管理"
      isShowBottomBorder>
    </ai-title>
    <template slot="content">
      <div style="margin-bottom: 5px">
        <el-alert
              title="郑重承诺：由于业务逻辑需要，TEMU助手将会以最小范围内存储SKU成本信息，平台将会做好保密，不泄露、不出售任何数据。使用与成本管理以及利润计算等相关功能，将视为授权TEMU助手存储相关信息。"
              type="error"
              :closable="false">
            </el-alert>
      </div>
      <ai-search-bar>
        <template #left>
          <div class="search-item">
            <el-checkbox v-model="search.unSet">只显示未填写</el-checkbox>
          </div>
          <div class="search-item">
            <label>SKC ID：</label>
            <el-input size="small" clearable placeholder="请输入SKC ID" v-model="search.skc"></el-input>
          </div>
          <div class="search-item">
            <label>SKU ID：</label>
            <el-input size="small" clearable placeholder="请输入SKU ID" v-model="search.sku"></el-input>
          </div>
          <div class="search-item">
            <label>SKC货号：</label>
            <el-input size="small" clearable placeholder="请输入SKC货号" v-model="search.skcCode"></el-input>
          </div>
        </template>
        <template #right>
          <!--<el-button type="primary" @click="toLoad">加载</el-button>-->
        </template>
      </ai-search-bar>
      <ai-card title="SKU明细" style="padding-bottom: 40px;">
        <template #right>
          <el-button type="primary" @click="exportToExcel">导出</el-button>
          <el-button type="primary" @click="toUpload">导入</el-button>
        </template>
        <ai-table
          :isShowPagination="false"
          :tableData="filteredData"
          :col-configs="colConfigs"
          height="600"
          style="margin-top: 8px;"
          @getList="() => {}">
          <el-table-column slot="costPrice" label="成本价格" :sortable="true" :sort-method="(a, b) => a.costPrice - b.costPrice">
            <template slot-scope="{ row }">
              <el-input
                v-if="row.edit"
                v-model="row.editValue"
                type="number"
                size="small"
              ></el-input>
              <span v-else>{{ row.costPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" width="80px" show-overflow-tooltip align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                v-if="!row.edit"
                size="small"
                icon="el-icon-edit"
                @click="row.edit = true"
              ></el-button>
              <el-button
                v-if="row.edit"
                size="small"
                type="success"
                icon="el-icon-circle-check"
                @click="handleSave(row)"
              ></el-button>
            </template>
          </el-table-column>
        </ai-table>
      </ai-card>

      <AiDialog
        title="成本导入"
        :visible.sync="costDlgShow"
        :close-on-click-modal="false"
        customFooter
        width="1290px">
        <el-form :model="costForm" ref="costForm" label-width="180px" class="form">
          <el-form-item label="上传excel" prop="file" :rules="[{ required: true, message: '请上传文件', trigger: 'blur' }]" style="width: 100%;">
            <ai-uploader isImport v-model="costForm.file" fileType="file" :limit="1"
                        acceptType=".xlsx," :clearable="false">
              <template #trigger>
                <el-button icon="iconfont iconfangda">选择文件</el-button>
              </template>
              <template #tips>最多上传1个文件,单个文件最大10MB，仅支持Excel格式</template>
            </ai-uploader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="costDlgShow = false">关 闭</el-button>
          <el-button type="primary" @click="importConfirm">确 定</el-button>
        </span>
      </AiDialog>
    </template>
  </ai-list>
</template>

<script>
import {sendGeiwohuoAPIMessage} from '@/api/chromeApi'
import {timestampToTime} from '@/utils/date'
import { Message } from 'element-ui'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

  export default {
    name: 'CostManageShein',

    data () {
      return {
        isLoading: false,
        list: [],
        mallId: '',
        colConfigs: [
          { prop: 'skc', label: 'SKC ID', align: 'left' },
          { prop: 'skcCode', label: 'SKC货号', align: 'left' },
          { prop: 'sku', label: 'SKU ID', align: 'left' },
          { prop: 'skuAttr', label: '属性集', align: 'left' },
          { prop: 'skuCode', label: 'SKU货号', align: 'left' },
          { prop: 'price', label: '申报价格', align: 'left', sortable: true, 'sort-method': (a, b) => a.price - b.price },
          { slot: 'costPrice', label: '成本价格', align: 'left' },
          { prop: 'profitPercent', label: '利润率(%)', align: 'left', sortable: true, 'sort-method': (a, b) => a.profitPercent - b.profitPercent }
        ],
        search: {
          unSet: false,
          skc: '',
          sku: '',
          skcCode: ''
        },

        tableData: [],
        currentPage: 1,

        costList: [],

        costDlgShow: false,
        costForm: {
          file: null
        }
      }
    },

    computed: {
      filteredData() {
        const filteredData = this.list.filter(item => {
          let flag1 = true, flag2 = true, flag3 = true, flag4 = true
          if (this.search.unSet) {
            if (item.costPrice) flag1 = false
          }
          if (this.search.skc) {
            if (!item.skc.toLowerCase().includes(this.search.skc.toLowerCase())) {
              flag2 = false
            }
          }
          if (this.search.sku) {
            if (!item.sku.toLowerCase().includes(this.search.sku.toLowerCase())) {
              flag3 = false
            }
          }
          if (this.search.skcCode) {
            if (!item.skcCode.toLowerCase().includes(this.search.skcCode.toLowerCase())) {
              flag4 = false
            }
          }

          return flag1 && flag2 && flag3 && flag4
        })

        return filteredData
      }
    },

    mounted () {
      this.$http.post('/api/malluser/info').then(res => {
        if (res.code == 0) {
          this.$store.commit('setUserInfo', res.data)
          if (res.data.flag != 1) {
            Message.error('您的账号未激活或已失效，请激活后使用')
            this.$store.commit('setActiveDlgShow', true)
            return;
          }
          this.getUserInfo()
          this.isLoading = true
        }
      })
    },

    methods: {
      async getUserInfo() {
        let res = await sendGeiwohuoAPIMessage({
          url: 'sso-prefix/auth/getUser?uuid=' + Date.now(),
          method: 'GET'
        })
        if (res.code == '0' && res.msg == "OK") {
          this.mallId = res.info.merchantCode
          this.getList([])
        } else if (res.code == 100004 || res.code == 20302) {
          this.isLoading = false
          this.$store.commit("setSheinAlertShow", true)
        }
      },
      async getList (skcList) {
        let res = await sendGeiwohuoAPIMessage({
          url: `idms/goods-skc/list`,
          method: 'POST',
          data: {
            pageNumber: this.currentPage,
            pageSize: 100,
            sortBy7dSaleCnt: 2
          }})
        if (res.code == '0') {
          for(let i = 0;i < res.info.list.length; i++) {
            let item = res.info.list[i];
            let data = {skc: item.skc,
              skcCode: item.supplierCode
            }

            skcList.push(item.skc)
            
            for (let j = 0; j < item.skuList.length; j++) {
              let sku = item.skuList[j]
              if (sku.attr == '合计') continue
              data = {...data, sku: sku.skuCode,
                skuAttr: sku.attr,
                skuCode: sku.supplierSku,
                price: null,
                costPrice: '',
                profitPercent: null,
                edit: false,
                editValue: null
              }

              this.list.push(data)
            }
          }
          if (res.info.list.length == 100 && (res.info.count > 100*this.currentPage)) {
            this.currentPage++
            await this.sleepSync(200)
            await this.getList(skcList)
          } else {
            await this.getPriceInfo(skcList)
            this.getSkuCostList()
          }
        } else if (res.code == 100004 || res.code == 20302) {
          this.isLoading = false
          this.$store.commit("setSheinAlertShow", true)
        }
      },
      async getPriceInfo(skcList) {
        let i = 0, len = 100
        while(i < skcList.length) {
          let tempSkcList = []
          for (; i < skcList.length; i++) {
            tempSkcList.push(skcList[i])
            if (tempSkcList.length % len == 0) {
              break
            }
          }
          let res = await sendGeiwohuoAPIMessage({
            url: `idms/goods-skc/price`,
            method: 'POST',
            data: tempSkcList})
          if (res.code == '0') {
            for (let key in res.info) {
              for (let i = 0; i < this.list.length; i++) {
                if (key == this.list[i].sku) {
                  this.list[i].price = res.info[key]
                  break
                }
              }
            }
          }
        }
      },
      sleepSync(milliseconds) {
        return new Promise(resolve => setTimeout(resolve, milliseconds));
      },
      getSkuCostList() {
        this.$http.post(`/api/skuCost/listAll`, null, {
          params: {
            mallId: this.mallId
          }
        }).then(res => {
          if (res.code == 0) {
            this.costList = res.data
            for (let i = 0; i < this.costList.length; i++) {
              for (let j = 0; j < this.list.length; j++) {
                if (this.costList[i].sku == this.list[j].sku) {
                  this.list[j].costPrice = this.costList[i].costPrice
                  this.list[j].editValue = this.costList[i].costPrice
                  this.list[j].profitPercent = Math.round((this.list[j].price - this.list[j].costPrice) / this.list[j].price * 10000) /100
                }
              }
            }
            this.isLoading = false
          }
        })
      },
      handleSave(row) {
        this.$http.post(`/api/skuCost/addOrUpdate`, [{
          mallId: this.mallId,
          costPrice: row.editValue,
          skc: row.skc,
          sku: row.sku
        }]).then((res) => {
          if (res.code == 0) {
            row.edit = false
            row.costPrice = row.editValue
            row.profitPercent = Math.round((row.price - row.costPrice) / row.price * 10000) / 100
            Message.success("修改成功")
          }
        })
      },
      toUpload() {
        this.costDlgShow = true
      },
      importConfirm() {
        this.isLoading = true
        this.$refs.costForm.validate((valid) => {
          const data = new FormData()
          data.append('file', this.costForm.file[0].raw);
          this.$http.post(`/api/skuCost/importStock`, data).then(res => {
            if (res.code === 0) {
              this.costDlgShow = false
              this.$message.success('导入成功')
              this.currentPage = 1
              this.list = []
              this.isLoading = false
              this.getList()
            } else {
              this.isLoading = false
            }
          })
        })
      },
      exportToExcel() {
        // 假设你有一个表格数据的数组
        const data = [
          ["店铺ID", "SKC ID", "SKC货号", "SKU ID", "属性集", "SKU货号", "申报价格", "成本价格"]
        ]

        this.filteredData.map(item => {
          data.push([this.mallId, item.skc, item.skcCode, item.sku, item.skuAttr, item.skuCode, item.price, item.costPrice])
        })
  
        // 将数据转换为工作表
        const worksheet = XLSX.utils.aoa_to_sheet(data);
  
        // 创建工作簿并添加工作表
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  
        // 生成Excel文件
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  
        // 使用blob和FileReader创建一个Blob URL
        const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
        const blobUrl = window.URL.createObjectURL(dataBlob);
  
        // 使用saveAs下载文件
        saveAs(dataBlob, 'SKU列表.xlsx');
  
        // 清理
        window.URL.revokeObjectURL(blobUrl);
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    .title-right {
      display: flex;
      align-items: center;

      & > div:first-child {
        margin-right: 20px;
      }
    }
    ::v-deep.ai-list {
      .ai-list__content--right-wrapper {
        background: transparent;
        box-shadow: none;
        padding: 0!important;
      }
    }
  }
</style>