188 lines
3.5 KiB
Vue
188 lines
3.5 KiB
Vue
<template>
|
|
<CommonPage show-footer :title="$route.title">
|
|
<n-button type="primary" @click="addGood(1)">添加商品</n-button>
|
|
<n-data-table
|
|
:loading="loading"
|
|
:columns="columns"
|
|
:data="data"
|
|
:pagination="pagination"
|
|
:bordered="false"
|
|
remote
|
|
/>
|
|
</CommonPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { NButton, NEllipsis, NImage, NSwitch } from 'naive-ui'
|
|
import api from './api'
|
|
import api1 from '../add/api'
|
|
import { useGoodsStore } from '@/store/modules/goods'
|
|
|
|
const loading = ref(false)
|
|
|
|
const columns = ref([
|
|
{
|
|
title: 'ID',
|
|
align: 'center',
|
|
key: 'ID',
|
|
},
|
|
{
|
|
title: '封面',
|
|
align: 'center',
|
|
slot: 'cover',
|
|
render(row) {
|
|
return h(NImage, {
|
|
width: '50',
|
|
src: row.cover,
|
|
})
|
|
},
|
|
},
|
|
{
|
|
title: '商品分类',
|
|
align: 'center',
|
|
slot: 'class_id',
|
|
render(row) {
|
|
const data = optList.value.filter((item) => item.ID === row.class_id)
|
|
return h('span', data[0]?.name)
|
|
},
|
|
},
|
|
{
|
|
title: '商品名称',
|
|
align: 'center',
|
|
slot: 'name',
|
|
render(row) {
|
|
return h(
|
|
NEllipsis,
|
|
{
|
|
class: 'w-300',
|
|
},
|
|
{ default: () => row.name }
|
|
)
|
|
},
|
|
},
|
|
{
|
|
title: '商品价格',
|
|
align: 'center',
|
|
key: 'number',
|
|
},
|
|
{
|
|
title: '商品库存',
|
|
align: 'center',
|
|
key: 'stock',
|
|
},
|
|
{
|
|
title: '审核状态',
|
|
align: 'center',
|
|
slot: 'status',
|
|
render(row) {
|
|
return h('span', row.status === 1 ? '已审核' : row.status === 2 ? '已拒绝' : '待审核')
|
|
},
|
|
},
|
|
{
|
|
title: '是否上架',
|
|
align: 'center',
|
|
slot: 'state',
|
|
render(row) {
|
|
return [
|
|
h(NSwitch, {
|
|
checkedValue: 1,
|
|
uncheckedValue: 2,
|
|
value: row.state,
|
|
onUpdateValue: async (val) => {
|
|
await api1.addGoods({
|
|
...row,
|
|
state: val,
|
|
})
|
|
getList()
|
|
},
|
|
}),
|
|
]
|
|
},
|
|
},
|
|
{
|
|
title: '备注',
|
|
key: 'notes',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '操作',
|
|
align: 'center',
|
|
slot: 'action',
|
|
render(row) {
|
|
return [
|
|
h(
|
|
NButton,
|
|
{
|
|
type: 'primary',
|
|
size: 'small',
|
|
onClick: () => toEdit(row),
|
|
},
|
|
() => '编辑'
|
|
),
|
|
]
|
|
},
|
|
},
|
|
])
|
|
|
|
const data = ref([])
|
|
|
|
const pagination = ref({
|
|
page: 1,
|
|
pageSize: 10,
|
|
itemCount: 0,
|
|
onChange: (page) => {
|
|
pagination.value.page = page
|
|
getList()
|
|
},
|
|
onUpdatePageSize: (pageSize) => {
|
|
pagination.value.pageSize = pageSize
|
|
pagination.value.page = 1
|
|
getList()
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
getList()
|
|
getclasslist()
|
|
})
|
|
|
|
const optList = ref([])
|
|
|
|
const getclasslist = async () => {
|
|
const res = await api.getGoodClass()
|
|
optList.value = res.data.data
|
|
}
|
|
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await api.getGoods({
|
|
pageNum: pagination.value.page,
|
|
pageSize: pagination.value.pageSize,
|
|
})
|
|
data.value = res.data.data || []
|
|
pagination.value.itemCount = res.data.total
|
|
} catch (error) {
|
|
$message.error(error.msg)
|
|
}
|
|
loading.value = false
|
|
}
|
|
const route = useRouter()
|
|
const { setRow, setType } = useGoodsStore()
|
|
|
|
const addGood = (type) => {
|
|
setType(type === 1 ? 'add' : 'edit')
|
|
route.push({
|
|
path: '/goods/goods_add',
|
|
})
|
|
}
|
|
|
|
const toEdit = (item) => {
|
|
setRow(item)
|
|
addGood()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|