IRS-ui-develop/src/components/investment/common/ProjectExitPlanFormDetail.vue

<template>
	<div class="project-exit-plan-form">
		<div class="form-heading">
			<div class="form-title">{{ title ? title : t('projectExitPlan.form.title') }}</div>
			<div class="form-meta">
				<div class="meta-item">
					<span>{{ t('projectExitPlan.form.applyDepartmentLabel') }}：</span>
					<span>{{ formData.applicationDept }}</span>
				</div>
				<div class="meta-item">
					<span>{{ t('projectExitPlan.form.applyDateLabel') }}：</span>
					<span>{{new Date().toLocaleDateString('zh-CN')}}</span>
				</div>
			</div>
		</div>

		<el-form :model="formData" class="exit-plan-table">
			<el-form-item class="table-row" prop="projectName" required>
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.projectName') }}</div>
				</template>
				<div class="table-cell value project-name-cell">
					<span>{{ formData.projectName }}</span>
				</div>
				<div class="table-cell action">
				</div>
			</el-form-item>

			<el-form-item class="table-row" prop="exitRecommendation" required>
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.exitSuggestion') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.exitRecommendation }}</span>
				</div>
			</el-form-item>

			<el-form-item class="table-row">
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.exitMethod') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.exitMethod }}</span>
				</div>
			</el-form-item>

			<el-form-item class="table-row">
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.executionTask') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.executionTask }}</span>
				</div>
			</el-form-item>

			<el-form-item class="table-row">
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.taskDescription') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.taskDescription }}</span>
				</div>
			</el-form-item>

			<el-form-item class="table-row">
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.executor') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.executor }}</span>
				</div>
			</el-form-item>

			<el-form-item class="table-row two-columns">
				<template #label>
					<div class="table-cell label">{{ t('projectExitPlan.form.taskStartTime') }}</div>
				</template>
				<div class="table-cell value">
					<span>{{ formData.taskStartDate }}</span>
				</div>
				<div class="table-cell label">{{ t('projectExitPlan.form.taskEndTime') }}</div>
				<div class="table-cell value">
					<span>{{ formData.taskEndDate }}</span>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import type { ProjectTask } from '/@/views/invMid/projectExitPlan/interface/type';
const { t } = useI18n();

const props = defineProps<{
	modelValue: ProjectTask;
	title?: string;
}>();

const emit = defineEmits<{
	(e: 'update:modelValue', value: ProjectTask): void;
}>();

const defaultForm: ProjectTask = {
	id: undefined,
	projectName: '',
	projectId: undefined,
	exitRecommendation: '',
	executionTask:'',
	taskDescription:'',
	executor:'',
	taskStartDate:new Date().toISOString().substring(0,10),
	taskEndDate:new Date().toISOString().substring(0,10),
};

const formData = reactive<ProjectTask>({ ...defaultForm, ...props.modelValue });

watch(
	formData,
	(newVal) => {
		emit('update:modelValue', { ...newVal });
	},
	{ deep: true }
);

watch(
	() => props.modelValue,
	(newVal) => {
		if (newVal) {
			Object.assign(formData, newVal);
		}
	},
	{ immediate: true, deep: true }
);
</script>

<style scoped>
.project-exit-plan-form {
	background-color: #fff;
	border: 1px solid var(--el-border-color-lighter);
	border-radius: 4px;
	padding: 24px;
}

.form-heading {
	text-align: center;
	margin-bottom: 20px;
}

.form-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 8px;
}

.form-meta {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.exit-plan-table {
	border: 1px solid var(--el-border-color);
	border-collapse: collapse;
}

.table-row {
	display: flex;
	border-top: 1px solid var(--el-border-color);
}

.table-row:first-of-type {
	border-top: none;
}

.table-cell {
	border-right: 1px solid var(--el-border-color);
	padding: 12px;
	display: flex;
	align-items: center;
}

.table-cell:last-of-type {
	border-right: none;
}

.table-cell.label {
	width: 180px;
	height: 100%;
	background-color: var(--el-fill-color-light);
	font-weight: 500;
}

.table-cell.label.required::after {
	content: '*';
	margin-left: 4px;
	color: var(--el-color-danger);
}

.table-cell.value {
	flex: 1;
}
.table-row {
	margin: 0;
}
.table-row.two-columns .table-cell.label {
	width: 160px;
}

.table-row.two-columns .table-cell.value {
	flex: 1;
}

.project-name-cell {
	flex: 1;
}

.table-cell.action {
	width: 80px;
	justify-content: center;
}

:deep(.el-form-item--default .el-form-item__label) {
	height: 100%;
	position: relative;
}
:deep(.el-form-item__label:before) {
	left: 4px;
	position: absolute;
}
</style>