jcxt_qd/src/components/admin/readCheck.vue

<template>
	<div>
	<div id="sampleReport">
        <el-descriptions  title="农产品质量安全检测单" :column="2" border style="margin-top:20px">
            <el-descriptions-item label="抽样单编号" prop="jcd_unit.jcd_code" style="width:200px" class="labelItem" size="mini" required >
                {{jcd_unit.jcd_code}}
            </el-descriptions-item>
			<el-descriptions-item label="检测结果" prop="jcd_unit.jcd_result" style="width:200px" class="labelItem" size="mini" required >
                {{jcd_unit.jcd_result}}
            </el-descriptions-item>
			<el-descriptions-item label="附件链接" prop="jcd_unit.file_url" style="width:200px" class="labelItem" size="mini" required >
                {{jcd_unit.file_url}}
            </el-descriptions-item>
			<el-descriptions-item label="检测单状态" prop="jcd_unit.jcd_status" style="width:200px" class="labelItem" size="mini" required >
                {{jcd_unit.jcd_status}}
            </el-descriptions-item>               
        </el-descriptions>
            <!-- 检测单未合格项目信息 -->
                <el-descriptions id="sampleInfo" :column="1" border style="">
                    <el-descriptions-item label="未合格项目信息">
                        <!-- 不合格样品表格区域 -->
                        <div>
                            <el-table :data="jcdItem" border stripe highlight-current-row style="width: 100%;border:1px;"
                            :row-style="rowStyle" :cell-style="cellStyle">
                                <el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label"
                            :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
                            </el-table>
						<!-- 不合格项表格分页器 -->
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total" background />
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
			</div>  
        <!-- 底部按钮 -->
                <el-form>
                        <el-form-item class="btn">
                            <el-button type="primary" @click="back()">返回任务详情</el-button>
                        </el-form-item>
                    </el-form>	
                </div>
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	export default {
		name: 'inputSample',
		data() {
			return {
				parentName:'',
				myHeaders: {Authorization: 'bearer' + token},
				fileList: [],
				form: {},
				jcd_id:'',
				total:0,
				jcdItem: [],//不合格项信息
				jcd_unit:[],//检测单信息
				queryInfo:{
					pageNum:1,
					pageSize:10
				},
				units: [],
				production: [],
				task_id: '',
            	task_profile_id:'', 
				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				tableHeader: [{
						label: '检测项目',
						prop: 'item_name',
						// fixed: 'left'
                        width: 200
					},
					{
						label: '检验标准',
						prop: 'item_standard',
						width: 200
					},
					{
						label: '实测值',
						prop: 'item_measured_value',
						width: 200
					},
					{
						label: '单项判定结果',
						prop: 'item_result',
						width: 200
					},{
						label: '检验依据',
						prop: 'item_basis',
						width: 200
					},
					{
						label: '检验备注',
						prop: 'item_log',
						width: 200
					}
				],
			}
		},
		created() {
			this.task_id = this.$route.params.task_id
			this.task_profile_id = this.$route.params.task_profile_id
			this.jcd_id = this.$route.params.jcd_id
			this.parentName = this.$route.params.parentName
			console.log(this.parentName)
			this.getJcd()
			this.getBuHeGe()
		},
		methods: {
			// 获取检测单信息
			async getJcd() {
				const result = await this.$http.post('getJcd', {
					// task_profile_id: this.task_profile_id,
					// task_id: this.task_id,
					jcd_id : this.$route.params.jcd_id
				})
				this.jcd_unit = result.data.data//检测单信息
					// console.log(this.jcd_unit.jcd_result)
				if(this.jcd_unit.jcd_result == '1'){
					this.jcd_unit.jcd_result = '合格'
				}else{
					this.jcd_unit.jcd_result = '不合格'
				}
				if(this.jcd_unit.jcd_status == '1'){
					this.jcd_unit.jcd_status = '未上报'
				}else if(this.jcd_unit.jcd_status == '2'){
					this.jcd_unit.jcd_status = '已上报'
				}else if(this.jcd_unit.jcd_status == '5'){
					this.jcd_unit.jcd_status = '已完成'
				}else{
					this.jcd_unit.jcd_status = '无'
				}
			},


			//获取不合格项
			async getBuHeGe() {
				const result = await this.$http.post('getJcdItems', {
					jcd_id : this.jcd_id,
					queryInfo: this.queryInfo
					})
				this.jcdItem = result.data.data.rows
				this.total = result.data.data.total
				console.log( result.data.data.rows)
			},
			 /** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.getJcdItems()
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.getJcdItems()
			},
			// 返回
			back() {
				// var that = this
				// console.log(that.task_id)
				this.$router.push({
					name: 'readCheckList',
					params: {
						task_id: this.$route.params.task_id,
						task_profile_id: this.$route.params.task_profile_id,
						parentName:this.parentName
					}
				})
				console.log(parentName)
			}
		},
	}
</script>

<style lang="less" scoped>
	.form {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: flex-start;
	}

	.el-descriptions {
		width: 80%;
		margin: auto;
	}

	/deep/ .el-descriptions__title {
		margin: auto;
		font-size: 1.25rem;
		// font-weight: 31.25rem !important;
	}
	.btn{
		margin-top:20px ;
		// float: right;
		text-align: center;
	}
	/deep/ #sampleReport{
		.el-descriptions-item__label.is-bordered-label{
		width: 12%;
		font-size: .875rem;
		}
		.el-descriptions-item__content{
			font-size: .875rem;
		}
	}

</style>