zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

规格项修改

master
mabo 2021-06-24 15:56:20 +08:00
parent f8f205d0e8
commit 39fd76ebdc
3 changed files with 95 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@ -151,7 +151,7 @@ export default {
count: 1, // 商品数量 count: 1, // 商品数量
imgIndex: 0, // 展示图片下标 imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku currentSelceted: [], // 当前商品sku
imgList: this.detail.data.specList[0].specImage, // 商品图片列表 imgList: this.detail.data.specList[0].specImage || [], // 商品图片列表
skuDetail: this.detail.data, // sku详情 skuDetail: this.detail.data, // sku详情
goodsSpecList: this.detail.specs, // 商品spec goodsSpecList: this.detail.specs, // 商品spec
promotionMap: { // 活动状态 promotionMap: { // 活动状态

16
seller/src/api/goods.js
View File

@ -215,13 +215,13 @@ export const getSkuPage = params => {
}; };
// 获取商品规格值列表 // 获取商品规格值列表
export const getSpecValuesListSellerData = (id, params) => { // export const getSpecValuesListSellerData = (id, params) => {
return getRequest(`/goods/spec-values/values/${id}`, params); // return getRequest(`/goods/spec-values/values/${id}`, params);
}; // };
// 添加商品规格值 // 添加商品规格值
export const saveSpecValuesSeller = (id, params) => { // export const saveSpecValuesSeller = (id, params) => {
return postRequest(`/goods/spec-values/save/${id}`, params); // return postRequest(`/goods/spec-values/save/${id}`, params);
}; // };
// 获取商品规格分页列表 // 获取商品规格分页列表
export const getSpecListSellerData = params => { export const getSpecListSellerData = params => {
@ -312,8 +312,8 @@ export const getCategoryParamsListDataSeller = (id, params) => {
}; };
//保存获取关联规格 //保存获取关联规格
export const getGoodsSpecInfoSeller = (category_id, params) => { export const getGoodsSpecInfoSeller = (category_id) => {
return getRequest(`/goods/spec/${category_id}`, params); return getRequest(`/goods/spec/${category_id}`);
}; };
//批量设置运费模板 //批量设置运费模板

196
seller/src/views/goods/goods-seller/goodsOperation.vue
View File

@ -185,29 +185,33 @@
<div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index"> <div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index">
<Card :bordered="true"> <Card :bordered="true">
<FormItem label="规格名：" class="sku-item-content-name"> <FormItem label="规格名：" class="sku-item-content-name">
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30" :data="specListSelected" placeholder="请输入规格项名称" /> <AutoComplete style="width: 150px" v-model="item.name" :maxlength="30" placeholder="请输入规格项名称"
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除 :filter-method="filterMethod" :data="skuData"
</Button> @on-change="editSkuItem">
</AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除</Button>
</FormItem> </FormItem>
<FormItem label="规格值：" prop="sku"> <FormItem label="规格值：" prop="sku">
<!--规格值文本列表--> <!--规格值文本列表-->
<div v-for="(val, index) in item.spec_values" :key="index" style="padding: 0px 20px 10px 0px; float: left"> <div v-for="(val, index) in item.spec_values" :key="index" style="padding: 0px 20px 10px 0px; float: left">
<div> <div>
<AutoComplete style="width: 150px; float: left" v-model="val.value" :maxlength="30" :data="skuValue" placeholder="请输入规格值名称"></AutoComplete> <AutoComplete style="width: 150px; float: left" v-if="skuValVisible" v-model="val.value" :maxlength="30" placeholder="请输入规格值名称"
<Button type="error" style="float: left; margin-left: 10px" @click="handleCloseSkuValue($index, index)">删除</Button> :filter-method="filterMethod" :data="skuVal" @on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)">删除</Button>
</div> </div>
</div> </div>
<div style="float: left"> <div style="float: left">
<Button type="primary" @click="addSpec($index, item)">添加规格值 <Button type="primary" @click="addSpec($index, item)">添加规格值</Button>
</Button>
</div> </div>
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
</Form> </Form>
<Button class="add-sku-btn" type="primary" size="mini" @click="addSkuItem">添加规格项目 <Button class="add-sku-btn" type="primary" size="mini" @click="addSkuItem">添加规格项目</Button>
</Button>
</div> </div>
</Panel> </Panel>
<Panel name="2"> <Panel name="2">
@ -523,7 +527,6 @@ export default {
check: false, check: false,
}, },
], ],
show: "1",
//提交状态 //提交状态
submitLoading: false, submitLoading: false,
//上传图片路径 //上传图片路径
@ -616,8 +619,9 @@ export default {
brandId: 0, brandId: 0,
/** 计量单位 **/ /** 计量单位 **/
goodsUnit: "", goodsUnit: "",
/** 商品类型 **/
goodsType: "", goodsType: "",
/** 路径 **/ /** 分类路径 **/
categoryPath: "", categoryPath: "",
/** 商品卖点 **/ /** 商品卖点 **/
sellingPoint: "", sellingPoint: "",
@ -637,47 +641,20 @@ export default {
/** 表格数据 */ /** 表格数据 */
skuTableData: [], skuTableData: [],
/** 请求数据*/ /** 默认的规格参数 */
skuData: [], skuData: [],
/** 当前可选择的 规格名称*/ /** 默认的规格值 */
skuKey: [], skuVals: [],
// 某一规格名下的规格值
/** 当前可选择的 规格值*/ skuVal: [],
skuValue: [],
open_panel: [1, 2], open_panel: [1, 2],
/** 要提交的规格数据*/ /** 要提交的规格数据*/
skuInfo: [], skuInfo: [],
/** 当前选择的规格项*/
specSelected: "",
/** 当前选择的规格值*/
specValSelected: "",
/** 当前规格项下的规格值列表*/
specListSelected: [],
/** 当前规格项下的规格值列表*/
specList: [],
/** 当前规格项索引 */
activeSkuItemIndex: 0,
/** 当前规格项 */
activeSkuItem: {},
/** 规格图片 */ /** 规格图片 */
images: [], images: [],
/** 当前规格值索引 */
activeSkuValIndex: 0,
/** 当前规格值 */
activeSkuVal: {},
/** 当前百分比 */
currentPercent: 0,
/** 运费模板 **/ /** 运费模板 **/
logisticsTemplate: [], logisticsTemplate: [],
@ -738,6 +715,7 @@ export default {
"specId", "specId",
"specValueId", "specValueId",
], ],
skuValVisible: true,
}; };
}, },
@ -757,6 +735,7 @@ export default {
this.goodsId = this.$route.query.id; this.goodsId = this.$route.query.id;
this.GET_GoodData(); this.GET_GoodData();
this.selectGoodsType = false; this.selectGoodsType = false;
} }
//编辑模版 //编辑模版
else if (this.$route.query.draftId) { else if (this.$route.query.draftId) {
@ -937,7 +916,7 @@ export default {
} }
return !check; return !check;
}, },
// 跳转商品列表
gotoGoodsList() { gotoGoodsList() {
this.$router.push({ name: "goods" }); this.$router.push({ name: "goods" });
}, },
@ -981,6 +960,7 @@ export default {
} }
}); });
}, },
// 编辑时获取商品信息
async GET_GoodData() { async GET_GoodData() {
let response = {}; let response = {};
if (this.draftId) { if (this.draftId) {
@ -1006,6 +986,8 @@ export default {
this.activeCategoryName3 = response.result.categoryName[2]; this.activeCategoryName3 = response.result.categoryName[2];
this.baseInfoForm.categoryId = response.result.categoryPath.split(","); this.baseInfoForm.categoryId = response.result.categoryPath.split(",");
if ( if (
response.result.goodsGalleryList && response.result.goodsGalleryList &&
response.result.goodsGalleryList.length > 0 response.result.goodsGalleryList.length > 0
@ -1019,6 +1001,8 @@ export default {
this.categoryId = this.baseInfoForm.categoryId[2]; this.categoryId = this.baseInfoForm.categoryId[2];
this.Get_SkuInfoByCategory(this.categoryId)
this.renderGoodsDetailSku(response.result.skuList); this.renderGoodsDetailSku(response.result.skuList);
/** 查询品牌列表 */ /** 查询品牌列表 */
@ -1029,7 +1013,7 @@ export default {
this.GET_ShopGoodsLabel(); this.GET_ShopGoodsLabel();
this.GET_GoodsUnit(); this.GET_GoodsUnit();
}, },
// 渲染sku数据
renderGoodsDetailSku(skuList) { renderGoodsDetailSku(skuList) {
let skus = []; let skus = [];
let skusInfo = []; let skusInfo = [];
@ -1151,16 +1135,31 @@ export default {
*/ */
this.renderTableData(); this.renderTableData();
}, },
async GET_SkuSpecVal(id) { // 编辑规格名
let specValResult = await API_GOODS.getSpecValuesListSellerData(id, { editSkuItem () {
pageNumber: 1, this.renderTableData();
pageSize: 10, },
specVal: this.specValSelected, // 编辑规格值
}); async skuValueChange(val, index, item) {
if (specValResult.success && specValResult.result.records.length > 0) { /** 更新skuInfo数据 */
this.skuValue = specValResult.result.records.map((i) => i.specValue); let _arr = cloneObj(item);
} else { this.$set(item, "name", _arr.name);
this.skuValue = []; this.$set(this.skuInfo, index, _arr);
/**
* 渲染规格详细表格
*/
this.renderTableData();
},
// 获取焦点时，取得规格名对应的规格值
changeSkuVals (name) {
if (name) {
this.skuData.forEach((e, index) => {
if (e === name) {
if (this.skuVal.length != this.skuVals[index].length) {
this.skuVal = this.skuVals[index]
}
}
})
} }
}, },
/** 移除当前规格项 进行数据变化*/ /** 移除当前规格项 进行数据变化*/
@ -1171,6 +1170,7 @@ export default {
*/ */
this.renderTableData(); this.renderTableData();
}, },
// 添加规格值的验证
validateEmpty(params) { validateEmpty(params) {
let flag = true; let flag = true;
params.forEach((item) => { params.forEach((item) => {
@ -1187,16 +1187,15 @@ export default {
}, },
/** 添加当前规格项的规格值*/ /** 添加当前规格项的规格值*/
addSpec($index, item) { addSpec($index, item) {
this.activeSkuItemIndex = $index;
if (this.validateEmpty(this.skuInfo[$index].spec_values)) { if (this.validateEmpty(item.spec_values)) {
if (this.skuInfo[$index].spec_values.length >= 10) { if (item.spec_values.length >= 10) {
this.$Message.error("规格值不能大于10个！"); this.$Message.error("规格值不能大于10个！");
return; return;
} }
this.$set( this.$set(
this.skuInfo[$index].spec_values, item.spec_values,
this.skuInfo[$index].spec_values.length, item.spec_values.length,
{ {
name: item.name, name: item.name,
} }
@ -1208,21 +1207,10 @@ export default {
this.renderTableData(); this.renderTableData();
} }
}, },
/**
* 根据规格项名称，搜索对应的规格对象（如果是服务器设置过的话）
*/
findSpec(name) {
let spec = { name: name };
this.skuData.forEach((item) => {
if (item.name === name) {
spec = item;
}
});
return spec;
},
/** 移除当前规格值 */ /** 移除当前规格值 */
handleCloseSkuValue($index, index) { handleCloseSkuValue(item, index) {
this.skuInfo[$index].spec_values.splice(index, 1); item.spec_values.splice(index, 1);
this.baseInfoForm.regeneratorSkuFlag = true; this.baseInfoForm.regeneratorSkuFlag = true;
/** /**
@ -1230,19 +1218,7 @@ export default {
*/ */
this.renderTableData(); this.renderTableData();
}, },
/** 选择规格值时触发 */
async skuValueChange(val, index, item) {
this.specValSelected = val;
await this.GET_SkuSpecVal(item.spec_id);
/** 更新skuInfo数据 */
let _arr = cloneObj(this.skuInfo[this.activeSkuItemIndex]);
this.$set(this.skuInfo[this.activeSkuItemIndex], "name", _arr.name);
this.$set(this.skuInfo, this.activeSkuItemIndex, _arr);
/**
* 渲染规格详细表格
*/
this.renderTableData();
},
/** /**
* 渲染table所需要的column 和 data * 渲染table所需要的column 和 data
*/ */
@ -1310,35 +1286,34 @@ export default {
}); });
cloneTemp.splice(0, 1); cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp); result = this.specIterator(result, cloneTemp);
result = this.defaultParams(result); // result = this.defaultParams(result);
this.skuTableData = result; this.skuTableData = result;
} }
}, },
/** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) {
if (categoryId) {
API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => {
if(res.length) {
res.forEach(e => {
this.skuData.push(e.specName)
this.skuVals.push(e.specValue ? e.specValue.split(',') : [])
})
}
}
);
}
},
/** 自动完成表单所需方法*/ /** 自动完成表单所需方法*/
filterMethod(value, option) { filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1; return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}, },
/** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory() {
if (this.baseInfoForm.categoryId) {
API_GOODS.getGoodsSpecInfoSeller(this.baseInfoForm.categoryId, {}).then(
(response) => {
this.skuData = response;
if (this.skuData.length > 0) {
this.skuData.forEach((spec) => {
this.skuKey.push(spec.name);
});
}
}
);
}
},
/** /**
* 添加固有属性 * 添加固有属性
*/ */
defaultParams(tableData) { // defaultParams(tableData) {
return tableData; // return tableData;
}, // },
/** /**
* 迭代属性，形成表格 * 迭代属性，形成表格
* result 渲染的数据 * result 渲染的数据
@ -1367,6 +1342,7 @@ export default {
} }
return this.specIterator(result, cloneTemp); return this.specIterator(result, cloneTemp);
}, },
// 规格表格操作
handleSpan({ row, column, rowIndex, columnIndex }) {}, handleSpan({ row, column, rowIndex, columnIndex }) {},
/** 数据改变之后 抛出数据 */ /** 数据改变之后 抛出数据 */
updateSkuTable(row, item) { updateSkuTable(row, item) {
@ -1454,7 +1430,7 @@ export default {
/** 查询品牌列表 */ /** 查询品牌列表 */
this.getGoodsBrandList(); this.getGoodsBrandList();
/** 查询分类绑定的规格信息 */ /** 查询分类绑定的规格信息 */
this.Get_SkuInfoByCategory(); this.Get_SkuInfoByCategory(this.baseInfoForm.categoryId);
// 获取商品单位 // 获取商品单位
this.GET_GoodsUnit(); this.GET_GoodsUnit();
// 获取当前店铺分类 // 获取当前店铺分类
@ -1485,6 +1461,7 @@ export default {
this.loading = false; this.loading = false;
if (this.activestep++ > 2) return; if (this.activestep++ > 2) return;
}, },
// 店内分类选择
selectTree(v) { selectTree(v) {
if (v.length > 0) { if (v.length > 0) {
// 转换null为"" // 转换null为""
@ -1499,6 +1476,7 @@ export default {
this.editTitle = menu.title; this.editTitle = menu.title;
} }
}, },
// 店内分类选中
changeSelect(v) { changeSelect(v) {
this.selectCount = v.length; this.selectCount = v.length;
let ids = ""; let ids = "";
@ -1581,7 +1559,7 @@ export default {
} }
}); });
}, },
/** 保存至草稿箱 */ /** 保存为模板 */
saveToDraft(saveType) { saveToDraft(saveType) {
let showType = saveType === "TEMPLATE" ? "模版" : "草稿"; let showType = saveType === "TEMPLATE" ? "模版" : "草稿";
this.baseInfoForm.skuList = this.skuTableData; this.baseInfoForm.skuList = this.skuTableData;
@ -1629,7 +1607,7 @@ export default {
}, },
}); });
}, },
SAVE_DRAFT_GOODS() { // 保存草稿商品 SAVE_DRAFT_GOODS() { // 保存模板
API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => { API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
if (res.success) { if (res.success) {
this.$Message.info("保存成功！"); this.$Message.info("保存成功！");