temu-plugin/src/view/selection/NiubiCopy.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>
              <div class="search-item">
                <label style="width:80px">来源：</label>
                <ai-select :selectList="$dict.getDict('copy_from')" :clearable="true" v-model="search.type" @change="search.current =1, getList()"></ai-select>
              </div>
              <div class="search-item">
                <label style="width:80px">店铺：</label>
                <el-select v-model="search.mallId" :clearable="true" @change="search.current =1, getList()" placeholder="请选择店铺" size="small">
                  <el-option
                    v-for="item in $store.state.mallList"
                    :key="item.mallId"
                    :label="item.mallName"
                    :value="item.mallId">
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #right>
              <el-button type="primary" @click="search.current =1, getList()">查询</el-button>
            </template>
          </ai-search-bar>
          <ai-search-bar>
            <template #left>
              <el-button type="button" :class="'el-button el-button--primary'" @click="beforeCopy()">开始复制</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"
            @getList="getList">
            <el-table-column slot="url" label="商品地址" align="left">
              <template slot-scope="scope">
                <div><a class="el-link el-link--primary" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a></div>
              </template>
            </el-table-column>
          </ai-table>
        </div>
      </template>
    </ai-list>

    <ai-dialog
      title="复制"
      :visible.sync="copyFromDlgShow"
      :close-on-click-modal="false"
      width="790px"
      customFooter
      @close="handleClose">
      <ai-copy-from-temu v-if="copyFromDlgShow" @onClose="handleClose" @onSuccess="handleSuccess"></ai-copy-from-temu>
    </ai-dialog>
  </div>
</template>

<script>
import AiCopyFromTemu from "@/components/AiCopyFromTemu.vue";
  export default {
    name: 'NiubiCopy',
    components: {AiCopyFromTemu},

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          type: '',
          mallId: ''
        },
        
        colConfigs: [
          { slot: 'url', label: '商品地址', align: 'left' },
          { prop: 'type', label: '来源', width: '100px', align: 'left',format: v => this.$dict.getLabel('copy_from', v), },
          { prop: 'mallName', label: '店铺名称', width: '200px', align: 'left'},
          { prop: 'createTime', label: '复制时间', width: '180px'}
        ],
        tableData: [],
        total: 0,
        copyFromDlgShow: false,
      }
    },

    created () {
      this.$dict.load('copy_from');
      this.getList()
    },

    methods: {
      getList () {
        this.$http.post('/api/copyProduct/myPage',null,{
            params: {
                ...this.search
            }
        }).then(res => {
            this.tableData = res.data.records
            this.total = res.data.total
        })
      },
      beforeCopy() {
        this.copyFromDlgShow = true
      },
      handleClose() {
        this.copyFromDlgShow = false
      },
      // 添加模板成功
      handleSuccess() {
        this.copyFromDlgShow = false
        this.getList()
      }
    }
  }
</script>

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