hbj_app/pages/indexpage/YJplan/detail/detail.vue

<template>
	<view>
		<uni-card>
			<view slot="title"
				style="display: flex;padding: 15rpx; justify-content: space-between;color: #000;font-size: 14px;font-weight: 600;">
				<p>预案名称：{{ tableData.planName }}</p>
				<p v-if="tableData.filingStatus === '1'"
					style="background-color: #e1f8e3;color: #3ad147;padding: 5rpx 10rpx;">
					{{ setDict(tableData.filingStatus,beianStatusList) }}
				</p>
				<p v-if="tableData.filingStatus === '0'"
					style="background-color: #ffdad3;color: #ff3d3c;padding: 5rpx 10rpx;">
					{{ setDict(tableData.filingStatus,beianStatusList) }}
				</p>
			</view>
			<u-row>
				<view>编号：{{ tableData.text1 }}</view>
			</u-row>
			<u-row>
				<view>版本号：{{ tableData.planVersion }}</view>
			</u-row>
			<u-row>
				<view>预案类型：<span
						style="background-color: #e1f8e3;color: #3ad147;padding: 5rpx 10rpx;">{{ setDict(tableData.planType,planTypeList) }}</span>
				</view>
			</u-row>
			<u-row>
				<view>应对事故类型：{{ tableData.accidentType }}</view>
			</u-row>
			<u-row>
				<view>适用地区：{{ tableData.usedDeptName }}</view>
			</u-row>
			<u-row>
				<view>编制单位：{{ tableData.preDeptName }}</view>
			</u-row>
			<u-row>
				<view>编制人：{{ tableData.preUserName }}</view>
			</u-row>
			<u-row>
				<view>有效期：{{ tableData.validityBegin }} ~ {{ tableData.validityEnd }}</view>
			</u-row>
			<u-row>
				<view>编写时间：{{ tableData.filingTime }}</view>
			</u-row>
			<u-row>
				<view>备案回执：<view style="color: #3c9cff;font-weight: 400;margin-left: 100rpx;"
						v-for="(item,index) in tableData.fileList">
						{{item.fileActualName}}
					</view>
				</view>
			</u-row>
		</uni-card>
	</view>
</template>

<script>
	import {
		listPlan,
		getPlan
	} from '@/api/indexpage/plan/index.js'
	import {
		getDicts
	} from "@/api/indexpage/user.js"
	export default {
		onLoad(option) {
			this.optionId = option.id;
		},
		data() {
			return {
				optionId: '', //传值id
				tableData: [],
				planTypeList: [], //预案类型字典值
				beianStatusList: [], //备案类型字典值
			};
		},
		mounted() {
			this.getDict()
			this.getList(this.optionId)
		},
		methods: {
			// 字典值
			getDict() {
				getDicts('emergency_plan_type').then(res => {
					let dataInfo = res.data;
					this.planTypeList = dataInfo.map(item => {
						return {
							key: item.dictLabel,
							value: item.dictValue
						}
					})
				});
				getDicts('filing_status').then(res => {
					let dataInfo = res.data;
					this.beianStatusList = dataInfo.map(item => {
						return {
							key: item.dictLabel,
							value: item.dictValue
						}
					})
				})
			},
			setDict(stauts, list) {
				for (let item of list) {
					if (item.value === stauts) {
						return item.key;
					}
				}
			},
			getList(id) {
				getPlan(id).then(res => {
					this.tableData = res.data
					console.log(this.tableData);
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-row {
		background-color: #f9fbfc;
		margin-bottom: 10rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}
</style>