<template> <div class="goods-after-sale"> <el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small"> <el-card class="box-card" ref="paramsvalue"> <div slot="header" class="clearfix"> <span>商品属性</span> <span style="font-size:13px;padding-left:20px;font-weight: 400;">属性名称/属性值</span> </div> <el-form-item label="所属品牌:" prop="brand_id"> <el-select v-model.trim="goodsAfterSaleForm.brand_id" :loading="loading" :filter-method="searchbtn" filterable placeholder="请选择商品品牌" style="width: 420px;"> <el-option v-for="(item,index) in brandOptions" :key="index" :label="item.brand_cn" :value="item.id"></el-option> </el-select> <el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toPage('brand')">新增品牌</el-link> </el-form-item> <el-form-item label="商品产地:" prop="producing_area_id_list"> <el-cascader ref="producing_area" filterable v-model.trim="goodsAfterSaleForm.producing_area_id_list" :options="areaOptions" :props="areaProps" placeholder="请选择" style="width:420px;" size="mini" @change="matchIdName('producing_area')"> </el-cascader> </el-form-item> <el-form-item label="商品发货地:" prop="deliver_area_id_list"> <el-cascader ref="deliver_area" filterable v-model.trim="goodsAfterSaleForm.deliver_area_id_list" filterable :options="areaOptions" :props="areaProps" placeholder="请选择" style="width:420px;" size="mini" @change="matchIdName('deliver_area')"> </el-cascader> </el-form-item> <draggable :list="goodsAfterSaleForm.params" group="article" class="dragArea"> <div v-for="(element,index) in goodsAfterSaleForm.params" :key="index" class="list-complete-item"> <el-row :gutter="24" style="padding-left:50px;"> <el-col :span="8" style="height:50px;"> <el-input type="text" placeholder="属性名称" v-model="element.title" maxlength="15" @input="updatelist" show-word-limit size="small" ></el-input> </el-col> <el-col :span="12" style="height:50px;"> <el-input type="text" placeholder="属性值" @input="updatelist" v-model="element.value" maxlength="60" show-word-limit size="small" ></el-input> </el-col> <el-col :span="4" style="height:50px;"> <span v-show="index!=0" style="height:50px;line-height: 40px;" @click="deleteparameter(index)"> <i style="color:#ff4949" class="el-icon-delete curspor" /> </span> <span style="height:50px;line-height: 40px;"> <i style="color:#ff4949" class="el-icon-rank curspor" /> </span> </el-col> </el-row> </div> </draggable> <el-button style="margin-left:50px;margin-bottom:30px;" type="primary" size="small" @click="addparameter">添加属性</el-button> </el-card> <el-card class="box-card" ref="salesvalue"> <div slot="header" class="clearfix"> <span>售后及服务</span> </div> <el-form-item label="服务标签:" prop="stags"> <el-checkbox-group v-model="goodsAfterSaleForm.stags"> <el-checkbox v-for="(item,index) in tagOptions" :label="item.id" true-label :key="index" @change="serviceTagsChange(item.id)">{{item.tag}}</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="邮费模板:" prop="freight_id"> <el-select v-model="goodsAfterSaleForm.freight_id" placeholder="请选择邮费模板" style="width:400px;"> <el-option v-for="(item,index) in freightOptions" :key="index" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="发货时效:" prop="delay_compensate"> <el-select v-model="goodsAfterSaleForm.delay_compensate" style="width:400px;" placeholder="请选择发货时效"> <el-option label="24小时" :value="24"></el-option> <el-option label="48小时" :value="48"></el-option> <!-- <el-option label="72小时" :value="72"></el-option> --> </el-select> </el-form-item> <el-form-item label="售后时长:" prop="aftersale_time"> <el-select v-model="goodsAfterSaleForm.aftersale_time" style="width:400px;" placeholder="请选择售后时长"> <el-option label="7天" :value="7"></el-option> <el-option label="15天" :value="15"></el-option> <!-- <el-option label="30天" :value="30"></el-option> --> </el-select> </el-form-item> </el-card> <!-- <el-card class="box-card" ref="outhervalue">--> <!-- <div slot="header" class="clearfix" >--> <!-- <span>其他设置</span>--> <!-- </div>--> <!--<!– <el-form-item label='商品关键词:' prop="goods_des">–>--> <!--<!– <el-input v-model.trim="goodsAfterSaleForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input>–>--> <!--<!– <span class="tip-span ml20">关键词之间用 <strong>英文逗号</strong> 分开,最多可以添加5个</span>–>--> <!--<!– </el-form-item>–>--> <!-- <el-form-item label="商品产地:" prop="producing_area">--> <!-- <el-select v-model.trim="goodsAfterSaleForm.producing_area" placeholder="请选择商品产地" style="width: 420px;">--> <!-- <el-option--> <!-- v-for="item in areaOptions"--> <!-- :key="item.id"--> <!-- :label="item.name"--> <!-- :value="item.id"--> <!-- ></el-option>--> <!-- </el-select>--> <!-- </el-form-item>--> <!-- <el-form-item label="商品发货地:" prop="deliver_area">--> <!-- <el-select v-model.trim="goodsAfterSaleForm.deliver_area" placeholder="请选择商品发货地" style="width: 420px;">--> <!-- <el-option--> <!-- v-for="item in areaOptions"--> <!-- :key="item.id"--> <!-- :label="item.name"--> <!-- :value="item.id"--> <!-- ></el-option>--> <!-- </el-select>--> <!-- </el-form-item>--> <!-- <el-form-item label='商品单位:' prop="unit">--> <!-- <el-input v-model.trim="goodsAfterSaleForm.unit" placeholder="请输入商品单位" style="width:420px;"></el-input>--> <!-- <!– <span class="tip-span ml20">关键词之间用逗号分开,最多可以添加5个</span>–>--> <!-- </el-form-item>--> <!--<!– <el-form-item label='市场参考价链接:' prop="web_url">–>--> <!--<!– <el-input v-model.trim="goodsAfterSaleForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input>–>--> <!--<!– </el-form-item>–>--> <!-- <el-form-item label='商品编码:' prop="out_goods_id">--> <!-- <el-input v-model.trim="goodsAfterSaleForm.out_goods_id" placeholder="请输入商品编码(非必须)" style="width:420px;"></el-input>--> <!-- </el-form-item>--> <!-- </el-card>--> </el-form> </div> </template> <script> import { GetFreight } from '@/api/module/goods' import { getBrandsInf } from '@/api/module/brand/brand' import { getnewAreaList } from '@/api/module/retreat/address' import draggable from 'vuedraggable' export default { name: "goodsaftersale", props: { goodsaftersale: { type: Object, required: true }, option: { type: Number, required: true } }, data() { let checkStags = (rule, value, callback) => { if (this.goodsAfterSaleForm.stags.length === 0) { callback(new Error("请选择服务类型")); } else { callback(); } }; return { loading: false, brandOptions: [], // 商品品牌 oldbrandOptions: [], // 初始化品牌 goodssxRules: { categoryStr: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }], goods_name: [ { required: true, message: '请输入商品名称', trigger: 'blur' }, { min: 3, max: 50, message: '商品标题限制在3字符以上,50个字符以下', trigger: 'blur' } ], brand_id: [{ required: true, message: '请选择商品品牌', trigger: 'change' }], // ssfl: [{ required: true, message: '请选择商品税收分类', trigger: 'change' }], // goods_des: [{required: true, validator: goodsDecCheck, trigger: 'blur'}], producing_area_id_list:[{required: true, message: '请选择商品产地', trigger: 'change'}], deliver_area_id_list: [{ required: true, message: '请选择商品发货地', trigger: 'change' }], metering_unit: [{ required: true, message: '计量单位不能为空', trigger: 'change' }], goods_brand: [{ required: true, message: '请选择商品品牌', trigger: 'change' }], }, areaOptions: [], // 地址 省 list:[ { key:'1', value:'' },{ key:'2', value:'' }, { key:'3', value:'' }, { key:'4', value:'' }, { key:'5', value:'' } ], areaProps: { checkStrictly: false, expandTrigger: 'click', emitPath: true, // lazy: true, // lazyLoad: this.areaLazyLoad, value: "id", label: "name", leaf: "leaf" }, goodsAfterSaleForm: { producing_area_id_list: '', // 产地id producing_area: '', // 产地name deliver_area_id_list: '', // 发货地id deliver_area: '', // 发货地name goods_brand: '', // 品牌 brand_id: '', // 品牌id stags: [], freight_id: 310, delay_compensate: 24, aftersale_time: 7, // 参数 params:[ { 'title':'', 'value':'' } ], }, goodsAfterSaleRules: { brand_id: [{ required: true, message: '请选择商品品牌', trigger: 'change' }], producing_area_id_list:[{required: true, message: '请选择商品产地', trigger: 'change'}], deliver_area_id_list: [{ required: true, message: '请选择商品发货地', trigger: 'change' }], stags: [{ type: 'array', required: true, message: '请选择至少一个服务标签', trigger: 'change' }], freight_id: [{required: true, message: '请选择邮费模板', trigger: 'change'}], delay_compensate: [{required: true, message: '请选择发货时效', trigger: 'change'}], aftersale_time: [{required: true, message: '请选择售后时长', trigger: 'change'}], }, tagOptions: [ {id: 2, tag: "假一赔十"}, {id: 3, tag: "7天退换"}, {id: 4, tag: "不可退换"}, {id: 5, tag: "厂家直供"}, {id: 6, tag: "售后无忧"} ], freightOptions: [] } // return end }, components: { draggable }, mounted() { this.getnewaddress() this.getFreightData(); // debugger // console.log('售后数据:',this.goodsaftersale); if(this.goodsaftersale) { this.goodsAfterSaleForm = this.goodsaftersale; this.goodsAfterSaleForm.brand_id = this.goodsaftersale.brand_id?this.goodsaftersale.brand_id.toString():'' debugger } }, created() { // 获取 省 // this.getArea(); this.getBrands(); }, methods: { // 跳转到对应页面 toPage(name) { switch (name) { case 'brand' : { // this.$router.push({ path: '/system/shop/brand' }); this.$router.push({ path: '/system/goods/brand' }); break; } case 'metering_unit' : { this.$router.push({ path: '/system/goods/commodityUnit' }); break; } case 'group' : { // this.$router.push({ path: '/system/settings/commodityGroup' }); this.$router.push({ path: '/system/goods/commodityGroup' }); break; } case 'supplier' : { this.$router.push({ path: '/system/supplier/supplier' }); break; } case 'warehouse' : { this.$router.push({ path: '/system/warehouse/wareHouse' }); break; } } }, searchbtn(query){//品牌搜索 if (query !== '') { this.brandOptions = [] this.loading = true; setTimeout(() => { this.loading = false; let data = { brand_name:query, status: 1, page:1, limit:100 } getBrandsInf(data).then(res => { if (res.data) { this.brandOptions = res.data.data } }); }, 2000); } else { this.brandOptions = this.oldbrandOptions } }, // 获取 商品品牌 seachid(datelist,brand_id){//查找初始化数组是否存在回显的品牌 datelist.some(item=>{ if(item.id==brand_id){ return true } }) }, getBrands() { // 增加入参 let data = { status: 1, page:1, limit:100 } getBrandsInf(data).then(res => { if (res.data) { let datelist = res.data.data ? res.data.data : [] if(this.goodsaftersale&&this.goodsaftersale.brand_id){ if(this.seachid(datelist,this.goodsaftersale.brand_id)){ }else{ datelist.push({ id:this.goodsaftersale.brand_id, brand_cn:this.goodsaftersale.goods_brand // brand_cn:'大傻逼' }) } } this.brandOptions = datelist this.oldbrandOptions = datelist } }); }, getnewaddress(){ let data = { type:2 } getnewAreaList(data).then(res=>{ if(res.code==1){ let datelist= this.removeEmptyChildren(res.data) this.areaOptions =datelist debugger } }) }, removeEmptyChildren (node) { node.forEach(item => { if ('children' in item && item.children.length === 0) { delete item.children } else if ('children' in item && item.children.length) { this.removeEmptyChildren(item.children) } }) return node }, // 产地 areaLazyLoad(node, resolve) { this.getArea(node, resolve); }, // 商品产地 getArea(node, resolve) { const level = node.level let date = {} if (level === 0) { date = { pid: 0 } }else { date = { pid: node.value } } getAreaList(date).then(res => { let result = {} result = res.data if (level === 0) { result.forEach(item => { item.value = item.id; item.label = item.name item.children=[] item.leaf = level }) } if (level === 1) { result.forEach(item => { item.value = item.id; item.label = item.name // item.children=[] //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上 item.leaf = level >= 1 }) } // if (level === 2) { // result.forEach(item => { // item.value = item.id; // item.label = item.name // //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上 // item.leaf = 1 // }) // } resolve(result) }) }, // 产地查处id对应的中文地址 matchIdName(typeName) { if(this.$refs[typeName].getCheckedNodes()[0]){ }else{ return } let areaLabelList = this.$refs[typeName].getCheckedNodes()[0].pathLabels; let areaLastName = 0; if (areaLabelList.length > 0) { areaLastName = areaLabelList.length - 1 // 产地 if (typeName === "producing_area") { this.goodsAfterSaleForm.producing_area = areaLabelList[areaLastName] } // 发货地 if (typeName === "deliver_area") { this.goodsAfterSaleForm.deliver_area = areaLabelList[areaLastName] } } }, updatelist(){ this.$forceUpdate() }, // 添加参数 // 添加参数 addparameter(){ let obj = { title:'', value:'' } this.goodsAfterSaleForm.params.push(obj) this.$forceUpdate()//点编辑过来的时候,因为多层嵌套组件,照成视图没有更新,调用这个方法,(分析的应该是这样) }, deleteparameter(index){ this.goodsAfterSaleForm.params.splice(index, 1) this.$forceUpdate() }, /** 售后服务数据 初始化 */ initInfo() { this.$refs.goodsAfterSaleForm.resetFields(); }, // 运费模板 getFreightData() { let params = { is_status: 1 } GetFreight(params).then(res => { if(res.data) { this.freightOptions = res.data; if (this.option == 0) { for (let i = 0; i < this.freightOptions.length; i++) { if (this.freightOptions[i].is_default == 1) { this.goodsAfterSaleForm.freight_id = this.freightOptions[i].id } } } }else { this.freightOptions = '' } }); }, // 服务标签,7天退换、不可退换互斥 serviceTagsChange(id) { debugger let index4 = this.goodsAfterSaleForm.stags.indexOf(4); let index3 = this.goodsAfterSaleForm.stags.indexOf(3); if(id == 3) { if( index4 > -1) { this.goodsAfterSaleForm.stags.splice(index4,1) } } if(id == 4) { if( index3 > -1) { this.goodsAfterSaleForm.stags.splice(index3,1) } } }, // 商品信息 子组件 form表单校验, 在父组件中被调用 validateGoodsAfterSaleForm () { let flag = null this.$refs['goodsAfterSaleForm'].validate(valid => { if (valid) { flag = true } else { flag = false // if(this.goodsAfterSaleForm.producing_area==''||this.goodsAfterSaleForm.deliver_area==''||this.goodsAfterSaleForm.unit==''){ // sessionStorage.setItem('clickbtm',1) // }else{ // sessionStorage.setItem('clickbtm',2) // } } }) return flag }, } // methods end } </script> <style lang="scss" type="text/stylus" scoped> .goods-after-sale { padding: 20px; margin-bottom:20px; box-shadow:none; } .box-card{ margin-bottom: 20px; //padding: 10px; } ::v-deep .box-card .el-card__header{ border-bottom: none; font-size: 18px; font-weight: 500; padding-left: 20px; } .curspor{ font-size: 16px; } .curspor:hover{ cursor: pointer; } </style>