<template>
|
<!-- -->
|
<view class="content" >
|
<view class="detail">
|
<view class="row1">
|
<view style="display: flex;align-items: center">
|
<text class="index">{{index+1}}</text>
|
<!-- materialcode -->
|
<text class="id-name">{{content.materialcode}}({{content.materialname}})</text>
|
</view>
|
<!-- <view class="tag">
|
<u-tag plain size="mini" text="免检" type="success"></u-tag>
|
</view> -->
|
</view>
|
<view class="row2">
|
<u-row>
|
<u-col span="3">项目编号:</u-col>
|
<u-col span="9">{{content.projectCode}}</u-col>
|
</u-row>
|
</view>
|
<view class="row3">
|
<view class="row-content">
|
<view class="col-content">
|
<view>
|
<view>ta号</view>
|
<view>{{content.taCode}}</view>
|
</view>
|
</view>
|
<view class="col-content">
|
<view>
|
<view>分拣数量</view>
|
<view style="text-align: center;color:#F18202">{{content.sortQuantity}}</view>
|
</view>
|
</view>
|
<view class="col-content" style="align-items: center;">
|
<view>
|
<view style="text-align: center;">实际数量</view>
|
<view :style="{ width: inputWid(content.actualQuantity) ,textAlign:'center',margin:'0 auto'}">
|
<input :maxlength="10" type="number" v-model="content.actualQuantity"
|
@blur="inputBlur" style="color:#F18202;border-bottom: 1rpx solid #F18202;" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
// import EasyPicker from '@/components/EasyPicker.vue'
|
export default {
|
// components:{EasyPicker},
|
props: {
|
content: {
|
type: Object,
|
required: true
|
},
|
index: {
|
type: Number,
|
required: true
|
}
|
},
|
data() {
|
return {
|
workingProcedureVisible: false,
|
workingProcedureList: []
|
}
|
},
|
created() {
|
// this.getListbycode()
|
console.log(this.title, 'title')
|
console.log(this.content, 'content');
|
},
|
computed: {
|
inputWid() {
|
return function(value) {
|
if (!value) {
|
return '30rpx'
|
} else {
|
// 有内容，字符串长度*字体大小
|
return (String(value).length) * 25 + 30 + 'rpx'
|
}
|
}
|
}
|
},
|
methods: {
|
showWorkingProcedure() {
|
this.workingProcedureVisible = true
|
},
|
inputBlur({
|
detail
|
}) {
|
const {
|
value
|
} = detail
|
if(Math.sign(value)==-1){
|
this.content.actualQuantity =0
|
}else if (value > this.content.sortQuantity) {
|
this.content.actualQuantity = this.content.sortQuantity
|
} else {
|
this.content.actualQuantity = parseInt(value)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
background-color: #fff;
|
width: 96%;
|
margin: 18rpx auto;
|
border: 1rpx solid #fff;
|
display: flex;
|
align-items: center;
|
padding: 5rpx 5rpx 8rpx;
|
font-size: 30ont30ize-common;
|
|
.detail {
|
box-sizing: border-box;
|
flex: 1;
|
|
.row1 {
|
display: flex;
|
justify-content: space-between;
|
margin: 5rpx 0;
|
|
.index {
|
display: inline-block;
|
width: 40rpx;
|
height: 40rpx;
|
border-radius: 20rpx;
|
background-color: $color-common;
|
text-align: center;
|
color: #fff;
|
margin-right: 10rpx;
|
line-height: 40rpx;
|
}
|
|
.id-name {
|
font-weight: 700;
|
font-size: 30rpx;
|
}
|
}
|
|
.row2,
|
.row3 {
|
color: #bbb;
|
font-size: 30rpx;
|
|
.row-content {
|
display: flex;
|
align-items: flex-start;
|
|
.col-content {
|
width: 25%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
}
|
}
|
}
|
|
.row2{
|
margin:8rpx 0;
|
}
|
}
|
}
|
|
.content_active {
|
border: 1rpx solid #F18202 !important;
|
}
|
|
::v-deep uni-input {
|
font-size: $fontsize-common;
|
}
|
</style>
|
