Skip to content

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

upload

parent a8a589ff
Hide 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 {
{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:'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:{}},'加载中')
result.map(y=>{
......
src/view/tiip/specimen/index.vue
View file @ efb65cdd
<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{
background: #f1f1f1;
height:100%;
background: white;
h3{
height:40px;
line-height:40px;
text-align: center;
background:white;
}
.header{
.hdrImg{
width:100%;
height:200px;
display: flex;
justify-content: center;
align-items: center;
background: #eef4fe;
// position: relative;
}
img{
height:200px;
width:100%;
}
// 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;
.INFO{
background: white;
padding: 0 10px;
.CONTENT{
>div{
flex:1
display: flex;
border-bottom: 1px solid #F8F8F8;
>p{
margin:0;padding:0;
height:30px;
line-height: 30px;
}
>p:first-child{
width:80px;
color:#999999
}
}
}
}
.detail{
background: white;
border-top:1px solid #eef4fe;
.img{
// position: relative;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
max-height:50px;
margin-top:10px;
background: #fffeeb;
padding:20px;
>div{
margin-bottom:20px;
p{
margin:0;text-align:center;height:30px;line-height:30px;
font-weight: bold;
}
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: 0;
// width: 100%;
// height: 50px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
>div:last-child{
margin-bottom:0;
}
.detailImg{
width:100%;
height:200px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
}
}
</style>
<template>
<div id="specimen" :style="(showHdr || showDtl) ? 'height:100vh;overflow:hidden;' : ''">
<div class="header">
<transition name="slide-fade" class="fadeView">
<!-- <div v-if="showHdr">
<image-view :imgArr="hdr_src"
:showImageView="true"
:imageIndex="imageHdrIndex"
v-on:hideImage="hideImageView('hdr')"></image-view>
</div> -->
<div v-if="showDtl">
<image-view :imgArr="dtl_src"
:showImageView="true"
:imageIndex="imageDtlIndex"
v-on:hideImage="hideImageView('dtl')"></image-view>
<div id="specimen">
<div class="INFO">
<div class="CONTENT">
<div><p>产品编号</p><p>{{hdr.sMaterialNo}}</p></div>
<div><p>产品名称</p><p>{{hdr.sMaterialName}}</p></div>
<div><p>规格</p><p>{{hdr.sConstruction}}</p></div>
<div><p>成份</p><p>{{hdr.sComponent}}</p></div>
<div><p>幅宽</p><p>{{hdr.sWidth}}</p></div>
<div><p>克重</p><p>{{hdr.sGMWT}}</p></div>
</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 class="right">
<p>幅宽：{{hdr.sWidth}}</p>
<p>克重：{{hdr.sGMWT}}</p>
</div>
</div>
<div class="detail">
<img src="../../../assets/fabric.jpg" style="width:100%;margin-bottom:10px;"/>
<div v-for="(item, index) in dtl_src" :key="index">
<p style="">— {{item.sColorName}}({{item.sColorNo}}) —</p>
<img class="previewer-demo-img detailImg" :src="item.src" width="100" @click="show('dtl',index)" />
</div>
</div>
</div>
<div class="detail">
<h3>颜色明细</h3>
<div class="detailImg">
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<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 style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
{{dtl[index].sColorNo}}
</div>
</v-flex>
</v-layout>
</v-container>
<div v-transfer-dom>
<previewer :list="dtl_src" ref="previewer2" :options="options" @on-index-change="logIndexChange"></previewer>
</div>
</div>
</div>
</template>
<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 {
name: 'specimen',
data () {
return {
showHdr:false,
showDtl:false,
imageHdrIndex:0,
imageDtlIndex:0,
hdr_src:[],
dtl_src:[],
sMaterialNo:'',
iProjectId:'',
uGuid:'',
hdr:{},
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(){
this.iProjectId = this.$route.params.iProjectId;
this.$route.params.uGuid.split('.').map((x,y) => {
this.uGuid += String.fromCharCode(x)
})
window.data = this;
await this.getList();
},
components:{
'image-view': imageView
},
methods:{
logIndexChange (arg) {
console.log(arg)
},
show (type,index) {
this.$refs[type == 'hdr' ? 'previewer1' : 'previewer2'].show(index)
},
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(){
this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
this.hdr = res.header;
this.dtl = res.childs;
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;
}
},
}
}
</script>
......
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