398 lines
8.5 KiB
Vue
398 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<view :class="{'gray':store.isgray==1}">
|
|||
|
|
<view class="form">
|
|||
|
|
<picker @change="bindType" :value="typeIndex" :range="typeArr" range-key="value">
|
|||
|
|
<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].value:'请选择'}}
|
|||
|
|
</view>
|
|||
|
|
<uni-icons type="right" color="#333333"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
<!-- <uni-datetime-picker type="date" @change="chooseStart">
|
|||
|
|
<view class="f-row aic jcb box">
|
|||
|
|
<view class="title">
|
|||
|
|
开始时间：
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic">
|
|||
|
|
<view :class="[{'choose':!start},{'choosed':start}]">
|
|||
|
|
{{start?start:'请选择'}}
|
|||
|
|
</view>
|
|||
|
|
<uni-icons type="right" color="#333333"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-datetime-picker> -->
|
|||
|
|
<picker mode="date" fields="day" @change="chooseStart" :value="start">
|
|||
|
|
<view class="f-row aic jcb box">
|
|||
|
|
<view class="title">
|
|||
|
|
开始时间：
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic">
|
|||
|
|
<view :class="[{'choose':!start},{'choosed':start}]">
|
|||
|
|
{{start?start:'请选择'}}
|
|||
|
|
</view>
|
|||
|
|
<uni-icons type="right" color="#333333"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
|
|||
|
|
<picker mode="date" fields="day" @change="chooseEnd" :value="end">
|
|||
|
|
<view class="f-row aic jcb box">
|
|||
|
|
<view class="title">
|
|||
|
|
结束时间：
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic">
|
|||
|
|
<view :class="[{'choose':!end},{'choosed':end}]">
|
|||
|
|
{{end?end:'请选择'}}
|
|||
|
|
</view>
|
|||
|
|
<uni-icons type="right" color="#333333"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
<!-- <uni-datetime-picker type="date" @change="chooseEnd">
|
|||
|
|
<view class="f-row aic jcb box">
|
|||
|
|
<view class="title">
|
|||
|
|
结束时间：
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic">
|
|||
|
|
<view :class="[{'choose':!end},{'choosed':end}]">
|
|||
|
|
{{end?end:'请选择'}}
|
|||
|
|
</view>
|
|||
|
|
<uni-icons type="right" color="#2C2C2C"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-datetime-picker> -->
|
|||
|
|
<view class="f-row aic jcb input_box">
|
|||
|
|
<view class="title">
|
|||
|
|
工作单位：
|
|||
|
|
</view>
|
|||
|
|
<input v-model="gzdw" type="text" placeholder="请输入"
|
|||
|
|
placeholder-style="font-size: 28rpx;color: #999999;" />
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic jcb input_box">
|
|||
|
|
<view class="title">
|
|||
|
|
行政级别：
|
|||
|
|
</view>
|
|||
|
|
<input v-model="xzjb" type="text" placeholder="请输入"
|
|||
|
|
placeholder-style="font-size: 28rpx;color: #999999;" />
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic jcb input_box">
|
|||
|
|
<view class="title">
|
|||
|
|
请假地点：
|
|||
|
|
</view>
|
|||
|
|
<input v-model="xjdd" type="text" placeholder="请输入"
|
|||
|
|
placeholder-style="font-size: 28rpx;color: #999999;" />
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="f-row aic jcb box">
|
|||
|
|
<view class="title">
|
|||
|
|
请假时长：
|
|||
|
|
</view>
|
|||
|
|
<view class="f-row aic">
|
|||
|
|
<view class="choose">
|
|||
|
|
小时
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="lines">
|
|||
|
|
|
|||
|
|
</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="lines">
|
|||
|
|
|
|||
|
|
</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 class="" @click="qjAdd">
|
|||
|
|
提交
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <uni-popup ref="typepop" type="bottom" border-radius="10px 10px 0 0">
|
|||
|
|
<view class="pop">
|
|||
|
|
<view class="popbtn f-row aic jcb">
|
|||
|
|
<view class="cancel">
|
|||
|
|
取消
|
|||
|
|
</view>
|
|||
|
|
<view class="confirm">
|
|||
|
|
确定
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="type">
|
|||
|
|
<view class="" v-for="item,i in 8" :key="i">
|
|||
|
|
年假
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
getCurrentInstance
|
|||
|
|
} from 'vue';
|
|||
|
|
import {
|
|||
|
|
qjAddApi,
|
|||
|
|
startMutilProcessApi,
|
|||
|
|
getDictItemsApi
|
|||
|
|
} from '@/network/api.js';
|
|||
|
|
import {
|
|||
|
|
onLoad
|
|||
|
|
} from '@dcloudio/uni-app'
|
|||
|
|
import {
|
|||
|
|
useStore
|
|||
|
|
} from '@/store';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
const store = useStore()
|
|||
|
|
const {
|
|||
|
|
proxy
|
|||
|
|
} = getCurrentInstance()
|
|||
|
|
// const typepop = ref(null)
|
|||
|
|
// const openPop = () => {
|
|||
|
|
// typepop.value.open()
|
|||
|
|
// }
|
|||
|
|
// const closePop = () => {
|
|||
|
|
// typepop.value.close()
|
|||
|
|
// }
|
|||
|
|
onLoad(() => {
|
|||
|
|
getDictItems()
|
|||
|
|
})
|
|||
|
|
const typeArr = ref([])
|
|||
|
|
const typeIndex = ref(null)
|
|||
|
|
const bindType = (e) => {
|
|||
|
|
typeIndex.value = e.detail.value
|
|||
|
|
}
|
|||
|
|
const start = ref("")
|
|||
|
|
const end = ref("")
|
|||
|
|
const reason = ref("")
|
|||
|
|
const chooseStart = (e) => {
|
|||
|
|
start.value = e.detail.value
|
|||
|
|
}
|
|||
|
|
const chooseEnd = (e) => {
|
|||
|
|
end.value = e.detail.value
|
|||
|
|
}
|
|||
|
|
/**行政级别*/
|
|||
|
|
const xzjb = ref('')
|
|||
|
|
/**工作单位*/
|
|||
|
|
const gzdw = ref('')
|
|||
|
|
/**休假地点*/
|
|||
|
|
const xjdd = ref('')
|
|||
|
|
const qjAdd = () => {
|
|||
|
|
if (typeIndex.value == null) return proxy.$toast('请选择请假类型')
|
|||
|
|
if (!start.value) return proxy.$toast('请选择开始时间')
|
|||
|
|
if (!end.value) return proxy.$toast('请选择结束时间')
|
|||
|
|
if (!gzdw.value.trim()) return proxy.$toast('请输入工作单位')
|
|||
|
|
if (!xzjb.value.trim()) return proxy.$toast('请输入行政级别')
|
|||
|
|
if (!xjdd.value.trim()) return proxy.$toast('请输入请假地点')
|
|||
|
|
if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
|
|||
|
|
qjAddApi({
|
|||
|
|
qjlx: typeArr.value[typeIndex.value].value,
|
|||
|
|
starttime: start.value,
|
|||
|
|
endtime: end.value,
|
|||
|
|
sy: reason.value,
|
|||
|
|
createBy: store.userinfo.username,
|
|||
|
|
qjname: store.userinfo.realname,
|
|||
|
|
sysOrgCode: store.userinfo.orgCode,
|
|||
|
|
phone: store.userinfo.phone,
|
|||
|
|
qxjxzjb: xzjb.value,
|
|||
|
|
gzdw: gzdw.value,
|
|||
|
|
xjdd: xjdd.value
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.success) {
|
|||
|
|
startMutilProcess(res.message)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const startMutilProcess = (id) => {
|
|||
|
|
startMutilProcessApi({
|
|||
|
|
flowCode: "dev_cxc_qxj_zg_001",
|
|||
|
|
id,
|
|||
|
|
formUrl: "cxcQxjZg/vue/CxcQxjZgFrom",
|
|||
|
|
formUrlMobile: "leaveApplication"
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.success) {
|
|||
|
|
proxy.$toast(res.message)
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 2000)
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const getDictItems = () => {
|
|||
|
|
getDictItemsApi().then((res) => {
|
|||
|
|
if (res.success) {
|
|||
|
|
typeArr.value = res.result
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
// .pop{
|
|||
|
|
// background-color: #fff;
|
|||
|
|
// border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
// }
|
|||
|
|
.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>
|