<template>
|
<view class="content">
|
<!-- 顶部标题 -->
|
<view class="title">{{title}}</view>
|
<view class="detail">
|
<view v-for="item in propArr" :key="item.code" class="item">
|
<view class="item_title" v-if="item.code!='qualityErrorInfo'||item.code=='qualityErrorInfo'&&content.qualityStateName!='合格'">{{item.title}}</view>
|
<view class="item_content" v-if="item.code=='workingProcedureCurrent'"><a @click="showWorkingProcedure">{{content.workingProcedureCurrent}}</a></view>
|
<view class="item_content" v-else-if="item.code=='qualityErrorInfo'&&content.qualityStateName!='合格'">{{content[item.code]}}</view>
|
<view class="item_content" v-else>{{content[item.code]}}</view>
|
</view>
|
</view>
|
<easy-picker :visible.sync="workingProcedureVisible" :list="workingProcedureList" value-field="value" label-field="label" @select="onChangeInputUser"></easy-picker>
|
</view>
|
</template>
|
|
<script>
|
import EasyPicker from '@/components/EasyPicker.vue'
|
import {listbycode} from '@/api/common/index.js'
|
export default {
|
components:{EasyPicker},
|
props: {
|
title: {type:String,required: true},
|
content: {type: Object,required: true},
|
propArr: {type: Array,required: true}
|
},
|
data() {
|
return {
|
workingProcedureVisible:false,
|
workingProcedureList:[]
|
}
|
},
|
created() {
|
this.getListbycode()
|
console.log(this.title,'title')
|
console.log(this.content)
|
console.log(this.propArr)
|
},
|
methods: {
|
showWorkingProcedure(){
|
this.workingProcedureVisible=true
|
},
|
async getListbycode(){
|
try{
|
let {data}=await listbycode({code:'process_type'})
|
this.workingProcedureList=data
|
}catch(e){
|
//TODO handle the exception
|
console.log(e);
|
}
|
|
},
|
onChangeInputUser(val,valObj,index){
|
this.$emit('changeWPCurrent',val)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
width: 96%;
|
margin: 18rpx auto;
|
.title {
|
border-left: 6rpx solid #F18202;
|
padding-left: 10rpx;
|
box-sizing: border-box;
|
font-size: 36rpx;
|
margin-bottom: 10rpx;
|
}
|
.detail {
|
box-sizing: border-box;
|
.item {
|
width: 100%;
|
background: #fff;
|
border-radius: 4rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 15rpx;
|
font-size: 32rpx;
|
box-sizing: border-box;
|
}
|
|
.item_title {
|
width: 40%;
|
}
|
.item_content {
|
flex: 1;
|
text-align: right;
|
color: $color-common;
|
}
|
}
|
}
|
</style>
|
