net/key1_beacon_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed 完善sku

Browse Source
This commit is contained in:
lwh 2023-06-24 13:00:32 +08:00
parent de87f5aa4e
commit 91dec9b5fd
6 changed files with 163 additions and 673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Editor/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div style="border: 1px solid #ccc"> <div style="border: 1px solid #ccc;z-index: 9999;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor <Editor
style="height: 300px; overflow-y: hidden" style="height: 500px; overflow-y: hidden"
v-model="valueHtml" v-model="valueHtml"
:defaultConfig="editorConfig" :defaultConfig="editorConfig"
:mode="mode" :mode="mode"
@ -24,6 +24,10 @@ export default {
default: () => '请输入内容', default: () => '请输入内容',
}, },
modelValue: String, modelValue: String,
minHeight: {
type: Number,
default: () => 300,
}
}, },
setup(props, { emit }) { setup(props, { emit }) {
const editorRef = shallowRef() const editorRef = shallowRef()

14
src/components/ImageUpload/index.vue
View File

@ -15,12 +15,10 @@
:on-remove="handleRemove" :on-remove="handleRemove"
:show-file-list="true" :show-file-list="true"
:headers="headers" :headers="headers"
v-model:file-list="fileList" :file-list="fileList"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }"> :class="{ hide: fileList.length >= limit }">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon"><plus /></el-icon>
<plus />
</el-icon>
</el-upload> </el-upload>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip"> <div class="el-upload__tip" v-if="showTip">
@ -119,7 +117,6 @@ function handleRemove(file, files) {
// 上传成功回调 // 上传成功回调
function handleUploadSuccess(res) { function handleUploadSuccess(res) {
console.log(res,'调了多少次');
if (res.code != 200) { if (res.code != 200) {
proxy.$modal.msgError(`上传失败，原因:${res.msg}!`) proxy.$modal.msgError(`上传失败，原因:${res.msg}!`)
proxy.$modal.closeLoading() proxy.$modal.closeLoading()
@ -127,15 +124,12 @@ function handleUploadSuccess(res) {
return return
} }
uploadList.value.push({ name: res.data.fileName, url: res.data.url }) uploadList.value.push({ name: res.data.fileName, url: res.data.url })
console.log(uploadList.value,'上传列表'); if (uploadList.value.length === number.value) {
console.log(number.value,'数量');
console.log(fileList.value,'fileList');
// if (uploadList.value.length === number.value) {
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value) fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
uploadList.value = [] uploadList.value = []
number.value = 0 number.value = 0
emit('update:modelValue', listToString(fileList.value)) emit('update:modelValue', listToString(fileList.value))
// } }
proxy.$modal.closeLoading() proxy.$modal.closeLoading()
} }

661
src/views/business/GoodsManager/Goodss/components/AddDialog.vue
View File

@ -13,7 +13,7 @@
<el-tab-pane label="基本信息" name="base"> <el-tab-pane label="基本信息" name="base">
<el-form ref="formRef" :model="formData" :rules="rules"> <el-form ref="baseFormRef" :model="formData" :rules="rules">
<el-row :gutter="20"> <el-row :gutter="20">
@ -91,7 +91,7 @@
<el-tab-pane label="规格/库存" name="sku"> <el-tab-pane label="规格/库存" name="sku">
<el-form ref="formRef" :model="formData" :rules="rules"> <el-form ref="skuFormRef" :model="formData" :rules="rules">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品规格" prop="goodsSpecType"> <el-form-item :label-width="labelWidth" label="商品规格" prop="goodsSpecType">
@ -156,7 +156,7 @@
<el-row v-if="formData.goodsSpecType == 2"> <el-row v-if="formData.goodsSpecType == 2">
<el-col :lg="24"> <el-col :lg="24">
<MultiSpec></MultiSpec> <MultiSpec v-model="formData"></MultiSpec>
</el-col> </el-col>
</el-row> </el-row>
@ -167,11 +167,11 @@
<el-tab-pane label="商品详情" name="detail"> <el-tab-pane label="商品详情" name="detail">
<el-form ref="formRef" :model="formData" :rules="rules"> <el-form ref="detailFormRef" :model="formData" :rules="rules">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :lg="24"> <el-col :lg="24">
<el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails"> <el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
<editor v-model="formData.goodsDetails" :min-height="300" style="height: 500px; " /> <editor v-model="formData.goodsDetails" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -181,7 +181,7 @@
<el-tab-pane label="更多设置" name="more"> <el-tab-pane label="更多设置" name="more">
<el-form ref="formRef" :model="formData" :rules="rules"> <el-form ref="moreFormRef" :model="formData" :rules="rules">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :lg="24"> <el-col :lg="24">
@ -190,6 +190,14 @@
<div class="input-intro">一句话简述，例如：此款商品美观大方 性价比较高 不容错过</div> <div class="input-intro">一句话简述，例如：此款商品美观大方 性价比较高 不容错过</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="服务与承诺" prop="goodsServicesIds">
<el-select v-model="formData.goodsServicesIds" multiple placeholder="请选择服务与承诺">
<el-option v-for="item in goodsServicesDataList" :key="item.goodsServicesId" :label="item.goodsServicesName"
:value="item.goodsServicesId" />
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo"> <el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
<div style="display: block;"> <div style="display: block;">
@ -305,8 +313,8 @@
<template #footer> <template #footer>
<div key="dialog-footer"> <div key="dialog-footer">
<el-button type="primary" @click="handleAddClick(formRef)">添加</el-button> <el-button type="primary" @click="handleAddClick()">添加</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button> <el-button @click="handleResetClick()">重置</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -324,6 +332,7 @@ import modal from '@/plugins/modal.js'
import { addOrUpdateGoods } from '@/api/business/GoodsManager/Goodss/goods.js'; import { addOrUpdateGoods } from '@/api/business/GoodsManager/Goodss/goods.js';
import { shopGoodsCategoryTreeList } from '@/api/business/GoodsManager/ShopGoodsCategorys/shopGoodsCategory.js'; import { shopGoodsCategoryTreeList } from '@/api/business/GoodsManager/ShopGoodsCategorys/shopGoodsCategory.js';
import { deliveryList } from '@/api/business/LogisticsManage/Deliverys/delivery.js' import { deliveryList } from '@/api/business/LogisticsManage/Deliverys/delivery.js'
import { goodsServicesList } from '@/api/business/GoodsManager/GoodsServicess/goodsServices.js'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import ChooseShopDialog from './ChooseShopDialog.vue'; import ChooseShopDialog from './ChooseShopDialog.vue';
import MultiSpec from './MultiSpec/MultiSpec.vue'; import MultiSpec from './MultiSpec/MultiSpec.vue';
@ -361,7 +370,7 @@ const is_alone_grade = ref([]);
// 上下架状态(1上架 2下架)字典选项列表 // 上下架状态(1上架 2下架)字典选项列表
const shelf_status = ref([]); const shelf_status = ref([]);
// 标签选中 // 标签选中
const activeName = ref('sku') const activeName = ref('base')
// 选择店铺弹窗参数 // 选择店铺弹窗参数
const ChooseShopDialogVisible = ref(false); const ChooseShopDialogVisible = ref(false);
@ -372,359 +381,8 @@ const userid = useUserStore().userId
const dataList = ref([]) const dataList = ref([])
// 配送模板列表 // 配送模板列表
const deliveryDataList = ref([]) const deliveryDataList = ref([])
// 商品服务与承诺列表
const goodsServicesDataList = ref([])
/** 商品规格 */
// 添加商品规格按钮状态
const isAddSpecMax = ref(true)
const isAddSpecValueMax = ref(true)
// 规格组
const goodsSpecList = ref([
// 规格值Json属性
// {
// specId: 0,
// specName: "",
// props: [
// {
// specValueId: 0,
// specValueName: "",
// specValue: "",
// },
// ],
// }
])
const skuList = ref([
// {
// specValue: "蓝色",
// specSecondValue: "4+128G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "4+128G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "8+256G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "8+256G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "12+1T",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "12+1T",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "1000G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "蓝色",
// specSecondValue: "1000G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "4+128G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "4+128G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "8+256G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "8+256G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "12+1T",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "12+1T",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "1000G",
// specThirdValue: "5G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
// {
// specValue: "黑色",
// specSecondValue: "1000G",
// specThirdValue: "4G",
// goodsGuid: 0,
// specValueName: "",
// goodsSkuImg: "",
// goodsSkuSkuCode: 0,
// goodsSkuPrice: 10,
// goodsSkuLinePrice: 0,
// goodsSkuStockNum: 0,
// goodsSkuWeight: 0,
// goodsSkuProps: ""
// },
])
let firstLen = 0
let secondLen = 0
skuList.value.map((item, idx) => {
let firstVal = skuList?.value[0].specValue
if (item.specValue === firstVal) {
firstLen += 1
firstVal = item.specValue
}
// let secondVal = skuList?.value[0].specSecondValue
// if (item.specSecondValue === secondVal) {
// secondLen += 1
// secondVal = item.specSecondValue
// }
})
console.log(secondLen, '第二列');
const skuColumns = ref([
// {
// prop: 'specValue',
// label: '颜色',
// width: '100'
// },
// {
// prop: 'specSecondValue',
// label: '内存',
// width: '100'
// },
// {
// prop: 'specThirdValue',
// label: '版本',
// width: '100'
// },
])
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}) => {
// if (columnIndex === 0) {
// if (rowIndex % firstLen === 0) {
// return {
// rowspan: firstLen,
// colspan: 1,
// }
// } else {
// return {
// rowspan: 0,
// colspan: 0,
// }
// }
// }
// if (columnIndex === 1) {
// if (rowIndex % secondLen === 0) {
// return {
// rowspan: secondLen,
// colspan: 1,
// }
// } else {
// return {
// rowspan: 0,
// colspan: 0,
// }
// }
// }
}
// -业务方法 // -业务方法
// 字典获取 // 字典获取
@ -778,7 +436,6 @@ async function getshelf_status() {
// 点击标签栏 // 点击标签栏
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event)
} }
@ -794,6 +451,7 @@ const handleChooseShop = () => {
async function handelAddShop() { async function handelAddShop() {
await getTreeList() await getTreeList()
await getDeliveryList() await getDeliveryList()
await getGoodsServicesList()
} }
// 获取商品类目树形列表 // 获取商品类目树形列表
@ -818,162 +476,50 @@ async function getDeliveryList() {
}) })
} }
// 获取商品服务与承诺列表
async function getGoodsServicesList() {
/** 商品规格 */ goodsServicesList({
pageNum: 1,
// 添加规格组 pageSize: 10000,
function handleAddSpec() { shopGuid: formData?.shopGuid
let data = { }).then((res) => {
specId: 0, if (res.code == 200) {
specName: "", goodsServicesDataList.value = res.data.result
key: 0, goodsServicesDataList.value.map((item) => {
props: [ if(item.goodsServicesIsDefault === 1){
formData.goodsServicesIds.push(item.goodsServicesId)
] }
} })
goodsSpecList.value.push(data)
if (goodsSpecList.value.length == 3) {
isAddSpecMax.value = false
}
}
// 修改规格组
function handleChangeSepc(item, idx) {
item.key = idx
let foundMatch = false;
skuColumns.value.map((i, index) => {
if (i.key == idx) {
i.label = item.specName
foundMatch = true
return true
} }
}) })
if (foundMatch) {
return; // 停止执行后续代码
}
// 添加动态表头
let column = {
prop: 'specValue',
label: item.specName,
width: '100',
key: idx
}
skuColumns.value.push(column)
}
// 删除规格组
function handleDelSpec(item) {
const index = goodsSpecList.value.indexOf(item);
if (index > -1) {
goodsSpecList.value.splice(index, 1);
}
if (goodsSpecList.value.length < 3) {
isAddSpecMax.value = true
}
// 输出对应的表头
skuColumns.value = skuColumns.value.filter(column => column.label !== item.specName);
// 删除对应的sku
// skuColumns.value = skuColumns.value.filter(column => column.specName !== item.specName);
} }
// 基础信息表单
const baseFormRef = ref();
// 商品规格表单
const skuFormRef = ref();
// 添加规格值 // 商品详情表单
function handleAddSpecValue(item) { const detailFormRef = ref();
let data = {
specId: 0,
specValueId: 0,
specValueName: "",
}
item.props.push(data)
if (item.props.length == 50) {
isAddSpecValueMax.value = false
}
}
// 修改规格值
function handleChangeSepcValue(item,specValue) {
let firstSpecValue = ""
let secondSpecValue = ""
let thirdSpecValue = ""
console.log(item,'item喵喵喵喵喵喵');
// goodsSpecList.value.map((item,index) => {
// if(item.key === 0){
// firstSpecValue = specValue.specValueName
// }
// if(item.key === 1){
// secondSpecValue = specValue.specValueName
// }
// if(item.key === 2){
// thirdSpecValue = specValue.specValueName
// }
// })
// 添加sku
let sku = {
specValue: firstSpecValue,
specSecondValue: secondSpecValue,
specThirdValue: thirdSpecValue,
goodsGuid: 0,
specValueName: "",
goodsSkuImg: "",
goodsSkuSkuCode: 0,
goodsSkuPrice: 0,
goodsSkuLinePrice: 0,
goodsSkuStockNum: 0,
goodsSkuWeight: 0,
goodsSkuProps: ""
}
skuList.value.push(sku)
console.log(skuList.value,'asdasd-------------');
}
// 删除规格值
function handleDelSpecValue(item, specValue) {
const index = item.props.indexOf(specValue);
if (index > -1) {
item.props.splice(index, 1);
}
if (item.props.length < 50) {
isAddSpecValueMax.value = true
}
}
// 更多设置表单
const moreFormRef = ref();
// -基础参数 // -基础参数
const labelWidth = 100; const labelWidth = 100;
const formRef = ref();
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]); const emits = defineEmits(["update:modelValue"]);
const formData = reactive({ const formData = reactive({
goodsServicesIds: [],
goodsSpecList: [],
skuList: [],
goodsSpecType: 1, goodsSpecType: 1,
goodsDeductStockType: 1, goodsDeductStockType: 1,
goodsPriceHighest: 1.00, goodsPriceHighest: 1.00,
goodsTotalInventory: 100, goodsTotalInventory: 100,
goodsSalesInitial: 1, goodsSalesInitial: 0,
goodsShelfStatus: 1, goodsShelfStatus: 1,
goodsSort: 100, goodsSort: 100,
goodsIsPointsGift: 0, goodsIsPointsGift: 0,
@ -996,7 +542,6 @@ const rules = reactive({
goodsSkuGuid: [{ required: true, message: "商品规格不能为空", trigger: "blur" }], goodsSkuGuid: [{ required: true, message: "商品规格不能为空", trigger: "blur" }],
deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }], deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }],
goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }], goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
goodsCoding: [{ required: true, message: "编码不能为空", trigger: "blur" }],
goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }], goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
goodsPriceLowest: [{ required: true, message: "价格(最低)不能为空", trigger: "blur" }], goodsPriceLowest: [{ required: true, message: "价格(最低)不能为空", trigger: "blur" }],
goodsPriceHighest: [{ required: true, message: "价格(最高)不能为空", trigger: "blur" }], goodsPriceHighest: [{ required: true, message: "价格(最高)不能为空", trigger: "blur" }],
@ -1016,20 +561,31 @@ const rules = reactive({
// -基础方法 // -基础方法
function getFormPromise(form) {
return new Promise((resolve) => {
form.validate((res) => {
resolve(res)
})
})
}
// 提交 // 提交
const handleAddClick = async (formEl) => { const handleAddClick = async () => {
if (!formEl) return; console.log(formData, '表单提交');
formEl.validate(async (valid) => {
if (!valid) { Promise.all([baseFormRef.value, skuFormRef.value, detailFormRef.value, moreFormRef.value,].map(getFormPromise)).then(async (res) => {
return; const validateResult = res.every((item) => !!item)
if (validateResult) {
const { code } = await addOrUpdateGoods(formData);
if (code == 200) {
modal.msgSuccess('添加成功')
closeDialog();
}
}else{
modal.msgError('表单未通过验证！')
} }
const { code } = await addOrUpdateGoods(formData);
if (code == 200) {
modal.msgSuccess('添加成功')
closeDialog();
}
}); });
}; };
const closeDialog = () => { const closeDialog = () => {
@ -1040,16 +596,21 @@ const closeDialog = () => {
dataList.value = [] dataList.value = []
deliveryDataList.value = [] deliveryDataList.value = []
activeName.value = 'base' activeName.value = 'base'
handleResetClick(formRef.value); // 商品规格
formData.goodsSpecList = []
formData.skuList = []
handleResetClick([baseFormRef.value, skuFormRef.value, detailFormRef.value, moreFormRef.value,]);
props.done(); props.done();
emits("update:modelValue", false); emits("update:modelValue", false);
}; };
const handleResetClick = async (formEl) => { const handleResetClick = async (formElList) => {
if (!formEl) return; if (!formElList) return;
formEl.resetFields(); formElList.forEach(item => {
item.resetFields();
});
}; };
</script> </script>
@ -1067,68 +628,4 @@ const handleResetClick = async (formEl) => {
.el-divider { .el-divider {
margin: 50px 0; margin: 50px 0;
} }
.sepc-big-box {
width: 100%;
margin-bottom: 20px;
}
.sepc-title-box {
width: 100%;
padding: 10px;
background-color: #f4f4f5;
display: flex;
justify-content: space-between;
}
.spec-value-box {
width: 100%;
padding: 20px 20px 20px 40px;
background-color: #fbfbfb;
display: flex;
flex-wrap: wrap;
}
.spec-value-input-big-box {
display: flex;
flex-wrap: wrap;
}
.spec-value-input-box {
width: 250px;
position: relative;
margin-right: 30px;
margin-bottom: 15px;
}
.spec-value-input-del {
position: absolute;
top: -5px;
right: -5px;
z-index: 99;
width: 18px;
height: 18px;
background-color: grey;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
cursor: pointer;
}
.spec-input {
width: 250px;
margin-right: 30px;
}
.mt-5 {
margin-top: 10px;
}
.el-input-number {
width: 140px;
}
</style> </style>

52
src/views/business/GoodsManager/Goodss/components/MultiSpec/MultiSpec.vue
View File

@ -46,19 +46,43 @@
:width="column.width"> :width="column.width">
</el-table-column> </el-table-column>
<el-table-column prop="goodsSkuPrice" label="预览图" width="120" align="center"> <el-table-column prop="goodsSkuPrice" label="预览图" width="125" align="center">
<template #default="scope"> <template #default="scope">
<UploadImage ref="uploadRef" v-model="scope.row.goodsSkuImg" :data=imgData :limit="1" :fileSize="5" :drag="true" <UploadImage ref="uploadRef" v-model="scope.row.goodsSkuImg" :data=imgData :limit="1" :fileSize="5" :drag="true"
:isShowTip="false" /> :isShowTip="false" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsSkuPrice" label="商品价格"> <el-table-column prop="goodsSkuPrice" label="商品价格" width="145">
<template #default="scope"> <template #default="scope">
<el-input-number v-model.number="scope.row.goodsSkuPrice" controls-position="right" :min="0" :precision="2" /> <el-input-number v-model.number="scope.row.goodsSkuPrice" controls-position="right" :min="0" :precision="2" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsSkuPrice" label="划线价格" width="145">
<template #default="scope">
<el-input-number v-model.number="scope.row.goodsSkuLinePrice" controls-position="right" :min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="goodsSkuPrice" label="库存数量" width="145">
<template #default="scope">
<el-input-number v-model.number="scope.row.goodsSkuStockNum" controls-position="right" :min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="goodsSkuPrice" label="商品重量 (KG)" width="145">
<template #default="scope">
<el-input-number v-model.number="scope.row.goodsSkuWeight" controls-position="right" :min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="goodsSkuPrice" label="SKU编码" width="145">
<template #default="scope">
<el-input v-model="scope.row.goodsSkuSkuCode" placeholder="" />
</template>
</el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
</template> </template>
@ -66,6 +90,14 @@
<script setup> <script setup>
import descartes from "./dikaerji"; import descartes from "./dikaerji";
const props = defineProps({
modelValue: Object,
});
watch(props, async (v) => {
goodsSpecList.value = v.modelValue.goodsSpecList;
skuList.value = v.modelValue.skuList;
});
/** 商品规格 业务参数 */ /** 商品规格 业务参数 */
@ -151,15 +183,18 @@ const getList = () => {
goodsGuid: 0, goodsGuid: 0,
specValueName: "", specValueName: "",
goodsSkuImg: "", goodsSkuImg: "",
goodsSkuSkuCode: 0, goodsSkuPrice: 0.01,
goodsSkuPrice: 0,
goodsSkuLinePrice: 0, goodsSkuLinePrice: 0,
goodsSkuStockNum: 0, goodsSkuStockNum: 0,
goodsSkuWeight: 0, goodsSkuWeight: 0,
goodsSkuSkuCode: "",
goodsSkuProps: "" goodsSkuProps: ""
}); });
}); });
props.modelValue.goodsSpecList = goodsSpecList.value
props.modelValue.skuList = skuList.value
getSpanArr(skuList.value); getSpanArr(skuList.value);
console.log(skuList.value, '表格中的数据'); console.log(skuList.value, '表格中的数据');
} }
@ -353,6 +388,7 @@ function handleDelSpec(item) {
const index = goodsSpecList.value.indexOf(item); const index = goodsSpecList.value.indexOf(item);
if (index > -1) { if (index > -1) {
goodsSpecList.value.splice(index, 1); goodsSpecList.value.splice(index, 1);
processing()
} }
if (goodsSpecList.value.length < 3) { if (goodsSpecList.value.length < 3) {
@ -400,6 +436,7 @@ function handleDelSpecValue(item, specValue) {
const index = item.props.indexOf(specValue); const index = item.props.indexOf(specValue);
if (index > -1) { if (index > -1) {
item.props.splice(index, 1); item.props.splice(index, 1);
processing()
} }
if (item.props.length < 50) { if (item.props.length < 50) {
@ -486,7 +523,7 @@ function handleDelSpecValue(item, specValue) {
} }
.el-input-number { .el-input-number {
width: 140px; width: 120px;
} }
:deep(.el-upload--picture-card) { :deep(.el-upload--picture-card) {
@ -494,4 +531,9 @@ function handleDelSpecValue(item, specValue) {
height: 90px; height: 90px;
} }
:deep(.el-upload-list--picture-card ) {
--el-upload-list-picture-card-size: 100px;
}
</style> </style>

75
src/views/business/GoodsManager/Goodss/index.vue
View File

@ -12,18 +12,18 @@
<!-- 搜索框 queryParams.需要搜索的字段 --> <!-- 搜索框 queryParams.需要搜索的字段 -->
<el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch" <el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch"
@submit.prevent> @submit.prevent>
<el-form-item label="店铺guid" prop="shopGuid"> <el-form-item label="店铺名称">
<el-input v-model.number="queryParams.shopGuid" placeholder="请输入店铺guid" clearable @keyup.enter="handleQuery" /> <el-input v-model.number="queryParams.shopName" placeholder="请输入店铺名称" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="商品类目guid" prop="goodsCategoryGuid"> <el-form-item label="商品类目guid" prop="goodsCategoryGuid">
<el-input v-model.number="queryParams.goodsCategoryGuid" placeholder="请输入商品类目guid" clearable <el-input v-model.number="queryParams.goodsCategoryGuid" placeholder="请输入选择商品类目" clearable
@keyup.enter="handleQuery" /> @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="goodsName"> <el-form-item label="商品名称" prop="goodsName">
<el-input v-model="queryParams.goodsName" placeholder="请输入名称" clearable @keyup.enter="handleQuery" /> <el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="编码" prop="goodsCoding"> <el-form-item label="商品编码" prop="goodsCoding">
<el-input v-model="queryParams.goodsCoding" placeholder="请输入编码" clearable @keyup.enter="handleQuery" /> <el-input v-model="queryParams.goodsCoding" placeholder="请输入商品编码" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button> <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
@ -59,23 +59,11 @@
</el-row> </el-row>
<!-- 表格渲染 prop="对应的字段"--> <!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row <el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column prop="goodsName" label="名称" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="goodsId" width="100" label="商品ID" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsCoding" label="编码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsMainImageVideo" label="主图视频" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsVideoCover" label="视频封面" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsVideoCover?.split(',')[0]" :preview-src-list="scope.row.goodsVideoCover?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsPicture" label="图片" align="center"> <el-table-column prop="goodsPicture" label="图片" align="center">
<template #default="scope"> <template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain" <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
@ -86,52 +74,17 @@
</el-image> </el-image>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsPriceLowest" label="价格(最低)" align="center" /> <el-table-column prop="goodsName" label="商品名称" width="500" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsPriceHighest" label="价格(最高)" align="center" /> <el-table-column prop="goodsPriceLowest" label="价格" align="center" />
<el-table-column prop="goodsDashedPriceLowest" label="划线价格(最低)" align="center" />
<el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
<el-table-column prop="goodsSalesInitial" label="初始销量" align="center" />
<el-table-column prop="goodsSalesActual" label="实际销量" align="center" /> <el-table-column prop="goodsSalesActual" label="实际销量" align="center" />
<el-table-column prop="goodsDetails" label="详情" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
<el-table-column prop="goodsDeductStockType" label="库存计算方式(1下单立减库存 2付款立减库存)" align="center"> <el-table-column prop="goodsShelfStatus" label="状态" align="center">
<template #default="scope">
<dict-tag :options="deduct_stock_type" :value="scope.row.goodsDeductStockType" />
</template>
</el-table-column>
<el-table-column prop="goodsIsPointsGift" label="是否赠送积分(1开启 0关闭)" align="center">
<template #default="scope">
<dict-tag :options="is_points_gift" :value="scope.row.goodsIsPointsGift" />
</template>
</el-table-column>
<el-table-column prop="goodsIsPointsDiscount" label="是否允许使用积分抵扣(1允许 0不允许)" align="center">
<template #default="scope">
<dict-tag :options="is_points_discount" :value="scope.row.goodsIsPointsDiscount" />
</template>
</el-table-column>
<el-table-column prop="goodsIsAlonePointsDiscount" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" align="center">
<template #default="scope">
<dict-tag :options="is_alone_points_discount" :value="scope.row.goodsIsAlonePointsDiscount" />
</template>
</el-table-column>
<el-table-column prop="goodsPointsDiscountConfig" label="单独设置积分抵扣的配置" align="center"
:show-overflow-tooltip="true" />
<el-table-column prop="goodsIsEnableGrade" label="是否开启会员折扣(1开启 0关闭)" align="center">
<template #default="scope">
<dict-tag :options="is_enable_grade" :value="scope.row.goodsIsEnableGrade" />
</template>
</el-table-column>
<el-table-column prop="goodsIsAloneGrade" label="会员折扣设置(0默认等级折扣 1单独设置折扣)" align="center">
<template #default="scope">
<dict-tag :options="is_alone_grade" :value="scope.row.goodsIsAloneGrade" />
</template>
</el-table-column>
<el-table-column prop="goodsAloneGradeEquity" label="单独设置折扣的配置" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsShelfStatus" label="上下架状态(1上架 2下架)" align="center">
<template #default="scope"> <template #default="scope">
<dict-tag :options="shelf_status" :value="scope.row.goodsShelfStatus" /> <dict-tag :options="shelf_status" :value="scope.row.goodsShelfStatus" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsSort" label="排序" align="center" /> <el-table-column prop="goodsSort" label="排序" align="center" />
<el-table-column prop="createTime" label="添加时间" align="center" />
<el-table-column label="操作" width="350" fixed="right"> <el-table-column label="操作" width="350" fixed="right">
<template #default="scope"> <template #default="scope">