Skip to content

W
WX_h5
Commit efb65cdd authored by 张锡奇's avatar 张锡奇
Browse files
Options

upload

parent a8a589ff
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 187 deletions
src/view/tiip/kanban/operateCustomDetail.vue
View file @ efb65cdd
...@@ -276,6 +276,7 @@ export default { ...@@ -276,6 +276,7 @@ export default {
{key:this.hdr.sType == '采购' ? 'begin_date' : 'dBeginDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd')}, {key:this.hdr.sType == '采购' ? 'begin_date' : 'dBeginDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd')},
{key:this.hdr.sType == '采购' ? 'end_date' : 'dEndDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd') + ' 23:59:59'}, {key:this.hdr.sType == '采购' ? 'end_date' : 'dEndDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd') + ' 23:59:59'},
{key:'searchname',value:this.list[res.trIndex].sOrderNo}, {key:'searchname',value:this.list[res.trIndex].sOrderNo},
{key:'iContractType',value:this.list[res.trIndex].iContractType}
] ]
let result = await this.request(this.hdr.sType == '采购' ? 'getTipProcurementProgress' : 'getTipProcessProgress',{ data:postData, params:{}},'加载中') let result = await this.request(this.hdr.sType == '采购' ? 'getTipProcurementProgress' : 'getTipProcessProgress',{ data:postData, params:{}},'加载中')
result.map(y=>{ result.map(y=>{
......
src/view/tiip/specimen/index.vue
View file @ efb65cdd
<style lang="less" > <style lang="less" >
.slide-fade-enter-active {
transition: opacity .5s ease;
}
.slide-fade-leave-active {
transition: opacity .5s ease;
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0;
}
h1, h2 {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#imageView .imageBox li img{
height:auto !important;
}
#imageView .imageBox li{
display:flex;
align-items:center;
justify-content:center;
}
#specimen{ #specimen{
background: #f1f1f1;
height:100%; height:100%;
.INFO{
background: white; background: white;
h3{ padding: 0 10px;
height:40px; .CONTENT{
line-height:40px; >div{
text-align: center;
background:white;
}
.header{
.hdrImg{
width:100%;
height:200px;
display: flex; display: flex;
justify-content: center; border-bottom: 1px solid #F8F8F8;
align-items: center; >p{
background: #eef4fe; margin:0;padding:0;
// position: relative; height:30px;
line-height: 30px;
} }
img{ >p:first-child{
height:200px; width:80px;
width:100%; color:#999999
} }
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: calc(50% - 100px);
// width: 200px;
// height: 200px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
.info{
.content{
display:flex;
background:white;
padding:16px;
>div{
flex:1
} }
} }
} }
.detail{ .detail{
background: white; margin-top:10px;
border-top:1px solid #eef4fe; background: #fffeeb;
.img{ padding:20px;
// position: relative; >div{
display: flex; margin-bottom:20px;
justify-content: center; p{
align-items: center; margin:0;text-align:center;height:30px;line-height:30px;
img{ font-weight: bold;
width: 100%;
max-height:50px;
} }
} }
// img:after { >div:last-child{
// content: ""; margin-bottom:0;
// display: inline-block; }
// position: absolute; .detailImg{
// z-index: 2; width:100%;
// top: 0; height:200px;
// left: 0; border-top-left-radius: 40px;
// width: 100%; border-bottom-right-radius: 40px;
// height: 50px; }
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
} }
} }
</style> </style>
<template> <template>
<div id="specimen" :style="(showHdr || showDtl) ? 'height:100vh;overflow:hidden;' : ''"> <div id="specimen">
<div class="header"> <div class="INFO">
<transition name="slide-fade" class="fadeView"> <div class="CONTENT">
<!-- <div v-if="showHdr"> <div><p>产品编号</p><p>{{hdr.sMaterialNo}}</p></div>
<image-view :imgArr="hdr_src" <div><p>产品名称</p><p>{{hdr.sMaterialName}}</p></div>
:showImageView="true" <div><p>规格</p><p>{{hdr.sConstruction}}</p></div>
:imageIndex="imageHdrIndex" <div><p>成份</p><p>{{hdr.sComponent}}</p></div>
v-on:hideImage="hideImageView('hdr')"></image-view> <div><p>幅宽</p><p>{{hdr.sWidth}}</p></div>
</div> --> <div><p>克重</p><p>{{hdr.sGMWT}}</p></div>
<div v-if="showDtl">
<image-view :imgArr="dtl_src"
:showImageView="true"
:imageIndex="imageDtlIndex"
v-on:hideImage="hideImageView('dtl')"></image-view>
</div>
</transition>
<!-- <div class="hdrImg">
<img v-for="(item, index) in [hdr]" v-if="!hdr.isErr" @error="error(item,index,'hdr')" :src="item" @click="selectImg('hdr',index)" :key="index"/>
<img v-else src="../../../assets/imgErr.png"/>
</div> -->
<div class="info">
<h3>参数</h3>
<div class="content">
<div class="left">
<p>产品编号：{{hdr.sSampleMaterialNo}}</p>
<p>产品名称：{{hdr.sSampleMaterialName}}</p>
<p>规格：{{hdr.sConstruction}}</p>
<p>成分：{{hdr.sComponent}}</p>
</div> </div>
<div class="right">
<p>幅宽：{{hdr.sWidth}}</p>
<p>克重：{{hdr.sGMWT}}</p>
</div> </div>
</div>
</div>
</div>
<div class="detail"> <div class="detail">
<h3>颜色明细</h3> <img src="../../../assets/fabric.jpg" style="width:100%;margin-bottom:10px;"/>
<div class="detailImg"> <div v-for="(item, index) in dtl_src" :key="index">
<v-container grid-list-md text-xs-center> <p style="">— {{item.sColorName}}({{item.sColorNo}}) —</p>
<v-layout row wrap> <img class="previewer-demo-img detailImg" :src="item.src" width="100" @click="show('dtl',index)" />
<v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
<div class="img">
<img :src="item" @error="error(item,index,'dtl')" v-if="!dtl[index].isErr" @click="selectImg('dtl',index)" />
<img v-else src="../../../assets/imgErr.png"/>
</div> </div>
<div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
{{dtl[index].sColorNo}}
</div>
</v-flex>
</v-layout>
</v-container>
</div> </div>
<div v-transfer-dom>
<previewer :list="dtl_src" ref="previewer2" :options="options" @on-index-change="logIndexChange"></previewer>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import imageView from 'vue-imageview' import Util from '@/libs/util.js';
import Util from '@/libs/util.js' import {Previewer , TransferDom} from 'vux';
export default { export default {
name: 'specimen', name: 'specimen',
data () { data () {
return { return {
showHdr:false,
showDtl:false,
imageHdrIndex:0,
imageDtlIndex:0,
hdr_src:[],
dtl_src:[], dtl_src:[],
sMaterialNo:'', iProjectId:'',
uGuid:'',
hdr:{}, hdr:{},
dtl:[], dtl:[],
uGuid:'', host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/' options: {
getThumbBoundsFn (index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
// get window scroll Y
let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
// optionally get horizontal scroll
// get position of element relative to viewport
let rect = thumbnail.getBoundingClientRect()
// w = width
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
} }
}
}
},
directives: {
TransferDom
},
components:{
Previewer
}, },
async mounted(){ async mounted(){
this.iProjectId = this.$route.params.iProjectId;
this.$route.params.uGuid.split('.').map((x,y) => { this.$route.params.uGuid.split('.').map((x,y) => {
this.uGuid += String.fromCharCode(x) this.uGuid += String.fromCharCode(x)
}) })
window.data = this; window.data = this;
await this.getList(); await this.getList();
}, },
components:{
'image-view': imageView
},
methods:{ methods:{
logIndexChange (arg) {
console.log(arg)
},
show (type,index) {
this.$refs[type == 'hdr' ? 'previewer1' : 'previewer2'].show(index)
},
error(item,index,type){ error(item,index,type){
if(type == 'hdr'){
this.$set(this.hdr,'isErr',true)
}else{
this.$set(this.dtl[index],'isErr',true) this.$set(this.dtl[index],'isErr',true)
}
}, },
async getList(){ async getList(){
this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{ this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
this.hdr = res.header; this.hdr = res.header;
this.dtl = res.childs; this.dtl = res.childs;
res.childs.map(v=>{ res.childs.map(v=>{
this.dtl_src.push(`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`) v.isErr = false;
this.dtl_src.push({
sColorName:v.sColorName,
sColorNo:v.sColorNo,
src:`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`
})
}) })
}) })
},
showImgView (type) {
if(type == 'hdr'){
this.showHdr = true;
}else{
this.showDtl = true;
}
},
hideImageView (type) {
if(type == 'hdr'){
this.showHdr = false;
}else{
this.showDtl = false;
}
},
selectImg (type,index) {
if(type == 'hdr'){
this.showHdr = true;
this.imageHdrIndex = index;
}else{
this.showDtl = true;
this.imageDtlIndex = index;
}
}, },
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment