| | |
| | | <template> |
| | | <div> |
| | | <el-row> |
| | | <el-col :span="24">信息录入</el-col> |
| | | </el-row> |
| | | <el-divider /> |
| | | <el-container> |
| | | <el-aside width="200px"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[0],0)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[0].show,0)"> |
| | | 基本信息 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[1],1)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[1].show,1)"> |
| | | 工作信息 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[2],2)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[2].show,2)"> |
| | | 工作经历 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[3],3)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[3].show,3)"> |
| | | 体检信息 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[4],4)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[4].show,4)"> |
| | | 合同信息 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[5],5)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[5].show,5)"> |
| | | 考勤情况 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[6],6)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[6].show,6)"> |
| | | 请假记录 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[7],7)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[7].show,7)"> |
| | | 调岗记录 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[8],8)"> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[8].show,8)"> |
| | | 备注 |
| | | </el-card> |
| | | <el-card class="info-card" shadow="always" @click.native="isShow(showArr[9],9)"> |
| | |
| | | </el-card> |
| | | </el-aside> |
| | | <el-main> |
| | | <el-button type="success" @click.native="dialogIsShow()">新增</el-button> |
| | | <el-button type="info">删除</el-button> |
| | | <el-table |
| | | v-show="showArr[0]" |
| | | v-show="showArr[0].show" |
| | | :data="basicInformationData" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | fixed="left" |
| | | label="操作" |
| | | width="100" |
| | | > |
| | | <template> |
| | | <el-button type="text" size="small">编辑</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="userNumb" |
| | | label="员工编号" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="姓名" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="deptName" |
| | | label="所属部门" |
| | | /> |
| | | <el-table-column |
| | | prop="jobName" |
| | | label="岗位" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="sex" |
| | | label="性别" |
| | | /> |
| | | <el-table-column |
| | | prop="national" |
| | | label="民族" |
| | | /> |
| | | <el-table-column |
| | | prop="idNumber" |
| | | label="身份证号码" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="marriage" |
| | | label="婚姻状况" |
| | | /> |
| | | <el-table-column |
| | | prop="schooling" |
| | | label="最高学历" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="entryDate" |
| | | label="入职日期" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="insuranceType" |
| | | label="保险类型" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="equipmentComputerNo" |
| | | label="设备电脑号" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="securityIDNo" |
| | | label="保安员证号" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="archivesNumber" |
| | | label="档案编号" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="archives" |
| | | label="档案情况" |
| | | width="180" |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[1].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[1]" |
| | | v-show="showArr[2].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[2]" |
| | | v-show="showArr[3].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[3]" |
| | | v-show="showArr[4].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[4]" |
| | | v-show="showArr[5].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[5]" |
| | | v-show="showArr[6].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[6]" |
| | | v-show="showArr[7].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[7]" |
| | | v-show="showArr[8].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[8]" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | prop="date" |
| | | label="日期" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="姓名" |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | prop="address" |
| | | label="地址" |
| | | /> |
| | | </el-table> |
| | | <el-table |
| | | v-show="showArr[9]" |
| | | v-show="showArr[9].show" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | > |
| | |
| | | </el-table> |
| | | </el-main> |
| | | </el-container> |
| | | <el-dialog title="基本信息" :visible.sync="dialogshowArr[0].show" width="50%"> |
| | | <el-form :model="baseicInformationForm" label-position="right" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="档案号"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="员工编号"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="性别" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择性别"> |
| | | <el-option label="男" value="1" /> |
| | | <el-option label="女" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="员工类型" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择员工类型"> |
| | | <el-option label="正式工" value="1" /> |
| | | <el-option label="临时工" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="民族" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择民族"> |
| | | <el-option label="汉族" value="1" /> |
| | | <el-option label="维吾尔族" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="婚姻状态" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择婚姻状态"> |
| | | <el-option label="未婚" value="1" /> |
| | | <el-option label="已婚" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="身高"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="政治面貌" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择政治面貌"> |
| | | <el-option label="党员" value="1" /> |
| | | <el-option label="团员" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="最高学历" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择最高学历"> |
| | | <el-option label="本科" value="1" /> |
| | | <el-option label="专科" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="籍贯" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择籍贯"> |
| | | <el-option label="湖南" value="1" /> |
| | | <el-option label="湖北" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="现住址"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="电话号码"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="招聘介绍人"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="银行名称"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="保险类型" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择保险类型"> |
| | | <el-option label="(深户)五险一档" value="1" /> |
| | | <el-option label="(非深户)五险一档" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="家庭成员及关系"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="紧急联系电话"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属部门"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="姓名"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="所属岗位"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="身份证号码"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="身份证有效期"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="年龄"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="出生日期"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="入职日期"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="入司工龄"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="户籍地址"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="保安员证号"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="保安员回执"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="档案情况" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择档案情况"> |
| | | <el-option label="未移交" value="1" /> |
| | | <el-option label="已移交" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="银行账号"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="社保电脑号"> |
| | | <el-input v-model="baseicInformationForm.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="员工手册" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择员工手册"> |
| | | <el-option label="未发" value="1" /> |
| | | <el-option label="已发" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="工作证" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择工作证"> |
| | | <el-option label="未发" value="1" /> |
| | | <el-option label="已发" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> <el-col span="24"> <el-form-item label="相关证件" prop="region"> |
| | | <el-select v-model="baseicInformationForm.name" placeholder="请选择相关证件"> |
| | | <el-option label="高中毕业证" value="1" /> |
| | | <el-option label="专科毕业证" value="2" /> |
| | | <el-option label="本科毕业证" value="3" /> |
| | | </el-select> |
| | | </el-form-item> </el-col></el-row> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogIsShow()">取 消</el-button> |
| | | <el-button type="primary" @click="dialogIsShow()">确 定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | formLabelWidth: '120px', |
| | | thisShowIndex: 0, |
| | | showArr: [true, false, false, false, false, false, false, false, false, false], |
| | | tableData: [{ |
| | | date: '2016-05-02', |
| | | dialogshowArr: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }], |
| | | // eslint-disable-next-line no-undef |
| | | showArr: [{ show: true }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }], |
| | | basicInformationData: [{ |
| | | userNumb: '12321222', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1518 弄' |
| | | deptName: '开发部', |
| | | jobName: '开发工程师', |
| | | sex: '女', |
| | | national: '汉', |
| | | idNumber: '430422199823222222', |
| | | marriage: '已婚', |
| | | schooling: '本科', |
| | | entryDate: '2020-01-12', |
| | | insuranceType: '社保', |
| | | equipmentComputerNo: '1231', |
| | | securityIDNo: '123', |
| | | archivesNumber: '中保亚太', |
| | | archives: '已移交' |
| | | }, { |
| | | userNumb: '12321222', |
| | | name: '王小虎', |
| | | deptName: '开发部', |
| | | jobName: '开发工程师', |
| | | sex: '女', |
| | | national: '汉', |
| | | idNumber: '430422199823222222', |
| | | marriage: '已婚', |
| | | schooling: '开发工程师', |
| | | entryDate: '2020-01-12', |
| | | insuranceType: '社保', |
| | | equipmentComputerNo: '1231', |
| | | securityIDNo: '123', |
| | | archivesNumber: '中保亚太', |
| | | archives: '已移交' |
| | | }, { |
| | | userNumb: '12321222', |
| | | name: '王小虎', |
| | | deptName: '开发部', |
| | | jobName: '开发工程师', |
| | | sex: '女', |
| | | national: '汉', |
| | | idNumber: '430422199823222222', |
| | | marriage: '已婚', |
| | | schooling: '开发工程师', |
| | | entryDate: '2020-01-12', |
| | | insuranceType: '社保', |
| | | equipmentComputerNo: '1231', |
| | | securityIDNo: '123', |
| | | archivesNumber: '中保亚太', |
| | | archives: '已移交' |
| | | }, { |
| | | userNumb: '12321222', |
| | | name: '王小虎', |
| | | deptName: '开发部', |
| | | jobName: '开发工程师', |
| | | sex: '女', |
| | | national: '汉', |
| | | idNumber: '430422199823222222', |
| | | marriage: '已婚', |
| | | schooling: '开发工程师', |
| | | entryDate: '2020-01-12', |
| | | insuranceType: '社保', |
| | | equipmentComputerNo: '1231', |
| | | securityIDNo: '123', |
| | | archivesNumber: '中保亚太', |
| | | archives: '已移交' |
| | | }], |
| | | baseicInformationForm: { |
| | | userNumb: '', |
| | | name: '', |
| | | deptName: '', |
| | | jobName: '', |
| | | sex: '', |
| | | national: '', |
| | | idNumber: '', |
| | | marriage: '', |
| | | schooling: '', |
| | | entryDate: '', |
| | | insuranceType: '', |
| | | equipmentComputerNo: '', |
| | | securityIDNo: '', |
| | | archivesNumber: '', |
| | | archives: '' |
| | | }, |
| | | tableData: [{ |
| | | date: '2016-05-04', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1517 弄' |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | dialogIsShow() { |
| | | this.dialogshowArr[this.thisShowIndex].show = !this.dialogshowArr[this.thisShowIndex].show |
| | | }, |
| | | isShow(tableShow, index) { |
| | | if (tableShow) { |
| | | this.showArr[index] = false |
| | | } else { |
| | | this.showArr[index] = true |
| | | if (index === this.thisShowIndex) { |
| | | return |
| | | } |
| | | this.showArr[this.thisShowIndex] = false |
| | | if (tableShow) { |
| | | this.showArr[index].show = false |
| | | } else { |
| | | this.showArr[index].show = true |
| | | this.showArr[this.thisShowIndex].show = false |
| | | } |
| | | |
| | | this.thisShowIndex = index |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style> |
| | | .el-select{ |
| | | width: 100%; |
| | | } |
| | | .info-card{ |
| | | margin-top: 20px; |
| | | } |
| | |
| | | background-color: #D3DCE6; |
| | | color: #333; |
| | | text-align: center; |
| | | height: 800px; |
| | | } |
| | | |
| | | .el-main { |
| | | background-color: #E9EEF3; |
| | | color: #333; |
| | | text-align: center; |
| | | height: 800px; |
| | | } |
| | | </style> |