feat 重构watcher

2024-11-30 20:26:38 +08:00 · 2024-11-30 20:26:38 +08:00 · a1d7b53258
commit a1d7b53258
parent c907d4c1f5
11 changed files with 230 additions and 95 deletions
--- a/src/api/provider.js
+++ b/src/api/provider.js
@ -35,7 +35,7 @@ export const FindProviders= (q) =>{



-const provider = mande('/api/v2/provider')
+export const provider = mande('/api/v2/provider')

 // 拉取供应商所有商品价格
 export const FetchProviderArticles = (providerId)=>{
--- a/src/api/watcher.js
+++ b/src/api/watcher.js
@ -1,22 +1,22 @@
 import {mande} from "mande";
+import {provider} from "@/api/provider.js";
+import {queryRemoveZero} from "@/api/utils.js";

-const watchers = mande('/api/v1/watchers')
+const watchers = mande('/api/v2/watchers')

-export const ListWatchers = (query) => {
+export const ListWatchers = (q) => {
+    const query = queryRemoveZero(q)
    return watchers.get({query:query})
 }

-export const CreateWatcher = (opt)=>{
-    return watchers.post(opt)
+export const CreateWatcher = (providerId, skuID)=>{
+    return provider.post(`${providerId}/watch/${encodeURIComponent(skuID)}`)
 }

-export const DeleteWatcher = (uid)=>{
-    return watchers.delete(`/${encodeURIComponent(uid)}`)
+export const DeleteWatcher = (providerId, skuID)=>{
+    return provider.delete(`${providerId}/watch/${encodeURIComponent(skuID)}`)
 }

-export const StopWatcher = (uid)=>{
-    return watchers.delete(`/${encodeURIComponent(uid)}/status`)
-}
-export const StartWatcher = (uid)=>{
-    return watchers.post(`/${encodeURIComponent(uid)}/status`)
+export const StopWatcher = (providerId,skuID)=>{
+    return provider.post(`${providerId}/watch/stop/${encodeURIComponent(skuID)}`)
 }
--- a/src/componse/fetch-article/fetch-article-panel.vue
+++ b/src/componse/fetch-article/fetch-article-panel.vue
@ -61,6 +61,7 @@ const handleOk = ()=>{
      FetchProviderArticleDetail(data.providerId, data.pid).then(res=>{
        if(res.code === 200){
          message.success("添加成功")
+          emits('reload',data.providerId, data.pid)
        }else{
          message.error(res.msg)
        }
--- a/src/componse/one-click-watch.js
+++ b/src/componse/one-click-watch.js
@ -1,41 +0,0 @@
-import {message, Modal} from "ant-design-vue";
-import {CreateWatcher} from "@/api/watcher.js";
-
-export const OneClickWatch = (pid, name)=>{
-    Modal.confirm({
-        title: '确定要蹲该商品',
-        content: name,
-        centered: true,
-        okText: '确定',
-        cancelText: '取消',
-        onOk() {
-            CreateWatcher({
-                pid: pid,
-                remark:'',
-                pushers:[
-                    {
-                        id:2,
-                        createdAt:1716303672,
-                        type:2,
-                        name:"email",
-                        remark:"",
-                        option:"{\"from\":\"zhhgzhhgzhhg@163.com\",\"username\":\"zhhgzhhgzhhg@163.com\",\"password\":\"SRGWLNQRNNOTSGSV\",\"host\":\"smtp.163.com\",\"port\":25,\"to\":\"zhangergou0628@163.com\"}"
-                    },
-                    {
-                        id:1,
-                        createdAt:1716303548,
-                        type:1,
-                        name:"anpush",
-                        remark:"",
-                        option:"{\"token\":\"LHS13BO3FGBLGBP9MFBM53R8WV32P1\",\"channel\":\"78317\"}"
-                    }
-                ]
-            }).then(res=>{
-                message.success("添加成功")
-            }).catch(err => {
-                message.error("添加失败")
-                console.log(err)
-            })
-        },
-    });
-}
--- a/src/componse/provider-article/provider-article-panel.vue
+++ b/src/componse/provider-article/provider-article-panel.vue
@ -3,8 +3,8 @@
    <template #extra>
      <div class="flex space-x-4 items-center">
        <div>更新时间：{{dayjs(provider.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
-        <a-button v-if="provider.providerId==='us-coach-outlet'" type="primary" @click="OneClickWatch(provider.pid, provider.pid)">一键蹲货</a-button>
        <div v-if="provider.skuID">抓取：<a-switch :checked="!provider.exclude" @click="onClickExclude"/></div>
+        <div v-if="provider.skuID">蹲货：<a-switch :checked="provider.watch" @click="onClickWatch"/></div>
      </div>
    </template>
    <template #header>
@ -55,7 +55,6 @@ import {GetProviderHistory, UpdateProviderArticle} from "@/api/articles.js";
 import {message} from "ant-design-vue";
 import {computed, ref, watch} from "vue";
 import VChart from "vue-echarts";
-import {OneClickWatch} from "@/componse/one-click-watch.js";

 const props = defineProps({
  provider: {
@ -104,6 +103,22 @@ const onClickExclude = (checked, e) => {
  })
 }

+const onClickWatch = (checked, e) => {
+  const api = props.provider.watch ? StopWatcher : CreateWatcher;
+  api(props.provider.providerId, props.provider.skuID).then(res => {
+    if (res.code !== 200) {
+      message.error(`更新失败:${res.msg}`)
+    } else {
+      message.success('更新成功')
+    }
+  }).catch(err => {
+    message.error('更新失败')
+    console.log(err)
+  }).finally(()=>{
+    emits('fetched')
+  })
+}
+
 watch(() => props.open, (newVal) => {
  if (newVal && !(props.provider.historyPrice?.length > 0)) {
    GetProviderHistory(props.provider.id).then(res => {
@ -123,6 +138,7 @@ import { LineChart } from 'echarts/charts'
 import { GridComponent, TitleComponent, TooltipComponent, LegendComponent  } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import {FetchProviderArticleAts, FetchProviderArticlePrice} from "@/api/provider.js";
+import {CreateWatcher, StopWatcher} from "@/api/watcher.js";

 use([GridComponent, LineChart, CanvasRenderer, TitleComponent , TooltipComponent, LegendComponent ])

--- a/src/views/article/index.vue
+++ b/src/views/article/index.vue
@ -187,17 +187,6 @@ const onClickExclude=(record)=>{
  })
 }

-const router = useRouter()
-// 跳到详情页面
-const toDetail=(id)=>{
-  router.push({
-    path: '/article/detail',
-    query: {
-      id: id
-    },
-  })
-}
-
 //
 const tableChange = (pagination, filters, sorter, { action, currentDataSource })=>{
  if(sorter.columnKey === 'rate') {
--- a/src/views/layout/Aside.vue
+++ b/src/views/layout/Aside.vue
@ -2,7 +2,7 @@
  <a-menu
      @click="onclick"
      id="aside"
-      style="width: 256px"
+      style="width: 256px;"
      mode="inline"
      :items="items"
  ></a-menu>
@ -22,7 +22,7 @@ const onclick = ({key}) => {

 const items = [
  {
-    key: 'watcher',
+    key: 'watcher-v2',
    icon: () => h(AccountBookOutlined),
    label: '蹲货',
    title: '蹲货',
@ -32,7 +32,6 @@ const items = [
    icon: () => h(DollarCircleOutlined),
    label: '商品',
    title: '商品',
-    onTitleClick: onclick,
  },
  {
    key: 'pusher',
--- a/src/views/layout/Header.vue
+++ b/src/views/layout/Header.vue
@ -6,31 +6,10 @@
      可达鸭海淘蹲货
    </div>
  </div>
-  <div>
-    <div>当前代理个数: {{proxiesInfo.list.length}}</div>
-    <div class="text-[14px]">代理更新时间：{{moment(proxiesInfo.updated).format('YYYY-MM-DD HH:mm:ss')}}</div>
-  </div>
 </div>
 </template>
 <script setup>
-import {onMounted, reactive} from "vue";
-import {getProxiesStatus} from "@/api/proxies.js";
-import moment from "moment";

-const proxiesInfo = reactive({
-  list:[],
-  updated: ''
-})
-
-onMounted(()=>{
-  loadProxiesInfo()
-})
-const loadProxiesInfo = ()=>{
-  getProxiesStatus().then(res=>{
-    proxiesInfo.list = res.list
-    proxiesInfo.updated = res.updated
-  })
-}
 </script>

 <style scoped>
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@ -3,7 +3,7 @@
  <Header></Header>
  <div class="h-full w-full flex overflow-overlay">
    <Aside></Aside>
-    <Main></Main>
+    <Main class="flex-1"></Main>
  </div>
 </div>
 </template>
--- a/src/views/watcher-v2/index.vue
+++ b/src/views/watcher-v2/index.vue
@ -0,0 +1,185 @@
+<template>
+  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
+    <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">
+      <a-spin :spinning="loading" :indicator="indicator">
+        <a-table :dataSource="data.list" :columns="columns" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'watch'">
+              <a-switch :checked="record.watch" @click="onClickWatch(!record.watch,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 === '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="addWatcher"></fetch-article-panel>
+</template>
+<script setup>
+import {h, onMounted, reactive, ref} from "vue";
+import {CreateWatcher, DeleteWatcher, ListWatchers, StopWatcher} from "@/api/watcher.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";
+
+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
+  ListWatchers(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: '品牌',
+    dataIndex: 'brand',
+    key: 'brand',
+  },
+    {
+    title: '网站',
+    dataIndex: 'providerId',
+    key: 'providerId',
+  },
+  {
+    title: '正在蹲货',
+    dataIndex: 'watch',
+    key: 'watch',
+  },
+  {
+    title: '抓取时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '操作',
+    key: 'opt',
+  },
+]
+
+const onClickWatch = (checked, providerId, skuID) => {
+  const api = checked ? CreateWatcher : StopWatcher;
+  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) => {
+  DeleteWatcher(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 addWatcher = (providerId, skuID)=>{
+  loading.value = true
+  CreateWatcher(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>
--- a/vite.config.js
+++ b/vite.config.js
@ -35,15 +35,15 @@ export default defineConfig({
        ws: true,
      },
      '/api/v2/sellers': {
-        // target: 'http://localhost:8081/',
-        target: 'https://ht.timerzz.com:20443/',
+        target: 'http://localhost:8081/',
+        // target: 'https://ht.timerzz.com:20443/',
        changeOrigin: true,
        secure: false,
        ws: true,
      },
      '/api/v2/seller': {
-        // target: 'http://localhost:8083/',
-        target: 'https://ht.timerzz.com:20443/',
+        target: 'http://localhost:8083/',
+        // target: 'https://ht.timerzz.com:20443/',
        changeOrigin: true,
        secure: false,
        ws: true,
@ -68,6 +68,13 @@ export default defineConfig({
        changeOrigin: true,
        secure: false,
        ws: true,
+      },
+      '/api/v2/watchers': {
+        // target: 'https://ht.timerzz.com:20443/',
+        target: 'http://localhost:8087/',
+        changeOrigin: true,
+        secure: false,
+        ws: true,
      }
    },
  },