feat: 商品列表添加完成一半
This commit is contained in:
duan
356
src/views/product/indexconfig/addgoods.vue
Normal file
356
src/views/product/indexconfig/addgoods.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div class="addgoods">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
|
||||
<el-form-item label="商品名称" required>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
|
||||
</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="请输入商品介绍" />
|
||||
</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="请选择单位">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
|
||||
</el-select>
|
||||
</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="请选择商品分类">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片" required prop="coverImg">
|
||||
<SingleImageUpload v-model="ruleForm.coverImg" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="color: #999;">注：第一张图为商品封面图，图片尺寸为750×750</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="显示/隐藏" required prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.showType">
|
||||
<el-checkbox label="table">堂食</el-checkbox>
|
||||
<el-checkbox label="dine">自取</el-checkbox>
|
||||
<el-checkbox label="delivery">配送</el-checkbox>
|
||||
<el-checkbox label="express">快递</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="商品类型">
|
||||
<el-radio-group v-model="ruleForm.type">
|
||||
<el-radio label="single">单规格商品</el-radio>
|
||||
<el-radio label="sku">多规格商品</el-radio>
|
||||
<el-radio label="package">套餐商品</el-radio>
|
||||
<el-radio label="weight">称重商品</el-radio>
|
||||
<el-radio label="coupon">团购券</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="规格类型">
|
||||
<el-radio-group v-model="ruleForm.specId">
|
||||
<el-radio label="normal">单规格</el-radio>
|
||||
<el-radio label="sku">多规格</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="套餐类型">
|
||||
<el-radio-group v-model="ruleForm.groupType">
|
||||
<el-radio label="0">固定套餐</el-radio>
|
||||
<el-radio label="1">可选套餐</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template 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 slot="header" slot-scope="scope">
|
||||
<el-button type="primary"
|
||||
@click="$refs.shopListRef.show([...ruleForm.proGroupVo[index].goods])">添加商品</el-button>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
|
||||
@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>
|
||||
</template>
|
||||
<template v-if="ruleForm.groupType == 1">
|
||||
<div class="group_wrap" v-for="(item, index) in form.proGroupVo" :key="index">
|
||||
<el-form inline :model="item">
|
||||
<el-form-item label="规格组名">
|
||||
<el-input v-model="item.title" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`本组菜品${item.goods.length}选`">
|
||||
<el-input v-model="item.number" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="form.proGroupVo.splice(index, 1)">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
<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" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<el-button type="primary"
|
||||
@click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
|
||||
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
|
||||
<el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
|
||||
</template>
|
||||
<!-- 规格属性 -->
|
||||
<SpecificationAttribute></SpecificationAttribute>
|
||||
<el-form-item label="重量">
|
||||
<el-col :span="12">
|
||||
<div style="display: block;">
|
||||
<el-input v-model="ruleForm.weight" placeholder="">
|
||||
<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">
|
||||
<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="ruleForm.dayLimit" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="每单限购">
|
||||
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
|
||||
</el-form-item>
|
||||
<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" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-col :span="12">
|
||||
<el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" :default-value="['00:00', '59:59']" value-format="HH:mm" format="HH:mm" />
|
||||
</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" />
|
||||
<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-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"></el-input-number>
|
||||
<div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
// 规格属性
|
||||
import SpecificationAttribute from './SpecificationAttribute.vue'
|
||||
import UserAPI from "@/api/product/productclassification";
|
||||
import UserAPI2 from "@/api/product/commonUnits";
|
||||
|
||||
let datas = reactive({
|
||||
cycle: [
|
||||
{ label: "周一", value: "Monday" },
|
||||
{ label: "周二", value: "Tuesday" },
|
||||
{ label: "周三", value: "Wednesday" },
|
||||
{ label: "周四", value: "Thursday" },
|
||||
{ label: "周五", value: "Friday" },
|
||||
{ label: "周六", value: "Saturday" },
|
||||
{ label: "周七", value: "Sunday" }
|
||||
],
|
||||
Company: [],
|
||||
classification: [],
|
||||
})
|
||||
|
||||
interface RuleForm {
|
||||
name: string,
|
||||
shortTitle: string,
|
||||
unitId: string,
|
||||
categoryId: string,
|
||||
coverImg: string,
|
||||
images: string[],
|
||||
type: string,
|
||||
specId: string,
|
||||
groupType: string,
|
||||
proGroupVo: string[],
|
||||
skuList: string[],
|
||||
weight: Number,
|
||||
isAllowTempModifyPrice: Number,
|
||||
days: string[],
|
||||
startTime: string,
|
||||
endTime: string,
|
||||
isSale: string,
|
||||
isStock: string,
|
||||
isHot: string,
|
||||
stockNumber: Number,
|
||||
packFee: Number,
|
||||
sort: Number,
|
||||
}
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
//商品名称
|
||||
name: '',
|
||||
//商品介绍
|
||||
shortTitle: '',
|
||||
// 单位id
|
||||
unitId: '',
|
||||
// 分类id
|
||||
categoryId: '',
|
||||
// 封面图url
|
||||
coverImg: '',
|
||||
// 详情图urls
|
||||
images: [],
|
||||
// 商品类型
|
||||
type: 'single',
|
||||
// 规格id
|
||||
specId: 'normal',
|
||||
// 套餐类型
|
||||
groupType: '0',
|
||||
// 套餐入参
|
||||
proGroupVo: [],
|
||||
// sku集合
|
||||
skuList: [],
|
||||
// 重量
|
||||
weight: 0,
|
||||
// 是否允许改价
|
||||
isAllowTempModifyPrice: 1,
|
||||
// 定时上下架周期
|
||||
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
useTime: ['00:00:00', '23:59:59'],
|
||||
// 开始时间
|
||||
startTime: '00:00:00',
|
||||
// 结束时间
|
||||
endTime: "23:59:59",
|
||||
// 是否上架
|
||||
isSale: "1",
|
||||
// 是否开启库存
|
||||
isStock: "0",
|
||||
// 设为推荐
|
||||
isHot: "1",
|
||||
// 库存数量
|
||||
stockNumber: 0,
|
||||
// 打包费
|
||||
packFee: 0,
|
||||
// 排序值
|
||||
sort: 1,
|
||||
})
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
||||
],
|
||||
unitId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择单位',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
categoryId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择商品分类',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
coverImg: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择图片',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
// 获取单位、分类数据
|
||||
async function getList() {
|
||||
datas.Company = await UserAPI2.getList()
|
||||
datas.classification = await UserAPI.getList()
|
||||
}
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
console.log(ruleForm, '提交数据')
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.addgoods {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user