Skip to content

S
shop-new
提交 9a862698 authored 作者: 王天霸's avatar 王天霸
浏览文件
操作

级联选择器处理

上级 7134b940
隐藏空白字符变更
内嵌 并排
正在显示 包含 297 行增加 和 217 行删除
.env.development
浏览文件 @ 9a862698
...@@ -7,9 +7,9 @@ ENV = 'development' ...@@ -7,9 +7,9 @@ ENV = 'development'
# 测试环境 # 测试环境
VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1' VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1'
#VUE_APP_BASE_API = 'http://192.168.111.240:6605/api/v1' #VUE_APP_BASE_API = 'http://192.168.111.240:6605/api/v1'
# 文档模块 直接调用 sys开放接口 # 文档模块 直接调用 sys开放接口
VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com' VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
src/views/system/goods/add/components/goodsinfomation.vue
浏览文件 @ 9a862698
<template> <template>
<div class="goods-info"> <div class="goods-info">
<el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px" class="demo-goodsInfoForm" size="small"> <el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px"
class="demo-goodsInfoForm" size="small">
<el-form-item label="商品分类：" prop="categoryStr"> <el-form-item label="商品分类：" prop="categoryStr">
<el-input style="width:420px;" v-model.trim="goodsInfoForm.categoryStr" :disabled="true"></el-input> <el-input style="width:420px;" v-model.trim="goodsInfoForm.categoryStr" :disabled="true"></el-input>
<el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目</el-link> <el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目
</el-link>
<span class="tip-span">该商品所在类目须支持七天无理由退货</span> <span class="tip-span">该商品所在类目须支持七天无理由退货</span>
</el-form-item> </el-form-item>
...@@ -41,12 +43,7 @@ ...@@ -41,12 +43,7 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="所属品牌：" prop="brand_id"> <el-form-item label="所属品牌：" prop="brand_id">
<el-select v-model.trim="goodsInfoForm.brand_id" placeholder="请选择商品品牌" style="width: 420px;"> <el-select v-model.trim="goodsInfoForm.brand_id" placeholder="请选择商品品牌" style="width: 420px;">
<el-option <el-option v-for="item in brandOptions" :key="item.id" :label="item.brand_cn" :value="item.id"></el-option>
v-for="item in brandOptions"
:key="item.id"
:label="item.brand_cn"
:value="item.id"
></el-option>
</el-select> </el-select>
<el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link> <el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link>
</el-form-item> </el-form-item>
...@@ -63,36 +60,30 @@ ...@@ -63,36 +60,30 @@
商品图片最多上传7张，默认第一张为主图 商品图片最多上传7张，默认第一张为主图
<span style="margin-left: 20px;">单张图片需限制在2M以内，可上传png、jpg格式，尺寸要求为800 * 800</span> <span style="margin-left: 20px;">单张图片需限制在2M以内，可上传png、jpg格式，尺寸要求为800 * 800</span>
</span> </span>
<draggable :list="goodsImgFileList" group="article" class="dragArea" @end="handchange($event)"> <draggable :list="goodsImgFileList" group="article" class="dragArea" @end="handchange($event)">
<div v-for="(element,index) in goodsImgFileList" :key="index" class="list-complete-item" style="float:left;margin:0 10px;"> <div v-for="(element,index) in goodsImgFileList" :key="index" class="list-complete-item"
<div style="width:98px;height:98px;position: relative;" class="" @mouseover="showDelBtn(index)" @mouseleave="hiddenDelBtn"> style="float:left;margin:0 10px;">
<div style="width:98px;height:98px;position: relative;" class="" @mouseover="showDelBtn(index)"
@mouseleave="hiddenDelBtn">
<img v-if="element" :src="element.url" width="98" height="98" /> <img v-if="element" :src="element.url" width="98" height="98" />
<span class="iconcur" v-show="index==currentDelBtn" style="width:100%;height:100%;line-height: 98px;text-align: center; position:absolute;top:0;left:0;background-color: rgba(0,0,0,0.5); <span class="iconcur" v-show="index==currentDelBtn" style="width:100%;height:100%;line-height: 98px;text-align: center; position:absolute;top:0;left:0;background-color: rgba(0,0,0,0.5);
transition: opacity .3s;"> transition: opacity .3s;">
<i class="el-icon-zoom-in iconcur" style="font-size:20px;color:#fff;" @click="lookimg(element)"></i> <i class="el-icon-zoom-in iconcur" style="font-size:20px;color:#fff;" @click="lookimg(element)"></i>
<i class="el-icon-delete iconcur" style="font-size:20px;color:#fff;" @click="deleImg(element,index)"></i> <i class="el-icon-delete iconcur" style="font-size:20px;color:#fff;"
@click="deleImg(element,index)"></i>
</span> </span>
</div> </div>
<p v-if="index==0" style="margin:0;padding:0;text-align:center;background:#ccc;color:#fff;">主图</p> <p v-if="index==0" style="margin:0;padding:0;text-align:center;background:#ccc;color:#fff;">主图</p>
</div> </div>
</draggable> </draggable>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<!-- {{goodsImgFileList}} --> <!-- {{goodsImgFileList}} -->
<el-upload <el-upload class="upload-img" list-type="picture-card" action="#" :limit="7" :on-exceed="limitImg5"
class="upload-img" :before-upload="beforeUpGoodsImg" :http-request="uploadGoodsImg" :show-file-list="false"
list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="goodsImgFileList"><i
action="#" class="el-icon-plus" />
:limit="7"
:on-exceed="limitImg5"
:before-upload="beforeUpGoodsImg"
:http-request="uploadGoodsImg"
:show-file-list="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="goodsImgFileList"
><i class="el-icon-plus" />
</el-upload> </el-upload>
<el-dialog :visible.sync="goodsImgVisible"> <el-dialog :visible.sync="goodsImgVisible">
<img width="100%" :src="goodsImgUrlDialog" alt=""> <img width="100%" :src="goodsImgUrlDialog" alt="">
...@@ -100,54 +91,33 @@ ...@@ -100,54 +91,33 @@
</el-form-item> </el-form-item>
<el-form-item label='商品视频：' > <el-form-item label='商品视频：'>
<span class="tip-span" style="display: block;line-height: 34px;"> <span class="tip-span" style="display: block;line-height: 34px;">
最多上传一个视频（mp4格式），视频时长不超过30秒, 最多上传一个视频（mp4格式），视频时长不超过30秒,
<span style="margin-left: 20px;">视频大小不超过10M，默认视频在图片前面</span> <span style="margin-left: 20px;">视频大小不超过10M，默认视频在图片前面</span>
</span> </span>
<video <video v-if="vediosrc" style="width:300px;height:150px;float:left;margin:0 10px 0 0;" v-bind:src="vediosrc"
v-if="vediosrc" class="avatar video-avatar" controls="controls">
style="width:300px;height:150px;float:left;margin:0 10px 0 0;" 您的浏览器不支持视频播放
v-bind:src="vediosrc" </video>
class="avatar video-avatar" <i @click="delvideo" v-if="vediosrc" class="el-icon-circle-close iconcur"
controls="controls"> style="color:red;font-size: 18px;"></i>
您的浏览器不支持视频播放 <el-upload v-if="!vediosrc" class="upload-img" ref="videoref" action="#" :limit="1" list-type="picture-card"
</video> :before-upload="beforeUpGoodsvedio" :http-request="uploadGoodsvedio" :show-file-list="false"
<i @click="delvideo" v-if="vediosrc" class="el-icon-circle-close iconcur" style="color:red;font-size: 18px;" ></i> :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-error="vedioerror"
<el-upload :file-list="goodsvedioFileList"><i class="el-icon-plus" />
v-if="!vediosrc" <!-- v-if="videoform.showvideopath !='' && !videoflag" -->
class="upload-img"
ref="videoref"
action="#"
:limit="1"
list-type="picture-card"
:before-upload="beforeUpGoodsvedio"
:http-request="uploadGoodsvedio"
:show-file-list="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-error="vedioerror"
:file-list="goodsvedioFileList"
><i class="el-icon-plus" />
<!-- v-if="videoform.showvideopath !='' && !videoflag" -->
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 修改 商品分类目录 --> <!-- 修改 商品分类目录 -->
<!-- <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>--> <!-- <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>-->
<el-dialog <el-dialog v-loading="loadingSSQ" class="add-workorder-dialog opendow" title="修改商品分类" :visible.sync="editGoodsTypeDialog" :close-on-click-modal="false"
v-loading="loadingSSQ" :before-close="cancelType" center>
class="add-workorder-dialog" <el-cascader-panel style="width:80%;" v-show="editGoodsTypeDialog" v-model.trim="SSQGoodsList" :props='goodsprops'
title="修改商品分类" :options="fuckoptions" @change="handGoodsChang" @active-item-change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel>
:visible.sync="editGoodsTypeDialog"
:before-close="cancelType"
destroy-on-close
width="60%"
center
>
<el-cascader-panel v-show="editGoodsTypeDialog" v-model.trim="SSQGoodsList" :props='goodsprops' :options="fuckoptions" @active-item-change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancelType" size="mini">取 消</el-button> <el-button @click="cancelType" size="mini">取 消</el-button>
<el-button type="primary" @click="saveType" size="mini">确 定</el-button> <el-button type="primary" @click="saveType" size="mini">确 定</el-button>
...@@ -157,7 +127,7 @@ ...@@ -157,7 +127,7 @@
</template> </template>
<script> <script>
import { NewGetCategory, GetFreight, UploadImg, getByCategoryData,uploadVideo } from '@/api/module/goods' import { NewGetCategory,NewGetCategoryData, GetFreight, UploadImg, getByCategoryData, uploadVideo } from '@/api/module/goods'
import { getBrandsInf } from '@/api/module/brand/brand' import { getBrandsInf } from '@/api/module/brand/brand'
import { getAreaList } from '@/api/module/retreat/address' import { getAreaList } from '@/api/module/retreat/address'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
...@@ -173,15 +143,16 @@ ...@@ -173,15 +143,16 @@
draggable draggable
}, },
computed: {//这一部分直接拿过来用的 computed: {//这一部分直接拿过来用的
dragOptions() { dragOptions() {
return { return {
animation: 200, valdata:[],
group: "description", animation: 200,
disabled: false, group: "description",
ghostClass: "ghost" disabled: false,
}; ghostClass: "ghost"
} };
}, }
},
data() { data() {
let categoryIdCheck = (rule, value, callback) => { let categoryIdCheck = (rule, value, callback) => {
if (this.goodsImgFileList.length < 1) { if (this.goodsImgFileList.length < 1) {
...@@ -191,29 +162,29 @@ ...@@ -191,29 +162,29 @@
} }
}; };
let goodsDecCheck = (rule, value, callback) => { let goodsDecCheck = (rule, value, callback) => {
if(!value) { if (!value) {
callback(new Error("商品关键词，不能为空")); callback(new Error("商品关键词，不能为空"));
} else { } else {
if( value.indexOf('，') > -1 ) { if (value.indexOf('，') > -1) {
callback(new Error("商品关键词，不能有中文状态下的逗号，请再次检查")); callback(new Error("商品关键词，不能有中文状态下的逗号，请再次检查"));
} }
// 如果包含了，英文逗号，说明有多个，就校验个数 // 如果包含了，英文逗号，说明有多个，就校验个数
if( value.indexOf(',') > -1 ) { if (value.indexOf(',') > -1) {
let arrLength = value.split(',').length; let arrLength = value.split(',').length;
console.log(value.split(',')); console.log(value.split(','));
if(arrLength > 5) { if (arrLength > 5) {
callback(new Error("商品关键词，不能超过5个")); callback(new Error("商品关键词，不能超过5个"));
}else { } else {
callback(); callback();
} }
}else { } else {
callback(); callback();
} }
} }
} }
return { return {
dialogVisible:false, dialogVisible: false,
dialogImageUrl:'', dialogImageUrl: '',
videoflag: false, videoflag: false,
//是否显示进度条 //是否显示进度条
videouploadpercent: "", videouploadpercent: "",
...@@ -221,10 +192,10 @@ ...@@ -221,10 +192,10 @@
isshowuploadvideo: false, isshowuploadvideo: false,
//显示上传按钮 //显示上传按钮
videoform: { videoform: {
showvideopath: '' showvideopath: ''
}, },
goodsvedioFileList:[], goodsvedioFileList: [],
vediosrc:'', vediosrc: '',
loadingapp: false, loadingapp: false,
drag: false, drag: false,
currentDelBtn: -1, currentDelBtn: -1,
...@@ -245,20 +216,20 @@ ...@@ -245,20 +216,20 @@
web_url: '', // 外部链接 web_url: '', // 外部链接
out_goods_id: '', // 商品编码 out_goods_id: '', // 商品编码
imgs: [], // 商品图片 imgs: [], // 商品图片
video:'' video: ''
}, },
goodsInfoRules: { goodsInfoRules: {
categoryStr: [{required: true, message: '商品分类不能为空', trigger: 'blur'}], categoryStr: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
goods_name: [ goods_name: [
{required: true, message: '请输入商品名称', trigger: 'blur'}, { required: true, message: '请输入商品名称', trigger: 'blur' },
{min: 3, max: 50, message: '商品标题限制在3字符以上，50个字符以下', trigger: 'blur'} { min: 3, max: 50, message: '商品标题限制在3字符以上，50个字符以下', trigger: 'blur' }
], ],
// goods_des: [{required: true, validator: goodsDecCheck, trigger: 'blur'}], // goods_des: [{required: true, validator: goodsDecCheck, trigger: 'blur'}],
// producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}], // producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}],
deliver_area: [{required: true, message: '请选择商品发货地', trigger: 'change'}], deliver_area: [{ required: true, message: '请选择商品发货地', trigger: 'change' }],
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}], unit: [{ required: true, message: '商品单位不能为空', trigger: 'blur' }],
goods_brand: [{required: true, message: '请选择商品品牌', trigger: 'change'}], goods_brand: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
imgs: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}] imgs: [{ required: true, message: '请上传商品图片', validator: categoryIdCheck }]
}, },
goodsImgFileList: [], // 商品图片地址 集合list goodsImgFileList: [], // 商品图片地址 集合list
goodsImgVisible: false, // 图片能否预览 goodsImgVisible: false, // 图片能否预览
...@@ -272,7 +243,7 @@ ...@@ -272,7 +243,7 @@
// lazy: true, // lazy: true,
// lazyLoad: this.lazyLoad, // lazyLoad: this.lazyLoad,
value: "id", value: "id",
label: 'label', label: 'title',
// leaf: 'leaf', // leaf: 'leaf',
children: 'children', children: 'children',
// checkStrictly: true // checkStrictly: true
...@@ -293,45 +264,46 @@ ...@@ -293,45 +264,46 @@
// 获取 商品品牌 // 获取 商品品牌
this.getBrands(); this.getBrands();
// 获取类目 // 获取类目
this.getSSQArea(); // this.getSSQArea();
}, },
mounted() { mounted() {
if(this.goodsinfodata.goods_id) { if (this.goodsinfodata.goods_id) {
this.goodsInfoForm = this.goodsinfodata; this.goodsInfoForm = this.goodsinfodata;
this.vediosrc = this.goodsinfodata.video this.vediosrc = this.goodsinfodata.video
if( this.goodsInfoForm.imgs.length > 0 ) { if (this.goodsInfoForm.imgs.length > 0) {
this.goodsInfoForm.imgs.forEach( (item )=> { this.goodsInfoForm.imgs.forEach((item) => {
let objImg = { 'url': '' } let objImg = { 'url': '' }
objImg.url = item; objImg.url = item;
this.goodsImgFileList.push(objImg); this.goodsImgFileList.push(objImg);
}) })
} }
}else { } else {
this.goodsInfoForm.categoryStr = this.goodsinfodata.categoryStr; this.goodsInfoForm.categoryStr = this.goodsinfodata.categoryStr;
this.goodsInfoForm.categoryList = this.goodsinfodata.categoryList; this.goodsInfoForm.categoryList = this.goodsinfodata.categoryList;
} }
// 初始化 服务费率 // 初始化 服务费率
this.getByCategoryFee(this.goodsInfoForm.categoryList) this.getByCategoryFee(this.goodsInfoForm.categoryList)
this.SSQGoodsList = this.goodsInfoForm.categoryList
this. getalllist(this.SSQGoodsList)
}, },
methods: { methods: {
handchange(){//图片拖动结束 handchange() {//图片拖动结束
console.log(this.goodsImgFileList) console.log(this.goodsImgFileList)
this.goodsInfoForm.imgs = [] this.goodsInfoForm.imgs = []
this.goodsImgFileList.forEach(item=> { this.goodsImgFileList.forEach(item => {
this.goodsInfoForm.imgs.push(item.url) this.goodsInfoForm.imgs.push(item.url)
}) })
}, },
delvideo(){ delvideo() {
this.vediosrc = '' this.vediosrc = ''
this.goodsvedioFileList = [] this.goodsvedioFileList = []
}, },
// 上传 视频 之前 // 上传 视频 之前
beforeUpGoodsvedio(file) { beforeUpGoodsvedio(file) {
debugger // debugger
let isImgSize = (file.size / 1024 / 1024 ) > 10; let isImgSize = (file.size / 1024 / 1024) > 10;
if(file.type !== "video/mp4") { if (file.type !== "video/mp4") {
this.$message({ this.$message({
message: '上传视频格式只支持 mp4 格式', message: '上传视频格式只支持 mp4 格式',
type: "warning" type: "warning"
...@@ -339,7 +311,7 @@ ...@@ -339,7 +311,7 @@
return false; return false;
} }
if(isImgSize) { if (isImgSize) {
this.$message({ this.$message({
message: '上传视频大小不能超过10MB', message: '上传视频大小不能超过10MB',
type: "warning" type: "warning"
...@@ -350,105 +322,190 @@ ...@@ -350,105 +322,190 @@
// 上传 商品视频 // 上传 商品视频
uploadGoodsvedio(param) { uploadGoodsvedio(param) {
const formData = new FormData() const formData = new FormData()
formData.append('file', param.file) formData.append('file', param.file)
uploadVideo(formData).then( res=> { uploadVideo(formData).then(res => {
if(res.data&&res.code==1) { if (res.data && res.code == 1) {
let urlObj = {'url': ''}; let urlObj = { 'url': '' };
urlObj.url = res.data.url; urlObj.url = res.data.url;
this.goodsvedioFileList.push(urlObj); this.goodsvedioFileList.push(urlObj);
this.vediosrc = res.data.url this.vediosrc = res.data.url
this.goodsInfoForm.video = res.data.url this.goodsInfoForm.video = res.data.url
this.$message({type:'success',message:'视频上传成功'}); this.$message({ type: 'success', message: '视频上传成功' });
}else{ } else {
this.goodsvedioFileList=[] this.goodsvedioFileList = []
this.vediosrc = '' this.vediosrc = ''
this.$notify.error({ this.$notify.error({
title: '错误', title: '错误',
message:res.message message: res.message
}); });
} }
}).catch((err)=>{ }).catch((err) => {
console.log(err) console.log(err)
}); });
}, },
vedioerror(err, file, fileList){ vedioerror(err, file, fileList) {
console.log(err, file, fileList) console.log(err, file, fileList)
}, },
onEnd(){ onEnd() {
debugger // debugger
console.log( this.goodsImgFileList) console.log(this.goodsImgFileList)
this.drag = false this.drag = false
}, },
//显示删除图片的图标 //显示删除图片的图标
showDelBtn(index) { showDelBtn(index) {
this.currentDelBtn = index this.currentDelBtn = index
}, },
//隐藏删除图片的图标 //隐藏删除图片的图标
hiddenDelBtn() { hiddenDelBtn() {
this.currentDelBtn = -1 this.currentDelBtn = -1
}, },
// 删除图片 // 删除图片
deleImg(data, index) { deleImg(data, index) {
this.goodsImgFileList.splice(index, 1) this.goodsImgFileList.splice(index, 1)
this.goodsInfoForm.imgs.splice(index, 1); this.goodsInfoForm.imgs.splice(index, 1);
}, },
lookimg(data){ lookimg(data) {
this.dialogVisible = true this.dialogVisible = true
this.dialogImageUrl = data.url this.dialogImageUrl = data.url
}, },
// 数据初始化 // 数据初始化
initInfo() { initInfo() {
this.$refs.goodsInfoForm.resetFields(); this.$refs.goodsInfoForm.resetFields();
this.goodsImgFileList = []; this.goodsImgFileList = [];
}, },
// 获取 商品品牌 // 获取 商品品牌
getBrands() { getBrands() {
// 增加入参 // 增加入参
let data = { let data = {
status: 1 status: 1
} }
getBrandsInf(data).then( res => { getBrandsInf(data).then(res => {
if(res.code == 1 ) { if (res.code == 1) {
this.brandOptions = res.data.data ? res.data.data : []; this.brandOptions = res.data.data ? res.data.data : [];
}else { } else {
this.brandOptions = []; this.brandOptions = [];
} }
}); });
}, },
/* 修改 商品分类 类目 */ /* 修改 商品分类 类目 */
editType() { editType() {
this.SSQGoodsList = []; // this.SSQGoodsList = [];
this.fuckoptions = this.setTreeData(this.fuckoptions)
this.editGoodsTypeDialog = true; this.editGoodsTypeDialog = true;
this.SSQGoodsList = this.goodsInfoForm.categoryList
}, },
getalllist(itemarr){
getSSQArea(node, resolve) { // debugger
let limboNode = {id: 0}; let limboNode
NewGetCategory(limboNode).then(res => { itemarr.forEach((item,index)=>{
if(index==0){
limboNode = { parent_id:0 }
}
if(index>0){
limboNode = { parent_id:itemarr[index-1] }
}
NewGetCategoryData(limboNode).then(res => {
let date = res.data.forEach(item=>{
if(item.level!==2){
item['children'] = []
}
})
this.fuckoptions.push.apply(this.fuckoptions,res.data)
});
})
},
getSSQArea() {
let limboNode = { id: 0 };
NewGetCategoryData(limboNode).then(res => {
this.fuckoptions = res.data; this.fuckoptions = res.data;
}); });
}, },
setTreeData(arr) {
// 删除所有 children,以防止多次调用
arr.forEach(function(item) {
// delete item.children;
});
let map = {}; // 构建map
arr.forEach(i => {
map[i.id] = i; // 构建以third_id为键 当前数据为值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
if (mapItem) { // 存在则表示当前数据不是最顶层数据
// 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
(mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
} else { // 不存在则是组顶层数据
treeData.push(child);
}
});
return treeData;
},
// 类目修改 // 类目修改
handGoodsChang(val){
console.log(val,'newval')
this.SSQGoodsList = val
},
SSQGoodsChange(value) { SSQGoodsChange(value) {
this.SSQGoodsList = value; this.valdata=[]
console.log(value,'ccc')
let limboNode = {
parent_id:value[value.length - 1]
}
NewGetCategoryData(limboNode).then(res => {
// debugger
res.data.forEach(val=>{
if(val.level!==2){
val['children'] = []
}
this.valdata.push(val)
})
console.log(this.valdata)
if(value.length==1){
this.fuckoptions.forEach((item,index)=>{
if(item.id == value[value.length - 1]){
// debugger
this.fuckoptions[index].children = this.valdata
// debugger
}
})
}
if(value.length==2){
this.fuckoptions.forEach((item,index)=>{
if(item.id == value[0]){
this.fuckoptions[index].children.forEach((iten,indexs)=>{
if(iten.id ===value[1]){
this.fuckoptions[index].children[indexs].children =this.valdata
}
})
}
})
}
});
console.log(this.SSQGoodsList,'aaaaa')
}, },
// 确认 修改 商品分类 // 确认 修改 商品分类
saveType() { saveType() {
if(this.SSQGoodsList && this.SSQGoodsList.length === 3) { if (this.SSQGoodsList && this.SSQGoodsList.length === 3) {
let ssqLabelList = this.$refs['ssqGoodsCascader'].getCheckedNodes()[0].pathLabels; let ssqLabelList = this.$refs['ssqGoodsCascader'].getCheckedNodes()[0].pathLabels;
this.goodsInfoForm.categoryList = this.SSQGoodsList; this.goodsInfoForm.categoryList = this.SSQGoodsList;
this.goodsInfoForm.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2]; this.goodsInfoForm.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2];
this.editGoodsTypeDialog = false; this.editGoodsTypeDialog = false;
this.$message({type:'success',message:'修改成功'}); this.$message({ type: 'success', message: '修改成功' });
// 修改类目后更新 服务费率 // 修改类目后更新 服务费率
this.getByCategoryFee(this.goodsInfoForm.categoryList) this.getByCategoryFee(this.goodsInfoForm.categoryList)
}else { } else {
this.$message({type: 'warning',message: '请选择完整三级类目'}); this.$message({ type: 'warning', message: '请选择完整三级类目' });
} }
}, },
// 取消 修改 商品分类 // 取消 修改 商品分类
...@@ -463,10 +520,10 @@ showDelBtn(index) { ...@@ -463,10 +520,10 @@ showDelBtn(index) {
this.$message({ message: '最多上传7张图片', type: 'warning' }) this.$message({ message: '最多上传7张图片', type: 'warning' })
}, },
// 上传 商品图片 之前 // 上传 商品图片 之前
beforeUpGoodsImg (file) { beforeUpGoodsImg(file) {
let isImgSize = (file.size / 1024 / 1024 ) > 2; let isImgSize = (file.size / 1024 / 1024) > 2;
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { if (file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({ this.$message({
message: '上传图片格式只支持 jpg / png 格式', message: '上传图片格式只支持 jpg / png 格式',
type: "warning" type: "warning"
...@@ -474,7 +531,7 @@ showDelBtn(index) { ...@@ -474,7 +531,7 @@ showDelBtn(index) {
return false; return false;
} }
if(isImgSize) { if (isImgSize) {
this.$message({ this.$message({
message: '上传图片大小不能超过2MB', message: '上传图片大小不能超过2MB',
type: "warning" type: "warning"
...@@ -483,10 +540,10 @@ showDelBtn(index) { ...@@ -483,10 +540,10 @@ showDelBtn(index) {
} }
// // 图片宽高尺寸限制 800*800 // // 图片宽高尺寸限制 800*800
return new Promise(function(resolve, reject){ return new Promise(function (resolve, reject) {
let _URL = window.URL || window.webkitURL; let _URL = window.URL || window.webkitURL;
let img = new Image(); let img = new Image();
img.onload = function(){ img.onload = function () {
// 图片是否是正方形 宽高比为 1 // 图片是否是正方形 宽高比为 1
file.width = img.width; file.width = img.width;
file.height = img.height; file.height = img.height;
...@@ -494,11 +551,11 @@ showDelBtn(index) { ...@@ -494,11 +551,11 @@ showDelBtn(index) {
valid ? resolve() : reject(); valid ? resolve() : reject();
} }
img.src = _URL.createObjectURL(file); img.src = _URL.createObjectURL(file);
}).then(()=>{ }).then(() => {
return file; return file;
}, ()=>{ }, () => {
this.$message({ this.$message({
message:'商品图片尺寸必须为800 * 800像素，请重新选择!', message: '商品图片尺寸必须为800 * 800像素，请重新选择!',
type: 'warning' type: 'warning'
}); });
return Promise.reject(); return Promise.reject();
...@@ -508,22 +565,22 @@ showDelBtn(index) { ...@@ -508,22 +565,22 @@ showDelBtn(index) {
// 上传 商品图片 // 上传 商品图片
uploadGoodsImg(param) { uploadGoodsImg(param) {
//console.log(327,param); //console.log(327,param);
this.getBase64(param.file).then( res => { this.getBase64(param.file).then(res => {
let result = res.split(","); let result = res.split(",");
this.Base64img = result[1]; this.Base64img = result[1];
let data = {"img_data":this.Base64img}; let data = { "img_data": this.Base64img };
UploadImg(data).then( res=> { UploadImg(data).then(res => {
let urlObj = {'url': ''}; let urlObj = { 'url': '' };
if(res.data) { if (res.data) {
urlObj.url = res.data.image_url; urlObj.url = res.data.image_url;
this.goodsImgFileList.push(urlObj); this.goodsImgFileList.push(urlObj);
this.goodsInfoForm.imgs = []; // 1009 hxz 初始化img this.goodsInfoForm.imgs = []; // 1009 hxz 初始化img
this.goodsImgFileList.forEach(item=> { this.goodsImgFileList.forEach(item => {
this.goodsInfoForm.imgs.push(item.url) this.goodsInfoForm.imgs.push(item.url)
}) })
this.$message({type:'success',message:'图片上传成功'}); this.$message({ type: 'success', message: '图片上传成功' });
// 只清除一次，不浪费哦 // 只清除一次，不浪费哦
if(this.goodsImgFileList.length === 1) { if (this.goodsImgFileList.length === 1) {
this.$refs.goodsInfoForm.clearValidate('imgs'); this.$refs.goodsInfoForm.clearValidate('imgs');
} }
} }
...@@ -531,7 +588,7 @@ showDelBtn(index) { ...@@ -531,7 +588,7 @@ showDelBtn(index) {
}); });
}, },
// 商品信息 子组件 form表单校验, 在父组件中被调用 // 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsInfoForm () { validateGoodsInfoForm() {
let flag = null let flag = null
this.$refs['goodsInfoForm'].validate(valid => { this.$refs['goodsInfoForm'].validate(valid => {
if (valid) { if (valid) {
...@@ -555,16 +612,16 @@ showDelBtn(index) { ...@@ -555,16 +612,16 @@ showDelBtn(index) {
this.goodsInfoForm.imgs.splice(i, 1); this.goodsInfoForm.imgs.splice(i, 1);
} }
} }
if(this.goodsImgFileList.length === 0) { if (this.goodsImgFileList.length === 0) {
this.$refs.goodsInfoForm.validateField('imgs') this.$refs.goodsInfoForm.validateField('imgs')
}else { } else {
this.$refs.goodsInfoForm.clearValidate('imgs'); this.$refs.goodsInfoForm.clearValidate('imgs');
} }
}, },
// 维护品牌 // 维护品牌
toBrand() { toBrand() {
this.$router.push({path: '/system/shop/brand'}); this.$router.push({ path: '/system/shop/brand' });
}, },
/** 根据类目 获取服务费率 /** 根据类目 获取服务费率
...@@ -580,10 +637,10 @@ showDelBtn(index) { ...@@ -580,10 +637,10 @@ showDelBtn(index) {
data.category_id = cateList[0]; data.category_id = cateList[0];
} }
// console.log(8888,data); // console.log(8888,data);
getByCategoryData(data).then(res=> { getByCategoryData(data).then(res => {
if ( res.code == 1 ) { if (res.code == 1) {
this.cateFee = res.data.service_fee_ratio?res.data.service_fee_ratio:'' this.cateFee = res.data.service_fee_ratio ? res.data.service_fee_ratio : ''
this.$store.commit('SET_CATEFEE',this.cateFee); this.$store.commit('SET_CATEFEE', this.cateFee);
} }
}); });
}, },
...@@ -612,38 +669,61 @@ showDelBtn(index) { ...@@ -612,38 +669,61 @@ showDelBtn(index) {
ul { ul {
padding: 0; padding: 0;
} }
.goods-info { .goods-info {
padding: 20px; padding: 20px;
/*margin-top: 18px;*/ /*margin-top: 18px;*/
} }
.type-text-span { .type-text-span {
display: inline-block; display: inline-block;
width: 420px; width: 420px;
/*margin: 0 20px 0;*/ /*margin: 0 20px 0;*/
} }
.edit-type-span {
display: inline-block; .edit-type-span {
cursor: pointer; display: inline-block;
margin: 0 20px; cursor: pointer;
} margin: 0 20px;
/* 一般提示性文字 */ }
.tip-span {
color: #909399; /* 一般提示性文字 */
font-size: 12px; .tip-span {
} color: #909399;
font-size: 12px;
}
/deep/.el-form-item { /deep/.el-form-item {
margin-bottom: 20px; margin-bottom: 20px;
} }
.list-complete-item{
display: inline-block; .list-complete-item {
} display: inline-block;
.imgSty{ }
margin:0 10px;
} .imgSty {
.iconcur{ margin: 0 10px;
cursor: pointer; }
}
.iconcur {
cursor: pointer;
}
/*/deep/.el-cascader-menu {*/ /*/deep/.el-cascader-menu {*/
/* height:600px;*/ /* height:600px;*/
/*}*/ /*}*/
</style> /deep/ .el-cascader-menu{
max-width: 250px !important;
min-width: 250px !important;
}
/deep/ .el-cascader-menu__wrap{
width:auto !important;
max-width: 250px !important;
min-width: 250px !important;
}
.opendow /deep/ .el-dialog{
width:800px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论