czg_team/cashier-admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增商品增加与编辑

Browse Source
This commit is contained in:
gyq
2024-01-21 18:29:18 +08:00
parent 26425e7f57
commit 966ef627bb
10 changed files with 713 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -9,3 +9,9 @@ export default {
name: 'App'
}
</script>
<style>
.tips {
color: #999;
}
</style>

60
src/api/shop.js
View File

@@ -168,7 +168,7 @@ export function tbProductSpecPut(data) {
}
/**
* 规格更改
* 删除规格
* @returns
*/
export function tbProductSpecDelete(data) {
@@ -191,7 +191,6 @@ export function tbProductGroupPost(data) {
})
}
/**
* 更改分组
* @returns
@@ -220,11 +219,60 @@ export function tbProductGroupGet(params) {
* 商品列表（根据分组中的商品id）
* @returns
*/
export function productListGet(params) {
export function productListGet(productGroup) {
return request({
url: `/api/tbProduct/productList`,
method: 'get',
params
url: `/api/tbProductGroup/${productGroup}`,
method: 'get'
})
}
/**
* 删除分组
* @returns
*/
export function tbProductGroupDelete(data) {
return request({
url: `/api/tbProductGroup`,
method: 'DELETE',
data
})
}
/**
* 添加商品
* @returns
*/
export function tbProductPost(data) {
return request({
url: `/api/tbProduct`,
method: 'post',
data
})
}
/**
* 添加商品
* @returns
*/
export function tbProductPut(data) {
return request({
url: `/api/tbProduct`,
method: 'put',
data
})
}
/**
* 商品详情（单个商品）
* product 商品id
* @returns
*/
export function tbProductGetDetail(product) {
return request({
url: `/api/tbProduct/${product}`,
method: 'get'
})
}

8
src/components/uploadImg/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<el-upload ref="upload" :action="qiNiuUploadApi" :headers="headers" :file-list="fileList" :limit="limit"
list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handleSuccess"
:on-error="handleError" :on-exceed="onExceed" :on-remove="handleRemove">
:list-type="type" :on-preview="handlePictureCardPreview" :multiple="limit > 1"
:on-success="handleSuccess" :on-error="handleError" :on-exceed="onExceed" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :z-index="99">
@@ -21,6 +21,10 @@ export default {
])
},
props: {
type: {
type: String,
default: 'picture-card'
},
limit: {
type: Number,
default: 1

29
src/settings.js
View File

@@ -42,5 +42,32 @@ module.exports = {
/**
* 备案号
*/
caseNumber: '陕ICP备2022008069号'
caseNumber: '陕ICP备2022008069号',
typeEnum: [
{
label: '计量商品',
intro: '单价购买',
typeEnum: 'normal'
},
{
label: '多规格',
intro: '多种不同规格',
typeEnum: 'sku'
},
{
label: '套餐商品',
intro: '选职多种组合',
typeEnum: 'group'
},
{
label: '称重商品',
intro: '按重量售卖',
typeEnum: 'weight'
},
{
label: '时价商品',
intro: '按重量售卖',
typeEnum: 'currentPrice'
}
]
}

545
src/views/product/add_shop.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="app-container">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="商品类型" prop="type">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="商品类型" prop="typeEnum">
<div class="shop_type_box">
<div class="item" v-for="(item, index) in shopTypes" :key="index"
:class="{ active: shopTypesActive == index }" @click="shopTypesActive = index">
<div class="title">{{ item.label }}</div>
:class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
<div class="s_title">{{ item.label }}</div>
<div class="intro">（{{ item.intro }}）</div>
<div class="active_dot">
<i class="el-icon-check"></i>
@@ -17,64 +17,260 @@
<el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="单位">
<el-select v-model="form.unit" placeholder="请选择单位" style="width: 500px;">
<el-select v-model="form.unitId" placeholder="请选择单位" style="width: 500px;">
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
</el-select>
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
<addUnit ref="addUnitRef" />
<addUnit ref="addUnitRef" @success="tbShopUnit" />
</el-form-item>
<el-form-item label="商品分类" prop="classify">
<el-select v-model="form.unit" placeholder="请选择商品分类" style="width: 500px;">
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
<el-form-item label="商品分类" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="请选择商品分类" style="width: 500px;">
<el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
</el-select>
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
<addClassify ref="addClassifyRef" />
<addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
</el-form-item>
<el-form-item label="商品图片">
<uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" />
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750(可拖动图片排序)</div>
</el-form-item>
<el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
<el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
<el-table-column label="标题" prop="title">
<template v-slot="scope">
<el-input v-model="scope.row.title" placeholder="请输入标题：自选小吃"></el-input>
</template>
</el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="shop_list">
<div class="item" v-for="item in scope.row.goods" :key="item.id">
<span class="dot"></span>
<div class="name">
<div class="t">{{ item.name }}</div>
</div>
<i class="del el-icon-delete"></i>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="几选几">
<template v-slot="scope">
<span>{{ scope.row.goods.length }}选</span>
<el-input-number v-model="scope.row.number" controls-position="right"
:min="1"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" width="160">
<template v-slot="scope">
<el-button type="text" @click="tableAddShop(scope.$index, scope.row.goods)">添加商品</el-button>
<el-button type="text" @click="form.groupSnap.splice(scope.$index, 1)">删除分组</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" @click="$refs.shopListRef.show()">添加分组</el-button>
<shopList ref="shopListRef" @success="selectShopRes" />
</el-form-item>
<el-form-item label="规格属性" v-if="shopTypes[shopTypesActive].typeEnum != 'sku'">
<el-table :data="form.skuList" border>
<el-table-column label="售价" prop="salePrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.salePrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="会员价" prop="memberPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.memberPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="成本价" prop="costPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.costPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="原价" prop="originPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.originPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="库存数量" prop="stockNumber">
<template v-slot="scope">
<el-input-number v-model="scope.row.stockNumber"></el-input-number>
</template>
</el-table-column>
<el-table-column label="分销金额" prop="firstShared">
<template v-slot="scope">
<el-input-number v-model="scope.row.firstShared"></el-input-number>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
<el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px;" @change="selectSpecHandle">
<el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="item.name" v-if="selectSpec.length" v-for="item in selectSpec" :key="item.name">
<el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
<el-checkbox :label="item" v-for="(item, index) in item.value
" :key="index"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="selectSpecResult && shopTypes[shopTypesActive].typeEnum == 'sku'">
<el-table :data="form.skuList" border>
<el-table-column :label="item.label" :prop="item.value" v-for="(item, index) in specTableHeaders"
:key="index">
</el-table-column>
<el-table-column label="图片" prop="coverImg">
<template v-slot="scope">
<uploadImg type="text" :limit="1" @success="res => scope.row.coverImg = res[0]"
v-if="!scope.row.coverImg" />
<el-image style="width:30px;height:30px;" :src="scope.row.coverImg" v-else />
</template>
</el-table-column>
<el-table-column label="售价" prop="salePrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.salePrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="会员价" prop="memberPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.memberPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="成本价" prop="costPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.costPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="原价" prop="originPrice">
<template v-slot="scope">
<el-input-number v-model="scope.row.originPrice"></el-input-number>
</template>
</el-table-column>
<el-table-column label="库存数量" prop="stockNumber">
<template v-slot="scope">
<el-input-number v-model="scope.row.stockNumber"></el-input-number>
</template>
</el-table-column>
<el-table-column label="分销金额" prop="firstShared">
<template v-slot="scope">
<el-input-number v-model="scope.row.firstShared"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template v-slot="scope">
<el-button type="text" @click="form.skuList.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="库存开关">
<el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="标签打印">
<el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="打包费">
<el-input-number v-model="form.packFee" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="虚拟销量">
<el-input-number v-model="form.baseSalesNumber" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandle">确定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { tbShopUnit } from "@/api/shop";
import { tbShopUnit, tbShopCategoryGet, tbProductPost, tbProductSpecGet, tbProductGetDetail, tbProductPut } from "@/api/shop";
import addUnit from './components/addUnit'
import addClassify from './components/addClassify'
import shopList from './components/shopList'
import uploadImg from '@/components/uploadImg'
import settings from '@/settings'
export default {
components: {
addUnit,
addClassify
addClassify,
uploadImg,
shopList
},
data() {
return {
shopTypesActive: 0,
shopTypes: [
shopTypes: settings.typeEnum,
skuList: [
{
label: '计量商品',
intro: '单价购买'
label: '售价',
value: 'salePrice'
},
{
label: '多规格',
intro: '多种不同规格'
label: '会员价',
value: 'memberPrice'
},
{
label: '套餐商品',
intro: '选职多种组合'
label: '成本价',
value: 'costPrice'
},
{
label: '称重商品',
intro: '按重量售卖'
label: '原价',
value: 'originPrice'
},
{
label: '时价商品',
intro: '按重量售卖'
label: '库存数量',
value: 'stockNumber'
},
{
label: '一级分销金额',
value: 'firstShared'
}
],
specTableHeaders: [],
specTableBodys: [],
specId: '',
specList: [],
selectSpec: [],
selectSpecResult: false,
defaultSku: {
salePrice: 0,
memberPrice: 0,
costPrice: 0,
originPrice: 0,
stockNumber: 0,
firstShared: 0
},
tableAddShopIndex: null,
form: {
type: 1,
id: '',
typeEnum: 'normal',
name: '',
unit: ''
unitId: '',
categoryId: '', // 商品分类id
coverImg: '',
images: [],
shopId: localStorage.getItem('shopId'),
lowPrice: '',
skuList: [],
isStock: 0,
isStock: 0,
packFee: 0,
specId: '',
baseSalesNumber: 0,
sort: 0,
groupSnap: [],
specInfo: [],
selectSpec: [],
specTableHeaders: []
},
rules: {
type: [
typeEnum: [
{
required: true
}
@@ -85,23 +281,275 @@ export default {
trigger: 'blur',
message: '请输入商品名称'
}
],
categoryId: [
{
required: true,
trigger: 'change',
message: '请选择商品分类'
}
]
},
units: []
units: [],
categorys: []
}
},
mounted() {
this.tbShopUnit();
this.tbShopUnit()
this.tbShopCategoryGet()
this.changeTypeEnum(0)
if (this.$route.query.goods_id) {
this.tbProductGetDetail()
}
},
methods: {
// 商品详情
async tbProductGetDetail() {
try {
const res = await tbProductGetDetail(this.$route.query.goods_id)
// 赋值商品类型
this.changeTypeEnum(this.shopTypes.findIndex(item => item.typeEnum == res.typeEnum))
this.specTableHeaders = JSON.parse(res.specTableHeaders)
this.selectSpec = JSON.parse(res.selectSpec)
// 初始化上传图片
const images = JSON.parse(res.images);
this.$refs.uploadImg.fileList = images.map(item => {
return {
url: item
}
})
this.form = res
this.form.skuList = JSON.parse(res.specInfo)
if (res.typeEnum == 'sku' && this.form.skuList.length) {
this.selectSpecResult = true
}
} catch (error) {
console.log(error)
}
},
// 提交
async submitHandle() {
try {
this.$refs.formRef.validate(async faild => {
if (faild) {
this.form.lowPrice = this.form.skuList[0].salePrice
this.form.coverImg = this.form.images[0]
this.form.selectSpec = JSON.stringify(this.selectSpec)
this.form.specTableHeaders = JSON.stringify(this.specTableHeaders)
if (this.form.id) {
await tbProductPut(this.form)
} else {
this.form.specInfo = JSON.stringify(this.form.skuList)
await tbProductPost(this.form)
}
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
this.$router.back()
}
})
} catch (error) {
console.log(error)
}
},
// 给分组添加商品
tableAddShop(index, goods) {
this.tableAddShopIndex = index
this.$refs.shopListRef.show([...goods])
},
// 分组选择商品
selectShopRes(res) {
if (this.tableAddShopIndex != null) {
this.form.groupSnap[this.tableAddShopIndex].goods = res;
this.tableAddShopIndex = null
} else {
this.form.groupSnap.push({
title: '',
goods: res,
number: 1
})
}
},
// 切换类型
changeTypeEnum(index) {
this.shopTypesActive = index
const typeEnum = this.shopTypes[index].typeEnum
this.form.typeEnum = typeEnum
if (typeEnum == 'sku') {
this.tbProductSpecGet()
} else {
this.specId = ''
this.form.specId = ''
this.selectSpec = []
this.selectSpecResult = ''
this.form.skuList = [JSON.parse(JSON.stringify(this.defaultSku))]
}
},
// 上传图片
uploadSuccess(res) {
this.form.images.push(res[0])
},
// 选择规格属性
selectSpecResultChange() {
this.createSkuHeader()
this.createSkuBody()
},
// 生成多规格表体
createSkuBody() {
let bodys = []
for (let item of this.selectSpec) {
if (item.selectSpecResult.length) {
let arr = []
for (let val of item.selectSpecResult) {
arr.push({
[item.name]: val
})
}
bodys.push(arr)
}
}
let arr = this.cartesian(bodys)
console.log(arr)
let newarr = []
const m = {
coverImg: '',
...this.defaultSku
}
for (let item of arr) {
if (Array.isArray(item)) {
let obj = {}
let specSnap = []
for (let v of item) {
for (let key in v) {
obj[`${key}`] = v[key]
specSnap.push(v[key])
}
}
newarr.push({
specSnap: specSnap.join(','),
...m,
...obj
})
} else {
let specSnap = []
for (let key in item) {
specSnap.push(item[key])
}
newarr.push({
specSnap: specSnap.join(','),
...m,
...item
})
}
}
this.form.skuList = []
this.form.skuList = newarr
console.log(this.form.skuList)
},
// 笛卡尔积算法
cartesian(arr) {
if (arr.length < 2) return arr[0] || [];
return [].reduce.call(arr, (col, set) => {
let res = [];
col.forEach(c => {
set.forEach(s => {
let t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
})
});
return res;
});
},
// 生成多规格表头
createSkuHeader() {
let i = 0
const headers = []
for (let item of this.selectSpec) {
if (item.selectSpecResult.length) {
i++
headers.push({
label: item.name,
value: item.name
})
}
}
this.selectSpecResult = i
this.specTableHeaders = headers
},
// 选择规格
selectSpecHandle(e) {
const selectSpec = JSON.parse(JSON.stringify(this.specList.find(item => item.id == e).specList))
for (let item in selectSpec) {
selectSpec[item].selectSpecResult = []
}
this.selectSpec = selectSpec
this.form.skuList = []
},
// 获取规格列表
async tbProductSpecGet() {
try {
const res = await tbProductSpecGet({
shopId: localStorage.getItem('shopId'),
sort: 'id',
page: 0,
size: 100
})
this.specList = res.content
} catch (error) { }
},
// 获取单位
async tbShopUnit() {
try {
const res = await tbShopUnit({
shopId: localStorage.getItem('shopId'),
sort: 'id',
page: 0,
size: 100
})
this.units = res.content
} catch (error) { }
},
// 商品分类列表
async tbShopCategoryGet() {
try {
const res = await tbShopCategoryGet({
shopId: localStorage.getItem('shopId'),
sort: 'id',
page: 0,
size: 100
})
let categorys = []
for (let item of res.content) {
categorys.push({
name: `|----${item.name}`,
id: item.id
})
if (item.childrenList.length) {
for (let val of item.childrenList) {
categorys.push({
name: `|----|----${val.name}`,
id: val.id
})
}
}
}
this.categorys = categorys
} catch (error) {
console.log('商品分类列表', error)
}
}
}
}
@@ -152,7 +600,7 @@ export default {
padding-right: 2px;
}
.title {
.s_title {
font-weight: bold;
color: #555;
}
@@ -164,4 +612,43 @@ export default {
}
}
}
.shop_list {
.item {
display: flex;
align-items: center;
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
background-color: #1890FF;
}
.name {
flex: 1;
margin-left: 10px;
.t {
color: #333;
font-size: 14px;
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.del {
font-size: 14px;
color: #999;
&:hover {
cursor: pointer;
color: #555;
}
}
}
}
</style>

5
src/views/product/components/addGroup.vue
View File

@@ -97,9 +97,8 @@ export default {
},
async getProduts() {
try {
const res = await productListGet({
productList: this.form.productIds
})
const res = await productListGet(this.form.id)
this.productIds = res
} catch (error) {
console.log(error)
}

34
src/views/product/components/shopList.vue
View File

@@ -64,11 +64,9 @@ export default {
total: 0,
loading: false,
list: []
}
}
},
mounted() {
this.tbShopCategoryGet()
goods: []
}
},
methods: {
// 确定选商品
@@ -81,7 +79,8 @@ export default {
resetHandle() {
this.searhForm.name = ''
this.searhForm.category = ''
this.tableData.page = 0;
this.tableData.page = 0
this.tableData.list = []
this.getTableData()
},
// 分页回调
@@ -101,6 +100,12 @@ export default {
this.tableData.loading = false
this.tableData.list = res.content
this.tableData.total = res.totalElements
if (this.goods.length) {
this.$nextTick(() => {
this.selection()
})
}
} catch (error) {
console.log(error)
}
@@ -119,11 +124,28 @@ export default {
console.log(error)
}
},
show() {
show(goods) {
console.log('show-goods===', goods)
this.dialogVisible = true
if (goods && goods.length) {
this.goods = goods
} else {
this.goods = []
}
this.resetHandle()
this.getTableData()
},
close() {
this.dialogVisible = false
},
selection() {
this.goods.forEach(row => {
this.tableData.list.forEach((item, index) => {
if (row.id == item.id) {
this.$refs.table.toggleRowSelection(this.tableData.list[index]);
}
})
});
}
}
}

4
src/views/product/group/index.vue
View File

@@ -35,7 +35,7 @@
<script>
import addGroup from '../components/addGroup'
import { tbProductGroupGet, tbProductSpecDelete } from '@/api/shop'
import { tbProductGroupGet, tbProductGroupDelete } from '@/api/shop'
export default {
components: {
addGroup
@@ -68,7 +68,7 @@ export default {
// 删除
async delHandle(ids) {
try {
await tbProductSpecDelete(ids)
await tbProductGroupDelete(ids)
this.$notify({
title: '成功',
message: `删除成功`,

91
src/views/product/index.vue
View File

@@ -3,19 +3,17 @@
<div class="head-container">
<el-row :gutter="20">
<el-col :span="3">
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
<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.class" placeholder="请选择商品分类" style="width: 100%;">
<el-option label="饮品" :value="1" />
<el-option label="烤串" :value="2" />
</el-select>
<el-cascader :options="categorys" v-model="query.categoryId" :show-all-levels="false"
:props="{ value: 'id', label: 'name', children: 'childrenList', expandTrigger: 'hover', emitPath: false }"
clearable placeholder="请选择商品分类"></el-cascader>
</el-col>
<el-col :span="3">
<el-select v-model="query.sku" placeholder="请选择商品规格" style="width: 100%;">
<el-option label="饮品" :value="1" />
<el-option label="烤串" :value="2" />
<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">
@@ -39,7 +37,11 @@
<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;" />
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>
@@ -58,11 +60,17 @@
</el-table-column>
<el-table-column label="上架区域" prop="area" />
<el-table-column label="排序" prop="sort" sortable />
<el-table-column label="更新时间" prop="update" />
<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="操作" width="200">
<template v-slot="scope">
<el-button type="primary" size="mini" round icon="el-icon-edit">编辑</el-button>
<el-button type="danger" size="mini" round icon="el-icon-delete">删除</el-button>
<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-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -75,15 +83,20 @@
</template>
<script>
import { tbProduct } from '@/api/shop'
import dayjs from 'dayjs'
import settings from '@/settings'
import { tbProduct, tbShopCategoryGet } from '@/api/shop'
export default {
data() {
return {
dayjs,
query: {
blurry: '',
class: '',
sku: ''
name: '',
categoryId: '',
typeEnum: ''
},
categorys: [],
typeEnums: settings.typeEnum,
tableData: {
data: [],
page: 0,
@@ -95,18 +108,19 @@ export default {
},
mounted() {
this.getTableData()
this.tbShopCategoryGet()
},
methods: {
// 重置查询
resetHandle() {
this.query.blurry = ''
this.query.class = ''
this.query.sku = ''
this.query.name = ''
this.query.categoryId = ''
this.query.typeEnum = ''
this.getTableData()
},
// 分页回调
paginationChange(e) {
this.tableData.page = e
this.tableData.page = e - 1
this.getTableData()
},
// 获取商品列表
@@ -115,17 +129,50 @@ export default {
try {
const res = await tbProduct({
page: this.tableData.page,
size: this.tableData.size
size: this.tableData.size,
name: this.query.name,
categoryId: this.query.categoryId,
typeEnum: this.query.typeEnum
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) { }
} 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)
}
}
}
}
</script>
<style>
.img_error {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 20px;
color: #999;
}
}
</style>
<style scoped lang="scss">
.shop_info {
display: flex;

3
src/views/shop/components/shopInfo.vue
View File

@@ -217,8 +217,9 @@ export default {
this.formLoading = true
try {
if (this.startTime && this.endTime) {
this.form.businessTime = `${dayjs(this.startTime).format('HH:mm')}-${dayjs(this.endTime).format('HH:mm')}`
this.form.businessTime = `${this.startTime}-${this.endTime}`
}
console.log(this.startTime, this.endTime);
const res = await tbShopInfoPut(this.form)
this.formLoading = false
this.$notify({