temu-plugin/src/view/product/CopyProduct.vue

<template>
  <div>
    <ai-list class="list">
      <ai-title
        slot="title"
        title="商品模板"
        tips="请先在当前浏览器登录“拼多多跨境卖家中心”，期间保持登录状态"
        isShowBottomBorder>
      </ai-title>
      <template slot="content">
        <div class="content">
          <ai-search-bar>
            <template #left>
              <el-button type="button" :icon="'el-icon-delete'" :class="'el-button el-button--primary'" @click="remove()">删除</el-button>
              <el-button v-if="$store.state.mallName" type="button" :class="'el-button el-button--primary'" @click="toAddTemplate()">添加商品模板</el-button>
              <el-button v-if="$store.state.mallName" type="button" :class="'el-button el-button--primary'" @click="beforeAddToDraft">添加到草稿箱</el-button>
            </template>
            <template #right>
              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
            </template>
          </ai-search-bar>
          <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            style="margin-top: 8px;"
            :current.sync="search.current" :size.sync="search.size"
            @selection-change="handleSelectionChange"
            height="700"
            @getList="getList">
          </ai-table>
        </div>
      </template>
    </ai-list>

    <el-dialog
      title="商品列表"
      :visible.sync="dlgShow"
      :close-on-click-modal="false"
      width="80%"
      :before-close="handleClose">
      <ai-list class="list">
        <template slot="content">
          <div class="content">
            <ai-search-bar>
              <template #left>
                <div class="search-item">
                  <label style="width:90px">店铺：</label>
                  <el-select v-model="productPage.mallId" @change="productTableData = [], productPage.total = 0, productPage.page =1, getProductOrDraftList()" placeholder="请选择">
                    <el-option
                      v-for="item in $store.state.mallList"
                      :key="item.mallId"
                      :label="item.mallName"
                      :value="item.mallId">
                    </el-option>
                  </el-select>
                </div>
                <div class="search-item">
                  <label style="width:90px">模板来源：</label>
                  <el-select v-model="productPage.from" @change="productTableData = [], productPage.total = 0, productPage.page =1, getProductOrDraftList()" placeholder="请选择">
                    <el-option
                      key="0"
                      label="商品列表"
                      value="0">
                    </el-option>
                    <el-option
                      key="1"
                      label="草稿箱列表"
                      value="1">
                    </el-option>
                  </el-select>
                </div>
                <div class="search-item">
                  <label style="width:90px">SKC：</label>
                  <el-input size="small" placeholder="请输入SKC，多个用,隔开" v-model="productPage.productSkcIds" @keyup.enter.native="productPage.page =1, getProductList()"></el-input>
                </div>
                <div class="search-item">
                  <label style="width:90px">商品名称：</label>
                  <el-input size="small" placeholder="请输入商品名称" v-model="productPage.productName" @keyup.enter.native="productPage.page =1, getProductList()"></el-input>
                </div>
              </template>
              <template #right>
                <el-button @click="productPage= {
                      page: 1,
                      pageSize: 10,
                      from: '0',
                      productName: '',
                      productSkcIds: ''
                    }, getProductOrDraftList()">重置</el-button>
                <el-button type="primary" @click="productPage.page =1, getProductOrDraftList()">查询</el-button>
              </template>
            </ai-search-bar>
            <ai-table
              :tableData="productTableData"
              :col-configs="productColConfigs"
              :total="productPage.total"
              :current.sync="productPage.page" :size.sync="productPage.pageSize"
              style="margin-top: 8px;"
              @selection-change="productHandleSelectionChange"
              @getList="getProductOrDraftList">
            </ai-table>
          </div>
        </template>
      </ai-list>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dlgShow = false">取 消</el-button>
        <el-button type="primary" @click="saveProduct">添加到模板</el-button>
      </span>
    </el-dialog>

    <ai-dialog
      title="请选择店铺"
      :visible.sync="mallDlgShow"
      :close-on-click-modal="false"
      width="790px"
      customFooter
      @close="handleClose">
      <el-form class="ai-form" :model="form" label-width="160px" ref="form">
        <el-form-item label="店铺" style="width: 100%;" prop="targetMallId" :rules="[{ required: true, message: '请选择店铺', trigger: 'blur' }]">
          <el-select style="width: 380px" v-model="form.targetMallId" @change="onMallChange" placeholder="请选择">
            <el-option
              v-for="item in $store.state.mallList"
              :key="item.mallId"
              :label="item.mallName"
              :value="item.mallId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.isSemi" label="经营站点" style="width: 100%;" prop="siteId" :rules="[{ required: true, message: '请选择经营站点', trigger: 'blur' }]">
          <el-select style="width: 380px" multiple v-model="form.siteId" placeholder="请选择">
            <el-option
              v-for="item in siteList"
              :key="item.siteId"
              :label="item.siteName"
              :value="item.siteId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="isSameCategory"
          label="是否保持相同类目："
          :rules="[{ required: true, message: '请选择是否保持相同类目', trigger: 'blur' }]">
          <el-radio-group v-model="form.isSameCategory" size="medium">
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  v-if="!form.isSameCategory" label="商品分类" style="width: 100%;" prop="targetCatId" :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]">
          <ai-lazy-cascader 
            style="width: 380px" 
            v-model="form.targetCatId" 
            filterable
            :props="props"></ai-lazy-cascader>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="mallDlgShow = false">取 消</el-button>
        <el-button type="primary" @click="addToDraft">确定</el-button>
      </div>
    </ai-dialog>
  </div>
</template>

<script>
import {sendChromeAPIMessage} from '@/api/chromeApi'
import {timestampToTime} from '@/utils/date'
import {transform} from '@/utils/product'
import { Message } from 'element-ui'
import AiLazyCascader from "@/components/AiLazyCascader.vue"

  export default {
    name: 'CopyProduct',
    components: {AiLazyCascader},
    data () {
      return {
        search: {
          current: 1,
          size: 10,
          productName: '',
          mallName: '',
          startDate: '',
          endDate: ''
        },
        props: {
          value: 'catId',
          label: 'catName',
          lazy: true,
          lazyLoad (value, resolve) {
            sendChromeAPIMessage({
              url: 'bg-anniston-mms/category/children/list',
              needMallId: true,
              data: {
                parentCatId: value || ''
              }
            }).then(res => {
              if (res.errorCode === 1000000) {
                resolve(res.result.categoryNodeVOS.map(v => {
                  return {
                    ...v,
                    leaf: v.isLeaf
                  }
                }))
              }
            })
          },
          lazySearch(queryString, resolve) {
            sendChromeAPIMessage({
              url: 'bg-anniston-mms/category/search',
              needMallId: true,
              data: {
                searchText: queryString || ''
              }
            }).then(res => {
              if (res.errorCode === 1000000) {
                resolve(res.result.categoryPaths.map(v => {
                  let value = []
                  let label = []
                  for (let i = 1; i <= 10; i++ ) {
                    if (v['cat'+i+'NodeVO']) {
                      value.push(v['cat'+i+'NodeVO'].catId)
                      label.push(v['cat'+i+'NodeVO'].catName)
                    }
                  }
                  return {
                    catId: value,
                    catName: label
                  }
                }))
              }
            })
          }
        },
        colConfigs: [
          { type: "selection", width: '70px', align: 'left', fixed: 'left'},
          { prop: 'productSpu', label: 'SPU', align: 'left' },
          { prop: 'productName', label: '商品名称', align: 'left' },
          { prop: 'mallName', label: '来源店铺', align: 'left'},
          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
        ],
        tableData: [],
        total: 0,
        ids: [],

        dlgShow: false,
        productTableData: [],
        productPage: {page: 1, pageSize: 10, mallId: '', from: '0', productName: '', productSkcIds: '', total: 0},
        productColConfigs: [
          { type: "selection", width: '70px', align: 'left', fixed: 'left'},
          { prop: 'productSpu', label: 'SPU ID', align: 'left' },
          { prop: 'productSkc', label: 'SKC ID', align: 'left' },
          { prop: 'productName', label: '商品名称', align: 'left' },
          { prop: 'createTime', label: '创建时间', align: 'left' }
        ],

        mallDlgShow: false,
        productIds: [],
        form: {
          targetMallId: '',
          targetCatId: [],
          isSemi: false,
          isSameCategory: true,
          siteId: []
        },
        siteList: []
      }
    },

    created () {
      this.getList()
      this.getSiteList()
      if (this.$store.state.mallList.length > 0) {
        this.productPage.mallId = this.$store.state.mallList[0].mallId
      }
    },

    methods: {
      getList () {
        this.$http.post('/api/product/myPage?type=0',null,{
            params: {
                ...this.search
            }
        }).then(res => {
            this.tableData = res.data.records
            this.total = res.data.total
        })
      },
      getSiteList() {
        sendChromeAPIMessage({
          url: 'bg-visage-mms/config/common/site/query',
          needMallId: true,
          mallId: this.$store.state.mallList[0].mallId,
          data: {}}).then((res) => {
            if (res.success) {
              this.siteList = res.result.siteBaseList.filter(item => {
                return item.matchSemiManaged
              })
            }
        })
      },
      onMallChange() {
        if (!this.form.targetMallId) {
          Message.error("请先选择店铺")
          return
        }
        let tempMall = this.$store.state.mallList.filter(item => {
          return item.mallId == this.form.targetMallId
        })
        if (null == tempMall || tempMall.length == 0) {
          Message.error("请先选择店铺")
          return
        } else {
          this.form.isSemi = tempMall[0].isSemiManagedMall
        }
      },
      remove () {
        if (this.ids.length <= 0) {
          alert('请选择要删除的商品');
          return;
        }
        this.$confirm('确定要删除？', '温馨提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/product/delByIds',this.ids
          ).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },
      handleSelectionChange(val) {
        this.ids = [];
        val.forEach(e => {
          this.ids.push(e.id);
        });
      },

      // 添加模板
      handleClose() {
        this.productTableData = []
        this.productPage = {page: 1, pageSize: 10, from: '0', total: 0}
        this.dlgShow = false
      },
      toAddTemplate() {
        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.dlgShow = true
            this.getProductOrDraftList()
          }
        })
      },
      getProductOrDraftList() {
        if (this.productPage.from == '0') {
          this.getProductList()
        } else {
          this.getDraftList()
        }
      },
      getDraftList() {
        let params = {};
        params.page = this.productPage.page;
        params.pageSize = this.productPage.pageSize;
        if (this.productPage.productName) {
          params.productName = this.productPage.productName
        }
        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/draft/pageQuery',
          needMallId: true,
          mallId: this.productPage.mallId,
          data: {
            ...params
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            this.productPage.total = res.result.total
            this.productTableData = res.result.pageItems.map((item) => {
              return {
                productSpu: item.productDraftId,
                productSkc: '',
                productName: item.productName,
                createTime: timestampToTime(item.updatedAt)
              };
            })
          } else {
            this.getDraftList()
          }
        });
      },
      getProductList() {
        let params = {};
        params.page = this.productPage.page;
        params.pageSize = this.productPage.pageSize;
        if (this.productPage.productName) {
          params.productName = this.productPage.productName
        }
        if (this.productPage.productSkcIds) {
          params.productSkcIds = this.productPage.productSkcIds.split(',')
        }
        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/skc/pageQuery',
          needMallId: true,
          mallId: this.productPage.mallId,
          data: {
            ...params
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            this.productPage.total = res.result.total
            this.productTableData = res.result.pageItems.map((item) => {
              return {
                productSpu: item.productId,
                productSkc: item.productSkcId,
                productName: item.productName,
                createTime: timestampToTime(item.createdAt)
              };
            })
          } else {
            this.getProductList()
          }
        });
      },
      productHandleSelectionChange(val) {
        this.productIds = [];
        val.forEach(e => {
          this.productIds.push(e.productSpu);
        });
      },
      saveProduct() {
        if (this.productIds.length <= 0) {
          Message.error('请选择商品');
          return;
        }
        this.productIds.map((productSpu, index) => {
          setTimeout(() => {
            if (this.productPage.from == '0') {
              this.saveProductTemplate(productSpu, index)
            } else {
              this.saveDraftTemplate(productSpu, index)
            }
          }, 200 * index)
        })
      },
      saveProductTemplate(spu, index) {
        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/query',
          needMallId: true,
          mallId: this.productPage.mallId,
          data: {
            productEditTaskUid: '',
            productId: spu
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            let content = transform(res.result)
            let mallInfo = this.$store.state.mallList.filter(item => {
              return item.mallId == this.productPage.mallId
            })
            this.$http.post('/api/product/add', {
                mallId: mallInfo[0].mallId,
                mallName: mallInfo[0].mallName,
                productSpu: res.result.productId,
                productName: res.result.productName,
                type: 0,
                content: content
              }).then(res1 => {
              if (res1.code == 0) {
                Message.success("商品【" + res.result.productName + "】成功添加为商品模板")
                if (index == this.productIds.length - 1) {
                  this.getList()
                }
              }
            })
          } else {
            this.saveProductTemplate(spu, index)
          }
        })
      },
      saveDraftTemplate(spu, index) {
        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/draft/query',
          needMallId: true,
          mallId: this.productPage.mallId,
          data: {
            productDraftId: spu
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            let content = transform(res.result)
            let mallInfo = this.$store.state.mallList.filter(item => {
              return item.mallId == this.productPage.mallId
            })
            this.$http.post('/api/product/add', {
                mallId: mallInfo[0].mallId,
                mallName: mallInfo[0].mallName,
                productSpu: spu,
                productName: res.result.productName,
                type: 0,
                content: content
              }).then(res1 => {
              if (res1.code == 0) {
                Message.success("商品【" + res.result.productName + "】成功添加为商品模板")
                if (index == this.productIds.length - 1) {
                  this.getList()
                }
              }
            })
          } else {
            this.saveDraftTemplate(spu, index)
          }
        })
      },
      beforeAddToDraft() {
        if (this.ids.length <= 0) {
          Message.error('请选择商品模板');
          return;
        }
        this.mallDlgShow = true
      },
      addToDraft() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.ids.map((id, index) => {
              let product = this.tableData.filter((item) => {
                return item.id == id
              })
              let content = JSON.parse(product[0].content)
              let category = null
              if (this.form.isSameCategory) {
                let i = 1
                while(true) {
                  if (!content['cat'+i+'Id']) {
                    break
                  }
                  i++
                }
                category = content['cat'+(i-1)+'Id']
              } else {
                category = this.form.targetCatId[this.form.targetCatId.length - 1]
              }
              let data = {catId: category}
              if (this.form.isSemi) {
                data.productSemiManagedReq = {
                  bindSiteIds: this.form.siteId
                }
              }
              content.personalizationSwitch = content.personalizationSwitch || 0
              setTimeout(() => {
                sendChromeAPIMessage({
                  url: 'bg-visage-mms/product/draft/add',
                  needMallId: true,
                  mallId: this.form.targetMallId,
                  data: data}).then((res) => {
                  if (res.errorCode == 1000000) {
                    let draftId = res.result.productDraftId
                    if (!this.form.isSameCategory) {
                      let i = 0
                      for (; i < this.form.targetCatId.length; i++) {
                        content['cat' + (i+1) + 'Id'] = this.form.targetCatId[i]
                      }
                      for (; i < 10; i++) {
                        content['cat' + (i+1) + 'Id'] = ''
                      }
                    }
                    content.productDraftId = draftId
                    if (this.form.isSemi) {
                      content.productSemiManagedReq = {
                        bindSiteIds: this.form.siteId
                      }
                    }
                    sendChromeAPIMessage({
                      url: 'bg-visage-mms/product/draft/save',
                      needMallId: true,
                      mallId: this.form.targetMallId,
                      data: {
                        ...content
                    }}).then((res) => {
                      if (res.errorCode == 1000000) {
                        Message.success("商品【" + product[0].productName + "】成功添加到草稿箱")
                      } else {
                        Message.error(res.errorMsg)
                      }
                    })
                  } else {
                    Message.error("【拼多多】" + res.errorMsg)
                  }
                })
              }, 1000*index)
            })
            this.mallDlgShow = false
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>