diff --git a/src/views/goods/goods/components/SpecSetting.vue b/src/views/goods/goods/components/SpecSetting.vue new file mode 100644 index 0000000..63df471 --- /dev/null +++ b/src/views/goods/goods/components/SpecSetting.vue @@ -0,0 +1,445 @@ +<template> + <div> + <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-column label="" type="expand"> + <template slot-scope="scope"> + <el-form label-position="left" inline> + <el-row v-for="(step,step_idx) in scope.row.tb_steps" :key=step_idx style="margin-top:5px;" > + <span>{{step.step_lab}}:</span> + + <el-cascader :options="scope.row.step_opts" v-model="step.step_akv" style="margin-left:10px"></el-cascader> + + <el-button @click.prevent="spec_add_step(scope.row)" style="margin-left:10px">增加步骤</el-button> + + </el-row> + </el-form> + </template> + </el-table-column> + <el-table-column label="商品名称" prop="goods_name" > + </el-table-column> + <el-table-column label="商品规格" prop="sku_spec_name"> + </el-table-column> + <el-table-column label="机器型号" prop="model_name"> + </el-table-column> + <el-table-column label="操作" > + <template slot-scope="scope"> + <el-button @click="specal_opt(scope.$index,scope.row,'view_step')" type="text" size="small"> 查看步骤 </el-button> + <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'save')" type="text" size="small"> 保存 </el-button> + <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'del')" type="text" size="small"> 删除 </el-button> + <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'restore')" type="text" size="small"> 恢复 </el-button> + </template> + </el-table-column> + </el-table> + <div slot="footer" class="dialog-footer"> + <el-button @click="closeSpecial('cancel');">取 消</el-button> + <el-button type="primary" @click="closeSpecial('confim');">确 定</el-button> + </div> + </el-dialog> + </div> +</template> +<script> +import { list_machine_model,list_step,add_spec_step,list_data_spec_step,del_spec_step,list_sku_byGoodsId } from "@/api/system/specification.js"; +import { stringify } from "querystring"; +export default { + props: { + }, + data() { + + return{ + open:false, + goods:{}, + crowext:false, + special_tb_data:[], + steps:[], + queryParams:{}, + mach_model_list:[], + skuList:[] + } + }, + mounted:function(){ + console.log("mounted mach_model_list"); + this.spec_mach_model_list(); + }, + methods: { + /**提前将商品信息传入 */ + setSpecGoods(p_goods){ + 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,p_goods){ + + console.log("111 "); + /** 根据商品获取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("this.skuList ",this.skuList ); + + console.log("mach_model_list ",this.mach_model_list ); + // sku,和机器型号可能的数据放到一个数组里,后续只循环一个数组即可,也为方法抽取提供条件; + let t_special_tb_data=[] + for(let i=0;i<this.skuList.length;i++){ + let skuObj = this.skuList[i]; + for(let j=0;j<this.mach_model_list.length;j++){ + let mach_mode = this.mach_model_list[j]; + let tb_data_item = {}; + tb_data_item.mach_mode=mach_mode; + tb_data_item.sku = skuObj; + let strName = this.buildSkuSpecName(skuObj.skuAry); + let sku_spec_model = { + "goods_code":p_goods.code, + "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":[{ + "step_lab":"步骤1", + "step_akv":[] + }], + "step_opts":[] + } + + sku_spec_model.mach_mode=mach_mode; + sku_spec_model.sku = skuObj; + + t_special_tb_data.push(sku_spec_model); + } + } + + + + /** 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){ + //检查有需要保存的项未提交,则提示是否确定关闭 + //TODO + this.open = false; + }, + openSpecial(tag){ + this.open = true; + }, + + /**获取商品对应的sku list 组装数据结构供页面显示,使用同步加载,避免数据回显不正常*/ + getSkuByGoodsId(goodsId){ + return new Promise((resolve,reject)=>{ + list_sku_byGoodsId(goodsId).then((response) => { + console.log("222 "); + resolve(response); + }).catch((response) => { + console.log("getSkuByGoodsId error",response); + console.log("222 e"); + 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(){ + this.queryParams={goods_id:this.goods.id}; + list_data_spec_step(this.queryParams).then((response) => { + this.initStepData(response); + }).catch((response) => { + console.log("get_step_data error",response); + }); + + + }, + 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(pres){ + console.log("initStepData response",pres); + //将后台返回的已保存的步骤数据初始化到数据结构里 + //返回的数据是商品的所有sku的配置,需要循环对应后,把数据初始化; + for(let i=0;i<pres.data.length;i++){ + let item = pres.data[i]; + let tb_data = this.findSkuById(item.sku_id,item.model_id); + console.log("initStepData tb_data",tb_data); + let step_data = item.data; + console.log("initStepData step_data",step_data); + let tb_steps = tb_data.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_akv":[] + }] + } + tb_data.tb_steps = tb_steps; + console.log("initStepData tb_data.tb_steps 2",tb_data.tb_steps); + } + + }, + /**列表操作 */ + specal_opt(pindex,prow,tag){ + if(tag == "view_step"){ + this.crowext = !this.crowext; + this.$refs.special_tb.toggleRowExpansion(prow,this.crowext) + + console.log("click view step"); + } + if(tag == "save"){ + console.log("special_tb_data",this.special_tb_data); + this.spec_step_save(prow); + } + + if(tag == "del"){ + this.spec_step_del(prow); + } + + }, + specal_tb_row_click(r,c,e){ + // this.testPromic(1,2823).then((response) => { + // console.log("xxxx",response); + // console.log("spec_mach_step_list",3) + // }); + // console.log("spec_mach_step_list",2) + }, + spec_add_step(prow){ + let step_i = prow.tb_steps.length+1 + prow.tb_steps.push({ + "step_lab":"步骤"+step_i, + "step_akv":[] + } + ); + }, + /**获取机型列表 */ + spec_mach_model_list(){ + if(this.mach_model_list.length==0){ + this.queryParams={}; + list_machine_model(this.queryParams).then((response) => { + this.mach_model_list = response.data; + }); + } + }, + /**保存步骤 */ + spec_step_save(prow){ + // { + // "sku_id": 1, + // "risc_id": 1, + // "risc_code": 1, + // "risc_desc": "取杯", + // "turn": 1, + // "model_id": 1, + // "result": 1 + // } + let step_ary = []; + + for(let i=0;i<prow.tb_steps.length;i++){ + let step_obj = {} + let t_step = prow.tb_steps[i]; + //填充对应的值 + step_obj.sku_id = prow.sku_id; + step_obj.model_id = prow.model_id; + step_obj = this.fillStepById(step_obj,t_step,prow); + step_ary.push(step_obj); + } + console.log("step_ary ",step_ary); + //提交到后台 + add_spec_step(step_ary).then((response) => { + console.log("response ",response); + }).catch((response) => { + console.log("error ",response); + }); + + }, + /**删除步骤 */ + spec_step_del(prow){ + console.log("prow ",prow); + this.queryParams={sku_id:prow.sku_id,model_id:prow.model_id}; + + //提交到后台 + del_spec_step(this.queryParams).then((response) => { + console.log("response del_spec_step",response); + }).catch((response) => { + console.log("error del_spec_step",response); + }); + + }, + + fillStepById(step_obj,t_step,prow){ + //TODO + console.log("step_obj",step_obj); + console.log("t_step",t_step); + console.log("prow",prow); + let step_ak = t_step.step_akv[0]; + let step_av = t_step.step_akv[1]; + step_obj.result=step_av; + for(let i=0;i<prow.step_opts.length;i++){ + let step_opt = prow.step_opts[i]; + if(step_opt.value == step_ak){ + step_obj.risc_id = step_opt.risc_id + step_obj.risc_code =step_opt.risc_code + step_obj.risc_desc=step_opt.risc_desc + step_obj.turn=step_opt.turn + // for(let j=0;j<step_opt.children.length;j++){ + // if(step_opt.children[j].value == step_av){ + // step_obj.result=step_av + // break; + // } + // } + + break; + } + } + return step_obj; + }, + /**获取可能的步骤 */ + spec_mach_step_list(model_id,sku_id){ + this.queryParams={model_id:model_id,sku_id:sku_id}; + list_step(this.queryParams).then((response) => { + console.log("response",response); + }); + }, + testPromic(model_id,sku_id){ + var param={model_id:model_id,sku_id:sku_id}; + return new Promise( + function(resolve,reject){ + list_step(param).then((response) => { + resolve(response); + }); + } + ).then(function(res){ + return res; + }).catch(function(cat){ + return cat + }) + } + + } + +} +</script> \ No newline at end of file diff --git a/src/views/goods/goods/components/Specification.vue b/src/views/goods/goods/components/Specification.vue index 63df471..695ad2b 100644 --- a/src/views/goods/goods/components/Specification.vue +++ b/src/views/goods/goods/components/Specification.vue @@ -1,9 +1,9 @@ <template> <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-column label="" type="expand"> + <!-- <el-table-column label="" type="expand"> <template slot-scope="scope"> <el-form label-position="left" inline> <el-row v-for="(step,step_idx) in scope.row.tb_steps" :key=step_idx style="margin-top:5px;" > @@ -16,7 +16,7 @@ </el-row> </el-form> </template> - </el-table-column> + </el-table-column> --> <el-table-column label="商品名称" prop="goods_name" > </el-table-column> <el-table-column label="商品规格" prop="sku_spec_name"> @@ -29,6 +29,10 @@ <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'save')" type="text" size="small"> 保存 </el-button> <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'del')" type="text" size="small"> 删除 </el-button> <el-button @click.native.prevent="specal_opt(scope.$index,scope.row,'restore')" type="text" size="small"> 恢复 </el-button> + + <el-button @click="specal_set(scope.$index,scope.row,'view_step')" type="text" size="small"> 配置制作步骤 </el-button> + <el-button @click.native.prevent="sku_del(scope.$index,scope.row,'save')" type="text" size="small"> 删除当前sku </el-button> + </template> </el-table-column> </el-table> @@ -437,8 +441,15 @@ export default { }).catch(function(cat){ return cat }) + }, + specal_set(){ + + }, + sku_del(){ + } + } }