feat: 商品列表添加完成一半
This commit is contained in:
duan
@@ -62,6 +62,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import UserAPI from "@/api/product/index";
|
||||
import { useRouter } from 'vue-router';
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./indexconfig/add";
|
||||
@@ -85,30 +86,31 @@ const {
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
const router = useRouter();
|
||||
|
||||
const form = reactive({
|
||||
num: '',
|
||||
})
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
router.push({ name: 'addgoods' });
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// 加载上级规格下拉数据源
|
||||
addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// 加载角色下拉数据源
|
||||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
console.log('handleEditClick')
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// 加载部门下拉数据源
|
||||
editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// 根据id获取数据进行填充
|
||||
const data = await UserAPI.getunitinfo(row.id);
|
||||
editModalRef.value?.setFormData(data);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// const data = await UserAPI.getunitinfo(row.id);
|
||||
// editModalRef.value?.setFormData(data);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
|
||||
}
|
||||
const myDialogRef = ref(null)
|
||||
|
||||
66
src/views/product/indexconfig/SpecificationAttribute.vue
Normal file
66
src/views/product/indexconfig/SpecificationAttribute.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-width="150px" class="demo-ruleForm" status-icon>
|
||||
<el-form-item label="规格属性">
|
||||
<el-table :data="datas.skuList" border>
|
||||
<el-table-column label="售价" prop="salePrice">
|
||||
<template v-slot="scope">
|
||||
<el-input-number size="mini" @change="priceFormat(scope.row, 'salePrice')"
|
||||
@blur="priceFormat(scope.row, 'salePrice')" 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 @change="priceFormat(scope.row, 'memberPrice')"
|
||||
@blur="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="起售数量" prop="suit">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="0"
|
||||
v-model="scope.row.suit" controls-position="right" v-if="form.type == 'weigh'"></el-input-number>
|
||||
<el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="1"
|
||||
v-model="scope.row.suit" controls-position="right" v-else></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分销金额" prop="firstShared">
|
||||
<template v-slot="scope">
|
||||
<el-input-number @change="priceFormat(scope.row, 'firstShared')"
|
||||
@blur="priceFormat(scope.row, 'firstShared')" v-model="scope.row.firstShared"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const ruleFormRef = ref(null)
|
||||
let datas = reactive({
|
||||
skuList: [],
|
||||
|
||||
})
|
||||
const ruleForm = ref({
|
||||
|
||||
})
|
||||
function priceFormat(item, key) {
|
||||
const messageheight = 48;
|
||||
const offset = window.innerHeight / 2 - messageheight / 2 - 100;
|
||||
nextTick(() => {
|
||||
const min = 0;
|
||||
const max = 100000000;
|
||||
const newval = formatPrice(item[key], min, max, true);
|
||||
console.log(newval);
|
||||
if (typeof newval !== "number") {
|
||||
item[key] = newval.value;
|
||||
// this.$message({
|
||||
// offset,
|
||||
// message: `请输入${min}到${max}范围内的数字`,
|
||||
// })
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
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>
|
||||
@@ -2,12 +2,17 @@ import UserAPI from "@/api/product/index";
|
||||
import RoleAPI from "@/api/system/role";
|
||||
import type { UserPageQuery } from "@/api/system/user";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import { id } from "element-plus/es/locale";
|
||||
|
||||
const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
pageName: "sys:user",
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
rowKey: 'id',
|
||||
treeProps: {
|
||||
children: 'skuList' // 指定子节点存储的字段为 customChildren
|
||||
}
|
||||
},
|
||||
pagination: {
|
||||
background: true,
|
||||
@@ -22,6 +27,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
obj.createEndTime = obj['1']
|
||||
return UserAPI.getPage(obj);
|
||||
},
|
||||
modifyAction: function (data) {
|
||||
let obj = {
|
||||
type: data.isGrounding ? 'sku' : 'product',
|
||||
id: data.id,
|
||||
isSale: data.value
|
||||
}
|
||||
// return UserAPI.onOff(obj);
|
||||
},
|
||||
deleteAction: UserAPI.deleteByIds,
|
||||
// importAction(file) {
|
||||
// return UserAPI.import(1, file);
|
||||
@@ -64,12 +77,6 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
prop: "isSale",
|
||||
templet: "switch",
|
||||
slotName: "status",
|
||||
}, {
|
||||
label: "是否启用库存",
|
||||
align: "center",
|
||||
prop: "isStock",
|
||||
templet: "switch",
|
||||
slotName: "status",
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
|
||||
@@ -14,6 +14,7 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
},
|
||||
|
||||
pk: "id",
|
||||
|
||||
formAction: function (data) {
|
||||
return UserAPI.update(data);
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-icon class="iconStyle">
|
||||
<PieChart />
|
||||
</el-icon>
|
||||
<span>商品种树</span>
|
||||
<span>商品种数</span>
|
||||
<span>{{ datas.totalRow }}</span>
|
||||
</div>
|
||||
<div style="width: 300px;">
|
||||
|
||||
Reference in New Issue
Block a user