源文件
This commit is contained in:
717
src/views/product/add_shop.vue
Normal file
717
src/views/product/add_shop.vue
Normal file
@@ -0,0 +1,717 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<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" :class="{ disabled: form.id }">
|
||||
<div class="item" v-for="(item, index) in shopTypes" :key="index"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-select v-model="form.unitId" placeholder="请选择单位" style="width: 500px;" @change="selectUnitt">
|
||||
<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" @success="tbShopUnit" />
|
||||
</el-form-item>
|
||||
<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" @success="tbShopCategoryGet" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片">
|
||||
<uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" />
|
||||
<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" controls-position="right"></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"
|
||||
controls-position="right"></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" controls-position="right"></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"
|
||||
controls-position="right"></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" :disabled="!!form.id"
|
||||
controls-position="right"></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"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品条码">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.barCode" disabled></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="tips" v-if="form.isShowMall">注：小程序商城必须设置库存数量大于0</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku' && !form.id">
|
||||
<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 && !isEditor" 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" width="80">
|
||||
|
||||
<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 slot="header" slot-scope="scope">
|
||||
<span>售价</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('salePrice')"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.salePrice" controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会员价" prop="memberPrice">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>会员价</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('memberPrice')"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.memberPrice"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="成本价" prop="costPrice">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>成本价</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('costPrice')"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.costPrice" controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原价" prop="originPrice">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>原价</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('originPrice')"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.originPrice"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存数量" prop="stockNumber">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>库存数量</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('stockNumber')" v-if="!form.id"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.stockNumber" :disabled="!!form.id"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分销金额" prop="firstShared">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>分销金额</span>
|
||||
<i class="icon el-icon-edit" @click="batchNumber('firstShared')"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.firstShared"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品条码">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.barCode" disabled></el-input>
|
||||
</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>
|
||||
<div class="tips" v-if="form.isShowMall">注：小程序商城必须设置库存数量大于0</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架区域">
|
||||
<div class="shop_type_box">
|
||||
<div class="item" :class="{ active: form.isShowCash }" @click="areaChange('isShowCash')">
|
||||
<div class="s_title">收银台</div>
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存开关">
|
||||
<el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<div class="tips">注：关闭则不计算出入库数据</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签打印">
|
||||
<el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<div class="tips">开启后: 收银完成后会自动打印对应数量的标签数</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="打包费">
|
||||
<el-input-number v-model="form.packFee" controls-position="right" :min="0"></el-input-number>
|
||||
<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-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" v-loading="loading" @click="submitHandle">确定</el-button>
|
||||
<el-button @click="$router.back()">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog title="批量修改" width="400px" :visible.sync="showBatchModal">
|
||||
<el-form :model="batchNumberForm">
|
||||
<el-form-item>
|
||||
<el-input-number v-model="batchNumberForm.batchNumber" :min="0" controls-position="right"
|
||||
style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="showBatchModal = false">取 消</el-button>
|
||||
<el-button type="primary" @click="batchNumberFormConfirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
import dayjs from 'dayjs'
|
||||
import { RandomNumBoth } from "@/utils";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addUnit,
|
||||
addClassify,
|
||||
uploadImg,
|
||||
shopList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopTypesActive: 0,
|
||||
shopTypes: settings.typeEnum,
|
||||
specTableHeaders: [],
|
||||
specTableBodys: [],
|
||||
specId: '',
|
||||
specList: [],
|
||||
selectSpec: [],
|
||||
selectSpecResult: false,
|
||||
defaultSku: {
|
||||
salePrice: 0,
|
||||
memberPrice: 0,
|
||||
costPrice: 0,
|
||||
originPrice: 0,
|
||||
stockNumber: 0,
|
||||
firstShared: 0,
|
||||
barCode: `${localStorage.getItem('shopId')}${dayjs().valueOf()}`
|
||||
},
|
||||
tableAddShopIndex: null,
|
||||
isEditor: false,
|
||||
loading: false,
|
||||
form: {
|
||||
id: '',
|
||||
typeEnum: 'normal',
|
||||
name: '',
|
||||
unitId: '',
|
||||
unitName: '',
|
||||
categoryId: '', // 商品分类id
|
||||
coverImg: '',
|
||||
images: [],
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
lowPrice: '',
|
||||
skuList: [],
|
||||
isShowMall: 1,
|
||||
isShowCash: 1,
|
||||
isStock: 0,
|
||||
packFee: 0,
|
||||
specId: '',
|
||||
baseSalesNumber: 0,
|
||||
sort: 0,
|
||||
groupSnap: [],
|
||||
specInfo: [],
|
||||
selectSpec: [],
|
||||
specTableHeaders: [],
|
||||
skuSnap: ''
|
||||
},
|
||||
rules: {
|
||||
typeEnum: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入商品名称'
|
||||
}
|
||||
],
|
||||
categoryId: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'change',
|
||||
message: '请选择商品分类'
|
||||
}
|
||||
]
|
||||
},
|
||||
units: [],
|
||||
categorys: [],
|
||||
// 批量修改规格
|
||||
showBatchModal: false,
|
||||
batchNumberKey: '',
|
||||
batchNumberForm: {
|
||||
batchNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tbShopUnit()
|
||||
this.tbShopCategoryGet()
|
||||
this.changeTypeEnum(0)
|
||||
|
||||
if (this.$route.query.goods_id) {
|
||||
this.tbProductGetDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 修改商家区域
|
||||
areaChange(key) {
|
||||
if (this.form[key] == 1) {
|
||||
this.form[key] = 0
|
||||
} else {
|
||||
this.form[key] = 1
|
||||
}
|
||||
},
|
||||
selectUnitt(e) {
|
||||
this.form.unitName = this.units.find(item => item.id == e).name
|
||||
},
|
||||
// 批量修改规格
|
||||
batchNumber(key) {
|
||||
this.batchNumberKey = key
|
||||
this.showBatchModal = true
|
||||
},
|
||||
// 确认批量修改规格
|
||||
batchNumberFormConfirm() {
|
||||
this.form.skuList.map(item => {
|
||||
item[this.batchNumberKey] = this.batchNumberForm.batchNumber
|
||||
})
|
||||
this.showBatchModal = false
|
||||
this.batchNumberForm.batchNumber = 0
|
||||
},
|
||||
// 商品详情
|
||||
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)
|
||||
|
||||
// 初始化上传图片
|
||||
this.$refs.uploadImg.fileList = res.images.map(item => {
|
||||
return {
|
||||
url: item
|
||||
}
|
||||
})
|
||||
|
||||
this.form = res
|
||||
if (res.typeEnum == 'sku') {
|
||||
let skuList = [...res.skuList]
|
||||
let specInfo = JSON.parse(res.specInfo)
|
||||
this.isEditor = true
|
||||
this.form.skuList = skuList.map((item, index) => {
|
||||
specInfo[index].id = item.id
|
||||
return specInfo[index]
|
||||
})
|
||||
this.selectSpecResult = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 提交
|
||||
submitHandle() {
|
||||
this.$refs.formRef.validate(async faild => {
|
||||
try {
|
||||
if (faild) {
|
||||
this.loading = true
|
||||
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)
|
||||
this.form.specInfo = JSON.stringify(this.form.skuList)
|
||||
if (this.form.id) {
|
||||
await tbProductPut(this.form)
|
||||
} else {
|
||||
await tbProductPost(this.form)
|
||||
}
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.$router.back()
|
||||
this.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
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) {
|
||||
if (this.form.id) return
|
||||
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])
|
||||
},
|
||||
// 删除突破按
|
||||
uploadRemove(arr) {
|
||||
this.form.images = arr
|
||||
},
|
||||
// 选择规格属性
|
||||
selectSpecResultChange() {
|
||||
this.createSkuHeader()
|
||||
this.createSkuBody()
|
||||
},
|
||||
// 生成多规格表体
|
||||
createSkuBody() {
|
||||
let bodys = []
|
||||
let skuSnap = []
|
||||
for (let item of this.selectSpec) {
|
||||
if (item.selectSpecResult.length) {
|
||||
let arr = []
|
||||
for (let val of item.selectSpecResult) {
|
||||
arr.push({
|
||||
[item.name]: val
|
||||
})
|
||||
}
|
||||
skuSnap.push({
|
||||
name: item.name,
|
||||
value: item.selectSpecResult.join(',')
|
||||
})
|
||||
bodys.push(arr)
|
||||
}
|
||||
}
|
||||
this.form.skuSnap = JSON.stringify(skuSnap)
|
||||
|
||||
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,
|
||||
barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`
|
||||
})
|
||||
} else {
|
||||
let specSnap = []
|
||||
for (let key in item) {
|
||||
specSnap.push(item[key])
|
||||
}
|
||||
newarr.push({
|
||||
specSnap: specSnap.join(','),
|
||||
...m,
|
||||
...item,
|
||||
barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`
|
||||
})
|
||||
}
|
||||
}
|
||||
this.form.skuList = []
|
||||
this.form.skuList = newarr
|
||||
},
|
||||
// 笛卡尔积算法
|
||||
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) {
|
||||
this.isEditor = false
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 14px;
|
||||
color: #1890FF;
|
||||
margin-left: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
src/views/product/category.vue
Normal file
140
src/views/product/category.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
|
||||
<addClassify ref="addClassifyRef" @success="getTableData" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
|
||||
:tree-props="{ children: 'childrenList' }">
|
||||
<el-table-column label="排序" prop="sort" sortable width="100"></el-table-column>
|
||||
<el-table-column label="分类名称" prop="name"></el-table-column>
|
||||
<el-table-column label="分类图片">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.pic"
|
||||
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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0"
|
||||
@change="showChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="颜色">
|
||||
<template v-slot="scope">
|
||||
<div
|
||||
:style="{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: scope.row.style || '#efefef' }">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-plus"
|
||||
@click="$refs.addClassifyRef.show({ pid: scope.row.id })"
|
||||
v-if="!scope.row.pid">添加子分类</el-button>
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addClassifyRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" 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 addClassify from './components/addClassify'
|
||||
import { tbShopCategoryGet, tbShopCategoryDelete, tbShopCategoryPost } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
addClassify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 状态切换
|
||||
async showChange(e, row) {
|
||||
try {
|
||||
await tbShopCategoryPost(row, 'put')
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 添加子分类
|
||||
addChildGatgory(row) {
|
||||
|
||||
},
|
||||
// 查询table
|
||||
toQuery() {
|
||||
this.getTableData()
|
||||
},// 重置查询
|
||||
resetHandle() {
|
||||
this.tableData.page = 0;
|
||||
this.query.blurry = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbShopCategoryDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopCategoryGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id,desc',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
120
src/views/product/components/addClassify.vue
Normal file
120
src/views/product/components/addClassify.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<el-dialog title="添加分类" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<!-- <el-form-item label="层级">
|
||||
<el-select v-model="form.index">
|
||||
<el-option label="顶级" :value="1"></el-option>
|
||||
<el-option label="饮品" :value="2"></el-option>
|
||||
<el-option label="烤串" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图片">
|
||||
<uploadImg ref="uploadImg" @success="res => form.pic = res[0]" @remove="form.pic = ''" />
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色标识">
|
||||
<el-color-picker v-model="form.style"></el-color-picker>
|
||||
<div style="color: #999;">
|
||||
标识色用在无图模式时的商品点单按钮显示，可以更有效的从视觉.上进行商品分组。
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="开关">
|
||||
<el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</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>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImg from '@/components/uploadImg'
|
||||
import { tbShopCategoryPost } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
uploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: '',
|
||||
pid: '',
|
||||
isShow: 1,
|
||||
name: '',
|
||||
sort: '',
|
||||
style: '#000000',
|
||||
pic: ''
|
||||
},
|
||||
resetForm: '',
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.form.shopId = localStorage.getItem('shopId')
|
||||
let res = await tbShopCategoryPost(this.form, this.form.id ? 'put' : 'post')
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
// console.log(obj)
|
||||
this.dialogVisible = true
|
||||
if (obj.pid) {
|
||||
this.form.pid = obj.pid
|
||||
}
|
||||
if (obj && obj.id) {
|
||||
this.form = obj
|
||||
if (obj.pic) {
|
||||
setTimeout(() => {
|
||||
this.$refs.uploadImg.fileList = [
|
||||
{
|
||||
url: obj.pic
|
||||
}
|
||||
]
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form = { ...this.resetForm }
|
||||
this.$refs.uploadImg.clearFiles()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
222
src/views/product/components/addGroup.vue
Normal file
222
src/views/product/components/addGroup.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="添加分组" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="分组名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分组名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择商品">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
|
||||
添加商品
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="shop_list">
|
||||
<div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
|
||||
@click="productIds.splice(index, 1)">
|
||||
<div class="item" :data-index="index + 1">
|
||||
<el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
|
||||
</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组状态">
|
||||
<el-radio-group v-model="form.isShow">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</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>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<shopList ref="shopListRef" @success="slectShop" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbProductGroupPost, tbProductGroupPut, productListGet } from '@/api/shop'
|
||||
import shopList from '@/components/shopList'
|
||||
export default {
|
||||
components: {
|
||||
shopList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
isShow: 1,
|
||||
sort: 0,
|
||||
productIds: [],
|
||||
shopId: localStorage.getItem('shopId')
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
productIds: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
slectShop(res) {
|
||||
if (this.productIds.length) {
|
||||
res.map(async item => {
|
||||
if (!await this.checkShop(item.id)) {
|
||||
this.productIds.push({ ...item })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.productIds = res
|
||||
}
|
||||
},
|
||||
// 判断是否存在重复商品
|
||||
checkShop(id) {
|
||||
let falg = false
|
||||
this.productIds.map(item => {
|
||||
if (item.id == id) {
|
||||
falg = true
|
||||
}
|
||||
})
|
||||
return falg
|
||||
},
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
this.form.productIds = this.productIds.map(item => item.id);
|
||||
let res = null
|
||||
if (!this.form.id) {
|
||||
await tbProductGroupPost(this.form)
|
||||
} else {
|
||||
await tbProductGroupPut(this.form)
|
||||
}
|
||||
this.loading = false
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async getProduts() {
|
||||
try {
|
||||
const res = await productListGet(this.form.id)
|
||||
this.productIds = res
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
show(obj) {
|
||||
if (obj && obj.id) {
|
||||
this.form.id = obj.id
|
||||
this.form.isShow = obj.isShow
|
||||
this.form.name = obj.name
|
||||
this.form.sort = obj.sort
|
||||
this.form.productIds = obj.productIds
|
||||
this.getProduts()
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.isShow = 1
|
||||
this.form.name = ''
|
||||
this.form.sort = 0
|
||||
this.form.productIds = []
|
||||
this.productIds = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item_wrap {
|
||||
$size: 80px;
|
||||
|
||||
.item {
|
||||
$radius: 4px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-index);
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '删除';
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: $size;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
src/views/product/components/addSpecification.vue
Normal file
203
src/views/product/components/addSpecification.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<el-dialog title="添加模板" width="840px" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="模板名称，如：衣服"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.name" v-for="(item, index) in form.specList" :key="index">
|
||||
<div class="tag_wrap">
|
||||
<el-tag v-for="(val, i) in item.value" :key="i" closable size="medium" :disable-transitions="true"
|
||||
@close="handleClose(index, i)">
|
||||
{{ val }}
|
||||
</el-tag>
|
||||
<el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
|
||||
size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
|
||||
@blur="handleInputConfirm(index)">
|
||||
</el-input>
|
||||
<el-button v-show="!item.inputVisible" size="mini" icon="el-icon-plus" plain @click="showInput(index)">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button size="mini" icon="el-icon-delete" plain @click="deleteTag(index)">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px" label-position="left">
|
||||
<el-row :gutter="20" v-if="showSkuForm">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="规格" prop="skuValidate1">
|
||||
<el-input v-model="skuForm.label" placeholder="规格，如：尺码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="规格值" prop="skuValidate2">
|
||||
<el-input v-model="skuForm.value" placeholder="规格值，如：S、M"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary" @click="addSkuSubmit">添加</el-button>
|
||||
<el-button @click="showSkuForm = false">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item v-if="!showSkuForm">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="showSkuForm = true">添加规格</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbProductSpecPost, tbProductSpecPut } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
const validateSku1 = (rule, value, callback) => {
|
||||
if (!this.skuForm.label) {
|
||||
callback(new Error(' '))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validateSku2 = (rule, value, callback) => {
|
||||
if (!this.skuForm.value) {
|
||||
callback(new Error(' '))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
dialogVisible: false,
|
||||
showSkuForm: true,
|
||||
skuForm: {
|
||||
label: '',
|
||||
value: ''
|
||||
},
|
||||
skuRules: {
|
||||
skuValidate1: {
|
||||
required: true,
|
||||
validator: validateSku1,
|
||||
trigger: 'blur'
|
||||
},
|
||||
skuValidate2: {
|
||||
required: true,
|
||||
validator: validateSku2,
|
||||
trigger: 'blur'
|
||||
}
|
||||
},
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
specList: []
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
let res = null
|
||||
if (!this.form.id) {
|
||||
res = await tbProductSpecPost(this.form)
|
||||
} else {
|
||||
res = await tbProductSpecPut(this.form)
|
||||
}
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.pid ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
const newObj = JSON.parse(JSON.stringify(obj));
|
||||
this.form.id = newObj.id
|
||||
this.form.name = newObj.name
|
||||
const specList = newObj.specList
|
||||
for (let item of specList) {
|
||||
item.inputVisible = false
|
||||
item.inputValue = ''
|
||||
}
|
||||
this.form.specList = specList
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.id = ''
|
||||
this.form.name = ''
|
||||
this.form.specList = []
|
||||
},
|
||||
// sku from
|
||||
addSkuSubmit() {
|
||||
this.$refs.skuForm.validate(async valid => {
|
||||
if (valid) {
|
||||
this.form.specList.push({
|
||||
name: this.skuForm.label,
|
||||
value: [this.skuForm.value],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
})
|
||||
this.skuForm.label = ''
|
||||
this.skuForm.value = ''
|
||||
this.showSkuForm = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose(index, i) {
|
||||
this.form.specList[index].value.splice(i, 1);
|
||||
},
|
||||
showInput(index) {
|
||||
this.form.specList[index].inputVisible = true;
|
||||
},
|
||||
handleInputConfirm(index) {
|
||||
let inputValue = this.form.specList[index].inputValue;
|
||||
if (inputValue) {
|
||||
this.form.specList[index].value.push(inputValue);
|
||||
}
|
||||
this.form.specList[index].inputVisible = false;
|
||||
this.form.specList[index].inputValue = '';
|
||||
},
|
||||
// 删除已添加的规格
|
||||
deleteTag(index) {
|
||||
this.form.specList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-new-tag {
|
||||
width: 180px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
86
src/views/product/components/addUnit.vue
Normal file
86
src/views/product/components/addUnit.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-dialog title="添加单位" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120" label-position="left">
|
||||
<el-form-item label="单位名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="单位名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="formLoading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopUnitPost, tbShopUnitPut } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formLoading: false,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
sort: 0,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.formLoading = true
|
||||
let res = null
|
||||
if (!this.form.id) {
|
||||
res = await tbShopUnitPost(this.form)
|
||||
} else {
|
||||
res = await tbShopUnitPut(this.form)
|
||||
}
|
||||
this.close()
|
||||
this.formLoading = false
|
||||
this.$emit('success', res)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
this.formLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
// 编辑
|
||||
this.form.name = obj.name
|
||||
this.form.id = obj.id
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.id = ''
|
||||
this.form.name = ''
|
||||
this.form.sort = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
109
src/views/product/group/index.vue
Normal file
109
src/views/product/group/index.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addGroupRef.show()">
|
||||
添加分组
|
||||
</el-button>
|
||||
<addGroup ref="addGroupRef" @success="resetHandle" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="排序" sortable prop="sort"></el-table-column>
|
||||
<el-table-column label="分组名称" prop="name"></el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0"
|
||||
@change="showChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addGroupRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addGroup from '../components/addGroup'
|
||||
import { tbProductGroupGet, tbProductGroupDelete, tbProductGroupPut } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
addGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 状态切换
|
||||
async showChange(e, row) {
|
||||
try {
|
||||
await tbProductGroupPut(row)
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.tableData.page = 0;
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbProductGroupDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProductGroupGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
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>
|
||||
118
src/views/product/specification.vue
Normal file
118
src/views/product/specification.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入模板名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="getTableData" />
|
||||
</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-button type="primary" icon="el-icon-plus" @click="$refs.addSpecificationRef.show()">添加规格</el-button>
|
||||
<addSpecification ref="addSpecificationRef" @success="getTableData" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="模板名称" prop="name"></el-table-column>
|
||||
<el-table-column label="规格详情">
|
||||
<template v-slot="scope">
|
||||
<el-row v-for="(item, index) in scope.row.specList" :key="index">
|
||||
<span>{{ item.name }}：</span>
|
||||
<span>{{ item.value.join('、') }}</span>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" sortable></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addSpecificationRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" 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 addSpecification from './components/addSpecification'
|
||||
import { tbProductSpecGet, tbProductSpecDelete } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
addSpecification
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
blurry: '',
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.blurry = ''
|
||||
this.tableData.page = 0;
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
const res = await tbProductSpecDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProductSpecGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
112
src/views/product/unit.vue
Normal file
112
src/views/product/unit.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入单位名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="toQuery" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="toQuery">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
|
||||
<addUnit ref="addUnitRef" @success="getTableData()" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="单位名称" prop="name"></el-table-column>
|
||||
<el-table-column label="排序" prop="id" sortable></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addUnitRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" 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 { tbShopCurrencyGet, tbShopUnitDelete } from '@/api/shop'
|
||||
import addUnit from './components/addUnit'
|
||||
export default {
|
||||
components: {
|
||||
addUnit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
blurry: ''
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 查询table
|
||||
toQuery() {
|
||||
this.getTableData()
|
||||
},// 重置查询
|
||||
resetHandle() {
|
||||
this.tableData.page = 0;
|
||||
this.query.blurry = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbShopUnitDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopCurrencyGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
name: this.query.blurry
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user