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

修复总结后的问题，详见企业微信文档

Browse Source
This commit is contained in:
gyq
2026-05-07 14:34:03 +08:00
parent ffad9432c5
commit ea5a4c14e9
41 changed files with 2678 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

713
src/views/product/indexconfig/addgoods.vue
View File

@@ -1,194 +1,201 @@
<template>
<div class="addgoods">
<div class="header-wrap">
<el-radio-group v-model="addFormType" size="large">
<el-radio-button label="基础信息" :value="1"></el-radio-button>
<el-radio-button label="耗材设置" :value="2"></el-radio-button>
<el-radio-button label="关联推荐商品" :value="3"></el-radio-button>
</el-radio-group>
</div>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
<div v-show="addFormType == 1">
<el-form-item label="商品名称" required>
<el-col :span="12">
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" :disabled="isSyncStatus()" />
<div class="form_wrap">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
<el-steps :active="stepsActiveName" finish-status="success" simple>
<el-step title="基础信息" />
<el-step title="耗材设置/关联推荐商品" />
</el-steps>
<div style="padding-top: 20px;">
<!-- 基础信息 -->
<div v-show="stepsActiveName == 0">
<el-form-item label="商品名称" required>
<el-col :span="12">
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" :disabled="isSyncStatus()" />
</el-form-item>
</el-col>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品介绍">
<el-col :span="12">
<el-form-item>
<el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍"
:disabled="isSyncStatus()" />
<el-form-item label="商品介绍">
<el-col :span="12">
<el-form-item>
<el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍"
:disabled="isSyncStatus()" />
</el-form-item>
</el-col>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="单位" required>
<el-col :span="12">
<el-form-item prop="unitId">
<el-select v-model="ruleForm.unitId" placeholder="请选择单位" :disabled="isSyncStatus()">
<el-form-item label="单位" required prop="unitId">
<el-select v-model="ruleForm.unitId" placeholder="请选择单位" :disabled="isSyncStatus()" style="width: 330px;">
<el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
</el-select>
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
@click="addUnitRef.open()">添加单位</el-button>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品分类" required>
<el-col :span="12">
<el-form-item prop="region">
<el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类" :disabled="isSyncStatus()">
<el-form-item label="商品分类" required prop="categoryId">
<el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类" :disabled="isSyncStatus()"
style="width: 330px;">
<el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
</el-select>
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
@click="addCategoryRef.open()">添加分类</el-button>
</el-form-item>
</el-col>
</el-form-item>
<!-- <el-form-item label="商品图片" required prop="images">
<MultiImageUpload v-model="ruleForm.images" />
</el-form-item> -->
<el-form-item label="商品图片" required prop="images">
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
<el-icon class="buttonstyle" @click="deleteEvent(item)">
<DeleteFilled />
</el-icon>
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
</div>
<div class="upImgStyle" @click="addimgEvent">+</div>
</div>
</el-form-item>
<el-form-item>
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
</el-form-item>
<!-- 选择图片 -->
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
<el-form-item label="商品类型">
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)" :disabled="isSyncStatus()">
<el-radio value="single">单规格商品</el-radio>
<el-radio value="sku">多规格商品</el-radio>
<el-radio value="package">套餐商品</el-radio>
<el-radio value="weight">称重商品</el-radio>
<!-- <el-radio label="coupon">团购券</el-radio> -->
</el-radio-group>
</el-form-item>
<el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
<div style="display: block; width: 100%">
<div class="head-container">
<el-radio-group v-model="ruleForm.groupType" @change="typeChange">
<el-radio-button :label="0">固定套餐</el-radio-button>
<el-radio-button :label="1">可选套餐</el-radio-button>
<el-form-item label="商品分组">
<el-select v-model="ruleForm.proGroupIds" multiple placeholder="请选择商品分组" style="width: 330px;">
<el-option :label="item.name" :value="item.id" v-for="item in goodsGroupList" :key="item.id" />
</el-select>
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
@click="addGoodsGroupRef.open()">添加分组</el-button>
</el-form-item>
<!-- <el-form-item label="商品图片" required prop="images">
<MultiImageUpload v-model="ruleForm.images" />
</el-form-item> -->
<el-form-item label="商品图片" required prop="images">
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
<el-icon class="buttonstyle" @click="deleteEvent(item)">
<DeleteFilled />
</el-icon>
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
</div>
<div class="upImgStyle" @click="addimgEvent">+</div>
</div>
</el-form-item>
<el-form-item>
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
</el-form-item>
<!-- 选择图片 -->
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
<el-form-item label="商品类型">
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)"
:disabled="isSyncStatus()">
<el-radio value="single">单规格商品</el-radio>
<el-radio value="sku">多规格商品</el-radio>
<el-radio value="package">套餐商品</el-radio>
<el-radio value="weight">称重商品</el-radio>
<!-- <el-radio label="coupon">团购券</el-radio> -->
</el-radio-group>
</div>
<div v-if="ruleForm.groupType == 0">
<el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column width="150">
<template #header>
<el-button type="primary" @click="addgoods(-1)" :disabled="isSyncStatus()">
添加商品
</el-button>
</template>
<template v-slot="scope">
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text"
@click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="ruleForm.groupType == 1">
<div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
<el-form inline :model="item">
<el-form-item label="规格组名">
<el-input v-model="item.title" :disabled="isSyncStatus()" />
</el-form-item>
<el-form-item :label="`本组菜品${item.goods.length}选`">
<el-input v-model="item.number" :disabled="isSyncStatus()" />
</el-form-item>
<el-form-item>
<el-button @click="ruleForm.proGroupVo.splice(index, 1)" :disabled="isSyncStatus()">
删除
</el-button>
</el-form-item>
</el-form>
<div style="margin-top: 20px">
<el-table border :data="item.goods">
</el-form-item>
<el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
<div style="display: block; width: 100%">
<div class="head-container">
<el-radio-group v-model="ruleForm.groupType" @change="typeChange">
<el-radio-button :label="0">固定套餐</el-radio-button>
<el-radio-button :label="1">可选套餐</el-radio-button>
</el-radio-group>
</div>
<div v-if="ruleForm.groupType == 0">
<el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" :disabled="isSyncStatus()" />
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column width="150">
<template #header>
<el-button type="primary" @click="addgoods(index)" :disabled="isSyncStatus()">
<el-button type="primary" @click="addgoods(-1)" :disabled="isSyncStatus()">
添加商品
</el-button>
</template>
<template v-slot="scope">
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)"
:disabled="isSyncStatus()">删除</el-button>
<el-button type="text"
@click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="ruleForm.groupType == 1">
<div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
<el-form inline :model="item">
<el-form-item label="规格组名">
<el-input v-model="item.title" :disabled="isSyncStatus()" />
</el-form-item>
<el-form-item :label="`本组菜品${item.goods.length}选`">
<el-input v-model="item.number" :disabled="isSyncStatus()" />
</el-form-item>
<el-form-item>
<el-button @click="ruleForm.proGroupVo.splice(index, 1)" :disabled="isSyncStatus()">
删除
</el-button>
</el-form-item>
</el-form>
<div style="margin-top: 20px">
<el-table border :data="item.goods">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" :disabled="isSyncStatus()" />
</template>
</el-table-column>
<el-table-column width="150">
<template #header>
<el-button type="primary" @click="addgoods(index)" :disabled="isSyncStatus()">
添加商品
</el-button>
</template>
<template v-slot="scope">
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)"
:disabled="isSyncStatus()">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-button type="primary" @click="addtaocan" :disabled="isSyncStatus()">
添加套餐组
</el-button>
</div>
</div>
<el-button type="primary" @click="addtaocan" :disabled="isSyncStatus()">
添加套餐组
</el-button>
</div>
</div>
</el-form-item>
<el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
<el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle"
:disabled="isSyncStatus()">
<el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
:key="ele.name">
<el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
<el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
:key="index"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 规格属性 -->
<!-- 单规格、称重 -->
<SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
ref="specificationAttributeRef">
</SpecificationAttribute>
<SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length" :specTableHeaders="datas.specTableHeaders"
:info="ruleForm" :list="list" ref="specificationAttributeRef"></SpecificationAttribute>
<el-form-item label="重量">
<el-col :span="12">
<div style="display: block">
<el-input v-model="ruleForm.weight" placeholder="" :disabled="isSyncStatus()">
<template #append>千克</template>
</el-input>
<!-- <div style="color: #999;">用于快递或配送运费计重</div> -->
</div>
</el-col>
</el-form-item>
<el-form-item label="是否允许临时改价">
<el-radio-group v-model="ruleForm.isAllowTempModifyPrice" :disabled="isSyncStatus()">
<el-radio :value="1">允许</el-radio>
<el-radio :value="0">不允许</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="每日销量上限">
</el-form-item>
<el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
<div class="center">
<el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle"
:disabled="isSyncStatus()">
<el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
:key="item.id"></el-option>
</el-select>
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
@click="addSkuModalRef?.open()">添加规格</el-button>
</div>
</el-form-item>
<el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
:key="ele.name">
<el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
<el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
:key="index"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 规格属性 -->
<!-- 单规格、称重 -->
<SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
ref="specificationAttributeRef">
</SpecificationAttribute>
<SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length"
:specTableHeaders="datas.specTableHeaders" :info="ruleForm" :list="list" ref="specificationAttributeRef">
</SpecificationAttribute>
<el-form-item label="重量" v-if="ruleForm.type == 'weight'">
<el-col :span="12">
<div style="display: block">
<el-input v-model="ruleForm.weight" placeholder="纯文本描述"></el-input>
<!-- <div style="color: #999;">用于快递或配送运费计重</div> -->
</div>
</el-col>
</el-form-item>
<el-form-item label="是否允许临时改价">
<el-radio-group v-model="ruleForm.isAllowTempModifyPrice" :disabled="isSyncStatus()">
<el-radio :value="1">允许</el-radio>
<el-radio :value="0">不允许</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="每日销量上限">
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
</el-form-item>
<el-form-item label="每单限购">
@@ -197,169 +204,182 @@
<el-form-item label="每人限购">
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
</el-form-item> -->
<el-form-item label="定时上下架">
<el-checkbox-group v-model="ruleForm.days">
<el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-col :span="20">
<!-- <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
<el-form-item label="售卖时间">
<el-checkbox-group v-model="ruleForm.days">
<el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-col :span="20">
<!-- <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" value-format="HH:mm:ss" format="HH:mm:ss" />
-->
<el-time-picker v-model="ruleForm.startTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择开始时间">
</el-time-picker>-
<el-time-picker v-model="ruleForm.endTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择结束时间">
</el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="上架">
<el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
</el-form-item>
<!-- <el-form-item label="库存开关">
<el-time-picker v-model="ruleForm.startTime" value-format="HH:mm:ss" format="HH:mm:ss"
placeholder="选择开始时间">
</el-time-picker> <el-text type="info">-</el-text> <el-time-picker v-model="ruleForm.endTime"
value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择结束时间">
</el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="上架">
<el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
</el-form-item>
<!-- <el-form-item label="库存开关">
<div style="display: block;">
<el-switch v-model="ruleForm.isStock" :active-value="1" :inactive-value="0" :disabled="isSyncStatus()" />
<div style="color: #999;">注：关闭则不计算出库数据</div>
</div>
</el-form-item> -->
<el-form-item label="设为推荐" prop="delivery">
<el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
</el-form-item>
<!-- <el-form-item label="库存数量">
<el-form-item label="设为推荐" prop="delivery">
<div class="center">
<el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
<el-text>推荐后，商品会展示在用户小程序端热销模块内</el-text>
</div>
</el-form-item>
<!-- <el-form-item label="库存数量">
<el-input-number v-model="ruleForm.stockNumber" :min="0" />
</el-form-item> -->
<el-form-item label="打包费" prop="delivery">
<div style="display: block;">
<el-input-number v-model="ruleForm.packFee" controls-position="right"
:disabled="isSyncStatus()"></el-input-number>
<div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</div>
<el-form-item label="打包费" prop="delivery">
<div style="display: block;">
<el-input-number v-model="ruleForm.packFee" controls-position="right"
:disabled="isSyncStatus()"></el-input-number>
<div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</div>
</div>
</el-form-item>
</div>
</el-form-item>
</div>
<div v-show="addFormType == 2" style="padding-bottom: 20px;">
<!-- 耗材绑定 -->
<el-form-item label="绑定耗材"></el-form-item>
<el-form-item label="商品名">{{ ruleForm.name }}</el-form-item>
<el-form-item>
<el-table :data="ruleForm.consList" border>
<el-table-column label="序号" type="index" width="60"></el-table-column>
<el-table-column label="耗材名称" prop="consInfoId">
<template v-slot="scope">
<el-select filterable v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
@change="selectionChange($event, scope.row)">
<el-option v-for="item in consOptions" :key="item.id" :label="item.conName"
:value="item.id"></el-option>
</el-select>
<!-- <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div> -->
</template>
</el-table-column>
<el-table-column label="单位" prop="conUnit">
<template v-slot="scope">
<el-input v-model="scope.row.conUnit" readonly disabled placeholder="请选择耗材"></el-input>
<!-- <el-select v-model="scope.row.conUnit" reserve-keyword placeholder="请输入关键词">
<el-option
v-for="item in returnConUnits(scope.row.consInfoId)"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> -->
</template>
</el-table-column>
<el-table-column label="使用数量" prop="surplusStock" min-width="150px">
<template v-slot="scope">
<el-input-number v-model="scope.row.surplusStock" :min="0" />
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #header>
<el-button type="primary" size="small" @click="createItem">添加</el-button>
</template>
<template v-slot="scope">
<div class="table_btn_wrap">
<div class="btn sub" @click="ruleForm.consList.splice(scope.$index, 1)">
<el-icon>
<RemoveFilled />
</el-icon>
</div>
<!-- <div class="btn add" v-if="scope.$index == ruleForm.consList.length - 1"
<!-- 耗材设置 -->
<div v-show="stepsActiveName == 1">
<el-tabs v-model="tabsActiveName">
<el-tab-pane label="耗材设置" :name="1">
<el-form-item label="耗材列表">
<el-table :data="ruleForm.consList" border>
<el-table-column label="序号" type="index" width="60"></el-table-column>
<el-table-column label="耗材名称" prop="consInfoId">
<template v-slot="scope">
<el-select filterable v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
@change="selectionChange($event, scope.row)">
<el-option v-for="item in consOptions" :key="item.id" :label="item.conName"
:value="item.id"></el-option>
</el-select>
<!-- <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div> -->
</template>
</el-table-column>
<el-table-column label="单位" prop="conUnit">
<template v-slot="scope">
<el-input v-model="scope.row.conUnit" readonly disabled placeholder="请选择耗材"></el-input>
<!-- <el-select v-model="scope.row.conUnit" reserve-keyword placeholder="请输入关键词">
<el-option
v-for="item in returnConUnits(scope.row.consInfoId)"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> -->
</template>
</el-table-column>
<el-table-column label="使用数量" prop="surplusStock" min-width="150px">
<template v-slot="scope">
<el-input-number v-model="scope.row.surplusStock" :min="0" />
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #header>
<el-button type="primary" size="small" @click="createItem">添加</el-button>
</template>
<template v-slot="scope">
<div class="table_btn_wrap">
<div class="btn sub" @click="ruleForm.consList.splice(scope.$index, 1)">
<el-icon>
<RemoveFilled />
</el-icon>
</div>
<!-- <div class="btn add" v-if="scope.$index == ruleForm.consList.length - 1"
@click="createItem(scope.row)">
<el-icon>
<CirclePlusFilled />
</el-icon>
</div> -->
</div>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="自动售罄">
<div class="center">
<el-switch v-model="ruleForm.isAutoSoldStock" :active-value="1" :inactive-value="0"></el-switch>
<el-text type="info">当绑定的任何一种耗材库存不足时，商品自动售罄</el-text>
</div>
</el-form-item>
<el-form-item label="退菜是否退库存">
<div class="column">
<div>
<el-radio-group v-model="ruleForm.refundMode">
<el-radio label="退菜退库存" :value="1"></el-radio>
<el-radio label="仅退菜不退库存" :value="2"></el-radio>
<el-radio label="每次询问-退菜后弹窗提示，可手动选择" :value="3"></el-radio>
</el-radio-group>
</div>
<div>
<el-text type="danger">当前店铺退菜退库存规则：{{ shopInfoTypeFilter(shopInfo.refundMode) }}</el-text>
</div>
</div>
</el-form-item>
</div>
<el-form-item label="关联推荐商品" v-show="addFormType == 3">
<div class="column">
<div class="row">
<div class="center">
<el-button type="primary" @click="selecProductDialogRef?.show()"
:disabled="ruleForm.relatedRecommendJson.length >= goodsListMax">添加商品</el-button>
<div class="tips">设置商品后，用户可以在商品详情页中看到推荐商品可拖动调整顺序，最多设置{{ goodsListMax }}个商品</div>
</div>
</div>
<div class="row">
<div id="goods_table_drag">
<el-table :data="ruleForm.relatedRecommendJson" border stripe style="width: 500px;" row-key="id">
<!-- 拖拽列 -->
<el-table-column label="排序" width="60">
<template v-slot="scope">
<div class="drag-handle">☰</div>
</template>
</el-table-column>
<el-table-column label="商品图片" prop="coverImg" width="90">
<template v-slot="scope">
<el-image :src="scope.row.coverImg" style="width: 50px;height: 50px;border-radius: 4px;"
fit="cover"></el-image>
</template>
</el-table-column>
<el-table-column label="商品名称" prop="name"></el-table-column>
<el-table-column label="操作" width="100">
<template v-slot="scope">
<el-button link type="danger"
@click="ruleForm.relatedRecommendJson.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="自动售罄">
<div class="center">
<el-switch v-model="ruleForm.isAutoSoldStock" :active-value="1" :inactive-value="0"></el-switch>
<el-text type="info">当绑定的任何一种耗材库存不足时，商品自动售罄</el-text>
</div>
</el-form-item>
<el-form-item label="退菜是否退库存">
<div class="column">
<div>
<el-radio-group v-model="ruleForm.refundMode">
<el-radio label="退菜退库存" :value="1"></el-radio>
<el-radio label="仅退菜不退库存" :value="2"></el-radio>
<el-radio label="每次询问-退菜后弹窗提示，可手动选择" :value="3"></el-radio>
</el-radio-group>
</div>
<div>
<el-text type="danger">当前店铺退菜退库存规则：{{ shopInfoTypeFilter(shopInfo.refundMode) }}</el-text>
</div>
</div>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="关联商品设置" :name="2">
<el-form-item label="关联商品设置">
<div class="column">
<div class="row">
<div class="center">
<el-button type="primary" @click="selecProductDialogRef?.show()"
:disabled="ruleForm.relatedRecommendJson.length >= goodsListMax">添加商品</el-button>
<div class="tips">设置商品后，用户可以在商品详情页中看到推荐商品可拖动调整顺序，最多设置{{ goodsListMax }}个商品</div>
</div>
</div>
<div class="row">
<div id="goods_table_drag">
<el-table :data="ruleForm.relatedRecommendJson" border stripe row-key="id">
<!-- 拖拽列 -->
<el-table-column label="排序" width="60">
<template v-slot="scope">
<div class="drag-handle">☰</div>
</template>
</el-table-column>
<el-table-column label="商品图片" prop="coverImg" width="90">
<template v-slot="scope">
<el-image :src="scope.row.coverImg" style="width: 50px;height: 50px;border-radius: 4px;"
fit="cover"></el-image>
</template>
</el-table-column>
<el-table-column label="商品名称" prop="name"></el-table-column>
<el-table-column label="操作" width="100">
<template v-slot="scope">
<el-button link type="danger"
@click="ruleForm.relatedRecommendJson.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-form-item>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" @click="nextStep" v-if="stepsActiveName == 0">下一步</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)" v-if="stepsActiveName == 1">保存</el-button>
<el-button @click="resetForm(ruleFormRef)" v-if="stepsActiveName == 0">取消</el-button>
<el-button @click="stepsActiveName = 0" v-if="stepsActiveName != 0">上一步</el-button>
</el-form-item>
</el-form>
</div>
<!-- 选择商品 -->
<shopList ref="shopListRef" @success="selectShopRes" />
<!-- <shopList ref="shopListRef" @success="selectShopRes" /> -->
<GoodsSelect ref="shopListRef" @success="selectShopRes" />
<el-dialog :title="datas.selectSkuItem.proName" v-model="datas.showSelectSku">
<div class="pro_sku">
<div class="item">
@@ -381,6 +401,14 @@
</el-dialog>
<!-- 选择商品弹窗 -->
<selecProductDialog ref="selecProductDialogRef" @success="selecProductSuccess" />
<!-- 添加单位 -->
<addUnit ref="addUnitRef" @success="getList" />
<!-- 添加商品分类 -->
<addCategory ref="addCategoryRef" @success="getList" />
<!-- 添加商品分组 -->
<addGoodsGroup ref="addGoodsGroupRef" @success="getGoodsGroupList" />
<!-- 添加规格 -->
<addSkuModal ref="addSkuModalRef" @success="tbProductSpecGet" />
</div>
</template>
@@ -394,20 +422,27 @@ import UserAPI from "@/api/product/productclassification";
import UserAPI2 from "@/api/product/commonUnits";
import UserAPI3 from "@/api/product/index";
import UserAPI4 from "@/api/product/specificationsconfig";
import GoodsGroupAPI from "@/api/onlineShop/goodsGroupconfig";
import shopList from "@/components/mycomponents/shopList.vue";
import AddImg from "@/components/mycomponents/addImg.vue";
import { useRouter } from "vue-router";
import Sortable from "sortablejs";
import { useTagsViewStore } from "@/store";
import selecProductDialog from "@/views/marketing_center/group_booking/components/selecProductDialog.vue";
import addUnit from "../components/addUnit.vue";
import addCategory from "../components/addCategory.vue";
import addGoodsGroup from "@/views/online-shop/components/addGoodsGroup.vue";
import GoodsSelect from '@/components/GoodsSelect/index.vue'
import addSkuModal from "../components/addSkuModal.vue";
const route = useRoute();
const selecProductDialogRef = ref(null)
const goodsListMax = ref(9)
const addFormType = ref(1)
const addUnitRef = ref(null)
const consOptions = ref([])
const addCategoryRef = ref(null)
const addGoodsGroupRef = ref(null)
const addSkuModalRef = ref(null)
// let haocaiData = ref({
// consList: [
@@ -419,6 +454,38 @@ const consOptions = ref([])
// ]
// });
const stepsActiveName = ref(0);
const tabsActiveName = ref(1);
const stepRules = [
'name',
'unitId',
'categoryId',
'images',
]
const goodsGroupList = ref([])
async function getGoodsGroupList() {
try {
goodsGroupList.value = await GoodsGroupAPI.getList()
} catch (error) {
console.log(error);
}
}
onMounted(() => {
getGoodsGroupList()
})
// 校验基础信息的表单是否通过
async function nextStep() {
try {
await ruleFormRef.value.validateField(stepRules)
stepsActiveName.value++
} catch (error) {
console.log(error);
}
}
// 生成新商品绑定耗材关系项
function createItem(val) {
let item = {
@@ -615,6 +682,7 @@ const ruleForm = reactive<RuleForm>({
unitId: "",
// 分类id
categoryId: "",
proGroupIds: [], // 商品分组集合
// 封面图url
coverImg: "",
// 详情图urls
@@ -637,16 +705,16 @@ const ruleForm = reactive<RuleForm>({
// sku集合
skuList: [],
// 重量
weight: 0,
weight: '',
// 是否允许改价
isAllowTempModifyPrice: 1,
// 定时上下架周期
days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
useTime: ["00:00:00", "23:59:59"],
// 开始时间
startTime: "",
startTime: "00:00:00",
// 结束时间
endTime: "",
endTime: "23:59:59",
// 是否上架
isSale: "1",
// 是否开启库存
@@ -794,11 +862,17 @@ function showSelectSkuHandle(row: any, index: any, tabIndex: any) {
datas.selectSkuItem = obj;
}
// 添加商品
// 显示添加套餐商品弹窗
function addgoods(index: number = -1) {
datas.addGroupIndex = index;
(shopListRef.value as any)?.opens();
if (ruleForm.groupType == 0) {
(shopListRef.value as any)?.show(ruleForm.proGroupVo[0].goods || []);
} else {
(shopListRef.value as any)?.show(ruleForm.proGroupVo[index].goods || []);
}
}
function deleteEvent(d: any) {
if (isSyncStatus()) {
ElMessage.error('当前同步启用状态下不可修改')
@@ -874,7 +948,7 @@ function createSkuHeader() {
// 可选套餐弹窗
function addtaocan() {
datas.addGroupIndex = -1;
(shopListRef.value as any)?.opens();
(shopListRef.value as any)?.show();
}
// 生成多规格表体
function createSkuBody() {
@@ -962,6 +1036,7 @@ function changeTypeEnum(item: string) {
list.value = [datas.defaultSku];
}
}
// 笛卡尔积算法
function cartesian(arr) {
if (arr.length < 2) return arr[0] || [];
@@ -977,6 +1052,7 @@ function cartesian(arr) {
return res;
});
}
// 套餐类型切换
function typeChange() {
// ruleForm.typeEnum = 'normal'
@@ -1125,8 +1201,13 @@ const resetForm = (formEl: FormInstance | undefined) => {
</script>
<style scoped lang="scss">
.addgoods {
padding: 20px;
background-color: #fff;
padding: 14px;
.form_wrap {
background-color: #fff;
border-radius: 14px;
padding: 14px;
}
}
.pro_sku {