The final effect is as follows:
front-end code
<template>
<div>
<el-dialog
:title="title"
size="small"
:close-on-click-modal="false"
v-dialogDrag
:visible.sync="visible"
>
<el-button v-print="'#table'">打印</el-button>
<el-form
size="small"
:model="inputForm"
ref="inputForm"
v-loading="loading"
:class="method === 'view' ? 'readonly' : ''"
:disabled="method === 'view'"
>
<table id="table" cellpadding="0" cellspacing="0" border="0">
<!-- 合并四行则要写4个 tr ,第二第三第四个 tr 里面合并过了的列就不用再写了,如下是合并了四行的代码-->
<tr>
<th colspan="1" rowspan="9" class="width-30">基本情况</th>
<td colspan="2" rowspan="1" class="label">姓名</td>
<td colspan="2">
<el-form-item prop="name" :rules="[]">
<el-input v-model="inputForm.name" placeholder=""></el-input>
</el-form-item>
</td>
<td colspan="2" class="label">性别</td>
<td rowspan="1">
<el-form-item prop="sex" :rules="[]">
<el-select
v-model="inputForm.sex"
placeholder=""
style="width: 100%"
>
<el-option
v-for="item in $dictUtils.getDictList('sex')"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</td>
<td class="label">籍贯</td>
<td>
<el-form-item prop="place" :rules="[]">
<el-input v-model="inputForm.place" placeholder=""></el-input>
</el-form-item>
</td>
<td colspan="1" rowspan="4" class="userPhotos">
<div v-if="!inputForm.img" class="userPhotosTips">
照片 <br />（二寸彩色免冠照片）
</div>
<el-form-item
prop="img"
:rules="[]"
:style="inputForm.img ? 'opacity: 1;' : 'opacity: 0.1;'"
>
<el-upload
class="avatar-uploader"
ref="photo"
v-if="visible"
list-type="picture-card"
:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/personnel/oaPersonnelInfo`"
:headers="{ token: $cookie.get('token') }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="inputForm.img"
:src="inputForm.img"
class="avatar"
/>
<i v-else class="avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="2" class="label">民族</td>
<td>
<el-form-item prop="nation" :rules="[]">
<el-input v-model="inputForm.nation" placeholder=""></el-input>
</el-form-item>
</td>
<td colspan="1" class="label">政治<br />面貌</td>
<td colspan="2">
<el-form-item prop="outlook" :rules="[]">
<el-input v-model="inputForm.outlook" placeholder=""></el-input>
</el-form-item>
</td>
<td class="label">入党/团 <br />时间</td>
<td colspan="2">
<el-form-item prop="partyTime" :rules="[]">
<el-date-picker
v-model="inputForm.partyTime"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder=""
>
</el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">身份证号码</td>
<td colspan="3">
<el-form-item prop="card" :rules="[]">
<el-input v-model="inputForm.card" placeholder=""></el-input>
</el-form-item>
</td>
<td class="label">
户口<br />
所在地
</td>
<td colspan="2">
<el-form-item prop="registered" :rules="[]">
<el-input
v-model="inputForm.registered"
placeholder=""
></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">参加工作时间</td>
<td colspan="6">
<el-form-item prop="startTime" :rules="[]">
<el-date-picker
v-model="inputForm.startTime"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder=""
>
</el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">学历</td>
<td>
<el-form-item prop="educations" :rules="[]">
<el-input
v-model="inputForm.educations"
placeholder=""
></el-input>
</el-form-item>
</td>
<td colspan="1" class="label">毕业时间</td>
<td colspan="2">
<el-form-item prop="endTime" :rules="[]">
<el-date-picker
v-model="inputForm.endTime"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder=""
>
</el-date-picker>
</el-form-item>
</td>
<td colspan="2" class="label">毕业院校 及专业</td>
<td>
<el-form-item prop="school" :rules="[]">
<el-input v-model="inputForm.school" placeholder=""></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">现职务/岗位</td>
<td>
<el-form-item prop="station" :rules="[]">
<el-input v-model="inputForm.station" placeholder=""></el-input>
</el-form-item>
</td>
<td colspan="1" class="label">任职时间</td>
<td colspan="2">
<el-form-item prop="tenure" :rules="[]">
<el-date-picker
v-model="inputForm.tenure"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder=""
>
</el-date-picker>
</el-form-item>
</td>
<td colspan="2" class="label">掌握何 种外语</td>
<td>
<el-form-item label="" prop="language" :rules="[]">
<el-input
v-model="inputForm.language"
placeholder=""
></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">现专业职称</td>
<td>
<el-form-item label="" prop="professional" :rules="[]">
<el-input
v-model="inputForm.professional"
placeholder=""
></el-input>
</el-form-item>
</td>
<td colspan="1" class="label">授职时间</td>
<td colspan="2">
<el-form-item label="" prop="appointmentTime" :rules="[]">
<el-date-picker
v-model="inputForm.appointmentTime"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder=""
>
</el-date-picker>
</el-form-item>
</td>
<td colspan="2" class="label">外语水平</td>
<td>
<el-form-item label="" prop="languageLevel" :rules="[]">
<el-input
v-model="inputForm.languageLevel"
placeholder=""
></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">家庭详细地址</td>
<td colspan="4">
<el-form-item label="" prop="address" :rules="[]">
<el-input v-model="inputForm.address" placeholder=""></el-input>
</el-form-item>
</td>
<td colspan="2" class="label">邮编</td>
<td>
<el-form-item
prop="email"
:rules="[{ validator: validator.isZipCode, trigger: 'blur' }]"
>
<el-input v-model="inputForm.email" placeholder=""></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="3" class="label">联 系 方 式</td>
<td class="label">宅电</td>
<td colspan="3">
<el-form-item prop="electricity" :rules="[]">
<el-input
v-model="inputForm.electricity"
placeholder=""
></el-input>
</el-form-item>
</td>
<td class="label">手机</td>
<td colspan="2">
<el-form-item
prop="phone"
:rules="[{ validator: validator.isTel, trigger: 'blur' }]"
>
<el-input v-model="inputForm.phone"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoMemberList.length < 5
? 9
: inputForm.oaPersonnelInfoMemberList.length + 4
"
class="width-30"
>
家庭情况
</th>
<th rowspan="3" class="width-30">配偶</th>
<td colspan="2" class="label">姓名</td>
<td>
<el-form-item prop="spouseName" :rules="[]">
<el-input v-model="inputForm.spouseName"></el-input>
</el-form-item>
</td>
<td class="label">民族</td>
<td>
<el-form-item prop="spouseNation" :rules="[]">
<el-input v-model="inputForm.spouseNation"></el-input>
</el-form-item>
</td>
<td class="label">籍贯</td>
<td>
<el-form-item prop="spousePlace" :rules="[]">
<el-input v-model="inputForm.spousePlace"></el-input>
</el-form-item>
</td>
<td class="label">出生<br />年月</td>
<td>
<el-form-item prop="spouseBirth" :rules="[]">
<el-date-picker
v-model="inputForm.spouseBirth"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="2" class="label">政治面貌</td>
<td>
<el-form-item prop="spouseOutlook" :rules="[]">
<el-input v-model="inputForm.spouseOutlook"></el-input>
</el-form-item>
</td>
<td class="label">文化程度</td>
<td colspan="2">
<el-form-item prop="spouseEducations" :rules="[]">
<el-input v-model="inputForm.spouseEducations"></el-input>
</el-form-item>
</td>
<td class="label">毕业院校</td>
<td colspan="2">
<el-form-item prop="spouseSchool" :rules="[]">
<el-input v-model="inputForm.spouseSchool"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="2" class="label">工作单位</td>
<td>
<el-form-item prop="spouseCompany" :rules="[]">
<el-input v-model="inputForm.spouseCompany"></el-input>
</el-form-item>
</td>
<td class="label">担任职务</td>
<td colspan="2">
<el-form-item prop="spouseDuties" :rules="[]">
<el-input v-model="inputForm.spouseDuties"></el-input>
</el-form-item>
</td>
<td class="label">联系电话</td>
<td colspan="2">
<el-form-item
prop="spousePhone"
:rules="[{ validator: validator.isTel, trigger: 'blur' }]"
>
<el-input v-model="inputForm.spousePhone"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoMemberList.filter(function (item) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoMemberList.filter(function (item) {
return item.delFlag !== '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoMemberRow"
title="点击新建主要成员"
>
主要成员
</th>
<th colspan="2">称谓</th>
<th>姓名</th>
<th colspan="2">出生 年月</th>
<th colspan="2">工作单位</th>
<th colspan="2">职务/岗位</th>
</tr>
<tr
v-for="(item, index) in inputForm.oaPersonnelInfoMemberList.filter(
function (item) {
return item.delFlag !== '1';
}
)"
:key="`oaPersonnelInfoMemberList-1-${index}`"
@click="editOaPersonnelInfoMemberRow(item)"
title="点击修改主要成员"
>
<td colspan="2">{
{ item.appellation }}</td>
<td>{
{ item.name }}</td>
<td colspan="2">{
{ item.birth }}</td>
<td colspan="2">{
{ item.company }}</td>
<td colspan="2">{
{ item.duties }}</td>
</tr>
<tr
v-for="(item, index) in inputForm.oaPersonnelInfoMemberList.filter(
function (item) {
return item.delFlag !== '1';
}
).length < 5
? 5 -
inputForm.oaPersonnelInfoMemberList.filter(function (item) {
return item.delFlag !== '1';
}).length
: ''"
:key="`oaPersonnelInfoMemberList-2-${index}`"
@click="addOaPersonnelInfoMemberRow"
title="点击新建主要成员"
>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoRelationsList.filter(function (item) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoRelationsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoRelationsRow"
title="点击新建主要社会关系"
>
主要社会关系
</th>
<th
:rowspan="
inputForm.oaPersonnelInfoRelationsList.filter(function (item) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoRelationsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoRelationsRow"
title="点击新建主要社会关系"
>
国内 <br />
/ <br />国外
</th>
<th colspan="2">称谓</th>
<th>姓名</th>
<th colspan="2">年龄</th>
<th colspan="2">工作单位</th>
<th colspan="2">职务/岗位</th>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoRelationsList.filter(function (item) {
return item.delFlag !== '1';
})"
:key="`oaPersonnelInfoRelationsList-1-${index}`"
@click="editOaPersonnelInfoRelationsRow(item)"
title="点击修改主要社会关系"
>
<td colspan="2">{
{ item.appellation }}</td>
<td>{
{ item.name }}</td>
<td colspan="2">{
{ item.age }}</td>
<td colspan="2">{
{ item.company }}</td>
<td colspan="2">{
{ item.duties }}</td>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoRelationsList.filter(function (item) {
return item.delFlag !== '1';
}).length < 5
? 5 -
inputForm.oaPersonnelInfoRelationsList.filter(function (item) {
return item.delFlag !== '1';
}).length
: ''"
:key="`oaPersonnelInfoRelationsList-2-${index}`"
@click="addOaPersonnelInfoRelationsRow"
title="点击新建主要社会关系"
>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoResumetrainingList.filter(function (
item
) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoResumetrainingList.filter(
function (item) {
return item.delFlag !== '1';
}
).length + 1
"
class="width-30"
@click="addOaPersonnelInfoResumetrainingRow"
title="点击新建主要学习培训简历"
>
主要学习培训简历
</th>
<th colspan="3">起始年月</th>
<th colspan="2">结束年月</th>
<th colspan="4">在何处何专业学习</th>
<th>证明人</th>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoResumetrainingList.filter(function (
item
) {
return item.delFlag !== '1';
})"
:key="`oaPersonnelInfoResumetrainingList-1-${index}`"
@click="editOaPersonnelInfoResumetrainingRow(item)"
title="点击修改主要学习培训简历"
>
<td colspan="3">{
{ item.startTime }}</td>
<td colspan="2">{
{ item.endTime }}</td>
<td colspan="4">{
{ item.site }}</td>
<td>{
{ item.witness }}</td>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoResumetrainingList.filter(function (
item
) {
return item.delFlag !== '1';
}).length < 5
? 5 -
inputForm.oaPersonnelInfoResumetrainingList.filter(function (
item
) {
return item.delFlag !== '1';
}).length
: ''"
:key="`oaPersonnelInfoResumetrainingList-2-${index}`"
@click="addOaPersonnelInfoResumetrainingRow"
title="点击新建主要学习培训简历"
>
<td colspan="3"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td></td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoResumeList.filter(function (item) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoResumeList.filter(function (item) {
return item.delFlag !== '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoResumeRow"
title="点击新建工作简历"
>
工作简历
</th>
<th colspan="3">起始年月</th>
<th colspan="2">结束年月</th>
<th colspan="2">在何单位工作</th>
<th colspan="2">职务/岗位</th>
<th>证明人</th>
</tr>
<tr
v-for="(item, index) in inputForm.oaPersonnelInfoResumeList.filter(
function (item) {
return item.delFlag !== '1';
}
)"
:key="`oaPersonnelInfoResumeList-1-${index}`"
@click="editOaPersonnelInfoResumeRow(item)"
title="点击修改工作简历"
>
<td colspan="3">{
{ item.startTime }}</td>
<td colspan="2">{
{ item.endTime }}</td>
<td colspan="2">{
{ item.company }}</td>
<td colspan="2">{
{ item.duties }}</td>
<td>{
{ item.witness }}</td>
</tr>
<tr
v-for="(item, index) in inputForm.oaPersonnelInfoResumeList.filter(
function (item) {
return item.delFlag !== '1';
}
).length < 5
? 5 -
inputForm.oaPersonnelInfoResumeList.filter(function (item) {
return item.delFlag !== '1';
}).length
: ''"
:key="`oaPersonnelInfoResumeList-2-${index}`"
@click="addOaPersonnelInfoResumeRow"
title="点击新建工作简历"
>
<td colspan="3"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoAchievementsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length < 5
? 6
: inputForm.oaPersonnelInfoAchievementsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoAchievementsRow"
title="点击新建主要技术开发或管理创新成果"
>
主要技术开发或管理创新成果
</th>
<th colspan="3">年 月 日</th>
<th colspan="5">主要技术开发或管理创新项目内容</th>
<th colspan="2">成果或表彰</th>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoAchievementsList.filter(function (
item
) {
return item.delFlag !== '1';
})"
:key="`oaPersonnelInfoAchievementsList-1-${index}`"
@click="editOaPersonnelInfoAchievementsRow(item)"
title="点击修改主要技术开发或管理创新成果"
>
<td colspan="3">{
{ item.time }}</td>
<td colspan="5">{
{ item.content }}</td>
<td colspan="2">{
{ item.achievements }}</td>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoAchievementsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length < 5
? 5 -
inputForm.oaPersonnelInfoAchievementsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length
: ''"
:key="`oaPersonnelInfoAchievementsList-2-${index}`"
@click="addOaPersonnelInfoAchievementsRow"
title="点击新建主要技术开发或管理创新成果"
>
<td colspan="3"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr>
<th
:rowspan="
inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length < 4 && punishmentList.length < 4
? 9
: inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length > 4 && punishmentList.length < 4
? inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length + 5
: inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length > 4 && punishmentList.length > 4
? inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1';
}).length + 1
: inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length < 4 && punishmentList.length > 4
? 5 + punishmentList.length
: 9
"
class="width-30"
>
奖 惩 情 况
</th>
<th
:rowspan="
inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length < 4
? 5
: inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length + 1
"
class="width-30"
@click="addOaPersonnelInfoPunishmentsRow(1)"
title="点击新建奖惩情况"
>
奖 励
</th>
<th colspan="2">年 月 日</th>
<th colspan="5">内 容</th>
<th colspan="2">何级审批</th>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
})"
:key="`oaPersonnelInfoPunishmentsList1-1-${index}`"
@click="editOaPersonnelInfoPunishmentsRow(item)"
title="点击修改奖励情况"
>
<td colspan="2">{
{ item.time }}</td>
<td colspan="5">{
{ item.content }}</td>
<td colspan="2">{
{ item.approve }}</td>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length < 4
? 4 -
inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return item.delFlag !== '1' && item.type == '1';
}).length
: ''"
:key="`oaPersonnelInfoPunishmentsList1-2-${index}`"
@click="addOaPersonnelInfoPunishmentsRow(1)"
title="点击新建奖励情况"
>
<td colspan="2"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr>
<th
:rowspan="
punishmentList.length < 4 ? 4 : punishmentList.length + 1
"
class="width-30"
@click="addOaPersonnelInfoPunishmentsRow(2)"
title="点击新建惩处情况"
>
惩 处
</th>
<td
colspan="2"
v-if="punishmentList.length > 0"
@click="editOaPersonnelInfoPunishmentsRow(punishmentList[0])"
title="点击修改惩处情况"
>
{
{ punishmentList[0].time }}
</td>
<td
colspan="2"
v-else
@click="addOaPersonnelInfoPunishmentsRow(2)"
title="点击新建惩处情况"
></td>
<td
colspan="5"
v-if="punishmentList.length > 0"
@click="editOaPersonnelInfoPunishmentsRow(punishmentList[0])"
title="点击修改惩处情况"
>
{
{ punishmentList[0].content }}
</td>
<td
colspan="5"
v-else
@click="addOaPersonnelInfoPunishmentsRow(2)"
title="点击新建惩处情况"
></td>
<td
colspan="2"
v-if="punishmentList.length > 0"
@click="editOaPersonnelInfoPunishmentsRow(punishmentList[0])"
title="点击修改惩处情况"
>
{
{ punishmentList[0].approve }}
</td>
<td
colspan="2"
v-else
@click="addOaPersonnelInfoPunishmentsRow(2)"
title="点击新建惩处情况"
></td>
</tr>
<tr
v-for="(
item, index
) in inputForm.oaPersonnelInfoPunishmentsList.filter(function (
item
) {
return (
item.delFlag !== '1' &&
item.type == '2' &&
(punishmentList.length > 0 ? item != punishmentList[0] : true)
);
})"
:key="`oaPersonnelInfoPunishmentsList2-1-${index}`"
@click="editOaPersonnelInfoPunishmentsRow(item)"
title="点击修改惩处情况"
>
<td colspan="2">{
{ item.time }}</td>
<td colspan="5">{
{ item.content }}</td>
<td colspan="2">{
{ item.approve }}</td>
</tr>
<tr
v-for="(item, index) in punishmentList.length < 4
? 4 - punishmentList.length
: ''"
:key="`oaPersonnelInfoPunishmentsList2-2-${index}`"
@click="addOaPersonnelInfoPunishmentsRow(2)"
title="点击新建惩处情况"
>
<td colspan="2"></td>
<td colspan="5"></td>
<td colspan="2"></td>
</tr>
<tr class="explanations">
<th colspan="2" class="width-60">
其他<br />
需说<br />
明的<br />
情况
</th>
<td colspan="9">
<el-form-item prop="explanations" :rules="[]">
<el-input
type="textarea"
v-model="inputForm.explanations"
placeholder=""
:rows="5"
></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="8" class="cardPastePhotos">
<div
class="cardPastePhotosTips"
v-if="inputForm.cardPaste.length == 0"
>
（身份证复印件粘贴栏）
</div>
<el-form-item
prop="cardPaste"
:rules="[]"
:style="
inputForm.cardPaste.length > 0
? 'opacity: 1;'
: 'opacity: 0.1;'
"
>
<el-upload
ref="cardPaste"
v-if="visible"
list-type="picture-card"
:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/personnel/oaPersonnelInfo`"
:headers="{ token: $cookie.get('token') }"
:on-preview="
(file, fileList) => {
$alert(
`< img style='width:100%' src=' ${
(file.response && file.response.url) || file.url
}'/>`,
{
dangerouslyUseHTMLString: true,
showConfirmButton: false,
closeOnClickModal: true,
customClass: 'showPic',
}
);
}
"
:on-success="
(response, file, fileList) => {
inputForm.cardPaste = fileList
.map(
(item) =>
(item.response && item.response.url) || item.url
)
.join('|');
}
"
:on-remove="
(file, fileList) => {
$http
.post(
`/sys/file/webupload/deleteByUrl?url=${
(file.response && file.response.url) || file.url
}`
)
.then(({ data }) => {
$message.success(data.msg);
});
inputForm.cardPaste = fileList
.map((item) => item.url)
.join('|');
}
"
:before-remove="
(file, fileList) => {
return $confirm(`确定移除 ${file.name}？`);
}
"
multiple
:limit="2"
:on-exceed="
(files, fileList) => {
$message.warning(
`当前限制选择 2 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
);
}
"
:file-list="imgArra"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</td>
<td colspan="44" class="remarktips">
<div class="remarks">
{
{ inputForm.remarks }}
</div>
<div class="preparer">
<div class="preparerTitle">填表人签名：</div>
<el-form-item prop="preparer" :rules="[]">
<el-input
v-model="inputForm.preparer"
placeholder=""
></el-input>
</el-form-item>
</div>
<div class="preparerTime">
<div class="preparerTimeContent" v-if="inputForm.preparerTime">
<span>{
{
moment(inputForm.preparerTime).format("YYYY") || " "
}}</span>
年
<span>{
{
moment(inputForm.preparerTime).format("MM") || " "
}}</span>
月
<span>{
{
moment(inputForm.preparerTime).format("DD") || " "
}}</span>
日
</div>
<div class="preparerTimeContent" v-else>
年 <span></span> 月 <span></span>
日
</div>
<el-form-item prop="preparerTime" :rules="[]">
<el-date-picker
v-model="inputForm.preparerTime"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="年 月 日"
>
</el-date-picker>
</el-form-item>
</div>
</td>
</tr>
</table>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="visible = false">关闭</el-button>
<el-button
size="small"
type="primary"
v-if="method != 'view'"
@click="doSubmit()"
v-noMoreClick
>确定</el-button
>
</span>
</el-dialog>
<!-- 主要技术开发或管理创新成果 -->
<OaPersonnelInfoAchievementsForm
ref="oaPersonnelInfoAchievementsForm"
@addRow="saveOaPersonnelInfoAchievementsRow(arguments)"
@delRow="delOaPersonnelInfoAchievementsRow(arguments)"
></OaPersonnelInfoAchievementsForm>
<!-- 主要成员 -->
<OaPersonnelInfoMemberForm
ref="oaPersonnelInfoMemberForm"
@addRow="saveOaPersonnelInfoMemberRow(arguments)"
@delRow="delOaPersonnelInfoMemberRow(arguments)"
></OaPersonnelInfoMemberForm>
<!-- 奖惩情况 -->
<OaPersonnelInfoPunishmentsForm
ref="oaPersonnelInfoPunishmentsForm"
@addRow="saveOaPersonnelInfoPunishmentsRow(arguments)"
@delRow="delOaPersonnelInfoPunishmentsRow(arguments)"
></OaPersonnelInfoPunishmentsForm>
<!-- 主要社会关系 -->
<OaPersonnelInfoRelationsForm
ref="oaPersonnelInfoRelationsForm"
@addRow="saveOaPersonnelInfoRelationsRow(arguments)"
@delRow="delOaPersonnelInfoRelationsRow(arguments)"
></OaPersonnelInfoRelationsForm>
<!-- 工作简历 -->
<OaPersonnelInfoResumeForm
ref="oaPersonnelInfoResumeForm"
@addRow="saveOaPersonnelInfoResumeRow(arguments)"
@delRow="delOaPersonnelInfoResumeRow(arguments)"
></OaPersonnelInfoResumeForm>
<!-- 主要学习培训简历 -->
<OaPersonnelInfoResumetrainingForm
ref="oaPersonnelInfoResumetrainingForm"
@addRow="saveOaPersonnelInfoResumetrainingRow(arguments)"
@delRow="delOaPersonnelInfoResumetrainingRow(arguments)"
></OaPersonnelInfoResumetrainingForm>
</div>
</template>css
<style lang="less" scoped>
table {
width: 100%;
font-size: 15px;
line-height: 1.2;
border-top: 1px solid #a8a8a8;
border-left: 1px solid #a8a8a8;
text-align: center;
margin: 0 auto;
th {
background-color: #eeeeee;
padding: 8px 5px;
// line-height: 30px;
border-right: 1px solid #a8a8a8;
border-bottom: 1px solid #a8a8a8;
height: 20px;
}
td {
min-width: 55px;
font-size: 12px;
line-height: 20px;
// padding: 10px 15px 10px 9px;
border-right: 1px solid #a8a8a8;
border-bottom: 1px solid #a8a8a8;
height: 20px;
}
td.label {
padding: 10px;
}
.width-30 {
width: 30px;
line-height: 30px;
}
.width-60 {
width: 60px;
line-height: 30px;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
/deep/ .el-input__inner {
border: none;
}
/deep/.el-form-item,
/deep/.el-form-item__content,
/deep/.el-select,
/deep/.el-input,
/deep/.el-input__inner,
/deep/.el-textarea,
/deep/.el-textarea__inner {
width: 100%;
height: 100%;
}
/deep/.el-form-item__error {
z-index: 1;
}
// 用户照片
.userPhotos {
position: relative;
width: 140px;
.userPhotosTips {
position: absolute;
width: 100%;
height: 30px;
top: 50%;
margin-top: -15px;
}
.el-form-item {
position: absolute;
top: 0;
/deep/.el-form-item__content {
position: absolute;
margin: 0 !important;
.avatar-uploader {
width: 100%;
height: 100%;
.el-upload {
left: 0;
margin: 0;
width: 100%;
height: 100%;
.avatar {
width: 100%;
height: 100%;
opacity: 1;
}
}
}
}
}
/deep/.avatar-uploader-icon {
width: 100% !important;
height: 100% !important;
}
}
// 身份证复印件
.cardPastePhotos {
position: relative;
height: 340px;
overflow: hidden;
.cardPastePhotosTips {
position: absolute;
width: 100%;
height: 30px;
top: 50%;
margin-top: -15px;
}
.el-form-item {
position: absolute;
top: 0;
padding: 10px 0;
}
/deep/.el-upload--picture-card {
width: 100%;
height: 324px;
opacity: 0.1;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
width: calc(100% - 30px);
}
/deep/.el-upload-list__item.is-success .el-upload-list__item-status-label {
display: none;
}
}
// 其他说明情况
.explanations {
height: 200px;
th,
td,
.el-textarea__inner {
height: 200px;
}
}
// 责任声明
.remarktips {
.remarks {
font-size: 18px;
font-weight: 600;
padding: 20px;
letter-spacing: 5px;
text-align: left;
text-indent: 46px;
line-height: 26px;
}
.preparer {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
.preparerTitle {
width: 180px;
font-size: 15px;
}
/deep/.el-input__inner {
height: 32px;
}
}
.preparerTime {
position: relative;
width: 100%;
height: 30px;
overflow: hidden;
margin-top: 20px;
.preparerTimeContent {
width: 100%;
height: 30px;
line-height: 30px;
position: relative;
right: 0;
top: 0;
text-align: right;
padding: 0 20px;
span {
min-width: 20px;
display: inline-block;
}
}
.el-form-item {
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
}
}
}
</style>