jcxt_qd/src/components/jc/sampleReport.vue

<template>
	<div>
		<!-- 		<el-card class="box-card" style="height: 100%;">
 -->
		<!-- <div slot="header" class="clearfix"> -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<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 :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>
  	<!-- <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
	  江苏省苏州市吴中区吴中大道 1188 号
	</el-descriptions-item> -->
	<div id="sampleReport">
<el-descriptions  title="农产品质量安全抽样单" :column="2" border style="margin-top:20px">
	<el-descriptions-item label="*抽样单编号" prop="cyd_data.cyd_code" style="width:200px" class="labelItem" size="mini" required >
		{{cyd_data.cyd_code}}
	</el-descriptions-item>
	<!-- <el-descriptions-item label="样品编码" prop="cyd_data.sample_id" class="labelItem" style="" size="mini">
		<el-input v-model="cyd_data.sample_id" disabled>
			<el-button slot="append" @click="createCode">生成</el-button>
		</el-input>
	</el-descriptions-item>
	<el-descriptions-item label="商标" prop="cyd_data.brand" class="labelItem" size="mini">
		<el-input v-model="cyd_data.brand"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="包装" prop="cyd_data.ispack" class="labelItem" style="" size="mini">
		<el-radio v-model="cyd_data.ispack" label="有">有</el-radio>
		<el-radio v-model="cyd_data.ispack" label="无">无</el-radio>
	</el-descriptions-item>
	<el-descriptions-item label="型号规格" prop="cyd_data.type" class="labelItem" size="mini">
		<el-input v-model="cyd_data.type"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="执行标准" prop="cyd_data.standard" class="labelItem" style="" size="mini">
		<el-input v-model="cyd_data.standard"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*生产日期或批号" prop="cyd_data.production_date" class="labelItem" size="mini" required>
		<el-input v-model="cyd_data.production_date"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="产地" prop="cyd_data.place" class="labelItem" style="" size="mini">
		<el-cascader  :options="options" v-model="selectedOptions" @change="handleChange" style="width:60%"></el-cascader>
	</el-descriptions-item>
	<el-descriptions-item label="*产品认证情况" prop="cyd_data.certicfie" class="labelItem" size="mini" required>
		<el-radio v-model="cyd_data.certicfie" label="无公害农产品">无公害农产品</el-radio>
							<el-radio v-model="cyd_data.certicfie" label="绿色食品">绿色食品</el-radio>
							<el-radio v-model="cyd_data.certicfie" label="有机食品">有机食品</el-radio>
							<el-radio v-model="cyd_data.certicfie" label="其他">其他</el-radio>
	</el-descriptions-item>
	<el-descriptions-item label="证书编号" prop="cyd_data.certifie_num" class="labelItem" style="" size="mini">
		<el-input v-model="cyd_data.certifie_num"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*抽样数量" prop="cyd_data.sample_num" class="labelItem" size="mini" required>
		<el-input v-model="cyd_data.sample_num" style="width:180px"></el-input>
		<a> * 单位 </a><el-input v-model="cyd_data.sample_num_unit" clearable="true" style="width:180px"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="抽样基数" prop="cyd_data.sample_base" class="labelItem" size="mini" required>
		<el-input v-model="cyd_data.sample_base" style="width:180px"></el-input>
		<a> * 单位 </a><el-input v-model="cyd_data.sample_base_unit" clearable="true" style="width:180px"></el-input>
	</el-descriptions-item>
	<el-descriptions-item label="*抽样场所" prop="cyd_data.sample_ground" class="labelItem" size="mini" required >
							<el-radio v-model="cyd_data.sample_ground" label="生产基地/企业">生产基地/企业</el-radio>
							<el-radio v-model="cyd_data.sample_ground" label="屠宰场">屠宰场</el-radio>
							<el-radio v-model="cyd_data.sample_ground" label="农贸市场">农贸市场</el-radio>
							<el-radio v-model="cyd_data.sample_ground" label="批发市场">批发市场</el-radio>
							<el-radio v-model="cyd_data.sample_ground" label="超市">超市</el-radio>
							<el-radio v-model="cyd_data.sample_ground" label="其他">其他</el-radio>
	</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="sampleOrgId.name" size="mini" required>
						{{sampleOrgId.name}}
					</el-descriptions-item>
					<el-descriptions-item label="机构类型" prop="sampleOrgId.groupname" size="mini" required>
						{{sampleOrgId.groupname}}
					</el-descriptions-item>
					<el-descriptions-item label="联系人" prop="sampleOrgId.contact_name" size="mini" required>
						{{sampleOrgId.contact_name}}
					</el-descriptions-item>
					<el-descriptions-item label="联系电话" prop="sampleOrgId.contact_phone" size="mini" required>
						{{sampleOrgId.contact_phone}}
					</el-descriptions-item>
				</el-descriptions>
			</el-descriptions-item>
		</el-descriptions>
	<!-- 备注 -->
	<el-descriptions :column="1" border style="" >
		<el-descriptions-item label="备注" > 
			{{cyd_data.cydProfile.cyd_log}}
		</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>
	const token = window.sessionStorage.getItem('token')
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	export default {
		name: 'inputSample',
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer' + token
				},
				fileList: [],
				form: {},
				cyd_data: {
					cydProfile: '',
				},//抽样单信息上部分
				inspected_unit: {
					inspected_name: '',
					inspected_address: '',
					contact_name: '',
					contact_phone: '',
					contact_email: ''
				},//受检单位信息
				sample: {},//样品信息
				sampleOrgId: [],//抽样单位信息
				units: [],
				production: [],
				// 样品下拉框
				sampleList: [],
				task_id: '',
				undertake_id: '',
				// 产地
				options: regionData,
				selectedOptions: [],

				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				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
					}
				],
			}
		},
		created() {
			this.task_id = this.$route.params.task_id
			this.task_profile_id = this.$route.params.id
			console.log(this.task_id)
			console.log(this.task_profile_id)
			this.getCyd()
		},
		methods: {

			// 获取抽样单信息
			async getCyd() {
				const result = await this.$http.post('getCyd', {
					task_profile_id: this.task_profile_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)
			},


			// 生成样品编码
			async createCode() {
				var that = this
				const result = await this.$http.post('getSampleId', {
					task_id: this.task_id
				})
				console.log(result.data.data.id)
				if (result.data.code == 0) {
					that.cyd_data.sample_id = result.data.data.id
					this.getTestObj()
				}
			},
			// 获取选择产地
			handleChange() {
				var that = this
				var loc = "";
				// console.log(this.form.place)
				for (let i = 0; i < this.selectedOptions.length; i++) {
					loc += CodeToText[this.selectedOptions[i]];
				}
				// console.log(loc)
				that.cyd_data.place = loc
				console.log(that.cyd_data.place)
			},
			// 上传成功(要确认数据)
			uploadSuccess(res) {
				console.log(res.data)
				this.cyd_data.file_url = res.data.fileUrl
				this.cyd_data.file_name = res.data.fileName
			},
			async onSubmit() {
				console.log(this.cyd_data.sample_name)
				var that = this
				console.log(that.cyd_data)
				that.cyd_data.task_id = that.task_id
				that.cyd_data.undertake_id = that.undertake_id
				that.form.cyd_data = that.cyd_data
				that.form.unit_test = that.unit_test
				that.form.unit_production = that.unit_production
				that.form.unit_sample = that.unit_sample
				console.log(that.form)
				const result = await this.$http.post('saveSample', this.form)
				if (result.data.code == 0) {
					// that.form.sample_id = result.data.data.id
					this.$message({
						type: 'success',
						message: '提交抽样单成功!'
						
					});
				}
			},
			// 重置表单
			// resetForm() {
			// 	// console.log(this.form)
			// 		this.cyd_data = '';
			// 		this.unit_test = '';
			// 		this.unit_production = '';
			// 		this.unit_sample = '';
			// 		this.selectedOptions = '';
			// },
			// 返回
			back() { 
				var that = this
				console.log(that.task_id)
				this.$router.push({
					name: 'setTaskcd',
					params: {
						id: that.task_id
					}
				})
			}
		},
	}
</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>