|
|
@@ -0,0 +1,289 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ :append-to-body="false"
|
|
|
+ :modal="false"
|
|
|
+ title="工艺文件预览"
|
|
|
+ top="5vh"
|
|
|
+ width="90%"
|
|
|
+ @close="closeDialog"
|
|
|
+ v-if="visible">
|
|
|
+ <div>
|
|
|
+ <el-radio v-model="mode" label="view">预览模式</el-radio>
|
|
|
+ <el-radio v-model="mode" label="edit">编辑模式</el-radio>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ :model="dataForm"
|
|
|
+ align="center"
|
|
|
+ size="small">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>正面四色层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.frontCanvasParamObj.printed.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.printed : resourcesUrl + dataForm.frontCanvasParamObj.printed"
|
|
|
+ v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.printed"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.printed" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.printed" class="avatar"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>正面白墨层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.frontCanvasParamObj.whiteBoard.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.whiteBoard : resourcesUrl + dataForm.frontCanvasParamObj.whiteBoard"
|
|
|
+ v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.whiteBoard"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.whiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.whiteBoard" class="avatar"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>正面烫色层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.frontCanvasParamObj.foilstamping.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.foilstamping : resourcesUrl + dataForm.frontCanvasParamObj.foilstamping"
|
|
|
+ v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.foilstamping"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.foilstamping" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.foilstamping" class="avatar"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>正面逆向层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.frontCanvasParamObj.unWhiteBoard.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.unWhiteBoard : resourcesUrl + dataForm.frontCanvasParamObj.unWhiteBoard"
|
|
|
+ v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.unWhiteBoard"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.unWhiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.unWhiteBoard" class="avatar"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>正面光油层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.frontCanvasParamObj.varnish.indexOf('https://') !== -1? dataForm.frontCanvasParamObj.varnish : resourcesUrl + dataForm.frontCanvasParamObj.varnish"
|
|
|
+ v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.varnish"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.frontCanvasParamObj && dataForm.frontCanvasParamObj.varnish" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.frontCanvasParamObj.varnish" class="avatar"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>背面四色层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.backCanvasParamObj.printed.indexOf('https://') !== -1? dataForm.backCanvasParamObj.printed : resourcesUrl + dataForm.backCanvasParamObj.printed"
|
|
|
+ v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.printed" class="avatar"/>
|
|
|
+<!-- <i v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.printed" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>背面白墨层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.backCanvasParamObj.whiteBoard.indexOf('https://') !== -1? dataForm.backCanvasParamObj.whiteBoard : resourcesUrl + dataForm.backCanvasParamObj.whiteBoard"
|
|
|
+ v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.whiteBoard" class="avatar"/>
|
|
|
+<!-- <i v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.whiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>背面烫色层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.backCanvasParamObj.foilstamping.indexOf('https://') !== -1? dataForm.backCanvasParamObj.foilstamping : resourcesUrl + dataForm.backCanvasParamObj.foilstamping"
|
|
|
+ v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.foilstamping" class="avatar"/>
|
|
|
+<!-- <i v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.foilstamping" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>背面逆向层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.backCanvasParamObj.unWhiteBoard.indexOf('https://') !== -1? dataForm.backCanvasParamObj.unWhiteBoard : resourcesUrl + dataForm.backCanvasParamObj.unWhiteBoard"
|
|
|
+ v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.unWhiteBoard" class="avatar"/>
|
|
|
+<!-- <i v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.unWhiteBoard" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item>
|
|
|
+ <h2>背面光油层</h2>
|
|
|
+ <div v-if="mode === 'view'">
|
|
|
+ <el-image
|
|
|
+ style="width: 295px; height: 452px"
|
|
|
+ :src="dataForm.backCanvasParamObj.varnish.indexOf('https://') !== -1? dataForm.backCanvasParamObj.varnish : resourcesUrl + dataForm.backCanvasParamObj.varnish"
|
|
|
+ v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish"/>
|
|
|
+ </div>
|
|
|
+ <el-upload v-else
|
|
|
+ class="avatar-uploader"
|
|
|
+ accept="image/jpg"
|
|
|
+ :before-upload="(file, fileList)=>handleBeforeUpload(file, fileList,item)"
|
|
|
+ :action="$http.adornUrl('/admin/file/simpleUpload')"
|
|
|
+ :headers="{Authorization: $cookie.get('Authorization_vp'),locale:lang}"
|
|
|
+ :on-success="(res,file)=>{onFrontUploadSuccess(item,res,file)}"
|
|
|
+ :show-file-list="false">
|
|
|
+ <el-image v-if="dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" style="width: 295px; height: 452px" :src="resourcesUrl + dataForm.backCanvasParamObj.varnish" class="avatar"/>
|
|
|
+<!-- <i v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button v-if="mode==='edit' && dataForm.backCanvasParamObj && dataForm.backCanvasParamObj.varnish" type="primary" size="mini" style="margin-right: 5px" @click="saveOrUpdateCanvasParam(item)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "YuyinPreview",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mode: 'view',
|
|
|
+ visible: false,
|
|
|
+ dataForm:{},
|
|
|
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(cardItem){
|
|
|
+ this.getCardItemById(cardItem)
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ closeDialog(){
|
|
|
+ this.visible = false
|
|
|
+ this.dataForm = {}
|
|
|
+ },
|
|
|
+ getCardItemById(cardItem){
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/prod/orderCardItem/info/' + cardItem.cardItemId),
|
|
|
+ method: 'get',
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.dataForm = data;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|