<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="請輸入內(nèi)容"-->
<!--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="狀態(tài)" >
<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" >預覽文本框內(nèi)容</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:'',//保質(zhì)期
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: '表格數(shù)據(jù)',
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))// 權(quán)限類型 系統(tǒng) 模塊 菜單選擇
this.$confirm('此操作將永久刪除該條數(shù)據(jù), 是否繼續(xù)?', '提示', {
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為一個數(shù)組 下拉為一個數(shù)組
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("變更后的數(shù)據(jù)")
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("三個數(shù)據(jù)都打印出來")
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)//經(jīng)過處理過后得到的可以循環(huán)的數(shù)據(jù)
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(`超出限制上傳張數(shù)了!`);
},
/* //限制上傳的方式
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: '帶"*"為必填，請?zhí)顚懲暾螅俅翁峤?,
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: '模板必填項請?zhí)顚懲暾?,
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: '模板必填項請?zhí)顚懲暾?,
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){ //這是編輯時候產(chǎn)生的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 展示數(shù)據(jù)的接口
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"; // 后端接受上傳文件的參數(shù)名
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) {
// 圖片上傳之前觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
// 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
// return {
// prevent: true,
// msg: '放棄上傳'
// }
},
success: function(xhr, editor, result) {
// 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結(jié)果
//this.imgUrl = Object.values(result.data).toString();
},
fail: function(xhr, editor, result) {
// 圖片上傳并返回結(jié)果，但圖片插入錯誤時觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結(jié)果
},
error: function(xhr, editor) {
// 圖片上傳出錯時觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
timeout: function(xhr, editor) {
// 圖片上傳超時時觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
// 如果服務器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
// （但是，服務器端返回的必須是一個 JSON 格式字符串?。。》駝t會報錯）
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>
忒麻煩的一個頁面，搞了我好長時間
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
相關閱讀更多精彩內(nèi)容
- 故事大于道理 ——《木偶奇遇記》共讀討論總結(jié) [逯老師說] 今天上午我和孩子回顧總結(jié)了《木偶奇遇記》。總結(jié)的主要收...
- [原創(chuàng)]南朱冬 黃山鄉(xiāng)每五天趕一個集，黃山集就在蘑菇山山腳下的一片樹林里，樹林旁就是流水潺潺的小河。每一個黃山集，...
- retinanet中的損失函數(shù)定義如下： def _focal(y_true, y_pred): """ C...
