<template>
<div id="contents">
<el-steps :active="dian" finish-status="success" simple style="margin-top: 20px;width: 60%;margin-left:auto;margin-right: auto;">
<el-step title="基本信息" ></el-step>
<el-step title="其他属性" ></el-step>
<el-step title="商品详情" ></el-step>
</el-steps>
<div style="padding:20px 20px; margin-top: 20px;z-index: 1000;">
<el-form ref="form" :model="form" label-width="132px">
<el-row :gutter="20" v-show="firstnext">
<el-col :span="4">
<el-form-item label="" :required="true">
<el-upload
class="avatar-uploader"
action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
name="imgFileTmp"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!--
<el-upload
id="yizhang"
:class="{'showitself':isActive}"
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>
-->
<span style="display: block;text-align: center;"><i style="display: inline-block;margin-right: 4px;color: red;">*</i>缩略图上传</span>
</el-form-item>
</el-col>
<el-col :span="14">
<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"></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"></el-input>
</el-form-item>
<el-form-item label="货名：" :required="true">
<el-input v-model="form.editgoodName" maxlength="60"></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-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="text"
class="sichangjia"
v-model="form.editmarketPrice"
placeholder="市场价"
min=0
maxlength=4
>
</input>
</el-form-item>
<el-form-item label="保质期：" :required="true" class="baozhiqi">
<el-input type="number" v-model="form.Shelflife" min="0" style="width: 40%;"></el-input>
<el-select v-model="form.lifeTime" style="width: 40%; margin-left: 10%;" @change="leftsel">
<el-option
:key="item.id"
v-for="item in timelist"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<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>
</el-col>
</el-row>
<span class="nextclick" @click="nextclick" v-if="firstnext">下一步</span>
<!-------------------------------------------------第二步开始----------------------------------------------------------------->
<el-row :gutter="20" v-if="twostep" >
<el-col :span="14">
<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>
</el-col>
</el-row>
<p class="zhuanxiang">
<span class="" @click="twoclick" v-if="twostep">下一步</span>
<span class="" @click="backclick" v-if="twostep">上一步</span>
</p>
<!-------------------------------------------------第三步开始----------------------------------------------------------------->
<el-row :gutter="20" v-show="threestep">
<div style="width: 60%;margin: auto;">
<div class="buildeditorElem">
<el-form-item label="" >
</el-form-item>
<div id="editorElem" style="text-align:left; border-bottom: 1px solid #e1e1e1;"></div>
</div>
<div class="dialog-footer">
<el-button type="primary" @click="viewsee" >预览文本框内容</el-button>
<el-button type="primary" @click="onSubmit" >提 交</el-button>
</div>
<div class="el-dialog made" v-show="viewlan" style="padding:20px 20px; margin-top: -20px; top: -200px; z-index: 999999999; width: 100%;">
<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>
</div>
<span class="nextclick" @click="backtwo" v-if="threestep">上一步</span>
</el-row>
</el-form>
</div>
</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 {
imageUrl:'',
Shelflife:'',
timelist:[
{
name: '天',
label: '天',
id:0,
},{
name: '月',
label: '月',
id:1,
},{
name: '年',
label: '年',
id:2,
}
],
xindeshuju:"",
fullscreenLoading: false,
editor:{},
transfer:[],
viewlan: false,
buildmouldlist:[],
editselvalue:'',
mouldid:'',
editorContent: '',
buildTitle:'',
//标签初始化
dynamicTags: [],
inputVisible: false,
inputValue: '',
//上传商品图片初始化
dialogImageUrl: '',
//上传商品缩略图的列表
upImgList: [],
picsList:[],
imgUrls: [],
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:'',
viewtags:'',
viewimgall:[],
viewheight:'',
viewprice:'',
viewclass:'',
viewtodo:[],
vieweditor:'',
editimgnum:[],
smallimgall:[],
moreimgall:[],
smallname:'',
smallurl:'',
togoodName:'',
tobarCode:'',
toproductNumber:'',
toproductName:'',
mustfill: false,
againfill:false,
firstnext: true,
twostep:false,
threestep: false,
dian:1,
builddata:[],
smalllength:[]
}
},
created() {
//第一步要拿到传过来的id
//alert(this.$route.query.id)
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=>{
if (res.data.code=== 200){
console.log(res.data.data.listStockDetail)
this.templets=res.data.data.listStockDetail;
}
});
this.editEach()
},
components:{
pages
},
methods: {
handleAvatarSuccess(res, file){
console.log("图像上传成功")
this.smallimgall = JSON.parse(file.response.data)
console.log(this.smallimgall)
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(){
},
//编辑时候根据id渲染页面的数据方法
editEach(){
this.buildidmain = this.$route.query.id;
this.axios({
method:'get',
url:`${API}/sku/o-product/query/byid/do`+"?id="+this.buildidmain,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data:Qs.stringify({
uuid:localStorage.getItem('uuid')
})
}).then(res=>{
console.log(res.data.data)
this.builddata= res.data.data;
console.log("啥玩意啊")
console.log(this.builddata)
this.form.Shelflife = res.data.data.lifetime;
this.form.lifeTime = parseInt(res.data.data.lifeState);
this.mouldid = this.builddata.productTempleId;
this.smallurl = this.builddata.thumbPicOPictureUrlList[0].url;
this.form.editmarketPrice = this.builddata.marketPrice;
var newmodule =[];
var hightmodule=[];
this.buildmouldlist = [];
this.bianjimoban(this.mouldid,this.builddata.productTempleValue)
this.editselvalue =this.builddata.productTempleName;
hightmodule = this.builddata.productTempleValue;
hightmodule.map((item) => {
let moduleobj ={
attribute:parseInt(item.attribute),
id:item.id,
inputtxt:item.atrrValue,
name:item.attrName,
};
});
console.log("模板")
console.log(this.buildmouldlist)
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;
this.imageUrl = res.data.data.thumbPicOPictureUrlList[0].url+res.data.data.thumbPicOPictureUrlList[0].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.form.editproNumber = this.builddata.productNumber;
this.form.editproName =this.builddata.productName;
this.form.editbarCode =this.builddata.barCode;
this.form.editgoodName =this.builddata.goodName;
this.form.editweight =this.builddata.weight;
if(this.builddata.tags==""){
this.dynamicTags=[];
}else{
this.dynamicTags = this.builddata.tags.split(',') ;
}
});
},
ceshi(){
//alert(this.editorContent)
},
//第一次点击下一步的时候
nextclick(){
if(this.form.editproName ==""||this.form.editbarCode==""||this.form.editgoodName==""|| this.form.editproNumber==""||this.form.editweight==""){
this.$message({
showClose: true,
message: '带"*"为必填，请填写完整后，再次提交',
type: 'error'
});
}
/*
else if(this.smallimgall.length == 0||this.moreimgall.length == 0){
this.$message({
showClose: true,
message: '请上传商品滚动图 和缩略图',
type: 'error'
});
}
*/
else{
this.dian=2
this.firstnext= false
this.twostep = true
};
},
//第二次点击下一步
twoclick(){
/*
this.dian=3
this.threestep = true;
this.twostep = false;
*/
if(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;
}
this.dian=3
this.threestep = true;
this.twostep = false;
},
backclick(){
this.dian=1
this.firstnext= true
this.twostep = false
},
backtwo(){
this.dian=2
this.firstnext= false
this.twostep = true
this.threestep = false
},
//验证不可以重复的问题
firsttime(){
if(this.form.editbarCode==undefined){
this.form.editbarCode="";
}else{
this.form.editbarCode=this.form.editbarCode
}
if(this.form.editproNumber==undefined){
this.form.editproNumber="";
}else{
this.form.editproNumber=this.form.editproNumber
}
if(this.form.editgoodName==undefined){
this.form.editgoodName="";
}else{
this.form.editgoodName=this.form.editgoodName
}
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=""
}
})
},
//缩略图
beforeAvatarUpload (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
},
uploadSuc(response, file, fileList){
this.fileChange(fileList);
},
delupimgs( file, fileList) {
this.fileChange(fileList);
},
fileChange(fileList) {
this.moreimgall = fileList;
},
//商品模板
leftsel(){
this.$forceUpdate()
},
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(`超出限制上传张数了!`);
},
andleRemove(file, fileList) {
},
handlePreview(file) {
},
//上传商品图片初始化
//删除图片的事件
handleRemove(file, fileList) {
},
handleRemove2(file, fileList) {
},
uploadFile(file){
this.formDate.append('file', file.file);
},
handleProgress(){
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 1000);
},
//详情图
pictsBefore(file){
var that = this;
},
onSubmit(){
let param = new FormData();
//判断缩略图是否重新上传
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": item.name,
"url": item.url,
};
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)//标签
}
if(this.form.editmarketPrice == undefined){
param.append('marketPrice','')//市场价
}else{
param.append('marketPrice',this.form.editmarketPrice)//市场价
}
param.append('lifetime', this.form.Shelflife)//商品名称
param.append('lifeState', this.form.lifeTime)//商品名称
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('weight',this.form.editweight)//重量
//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('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.$message({
message: res.data.msg,
type: 'success'
});
this.$router.push({
path:'../commodity/toview'
});
}else{
this.buildNewmain = true;
this.$message({
message: res.data.msg,
type: 'error'
});
}
}).catch( function(res){
});
},
update() {
this.dialogFormVisible = false;
},
radioEvent(){
this.showFlag = false;
},
changepages(a){
this.currentPage=a
},
//table 展示数据的接口
viewsee(){
this.viewlan = true;
},
closeview(){
this.viewlan = false;
},
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:{
},
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{
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;
}
.zhuanxiang{
box-sizing: border-box;
width:320px;
margin: auto;
text-align: center;
display:block;
padding: 10px 15px;
cursor:pointer
}
.zhuanxiang span{
box-sizing: border-box;
width:120px;
margin: auto 10px;
text-align: center;
display:block;
float: left;
border: 1px solid #D1DBE5;
padding: 10px 15px;
cursor:pointer
}
.nextclick{
border: 1px solid #D1DBE5;
box-sizing: border-box;
width:120px;
margin: auto;
text-align: center;
display:block;
padding: 10px 15px;
cursor:pointer
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 150px;
display: block;
}
</style>
<style scoped>
.made{
top: -407px!important;
}
</style>
网友评论