Skip to content

S
soss
Commit 2cd42034 by 赵永成
Options

specification

parent f0d77dba
Showing with 199 additions and 158 deletions
src/views/goods/goods/components/Specification.vue
<template> <template>
<div> <div>
<el-dialog title="规格详情" :visible.sync="open" width="1000px" append-to-body> <el-dialog title="商品规格机器操作步骤详情" :visible.sync="open" width="1000px" append-to-body>
<el-table :data="special_tb_data" style="width: 100%" ref="special_tb" @row-click="specal_tb_row_click();"> <el-table :data="special_tb_data" style="width: 100%" ref="special_tb" @row-click="specal_tb_row_click();">
<el-table-column label="" type="expand"> <el-table-column label="" type="expand">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</el-table-column> </el-table-column>
<el-table-column label="商品名称" prop="goods_name" > <el-table-column label="商品名称" prop="goods_name" >
</el-table-column> </el-table-column>
<el-table-column label="商品规格" prop="spec_name"> <el-table-column label="商品规格" prop="sku_spec_name">
</el-table-column> </el-table-column>
<el-table-column label="机器型号" prop="model_name"> <el-table-column label="机器型号" prop="model_name">
</el-table-column> </el-table-column>
...@@ -52,139 +52,160 @@ export default { ...@@ -52,139 +52,160 @@ export default {
goods:{}, goods:{},
crowext:false, crowext:false,
special_tb_data:[], special_tb_data:[],
steps:[{ steps:[],
"step_key": 1,
"risc_id": 1,
"risc_code": 1,
"risc_desc": "取杯",
label:"取杯",
value: 1,
"turn": 1,
"model_id": 1,
"check": "radio",
"options": {"冷杯":1,"热杯":2},
"children":[ {label:"冷杯",value:1},{label:"热杯",value:2}]
},{
"step_key": 3,
"risc_id": 3,
"risc_code": 3,
"risc_desc": "加冰",
label:"加冰",
value: 3,
"turn": 3,
"model_id": 1,
"check": "radio",
"options": {"冰":86},
"children":[ {label:"冰",value:86}]
}],
queryParams:{}, queryParams:{},
mach_model_list:[] mach_model_list:[],
skuList:[]
} }
}, },
mounted:function(){ mounted:function(){
console.log("mounted mach_model_list");
this.spec_mach_model_list(); this.spec_mach_model_list();
}, },
methods: { methods: {
/**提前将商品信息传入 */ /**提前将商品信息传入 */
setSpecGoods(pgoods){ setSpecGoods(p_goods){
this.goods = pgoods; this.goods = p_goods;
console.log("pgoods ",this.goods);
},
findSpecNameById(p_specId){
let specList = JSON.parse(this.goods.spec);
let specName = '';
for(let i=0;i<specList.length;i++){
let specId = specList[i].id;
if(specId == p_specId){
specName = specList[i].name;
break;
}
}
return specName;
},
buildSkuSpecName(p_sku){
let strName = '';
for(let i=0;i<p_sku.length;i++){
strName +=p_sku[i].specName+":"+p_sku[i].spec_RuleName+"\n\r";
}
return strName;
}, },
/**打开规格详情配置，并初始化显示内容 */ /**打开规格详情配置，并初始化显示内容 */
async showSpecial(isShow,pgoods){ async showSpecial(isShow,p_goods){
console.log("111 "); console.log("111 ");
await this.getSkuByGoodsId(this.goods.id); /** 根据商品获取sku list； 按原型组装数据*/
await this.getSkuByGoodsId(this.goods.id).then((res)=>{
console.log("getSkuByGoodsId response 123",res);
let t_skuList = [];
for(let i=0;i<res.data.length;i++){
let sku = res.data[i];
let skuObj_ary = [];
let ruleList = JSON.parse(sku.ruleList);
for(let j=0;j<ruleList.length;j++){
let sku_spec_Obj = {};
let rule = ruleList[j];
let specName = this.findSpecNameById(rule.specId);
let spec_RuleName = rule.name;
sku_spec_Obj.specName=specName;
sku_spec_Obj.spec_RuleName = spec_RuleName;
skuObj_ary.push(sku_spec_Obj);
}
let skuObj = {};
skuObj.sku_id=sku.id;
skuObj.skuAry = skuObj_ary;
t_skuList.push(skuObj);
}
this.skuList = t_skuList;
});
console.log("333 "); console.log("333 ");
// 样例 console.log("this.skuList ",this.skuList );
// {
// "goods_code":"G169", console.log("mach_model_list ",this.mach_model_list );
// "goods_name":"青提茉莉", // sku，和机器型号可能的数据放到一个数组里，后续只循环一个数组即可，也为方法抽取提供条件；
// "spec_code":"PS239", let t_special_tb_data=[]
// "spec_name":"糖度", for(let i=0;i<this.skuList.length;i++){
// "model_name":"HY001001", let skuObj = this.skuList[i];
// "tb_steps":[{
// "step_lab":"步骤1",
// "step_akv":[]
// }]
// }
//商品规格，和机器型号组合
let spec_str = pgoods.spec;
let spec = JSON.parse(spec_str);
for(let i=0;i<spec.length;i++){
for(let j=0;j<this.mach_model_list.length;j++){ for(let j=0;j<this.mach_model_list.length;j++){
let spec_model = { let mach_mode = this.mach_model_list[j];
"goods_code":pgoods.code, let tb_data_item = {};
"goods_name":pgoods.name, tb_data_item.mach_mode=mach_mode;
"spec_id":spec[i].id, tb_data_item.sku = skuObj;
"spec_code":spec[i].code, let strName = this.buildSkuSpecName(skuObj.skuAry);
"spec_name":spec[i].name, let sku_spec_model = {
"model_name":this.mach_model_list[j].model_name, "goods_code":p_goods.code,
"model_id":this.mach_model_list[j].id, "goods_name":p_goods.name,
"sku_id":skuObj.sku_id,
"sku_spec_name":strName,
"model_name":mach_mode.model_name,
"model_id":mach_mode.id,
"tb_steps":[{ "tb_steps":[{
"step_lab":"步骤1", "step_lab":"步骤1",
"step_akv":[] "step_akv":[]
},{
"step_lab":"步骤2",
"step_akv":[]
}], }],
"step_opts":[] "step_opts":[]
} }
sku_spec_model.mach_mode=mach_mode;
let that =this; sku_spec_model.sku = skuObj;
//理论上，初始化时根据规格和型号获取可能的步骤会比较靠谱，省的以后步骤不一样用同一个数据源麻烦；
//this.spec_mach_step_list(spec_model.model_id,spec_model.spec_id);
//this.spec_mach_step_list(spec_model.model_id,2823);
//this.queryParams={model_id:spec_model.model_id,sku_id:spec_model.spec_id};
this.queryParams={model_id:spec_model.model_id,sku_id:2823};//2823 测试数据，有数据。。。
///获取可能的步骤
list_step(this.queryParams).then((response) => {
//将步骤list转换为下拉框能识别的数组；
//样例
// {
// "step_key": 1,
// "risc_id": 1,
// "risc_code": 1,
// "risc_desc": "取杯",
// label:"取杯",
// value: 1,
// "turn": 1,
// "model_id": 1,
// "check": "radio",
// "options": {"冷杯":1,"热杯":2},
// "children":[ {label:"冷杯",value:1},{label:"热杯",value:2}]
// }
let step_opts = [];
for(let obj in response.data){
//console.log(obj,spec_model.step_list[obj]);
let step_obj = {};
step_obj = response.data[obj];
step_obj.step_key = obj;
step_obj.label = step_obj.risc_desc
step_obj.value = step_obj.risc_id
let children = [];
let childrenObj = {};
let options = JSON.parse(step_obj.options);
for(let opt in options){
childrenObj = {};
childrenObj.label = opt;
childrenObj.value = options[opt];
children.push(childrenObj);
}
step_obj.children = children
step_opts.push(step_obj);
}
spec_model.step_opts = step_opts;
that.special_tb_data.push(spec_model);
//显示窗体 t_special_tb_data.push(sku_spec_model);
that.open = isShow
//this.initStepData();
});
} }
} }
/** sku，和机器型号 获取可能的步骤*/
for(let i=0;i<t_special_tb_data.length;i++){
let spec_sku_item = t_special_tb_data[i];
// sku，和机器型号可能的数据；
let queryParams = {model_id:spec_sku_item.model_id,sku_id:spec_sku_item.sku_id}
/**
* 注意！！！
* 可能的操作步骤是根据机器以及sku来获取的，当sku多的时候会循环多次向后台请求
* 当前采用同步方式，会比较慢。
* 先调试完成，再试试异步加载数据是否可行 / 或者如果数据都一样是不是用一份即可！！！
*/
//这个判断是先用一份数据
if(this.steps.length==0){
await this.getStepListByMidAndSkuId(queryParams).then((res)=>{
console.log("res",res);
let step_opts = [];
for(let obj in res.data){
//console.log(obj,spec_model.step_list[obj]);
let step_obj = {};
step_obj = res.data[obj];
step_obj.step_key = obj;
step_obj.label = step_obj.risc_desc
step_obj.value = step_obj.risc_id
let children = [];
let childrenObj = {};
let options = JSON.parse(step_obj.options);
for(let opt in options){
childrenObj = {};
childrenObj.label = opt;
childrenObj.value = options[opt];
children.push(childrenObj);
}
step_obj.children = children
step_opts.push(step_obj);
}
console.log("step_opts",step_opts);
this.steps = step_opts;
});
}else{
}
//还是要每个个对象里面加上可选步骤，以后即时改动，也不用调整页面模板，只需要调整js脚本
spec_sku_item.step_opts = this.steps;
}
this.special_tb_data = t_special_tb_data;
console.log("this.special_tb_data ",this.special_tb_data);
console.log("666 ");
//回显历史数据
this.get_step_data();
//显示窗体
this.open = isShow
}, },
closeSpecial(tag){ closeSpecial(tag){
//检查有需要保存的项未提交，则提示是否确定关闭 //检查有需要保存的项未提交，则提示是否确定关闭
...@@ -194,73 +215,93 @@ export default { ...@@ -194,73 +215,93 @@ export default {
openSpecial(tag){ openSpecial(tag){
this.open = true; this.open = true;
}, },
/** 规格详情配置窗体初始化数据，如果已经有配置数据则获取*/
initAll(){ /**获取商品对应的sku list 组装数据结构供页面显示，使用同步加载，避免数据回显不正常*/
this.get_step_data();
},
/**获取商品对应的sku list 组装数据结构供页面显示，*/
// getSkuByGoodsId(goodsId){
// list_sku_byGoodsId(goodsId).then((response) => {
// console.log("getSkuByGoodsId response",response);
// console.log("222 ");
// }).catch((response) => {
// console.log("getSkuByGoodsId error",response);
// console.log("222 e");
// });
// },
getSkuByGoodsId(goodsId){ getSkuByGoodsId(goodsId){
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
list_sku_byGoodsId(goodsId).then((response) => {
list_sku_byGoodsId(goodsId).then((response) => {
console.log("getSkuByGoodsId response",response);
console.log("222 "); console.log("222 ");
resolve(response); resolve(response);
}).catch((response) => { }).catch((response) => {
console.log("getSkuByGoodsId error",response); console.log("getSkuByGoodsId error",response);
console.log("222 e"); console.log("222 e");
reject(response); reject(response);
}); });
});
},
/**可选制作步骤 list 组装数据结构供页面显示，使用同步加载，避免数据回显不正常*/
getStepListByMidAndSkuId(p_queryParams){
return new Promise((resolve,reject)=>{
list_step(p_queryParams).then((response) => {
console.log("getStepListByMidAndSkuId 555 ");
resolve(response);
}).catch((response) => {
console.log("getStepListByMidAndSkuId 555 error",response);
reject(response);
});
}); });
}, },
/**获取已保存的步骤数据 */ /**获取已保存的步骤数据 */
get_step_data(){ get_step_data(){
console.log("get_step_data goods",this.goods);
this.queryParams={goods_id:this.goods.id}; this.queryParams={goods_id:this.goods.id};
//测试数据也不好使
// this.queryParams={goods_id:152};
list_data_spec_step(this.queryParams).then((response) => { list_data_spec_step(this.queryParams).then((response) => {
console.log("get_step_data response",response); this.initStepData(response);
}).catch((response) => { }).catch((response) => {
console.log("get_step_data error",response); console.log("get_step_data error",response);
}); });
//数据返回后调用下面的方法
this.initStepData(); },
findSkuById(p_skuid,p_modelid){
let tb_data = null;
for(let i=0;i<this.special_tb_data.length;i++){
let tb_item = this.special_tb_data[i];
if(p_skuid == tb_item.sku_id && p_modelid==tb_item.model_id ){
tb_data = tb_item;
break;
}
}
return tb_data;
}, },
/**初始化已保存的步骤数据 */ /**初始化已保存的步骤数据 */
initStepData(pata){ initStepData(pres){
console.log("initStepData response",pres);
//将后台返回的已保存的步骤数据初始化到数据结构里 //将后台返回的已保存的步骤数据初始化到数据结构里
console.log("this.special_tb_data",this.special_tb_data); //返回的数据是商品的所有sku的配置，需要循环对应后，把数据初始化；
//tb_steps,将数据填充到tb_steps，如果没值则填充默认值 for(let i=0;i<pres.data.length;i++){
let tb_steps = this.special_tb_data.tb_steps; let item = pres.data[i];
if(true){ let tb_data = this.findSkuById(item.sku_id,item.model_id);
tb_steps = []; console.log("initStepData tb_data",tb_data);
tb_steps.push({step_lab:"步骤1",step_akv:[1,1]}) let step_data = item.data;
tb_steps.push({step_lab:"步骤2",step_akv:[3,84]}) console.log("initStepData step_data",step_data);
}else{ let tb_steps = tb_data.tb_steps;
tb_steps = [{ console.log("initStepData tb_steps",tb_steps);
//如果返回的步骤有数据，则情况初始化默认的一个步骤，将回显步骤赋值
if(step_data && step_data.length>0){
tb_steps = [];
for(let j=0;j<step_data.length;j++){
let step_item = step_data[j];
let step_num="步骤"+(j+1);
let step_akv=[];
step_akv.push(step_item.risc_code);
step_akv.push(step_item.result);
tb_steps.push({'step_lab':step_num,'step_akv':step_akv})
}
}else{
tb_steps = [{
"step_lab":"步骤1", "step_lab":"步骤1",
"step_akv":[] "step_akv":[]
}] }]
}
tb_data.tb_steps = tb_steps;
console.log("initStepData tb_data.tb_steps 2",tb_data.tb_steps);
} }
this.special_tb_data.tb_steps = tb_steps
this.open = true;
//
}, },
/**列表操作 */ /**列表操作 */
specal_opt(pindex,prow,tag){ specal_opt(pindex,prow,tag){
...@@ -321,11 +362,12 @@ export default { ...@@ -321,11 +362,12 @@ export default {
let step_obj = {} let step_obj = {}
let t_step = prow.tb_steps[i]; let t_step = prow.tb_steps[i];
//填充对应的值 //填充对应的值
step_obj.sku_id = prow.spec_id; step_obj.sku_id = prow.sku_id;
step_obj.model_id = prow.model_id; step_obj.model_id = prow.model_id;
step_obj = this.fillStepById(step_obj,t_step,prow); step_obj = this.fillStepById(step_obj,t_step,prow);
step_ary.push(step_obj); step_ary.push(step_obj);
} }
console.log("step_ary ",step_ary);
//提交到后台 //提交到后台
add_spec_step(step_ary).then((response) => { add_spec_step(step_ary).then((response) => {
console.log("response ",response); console.log("response ",response);
...@@ -337,7 +379,7 @@ export default { ...@@ -337,7 +379,7 @@ export default {
/**删除步骤 */ /**删除步骤 */
spec_step_del(prow){ spec_step_del(prow){
console.log("prow ",prow); console.log("prow ",prow);
this.queryParams={sku_id:prow.spec_id,model_id:prow.model_id}; this.queryParams={sku_id:prow.sku_id,model_id:prow.model_id};
//提交到后台 //提交到后台
del_spec_step(this.queryParams).then((response) => { del_spec_step(this.queryParams).then((response) => {
......
src/views/goods/goods/index.vue
...@@ -254,8 +254,7 @@ export default { ...@@ -254,8 +254,7 @@ export default {
this.$refs.Specification.showSpecial(true,prow) this.$refs.Specification.showSpecial(true,prow)
//this.$refs.Specification.initAll();
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment