128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>转正申请</span>
|
||
<el-tag :type="statusType">{{ statusText }}</el-tag>
|
||
</div>
|
||
|
||
<el-form ref="form" class="apply-form">
|
||
<el-form-item label="申请材料" prop="file">
|
||
<el-upload
|
||
action=""
|
||
:auto-upload="false"
|
||
:on-change="handleFileChange"
|
||
:file-list="fileList"
|
||
>
|
||
<el-button size="small" type="primary">选择文件</el-button>
|
||
<div slot="tip" class="el-upload__tip">支持PDF/DOC格式，大小不超过50MB</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
:loading="loading"
|
||
@click="handleSubmit"
|
||
>提交申请</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { submitProbation } from '@/api/oa/hr'
|
||
import { uploadFile, addFile } from '@/api/oa/document'
|
||
import { getOnboarding } from "@/api/oa/onboarding"
|
||
|
||
|
||
export default {
|
||
name: 'ProbationApply',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
fileList: [],
|
||
currentFile: null,
|
||
statusMap: {
|
||
pending: { label: '待审批', type: 'warning' },
|
||
success: { label: '已提交', type: 'success' }
|
||
},
|
||
userInfo: null,
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log(this.$store.state.user)
|
||
// 获取用户入职信息
|
||
// this.getUserInfo()
|
||
},
|
||
computed: {
|
||
statusType() {
|
||
return this.statusMap[this.fileList.length ? 'success' : 'pending'].type
|
||
},
|
||
statusText() {
|
||
return this.statusMap[this.fileList.length ? 'success' : 'pending'].label
|
||
}
|
||
},
|
||
methods: {
|
||
async getUserInfo() {
|
||
const { data } = await getOnboarding(this.$store.state.user.id)
|
||
this.userInfo = data
|
||
},
|
||
|
||
handleFileChange(file) {
|
||
this.currentFile = file.raw
|
||
this.fileList = [file]
|
||
},
|
||
|
||
async handleSubmit() {
|
||
if (!this.currentFile) {
|
||
return this.$message.warning('请先选择申请文件')
|
||
}
|
||
|
||
try {
|
||
this.loading = true
|
||
|
||
// 1. 上传文件
|
||
const formData = new FormData()
|
||
formData.append('file', this.currentFile)
|
||
const data = await uploadFile(formData)
|
||
// 2. 将文件关联用户
|
||
await addFile({
|
||
userId: this.$store.state.user.id,
|
||
fileList: [{
|
||
fileName: data.originalFilename,
|
||
filePath: data.url,
|
||
fileType: 0,
|
||
}]
|
||
})
|
||
// 3. 提交申请
|
||
await submitProbation({
|
||
userId: this.$store.state.user.id,
|
||
// onboardingId: this.userInfo.onboardingId,
|
||
status: 1,
|
||
})
|
||
|
||
this.$message.success('申请提交成功')
|
||
this.fileList = []
|
||
} catch (error) {
|
||
this.$message.error('提交失败: ' + (error.message || error))
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.apply-form {
|
||
max-width: 600px;
|
||
margin: 20px auto;
|
||
}
|
||
.el-upload__tip {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
}
|
||
</style> |