<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>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[1],1)">
|
工作信息
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[2],2)">
|
工作经历
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[3],3)">
|
体检信息
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[4],4)">
|
合同信息
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[5],5)">
|
考勤情况
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[6],6)">
|
请假记录
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[7],7)">
|
调岗记录
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[8],8)">
|
备注
|
</el-card>
|
<el-card class="info-card" shadow="always" @click.native="isShow(showArr[9],9)">
|
记录截图
|
</el-card>
|
</el-aside>
|
<el-main>
|
<el-table
|
v-show="showArr[0]"
|
: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[1]"
|
: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]"
|
: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]"
|
: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]"
|
: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]"
|
: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]"
|
: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]"
|
: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]"
|
: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]"
|
: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>
|
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
thisShowIndex: 0,
|
showArr: [true, false, false, false, false, false, false, false, false, false],
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}]
|
}
|
},
|
methods: {
|
isShow(tableShow, index) {
|
if (tableShow) {
|
this.showArr[index] = false
|
} else {
|
this.showArr[index] = true
|
}
|
this.showArr[this.thisShowIndex] = false
|
this.thisShowIndex = index
|
}
|
}
|
}
|
</script>
|
<style>
|
.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;
|
}
|
|
.el-main {
|
background-color: #E9EEF3;
|
color: #333;
|
text-align: center;
|
}
|
</style>
|
