cxc-szcx-uniapp/pages/leave/application.vue

385 lines
9.2 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" :end="endTime">
<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" :start="beginTime">
<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="departure" placeholder="请输入" nplaceholder-style="font-size: 28rpx;color: #999999;" />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
目的地:
</view>
<input v-model="destination" placeholder="请输入" nplaceholder-style="font-size: 28rpx;color: #999999;" />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
请假事由:
</view>
<input v-model="reason" placeholder="请输入" placeholder-style="font-size: 28rpx;color: #999999;" />
</view>
<view class="f-row aic jcb input_box">
<view class="title">
上传附件:
</view>
<uni-file-picker @select="select" :image-styles="imageStyles" />
</view>
</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,
queryHisDateApi
} from '@/api/pages.js';
import {
queryDepByCode,
queryZbDepByLdhth
} 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 orgCode = 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 departure = ref('')
/**目的地*/
const destination = ref('')
/**请假事由*/
const reason = ref('')
/**附件路径*/
const path = ref([])
const baseUrl = import.meta.env.VITE_REQUEST_BASE_URL + '/jeecg-boot/sys/common/upload/'
const imageStyles = {
width: 64,
height: 64,
border: {
color: "#dce7e1",
width: 2,
style: 'dashed',
radius: '2px'
}
}
onLoad(() => {
loadData()
// getTomorrowDate()
})
const select = (e) => {
const tempFilePaths = e.tempFilePaths
for (let i = 0; i < e.tempFilePaths.length; i++) {
let photoPath = '职工请假/' + depart.value + '/' + store.userinfo.realname
uni.uploadFile({
url: baseUrl,
filePath: e.tempFilePaths[i],
name: 'file',
formData: {
appPath: photoPath
},
success: (res) => {
path.value.push(JSON.parse(res.data).message)
}
});
}
}
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 (!departure.value.trim()) return proxy.$toast('请输入出发地')
if (!destination.value.trim()) return proxy.$toast('请输入目的地')
if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
qjAddApi({
sysOrgCode: orgCode.value,
username: store.userinfo.username,
phone: phone.value,
type: type.value,
begintime: beginTime.value,
endtime: endTime.value,
examineleader: typeArr.value[typeIndex.value] ? typeArr.value[typeIndex.value].username : '',
departure: departure.value,
destination: destination.value,
reason: reason.value,
zwmc: zwcj.value,
path: path.value.toString()
}).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
}
})
queryZbDepByLdhth(store.userinfo.workNo).then((res) => { //获取工作单位
depart.value = res.departName
orgCode.value = res.orgCode
})
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);
}
})
queryHisDateApi(store.userinfo.username).then((res) => { // 最新请假结束日期
if (res) {
console.log('--0', res)
getTomorrowDate(res);
} else {
console.log('--1', res)
getTomorrowDate();
}
})
}
const bindType = (e) => {
typeIndex.value = e.detail.value
}
const getTomorrowDate = (e) => {
let tomorrow;
if (e) {
// 将传入的日期字符串转换为Date对象
const dateParts = e.split('-').map(Number);
tomorrow = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
} else {
// 如果没有提供日期,则使用当前日期
tomorrow = new Date();
}
// 设置为明天的日期
tomorrow.setDate(tomorrow.getDate() + 1);
// 格式化日期
const year = tomorrow.getFullYear();
const month = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
const day = tomorrow.getDate().toString().padStart(2, '0');
beginTime.value = `${year}-${month}-${day}`;
}
</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;
}
}
</style>