338 lines
7.0 KiB
Vue
338 lines
7.0 KiB
Vue
<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>
|
||
<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="progress_box">
|
||
<view class="title">
|
||
审批流程：
|
||
</view>
|
||
<view class="progress f-row aic">
|
||
<view class="f-col aic ">
|
||
<image class="avatar" src="" mode=""></image>
|
||
<text>发起人</text>
|
||
</view>
|
||
<image class="line" src="../../static/line.png" mode=""></image>
|
||
<view class="f-col aic">
|
||
<image class="avatar" src="" mode=""></image>
|
||
<text>部门领导</text>
|
||
</view>
|
||
<image class="line" src="../../static/line.png" mode=""></image>
|
||
<view class="f-col aic">
|
||
<image class="avatar" src="" mode=""></image>
|
||
<text>人事部门</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="btn f-col aic">
|
||
<view @click="qjAdd">
|
||
提交
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import {
|
||
qjAddApi,
|
||
startMutilProcessApi,
|
||
getCategoryItemsApi
|
||
} from '@/api/api.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 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 (!address.value.trim()) return proxy.$toast('请输入请假地点')
|
||
if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
|
||
qjAddApi({
|
||
username: store.userinfo.username,
|
||
realname: store.userinfo.realname,
|
||
phone: phone.value,
|
||
type: type.value,
|
||
begintime: beginTime.value,
|
||
endtime: endTime.value,
|
||
address: address.value,
|
||
reason: reason.value
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
startMutilProcess(res.message)
|
||
} else {
|
||
proxy.$toast(res.message);
|
||
}
|
||
})
|
||
}
|
||
const startMutilProcess = (id) => {
|
||
startMutilProcessApi({
|
||
flowCode: "dev_cxc_qxj_zg_001",
|
||
id,
|
||
formUrl: "modules/zgqxj/modules/CxcZgqxjBpmModel",
|
||
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
|
||
console.log('--', res.result)
|
||
}
|
||
})
|
||
|
||
queryDepByCode(store.userinfo.orgCode).then((res) => { //部门翻译
|
||
if (res.success) {
|
||
depart.value = res.result
|
||
}
|
||
})
|
||
|
||
}
|
||
</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> |