110 lines
4.5 KiB
Vue
110 lines
4.5 KiB
Vue
<template>
|
||
<div>
|
||
<el-row class="mb10 header-meta">
|
||
<div class="meta-item">{{ t('cooperationUnit.reporterLabel') + displayReporter }}</div>
|
||
<div class="meta-item">{{ t('cooperationUnit.reportingUnitLabel') + displayUnit }}</div>
|
||
<div class="meta-item">{{ t('cooperationUnit.dateLabel') + displayDate }}</div>
|
||
<div class="meta-item">{{ t('cooperationUnit.serialNumber') + '--' }}</div>
|
||
</el-row>
|
||
|
||
<!-- 动态明细表（按图示） -->
|
||
<el-table :data="data" border style="width: 100%;">
|
||
<el-table-column type="index" :label="t('cooperationUnit.index')" width="60" />
|
||
<el-table-column prop="cooperationName" :label="t('cooperationUnit.cooperationName')" min-width="200" />
|
||
<el-table-column prop="areaCode" :label="t('cooperationUnit.provinceCity')" min-width="240">
|
||
<template #default="scope">
|
||
{{ scope.row.areaCode }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="cooperationNature" :label="t('cooperationUnit.cooperationNature')" min-width="140">
|
||
<template #default="{ row }">
|
||
{{ cooperationPartnerNatureOptions.find(item => item.value === row.cooperationNature)?.label || row.cooperationNature || '--' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="cooperationIndustry" :label="t('cooperationUnit.cooperationIndustry')" min-width="160" />
|
||
<el-table-column prop="proposedBusinessCooperation" :label="t('cooperationUnit.proposedBusinessCooperation')" min-width="180" />
|
||
<el-table-column prop="cooperationAdvantage" :label="t('cooperationUnit.cooperationAdvantage')" min-width="160" />
|
||
<el-table-column prop="cooperationStatus" :label="t('cooperationUnit.cooperationStatus')" min-width="140" />
|
||
<el-table-column prop="startTime" :label="t('cooperationUnit.startTime')" min-width="170" />
|
||
<el-table-column prop="endTime" :label="t('cooperationUnit.endTime')" min-width="170" />
|
||
<el-table-column prop="unitAddress" :label="t('cooperationUnit.unitAddress')" min-width="200" />
|
||
<el-table-column prop="unitContactPerson" :label="t('cooperationUnit.unitContactPerson')" min-width="150" />
|
||
<el-table-column prop="contactPersonDept" :label="t('cooperationUnit.contactPersonDept')" min-width="160" />
|
||
<el-table-column prop="contactPersonPhone" :label="t('cooperationUnit.contactPersonPhone')" min-width="160" />
|
||
<el-table-column prop="potentialCooperation" :label="t('cooperationUnit.potentialCooperation')" min-width="180" />
|
||
<el-table-column prop="businessConnectionCompany" :label="t('cooperationUnit.businessConnectionCompany')" min-width="200" />
|
||
<el-table-column prop="cooperationController" :label="t('cooperationUnit.actualController')" min-width="160" />
|
||
<el-table-column prop="shareholdingRatio" :label="t('cooperationUnit.shareholdingRatio')" min-width="140" />
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" name="bizInvestmentCooperationUnit" setup>
|
||
import { useI18n } from 'vue-i18n';
|
||
import { useUserInfo } from '/@/stores/userInfo';
|
||
import { formatDate } from '/@/utils/formatTime';
|
||
import { cooperationPartnerNatureOptions } from '/@/hooks/enums'
|
||
|
||
const props = defineProps({
|
||
isUpdate: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
data: {
|
||
type: Array,
|
||
default: () => ([])
|
||
}
|
||
})
|
||
|
||
const { t } = useI18n();
|
||
|
||
// 头部摘要显示
|
||
const userInfoStore = useUserInfo();
|
||
const displayReporter = (userInfoStore.userInfos.user?.username || '');
|
||
const displayUnit = (userInfoStore.userInfos.user?.deptName || '');
|
||
const displayDate = formatDate(new Date(), 'YYYY-mm-dd');
|
||
</script>
|
||
|
||
<style scoped>
|
||
.form-header-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-summary .title {
|
||
margin: 0 auto;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.header-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 50%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header-meta .meta-item {
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
|
||
.required-star {
|
||
color: var(--el-color-danger);
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.red-label {
|
||
color: var(--el-color-danger);
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.form-header-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
</style>
|