This commit is contained in:
parent
a1d7b53258
commit
1b14577ffb
@ -1,264 +0,0 @@
|
|||||||
<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="addModal.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 === 'website'">
|
|
||||||
<span>{{WEBSITE_OPTIONS.find(w => w.value === record.website).label}}</span>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="column.key === 'watch'">
|
|
||||||
<a-switch :checked="record.watch" @click="watcherStatusChange(!record.watch,record.uid)"/>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="column.key === 'name'">
|
|
||||||
<a v-if="record.name !== '' " :href="record.link" target="_blank">{{record.name}}</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 === 'pushers'">
|
|
||||||
<template v-if="record.pushers.length>0" v-for="pusher in record.pushers">
|
|
||||||
<a-tag :bordered="false" color="processing" >{{pusher.name}}</a-tag>
|
|
||||||
</template>
|
|
||||||
<span v-else>-</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" :total="data.total" show-less-items @change="list" />
|
|
||||||
</div>
|
|
||||||
<a-modal v-model:open="addModal.visible" title="添加监听任务" @ok="handleOk" >
|
|
||||||
<a-spin :spinning="addModal.loading" :indicator="indicator">
|
|
||||||
<a-form
|
|
||||||
:model="addModal.data"
|
|
||||||
:label-col="{ span: 4 }"
|
|
||||||
:wrapper-col="{ span: 16 }"
|
|
||||||
autocomplete="off"
|
|
||||||
@finish="closeAddModal"
|
|
||||||
@finishFailed="closeAddModal"
|
|
||||||
>
|
|
||||||
<a-form-item label="ID" name="pid" :rules="[{ required: true, message: '请填写商品id' }]">
|
|
||||||
<a-input v-model:value="addModal.data.pid" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="推送" name="pushers" :rules="[{ required: true, message: '请选择通知推送' }]">
|
|
||||||
<a-select
|
|
||||||
v-model:value="pushersComputed"
|
|
||||||
mode="multiple"
|
|
||||||
@dropdown-visible-change="getPushers"
|
|
||||||
placeholder="请选择通知推送"
|
|
||||||
>
|
|
||||||
<a-select-option v-for="p in pusher.list" :value="p.id">{{p.name}}</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="备注" name="remark">
|
|
||||||
<a-textarea v-model:value="addModal.data.remark" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-spin>
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import moment from "moment";
|
|
||||||
import {computed, h, onMounted, reactive, ref} from "vue";
|
|
||||||
import {ListWatchers, CreateWatcher, DeleteWatcher, StartWatcher, StopWatcher} from "@/api/watcher.js";
|
|
||||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
||||||
import {message, Modal} from 'ant-design-vue';
|
|
||||||
import {WEBSITE_OPTIONS} from "@/constants/website.js";
|
|
||||||
import {onBeforeRouteLeave} from "vue-router";
|
|
||||||
import {ListPushers} from "@/api/pusher.js";
|
|
||||||
|
|
||||||
let ticker = null
|
|
||||||
onMounted(()=>{
|
|
||||||
list(false)
|
|
||||||
getPushers()
|
|
||||||
ticker = setInterval(list, 2000, true)
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeRouteLeave(()=>{
|
|
||||||
if(ticker){
|
|
||||||
clearInterval(ticker)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const query = reactive({
|
|
||||||
// Website database.WebsiteType `query:"website,omitempty"` //是什么网站
|
|
||||||
// Watch *bool `query:"watch,omitempty"`
|
|
||||||
// Orderable *bool `query:"orderable,omitempty"`
|
|
||||||
// Keyword string `query:"keyword,omitempty"`
|
|
||||||
page: 1,
|
|
||||||
size:10
|
|
||||||
})
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
const data = ref({
|
|
||||||
total: 0,
|
|
||||||
list:[]
|
|
||||||
})
|
|
||||||
|
|
||||||
const list = (silent)=>{
|
|
||||||
if(!silent){
|
|
||||||
loading.value = true
|
|
||||||
}
|
|
||||||
ListWatchers(query).then(res=>{
|
|
||||||
data.value = res
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
}).finally(()=>{
|
|
||||||
if(!silent){
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const addModal = reactive({
|
|
||||||
visible: false,
|
|
||||||
data: {
|
|
||||||
pid:'',
|
|
||||||
remark:'',
|
|
||||||
pushers:[]
|
|
||||||
},
|
|
||||||
loading: false
|
|
||||||
})
|
|
||||||
const pushersComputed = computed({
|
|
||||||
get:()=>addModal.data.pushers.map(p => p.id),
|
|
||||||
set:(val)=>{
|
|
||||||
addModal.data.pushers = val.map(id=>pusher.list.find(p=> p.id===id))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const closeAddModal = ()=>{
|
|
||||||
addModal.visible = false
|
|
||||||
addModal.data = {
|
|
||||||
pid:'',
|
|
||||||
remark:'',
|
|
||||||
pushers: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOk = ()=>{
|
|
||||||
CreateWatcher(addModal.data).then(res=>{
|
|
||||||
message.success("添加成功")
|
|
||||||
}).catch(err => {
|
|
||||||
message.error("添加失败")
|
|
||||||
console.log(err)
|
|
||||||
}).finally(()=>{
|
|
||||||
list(false)
|
|
||||||
closeAddModal()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const pusher = reactive({
|
|
||||||
list: [],
|
|
||||||
query: {
|
|
||||||
keyword:'',
|
|
||||||
all: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const getPushers = ()=>{
|
|
||||||
ListPushers(pusher.query).then(res=>{
|
|
||||||
pusher.list = res.list || []
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const onDelete = ({name, uid})=>{
|
|
||||||
Modal.confirm({
|
|
||||||
title: '确认',
|
|
||||||
content: `确定删除 ${name} 监听?`,
|
|
||||||
centered: true,
|
|
||||||
onOk() {
|
|
||||||
DeleteWatcher(uid).then(res=>{
|
|
||||||
message.success("删除成功")
|
|
||||||
list(false)
|
|
||||||
}).catch(err=>{
|
|
||||||
message.error("删除失败")
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const watcherStatusChange=(changed, uid)=>{
|
|
||||||
const api = changed ? StartWatcher:StopWatcher
|
|
||||||
loading.value = true
|
|
||||||
api(uid).then(res=>{
|
|
||||||
message.success(`${changed?'开启':'关闭'}成功`)
|
|
||||||
}).catch(err=>{
|
|
||||||
message.error(`${changed?'开启':'关闭'}失败`)
|
|
||||||
}).finally(list)
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '货号',
|
|
||||||
dataIndex: 'pid',
|
|
||||||
key: 'pid',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '品牌',
|
|
||||||
dataIndex: 'brand',
|
|
||||||
key: 'brand',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '网站',
|
|
||||||
dataIndex: 'website',
|
|
||||||
key: 'website',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '正在蹲货',
|
|
||||||
dataIndex: 'watch',
|
|
||||||
key: 'watch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '抓取时间',
|
|
||||||
dataIndex: 'updatedAt',
|
|
||||||
key: 'updatedAt',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '推送',
|
|
||||||
key: 'pushers',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '备注',
|
|
||||||
dataIndex: 'remark',
|
|
||||||
key: 'remark',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'opt',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const indicator = h(LoadingOutlined, {
|
|
||||||
style: {
|
|
||||||
fontSize: '32px',
|
|
||||||
},
|
|
||||||
spin: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user