super/IRS-ui-develop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
supernijia
2025-12-26 23:19:09 +08:00
commit b29d128e41
788 changed files with 100922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/components/investment/common/ProjectExitPlanFormDetail.vue Normal file
View File

@@ -0,0 +1,239 @@
<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>