源文件
This commit is contained in:
216
src/views/product/index.vue
Normal file
216
src/views/product/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="getTableData" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="query.categoryId" placeholder="请选择商品分类" style="width: 100%;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="query.typeEnum" placeholder="请选择商品规格" style="width: 100%;">
|
||||
<el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<router-link :to="{ name: 'add_shop' }">
|
||||
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
|
||||
</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading">
|
||||
<el-table-column label="商品信息">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
<el-image :src="scope.row.coverImg"
|
||||
style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
|
||||
<div class="img_error" slot="error">
|
||||
<i class="icon el-icon-document-delete"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="info">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售价">
|
||||
<template v-slot="scope">
|
||||
<span>￥{{ scope.row.lowPrice }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量/库存">
|
||||
<template v-slot="scope">
|
||||
<span>{{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上架区域">
|
||||
<template v-slot="scope">
|
||||
<div v-if="scope.row.isShowCash">收银端</div>
|
||||
<div v-if="scope.row.isShowMall">小程序</div>
|
||||
<div v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" sortable />
|
||||
<el-table-column label="更新时间" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设为热门" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isHot" :active-value="1" :inactive-value="0"
|
||||
@change="changeHot($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
|
||||
<el-button type="text" icon="el-icon-edit">编辑</el-button>
|
||||
</router-link>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
|
||||
<el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
|
||||
slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import settings from '@/settings'
|
||||
import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
query: {
|
||||
name: '',
|
||||
categoryId: '',
|
||||
typeEnum: ''
|
||||
},
|
||||
categorys: [],
|
||||
typeEnums: settings.typeEnum,
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
this.tbShopCategoryGet()
|
||||
},
|
||||
methods: {
|
||||
// 设置热门
|
||||
async changeHot(e, row) {
|
||||
console.log(row)
|
||||
try {
|
||||
this.tableData.loading = true
|
||||
await tbProductIsHot({
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
id: row.id
|
||||
})
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = ''
|
||||
this.query.categoryId = ''
|
||||
this.query.typeEnum = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProduct({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
name: this.query.name,
|
||||
categoryId: this.query.categoryId,
|
||||
typeEnum: this.query.typeEnum,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品分类列表
|
||||
async tbShopCategoryGet() {
|
||||
try {
|
||||
const res = await tbShopCategoryGet({
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
page: 0,
|
||||
size: 100,
|
||||
sort: 'id'
|
||||
})
|
||||
this.categorys = res.content
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 删除商品
|
||||
async delTableHandle(ids) {
|
||||
try {
|
||||
await tbProductDelete(ids)
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_info {
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user