diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 33b71d8..3b35624 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -1,10 +1,7 @@ @@ -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([{ "originPrice": 0, @@ -262,7 +281,7 @@ let list = ref([{ "weight": 0, "barCode": "88888888888888888888" }]); -let datas = reactive({ +let datas = reactive({ 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() const ruleForm = reactive({ @@ -408,6 +405,7 @@ const ruleForm = reactive({ packFee: 0, // 排序值 sort: 1, + selectSpecInfo: {} }) const rules = reactive>({ name: [ @@ -439,10 +437,95 @@ const rules = reactive>({ 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) { + 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 = {}; 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 = []; + 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; +} \ No newline at end of file