From 3a09aaa7511bd0cec8032ef4a76e6e880c97a09a Mon Sep 17 00:00:00 2001
From: timerzz <zhhgzhhgzhhg@163.com>
Date: Tue, 3 Dec 2024 11:03:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=B1=8F=E8=94=BD=E5=95=86=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/articles.js         |  16 ++-
 src/views/article/index.vue |  63 ++++++++--
 src/views/ban/index.vue     | 221 ++++++++++++++++++++++++++++++++++++
 src/views/layout/Aside.vue  |  10 +-
 4 files changed, 297 insertions(+), 13 deletions(-)
 create mode 100644 src/views/ban/index.vue

diff --git a/src/api/articles.js b/src/api/articles.js
index f33a2ab..105111d 100644
--- a/src/api/articles.js
+++ b/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)
 }
\ No newline at end of file
diff --git a/src/views/article/index.vue b/src/views/article/index.vue
index 2edd0ba..6dfab8e 100644
--- a/src/views/article/index.vue
+++ b/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>
 
diff --git a/src/views/ban/index.vue b/src/views/ban/index.vue
new file mode 100644
index 0000000..995be43
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/layout/Aside.vue b/src/views/layout/Aside.vue
index c00c85a..f8bba48 100644
--- a/src/views/layout/Aside.vue
+++ b/src/views/layout/Aside.vue
@@ -9,8 +9,8 @@
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined,FundOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
-import {computed, h, ref} from "vue";
+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()
@@ -34,6 +34,12 @@ const items = [
     label: '商品',
     title: '商品',
   },
+  {
+    key: 'ban',
+    icon: () => h(MinusCircleOutlined),
+    label: '屏蔽商品',
+    title: '屏蔽商品',
+  },
   {
     key: 'watcher-v2',
     icon: () => h(AccountBookOutlined),