jy-safe-app/pages/apply/subPages/FO2/techEdit.vue

<template>
	<view class="page-wrap">
		<view class="card">
			<uni-card margin="0" :is-shadow="true">
				<u--form labelPosition="left" labelWidth="auto" labelAlign="center" :model="dataModel" :rules="rules" ref="wForm" errorType="border-bottom">

					<u-form-item label="编号" prop="CODE" borderBottom>
						<u--input v-model="dataModel.CODE" disabled disabledColor="#ffffff" placeholder="请输入编号" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="作业名称" prop="stepName" borderBottom required>
						<u--input v-model="dataModel.Nav_OperationStep.NAME" disabled disabledColor="#ffffff" placeholder="请输入作业名称" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="作业地点" prop="JOB_LOCATION" borderBottom>
						<u--input v-model="dataModel.JOB_LOCATION" placeholder="请输入作业地点" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="交底时间" prop="DISCLOSURE_DATE" borderBottom required @click="showCheckDate({ name: 'jobDate', dataIndex: index})">
						<u--input v-model="dataModel.DISCLOSURE_DATE" placeholder="请输入交底时间" border="none" inputAlign="right">
						</u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
					<u-form-item label="交底人" prop="disclosurePerson" borderBottom required>
						<u--input v-model="dataModel.Nav_DisclosurePerson.NAME" placeholder="请输入交底人" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="交底内容" prop="DisclosureContent" borderBottom required class="demo-ruleForm">

					</u-form-item>
					<u--textarea maxlength="1000" count v-model="dataModel.DisclosureContent" placeholder="请输入交底内容" border="none" inputAlign="left">
					</u--textarea>

					<view class="upload-title">附件：</view>
					<full-upload v-model="dataModel.Nav_Files"></full-upload>
					<u-form-item label="关联内部工作票" prop="disclosurePerson" borderBottom>
						<u--input v-model="(dataModel.Nav_JobName||{}).CODE" disabled disabledColor="#ffffff" border="none" inputAlign="right">
						</u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="info-circle" v-if="dataModel.Nav_JobName" @click="naviJob(dataModel.Nav_JobName.ID)"></u-icon>
					</u-form-item>
					<u-form-item label="关联动火工作票" prop="disclosurePerson" borderBottom>
						<u--input v-model="(dataModel.Nav_FireJob||{}).CODE" disabled disabledColor="#ffffff" border="none" inputAlign="right">
						</u--input>
						<u-icon style="margin-left: 4px;" slot="right" name="info-circle" v-if="dataModel.Nav_FireJob" @click="naviJob(dataModel.Nav_FireJob.ID)"></u-icon>
					</u-form-item>
				</u--form>
			</uni-card>
		</view>
		<!-- ... 其他原有内容 ... -->

		<!-- 使用 u-popup 弹窗展示 jobShow -->
		<u-popup :show="showJobPopup" @close="closeJobPopup" mode="center" :round="12" :closeable="true" :closeOnClickOverlay="true">
			<view class="job-popup-wrap">
				<view class="job-popup-header">
					<text class="job-popup-title">关联工作票详情</text>
				</view>
				<scroll-view class="job-popup-body" scroll-y :style="{ height: popupHeight + 'px' }">
					<!-- 使用 jobShow 组件，传入 id 属性 -->
					<job-show v-if="jobShowId&&dataModel.Nav_JobName" :id="jobShowId" ref="jobShowRef"></job-show>
					<job-fire-show :isPopupMode="true" v-if="jobShowId&&dataModel.Nav_FireJob" :id="jobShowId" ref="jobFireShowRef"></job-fire-show>
				</scroll-view>
			</view>
		</u-popup>

		<!-- ... 其他原有组件 ... -->

		<view class="bottom-button">
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendOrder,
		extendRule,
		guid,
		initFilter,
		initFilterGroup,
		extendIgnoreDataRule
	} from '../../../../utils/common'
	import {
		getRequest,
		getUserLists,
		saveTechRecord
	} from '../../../../services/apply/FOServices/FOServices.js'
	import config from '../../../../config/common'
	// 引入 jobShow 组件
	import jobShow from './jobShow.vue'
	import jobFireShow from './../FO/jobFireShow.vue'

	export default {
		// 注册组件
		components: {
			jobShow,
			jobFireShow
		},
		data() {
			return {
				ID: '',
				TaskID: '',
				curTotal: 0,
				isVisble: 'none',
				isVisbleOut: 'none',
				showDelModalIndex: undefined,
				isLoadOK: false,
				tableKey: 0,
				formatter: null,
				userLists: [],
				// 弹窗控制
				showJobPopup: false,
				jobShowId: null,
				popupHeight: 500, // 弹窗内容高度
				dataModel: {
					CODE: '',
					NAME: '',
					JOB_LOCATION: '',
					Nav_OperationStep: {
						NAME: ''
					},
					Nav_DisclosurePerson: {
						NAME: ''
					},
				},
				subDataModel: {
					Nav_Person: {
						Nav_User: {
							NAME: '',
							CODE: '',
						},
						Nav_RelatedUser: {
							NAME: '',
						},
					}
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				comPickerInfo: {
					showSheet: false,
					columns: [],
					title: '',
					dataIndex: undefined,
					formIndex: undefined,
					name: ''
				},
				currentOperateUser: {},
				showPopup: false,
				dateTimePickerInfo: {
					showCheckDate: false,
					dataIndex: undefined,
					defaultDateTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
					value: '',
					name: ''
				},
				rules: {
					'JOB_LOCATION': {
						type: 'string',
						required: true,
						trigger: ['blur', 'change']
					},
					'DisclosureContent': {
						type: 'string',
						required: true,
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad(opt) {
			this.handleGetTechGet(opt)
			// 计算弹窗高度
			this.calcPopupHeight()
		},
		methods: {
			// 计算弹窗高度
			calcPopupHeight() {
				const systemInfo = uni.getSystemInfoSync()
				const windowHeight = systemInfo.windowHeight
				// 弹窗占屏幕高度的 70%，减去头部高度
				this.popupHeight = Math.floor(windowHeight * 0.7) - 60
			},
			// 打开工作票弹窗
			naviJob(id) {
				if (!id) {
					uni.$showErrorInfo('未找到关联的工作票')
					return
				}
				this.jobShowId = id
				this.showJobPopup = true
			},
			// 关闭弹窗
			closeJobPopup() {
				this.showJobPopup = false
				// 延迟清空 id，避免组件销毁问题
				setTimeout(() => {
					this.jobShowId = null
				}, 300)
			},
			handleGetTechGet(opt) {
				this.TaskID = opt.taskID ? opt.taskID : '';
				this.ID = opt.ID ? opt.ID : '';
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "")
				extendRule(json, 'ID', 1, opt.ID)
				// extendIgnoreDataRule(json)
				// TODO: id 未获取
				getRequest(json, "/FO/FOTechDisclosureFrom/GetEdit").then(res => {
					this.dataModel = res
					if (res.Nav_Person && res.Nav_Person.length > 0) {
						for (let i = 0; i < res.Nav_Person.length; i++) {
							if (res.Nav_Person[i].User_ID === null) {
								res.Nav_Person[i].Nav_User = null
							}
							if (res.Nav_Person[i].RELATED_USER_ID === null) {
								res.Nav_Person[i].Nav_RelatedUser = null
							}
						}
					}
					if (res.IS_OUTSOURCE == true && res.RELATED_ID != null) {
						this.isVisble = 'none'
						this.isVisbleOut = 'block'
					} else {
						this.isVisble = 'block'
						this.isVisbleOut = 'none'
					}
					this.isLoadOK = true
				})
			},
			// ... 其他原有方法保持不变 ...

			// 注意：原来的 naviJob 方法已被替换为弹窗版本
			// 如果还需要保留跳转功能，可以重命名为 naviJobToPage
		}
	}
</script>

<style scoped>
	@import url("../../../../style/css/editTemplate.css");

	.page-wrap {
		padding: 16px 16px 166px;
	}

	.card {
		margin-bottom: 18px;
	}

	.sub-form {
		margin-bottom: 16px;
	}

	.demo-ruleForm>>>.u-textarea {
		padding: 9px 9px 25px 9px;
		/* padding: 6px 9px; */
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 16px;
		box-sizing: border-box;
		background: #fff;
		z-index: 999;
	}

	.upload-title {
		color: #303133;
		font-size: 15px;
		line-height: 22px;
		padding: 8px 0;
	}

	.page-wrap>>>.u-upload__button {
		margin-bottom: 0;
	}

	/* 弹窗样式 */
	.job-popup-wrap {
		width: 92vw;
		max-width: 600px;
		background: #ffffff;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.job-popup-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
		text-align: center;
	}

	.job-popup-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.job-popup-body {
		/* padding: 0 16px 16px; */
	}

	/* 弹窗内部滚动条样式 */
	.job-popup-body::-webkit-scrollbar {
		width: 4px;
	}

	.job-popup-body::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 4px;
	}
</style>