<template>
|
<div>
|
<el-container>
|
<el-aside width="200px">
|
<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].show,1)">
|
工作信息
|
</el-card>
|
<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].show,3)">
|
体检信息
|
</el-card>
|
<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].show,5)">
|
考勤情况
|
</el-card>
|
<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].show,7)">
|
调岗记录
|
</el-card>
|
<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].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-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[2].show"
|
: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[3].show"
|
: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[4].show"
|
: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[5].show"
|
: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[6].show"
|
: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[7].show"
|
: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[8].show"
|
: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].show"
|
: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-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,
|
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: '王小虎',
|
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 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}]
|
}
|
},
|
methods: {
|
dialogIsShow() {
|
this.dialogshowArr[this.thisShowIndex].show = !this.dialogshowArr[this.thisShowIndex].show
|
},
|
isShow(tableShow, index) {
|
if (index === this.thisShowIndex) {
|
return
|
}
|
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;
|
}
|
.el-header, .el-footer {
|
background-color: #B3C0D1;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background-color: #D3DCE6;
|
color: #333;
|
text-align: center;
|
height: 800px;
|
}
|
|
.el-main {
|
background-color: #E9EEF3;
|
color: #333;
|
height: 800px;
|
}
|
</style>
|
