基于＜table＞的员工信息登记表

最新推荐文章于 2024-12-25 20:36:58 发布
咕谷古顾故
最新推荐文章于 2024-12-25 20:36:58 发布
阅读量179
点赞数 1
分类专栏： html 文章标签： vue.js javascript
本文链接：https://blog.csdn.net/qq_37125233/article/details/129983241
版权
html 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
话不多说直接上代码
<center>
        <table border=1>
          <caption>
            <font size=7>员工信息登记表</font>
          </caption>
          <tr>
            <td rowspan="7" align=center>
              <font size=4>基本信息</font>
            </td>
          </tr>

          <tr>
            <td width="70" align="center">所属部门
            </td>
            <td width="140">
              <!-- <el-input v-model="from.depart_name" type="text" width="100" size="mini" placeholder="请输入" /> -->
              <el-cascader v-model="from.depart_name" :options="optionsDep" @change="handleChange"
                :props="propsDep"></el-cascader>
            </td>
            <td width="70" align="center">职位
            </td>
            <td width="140"><el-input v-model="from.job" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
            <td width="70" align="center">入职日期
            </td>
            <td width="140"><el-date-picker v-model="from.in_time" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                type="date" placeholder="选择日期">
              </el-date-picker></td>
            <td width="100" align="center">身份证号</td>
            <td colspan="4"><el-input v-model="from.idsn" type="text" width="100" size="mini" placeholder="请输入" /></td>
          </tr>
          <tr>
            <td width="100" height="30" align=center>姓名</td>
            <td><el-input v-model="from.realname" type="text" width="100" size="mini" placeholder="请输入" /></td>
            <td width=50 height=30 align=center>性别</td>
            <td align="center">
              <el-radio v-model="from.sex" label="1">男</el-radio>
              <el-radio v-model="from.sex" label="2">女</el-radio>
            </td>
            <td width=70 height=30 align=center>出生日期</td>
            <td><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.birthday" type="date"
                placeholder="选择日期">
              </el-date-picker></td>
            <td width=50 height=30 align=center>婚姻状况</td>
            <td colspan="4" align="center">
              <!-- <el-input v-model="from.marriage" type="text" width="50" size="mini" placeholder="请输入" /> -->

              <el-radio v-model="from.marriage" label="已婚">已婚</el-radio>
              <el-radio v-model="from.marriage" label="未婚">未婚</el-radio>
            </td>
          </tr>
          <tr>
            <td width="100" height="30" align=center>昵称</td>
            <td><el-input v-model="from.name" type="text" width="100" size="mini" placeholder="请输入" /></td>
            <td width="100" height="30" align=center>民族</td>
            <td><el-input v-model="from.nation" type="text" width="100" size="mini" placeholder="请输入" /></td>
            <td width=70 height=30 align=center>政治面貌</td>
            <td><el-input v-model="from.outlook" type="text" width="100" size="mini" placeholder="请输入" /></td>
            <td width=50 height=30 align=center>生育状态</td>
            <td colspan="4">
              <el-input v-model="from.give_birth_to" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
          </tr>
          <tr>
            <td align=center>政治面貌</td>
            <td colspan="1">
              <el-input v-model="from.outlook" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
            <td align=center>户籍性质</td>
            <td colspan="2">
              <el-input v-model="from.register" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
            <td align=center>户籍地址</td>
            <td colspan="4">
              <el-input v-model="from.register_address" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
          </tr>

          <tr>
            <td align=center>电话</td>
            <td colspan="2">
              <el-input v-model="from.phone" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
            <td align=center>邮箱</td>
            <td colspan="4">
              <el-input v-model="from.email" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
          </tr>
          <tr>
            <td align=center>紧急联系人</td>
            <td colspan="2">
              <el-input v-model="from.emergency_contact" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
            <td align=center>与紧急联系人关系</td>
            <td colspan="2">
              <el-input v-model="from.relation" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
            <td align=center>紧急联系电话</td>
            <td colspan="4">
              <el-input v-model="from.emergency_phone" type="text" width="50" size="mini" placeholder="请输入" />
            </td>
          </tr>


          <!--教育经历-->
          <tr>
            <td align=center rowspan="5">
              <font size=4>教育经历</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">毕业院校
            </td>
            <td colspan="2"><el-input v-model="from.first_school" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
            <td width="70" align="center">第一学历
            </td>
            <td colspan="2"><el-input v-model="from.first_education" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
            <td width="70" align="center">第一专业
            </td>
            <td colspan="2"><el-input v-model="from.first_speciality" type="text" width="100" size="mini"
                placeholder="请输入" /></td>
          </tr>
          <tr>
            <td width="70" align="center">入学时间
            </td>
            <td colspan="4"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.first_school_start_time" type="date" placeholder="选择日期">
              </el-date-picker>
            </td>
            <td width="70" align="center">毕业时间
            </td>
            <td colspan="4"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.first_school_end_time" type="date" placeholder="选择日期">
              </el-date-picker></td>
          </tr>
          <tr>
            <td width="70" align="center">最高学校
            </td>
            <td colspan="4"><el-input v-model="from.last_school" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
            <td width="70" align="center">最高学历</td>
            </td>
            <td colspan="4"><el-input v-model="from.last_education" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
          </tr>
          <tr>
            <td width="70" align="center">最高入学时间
            </td>
            <td colspan="4"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.last_school_start_time" type="date" placeholder="选择日期">
              </el-date-picker>
            </td>
            <td width="70" align="center">最高毕业时间
            </td>
            <td colspan="4"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.last_school_end_time" type="date" placeholder="选择日期">
              </el-date-picker></td>
          </tr>
          <!-- 劳动合同 -->

          <tr>
            <td align=center rowspan="8">
              <font size=4>劳动合同</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">签订合同
            </td>
            <td colspan="2" align="center">
              <el-radio v-model="from.is_agreement" label="1">是</el-radio>
              <el-radio v-model="from.is_agreement" label="0">否</el-radio>
            </td>
            <td width="70" align="center">入职培训
            </td>
            <td colspan="2" align="center">
              <el-radio v-model="from.is_new_train" label="1">是</el-radio>
              <el-radio v-model="from.is_new_train" label="0">否</el-radio>
            </td>
            <td width="70" align="center">转正日期
            </td>
            <td colspan="2"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.full_time"
                type="date" placeholder="选择日期">
              </el-date-picker></td>
          </tr>
          <tr>
            <td align=center rowspan="3">
              <font size=4>第一次合同</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">合同编号
            </td>
            <td colspan="2"><el-input v-model="from.first_agreement_no" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
            <td width="70" align="center">合同年限
            </td>
            <td colspan="2"><el-input v-model="from.first_agreement_age" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
            <td width="70" align="center">合同日期
            </td>
            <td colspan="2"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.first_agreement_time" type="date" placeholder="选择日期">
              </el-date-picker></td>
          </tr>
          <tr>
            <td width="70" align="center">到期时间
            </td>
            <td colspan="4">
              <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.first_agreement_expire"
                type="date" placeholder="选择日期">
              </el-date-picker>
            </td>
            <td width="70" align="center">合同主体</td>
            <td colspan="4"><el-input v-model="from.first_master" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
          </tr>
          <tr>
            <td align=center rowspan="3">
              <font size=4>第二次合同</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">合同编号
            </td>
            <td colspan="2"><el-input v-model="from.second_agreement_no" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
            <td width="70" align="center">合同年限
            </td>
            <td colspan="2"><el-input v-model="from.second_agreement_age" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
            <td width="70" align="center">合同日期
            </td>
            <td colspan="2"><el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                v-model="from.second_agreement_time" type="date" placeholder="选择日期">
              </el-date-picker></td>
          </tr>
          <tr>
            <td width="70" align="center">到期时间
            </td>
            <td colspan="4">
              <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.second_agreement_expire"
                type="date" placeholder="选择日期">
              </el-date-picker>
            </td>
            <td width="70" align="center">合同主体</td>
            <td colspan="4"><el-input v-model="from.second_master" type="text" width="100" size="mini"
                placeholder="请输入" />
            </td>
          </tr>

          <!-- 社保 公积金 工资 -->
          <tr>
            <td align=center rowspan="2">
              <font size=4>社保</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">社保是否办理
            </td>
            <td colspan="2" align="center">
              <el-radio v-model="from.is_new_train" label="1">已办理</el-radio>
              <el-radio v-model="from.is_new_train" label="0">未办理</el-radio>
            </td>
            <td width="70" align="center">社保办理时间
            </td>
            <td colspan="2">
              <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.shebao_time" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </td>
            <td width="70" align="center">社保缴纳单位名称
            </td>
            <td colspan="2"><el-input v-model="from.shebao_unit_name" type="text" width="100" size="mini"
                placeholder="请输入" /></td>
          </tr>
          <tr>
            <td align=center rowspan="2">
              <font size=4>公积金</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">公积金是否办理
            </td>
            <td colspan="4" align="center">
              <el-radio v-model="from.is_funds" label="1">已办理</el-radio>
              <el-radio v-model="from.is_funds" label="0">未办理</el-radio>
            </td>
          <!-- <td width="70" align="center">社保办理时间
            </td>
            <td colspan="2">
              <el-date-picker v-model="from.shebao_time" type="date" placeholder="选择日期">
              </el-date-picker>
                                                                                                                                                                                                      </td> -->
            <td width="70" align="center">公积金缴纳单位名称
            </td>
            <td colspan="4"><el-input v-model="from.funds_unit_name" type="text" width="100" size="mini"
                placeholder="请输入" /></td>
          </tr>
          <tr>
            <td align=center rowspan="2">
              <font size=4>工资</font>
            </td>
          </tr>
          <tr>
            <td width="70" align="center">工资银行
            </td>
            <td colspan="2"><el-input v-model="from.salary_bank" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
            <td width="70" align="center">工资卡号
            </td>
            <td colspan="2"><el-input v-model="from.salary_card" type="text" width="100" size="mini" placeholder="请输入" />
            </td>
            <td width="70" align="center">工资发放单位名称
            </td>
            <td colspan="2"><el-input v-model="from.salary_unit_name" type="text" width="100" size="mini"
                placeholder="请输入" /></td>
          </tr>
          <tr>
            <td rowspan="2" align="center">
              <font size=4>离职日期</font>
            </td>
          </tr>
          <tr>
            <td colspan="10">
              <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="from.out_time" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </td>
          </tr>
        </table>
      </center>
效果图