wdt_erp_process_h5/pages/apps/notification/notificationDetail.vue

<template>
	<view v-if="!showFlag">
		<u-cell-group :border="false">
			<u-cell :border="false">
				<u--text slot="title" :text="`标题：${notication.title}`"   ></u--text>
			</u-cell>
			<u-cell :border="false">
				<u--text slot="title" type="info" :text="`发布者：${notication.createBy.name}，类型：${$dictUtils.getDictLabel('oa_notify_type', notication.type ,'')}`"></u--text>
			</u-cell>
			<u-cell>
				<u--text slot="title" type="info" :text="`发布时间: ${notication.createTime}`"></u--text>
			</u-cell>
		</u-cell-group>
		<view class="padding bg-white">
			<u-parse :content="notication.content"></u-parse>
		</view>
	</view>
	<view v-else-if="showFlag">
		<!-- First Section: 巡视工单 to 联系方式 -->
		<view class="form-section">
			<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm" v-if="!nodeFlag">

				<u-form-item label="巡视工单" prop="no">
					<u--input v-model="inputForm.no" :disabled="true" placeholder="工单编号" clearable></u--input>
				</u-form-item>

				<u-form-item label="处理单位" borderBottom prop="processingUnit" :required="true" v-if="!disFlag">
					<jp-picker v-model="inputForm.processingUnit" rangeKey="label" rangeValue="value" :range="processingUnits" @input="getUserInfoByOffId"></jp-picker>
				</u-form-item>

				<u-form-item label="处理单位" borderBottom prop="processingUnitName" :required="true" v-else-if="disFlag">
					<u--input v-model="inputForm.processingUnitName" :disabled="true" placeholder="处理单位" clearable></u--input>
				</u-form-item>

				<u-form-item label="清运专员" prop="clearUserName">
					<u--input v-model="inputForm.clearUserName" :disabled="true" placeholder="清运专员" clearable></u--input>
				</u-form-item>

				<u-form-item label="联系方式" prop="clearUserMobile">
					<u--input v-model="inputForm.clearUserMobile" :disabled="true" placeholder="联系方式" clearable></u--input>
				</u-form-item>
			</u--form>
		</view>

		<!-- Second Section: 上传图片 -->
		<view class="form-section">
			<text class="u-demo-block__title">现场照片</text>
			<view class="u-page__upload-item">
				<u-upload
						:disabled="true"
						:fileList="fileList1"
						name="1"
						multiple
						:maxCount="10"
				></u-upload>
			</view>
		</view>

		<!-- Third Section: 备注 -->
		<view class="form-section">
			<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm" v-if="!nodeFlag">
				<u-form-item label="备注" borderBottom prop="remarks">
					<u--textarea placeholder='请填写备注' :maxlength="500" v-model="inputForm.remarks" :disabled="true"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import overService from '@/api/garbageClearance/overService'
	import notifyService from "@/api/notify/notifyService";
	export default {
		data() {
			return {
				disFlag: true,  // 启用动态获取处理单位则设置为false
				processingUnits: [],
				fileList1: [],
				nodeFlag: false,
				inputForm: {
					no: '',
					processingUnit: '',
					processingUnitName: '',
					clearUserId: '',
					clearUserName: '',
					clearUserMobile: '',
					remarks: '',
				},
				rules: {
					'processingUnit': [
						{
							required: true,
							message: '处理单位不能为空',
							trigger: ['blur', 'change']
						}
					],
				},
				showFlag: false,
				notication: {
					title: '',
					createTime: '',
					createBy: {
						name: ''
					}
				}
			}
		},
		onLoad (option) {
			notifyService.query({isSelf:true, id:option.id}).then(async (data)=>{

				if (data.lookOverId) {
					this.showFlag = true;
				}
				// 获取巡视工单信息
				await overService.queryById(data.lookOverId).then((data) => {
					data.no = 'XS-J' + data.no;
					console.log('data', data)
					this.fileList1 = data.fileList1
					console.log('this.fileList1', this.fileList1)
					this.inputForm = this.recover(this.inputForm, data)
				})
				this.notication = data
			});
		}
	}
</script>

<style>
	.form-section {
		padding: 10px 15px;
		margin-bottom: 10px;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.u-page__upload-item {
		margin-top: 10px;
	}

	.button-container {
		margin-top: 20px;
		text-align: center;
	}

	.cu-form-group .title {
		min-width: 100px;
	}
</style>