This commit is contained in:
parent
786217f2af
commit
3a09aaa751
@ -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)=>{
|
||||
@ -34,3 +34,17 @@ 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)
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
221
src/views/ban/index.vue
Normal file
221
src/views/ban/index.vue
Normal file
@ -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>
|
||||
@ -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),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user