jcxt_qd/src/components/jc/taskdetail.vue

<template>
	<div id="pdf1">
		<el-descriptions class="margin-top" :title="readForm.task_class+'任务'" :column="2" :size="size" border>
			<el-descriptions-item>
				<template slot="label">
					发布单位
				</template>
				{{readForm.releaser}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					年度
				</template>
				{{readForm.year}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					开始时间和结束时间
				</template>
				{{readForm.starttime}}-{{readForm.endtime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					抽样信息上报截止时间
				</template>
				{{readForm.endtime_cydsb}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					监测类型
				</template>
				{{readForm.task_class}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					行业
				</template>
				<!-- <div v-if="readForm.product!=[]"> -->
				<span>{{readForm.model_type}}</span>
				<!-- </div> -->
				<!-- <div v-else>暂无</div> -->
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					抽检分离
				</template>
				<span v-if="readForm.is_divide==1">是</span>
				<span v-if="readForm.is_divide==0">否</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					附件
				</template>
				<div v-if="readForm.file_url==null">无</div>
				<el-link v-else type="primary" :href="readForm.file_url">下载附件</el-link>
			</el-descriptions-item>

		</el-descriptions>
		<el-descriptions class="margin-top" :size="size" border>
			<el-descriptions-item>
				<template slot="label">
					备注
				</template>
				{{readForm.log}}
			</el-descriptions-item>
		</el-descriptions>
		<el-descriptions class="margin-top" :size="size" border>
			<el-descriptions-item>
				<template slot="label">
					检测对象
				</template>
				{{productNameText}}
				<!-- <span v-for="item in readForm.product">{{item.product_name}}、</span> -->
			</el-descriptions-item>
		</el-descriptions>
		<el-descriptions class="margin-top" :size="size" border>
			<el-descriptions-item>
				<template slot="label">
					检测项
				</template>
				{{pesticidesNameText}}
				<!-- <span v-for="item in readForm.pesticides">{{item.test_name}}、</span> -->
			</el-descriptions-item>
		</el-descriptions>
		<el-table :data="underTask" border stripe highlight-current-row style="width: 100%">
			<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>
</template>

<script>
	export default {
		name: 'taskdetail',
		props: ['task_id'],
		data() {
			return {
				activeName: 'first',
				id: 0,
				task_id: this.task_id,
				readForm: {},
				// rowStyle: '',
				// cellStyle: '',
				size: '',
				// 机构地域表格数据
				underTask: [],
				underTasktotal: 0,
				productNameText: '',
				pesticidesNameText: '',
				tableHeader: [{
						label: '抽样机构',
						prop: 'bear_name',
						width: 180,
					}, {
						label: '检测机构',
						prop: 'check_name'
					},
					{
						label: '抽样地区',
						prop: 'address'
					}, {
						label: '抽样数量',
						prop: 'sample_number'
					},
					{
						label: '报告上传单位',
						prop: 'report_name'
					}, {
						label: '报告上传截止时间',
						prop: 'uploadtime'
					}
				],
			};
		},
		created() {
			this.getTaskDetail();
			this.getUnderTask();
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 获取任务详情
			async getTaskDetail() {
				var that = this
				const {
					data: res
				} = await this.$http.post("getTaskDetail", {
					task_id: this.task_id
				});
				console.log(res.data.product)
				if (res.data.product.length > 0) {
					if (res.data.product[0].type_id == '1') {
						res.data.model_type = '种植业'
					} else if (res.data.product[0].type_id == '2') {
						res.data.model_type = '畜牧业'
					} else if (res.data.product[0].type_id == '3') {
						res.data.model_type = '渔业'
					} else {
						res.data.model_type = '其他'
					}
				}
				this.readForm = res.data
				console.log(this.readForm)
				that.productNameText = that.readForm.product.map(el => el.product_name).join('、 ')
				that.pesticidesNameText = that.readForm.pesticides.map(el => el.test_name).join('、 ')
				
			},
			// 获取机构地域表格
			async getUnderTask() {

				const result = await this.$http.post('getUnderTask', {
					task_id: this.task_id
				})
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.underTask = result.data.data.rows
					this.underTasktotal = result.data.data.total
				}
			},
		}
	}
</script>

<style>

</style>