jcxt_qd/src/components/jc/readJcd.vue

<template>
    <div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/jc/workbench' }">首页</el-breadcrumb-item>
			<!-- <el-breadcrumb-item :to="{ path: '/jc/setTaskcd'}">例行检测</el-breadcrumb-item> -->
			<el-breadcrumb-item>承担单位</el-breadcrumb-item>
			<!-- <el-breadcrumb-item :to="{ path: '/jc/routineMonitor' }">例行检测</el-breadcrumb-item> -->
			<!-- <el-breadcrumb-item>任务</el-breadcrumb-item>
			 :to="{ path: '/jc/setTaskcd' }" -->
			<el-breadcrumb-item>任务详情</el-breadcrumb-item>
			<el-breadcrumb-item>检测单详情</el-breadcrumb-item>
		</el-breadcrumb>
        <div id="sampleReport">
        <el-descriptions  title="农产品质量安全检测单" :column="2" border style="margin-top:20px">
        <el-descriptions-item label="*检测单编号" prop="" style="width:200px" class="labelItem" size="mini" required >
            {{}}
        </el-descriptions-item>
        </el-descriptions>
        <!-- 受检单位情况 -->
        <el-descriptions :column="1" border style="" >
            <el-descriptions-item label="受检单位信息" >
                <el-descriptions  :column="1" border  size="mini" style="width:100%;font-size:20px;">
                    <el-descriptions-item label="单位名称" prop="inspected_unit.inspected_name" size="mini" required>
                        {{inspected_unit.inspected_name}}
                    </el-descriptions-item>
                    <el-descriptions-item label="单位地址" prop="inspected_unit.inspected_address" size="mini" required>
                        {{inspected_unit.inspected_address}}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系人" prop="inspected_unit.contact_name" size="mini" required>
                        {{inspected_unit.contact_name}}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话" prop="inspected_unit.contact_phone" size="mini" required>
                        {{inspected_unit.contact_phone}}
                    </el-descriptions-item>
                    <el-descriptions-item label="Email" prop="inspected_unit.contact_email" size="mini">
                        {{inspected_unit.contact_email}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
        </el-descriptions>
        <!-- 样品信息 -->
            <!-- <el-descriptions id="sampleInfo" :column="1" border style="">
                <el-descriptions-item label="样品信息">
                    <el-descriptions  :column="1" border size="mini" style="width:100%;margin-bottom:5px">
                        <el-descriptions-item label="抽样地点" prop="cyd_data.cydProfile.sample_address" size="mini" required>
                            {{cyd_data.cydProfile.sample_address}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <div>
                        <el-table :data="sample" 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>
                    </div>
                    
                </el-descriptions-item>
            </el-descriptions> -->
            <!-- 抽样单位信息 -->
            <el-descriptions :column="1" border style="" >
                <el-descriptions-item label="检测信息详情" >
                    <el-descriptions  :column="1" border  size="mini" style="width:100%">
                        <el-descriptions-item label="检测单编码" prop="" size="mini" required>
                            {{}}
                        </el-descriptions-item>
                        <el-descriptions-item label="样品名称" prop="" size="mini" required>
                            {{}}
                        </el-descriptions-item>
                        <el-descriptions-item label="检测结果" prop="" size="mini" required>
                            合格
                        </el-descriptions-item>
                        <el-descriptions-item label="检测报告" prop="" size="mini" required>
                            {{}}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-descriptions-item>
                <el-descriptions-item label="检测信息详情" >
                    <el-descriptions  :column="1" border  size="mini" style="width:100%">
                        <el-descriptions-item label="检测单编码" prop="" size="mini" required>
                            {{}}
                        </el-descriptions-item>
                        <el-descriptions-item label="样品名称" prop="" size="mini" required>
                            {{}}
                        </el-descriptions-item>
                        <el-descriptions-item label="检测结果" prop="" size="mini" required>
                            不合格
                        </el-descriptions-item>
                        <el-descriptions-item label="检测报告" prop="" size="mini" required>
                            <div>
                                <el-table border :data="jcxItems" >
                                    <el-table-column type="selection" align="center"></el-table-column>
                                    <el-table-column label="序号" align="center">
                                        <template slot-scope="scope">
                                            {{scope.$index+1}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column :key="table.label" v-for="table in jcxHeader" :label="table.label" :prop="table.prop" align="center"></el-table-column>
                                </el-table>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-descriptions-item>
            </el-descriptions>
        <!-- 备注 -->
        <!-- <el-descriptions :column="1" border style="" >
            <el-descriptions-item label="备注" > 
                {{}}
            </el-descriptions-item>
        </el-descriptions> -->
        </div>
<!-- 底部按钮 -->
		<el-form>
				<el-form-item class="btn">
					<el-button type="primary" @click="back()">返回任务详情</el-button>
					<!-- <el-button @click="resetForm()">重置</el-button>
					<el-button @click="onSubmit">保存，继续添加</el-button> -->
				</el-form-item>
			</el-form>	
		</div>
</template>
<script>
    export default {
        data() {
            return{
                inspected_unit: {
                inspected_name: '',
                inspected_address: '',
                contact_name: '',
                contact_phone: '',
                contact_email: ''
            },//受检单位信息
            cyd_data: {
                cydProfile: '',
            },//抽样单信息上部分
            // 样品信息表格
            tableHeader: [{
						label: '样品名称',
						prop: 'sample_name'
						// fixed: 'left'
					},
					{
						label: '不合格检测项',
						prop: 'sample_source',
						// width: 180
					},
					{
						label: '标准指标',
						prop: 'sample_count',
						// width: 150
					},
					{
						label: '实测值',
						prop: 'sample_base',
						// width: 100
					},
					{
						label: '检测依据',
						prop: 'sample_md_date',
						// width: 100
					}
				],
            jcxItems: [],
            // 检测项目表格
            jcxHeader: [
                {
                    label: '检测项目',
                    prop: 'item_name',
                    // width: 'auto'
                    // fixed: 'left'
                },
                {
                    label: '标准指标',
                    prop: 'item_standard',
                    // width: 'auto'
                },
                {
                    label: '实测值',
                    prop: 'item_measured_value',
                    // width: 'auto'
                },
                {
                    label: '单项判定',
                    prop: 'item_result',
                    // width: 'auto'
                },
                {
                    label: '检验依据',
                    prop: 'item_basis',
                    // width: 'auto'
                },
                {
                    label: '备注',
                    prop: 'item_log',
                    // width: 'auto'
                },
                ],
            }
        },
        created() {
            this.task_id = this.$route.params.task_id
			this.cyd_id = this.$route.params.cyd_id
			console.log(this.task_id)
			console.log(this.cyd_id)
            this.getCyd()
        },
        methods: {

			// 获取抽样单信息
			// async getCyd() {
			// 	const result = await this.$http.post('getCyd', {
			// 		cyd_id: this.cyd_id
			// 	})
			// 	console.log(result.data.data)
			// 	this.cyd_data = result.data.data
			// 	this.inspected_unit = result.data.data.inspectedUnit
			// 	this.sample = result.data.data.sample
			// 	if(this.sample.sample_source == ''){
			// 		this.sample.sample_source = '自产'
			// 	}
			// 	this.sampleOrgId = result.data.data.taskProfile.sampleOrgId
			// 	console.log(this.cyd_data)
			// 	console.log(this.inspected_unit)
			// 	console.log(this.sample)
			// 	console.log(this.sampleOrgId)
			// },
        }
    }
</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>