344 lines
9.5 KiB
Vue
344 lines
9.5 KiB
Vue
<!-- 劳动合同续签 -->
|
|
<template>
|
|
<view class="form-page">
|
|
<scroll-view scroll-y class="form-scroll">
|
|
<uni-forms :modelValue="formData" label-width="180rpx" ref="customForm" :rules="customRules">
|
|
<!-- 审批状态卡片 -->
|
|
<view class="form-card" v-if="formData.ticket_">
|
|
<ticketd :ticket_="formData.ticket_"></ticketd>
|
|
</view>
|
|
|
|
<!-- 员工信息 -->
|
|
<view class="form-card">
|
|
<view class="form-card-title">员工信息</view>
|
|
<uni-forms-item label="员工" required>
|
|
<searchSelect
|
|
v-model="formData.employee"
|
|
:apiobjs="EmpApiobj"
|
|
@change="handleEmpChange"
|
|
v-if="mode == 'add'" />
|
|
<span v-else>{{formData.employee_name}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="部门">
|
|
<uni-easyinput v-model="formData.belong_dept_name" disabled />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="岗位">
|
|
<uni-easyinput v-model="formData.post_name" disabled />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="身份证号">
|
|
<uni-easyinput v-model="formData.id_number" disabled />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="联系方式">
|
|
<uni-easyinput v-model="formData.phone" disabled />
|
|
</uni-forms-item>
|
|
</view>
|
|
|
|
<!-- 原合同信息 -->
|
|
<view class="form-card">
|
|
<view class="form-card-title">原合同信息</view>
|
|
<uni-forms-item label="合同类型" required name="contract_type">
|
|
<uni-data-select
|
|
v-if="mode != 'show'"
|
|
v-model="formData.contract_type"
|
|
:localdata="contractTypeList"
|
|
placeholder="请选择合同类型"
|
|
/>
|
|
<span v-else>{{getLabel(contractTypeList, formData.contract_type)}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="原合同开始日期" required name="original_start_date">
|
|
<uni-datetime-picker
|
|
type="date"
|
|
:clear-icon="false"
|
|
v-model="formData.original_start_date"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.original_start_date}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="原合同结束日期" required name="original_end_date">
|
|
<uni-datetime-picker
|
|
type="date"
|
|
:clear-icon="false"
|
|
v-model="formData.original_end_date"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.original_end_date}}</span>
|
|
</uni-forms-item>
|
|
</view>
|
|
|
|
<!-- 续签信息 -->
|
|
<view class="form-card">
|
|
<view class="form-card-title">续签信息</view>
|
|
<uni-forms-item label="续签开始日期" required name="renew_start_date">
|
|
<uni-datetime-picker
|
|
type="date"
|
|
:clear-icon="false"
|
|
v-model="formData.renew_start_date"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.renew_start_date}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="续签结束日期" required name="renew_end_date">
|
|
<uni-datetime-picker
|
|
type="date"
|
|
:clear-icon="false"
|
|
v-model="formData.renew_end_date"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.renew_end_date}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="续签期限(年)" required name="renew_years">
|
|
<uni-number-box v-model="formData.renew_years" :min="1" :max="10" v-if="mode != 'show'" />
|
|
<span v-else>{{formData.renew_years}}年</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="续签原因" required name="reason">
|
|
<textarea
|
|
placeholder-style="color:#c0c4cc"
|
|
v-model="formData.reason"
|
|
placeholder="请输入续签原因"
|
|
class="form-textarea"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.reason}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="备注" name="remark">
|
|
<textarea
|
|
placeholder-style="color:#c0c4cc"
|
|
v-model="formData.remark"
|
|
placeholder="请输入备注"
|
|
class="form-textarea"
|
|
v-if="mode != 'show'" />
|
|
<span v-else>{{formData.remark}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="上传附件">
|
|
<xtUpload v-model="formData.file" xtype="path" :disabled="mode == 'show'"></xtUpload>
|
|
</uni-forms-item>
|
|
</view>
|
|
</uni-forms>
|
|
</scroll-view>
|
|
|
|
<!-- 底部操作 -->
|
|
<view class="footer_fixed">
|
|
<button v-if="mode == 'edit'" class="form-btn form-btn-danger" @click="handleDel" :loading="saveLoading" :disabled="saveLoading">
|
|
删除
|
|
</button>
|
|
<button v-if="mode != 'show'" class="form-btn form-btn-primary" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">
|
|
提交审批
|
|
</button>
|
|
<ticketd_b :workflow_key="'wf_empcontract'" v-if="formData.ticket_ && mode == 'show'" :t_id="formData.id" :ticket_="formData.ticket_"
|
|
:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ticketd_b from "../wf/ticketd_b.vue"
|
|
import ticketd from "../wf/ticketd.vue"
|
|
import searchSelect from "@/components/searchselect.vue"
|
|
|
|
export default {
|
|
components: { ticketd_b, ticketd, searchSelect },
|
|
data() {
|
|
return {
|
|
saveLoading: false,
|
|
mode: 'show',
|
|
t_id: null,
|
|
formData: {
|
|
employee: '',
|
|
employee_name: '',
|
|
belong_dept_name: '',
|
|
post_name: '',
|
|
id_number: '',
|
|
phone: '',
|
|
contract_type: '',
|
|
original_start_date: '',
|
|
original_end_date: '',
|
|
renew_start_date: '',
|
|
renew_end_date: '',
|
|
renew_years: 1,
|
|
reason: '',
|
|
remark: '',
|
|
file: '',
|
|
},
|
|
ticket_data: {},
|
|
EmpApiobj: this.$api.employeeList,
|
|
contractTypeList: [
|
|
{ value: 10, text: '固定期限劳动合同' },
|
|
{ value: 20, text: '无固定期限劳动合同' },
|
|
{ value: 30, text: '以完成一定工作任务为期限的劳动合同' },
|
|
],
|
|
customRules: {
|
|
contract_type: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '合同类型不能为空'
|
|
}]
|
|
},
|
|
original_start_date: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '原合同开始日期不能为空'
|
|
}]
|
|
},
|
|
original_end_date: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '原合同结束日期不能为空'
|
|
}]
|
|
},
|
|
renew_start_date: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '续签开始日期不能为空'
|
|
}]
|
|
},
|
|
renew_end_date: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '续签结束日期不能为空'
|
|
}]
|
|
},
|
|
renew_years: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '续签期限不能为空'
|
|
}]
|
|
},
|
|
reason: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '续签原因不能为空'
|
|
}]
|
|
},
|
|
},
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
let that = this;
|
|
that.mode = options.mode ? options.mode : 'show';
|
|
that.t_id = options.t_id ? options.t_id : null;
|
|
if (that.t_id) {
|
|
const res = await that.$api.empcontractItem(that.t_id);
|
|
Object.assign(that.formData, res);
|
|
if (that.formData.ticket_.state_.type == 1 && that.formData.create_by == uni.getStorageSync("userInfo").id) {
|
|
that.mode = "edit";
|
|
} else {
|
|
that.mode = "show";
|
|
}
|
|
} else {
|
|
that.fillNames();
|
|
}
|
|
},
|
|
methods: {
|
|
async fillNames() {
|
|
const employee = await this.$api.employeeInfo();
|
|
this.formData.employee_name = employee.name;
|
|
this.formData.belong_dept_name = employee.belong_dept_name;
|
|
this.formData.post_name = employee.post_name;
|
|
this.formData.id_number = employee.id_number;
|
|
this.formData.phone = employee.phone;
|
|
this.formData.employee = employee.id;
|
|
this.mode = "add";
|
|
},
|
|
async handleEmpChange(id) {
|
|
if (!id) return;
|
|
const obj = await this.$api.employeeItem(id);
|
|
Object.assign(this.formData, {
|
|
employee_name: obj.name,
|
|
belong_dept_name: obj.belong_dept_name,
|
|
post_name: obj.post_name,
|
|
id_number: obj.id_number,
|
|
phone: obj.phone,
|
|
});
|
|
},
|
|
getLabel(list, value) {
|
|
if (!list || value === undefined || value === null) return '';
|
|
const item = list.find(i => String(i.value) === String(value));
|
|
return item ? item.text : '';
|
|
},
|
|
async handleSave() {
|
|
let that = this;
|
|
that.saveLoading = true;
|
|
try {
|
|
await that.$refs.customForm.validate();
|
|
await that.$api.empcontractCreate(that.formData);
|
|
uni.showToast({ title: '提交成功', icon: 'success' });
|
|
uni.navigateBack();
|
|
} catch (err) {
|
|
console.log('err', err);
|
|
} finally {
|
|
that.saveLoading = false;
|
|
}
|
|
},
|
|
async handleDel() {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定删除该续签申请吗？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
await that.$api.empcontractDelete(that.formData.id);
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-page {
|
|
min-height: 100vh;
|
|
background: #F5FAF7;
|
|
}
|
|
|
|
.form-scroll {
|
|
padding: 20rpx 24rpx;
|
|
padding-bottom: 180rpx;
|
|
}
|
|
|
|
.form-card {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.form-card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1A2E25;
|
|
margin-bottom: 16rpx;
|
|
padding-left: 16rpx;
|
|
border-left: 6rpx solid #2BA471;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
min-height: 160rpx;
|
|
border: 2rpx solid #C4C6D0;
|
|
border-radius: 12rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #1A2E25;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.form-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 14rpx !important;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
border: none !important;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.form-btn-primary {
|
|
background: linear-gradient(135deg, #1F8C5E, #2BA471) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.form-btn-danger {
|
|
background: linear-gradient(135deg, #EF4444, #DC2626) !important;
|
|
color: #fff !important;
|
|
}
|
|
</style>
|