frontend/src/views/ats-tracer/index.vue

<template>
  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4 overflow-auto">
    <div class="flex justify-between">
      <a-button type="primary" @click="fetchArticle.visible=true" :disabled="loading">添加</a-button>
      <div class="flex space-x-4">
        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
      </div>
    </div>
    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4 overflow-auto">
      <a-spin :spinning="loading" :indicator="indicator">
        <a-table :dataSource="data.list" :columns="columns" :pagination="false" rowKey="id">
          <template #expandedRowRender="{ record }">
            <history-ats :ats="record.historyAts"></history-ats>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'traceAts'">
              <a-switch :checked="record.traceAts" @click="onClickTrace(!record.traceAts,record.providerId,record.skuID)"/>
            </template>
            <template v-else-if="column.key === 'image'">
              <div class="w-75px h-75px">
                <a-image  :src="record.image"/>
              </div>
            </template>
            <template v-else-if="column.key === 'detail'">
              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.ArticleID} }">
                详情
              </router-link>
            </template>
            <template v-else-if="column.key === 'skuID'">
              <a v-if="record.skuID !== '' " :href="record.link" target="_blank">{{record.skuID}}</a>
              <span v-else>正在抓取信息</span>
            </template>
            <template v-else-if="column.key === 'updatedAt'">
              <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
            <template v-else-if="column.key === 'opt'">
              <a-button type="link" danger @click="onDelete(record)">删除</a-button>
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>
    <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" v-model:page-size="query.size" :total="data.total" show-less-items @change="list"/>
  </div>
  <fetch-article-panel v-model:visible="fetchArticle.visible" @reload="addTracer"></fetch-article-panel>
</template>
<script setup>
import {h, onMounted, reactive, ref} from "vue";
import {CreateTracer, DeleteTracer, ListTracers, StopTracer} from "@/api/tracer.js";
import {LoadingOutlined} from "@ant-design/icons-vue";
import moment from "moment";
import {message} from "ant-design-vue";
import FetchArticlePanel from "@/componse/fetch-article/fetch-article-panel.vue";
import HistoryAts from "@/componse/history-ats/history-ats.vue";

const query = reactive({
  keyword: '',
  watch: null,
  providerId: null,
  brand: null,
  page: 1,
  size:10
})



const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '32px',
  },
  spin: true,
});

const loading = ref(false)

const data = ref({
  total: 0,
  list:[]
})

onMounted(()=>{
  list()
})

const list = ()=>{
  loading.value = true
  ListTracers(query).then(res=>{
    if (res.code !== 200) {
      message.error(res.msg)
    }else {
      data.value.list = res.data.list
      data.value.total = res.data.total
    }
  }).catch(err => {
    console.log(err)
  }).finally(()=>{
    loading.value = false
  })
}

const columns = [
  {
    title: '货号',
    dataIndex: 'skuID',
    key: 'skuID',
  },
  {
    title: '图片',
    key: 'image',
  },
  {
    title: '详情',
    key: 'detail',
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    key: 'brand',
  },
    {
    title: '网站',
    dataIndex: 'providerId',
    key: 'providerId',
  },
  {
    title: '库存',
    dataIndex: 'ats',
    key: 'ats',
  },
  {
    title: '抓取库存',
    dataIndex: 'traceAts',
    key: 'traceAts',
  },
  {
    title: '抓取时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '操作',
    key: 'opt',
  },
]

const onClickTrace = (checked, providerId, skuID) => {
  const api = checked ? CreateTracer : StopTracer;
  api(providerId, skuID).then(res => {
    if (res.code !== 200) {
      message.error(`更新失败:${res.msg}`)
    } else {
      message.success('更新成功')
    }
  }).catch(err => {
    message.error('更新失败')
    console.log(err)
  }).finally(()=>{
    list()
  })
}

const onDelete = (providerArticle) => {
  DeleteTracer(providerArticle.providerId, providerArticle.skuID).then(res => {
    if (res.code !== 200) {
      message.error(`删除失败:${res.msg}`)
    } else {
      message.success('删除成功')
    }
  }).catch(err => {
    message.error('删除失败')
    console.log(err)
  }).finally(()=>{
    list()
  })
}

//添加商品
const fetchArticle = reactive({
  visible: false,
})

const addTracer = (providerId, skuID)=>{
  loading.value = true
  CreateTracer(providerId, skuID).then(res => {
    if (res.code !== 200) {
      message.error(`更新失败:${res.msg}`)
    } else {
      message.success('更新成功')
    }
  }).catch(err => {
    message.error('更新失败')
    console.log(err)
  }).finally(()=>{
    list()
  })
}

</script>

<style scoped>

</style>