新增添加商品

This commit is contained in:
gyq 2024-05-16 10:09:31 +08:00
parent 055b0a068b
commit 8135d4616b
3 changed files with 117 additions and 48 deletions

View File

@ -1,8 +1,8 @@
<template> <template>
<el-dialog title="选择商品" :visible.sync="dialogVisible" @open="resetHandle()"> <el-dialog title="选择团购券分类" :visible.sync="dialogVisible" @open="resetHandle()">
<el-form :model="searhForm" inline> <el-form :model="searhForm" inline>
<el-form-item> <el-form-item>
<el-input v-model="searhForm.name" placeholder="商品名称"></el-input> <el-input v-model="searhForm.name" placeholder="分类名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="getTableData">查询</el-button> <el-button type="primary" @click="getTableData">查询</el-button>
@ -11,6 +11,7 @@
</el-form> </el-form>
<div class="head-container"> <div class="head-container">
<el-table ref="table" :data="tableData.list" v-loading="tableData.loading"> <el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="状态" prop="status"> <el-table-column label="状态" prop="status">
<template v-slot="scope"> <template v-slot="scope">
@ -18,16 +19,15 @@
disabled></el-switch> disabled></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="confirmHandle(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size" <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" @size-change="sizeChange" @current-change="paginationChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination> layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="confirmHandle"> </el-button>
</span>
</el-dialog> </el-dialog>
</template> </template>
@ -46,13 +46,15 @@ export default {
total: 0, total: 0,
loading: false, loading: false,
list: [] list: []
} },
goods: []
} }
}, },
methods: { methods: {
// //
confirmHandle(row) { confirmHandle(row) {
this.$emit('success', row) let res = this.$refs.table.selection
this.$emit('success', res)
this.close() this.close()
}, },
// //
@ -83,19 +85,42 @@ export default {
name: this.searhForm.name, name: this.searhForm.name,
sort: 'id', sort: 'id',
}) })
this.tableData.loading = false
this.tableData.list = res.content this.tableData.list = res.content
this.tableData.total = res.totalElements this.tableData.total = res.totalElements
if (this.goods.length) {
this.$nextTick(() => {
this.selection()
})
}
setTimeout(() => {
this.tableData.loading = false
}, 500);
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}, },
show() { show(goods) {
this.dialogVisible = true this.dialogVisible = true
if (goods && goods.length) {
this.goods = [...goods]
} else {
this.goods = []
}
this.resetHandle() this.resetHandle()
this.getTableData()
}, },
close() { close() {
this.dialogVisible = false 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]);
}
})
});
} }
} }
} }

View File

@ -112,7 +112,6 @@ export default {
shopId: localStorage.getItem('shopId'), shopId: localStorage.getItem('shopId'),
sort: 'id', sort: 'id',
}) })
this.tableData.loading = false
this.tableData.list = res.content this.tableData.list = res.content
this.tableData.total = res.totalElements this.tableData.total = res.totalElements
@ -121,6 +120,9 @@ export default {
this.selection() this.selection()
}) })
} }
setTimeout(() => {
this.tableData.loading = false
}, 500);
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }

View File

@ -23,7 +23,18 @@
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button> <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
<addUnit ref="addUnitRef" @success="tbShopUnit" /> <addUnit ref="addUnitRef" @success="tbShopUnit" />
</el-form-item> </el-form-item>
<el-form-item label="商品分类" prop="categoryId"> <el-form-item label="团购券分类" prop="groupCategoryId" v-if="form.typeEnum == 'group'">
<el-table :data="form.groupCategoryId" border style="width: 500px;" v-if="form.groupCategoryId.length">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="操作" width="160">
<template v-slot="scope">
<el-button type="text" @click="form.groupCategoryId.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" @click="$refs.groupTypeList.show(form.groupCategoryId)">添加团购券分类</el-button>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId" v-else>
<el-select v-model="form.categoryId" placeholder="请选择商品分类" style="width: 500px;"> <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-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
</el-select> </el-select>
@ -33,7 +44,7 @@
</el-form-item> </el-form-item>
<el-form-item label="商品图片"> <el-form-item label="商品图片">
<uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" /> <uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" />
<div class="tips">第一张图为商品封面图图片尺寸为750×750(可拖动图片排序)</div> <div class="tips">第一张图为商品封面图图片尺寸为750×750</div>
</el-form-item> </el-form-item>
<el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'"> <el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
<el-table :data="form.groupSnap" border v-if="form.groupSnap.length"> <el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
@ -49,6 +60,9 @@
<span class="dot"></span> <span class="dot"></span>
<div class="name"> <div class="name">
<div class="t">{{ item.name }}</div> <div class="t">{{ item.name }}</div>
<div class="t" v-if="!form.id">x{{ item.groupNum }}</div>
<el-input-number v-model="item.groupNum" :step="1" step-strictly :min="1"
size="mini" v-else></el-input-number>
</div> </div>
<i class="del el-icon-delete"></i> <i class="del el-icon-delete"></i>
</div> </div>
@ -212,37 +226,40 @@
</el-table> </el-table>
<div class="tips" v-if="form.isShowMall">小程序商城必须设置库存数量大于0</div> <div class="tips" v-if="form.isShowMall">小程序商城必须设置库存数量大于0</div>
</el-form-item> </el-form-item>
<el-form-item label="上架区域"> <template v-if="form.typeEnum != 'group'">
<div class="shop_type_box"> <el-form-item label="上架区域">
<div class="item" :class="{ active: form.isShowCash }" @click="areaChange('isShowCash')"> <div class="shop_type_box">
<div class="s_title">收银台</div> <div class="item" :class="{ active: form.isShowCash }" @click="areaChange('isShowCash')">
<div class="active_dot"> <div class="s_title">收银台</div>
<i class="el-icon-check"></i> <div class="active_dot">
<i class="el-icon-check"></i>
</div>
</div>
<div class="item" :class="{ active: form.isShowMall }" @click="areaChange('isShowMall')">
<div class="s_title">小程序商城</div>
<div class="active_dot">
<i class="el-icon-check"></i>
</div>
</div> </div>
</div> </div>
<div class="item" :class="{ active: form.isShowMall }" @click="areaChange('isShowMall')"> </el-form-item>
<div class="s_title">小程序商城</div> <el-form-item label="库存开关">
<div class="active_dot"> <el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch>
<i class="el-icon-check"></i> <div class="tips">关闭则不计算出入库数据</div>
</div> </el-form-item>
</div> <el-form-item label="标签打印">
</div> <el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item> <div class="tips">开启后: 收银完成后会自动打印对应数量的标签数</div>
<el-form-item label="库存开关"> </el-form-item>
<el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch> <el-form-item label="打包费">
<div class="tips">关闭则不计算出入库数据</div> <el-input-number v-model="form.packFee" controls-position="right" :min="0"></el-input-number>
</el-form-item> <div class="tips">单份商品打包费店铺开启外卖模式下该数据才生效</div>
<el-form-item label="标签打印"> </el-form-item>
<el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch> <el-form-item label="虚拟销量">
<div class="tips">开启后: 收银完成后会自动打印对应数量的标签数</div> <el-input-number v-model="form.baseSalesNumber" controls-position="right"
</el-form-item> :min="0"></el-input-number>
<el-form-item label="打包费"> </el-form-item>
<el-input-number v-model="form.packFee" controls-position="right" :min="0"></el-input-number> </template>
<div class="tips">单份商品打包费店铺开启外卖模式下该数据才生效</div>
</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-form-item label="排序">
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number> <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
</el-form-item> </el-form-item>
@ -263,6 +280,8 @@
<el-button type="primary" @click="batchNumberFormConfirm"> </el-button> <el-button type="primary" @click="batchNumberFormConfirm"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 选择团购券分类 -->
<groupTypeList ref="groupTypeList" @success="res => form.groupCategoryId = res" />
</div> </div>
</template> </template>
@ -271,6 +290,7 @@ import { tbShopUnit, tbShopCategoryGet, tbProductPost, tbProductSpecGet, tbProdu
import addUnit from './components/addUnit' import addUnit from './components/addUnit'
import addClassify from './components/addClassify' import addClassify from './components/addClassify'
import shopList from '@/components/shopList' import shopList from '@/components/shopList'
import groupTypeList from '@/components/groupTypeList'
import uploadImg from '@/components/uploadImg' import uploadImg from '@/components/uploadImg'
import settings from '@/settings' import settings from '@/settings'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -281,7 +301,8 @@ export default {
addUnit, addUnit,
addClassify, addClassify,
uploadImg, uploadImg,
shopList shopList,
groupTypeList
}, },
data() { data() {
return { return {
@ -328,7 +349,8 @@ export default {
specInfo: [], specInfo: [],
selectSpec: [], selectSpec: [],
specTableHeaders: [], specTableHeaders: [],
skuSnap: '' skuSnap: '',
groupCategoryId: []
}, },
rules: { rules: {
typeEnum: [ typeEnum: [
@ -349,6 +371,13 @@ export default {
trigger: 'change', trigger: 'change',
message: '请选择商品分类' message: '请选择商品分类'
} }
],
groupCategoryId: [
{
required: true,
trigger: 'change',
message: '请选择团购券分类'
}
] ]
}, },
units: [], units: [],
@ -464,16 +493,22 @@ export default {
}, },
// //
selectShopRes(res) { selectShopRes(res) {
let arr = res.map(item => {
item.groupNum = 1
return item
})
if (this.tableAddShopIndex != null) { if (this.tableAddShopIndex != null) {
this.form.groupSnap[this.tableAddShopIndex].goods = res; this.form.groupSnap[this.tableAddShopIndex].goods = [...arr];
this.tableAddShopIndex = null this.tableAddShopIndex = null
} else { } else {
this.form.groupSnap.push({ this.form.groupSnap.push({
title: '', title: '',
goods: res, goods: [...arr],
number: 1 number: 1
}) })
} }
console.log(this.form.groupSnap);
}, },
// //
changeTypeEnum(index) { changeTypeEnum(index) {
@ -671,6 +706,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
&:not(:first-child) {
margin-top: 6px;
}
.dot { .dot {
$size: 6px; $size: 6px;
width: $size; width: $size;
@ -681,15 +720,18 @@ export default {
.name { .name {
flex: 1; flex: 1;
display: flex;
margin-left: 10px; margin-left: 10px;
align-items: center;
.t { .t {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
max-width: 100px; width: 100px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 10px;
} }
} }