feat 屏蔽商品

src/api/articles.js

@@ -9,7 +9,7 @@ export const ListArticles = (q) => {
 }
 
 export const GetArticle = (id) =>{
-    return articles.get(`/${id}`)
+    return articles.get(`/u/${id}`)
 }
 
 export const UpdateArticle = (article)=>{
@@ -33,4 +33,18 @@ export const UpdateProviderArticle=(article)=>{
 
 export const UpdateSellerArticle=(article)=>{
     return articles.patch('seller',article)
+}
+
+
+export const BanArticle=(ids) => {
+    return articles.post(`ban/${ids}`)
+}
+
+export const LiftBanArticle=(ids)=>{
+    return articles.delete(`ban/${ids}`)
+}
+
+export const ListBanArticle=(q)=>{
+    const query = queryRemoveZero(q)
+    return articles.get('ban', query)
 }

src/views/article/index.vue

@@ -1,17 +1,22 @@
 <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="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between overflow-auto space-y-4">
     <div class="flex justify-between">
-      <div>
+      <div class="flex space-x-4">
         <a-button type="primary" @click="fetchArticle.visible=true">添加商品</a-button>
+        <a-button danger v-show="optData.ids.length > 0" type="primary" @click="onBan" :disabled="loading">批量屏蔽</a-button>
       </div>
       <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">
+    <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" :scroll="{y:1000}" @change="tableChange" rowKey="id">
+        <a-table :dataSource="data.list"
+                 :columns="columns" :pagination="false"
+                 row-key="id"
+                 :row-selection="{ selectedRowKeys: optData.ids, onChange: onSelectChange }"
+                 @change="tableChange" rowKey="id">
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'image'">
               <div class="w-75px h-75px">
@@ -42,6 +47,9 @@
             <template v-else-if="column.key === 'remark'">
               {{record.remark===''?'-':record.remark}}
             </template>
+            <template v-else-if="column.key === 'opt'">
+              <a-button danger type="text" @click="()=>{optData.ids=[record.id];onBan()}">屏蔽</a-button>
+            </template>
           </template>
         </a-table>
       </a-spin>
@@ -54,9 +62,8 @@
 
 import {computed, h, onMounted, reactive, ref} from "vue";
 import {LoadingOutlined} from "@ant-design/icons-vue";
-import {message} from "ant-design-vue";
-import {ListArticles, UpdateArticle} from "@/api/articles.js";
-import {useRouter} from "vue-router";
+import {message, Modal} from "ant-design-vue";
+import {BanArticle, ListArticles, UpdateArticle} from "@/api/articles.js";
 import FetchArticlePanel from "@/componse/fetch-article/fetch-article-panel.vue";
 
 const query = reactive({
@@ -156,10 +163,16 @@ const columns = computed(()=>[
     key: 'exclude',
     width: 150
   },
+  // {
+  //   title: '备注',
+  //   key: 'remark',
+  //   dataIndex: 'remark',
+  //   ellipsis: true,
+  // },
   {
-    title: '备注',
-    key: 'remark',
-    dataIndex: 'remark',
+    title: '操作',
+    key: 'opt',
+    dataIndex: 'opt',
     ellipsis: true,
   }
 ])
@@ -202,6 +215,36 @@ const fetchArticle = reactive({
   visible: false,
 })
 
+// 批量操作
+const optData = reactive({
+  ids: []
+})
+
+const onSelectChange = (selectedRowKeys) => {
+  optData.ids = selectedRowKeys;
+};
+
+const onBan=()=>{
+  Modal.confirm({
+    title: `屏蔽`,
+    content: `确定屏蔽这${optData.ids.length}个商品？`,
+    onOk() {
+      BanArticle(optData.ids).then(res=>{
+        if (res.code !== 200) {
+          message.error('屏蔽失败')
+          console.log(res)
+        }else {
+          message.success('屏蔽成功')
+          optData.ids = []
+        }
+      }).finally(()=>{
+        list()
+      })
+    },
+    centered: true
+  });
+}
+
 </script>
 <style scoped>
 

src/views/ats-tracer/index.vue

@@ -114,6 +114,11 @@ const columns = [
     dataIndex: 'providerId',
     key: 'providerId',
   },
+  {
+    title: '库存',
+    dataIndex: 'ats',
+    key: 'ats',
+  },
   {
     title: '抓取库存',
     dataIndex: 'traceAts',

src/views/ban/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between overflow-auto space-y-4">
+    <div class="flex justify-between">
+      <div class="flex space-x-4">
+        <a-button danger v-show="optData.ids.length > 0" type="primary" @click="onLiftBan" :disabled="loading">批量解除屏蔽</a-button>
+      </div>
+      <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"
+                 row-key="id"
+                 :row-selection="{ selectedRowKeys: optData.ids, onChange: onSelectChange }"
+                 @change="tableChange" rowKey="id">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <div class="w-75px h-75px">
+                <a-image  :src="record.image"/>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'name'">
+              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
+                {{record.name}}
+              </router-link>
+<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.name}}</span>-->
+            </template>
+            <template v-else-if="column.key === 'pid'">
+<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.pid}}</span>-->
+              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
+                {{record.pid}}
+              </router-link>
+            </template>
+            <template v-else-if="column.key === 'rate'">
+              <span>{{record.rate > 0 ? `${record.rate}%`:'--' }}</span>
+            </template>
+            <template v-else-if="column.key === 'available'">
+              <span :class="[record.available ? 'text-green-700':'text-red-500']">{{record.available ? '是':'否'}}</span>
+            </template>
+            <template v-else-if="column.key === 'remark'">
+              {{record.remark===''?'-':record.remark}}
+            </template>
+            <template v-else-if="column.key === 'opt'">
+              <a-button danger type="text" @click="()=>{optData.ids=[record.id];onLiftBan()}">解除屏蔽</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>
+</template>
+<script setup>
+
+import {computed, h, onMounted, reactive, ref} from "vue";
+import {LoadingOutlined} from "@ant-design/icons-vue";
+import {message, Modal} from "ant-design-vue";
+import {LiftBanArticle, ListBanArticle, } from "@/api/articles.js";
+
+const query = reactive({
+  keyword: "",
+  page: 1,
+  size: 8,
+  pid:'',
+  brand: '',
+  available: null,
+  rate_sort:null,
+})
+
+onMounted(()=>{
+  list()
+})
+
+const loading = ref(false)
+// 展示数据
+const data = reactive({
+  list: [],
+  total: 0
+})
+
+const list = () => {
+  loading.value = true
+  ListBanArticle(query).then(res => {
+    if (res.code !== 200) {
+      message.error(res.msg)
+    }else {
+      data.list = res.data.list
+      data.total = res.data.total
+    }
+  }).finally(()=>{
+    loading.value = false
+  })
+}
+
+const columns = computed(()=>[
+  {
+    title: '货号',
+    dataIndex: 'pid',
+    key: 'pid',
+    width: 200
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    key: 'name',
+    width: 350
+  },
+  {
+    title: '图片',
+    key: 'image',
+    width: 250
+  },
+  {
+    title: '最低成本价',
+    dataIndex: 'costPrice',
+    key: 'costPrice',
+    width: 150
+  },
+  {
+    title: '最低售价',
+    dataIndex: 'sellPrice',
+    key: 'sellPrice',
+    width: 150
+  },
+  {
+    title: '利润率',
+    key: 'rate',
+    dataIndex: 'rate',
+    width: 150,
+    sorter:true,
+    sortOrder: query.rate_sort
+  },
+  {
+    title: '可购买',
+    key: 'available',
+    dataIndex: 'available',
+    width: 150,
+    filteredValue: query.available,
+    filterMultiple:false,
+    filters:[
+      {
+        text: '可购买',
+        value: true,
+      },
+      {
+        text: '不可购买',
+        value: false,
+      },
+    ]
+  },
+  // {
+  //   title: '备注',
+  //   key: 'remark',
+  //   dataIndex: 'remark',
+  //   ellipsis: true,
+  // },
+  {
+    title: '操作',
+    key: 'opt',
+    dataIndex: 'opt',
+    ellipsis: true,
+  }
+])
+
+
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '32px',
+  },
+  spin: true,
+});
+
+//
+const tableChange = (pagination, filters, sorter, { action, currentDataSource })=>{
+  if(sorter.columnKey === 'rate') {
+    query.rate_sort = sorter.order
+  }
+  query.available = filters.available
+  list()
+}
+
+
+// 批量操作
+const optData = reactive({
+  ids: []
+})
+
+const onSelectChange = (selectedRowKeys) => {
+  optData.ids = selectedRowKeys;
+};
+
+const onLiftBan=()=>{
+  Modal.confirm({
+    title: `屏蔽`,
+    content: `确定解除屏蔽这${optData.ids.length}个商品？`,
+    onOk() {
+      LiftBanArticle(optData.ids).then(res=>{
+        if (res.code !== 200) {
+          message.error('解除屏蔽失败')
+          console.log(res)
+        }else {
+          message.success('解除屏蔽成功')
+          optData.ids = []
+        }
+      }).finally(()=>{
+        list()
+      })
+    },
+    centered: true
+  });
+}
+
+</script>
+<style scoped>
+
+</style>

src/views/layout/Aside.vue

@@ -5,21 +5,28 @@
       style="width: 256px;"
       mode="inline"
       :items="items"
+      :selectedKeys="selectedKeys"
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined,FundOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
-import {h} from "vue";
-import {useRouter} from "vue-router";
+import {AccountBookOutlined,FundOutlined,MinusCircleOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
+import {computed, h} from "vue";
+import {useRoute, useRouter} from "vue-router";
 
 const router = useRouter()
 
+const route = useRoute()
+
 const onclick = ({key}) => {
   router.push({
     path: '/'+key
   })
 }
 
+const selectedKeys = computed(()=>{
+  return [route.path.split('/')[1]]
+})
+
 const items = [
   {
     key: 'article',
@@ -27,6 +34,12 @@ const items = [
     label: '商品',
     title: '商品',
   },
+  {
+    key: 'ban',
+    icon: () => h(MinusCircleOutlined),
+    label: '屏蔽商品',
+    title: '屏蔽商品',
+  },
   {
     key: 'watcher-v2',
     icon: () => h(AccountBookOutlined),
@@ -65,8 +78,6 @@ const items = [
   }
 ]
 
-
-
 </script>
 
 <style scoped>