store-manage-app/src/pages/work/create.vue

298 lines
8.6 KiB
Vue

<template>
<view>
<CuNavbar title="升职申请"></CuNavbar>
<uv-sticky bgColor="white">
<view class="px-base box-shadow text-28rpx">
<view class="px-base">
<BaseData :data="detail" :colums="titleColumns" />
</view>
</view>
</uv-sticky>
<view class="p-base">
<view class="card-shadow px-base">
<uv-form
labelPosition="left"
:model="form"
:rules="rules"
ref="formRef"
errorType="toast"
labelWidth="250rpx"
>
<template v-if="type == 0">
<uv-form-item required label="年龄" prop="age">
<uv-input
placeholder="请输入年龄"
inputAlign="right"
:border="`none`"
v-model="form.age"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item required label="性别" prop="sex">
<uv-input
placeholder="请选择性别"
@click="openPicker"
readonly
inputAlign="right"
:border="`none`"
v-model="form.sex"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item required label="学历" prop="education">
<uv-input
placeholder="请输入学历"
inputAlign="right"
:border="`none`"
v-model="form.education"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item
required
@click="openDatePicker"
label="首次参加工作时间"
prop="first_work_time"
>
<uv-input
placeholder="请选择日期"
required
inputAlign="right"
:border="`none`"
v-model="form.first_work_time"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item required label="工作年限" prop="work_years">
<uv-input
placeholder="请输入工作年限"
inputAlign="right"
:border="`none`"
v-model="form.work_years"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item
required
label="本公司工作年限"
prop="work_years_in_company"
>
<uv-input
placeholder="请输入本公司工作年限"
inputAlign="right"
:border="`none`"
v-model="form.work_years_in_company"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item
required
label="员工自评"
prop="comment_self"
labelPosition="top"
>
<uv-textarea
v-model="form.comment_self"
:customStyle="{ padding: '0' }"
count
placeholder="请输入员工自评"
:border="`none`"
:maxlength="200"
></uv-textarea>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item
required
label="未来计划"
prop="plans"
labelPosition="top"
>
<uv-textarea
:customStyle="{ padding: '0' }"
v-model="form.plans"
count
placeholder="请输入未来计划"
:border="`none`"
:maxlength="200"
></uv-textarea>
</uv-form-item>
</template>
<template v-if="type == 1">
<BaseData :data="detail.employee_data" :colums="userColumns" />
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item
label="推荐理由"
prop="reason"
required
labelPosition="top"
>
<uv-textarea
:customStyle="{ padding: '0' }"
v-model="form.reason"
count
placeholder="请输入推荐理由"
:border="`none`"
:maxlength="200"
></uv-textarea>
</uv-form-item>
</template>
</uv-form>
</view>
</view>
<view class="px-base">
<view class="py-30rpx">
<uv-button type="primary" @click="submit"></uv-button>
</view>
</view>
<uv-picker
ref="pickerRef"
:columns="columns"
@confirm="confirmPicker"
></uv-picker>
<uv-datetime-picker
placeholder="请选择日期"
ref="datetimePicker"
mode="year-month"
:minDate="(new Date(0)).getTime()"
@confirm="confirmDatePicker"
>
</uv-datetime-picker>
<uv-modal
ref="modalRef"
title="提示"
content="确定提交吗?"
@confirm="onSubmit"
:showCancelButton="true"
></uv-modal>
</view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import BaseData from '../audits/base-data.vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/request'
import { ref, reactive, computed, onBeforeMount } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
const detail = ref({})
const actionSheet = ref(null)
const columns = [['男', '女']]
const formRef = ref(null)
const datetimePicker = ref(null)
const pickerRef = ref(null)
const modalRef = ref(null)
const loading = ref(false)
const type = ref(0)
const titleColumns = [
{ title: '晋升职位', dataIndex: 'job.name' },
{ title: '申请人', dataIndex: 'employee.name' },
{ title: '推荐人', dataIndex: 'invitor.name' },
]
const userColumns = [
{ title: '年龄', dataIndex: 'age' },
{ title: '性别', dataIndex: 'sex' },
{ title: '学历', dataIndex: 'education' },
{ title: '首次参加工作时间', dataIndex: 'first_work_time' },
{ title: '工作年限', dataIndex: 'work_years' },
{ title: '本公司工作年限', dataIndex: 'work_years_in_company' },
{ title: '员工自评', dataIndex: 'comment_self', labelPosition: 'top' },
{ title: '未来计划', dataIndex: 'plans', labelPosition: 'top' },
]
const form = reactive({
age: '',
sex: '',
education: '',
first_work_time: '',
work_years: '',
work_years_in_company: '',
comment_self: '',
plans: '',
reason: '',
})
const openPicker = () => {
pickerRef.value.open()
}
const openDatePicker = () => {
datetimePicker.value.open()
}
const confirmDatePicker = (e) => {
let date = new Date(e.value);
let month = date.getMonth() + 1
if (month < 10) {
month = '0' + month
}
form.first_work_time = date.getFullYear() + '-' + month
}
const confirmPicker = (e) => {
form.sex = e.value[0]
}
const rules = reactive({
age: [{ required: true, message: '请输入年龄' }],
sex: [{ required: true, message: '请选择性别' }],
education: [{ required: true, message: '请输入学历' }],
first_work_time: [{ required: true, message: '请输入首次参加工作时间' }],
work_years: [{ required: true, message: '请输入工作年限' }],
work_years_in_company: [{ required: true, message: '请输入本公司工作年限' }],
comment_self: [{ required: true, message: '请输入员工自评' }],
plans: [{ required: true, message: '请输入未来计划' }],
reason: [{ required: true, message: '请输入推荐理由' }],
})
onLoad((options) => {
type.value = options.type
http.get(`/hr/promotion/${options.id}`).then(res => {
detail.value = res
})
})
const submit = () => {
formRef.value.validate().then((res) => {
modalRef.value.open()
}).catch(error => {
console.log(error)
})
}
const onSubmit = async () => {
if (loading.value) return
loading.value = true
try {
const params = {
...form,
}
const resData = await http.request({
url: `/hr/promotion/${detail.value.id}`,
method: 'POST',
data: params,
})
uni.showToast({
title: '提交成功',
icon: 'none',
})
formRef.value.resetFields()
uni.$emit('refresh')
uni.navigateBack()
} catch (error) {
console.log(error)
} finally {
loading.value = false
}
}
const open = () => {
actionSheet.value.open()
}
</script>