This commit is contained in:
YeMingfei666 2025-02-24 09:51:59 +08:00
commit 59e1995253
5 changed files with 299 additions and 158 deletions

View File

@ -1,10 +1,7 @@
<template>
<el-breadcrumb class="flex-y-center">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<span
v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
class="color-gray-400"
>
<span v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1" class="color-gray-400">
{{ translateRouteTitle(item.meta.title) }}
</span>
<a v-else @click.prevent="handleLink(item)">
@ -30,7 +27,6 @@ const pathCompile = (path: string) => {
const breadcrumbs = ref<Array<RouteLocationMatched>>([]);
function getBreadcrumb() {
console.log(currentRoute.matched);
let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title);
const first = matched[0];
if (!isDashboard(first)) {

View File

@ -46,10 +46,11 @@ let myDialogRef: any = ref(null)
function opens() {
myDialogRef.value.open()
}
const emit = defineEmits(['success'])
//
function subitgood() {
// selectData.value = contentRefs.value.getselectTable()
// myDialogRef.value.close()
emit('success', contentRef.value?.getselectTable())
myDialogRef.value.close()
}
defineExpose({ opens })
</script>

View File

@ -1,32 +1,18 @@
<template>
<div class="tags-container">
<el-scrollbar class="scroll-container" :vertical="false" @wheel.prevent="handleScroll">
<router-link
v-for="tag in visitedViews"
ref="tagRef"
:key="tag.fullPath"
:class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')"
:to="{ path: tag.path, query: tag.query }"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openContentMenu(tag, $event)"
>
<router-link v-for="tag in visitedViews" ref="tagRef" :key="tag.fullPath"
:class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')" :to="{ path: tag.path, query: tag.query }"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openContentMenu(tag, $event)">
{{ translateRouteTitle(tag.title) }}
<el-icon
v-if="!isAffix(tag)"
class="tag-close-icon"
@click.prevent.stop="closeSelectedTag(tag)"
>
<el-icon v-if="!isAffix(tag)" class="tag-close-icon" @click.prevent.stop="closeSelectedTag(tag)">
<Close />
</el-icon>
</router-link>
</el-scrollbar>
<!-- tag标签操作菜单 -->
<ul
v-show="contentMenuVisible"
class="contextmenu"
:style="{ left: left + 'px', top: top + 'px' }"
>
<ul v-show="contentMenuVisible" class="contextmenu" :style="{ left: left + 'px', top: top + 'px' }">
<li @click="refreshSelectedTag(selectedTag)">
<svg-icon icon-class="refresh" />
刷新

View File

@ -22,7 +22,7 @@ const defaultSettings: AppSettings = {
// 布局方式,默认为左侧布局
layout: LayoutEnum.LEFT,
// 主题,根据操作系统的色彩方案自动选择
theme: mediaQueryList.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT,
theme: mediaQueryList.matches ? ThemeEnum.LIGHT : ThemeEnum.LIGHT,
// 组件大小 default | medium | small | large
size: SizeEnum.DEFAULT,
// 语言

View File

@ -49,10 +49,10 @@
</el-form-item> -->
<el-form-item label="商品类型">
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(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 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>
@ -90,58 +90,56 @@
<template #header>
<el-button type="primary" @click="addgoods">添加商品</el-button>
</template>
<!-- <template slot="header" v-slot="scope"> -->
<!-- <el-button type="primary" @click="">添加商品</el-button> -->
<!-- </template> -->
<!-- <template v-slot="scope">
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
<template v-slot="scope">
<el-button type="text" :disabled="scope.row.type != 'sku'"
@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-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" />
</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="ruleForm.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 #header>
<!-- <el-button type="primary"
@click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button> -->
</template>
<template v-slot="scope">
<el-button type="text" :disabled="scope.row.type != 'sku'"
@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>
<el-button type="primary" @click="addtaocan">添加套餐组</el-button>
</div>
</div>
<!--
<div 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>
</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">
@ -153,7 +151,7 @@
<el-form-item :label="item.name" v-if="datas.selectSpeclist.length" v-for="item in datas.selectSpeclist"
:key="item.name">
<el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
<el-checkbox :value="item.name" v-for="(item, index) in item.children" :key="index">{{ item.name
<el-checkbox :value="item.name" v-for="(ele, index) in item.children" :key="index">{{ ele.name
}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
@ -178,8 +176,8 @@
</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 :value="1">允许</el-radio>
<el-radio :value="0">不允许</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="每日销量上限">
@ -201,7 +199,8 @@
<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" />
end-placeholder="结束时间" :default-value="[new Date('00:00'), new Date('23:59')]" value-format="HH:mm"
format="HH:mm" />
</el-col>
</el-form-item>
<el-form-item label="上架">
@ -235,6 +234,25 @@
</el-form>
<!-- 选择商品 -->
<shopList ref="shopListRef" @success="selectShopRes" />
<el-dialog :title="datas.selectSkuItem.proName" v-model="datas.showSelectSku">
<div class="pro_sku">
<div class="item">
<div class="row">
<div class="title">选项值</div>
<div class="tag" :class="{ active: item.active }" v-for="(item, index) in datas.selectSkuItem.skuList"
:key="item.id" @click="selectSkuHandle(item, index)">
{{ item.specInfo }}
</div>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="datas.showSelectSku = false"> </el-button>
<el-button type="primary" @click="showSelectSkuConfirm"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
@ -250,7 +268,8 @@ import UserAPI4 from "@/api/product/specificationsconfig";
import shopList from "@/components/mycomponents/shopList.vue";
import { useRouter } from 'vue-router';
import { useTagsViewStore } from "@/store";
const tagsViewStore = useTagsViewStore();
const router = useRouter();
let list = ref<any[]>([{
"originPrice": 0,
@ -262,7 +281,7 @@ let list = ref<any[]>([{
"weight": 0,
"barCode": "88888888888888888888"
}]);
let datas = reactive({
let datas = reactive<datasForm>({
cycle: [
{ label: "周一", value: "Monday" },
{ label: "周二", value: "Tuesday" },
@ -288,9 +307,26 @@ let datas = reactive({
"barCode": "88888888888888888888"
},
specTableHeaders: [],
// -index
selectSkuTableIndex: 0,
selectSkuConfirmIndex: 0,
showSelectSku: false,
selectSkuItem: {}
})
let shopListRef = ref(null)
interface datasForm {
cycle: { label: string, value: string }[],
Company: any[],
classification: any[],
specificationsconfig: any[],
selectSpeclist: any[],
defaultSku: any,
specTableHeaders: any[],
selectSkuTableIndex: any,
selectSkuConfirmIndex: number,
showSelectSku: boolean,
selectSkuItem: any
}
interface RuleForm {
name: string,
shortTitle: string,
@ -299,12 +335,11 @@ interface RuleForm {
coverImg: string,
images: string[],
type: string,
specId: string,
specId: any,
groupType: string,
proGroupVo: string[],
skuList: string[],
weight: Number,
isAllowTempModifyPrice: Number,
weight: any,
isAllowTempModifyPrice: any,
days: string[],
useTime: string[],
startTime: string,
@ -312,49 +347,11 @@ interface RuleForm {
isSale: string,
isStock: string,
isHot: string,
stockNumber: Number,
packFee: Number,
stockNumber: any,
packFee: any,
sort: Number,
}
//
function addgoods() {
shopListRef.value.opens()
}
//
function selectShopRes(res) {
// let newres = res.map(item => {
// item.proId = item.id
// item.proName = item.name
// item.price = item.lowPrice
// item.skuId = ''
// item.skuName = ''
// item.number = 1
// return item
// })
// if (this.form.groupType == 0) {
// let obj = {
// title: '',
// count: newres.length,
// number: '',
// goods: newres
// }
// this.form.proGroupVo = [{ ...obj }]
// } else {
// if (this.addGroupIndex !== false) {
// this.form.proGroupVo[this.addGroupIndex].count = newres.length
// this.form.proGroupVo[this.addGroupIndex].goods = newres
// } else {
// let arr = [...this.form.proGroupVo]
// arr.push({
// title: '',
// count: newres.length,
// number: '',
// goods: newres
// })
// this.form.proGroupVo = [...arr]
// }
// }
proGroupVo: any[],
selectSpecInfo: any
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
@ -408,6 +405,7 @@ const ruleForm = reactive<RuleForm>({
packFee: 0,
//
sort: 1,
selectSpecInfo: {}
})
const rules = reactive<FormRules<RuleForm>>({
name: [
@ -439,10 +437,95 @@ const rules = reactive<FormRules<RuleForm>>({
onMounted(() => {
getList()
})
// sku
function selectSkuHandle(item: any, index: number) {
// false
datas.selectSkuItem.skuList.map((item: any, index: number) => {
let nitem = { ...item }
nitem.active = false
datas.selectSkuItem.skuList[index] = nitem
})
if (item.active) {
item.active = false
} else {
item.active = true
}
datas.selectSkuItem.skuList[index] = { ...item }
// let arr = datas.selectSkuItem.skuList.filter((item:any) => item.active)
// if (arr.length) {
// this.selectSkuConfirmDisabled = false
// } else {
// this.selectSkuConfirmDisabled = true
// }
}
//
function showSelectSkuConfirm() {
let item = datas.selectSkuItem.skuList.filter((item: any) => item.active)
ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuId: item[0].id }
ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuName: item[0].specInfo }
datas.showSelectSku = false
}
//
function showSelectSkuHandle(row: any, index: any, tabIndex: any) {
datas.selectSkuTableIndex = tabIndex
datas.selectSkuConfirmIndex = index
datas.showSelectSku = true
let obj = { ...row }
obj.skuList.map((item: any) => {
item.active = false
})
datas.selectSkuItem = obj
}
//
function addgoods() {
(shopListRef.value as any)?.opens()
}
//
function selectShopRes(res: Array<any>) {
console.log(res, '选择商品')
let newres = res.map(item => {
item.proId = item.id
item.proName = item.name
item.price = item.lowPrice
item.skuId = ''
item.skuName = ''
item.number = 1
return item
})
if (ruleForm.groupType == '0') {
let obj = {
title: '',
count: newres.length,
number: '',
goods: newres
}
ruleForm.proGroupVo = [{ ...obj }]
} else {
// if (this.addGroupIndex !== false) {
// this.form.proGroupVo[this.addGroupIndex].count = newres.length
// this.form.proGroupVo[this.addGroupIndex].goods = newres
// } else {
let arr = [...ruleForm.proGroupVo]
arr.push({
title: '',
count: newres.length,
number: '',
goods: newres
})
ruleForm.proGroupVo = [...arr]
// }
}
}
//
async function getList() {
datas.Company = await UserAPI2.getList()
datas.classification = await UserAPI.getList()
datas.Company = (await UserAPI2.getList(null)) as any[]
datas.classification = (await UserAPI.getList(null)) as any[]
}
//
function selectSpecResultChange() {
@ -463,7 +546,10 @@ function createSkuHeader() {
}
datas.specTableHeaders = headers;
}
//
function addtaocan() {
(shopListRef.value as any)?.opens()
}
//
function createSkuBody() {
let bodys = [];
@ -486,7 +572,7 @@ function createSkuBody() {
let newarr = [];
for (let item of arr) {
if (Array.isArray(item)) {
let obj = {};
let obj: Record<string, any> = {};
let specSnap = [];
for (let v of item) {
for (let key in v) {
@ -522,7 +608,7 @@ function createSkuBody() {
list.value = newarr;
}
//
function changeTypeEnum(item) {
function changeTypeEnum(item: string) {
// single- sku- package- weight- coupon-
list.value = []
if (item == 'sku') {
@ -534,41 +620,42 @@ function changeTypeEnum(item) {
}
}
//
function cartesian(arr) {
function cartesian(arr: any[]) {
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]);
return [].reduce.call(arr, (col: any, set: any, index) => {
let res = <any>[];
col.forEach((c: any) => {
set.forEach((s: any) => {
let arr: any = Array.isArray(c) ? c : [c]
let t: any[] = [].concat(arr);
t.push(s);
res.push(t);
});
});
return res;
});
}, []);
}
//
function typeChange() {
ruleForm.typeEnum = 'normal'
if (ruleForm.groupType == 0) {
// this.$set(this.form.proGroupVo, 0, {
// title: '',
// count: '',
// number: 1,
// goods: []
// })
// ruleForm.typeEnum = 'normal'
if (ruleForm.groupType == '0') {
ruleForm.proGroupVo[0] = {
title: '',
count: '',
number: 1,
goods: []
}
} else {
// this.form.proGroupVo = []
ruleForm.proGroupVo = []
}
// this.changeTypeEnum()
}
//
async function tbProductSpecGet() {
datas.specificationsconfig = await UserAPI4.getPage()
datas.specificationsconfig = (await UserAPI4.getPage(null)) as []
}
//
function selectSpecHandle(e) {
function selectSpecHandle(e: any) {
const selectSpec = JSON.parse(JSON.stringify(datas.specificationsconfig.find((item) => item.id == e).children));
for (let item in selectSpec) {
selectSpec[item].selectSpecResult = [];
@ -590,20 +677,32 @@ const submitForm = async (formEl: FormInstance | undefined) => {
ruleForm.startTime = ruleForm.useTime[0]
ruleForm.endTime = ruleForm.useTime[1]
// sku
ruleForm.skuList = specificationAttributeRef.value.getdata()
ruleForm.skuList = (specificationAttributeRef.value as any)?.getdata()
// selectSpecInfo
if (ruleForm.type == 'sku') {
let obj = {}
let obj: any = {}
datas.selectSpeclist.forEach((item: any) => {
obj[item.name] = item.selectSpecResult
})
ruleForm.selectSpecInfo = obj
} else if (ruleForm.type == 'package') {
console.log(ruleForm, '套餐')
}
console.log(ruleForm, '提交数据')
let res = await UserAPI3.addunit(ruleForm)
if (res.code == 200) {
ElMessage.success("添加成功");
router.push({ name: 'productIndex' });
setTimeout(() => {
closeSelectedTag({
"name": "addgoods",
"title": "新增商品",
"path": "/product/addgoods",
"fullPath": "/product/addgoods",
"affix": false,
"keepAlive": true,
"query": {}
})
}, 500);
}
} else {
ElMessage.error("请填写完整信息");
@ -611,10 +710,20 @@ const submitForm = async (formEl: FormInstance | undefined) => {
}
})
}
//
function closeSelectedTag(view: TagView) {
tagsViewStore.delView(view).then((res: any) => {
if (tagsViewStore.isActive(view)) {
tagsViewStore.toLastView(res.visitedViews, view);
}
});
}
// id
const specIdFunction = (type: string) => {
if (type === 'single') {
return null
return ''
} else if (type === '2') {
return 2
} else if (type === '3') {
@ -626,6 +735,15 @@ const specIdFunction = (type: string) => {
}
}
const resetForm = (formEl: FormInstance | undefined) => {
closeSelectedTag({
"name": "addgoods",
"title": "新增商品",
"path": "/product/addgoods",
"fullPath": "/product/addgoods",
"affix": false,
"keepAlive": true,
"query": {}
})
if (!formEl) return
formEl.resetFields()
}
@ -635,4 +753,44 @@ const resetForm = (formEl: FormInstance | undefined) => {
padding: 20px;
background-color: #fff;
}
.pro_sku {
.item {
.row {
display: flex;
align-items: center;
&:not(:first-child) {
margin-top: 20px;
}
.title {
width: 80px;
}
.tag {
background-color: #F7F7FA;
padding: 6px 12px;
margin-right: 10px;
border-radius: 4px;
&.no {
background: none;
padding: 6px 0;
}
&.active {
background-color: #46A6FF;
color: #fff;
}
}
}
}
}
.group_wrap {
padding: 20px;
background-color: #F7F7FA;
margin-bottom: 20px;
}
</style>