提交 336687e8 authored 作者: huaxinzhu's avatar huaxinzhu

1、商品-商品图片模块,增加上传拦截提示;

2、商品-商品信息模块,增加填写拦截提示;
3、商品-增加新增并直接提交商品上架审核功能,原“提交”功能,修改为“保存草稿”;
4、商品-下架商品-增加批量以及单个商品下架功能;
5、商品-上架商品-增加搜索功能|| 去掉“删除”功能
上级 bbdf1006
......@@ -6,7 +6,13 @@
</div>
<el-table v-loading="loading" :data="withdrawlogList" :height="tableHeight">
<el-table-column label="提现流水单号" align="center" prop="ReflectSn"/>
<el-table-column label="提现账号" align="center" prop="BankName"/>
<el-table-column label="提现账号" align="center" prop="BankName">
<template slot-scope="scope">
<div>
{{ scope.row.BankAccountNo }}
</div>
</template>
</el-table-column>
<el-table-column label="提现金额" :formatter="formatFee" align="center" prop="ReflectMoney"/>
<el-table-column label="提现状态" align="center" :formatter="formatType" prop="Status"/>
<el-table-column label="提现审核说明" align="center" prop="Des"/>
......
<template>
<div class="app-container">
<div class="app-container" v-loading="loading">
<div style="margin: auto">
<p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片,大小在2M以内,支持png、jpg格式,尺寸要求为正方形。</span>
</p>
......@@ -13,6 +13,7 @@
:on-exceed="limitCount1"
:before-upload = "beforeUpGoodsMainImg"
:before-remove = "beforeRemoveMainImg"
:on-remove="removeMainImg"
:on-preview="handleMainImgPreview"
>
<i class="el-icon-plus"></i>
......@@ -34,6 +35,7 @@
:on-exceed="limitCount5"
:before-upload = "beforeUpCarouselImg"
:before-remove="beforeRemoveCarouselImg"
:on-remove="removeCarouseImg"
:on-preview="handlePictureCardPreview"
>
<i class="el-icon-plus"></i>
......@@ -61,6 +63,7 @@
},
data() {
return {
loading: false, // 全屏加载
picall: {
ruleFormdialogImageUrl: [],
ruleFormdialogImageUrlplus: [], //主图
......@@ -149,11 +152,13 @@
// 上传商品主图
uploadGoodsMain(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
this.loading = false;
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl})
this.$message({ message:'上传成功',type:'success'});
......@@ -166,22 +171,13 @@
// 商品主图 删除移除前
beforeRemoveMainImg(file,fileList) {
if(file.status === 'success') {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
return res();
}).catch(() => {
this.$message({
......@@ -193,6 +189,20 @@
});
}
},
// 主图删除
removeMainImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 商品主图 预览
handleMainImgPreview(file) {
......@@ -202,7 +212,7 @@
// 轮播图 数量限制
limitCount5(files,fileList){
this.$message({message: '最多上传1张图片', type: 'warning'});
this.$message({message: '最多上传5张图片', type: 'warning'});
},
// 轮播图 大小格式样式校验
beforeUpCarouselImg(file) {
......@@ -246,6 +256,7 @@
// 轮播图上传
uploadSectionFile(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
......@@ -257,31 +268,20 @@
}else {
this.$message({ message:'上传失败,请重新上传',type:'error'});
}
this.loading = false;
})
});
},
// 轮播图 删除前
beforeRemoveCarouselImg(file,fileList) {
console.log("轮播图删除前66", file);
console.log("轮播图删除前77", fileList);
if(file.status === 'success') {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
this.ruleFormdialogImageUrl.splice(i,1);
}
}
console.log(275,this.ruleFormdialogImageUrl);
this.$message({
type: 'success',
message: '删除成功!'
});
return res();
}).catch(() => {
this.$message({
......@@ -293,7 +293,21 @@
});
}
},
// 商品轮播图删除
removeCarouseImg(file){
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
this.ruleFormdialogImageUrl.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 轮播图预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
......@@ -309,27 +323,10 @@
this.$emit('imgclicks', pic)
},
// 重置
resetGoodsImgForm(form) {
resetGoodsImgForm() {
this.ruleFormdialogImageUrl = [];
this.ruleFormdialogImageUrlplus = [];
},
// removeAaary(_arr, _obj) {
// var length = _arr.length;
// for (var i = 0; i < length; i++) {
// if (_arr[i] == _obj) {
// if (i == 0) {
// _arr.shift(); //删除并返回数组的第一个元素
// return _arr;
// } else if (i == length - 1) {
// _arr.pop(); //删除并返回数组的最后一个元素
// return _arr;
// } else {
// _arr.splice(i, 1); //删除下标为i的元素
// return _arr;
// }
// }
// }
// },
// -------------------------通用
// 图片转换为 base64
getBase64(file) {
......
......@@ -12,48 +12,52 @@
</el-popover>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options" @change="handleChange" style="width:400px;"></el-cascader>
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
style="width:400px;"></el-cascader>
</el-form-item>
<el-form-item label="市场原价" prop="scPrice">
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="指导售价" prop="price">
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="结算价格" prop="jsPrice">
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="运费模板" prop="freightId">
<el-radio-group v-model="ruleForm.resource" >
<el-radio label="0">单独运费</el-radio>
<el-radio-group v-model="ruleForm.resource">
<el-radio label="1">运费模板</el-radio>
<el-radio label="0">单独运费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
<el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="运费模板" v-if="ruleForm.resource==1">
<el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;">
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id" style="text-align:center;"></el-option>
<!-- <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> -->
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效" prop="Delayompensate">
<el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
......@@ -62,7 +66,7 @@
<el-option label="72小时" value="72" style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长">
<el-form-item label="售后时长" prop="aftersaleTime">
<el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" value="7" style="text-align:center;"></el-option>
<el-option label="15天" value="15" style="text-align:center;"></el-option>
......@@ -74,25 +78,38 @@
<!-- right -->
<el-col :span="12">
<el-form-item label="商品库存" prop="goodsNowStock">
<el-input v-model="ruleForm.goodsNowStock" style="width:400px;"></el-input>
<el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品产地" prop="producingArea">
<el-input v-model="ruleForm.producingArea " style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="weight">
<el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
克(g)
</el-form-item>
<el-form-item label="商品单位" prop="unit">
<el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
</el-form-item>
<!-- <el-form-item label="商品品牌" prop="goodsBrand">-->
<!-- <el-input v-model="ruleForm.goodsBrand" style="width:400px;"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="商品品牌" prop="goodsBrand">
<el-input v-model="ruleForm.goodsBrand" style="width:400px;"></el-input>
<el-select v-model="ruleForm.goodsBrand" style="width:400px;" @change="goodsBrandChange" placeholder="请选择品牌">
<el-option
v-for="item in brandOtions"
:key="item.id"
:label="item.brand_cn"
:value="item.id">
</el-option>
</el-select>
<el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
</el-form-item>
<el-form-item label="三方编号" prop="outGoodsId">
<el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -104,15 +121,13 @@
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详情描述" style="height:600px;" prop="description">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:500px;"></quill-editor>
<el-form-item label="详情描述" style="height:600px; margin-bottom: 0;" prop="description">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;"></quill-editor>
</el-form-item>
<el-form-item>
<!-- <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>-->
<el-button @click="resetGoodsInfForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
......@@ -121,6 +136,8 @@
GetCategory,
GetFreight
} from '@/api/module/goods'
import {getBrandsInf} from '@/api/module/brand/brand'
export default {
name: 'goods',
props: {
......@@ -130,6 +147,13 @@
}
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
callback(new Error("请选择商品分类"));
} else {
callback();
}
};
return {
tags: [
{id: 2, tag: "假一赔十"},
......@@ -146,6 +170,7 @@
editorOption: {
placeholder: '编辑内容'
},
brandOtions: [],
serviceagsTags: [],
ruleForm: {
outGoodsId: '',
......@@ -159,7 +184,7 @@
weight: '',
unit: '', //单位
goodsBrand: '', //品牌
resource: '0',
resource: "1",
categoryId: 0,
freightId: '', //运费模板ID
wlPrice: '',
......@@ -172,79 +197,28 @@
description: ''
},
rules: {
goodsName: [{
required: true,
message: '请输入商品名称',
trigger: 'blur'
},
{
min: 3,
max: 50,
message: '长度在 3 到 50 个字符',
trigger: 'blur'
}
goodsName: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
],
categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}],
price: [{required: true, message: '请填写指导售价', trigger: 'blur'}],
jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}],
scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}],
goodsNowStock: [
{required: true, message: '商品库存不能为空', trigger: 'blur'},
{type: 'number', message: '商品库存要填写数字'},
],
categoryId: [{
required: true,
message: '请选择类别',
trigger: 'change'
}],
price: [{
required: true,
message: '请填写指导售价',
trigger: 'blur'
}],
jsPrice: [{
required: true,
message: '请填写结算售价',
trigger: 'blur'
}],
scPrice: [{
required: true,
message: '请填写市场原价',
trigger: 'blur'
}],
// resource: [{
// required: true,
// message: '请选择运费选项',
// trigger: 'change'
// }],
// desc: [{
// required: true,
// message: '请填写描述',
// trigger: 'blur'
// }]
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
},
// 运费模板列表
freightList: [],
options: [{
id: 'zhinan',
name: '指南',
children: [{
id: 'shejiyuanze',
name: '设计原则',
children: [{
id: 'yizhi',
name: '一致'
}, {
id: 'fankui',
name: '反馈'
}, {
id: 'xiaolv',
name: '效率'
}, {
id: 'kekong',
name: '可控'
}]
}]
}]
options1: []
}
},
components: {
},
components: {},
watch: {
serviceagsTags: {
handler(val, oldVal) {
......@@ -267,38 +241,43 @@
deep: true
},
infomationdatas(curVal, oldVal) {
//console.log("商品信息子组件:",curVal);
if (curVal) {
curVal['resource'] = '0'
this.ruleForm = curVal
curVal['resource'] = '0';
this.ruleForm = curVal;
if (curVal.wlPrice > 0) {
this.ruleForm.resource = '0'
this.ruleForm.resource = '0';
} else {
this.ruleForm.resource = '1'
this.ruleForm.resource = '1';
}
this.content = this.ruleForm.description
this.content = this.ruleForm.description;
this.ruleForm.servicetagsTags.forEach((val) => {
if (val) {
let nid = parseInt(val)
this.serviceagsTags.push(nid)
let nid = parseInt(val);
this.serviceagsTags.push(nid);
}
})
}
}
},
mounted() {
this.getCategory();
this.getFreight();
this.getBrands();
},
methods: {
// 获取品牌信息
getBrands() {
getBrandsInf().then(res => {
if (res.data.data) {
this.brandOtions = res.data.data;
}
});
},
// 获取 商品分类 信息
getCategory() {
GetCategory({}).then(response => {
this.options = response.data.data
this.options1 = response.data.data;
});
},
getFreight() {
......@@ -311,7 +290,7 @@
},
setTreeData(arr) {
// 删除所有 children,以防止多次调用
arr.forEach(function(item) {
arr.forEach(function (item) {
delete item.children;
});
let map = {}; // 构建map
......@@ -330,18 +309,43 @@
});
return treeData;
},
onEditorChange({
editor,
html,
text
}) {
onEditorChange({editor, html, text}) {
this.content = html;
//console.log(315,this.content);
},
// 商品品牌 向后台传入 name
goodsBrandChange(indexId) {
let obj = {};
obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
return item.id === indexId;//筛选出匹配数据
});
this.ruleForm.goodsBrand = obj.brand_cn;
},
// 维护品牌
toBrand() {
this.$router.push({path: '/system/shop/brand'});
},
resetGoodsInfForm(formName) {
this.$refs[formName].resetFields();
}
// 详情描述,重置
this.content = '';
// 服务标签
this.serviceagsTags = [];
//console.log("重置后的数据:",this.ruleForm);
},
// 商品信息 子组件 form表单校验
validateGoodsInfForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
}
}
......@@ -350,15 +354,15 @@
ul,
li {
list-style: none;
margin: 0;
padding: 0;
/*margin: 0;*/
/*padding: 0;*/
}
.ullist {
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
/*.ullist {*/
/* border: 1px solid #e7eaec;*/
/* padding: 10px;*/
/* margin-bottom: 10px;*/
/*}*/
.el-input-group {
width: calc(100% - 60px);
......
......@@ -3,12 +3,14 @@
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>{{title}}</span>
<el-button style="float: right; " icon="el-icon-check" size="mini" type="primary" @click="submitForm">提 交
<el-button style="float: right; margin:0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿
</el-button>
<el-button style="float: right; " size="mini" type="primary" @click="submitForm(1)">提 交 上 架
</el-button>
</div>
<el-tabs type="border-card">
<el-tab-pane label="商品信息">
<Goodsinfomation :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
<Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
</el-tab-pane>
<el-tab-pane label="商品图片">
<Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
......@@ -40,11 +42,14 @@
parameterdata: {},
goodsOnsale: 0,
loading: false,
applyStatus: '',
title: "添加新商品",
imgdate: [],
guidedate: {},
parameterdate: {},
params: {}
params: {
applyStatus: 0
}
}
},
components: {
......@@ -58,20 +63,19 @@
},
methods: {
getParams() {
var goodsId = this.$route.query.goodsId
let goodsId = this.$route.query.goodsId
if (goodsId > 0) {
this.title = "编辑商品信息"
this.genGoodsInfo(goodsId)
this.title = "编辑商品信息";
this.genGoodsInfo(goodsId);
}
// if (goodsId > 0 ) {
// this.genGoodsInfo(goodsId)
// }
},
// 获取商品详情
genGoodsInfo(goodsId) {
const goods_id = goodsId
this.loading = true;
const goods_id = goodsId;
getGoods(goods_id).then(response => {
this.goodsOnsale = response.data.data.isOnsale;
if(response.data.code === 1 && response.data.data) {
this.goodsOnsale = response.data.data.isOnsale;
this.infomationdata = {
goodsId: response.data.data.goodsId,
goodsName: response.data.data.goodsName,
......@@ -93,14 +97,21 @@
freightId: response.data.data.freightId,
outGoodsId: response.data.data.outGoodsId,
};
this.guidedate = response.data.data.goodsSpecs
this.guidedate["goodsSpec"] = response.data.data.goodsSpec
this.parameterdata = response.data.data.Params
this.imgdate = {
"ruleFormdialogImageUrl": response.data.data.image,
"ruleFormdialogImageUrlplus": response.data.data.defaultImage
this.guidedate = response.data.data.goodsSpecs;
this.guidedate["goodsSpec"] = response.data.data.goodsSpec;
this.parameterdata = response.data.data.Params;
this.imgdate = {
"ruleFormdialogImageUrl": response.data.data.image,
"ruleFormdialogImageUrlplus": response.data.data.defaultImage
};
}else if(response.data.code === 0) {
if(response.data.msg) {
this.$message({type:'error',message: response.data.msg});
}else {
this.$message({type:'error',message: '数据出错啦'});
}
}
this.loading = false;
});
},
info() {
......@@ -116,12 +127,15 @@
},
//商品图片
imgclick(type) {
let img = []
let img = [];
type.ruleFormdialogImageUrl.forEach((res, index) => {
img.push(res.url)
})
this.params["imgs"] = img
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url
this.params["imgs"] = img;
this.params["defaultImg"] = ''
if(type.ruleFormdialogImageUrlplus.length > 0) {
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
}
},
//规格
guideclick(type, specsGroup) {
......@@ -134,30 +148,130 @@
},
/** 确定按钮 */
submitForm() {
submitForm(status) {
this.params.applyStatus = 0;
this.params.isOnsale = this.goodsOnsale;
if(status === 1) {
this.params.applyStatus = 1;
}
// console.log("gogogogog",this.params);
// 商品信息 表单字段校验
let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
// 商品图片 校验
let isGoodSImgMsg = 'defaultImg' in this.params;
if(!isGoodInfMsg) {
if(!('goodsName' in this.params)) {
this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整!'});
return;
}
if('goodsName' in this.params) {
if(this.params.goodsName === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写!'});
return;
}
if(this.params.categoryId === 0) {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写!'});
return;
}
if(this.params.scPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写!'});
return;
}
if(this.params.price === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写!'});
return;
}
if(this.params.jsPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写!'});
return;
}
if(this.params.goodsNowStock === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写!'});
return;
}
if(this.params.unit === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写!'});
return;
}
if(this.params.goodsBrand === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写!'});
return;
}
}
}
if(!isGoodSImgMsg) {
this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片!'});
return;
}else {
if('defaultImg' in this.params) {
if(this.params.defaultImg === '') {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传!'});
return;
}
if(this.params.imgs.length === 0) {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传!'});
return;
}
}
}
this.loading = true;
addGoods(this.params).then(response => {
if (response.data.code == 1) {
if (response.code === 1) {
this.$message({
message: response.data.msg,
message: response.msg,
type: 'success'
});
this.$emit('closeDialog',false);
if (this.goodsOnsale) {
var redUrl = '/system/goods/onsale'
var redUrl = '/system/goods/onsale';
} else {
var redUrl = '/system/goods/offsale'
var redUrl = '/system/goods/offsale';
}
this.$router.push({
path: redUrl
});
} else {
this.$message.error(response.data.msg);
} else if(response.code === 0) {
if(response.msg) {
this.$message.error(response.msg);
}else {
this.$message.error("操作失败!");
}
}
this.loading = false;
});
},
//------ 通用方法 -----
verifiesForm(type,fieldName,obj) {
// 先判断类型,字符串类型type === text, 下拉形式字段 select
if(type === 'text') {
// 没有这个属性,肯定没有填写,抛出提示
if(!(fieldName in obj)) {
return 1;
}
}
if(type === 'select') {
}
// 如果有这个属性,那么进一步判断,这个必填值是否填写
// if(fieldName in obj && !obj[fieldName]) {
// return 2
// }
}
}
}
</script>
......
......@@ -173,10 +173,16 @@
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(response => {
if (response.data != null) {
this.goodsList = response.data.data.list;
this.total = response.data.data.count;
listGoods(this.queryParams).then(res => {
if(res.code === 1 && res.data) {
this.goodsList = res.data.list;
this.total = res.data.count;
}else if(res.code === 0) {
if(res.msg) {
this.$message({type: 'error',message: res.msg});
}else {
this.$message({type: 'error',message: '数据出错啦!'});
}
}
this.loading = false;
});
......
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span></span>
<el-row :gutter="10" class="mb8">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-row :gutter="10">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-col :span="4">
<el-form-item label="商品Id" prop="goodsId">
<el-input
size="small"
placeholder="请输入商品Id"
v-model="queryParams.goodsId"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="商品名称" prop="goodsName">
<el-input
size="small"
placeholder="请输入商品名称"
v-model="queryParams.goodsName"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1.5">
<el-button
size="mini"
type="primary"
icon="el-icon-search"
class="button-mgtop3"
@click="handleQuery"
>搜索</el-button>
</el-col>
<el-col :span="1.5">
<el-button
size="mini"
icon="el-icon-refresh"
class="button-mgtop3"
@click="resetQuery('queryForm')"
>重置</el-button>
</el-col>
</el-form>
</el-row>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
>新增
</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
@click="handleOnsale"
>修改</el-button>
</el-col> -->
<!-- <el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
@click="handleOnsale"
>修改</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="success"
......@@ -30,153 +68,128 @@
>商品下架
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
</el-row>
</div>
<!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="商品ID" prop="goods_id">
<el-input
v-model="queryParams.goods_id"
placeholder="请输入商品ID"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form> -->
<el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="" align="center" width= "100" prop="defaultImage">
<template slot-scope="scope">
<el-image
style="width: 60px; height: 50px"
:src="scope.row.defaultImage"
></el-image>
</template>
</el-table-column>
<el-table-column label="商品ID" align="center" prop="goodsId" />
<el-table-column label="商品名称" align="center" prop="goodsName" />
<el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice" />
<el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice" />
<el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice" />
</div>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改goods对话框 -->
<el-dialog :title="title" :visible.sync="open" :modal-append-to-body ="false" width="90%" style="height:90%;overflow:hidden;" append-to-body>
<IndexBtn :option="form" />
</el-dialog>
<el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="" align="center" width="100" prop="defaultImage">
<template slot-scope="scope">
<el-image
style="width: 60px; height: 50px"
:src="scope.row.defaultImage"
></el-image>
</template>
</el-table-column>
<el-table-column label="商品ID" align="center" prop="goodsId"/>
<el-table-column label="商品名称" align="center" prop="goodsName"/>
<el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
<el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
<el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleOffGoods(scope.row)"
>下架
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改goods对话框 -->
<el-dialog :title="title" :visible.sync="open" :modal-append-to-body="false" width="90%"
style="height:90%;overflow:hidden;" append-to-body>
<IndexBtn :option="form"/>
</el-dialog>
</el-card>
</div>
</div>
</template>
<script>
import IndexBtn from '../add'
import { listGoods, getGoods, delGoods, addGoods, updateGoods, Onsale } from '@/api/module/goods'
export default {
name: "goods",
data() {
return {
fullHeight: '',
tableHeight:null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// goods表格数据
goodsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
import {listGoods, getGoods, delGoods, addGoods, updateGoods, Onsale} from '@/api/module/goods'
export default {
name: "goods",
data() {
return {
fullHeight: '',
tableHeight: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// goods表格数据
goodsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
isOnsale:1
isOnsale: 1
},
// 表单参数
form: {},
// 表单校验
rules: {
goods_name: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
],
}
form: {},
// 表单校验
rules: {
goods_name: [
{required: true, message: "商品名称不能为空", trigger: "blur"}
],
}
};
},
components:{
IndexBtn
components: {
IndexBtn
},
created() {
this.getList();
this.$nextTick(()=>{
this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
})
this.getList();
this.$nextTick(() => {
this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
})
},
watch:{
fullHeight(val,oldval){
console.log(val)
watch: {
fullHeight(val, oldval) {
this.tableHeight = val - 150
}
},
methods: {
/*商品下架*/
/*商品下架*/
handleOffGoods(row) {
const rowIds = row.roleId || this.ids;
const rowIds = row.goodsId || this.ids;
let params = {"ids": rowIds, "status": 0};
if(!rowIds || rowIds.length === 0) {
this.$message({ message: '请先选择要下架的商品数据', type: 'warning'});
if (!rowIds || rowIds.length === 0) {
this.$message({message: '请先选择要下架的商品数据', type: 'warning'});
return;
}
this.$confirm('是否确认下架商品ID为"' + rowIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
}).then(function () {
return Onsale(params);
}).then(() => {
this.getList();
......@@ -184,137 +197,131 @@ export default {
})
},
//格式化价格
formatePrice(row,s,value,i){
var nm =0
formatePrice(row, s, value, i) {
var nm = 0
var money = value
if (money>0){
nm = money/100
if (money > 0) {
nm = money / 100
}
return nm
},
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(response => {
if(response.data != null){
this.goodsList = response.data.data.list;
this.total = response.data.data.count;
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(res => {
if(res.code === 1 && res.data) {
this.goodsList = res.data.list;
this.total = res.data.count;
}else if(res.code === 0) {
if(res.msg) {
this.$message({type: 'error',message: res.msg});
}else {
this.$message({type: 'error',message: '数据出错啦!'});
}
this.loading = false;
// return false
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.goodsId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 下架操作 */
handleOnsale(){
Onsale({"ids":this.ids,"status":0}).then(response => {
this.msgSuccess("成功申请"+response.data.length+"个商品");
});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加goods";
},
/** 详情按钮操作 */
handleUpdate(row) {
const goods_id = row.goodsId
this.$router.push({
path: '/system/goods/add', query:{goodsId: goods_id}
}
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.goodsId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 下架操作 */
handleOnsale() {
Onsale({"ids": this.ids, "status": 0}).then(response => {
this.msgSuccess("成功申请" + response.data.length + "个商品");
});
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push({
path: '/system/goods/add'
});
},
/** 详情按钮操作 */
handleUpdate(row) {
const goods_id = row.goodsId
this.$router.push({
path: '/system/goods/add', query: {goodsId: goods_id}
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.goods_id != null) {
updateGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.goodsId != null) {
updateGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const goods_ids = row.goods_id || this.ids;
this.$confirm('是否确认删除goods编号为"' + goods_ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delGoods(goods_ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
},
});
},
// 重置
resetQuery(form) {
this.resetForm("queryForm");
this.handleQuery();
},
} //methods结束
};
};
</script>
<style scoped>
.app-container{
height:100%;
}
.app-container {
height: 100%;
}
/deep/ .el-dialog {
height: 100%;
}
/deep/ .el-dialog__body {
height: 80%;
overflow-y: scroll;
}
.box-card {
height: 100%;
}
/deep/ .el-dialog {
height: 100%;
}
/deep/.el-dialog__body {
height: 80%;
overflow-y: scroll ;
}
.box-card /deep/ .el-card__body {
height: 100%;
overflow: hidden;
}
.box-card{
height:100% ;
}
.box-card /deep/ .el-card__body{
height:100%;
overflow: hidden;
}
.el-table{
height:calc(100% - 120px);
}
.el-table {
height: calc(100% - 120px);
}
/deep/.button-mgtop3 {
margin-top: 3px;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论