忒麻烦的一个页面，搞了我好长时间
2019-06-05 本文已影响0人
糖醋里脊120625
<template>
<div id="contents">
<div class="top">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-select v-model="formInline.region" placeholder="选择字段" value-key="id" style="width: 120px;">
<el-option
v-for="item in quyuitem"
:key="item.id"
:label="item.className"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.user" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item>
<!--<el-button type="primary">查询</el-button>-->
<el-button type="primary" width="40%" @click="getList(1)">筛选</el-button>
<el-button type="warning" width="40%" @click="reset">重置</el-button>
</el-form-item>
<el-form-item><el-button type="success" width="40%" @click="buildNewCon()" style="margin-left:100px">+新增商品</el-button></el-form-item>
</el-form>
</div>
<div class="content_table">
<div class="btn_search" style="margin-bottom: 20px">
<div style="padding-right: 0">
<!--<el-input-->
<!--placeholder="请输入内容"-->
<!--small-->
<!--v-model="searchValue">-->
<!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--</el-input>-->
</div>
</div>
<div class="btn_content">
<el-table id="mytable" stripe :data="tableDatas" border :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column label="序号" sortable width="80%" type="index" :resizable="resizable">
</el-table-column>
<el-table-column prop="oPictureUrlDto" label="商品缩略图" >
<template slot-scope="scope">
<img :src="scope.row.oPictureUrlDto.url+scope.row.oPictureUrlDto.name " alt="" style="width: 50px;height: 50px">
</template>
</el-table-column>
<el-table-column prop="productNumber" label="商品编码" >
</el-table-column>
<el-table-column prop="barCode" label="商品条码" >
</el-table-column>
<el-table-column prop="goodName" label="货名" >
</el-table-column>
<el-table-column prop="productName" label="商品名称" >
</el-table-column>
<el-table-column prop="lastUpdateTime" label="上次修改时间" >
</el-table-column>
<el-table-column prop="reviewStatus" label="状态" >
<template slot-scope="scope">
<span v-if="scope.row.reviewStatus === 1" class="el-tag el-tag--danger">待提交审核</span>
<span v-else-if="scope.row.reviewStatus === 2" class="el-tag el-tag--success">审核中</span>
<span v-else-if="scope.row.reviewStatus === 3" class="el-tag el-tag--warning">拒绝审核</span>
<span v-else-if="scope.row.reviewStatus === 4" class="el-tag el-tag--warning">已审核</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<div class="operate-groups">
<el-button @click="submitexam(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >提交审核 </el-button>
<el-button @click="editEach(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >编辑 </el-button>
<el-button @click="deleteach(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >删除 </el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >查看 </el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div id="pages">
<pages :currentPage=currentPage :total=total @setup="changepages"></pages>
</div>
</div>
<!--//新增弹出新增的部分------------------------------------------------------------------>
<div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="showself">
<div class="el-dialog" style="padding:20px 20px; margin-top: 20px;z-index: 1000;">
<div class="el-dialog__header">
<span class="el-dialog__title">{{this.buildTitle}}</span>
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeself">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<el-form ref="form" :model="form" label-width="132px">
<el-form-item class="changeclass">
<el-col :span="12" class="wocao">
<el-form-item label="商品编码：" :required="true">
<el-input v-model="form.editproNumber" type="number" @blur="firsttime()"></el-input>
</el-form-item>
<el-form-item label="商品名称：" :required="true" >
<el-input v-model="form.editproName" maxlength="60"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="wocao">
<el-form-item label="商品条码：" :required="true">
<el-input v-model="form.editbarCode" :maxlength="10" type="number" @blur="firsttime()" ></el-input>
</el-form-item>
<el-form-item label="货名：" :required="true">
<el-input v-model="form.editgoodName" maxlength="60" @blur="firsttime()"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="标签：">
<el-tag v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
:maxlength=10
>
</el-input>
<el-button v-else class="button-new-tag" @click="showInput" >点击添加标签</el-button>
</el-form-item>
<el-form-item label="缩略图: (120*120)" :required="true">
<el-upload
id="yizhang"
class="avatar-uploader"
accept="image/jpg,image/png,image/jpeg"
action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
list-type="picture-card"
:before-upload="beforeload"
:file-list="upImgList"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success='smallIMG'
:limit="1"
name="imgFileTmp"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品滚动图: (400*400)" :required="true">
<el-upload
accept="image/jpg,image/png,image/jpeg"
action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
list-type="picture-card"
:before-upload="uploadform"
:on-progress="handleProgress"
:file-list="imgUrls"
:on-remove="delupimgs"
:on-exceed="handleExceed"
:on-success='uploadSuc'
v-loading.fullscreen.lock="fullscreenLoading"
:limit="4"
name="imgFileTmp"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-col :span="12">
<el-form-item label="重量(kg)：" :required="true">
<el-input type="number" v-model="form.editweight" min="0">></el-input>
</el-form-item>
<el-form-item label="市场价(元)：">
<input type="number"
class="sichangjia"
v-model="form.editmarketPrice"
placeholder="市场价"
min=0
maxlength=4
@focus="changejiage()"
@input="sichangjia">
</input>
</el-form-item>
</el-col>
<!--------------新增的模板的样式开始--------------->
<el-form-item label="商品模板：" style="overflow: hidden;clear: both;" :required="true" class="xuansel" >
<el-select v-model="editselvalue" placeholder="模板选择" @change="currentSel" value-key="id" style="">
<el-option
v-for="item in templets"
:key="item.id"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<div style="overflow: hidden;padding: 4px; " class="mobanall">
<el-col :span="12" v-for="(item,index ) in buildmouldlist">
<div v-if="item.attribute === 0">
<el-form-item :label="item.name" >
<i v-if="item.isMandatory===0" class="vip">*</i>
<el-input v-model="item.inputtxt" ></el-input>
</el-form-item>
</div>
<div v-if="item.attribute === 1">
<el-form-item :label="item.name" >
<i v-if="item.isMandatory===0" class="vip">*</i>
<el-select v-model="item.inputtxt" >
<el-option
v-for="(amount,index) in item.pushdata"
:key="index"
:label="amount"
:value="amount">
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</div>
<!--<div @click="ceshi">asSASASDAD</div>-->
<div class="buildeditorElem">
<el-form-item label="" >
</el-form-item>
<div id="editorElem" style="text-align:left; border-bottom: 1px solid #e1e1e1;"></div>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="viewsee" >预览文本框内容</el-button>
<el-button type="primary" @click="onSubmit" >提 交</el-button>
</div>
</div>
</div>
<div class="el-dialog made" v-show="viewlan" style="padding:20px 20px; margin-top: -20px; top: -200px; z-index: 999999999; width: 90%;">
<h4>预览</h4>
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeview">
<i class="el-dialog__close el-icon el-icon-close"></i>关闭
</button>
<div class="yulanmain" v-html="editorContent"></div>
</div>
<!--//查看弹出查看的部分------------------------------------------------------------------>
<el-dialog title="查看" :visible.sync="dialogFormVisible">
<el-row>
<label class="el-form-item__label" style="width: 100px; text-align: center;">缩略图:</label>
<div class="imgview">
<img :src="this.viewinames" style="width: 100%; height: 100%;">
</div>
</el-row>
<el-row>
<el-col :span="12"><span>商品编码：</span><span>{{viewproductNumber}}</span></el-col>
<el-col :span="12"><span>商品条码：</span><span>{{viewbarCode}}</span></el-col>
</el-row>
<el-row>
<el-col :span="12"><span>货名：</span><span>{{viewgoodName}}</span></el-col>
<el-col :span="12"><span>商品名称：</span><span>{{viewproductName}}</span></el-col>
</el-row>
<el-row>
<el-col :span="12"><span>标签：</span><span>{{viewtags}}</span></el-col>
</el-row>
<el-row>
<div class="imgparts">
<label class="el-form-item__label" style="width: 100px; text-align: center;">滚动图:</label>
<div class="imgsallwall">
<span v-for="(item,index) in viewimgall">
<img :src="item.url+item.name" style="width: 100%; height:60px;width: 60px;">
</span>
</div>
</div>
</el-row>
<el-row>
<el-col :span="12"><span>重量：</span><span>{{viewheight}}</span></el-col>
<el-col :span="12"><span>市场价：</span><span>{{viewprice}}</span></el-col>
</el-row>
<el-row>
<el-col :span="12"><span>模板类型：</span><span>{{viewclass}}</span></el-col>
</el-row>
<el-row>
<el-col :span="12"><span>模板单位：</span><span v-for="(item,inbdex) in viewtodo " style="display: inline-block; margin: 0px 8px;">{{item.attrName}}</span></el-col>
</el-row>
<el-row>
<el-col :span="12"><span>浏览：</span><div id="viewhtml" v-html="vieweditor"></div></el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelrefuse" type="danger">拒 绝</el-button>
<el-button type="primary" @click="sucesspuss">通 过</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import E from 'wangeditor'
import pages from '../../component/pagination/pagination'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {API} from '../../lib/api'
import Qs from 'qs'
export default {
name: 'editor',
data() {
return {
xindeshuju:"",
quyuitem:[
{
id:1,
className:"商品编码",
},
{
id:2,
className:"商品条码",
},
{
id:3,
className:"货名",
},
{
id:4,
className:"商品名称",
},
],
fullscreenLoading: false,
buildidmain:'',
editor:{},
transfer:[],
viewlan: false,
buildmouldlist:[],
editselvalue:'',
mouldid:'',
showself:false,
editorContent: '',
buildTitle:'',
//标签初始化
dynamicTags: [],
inputVisible: false,
inputValue: '',
//上传商品图片初始化
dialogImageUrl: '',
//上传商品缩略图的列表
upImgList: [],
picsList:[],
imgUrls: [],
builddata:[],
dialogVisible: false,
//表单初始化
form: {
editproNumber:'',//条码
editproName:'',//商品名称
editbarCode:'',//货名
editgoodName: '',//展示名称
editweight:'',//保质期
editmarketPrice:'',//市场价
goodsSales:'',//销量
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
value:'',
},
formLabelWidth: '80px',
dialogFormVisible: false,
buildNewmain: false,
showFlag: false,
resizable:false,
input9:'',
value5:'',
options: [],
value1: -1,
value2: '2',
value3: '1',
input: '',
tableData:[],
htmlTitle: '表格数据',
searchValue:'',
total:null,
value4: '',
currentPage:1,
excelData:[],
formDate:"",
form:{},
fileList:[],
formInline: {
user: '',
region: ''
},
templets: [],
value: '',
obj:{},
viewinames:'',
viewbarCode:'',
viewproductNumber:'',
viewgoodName:'',
viewproductName:'',
viewid:'',
viewtags:'',
viewimgall:[],
viewheight:'',
viewprice:'',
viewclass:'',
viewtodo:[],
vieweditor:'',
editimgnum:[],
smallimgall:[],
moreimgall:[],
smallname:'',
smallurl:'',
togoodName:'',
tobarCode:'',
toproductNumber:'',
toproductName:'',
mustfill: false,
againfill:false
}
},
created() {
this.axios({
method:'POST',
url:`${API}/sku/productTemplate/list`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data:Qs.stringify({
uuid:localStorage.getItem('uuid')
})
}).then(res=>{
//console.log(res.data.msg)
if (res.data.code=== 200){
console.log(res.data.data.listStockDetail)
this.templets=res.data.data.listStockDetail;
// this.templets=[{
// id:-1,
// className:"无需模板",
// }].concat(res.data.data);
//console.log(this.templets)
}
});
this.getList(1);
},
components:{
pages
},
methods: {
ceshi(){
//alert(this.editorContent)
},
firsttime(){
let myData =Qs.stringify({
barCode: this.form.editbarCode,//商品条码
productNumber:this.form.editproNumber,//商品编码
goodName: this.form.editgoodName,
uuid:localStorage.getItem('uuid')
});
this.axios({
method: 'POST',
url: `${API}/sku/o-product/flag`,
data:myData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
if(res.data.code==200){
}else{
this.$message({
type: 'warning',
message: '不可以重复输入，请重新输入'
});
this.form.editgoodName="";
this.form.editproNumber="";
this.form.editbarCode=""
}
})
},
sichangjia(e){
console.log(e.target.value)
e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
},
changejiage(e){
console.log(e)
},
//缩略图
beforeload (file) {
let _this = this
if(file.type.indexOf('image') < 0) {
this.$alert({
message: '图片格式不正确',
btn: false
})
return false
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 120;
let height = 120;
let _URL = window.URL || window.webkitURL;
let img = new Image();
console.log(window.URL)
console.log(window.webkitURL)
console.log(_URL)
console.log(img)
img.onload = function() {
let valid = img.width <= width && img.height <= height;
console.log("实际长度"+img.width)
console.log("控制的长度"+width)
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
_this.$message({
type: 'error',
message: '上传的缩略图不得大于120*120!'
});
return Promise.reject();
});
console.log(isSize)
return isSize
},
uploadform (file) {
let _this = this
if(file.type.indexOf('image') < 0) {
this.$alert({
message: '图片格式不正确',
btn: false
})
return false
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 400;
let height = 400;
let _URL = window.URL || window.webkitURL;
let img = new Image();
console.log(img)
img.onload = function() {
let valid = img.width <= width && img.height <= height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
_this.$message({
type: 'error',
message: '上传的缩略图不得大于400*400!'
});
return Promise.reject();
});
return isSize
},
smallIMG(response, file, fileList){
console.log(response)
console.log(fileList)
this.smallimgall =fileList;
},
uploadSuc(response, file, fileList){
this.fileChange(fileList);
},
delupimgs( file, fileList) {
this.fileChange(fileList);
},
fileChange(fileList) {
this.moreimgall = fileList;
},
deleteach(a,r){
let formData = new FormData()
formData.append('id', JSON.stringify(r.id))// 权限类型 系统 模块 菜单选择
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url: `${API}/sku/o-product/delete/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
if(res.data.code==200){
this.$message({
type: 'success',
message: '删除成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '删除失败'
});
}
})
})
},
//商品模板
currentSel(val){
this.mouldid = val.id;
if(this.mouldid !== -1){
this.axios({
method:'POST',
url:`${API}/sku/productTemplateAttr/list`+"?ptId="+this.mouldid ,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data:Qs.stringify({
uuid:localStorage.getItem('uuid')
})
}).then(res=>{
console.log(res)
//比较烦开始 input为一个数组 下拉为一个数组
res.data.data.listStockDetail.map((item) => {
var inputtxt="";
var seltxt="";
var newsel=[];
newsel.push(item.attributeValue.split(';'))
this.$set(item, 'pushdata', item.attributeValue.split(';'))
this.$set(item, 'inputtxt', inputtxt)
console.log(item.pushdata)
});
console.log("变更后的数据")
console.log(res.data.data.listStockDetail)
this.buildmouldlist = res.data.data.listStockDetail
});
}else{
this.buildmouldlist =[];
}
},
//编辑的时候加载模板
bianjimoban(val, mainobj){
this.axios({
method:'POST',
url:`${API}/sku/productTemplateAttr/list`+"?ptId="+val ,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data:Qs.stringify({
uuid:localStorage.getItem('uuid')
})
}).then(res=>{
console.log("三个数据都打印出来")
mainobj.map((item,index) => {
var inputtxt="";
var seltxt="";
var id="";
var newsel=[];
res.data.data.listStockDetail[index]["inputtxt"]= item.atrrValue
});
res.data.data.listStockDetail.map((item) => {
this.$set(item, 'pushdata', item.attributeValue.split(';'))
this.buildmouldlist = res.data.data.listStockDetail
//this.buildmouldlist.push(moduleobj)//这一步是显示
});
console.log(res.data.data.listStockDetail)//经过处理过后得到的可以循环的数据
console.log(mainobj)
});
},
//标签初始化
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
if(this.dynamicTags.length>3){
this.inputVisible = false;
this.$message({
type: 'warning',
message: '最多只能上传4个标签！'
});
this.inputValue = '';
return false;
}
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
//上传超过的提示
handleExceed(files, fileList) {
this.$message.warning(`超出限制上传张数了!`);
},
/* //限制上传的方式
onBeforeUpload(file){
//////alert(file.type)
const isIMAGE = file.type === 'image/jpeg'&&'image/gif'&&'image/png';
//////alert(isIMAGE+"ss")
if (!isIMAGE) {
this.$message.error('上传文件只能是图片格式!');
}
return isIMAGE;
*/
//上传缩略图图片列表缩略图
andleRemove(file, fileList) {
},
handlePreview(file) {
},
//上传商品图片初始化
//删除图片的事件
handleRemove(file, fileList) {
},
handleRemove2(file, fileList) {
},
// 滚动图上传前验证
//提交审核
submitexam(index, self ){
let formData = new FormData()
formData.append('id', JSON.stringify(self.id));
formData.append('reviewStatus', 2)
this.$confirm('是否提交审核？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url: `${API}/sku/o-product/update-review/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
this.getList(1);
if(res.data.code==200){
this.$message({
type: 'success',
message: '提交成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '提交失败'
});
}
})
})
},
//编辑bianjijjjjjjjjjjj点击编辑显示用的
editEach(a,b){
var buildid = b.id;
this.buildidmain = b.id;
this.axios({
method:'get',
url:`${API}/sku/o-product/query/byid/do`+"?id="+buildid,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data:Qs.stringify({
uuid:localStorage.getItem('uuid')
})
}).then(res=>{
this.builddata = res.data.data;
//this.editselvalue = this.builddata.goodName;
this.mouldid = this.builddata.productTempleId;
this.smallurl = this.builddata.thumbPicOPictureUrlList[0].url;
//alert(this.smallurl)
//this.smallname = this.builddata.skuProductClassDto.name;
this.form.editmarketPrice = this.builddata.marketPrice;
////alert(this.builddata.marketPrice)
var newmodule =[];
var hightmodule=[];
this.buildmouldlist = [];
//hightmodule = JSON.parse(this.builddata.productTempleValue)
this.bianjimoban(this.mouldid,this.builddata.productTempleValue)
this.editselvalue =this.builddata.productTempleName;
hightmodule = this.builddata.productTempleValue;
//console.log(hightmodule)
hightmodule.map((item) => {
let moduleobj ={
attribute:parseInt(item.attribute),
id:item.id,
inputtxt:item.atrrValue,
name:item.attrName,
};
// this.buildmouldlist.push(moduleobj)//这一步是显示
});
console.log("模板")
console.log(this.buildmouldlist)
//this.buildmouldlist = newmodule;
//this.editorContent = decodeURI(res.data.data.detailHtmlText);
this.editorContent = res.data.data.detailHtmlText;
this.editimgnum = res.data.data.scrollOPictureUrlList;
//一张图回显
let suoimgobg =[];
let suoimgurl = {
"url": res.data.data.thumbPic,
};
suoimgobg.push(suoimgurl)
this.upImgList = res.data.data.thumbPicOPictureUrlList;
for(var j = 0;j<res.data.data.thumbPicOPictureUrlList.length;j++){
this.upImgList[j].url = res.data.data.thumbPicOPictureUrlList[j].url+res.data.data.thumbPicOPictureUrlList[j].name;
}
//多图回显
var showimgs=[];
res.data.data.scrollOPictureUrlList.map((item) => {
if(item.name != ""){
let showobj ={
name:item.name,
url:item.url,
id:item.id,
};
showimgs.push(showobj)
}
});
this.imgUrls = showimgs;
var imgall = [];
imgall = showimgs;
for(var j = 0;j<imgall.length;j++){
this.imgUrls[j].url = imgall[j].url +imgall[j].name;
}
this.editor.txt.html(this.editorContent);
});
this.buildTitle ="编辑";
this.showself = true;
this.form.editproNumber = b.productNumber;
this.form.editproName =b.productName;
this.form.editbarCode =b.barCode;
this.form.editgoodName =b.goodName;
this.form.editweight =b.weight;
if(b.tags==""){
this.dynamicTags=[];
}else{
this.dynamicTags = b.tags.split(',') ;
}
this.imgUrls = b.buildall;
},
uploadFile(file){
this.formDate.append('file', file.file);
},
//编辑和新增的表单提交事件
closeself(){
this.showself = false;
this.viewlan = false;
},
handleProgress(){
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 1000);
},
//详情图
pictsBefore(file){
var that = this;
},
onSubmit(){
//alert(this.moreimgall.length)
let param = new FormData();
if(this.form.editproName ==""||this.form.editbarCode==""||this.form.editgoodName==""|| this.editselvalue==""){
this.$message({
showClose: true,
message: '带"*"为必填，请填写完整后，再次提交',
type: 'error'
});
return false;
};
this.buildmouldlist.map((item) => {
if(item.isMandatory==0){
if(item.inputtxt==""){
this.mustfill = true
}else{
this.mustfill= false
}
}
});
if(this.mustfill== true){
this.$message({
showClose: true,
message: '模板必填项请填写完整',
type: 'error'
});
return false;
}
if(this.buildTitle =="新增"){
//新增缩略图
var toimgsamll =[];
this.smallimgall.map((item) => {
var datasmall = JSON.parse(item.response.data)
let obj = {
"name": datasmall[0].name,
"url": datasmall[0].url,
};
toimgsamll.push(obj)
});
//新增滚动图
var toimgsbig =[];
this.moreimgall.map((item) => {
var datasmall = JSON.parse(item.response.data)
let obj = {
"name": datasmall[0].name,
"url": datasmall[0].url,
};
toimgsbig.push(obj)
});
this.transfer =[];
this.buildmouldlist.map((item) => {
this.transfer.push({
"attrName":item.name,
"atrrValue": item.inputtxt, //店名称
"id": item.id,
"attribute":item.attribute,
"isMandatory":item.isMandatory//这是我改动的一步
})
});
//this.buildmouldlist=[]
param.append('productNumber', this.form.editproNumber)//商品名称
param.append('productName', this.form.editproName)//商品名称
param.append('barCode', this.form.editbarCode)//条形码
param.append('goodName', this.form.editgoodName)//货名
param.append('tags',this.dynamicTags)//标签
param.append('weight',this.form.editweight)//重量
param.append('marketPrice',this.form.editmarketPrice)//市场价
////alert(this.form.editmarketPrice)
param.append('productClassId',this.mouldid)//商品模板id
param.append('productClassAtrrValue', JSON.stringify(this.transfer))//模板json
param.append('detailHtmlText', this.editorContent)//富文本
//param.append('detailHtmlText', encodeURI(this.editorContent))//富文本
param.append('thumbPicStr', JSON.stringify(toimgsamll))//suoluetu
param.append(' scrollPicStr', JSON.stringify(toimgsbig))//suoluetu
console.log(param)
this.axios({
method: 'POST',
url:`${API}/sku/o-product/add/do`,
data: param,
headers:{'Content-Type':'multipart/form-data'},
}).then(res=>{
if(res.data.code === 200){
this.buildNewmain = false;
this.showself = false;
this.getList(1);
this.$message({
message: res.data.msg,
type: 'success'
});
}else{
this.buildNewmain = true;
this.showself = true;
this.$message({
message: res.data.msg ,
type: 'error'
});
}
}).catch( function(res){
this.showself = true;
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
});
});
}else if(this.buildTitle =="编辑"){
//--------------------------------------点击编辑时候的交互 提交后台----------------------------------------------------------------------
this.buildmouldlist.map((item) => {
if(item.isMandatory==0){
if(item.inputtxt==""){
this.againfill = true
}else{
this.againfill= false
}
}
});
if(this.againfill== true){
this.$message({
showClose: true,
message: '模板必填项请填写完整',
type: 'error'
});
return false;
}
//判断缩略图是否重新上传
var toimgsamll =[];
var that = this;
this.transfer =[];
console.log(that.buildmouldlist)
that.buildmouldlist.map((item) => {
this.transfer.push({
"attrName":item.name,
"atrrValue": item.inputtxt, //店名称
"id": item.id,
"attribute":item.attribute,
"isMandatory":item.isMandatory//这是我改动的一步
})
});
if(this.smallimgall.length == 0){
this.upImgList.map((item) => {
let obj = {
"name": item.name,
"url": this.smallurl,
};
toimgsamll.push(obj)
});
}else if(this.smallimgall.length !== 0){
this.smallimgall.map((item) => {
var datasmall = JSON.parse(item.response.data)
let obj = {
"name": datasmall[0].name,
"url": this.smallurl,
};
toimgsamll.push(obj)
})
}
if(this.moreimgall.length == 0){
var toimgsbig =[];
this.editimgnum.map((item) => {
let obj = {
"name": item.name,
"url": this.smallurl,
};
toimgsbig.push(obj)
});
}else if(this.moreimgall.length !== 0){
var toimgsbig =[];
this.moreimgall.map((item) => {
if(item.size){ //这是编辑时候产生的size
var datasmall = JSON.parse(item.response.data)
//console.log(datasmall[0].name)
toimgsbig.push({
name:datasmall[0].name,
url:this.smallurl,
})
}else if(item.id){
toimgsbig.push({
name:item.name,
url:this.smallurl,
})
}
//toimgsbig.push(obj)
});
}
if(this.dynamicTags.length == 0){
param.append('tags', '')//标签
}else{
param.append('tags',this.dynamicTags)//标签
}
param.append('productNumber', this.form.editproNumber)//商品名称
param.append('id', this.buildidmain)//商品名称
param.append('productName', this.form.editproName)//商品名称
param.append('barCode', this.form.editbarCode)//条形码
param.append('goodName', this.form.editgoodName)//货名
//param.append('tags',this.dynamicTags)//标签
param.append('weight',this.form.editweight)//重量
param.append('marketPrice',this.form.editmarketPrice)//市场价
//alert(this.form.editmarketPrice)
param.append('productClassId',this.mouldid)//商品模板id
param.append('productClassAtrrValue', JSON.stringify(this.transfer))//模板json
//param.append('detailHtmlText', encodeURI(this.editorContent))//富文本
param.append('detailHtmlText', this.editorContent)//富文本
param.append('thumbPicStr', JSON.stringify(toimgsamll))//suoluetu
param.append(' scrollPicStr', JSON.stringify(toimgsbig))//suoluetu
this.axios({
method: 'POST',
url:`${API}/sku/o-product/update/do`,
data: param,
headers:{'Content-Type':'multipart/form-data'},
}).then(res=>{
if(res.data.code === 200){
this.buildNewmain = false;
this.showself = false;
this.getList(1);
this.$message({
message: res.data.msg,
type: 'success'
});
}else{
this.buildNewmain = true;
this.showself = true;
this.$message({
message: res.data.msg,
type: 'error'
});
}
}).catch( function(res){
this.showself = true;
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
});
});
};
this.getList(1);
},
//新增
buildNewCon(){
this.buildmouldlist=[],
this.editselvalue='',
this.buildTitle ="新增"
this.showself = true;
this.dynamicTags=[];
this.upImgList=[];
this.imgUrls=[];
this.editor.txt.clear();
this.form={
editproNumber : "",
editproName:'',
editbarCode:'',
editgoodName: '',
editweight:'',
editmarketPrice:'',
goodsSales:'',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
value:'',
}
},
handleEdit(viewindex,viewitem) {
console.log(viewitem.id)
this.$router.push({
path: 'revisedet',
query: {
id: viewitem.id
}
})
},
update() {
this.dialogFormVisible = false;
},
cancelrefuse() {
let formData = new FormData()
formData.append('id', this.viewid);
formData.append('reviewStatus', 3)
this.$confirm('是否拒绝审核？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url: `${API}/sku/o-product/update-review/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
this.getList(1);
if(res.data.code === 200){
this.$message({
type: 'success',
message: '拒绝审核成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '拒绝审核失败'
});
}
})
})
this.dialogFormVisible = false;
},
sucesspuss() {
let formData = new FormData()
formData.append('id', this.viewid);
formData.append('reviewStatus', 4)
this.$confirm('是否通过审核？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url: `${API}/sku/o-product/update-review/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
this.getList(1);
if(res.data.code==200){
this.$message({
type: 'success',
message: '通过审核成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '通过审核失败'
});
}
})
})
this.dialogFormVisible = false;
},
radioEvent(){
this.showFlag = false;
},
changepages(a){
this.currentPage=a
},
reset(){
this.toproductNumber = "";
this.tobarCode ="";
this.togoodName ="";
this.toproductName ="";
this.formInline.region = '';
this.formInline.user=''
this.getList(1);
},
//table 展示数据的接口
viewsee(){
this.viewlan = true;
},
closeview(){
this.viewlan = false;
},
getList(a){
let toData = new FormData();
this.tobarCode ="";
this.toproductNumber="";
this.togoodName ="";
this.toproductName ="";
if(this.formInline.region.id == 1){
this.toproductNumber = this.formInline.user;
this.tobarCode ="";
this.togoodName ="";
this.toproductName ="";
} else if(this.formInline.region.id == 2){
this.tobarCode = this.formInline.user;
this.toproductNumber="";
this.togoodName ="";
this.toproductName ="";
} else if(this.formInline.region.id == 4){
this.toproductName = this.formInline.user;
this.tobarCode ="";
this.toproductNumber="";
this.togoodName ="";
} else if(this.formInline.region.id == 3){
this.togoodName = this.formInline.user;
this.tobarCode ="";
this.toproductNumber="";
this.toproductName ="";
};
toData.append('page', a);
toData.append('max', 10);
toData.append('uuid', localStorage.getItem('uuid'));
toData.append('productNumber', this.toproductNumber);
toData.append('barCode', this.tobarCode);
toData.append('productName', this.toproductName);
toData.append('goodName', this.togoodName);
this.axios({
method: 'post',
url: `${API}/sku/o-product/review/search/by-parameter/do`,
data: toData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
if (res.data.code == 200) {
this.tableData = res.data.data;
this.total = res.data.totalCount
}
})
},
printContent(){
let wpt = document.getElementById('mytable');
let newContent = wpt.innerHTML;
let oldContent = document.body.innerHTML;
document.body.innerHTML = newContent;
window.print(); //打印方法
window.localtion.reload();
document.body.innerHTML = oldContent
},
},
computed: {
tableDatas: function() {
var search = this.searchValue;
if (search) {
return this.tableData.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData;
}
},
watch:{
currentPage:function () {
this.getList(this.currentPage)
},
},
mounted(){
this.$nextTick(() => {
this.editor = new E('#editorElem');
this.editor.customConfig.onchange = (html) => {
this.editorContent = html
}
this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
this.editor.customConfig.uploadImgServer = "http://ha.tongchengxianggou.com/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
//this.editor.customConfig.uploadImgServer = "http://192.168.124.45:8080/web/web/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
this.editor.customConfig.uploadFileName = "imgFileTmp"; // 后端接受上传文件的参数名
this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
this.editor.customConfig.uploadImgTimeout = 2 * 60 * 1000; // 设置超时时间
this.editor.customConfig.zindex = 20000;
this.editor.customConfig.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"image", // 插入图片
"undo", // 撤销
"redo", // 重复
];
//下面是最重要的的方法
this.editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
//this.imgUrl = Object.values(result.data).toString();
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function(xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
var databack = JSON.parse(result.data);
var datanew=[];
databack.map((item) => {
let obj = {
"url": item.url+item.name,
};
datanew.push(obj);
});
var newurl =datanew[0].url
insertImg(newurl);
}
};
this.editor.create();
})
},
}
</script>
<style >
.wocao .el-form-item{
padding: 20px 0px 0px 0px;
}
.sichangjia{
height: 40px;
line-height: 40px;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
outline: 0;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.yulanmain{
width: 60%;
margin: auto;
border: 1px solid #e1e1e1;
border-radius: 10px;
box-sizing:border-box;
padding: 0px 8px;
}
.changeclass div:nth-child(1){
margin-left: 0px!important;
}
.dialog-footer{
margin-top: 20px;
}
.yulan{
width: 100%;
position: relative;
width: 80%;
height: 100%;
z-index: 1000;
background: white;
position: absolute;
top: 0px;
}
.el-table td, .el-table th{
text-align: center!important;
}
.el-col-12 span{
display: inline-block;
margin: 9px 0px;
}
.el-col-12 span:nth-child(1){
width: 108px;
text-align: center;
display: inline-block!important;
}
.disabled .el-upload--picture-card {
display: none;
}
.el-form-item__content span{
margin: 0px 10px;
}
.imgview{overflow: hidden;
background-color: #fff;
border: 1px solid #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
margin: 0 8px 8px 0;
display: inline-block;
}
.imgsallwall img{
display: inline-block;
margin: 0px 10px;
}
.imgparts{
overflow: hidden;
margin: 10px 0px;
clear: both;
}
.made{
top: -681px!important;
margin-top: 0px!important;
}
.nimabide .el-upload--picture-card{
display: none!important;
}
.el-form-item .el-select {
width: 100%;
}
.xuansel .el-select{
width: 42%!important;
}
.el-upload-list__item-actions{
margin: 0px!important;
}
.mobanall .el-form-item__label{
width: 100px!important;
overflow:hidden!important;
display:inline-block;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-left:20px!important;
}
.vip{
display: inline-block;
color: red;
position: absolute;
right: 428px;
}
</style>
