table
table:
<!--工资条查询--> <template> <div class="bigBox"> <div class="payslipBox"> <div class="title">人员信息采集表</div> <div class="words"> <div class="left"> <span>单位：{{ infoForm.IT_OUTTAB1[0].WERKS_T }}</span> </div> <div class="right"> <span>职务层级：{{ infoForm.IT_OUTTAB1[0].ZZWCJT }}</span> </div> </div> <table bordercolor="black" border="1" align="center" cellspacing="0" style="table-layout:fixed;"> <!-- 行 --> <tr> <td style="font-weight:bold;">姓名</td> <td>{{ infoForm.IT_OUTTAB1[0].NACHN }}</td> <td style="font-weight:bold;">汉语拼音</td> <td>{{ infoForm.IT_OUTTAB1[0].RUFNM }}</td> <td style="font-weight:bold;">身份证号码</td> <td colspan="3">{{ infoForm.IT_OUTTAB1[0].ICNUM }}</td> <td colspan="3" rowspan="5"> <!-- 照片框 --> <img :src="imageUrl" alt="暂无照片" style="width:90%;"> </td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">性别</td> <td>{{ infoForm.IT_OUTTAB1[0].GESCH_T }}</td> <td style="font-weight:bold;">年龄</td> <td>{{ infoForm.IT_OUTTAB1[0].AGE }}</td> <td style="font-weight:bold;">出生日期</td> <td>{{ infoForm.IT_OUTTAB1[0].GBDAT }}</td> <td style="font-weight:bold;">民族</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_MZ_T }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">籍贯</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_JG }}</td> <td style="font-weight:bold;">出生地</td> <td>{{ infoForm.IT_OUTTAB1[0].GBORT }}</td> <td style="font-weight:bold;">户口所在地</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_HKSZD }}</td> <td style="font-weight:bold;">户口类型</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_HKXZ_T }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">档案所在单位</td> <td>{{ infoForm.IT_OUTTAB1[0].LOCAT_DN }}</td> <td style="font-weight:bold;">社保缴纳单位</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_JNGS_SBT }}</td> <td style="font-weight:bold;">住房公积金缴纳单位</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_JNGS_GJJT }}</td> <td style="font-weight:bold;">婚姻状况</td> <td>{{ infoForm.IT_OUTTAB1[0].FAMST_T }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">配偶所在地</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_HKSZD_PO }}</td> <td style="font-weight:bold;">父母所在地</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_HKSZD_FM }}</td> <td style="font-weight:bold;">血型</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_XX_T }}</td> <td style="font-weight:bold;">健康状况</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_JKZK_T }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">参加工作时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM01 }}</td> <td style="font-weight:bold;">加入中海时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM02 }}</td> <td style="font-weight:bold;">加入3311时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM03 }}</td> <td style="font-weight:bold;">加入中建国际投资时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM05 }}</td> <td style="font-weight:bold;">加入本公司时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM04 }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">任现职务时间</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_ZWSXSJ }}</td> <td style="font-weight:bold;">任现职级时间</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_ZJSXSJ }}</td> <td style="font-weight:bold;">任现岗位时间</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_GWSXSJ }}</td> <td style="font-weight:bold;">入职类型</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_RZLX_T }}</td> <td style="font-weight:bold;">转正时间</td> <td>{{ infoForm.IT_OUTTAB1[0].DATUM08 }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">联系电话</td> <td>{{ infoForm.IT_OUTTAB1[0].ZSJ }}</td> <td style="font-weight:bold;">邮箱</td> <td>{{ infoForm.IT_OUTTAB1[0].USRID_GSYX }}</td> <td style="font-weight:bold;">员工类别</td> <td>{{ infoForm.IT_OUTTAB1[0].PERSG_T }}</td> <td style="font-weight:bold;">校招界别</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_XYJB }}</td> <td style="font-weight:bold;">海之子序列</td> <td>{{ infoForm.IT_OUTTAB23[0].ZDZHXLT }}</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">政治面貌</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_ZZMM_T }}</td> <td style="font-weight:bold;">入党时间</td> <td>{{ infoForm.IT_OUTTAB22[0].ZZRDRQ }}</td> <td style="font-weight:bold;">党员转正时间</td> <td>{{ infoForm.IT_OUTTAB22[0].ZZ_ZZRQ }}</td> <td style="font-weight:bold;">党组织关系所在单位</td> <td>{{ infoForm.IT_OUTTAB22[0].ZZ_DZGXDW }}</td> <td style="font-weight:bold;">兴趣爱好</td> <td>{{ infoForm.IT_OUTTAB1[0].ZZ_XQAH }}</td> </tr> <tr> <td style="font-weight:bold;">资质证书</td> <td colspan="4">{{ infoForm.IT_OUTTAB8[0].ZZZLXT }}</td> <td style="font-weight:bold;">职称</td> <td colspan="4">{{ infoForm.IT_OUTTAB9[0].ZZ_ZCMC }}</td> </tr> <tr> <td :rowspan="jyjlList.length + 1" style="font-weight:bold;">教育经历</td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td style="font-weight:bold;">学校名称</td> <td style="font-weight:bold;">学院名称</td> <td style="font-weight:bold;">所学专业</td> <td style="font-weight:bold;">学历</td> <td style="font-weight:bold;">学位</td> <td style="font-weight:bold;">是否最高学历</td> <td style="font-weight:bold;">是否为全日制</td> </tr> <tr v-for="item in jyjlList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td>{{ item.INSTI }}</td> <td>{{ item.ZZ_XYMC }}</td> <td>{{ item.ZZ_ZZ1 }}</td> <td>{{ item.ACAQU_T }}</td> <td>{{ item.SLABS_T }}</td> <td>{{ item.ZZ_ZGXL_T }}</td> <td>{{ item.INSMO_T }}</td> </tr> <tr> <td :rowspan="jrzhxtqList.length + 1" style="font-weight:bold;">进入中海系统前工作经历</td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td colspan="2" style="font-weight:bold;">单位名称</td> <td colspan="2" style="font-weight:bold;">任职部门</td> <td colspan="3" style="font-weight:bold;">所任职务</td> </tr> <tr v-for="item in jrzhxtqList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td colspan="2">{{ item.ZZ_GZDW }}</td> <td colspan="2">{{ item.ZZ_WBGZBM }}</td> <td colspan="3">{{ item.ZZ_ZHZW }}</td> </tr> <tr> <td :rowspan="zhxtgzjlList.length + 1" style="font-weight:bold;">中海系统工作经历</td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td colspan="2" style="font-weight:bold;">单位名称</td> <td colspan="2" style="font-weight:bold;">任职部门</td> <td colspan="2" style="font-weight:bold;">所任职务</td> <td style="font-weight:bold;">所在职级</td> </tr> <tr v-for="item in zhxtgzjlList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td colspan="2">{{ item.ZZ_GZDW }}</td> <td colspan="2">{{ item.ZZ_NBGZBM }}</td> <td colspan="2">{{ item.ZZ_ZW }}</td> <td>{{ item.ZZ_ZJ }}</td> </tr> <tr> <td :rowspan="jrzwList.length + 1" style="font-weight:bold;"> 在中海系统工作变动情况（兼任职务） </td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td colspan="2" style="font-weight:bold;">单位名称</td> <td colspan="2" style="font-weight:bold;">任职部门</td> <td colspan="2" style="font-weight:bold;">所任职务</td> <td style="font-weight:bold;">所在职级</td> </tr> <tr v-for="item in jrzwList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td colspan="2">{{ item.ZZ_DWMC }}</td> <td colspan="2">{{ item.ZZ_JZBM }}</td> <td colspan="2">{{ item.ZZ_ZW }}</td> <td>{{ item.ZZ_ZWCJCOMM }}</td> </tr> <tr> <td :rowspan="lgjlList.length + 1" style="font-weight:bold;">轮岗经历</td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td colspan="2" style="font-weight:bold;">轮岗单位名称</td> <td colspan="5" style="font-weight:bold;">轮岗部门</td> </tr> <tr v-for="item in lgjlList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td colspan="2">{{ item.ZZ_LGDW }}</td> <td colspan="5">{{ item.ZZ_LGBM }}</td> </tr> <tr> <td :rowspan="qbjlList.length + 1" style="font-weight:bold;">党内职务任职情况（全部经历）</td> <td style="font-weight:bold;">开始时间</td> <td style="font-weight:bold;">截止时间</td> <td colspan="4" style="font-weight:bold;">党组织名称</td> <td colspan="3" style="font-weight:bold;">所任党内职务</td> </tr> <tr v-for="item in qbjlList"> <td>{{ item.BEGDA }}</td> <td>{{ item.ENDDA }}</td> <td colspan="4">{{ item.ZZ_DZZMC }}</td> <td colspan="3">{{ item.ZZ_DNZW_T }}</td> </tr> <tr> <td :rowspan="zcxxList.length + 1" style="font-weight:bold;" >职称信息</td> <td style="font-weight:bold;">评定日期</td> <td colspan="2" style="font-weight:bold;">职称名称</td> <td colspan="3" style="font-weight:bold;">评定机构</td> <td colspan="3" style="font-weight:bold;">职称等级</td> </tr> <tr v-for="item in zcxxList"> <td>{{ item.BEGDA }}</td> <td colspan="2">{{ item.ZZ_ZCMC }}</td> <td colspan="3">{{ item.ZZ_PDJG }}</td> <td colspan="3">{{ item.ZZ_ZCDJ }}</td> </tr> <tr> <td :rowspan="zyzzList.length + 1" style="font-weight:bold;">专业资质（如有）</td> <td style="font-weight:bold;">评定日期</td> <td colspan="2" style="font-weight:bold;">职称名称</td> <td colspan="2" style="font-weight:bold;">评定机构</td> <td style="font-weight:bold;">是否注册</td> <td colspan="3" style="font-weight:bold;">注册单位</td> </tr> <tr v-for="item in zyzzList"> <td>{{ item.BEGDA }}</td> <td colspan="2">{{ item.ZZZLXT }}</td> <td colspan="2">{{ item.ZZ_ZZSZDW }}</td> <td>{{ item.ZSFZCT }}</td> <td colspan="3">{{ item.ZZ_ZCDW }}</td> </tr> <tr> <td :rowspan="hjxxList.length + 1" style="font-weight:bold;">获奖信息</td> <td style="font-weight:bold;">获奖日期</td> <td colspan="2" style="font-weight:bold;">获奖名称</td> <td colspan="3" style="font-weight:bold;">评定机构</td> <td colspan="3" style="font-weight:bold;">是否最高奖项</td> </tr> <tr v-for="item in hjxxList"> <td>{{ item.BEGDA }}</td> <td colspan="2">{{ item.ZZ_RYJLMS }}</td> <td colspan="3">{{ item.ZZ_BFDW }}</td> <td colspan="3">{{ item.ZSFZGJXT }}</td> </tr> <tr> <td rowspan="3" style="font-weight:bold;">紧急情况联系人</td> <td style="font-weight:bold;">姓名</td> <td colspan="2">{{ infoForm.IT_OUTTAB2[0].FGBNA }}</td> <td style="font-weight:bold;">本人关系</td> <td colspan="2">{{ infoForm.IT_OUTTAB2[0].FAMSA_T }}</td> <td style="font-weight:bold;">联系电话</td> <td colspan="2">{{ infoForm.IT_OUTTAB2[0].ZZ_LXDH }}</td> </tr> <tr> <td style="font-weight:bold;">工作单位</td> <td colspan="8">{{ infoForm.IT_OUTTAB2[0].ZZ_GZDW }}</td> </tr> <tr> <td style="font-weight:bold;">家庭地址</td> <td colspan="8">{{ infoForm.IT_OUTTAB2[0].ZZ_ZSD }}</td> </tr> </table> </div> <div class="bottomBar"> <a-button icon="redo" @click="jumpToReturn" btnType="05">返回</a-button> </div> </div> </template> <script> import { api, DownLoad, Post,Get } from '@/api/serverApi' // 照片框 import avatarUpload from '../../common/avatarUpload' import Vue from 'vue' export default { name: 'gztcxQuery', components: { avatarUpload, // 照片框 }, data() { return { imageUrl:'',//照片地址 photoImg: '', // // 工资明细参数 payTITLE: '', //标题 payABKRS: '', //工资类型 payPERNR: '', //工号 payPAYDT: '', //支付日期 payList: [], cardNum:this.$route.query.ICNUM, PERNR: this.$route.query.PERNR, //人员编号 List传过来的 infoForm: { IT_OUTTAB1: [{ NACHN: '' }], IT_OUTTAB2: [{}], IT_OUTTAB4: [{}], IT_OUTTAB6: [{}], IT_OUTTAB8: [{}], IT_OUTTAB9: [{}], IT_OUTTAB10: [{}], IT_OUTTAB12: [{}], IT_OUTTAB16: [{}], IT_OUTTAB17: [{}], IT_OUTTAB22: [{}], IT_OUTTAB23: [{}], IT_OUTTAB30: [{}], IT_OUTTAB33: [{}], }, jyjlList: [], //教育经历 jrzhxtqList: [], //进入中海系统前工作经历 zhxtgzjlList: [], //中海系统工作经历 jrzwList: [], //在中海系统工作变动情况（兼任职务） lgjlList: [], //轮岗经历 zcxxList:[],//职称信息 hjxxList:[],//获奖信息 qbjlList: [], //全部经历 zyzzList: [], //专业资质 } }, created() { console.log("this.cardNum",this.cardNum) if (this.PERNR) { this.getInfo() this.getImg() } else { this.$error({ title: '请求错误', centered: true, content: `请求错误，缺少参数！`, }) } }, methods: { // 获取照片 getImg() { Get(api.findPicture, { cardNum: this.cardNum,//列表的ICNUM字段 }).then((res) => { this.imageUrl = 'data:image/jpg;base64,' + res.data }) }, // 获取人员信息采集数据 getInfo() { Post(api.findOne, { funcName: 'ZHRFM_GRXX_DISPLAY', input: { IV_PERNR: this.PERNR, IV_ACTION: 'DIS', }, }).then((res) => { // 遍历对象 for (let key in res.data) { let newArr = res.data[key] if (newArr.length == 0) { var obj = {} // 添加空对象，避免页面数组为空 newArr.push(obj) } } console.log('res.data', res.data) this.infoForm = res.data this.infoForm.IT_OUTTAB2.ZZ_JJLXR = 'X' // 可能有多条记录 this.jyjlList = res.data.IT_OUTTAB4 //教育经历 this.jrzhxtqList = res.data.IT_OUTTAB6 // this.zhxtgzjlList = res.data.IT_OUTTAB16 // this.jrzwList = res.data.IT_OUTTAB17 // this.lgjlList = res.data.IT_OUTTAB12 // this.zcxxList = res.data.IT_OUTTAB9 // this.hjxxList = res.data.IT_OUTTAB10 // this.qbjlList = res.data.IT_OUTTAB22 // this.zyzzList = res.data.IT_OUTTAB8 // }) }, // 返回 jumpToReturn() { this.$router.push({ name: 'ryxxQuery', query: {}, }) }, }, } </script> <style lang="less" scoped> .payslipBox { display: flex; flex-wrap: wrap; margin: 10px; padding: 20px 20px; background-color: #ffffff; position: relative; } .words { width: 100%; height: 50px; display: flex; align-items: center; display: flex; justify-content: space-between; // font-weight: bold; font-size: 16px; .left { // margin-left: 5px; } .right { padding-right: 10px; } } .payslipBox .title, .payslipBox .bigItem { display: flex; padding: 10px; width: 100%; font-weight: bold; } .payslipBox .title { justify-content: center; font-size: 20px; padding-bottom: 20px; } tr > td { text-align: center; height: 60px; width:160px; word-break : break-all;//换行 img{ } } .bottomBar { width: 100%; text-align: center; border-top: 1px solid #409eff; background: #f0f2f5; position: fixed; bottom: 0px; line-height: 60px; height: 60px; z-index: 1000; } </style>
设置内容换行：
tr > td { text-align: center; height: 60px; width:160px; word-break : break-all;//换行 img{ } }
