280 lines
9.5 KiB
Vue
280 lines
9.5 KiB
Vue
<template>
|
||
<div class="isituation">
|
||
<el-page-header @back="goBack" content="入职情况"> </el-page-header>
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>正在查看 <i class="redz">xxxxxx</i> 入职情况</span>
|
||
<div class="rightbutton">
|
||
<el-button type="danger" @click="add">添加入职情况</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 下方内容 -->
|
||
<div>
|
||
<el-table :data="tableData" border style="width: 100%">
|
||
<el-table-column prop="entryTime" label="入职时间" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="entrySalary" label="入职薪资" width="65">
|
||
</el-table-column>
|
||
<el-table-column prop="subsidy" label="补助" width="65">
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="entryPosition" label="入职岗位" width="70">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="emergencyContact"
|
||
label="紧急联系人"
|
||
width="65"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="姓名" width="65">
|
||
</el-table-column>
|
||
<el-table-column prop="telephone" label="电话"> </el-table-column>
|
||
<el-table-column prop="homeAddress" label="家庭住址">
|
||
</el-table-column>
|
||
<el-table-column prop="currentAddress" label="现住址">
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="other" label="其他"> </el-table-column>
|
||
<el-table-column label="操作">
|
||
<template>
|
||
<el-button size="mini" type="danger" @click="edit"
|
||
>编辑</el-button
|
||
>
|
||
<el-button size="mini" type="danger" @click="viewEntryInformation"
|
||
>详情</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
<!-- 弹框 -->
|
||
<el-dialog
|
||
:title="this.title == false ? `编辑信息` : `添加入职情况`"
|
||
:visible.sync="aisDialogVisible"
|
||
center
|
||
>
|
||
<el-form ref="form" :model="form" label-width="100px">
|
||
<el-form-item label="入职时间">
|
||
<el-date-picker
|
||
type="date"
|
||
placeholder="确定面试者何时入职"
|
||
v-model="form.entryTime"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="入职薪资">
|
||
<el-input v-model="form.entrySalary"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="补助">
|
||
<el-input v-model="form.subsidy"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="入职岗位">
|
||
<el-input v-model="form.entryPosition"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="入职资料">
|
||
<el-upload
|
||
class="upload-demo"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:before-remove="beforeRemove"
|
||
multiple
|
||
:limit="3"
|
||
:on-exceed="handleExceed"
|
||
:file-list="entryInformation"
|
||
>
|
||
<el-button size="small" type="primary">点击上传身份证</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
<el-upload
|
||
class="upload-demo"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:before-remove="beforeRemove"
|
||
multiple
|
||
:limit="3"
|
||
:on-exceed="handleExceed"
|
||
:file-list="entryInformation"
|
||
>
|
||
<el-button size="small" type="primary">点击上传银行卡</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
<el-upload
|
||
class="upload-demo"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:before-remove="beforeRemove"
|
||
multiple
|
||
:limit="3"
|
||
:on-exceed="handleExceed"
|
||
:file-list="entryInformation"
|
||
>
|
||
<el-button size="small" type="primary">点击上传学籍证明</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
<el-upload
|
||
class="upload-demo"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:before-remove="beforeRemove"
|
||
multiple
|
||
:limit="3"
|
||
:on-exceed="handleExceed"
|
||
:file-list="entryInformation"
|
||
>
|
||
<el-button size="small" type="primary">点击上传其他资料</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="紧急联系人">
|
||
<el-input v-model="form.emergencyContact"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="电话">
|
||
<el-input v-model="form.telephone"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="家庭住址">
|
||
<el-input v-model="form.homeAddress"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="现住址">
|
||
<el-input v-model="form.currentAddress"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="其他">
|
||
<el-input type="textarea" v-model="form.other"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="aisDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="aisDialogVisible = false"
|
||
>确 定</el-button
|
||
>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: false,
|
||
invitingPerson: "", //邀约人
|
||
typeOfInvitation: "", //邀约类型
|
||
invitationTime: "", //邀约时间
|
||
interviewPosition: "", //面试职位
|
||
invitationDetails: "", //邀约详情
|
||
whetherToFaceOrNot: "", //是否到面
|
||
remarks: "", //备注
|
||
// 添加面试情况弹框
|
||
aisDialogVisible: false,
|
||
// 弹框内容
|
||
form: {
|
||
entryTime: "", //入职时间
|
||
entrySalary: "", //入职薪资
|
||
subsidy: "", //补助
|
||
entryPosition: "", //入职岗位
|
||
|
||
emergencyContact: "", //紧急联系人
|
||
name: "", //姓名
|
||
telephone: "", //电话
|
||
homeAddress: "", //家庭住址
|
||
currentAddress: "", //现住址
|
||
other: "" //其他
|
||
},
|
||
entryInformation: [], //入职资料
|
||
// 展示列表
|
||
tableData: [
|
||
{
|
||
entryTime: "2020-11-12", //入职时间
|
||
entrySalary: "3000", //入职薪资
|
||
subsidy: "无", //补助
|
||
entryPosition: "前端", //入职岗位
|
||
|
||
emergencyContact: "谢谢谢", //紧急联系人
|
||
name: "蟹蟹蟹", //姓名
|
||
telephone: "13562691187", //电话
|
||
homeAddress: "山东省济南市历城区港沟街道小汉峪", //家庭住址
|
||
currentAddress: "山东省济南市历城区港沟街道小汉峪", //现住址
|
||
other:
|
||
"山东省济南市历城区港沟街道小汉峪山东省济南市历城区港沟街道小汉峪山东省济南市历城区港沟街道小汉峪山东省济南市历城区港沟街道小汉峪" //其他
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
this.$router.push("/");
|
||
},
|
||
// 添加邀约情况
|
||
add() {
|
||
this.title = true;
|
||
this.aisDialogVisible = true;
|
||
},
|
||
// 编辑信息
|
||
edit() {
|
||
this.title = false;
|
||
this.aisDialogVisible = true;
|
||
},
|
||
// 上传入职资料
|
||
handleRemove(file, entryInformation) {
|
||
console.log(file, entryInformation);
|
||
},
|
||
handlePreview(file) {
|
||
console.log(file);
|
||
},
|
||
handleExceed(files, entryInformation) {
|
||
this.$message.warning(
|
||
`当前限制选择 3 个文件，本次选择了 ${
|
||
files.length
|
||
} 个文件，共选择了 ${files.length + entryInformation.length} 个文件`
|
||
);
|
||
},
|
||
beforeRemove(file) {
|
||
return this.$confirm(`确定移除 ${file.name}？`);
|
||
},
|
||
// 查看入职资料
|
||
viewEntryInformation() {
|
||
this.$router.push("/entryinformation");
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.el-page-header__content {
|
||
font-size: 18px;
|
||
color: #f6f8fa;
|
||
}
|
||
.isituation {
|
||
height: 100%;
|
||
// background-image: url(../assets/wzx2.jpg);
|
||
// background-repeat: no-repeat; //不重复
|
||
// background-size: 100%; // 满屏
|
||
}
|
||
.box-card {
|
||
margin-top: 20px;
|
||
}
|
||
.redz {
|
||
color: lightcoral;
|
||
font-style: normal;
|
||
}
|
||
.clearfix {
|
||
margin-bottom: 20px;
|
||
}
|
||
.rightbutton {
|
||
float: right;
|
||
}
|
||
</style>
|