cxc-szcx-uniapp/pages/leave/application.vue
yangzhq68909 e73c24ff15 11
2024-10-12 09:14:27 +08:00

359 lines
7.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :class="{'gray':store.isgray==1}">
<view class="form">
<view class="f-row aic jcb input_box">
<view class="title">
职工姓名
</view>
<input v-model="realname" disabled />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
工作单位:
</view>
<input v-model="depart" disabled />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
联系方式:
</view>
<input v-model="phone" />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
请假类型:
</view>
<tree-select :dataSource="dataSource" v-model="type" dataValue="name" />
</view>
<picker mode="date" fields="day" @change="chooseStart" :value="beginTime">
<view class="f-row aic jcb box">
<view class="title">
开始时间:
</view>
<view class="f-row aic">
<view :class="[{'choose':!beginTime},{'choosed':beginTime}]">
{{beginTime?beginTime:'请选择'}}
</view>
<uni-icons type="bottom" color="#333333"></uni-icons>
</view>
</view>
</picker>
<picker mode="date" fields="day" @change="chooseEnd" :value="endTime">
<view class="f-row aic jcb box">
<view class="title">
截止时间
</view>
<view class="f-row aic">
<view :class="[{'choose':!endTime},{'choosed':endTime}]">
{{endTime?endTime:'请选择'}}
</view>
<uni-icons type="bottom" color="#333333"></uni-icons>
</view>
</view>
</picker>
<picker @change="bindType" :value="typeIndex" :range="typeArr" range-key="realname" v-if="ifShow">
<view class="f-row aic jcb box">
<view class="title">
审批领导
</view>
<view class="f-row aic">
<view :class="[{'choose':typeIndex==null},{'choosed':typeIndex!=null}]">
{{typeIndex!=null?typeArr[typeIndex].realname:'请选择'}}
</view>
<uni-icons type="bottom" color="#333333"></uni-icons>
</view>
</view>
</picker>
<view class="f-row aic jcb input_box">
<view class="title">
请假地点
</view>
<input v-model="address" type="text" placeholder="请输入"
placeholder-style="font-size: 28rpx;color: #999999;" />
</view>
</view>
<view class="reason f-col">
<view class="title">
请假事由:
</view>
<textarea v-model="reason" placeholder="请输入请假事由" placeholder-style="font-size: 28rpx;color: #999999;"
cols="30" rows="10"></textarea>
</view>
<view class="btn f-col aic">
<view @click="qjAdd">
提交
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
getCurrentInstance
} from 'vue';
import {
startMutilProcessApi,
getCategoryItemsApi,
} from '@/api/api.js';
import {
qjAddApi,
queryZwmcAndExaApi
} from '@/api/pages.js';
import {
queryDepByCode
} from '@/api/depart.js'
import {
onLoad
} from '@dcloudio/uni-app'
import {
useStore
} from '@/store';
import treeSelect from "@/components/treeSelect/treeSelect.vue"
const store = useStore()
const {
proxy
} = getCurrentInstance()
/**职工姓名*/
const realname = ref(store.userinfo.realname)
/**工作单位*/
const depart = ref('')
/**联系方式*/
const phone = ref(store.userinfo.phone)
/**请假类型*/
const type = ref('')
const dataSource = ref([])
/**开始时间*/
const beginTime = ref('')
const chooseStart = (e) => {
beginTime.value = e.detail.value
}
/**结束时间*/
const endTime = ref('')
const chooseEnd = (e) => {
endTime.value = e.detail.value
}
/**审批领导*/
const typeArr = ref([])
const typeIndex = ref(null)
/**判断是否显示审批领导字段*/
const ifShow = ref(true)
/**职位层级*/
const zwcj = ref('')
/**请假地点*/
const address = ref('')
/**请假事由*/
const reason = ref('')
onLoad(() => {
loadData()
})
const qjAdd = () => {
if (!phone.value.trim()) return proxy.$toast('请输入联系方式')
if (!type.value) return proxy.$toast('请选择请假类型')
if (!beginTime.value) return proxy.$toast('请选择开始时间')
if (!endTime.value) return proxy.$toast('请选择结束时间')
if (ifShow.value) {
if (typeIndex.value == null) { //副职、员工需要选择审批领导
return proxy.$toast('请选择审批领导')
}
}
if (!address.value.trim()) return proxy.$toast('请输入请假地点')
if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
qjAddApi({
username: store.userinfo.username,
phone: phone.value,
type: type.value,
begintime: beginTime.value,
endtime: endTime.value,
examineleader: typeArr.value[typeIndex.value].username,
address: address.value,
reason: reason.value,
zwcj: zwcj.value,
}).then((res) => {
if (res.success) {
startMutilProcess(res.message)
} else {
proxy.$toast(res.message);
}
})
}
const startMutilProcess = (id) => {
startMutilProcessApi({
flowCode: "dev_cxc_qxj",
id,
formUrl: "modules/qxj/modules/CxcQxjBpmModel",
formUrlMobile: "leaveApplication" //对应main.js里全局注册createApp()里的 app.component('leaveApplication',index)
}).then((res) => {
if (res.success) {
proxy.$toast(res.message)
setTimeout(() => {
uni.navigateBack()
}, 2000)
}
}).catch((err) => {
console.log(err);
})
}
const loadData = () => {
getCategoryItemsApi('1838487445813645313').then((res) => { //请假类型
if (res.success) {
dataSource.value = res.result
}
})
queryDepByCode(store.userinfo.orgCode).then((res) => { //部门翻译
if (res.success) {
depart.value = res.result
}
})
queryZwmcAndExaApi(store.userinfo.username).then((res) => { //本人职位及审批领导列表
if (res.success) {
typeArr.value = res.result.list
zwcj.value = res.result.zwmc
if (zwcj.value == '单位专家' || zwcj.value == '正职' || zwcj.value == '高级主管') {
ifShow.value = false;
}
} else {
proxy.$toast(res.message);
}
})
}
const bindType = (e) => {
typeIndex.value = e.detail.value
}
</script>
<style>
page {
background-color: #fff;
}
</style>
<style lang="scss" scoped>
.btn {
border-top: 1px solid #EFEFEF;
height: 120rpx;
justify-content: center;
position: fixed;
bottom: 0;
width: 100vw;
view {
width: 690rpx;
height: 88rpx;
background: #01508B;
border-radius: 16rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 88rpx;
}
}
.input_box {
height: 100rpx;
.title {
font-size: 28rpx;
color: #333333;
}
input {
flex: 1;
height: 100%;
text-align: right;
font-size: 28rpx;
color: #333333;
}
}
.form {
padding: 0 30rpx;
background-color: #fff;
.title {
font-size: 28rpx;
color: #333333;
}
.box {
height: 100rpx;
}
.box:not(:last-child) {
border-bottom: 1px solid #EFEFEF;
}
.choose {
font-size: 28rpx;
color: #999999;
}
.choosed {
font-size: 28rpx;
color: #333333;
}
}
.reason {
background-color: #fff;
margin-top: 20rpx;
height: 290rpx;
padding: 30rpx;
.title {
font-size: 28rpx;
color: #333333;
}
textarea {
width: 100%;
margin-top: 20rpx;
}
}
// .progress_box {
// background-color: #fff;
// margin-top: 20rpx;
// padding: 30rpx;
// .title {
// font-size: 28rpx;
// color: #333333;
// }
// .avatar {
// width: 78rpx;
// height: 78rpx;
// border-radius: 38rpx;
// background-color: #333333;
// margin-top: 30rpx;
// }
// text {
// font-size: 24rpx;
// color: #333333;
// margin-top: 10rpx;
// }
// .line {
// width: 91rpx;
// height: 17rpx;
// margin: 0 40rpx;
// }
// }
.lines {
height: 20rpx;
background-color: #F8F8F8;
}
</style>