补卡申请

ZL 2024-04-23 22:55:03 +08:00
parent 4b78b36b4e
commit 09d341d3d7
9 changed files with 422 additions and 10 deletions

View File

@ -198,6 +198,29 @@
}
}
]
},
{
"root": "pages/ask-leave",
"pages": [
{
"path": "list",
"style": {
"navigationBarTitleText": "请假申请"
}
},
{
"path": "create",
"style": {
"navigationBarTitleText": "请假申请"
}
},
{
"path": "detail",
"style": {
"navigationBarTitleText": "请假详情"
}
}
]
}
],
"globalStyle": {

View File

@ -0,0 +1,36 @@
<template>
<view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx" @click="goPath">
<view class="text-30rpx"> 请假申请</view>
<view class="text-24rpx text-hex-999999 flex">
<view class="text-24rpx w-140rpx">请假类型</view>
<view class="">{{ item.type.name }}</view>
</view>
<view class="text-24rpx text-hex-999999 flex">
<view class="text-24rpx w-140rpx">请假事由</view>
<view class="">{{ item.reason }}</view>
</view>
<view class="flex items-center text-hex-999999 flex">
<view class="text-24rpx w-140rpx"> 申请时间</view>
<view class="text-24rpx">{{ timeFormat(item.created_at, "yyyy-mm-dd hh:MM") }}</view>
</view>
<view
:style="{
color: statusFun(item.workflow_check.check_status, 'workflow_check', 'color')
}"
class="text-24rpx"
>{{ statusFun(item.workflow_check.check_status, "workflow_check", "name") }}</view
>
</view>
</template>
<script setup>
import statusFun from "@/utils/status"
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
const props = defineProps({
item: Object
})
const goPath = () => {
uni.navigateTo({
url: `/pages/ask-leave/detail?id=${props.item.id}`
})
}
</script>

View File

@ -0,0 +1,179 @@
<template>
<view>
<CuNavbar title="请假申请">
<template #right>
<view class="text-24rpx text-white" @click="submit"></view>
</template>
</CuNavbar>
<view class="card-shadow px-base">
<uv-form labelPosition="left" :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="250rpx">
<uv-form-item required label="请假类别" prop="type_id">
<uv-input
placeholder="请选择"
@click="openPicker"
readonly
inputAlign="right"
:border="`none`"
v-model="form.type_id"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item required label="请假开始时间" prop="start_at">
<uv-input
placeholder="请选择日期"
readonly
@click="openStartDatePicker"
inputAlign="right"
:border="`none`"
v-model="form.start_at"
>
</uv-input>
</uv-form-item>
<uv-form-item required label="请假结束时间" prop="end_at">
<uv-input
placeholder="请选择日期"
readonly
@click="openEndDatePicker"
inputAlign="right"
:border="`none`"
v-model="form.end_at"
>
</uv-input>
</uv-form-item>
<uv-line color="#f5f5f5"></uv-line>
<uv-form-item required label="请假理由" prop="reason" labelPosition="top">
<uv-textarea v-model="form.reason" count placeholder="请输入" :border="`none`" :maxlength="200"></uv-textarea>
</uv-form-item>
</uv-form>
</view>
<uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
<uv-datetime-picker
placeholder="请选择日期"
ref="dateStartPicker"
mode="datetime"
@confirm="confirmStartDatePicker"
>
</uv-datetime-picker>
<uv-datetime-picker placeholder="请选择日期" ref="dateEndPicker" mode="datetime" @confirm="confirmEndDatePicker">
</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 { ref, reactive, computed } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { http } from "@/utils/request"
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
const columns = ref([])
const pickerData = ref([])
const formRef = ref(null)
const dateStartPicker = ref(null)
const dateEndPicker = ref(null)
const pickerRef = ref(null)
const modalRef = ref(null)
// const value = ref(Number(new Date())
const id = ref(0)
const loading = ref(false)
const form = reactive({
start_at: "",
end_at: "",
reason: "",
type_id: ""
})
const openPicker = () => {
pickerRef.value.open()
}
const openStartDatePicker = () => {
dateStartPicker.value.open()
}
const openEndDatePicker = () => {
dateEndPicker.value.open()
}
const confirmStartDatePicker = e => {
form.start_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
}
const confirmEndDatePicker = e => {
form.end_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
}
const confirmPicker = e => {
form.type_id = e.value[0]
}
const rules = reactive({
start_at: [{ required: true, message: "请选择时间" }],
end_at: [{ required: true, message: "请选择时间" }],
reason: [{ required: true, message: "请输入请假理由" }],
type_id: [{ required: true, message: "请选择请假类别" }]
})
onLoad(options => {
http
.request({
url: `/keywords?parent_key=holiday_type`,
method: "GET",
header: {
Accept: "application/json"
}
})
.then(res => {
let names = res.map(item => item.name)
columns.value = [names]
pickerData.value = res
})
id.value = options.id
if (id.value) {
http
.request({
url: `/hr/holidays/${options.id}`,
method: "GET",
header: {
Accept: "application/json"
}
})
.then(res => {
form.start_at = timeFormat(res.start_at, "yyyy-mm-dd hh:MM:ss")
form.end_at = timeFormat(res.end_at, "yyyy-mm-dd hh:MM:ss")
form.reason = res.reason
form.type_id = res.type.name
})
}
})
const submit = () => {
formRef.value.validate().then(res => {
modalRef.value.open()
})
}
const onSubmit = async () => {
if (loading.value) return
loading.value = true
try {
let url = id.value ? `/hr/holidays/${id.value}` : "/hr/holidays"
let method = id.value ? "PUT" : "POST"
await http.request({
url: url,
method: method,
header: {
Accept: "application/json"
},
data: {
start_at: form.start_at,
type_id: pickerData.value.find(item => item.name === form.type_id).id,
reason: form.reason,
end_at: form.end_at
}
})
uni.showToast({
title: "提交成功",
icon: "none"
})
formRef.value.resetFields()
uni.navigateBack()
} catch (error) {
console.log(error)
} finally {
loading.value = false
}
}
</script>

View File

@ -0,0 +1,120 @@
<template>
<view class="px-base" v-if="detail">
<CuNavbar title="补卡审核">
<template v-if="!isEdit" #right>
<uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
</template>
</CuNavbar>
<view class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx">
<view class="py-20rpx flex items-center justify-between">
<view>申请人</view>
<view class="text-hex-999999">{{ detail.employee.name }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>所属门店</view>
<view class="text-hex-999999">{{ detail.store.title }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>电话号码</view>
<view class="text-hex-999999">{{ detail.employee.phone }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>申请时间</view>
<view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-mm-dd hh:MM") }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>请假类型</view>
<view class="text-hex-999999">{{ detail.type.name }}</view>
</view>
<view class="py-20rpx flex items-center justify-between">
<view>请假开始时间</view>
<view class="text-hex-999999">{{ timeFormat(detail.start_at, "yyyy-mm-dd hh:MM") }}</view>
</view>
<view class="py-20rpx flex items-center justify-between">
<view>请假结束时间</view>
<view class="text-hex-999999">{{ timeFormat(detail.end_at, "yyyy-mm-dd hh:MM") }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx">
<view>请假原因</view>
<view class="text-hex-999999 mt-20rpx">{{ detail.reason }}</view>
</view>
</view>
<view class="h-100rpx">
<view class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx">
<view class="flex-1">
<uv-button color="#999999" shape="circle" plain block> 拒绝 </uv-button>
</view>
<view class="flex-1">
<uv-button type="primary" shape="circle" block> 通过 </uv-button>
</view>
</view>
</view>
<uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-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 { http } from "@/utils/request"
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue"
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
const modalRef = ref(null)
const columns = [["修改", "删除"]]
const detail = ref()
const pickerRef = ref(null)
const id = ref(0)
const open = () => {
pickerRef.value.open()
}
const confirmPicker = e => {
console.log(e)
if (e.value[0] === "删除") {
modalRef.value.open()
} else {
uni.navigateTo({
url: `/pages/ask-leave/create?id=${id.value}`
})
}
}
const onSubmit = async () => {
try {
await http.request({
url: `/hr/holidays/${id.value}`,
method: "DELETE",
header: {
Accept: "application/json"
}
})
uni.showToast({
title: "删除成功",
icon: "none"
})
formRef.value.resetFields()
uni.navigateBack()
} catch (error) {
console.log(error)
} finally {
loading.value = false
}
}
onLoad(options => {
id.value = options.id
http
.request({
url: `/hr/holidays/${options.id}`,
method: "GET",
header: {
Accept: "application/json"
}
})
.then(res => {
detail.value = res
})
})
</script>

View File

@ -0,0 +1,58 @@
<template>
<view>
<CuNavbar title="请假申请">
<template #right>
<view @click="goPath('/pages/ask-leave/create')" class="text-24rpx text-white">申请</view>
</template>
</CuNavbar>
<uv-sticky bgColor="#fff">
<uv-tabs
:activeStyle="{ color: '#ee2c37' }"
:scrollable="false"
lineColor="#ee2c37"
:list="tabList"
@change="tabChange"
></uv-tabs>
</uv-sticky>
<MescrollItem ref="mescrollItem0" :top="88" :i="0" :index="tabIndex" :apiUrl="tabList[0].apiUrl">
<template v-slot="{ list }">
<view class="space-y-15rpx p-base">
<view v-for="(item, i) in list" :key="i">
<Item :item="item"></Item>
</view>
</view>
</template>
</MescrollItem>
</view>
</template>
<script setup>
import CuNavbar from "@/components/cu-navbar/index"
import { ref } from "vue"
import { onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app"
import useMescrollMore from "@/uni_modules/mescroll-uni/hooks/useMescrollMore.js"
import MescrollItem from "@/components/mescroll-api/more.vue"
import Item from "./components/item.vue"
const tabList = ref([
{
name: "我的请假",
apiUrl: "/hr/holidays"
},
{
name: "请假审核"
}
])
const mescrollItem0 = ref(null)
const mescrollItem1 = ref(null)
const mescrollItems = [mescrollItem0, mescrollItem1]
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom)
const goPath = url => {
uni.navigateTo({
url
})
}
const tabChange = ({ index }) => {
tabIndex.value = index
scrollToLastY()
}
</script>

View File

@ -30,7 +30,7 @@ const props = defineProps({
item: Object
})
const valueFormat = computed(() => {
return timeFormat(props.item.date, "yyyy-MM-dd hh:mm")
return timeFormat(props.item.date, "yyyy-mm-dd hh:MM")
})
const goPath = () => {
uni.navigateTo({

View File

@ -85,7 +85,7 @@ const openDatePicker = () => {
datetimePicker.value.open()
}
const confirmDatePicker = e => {
form.date = timeFormat(e.value, "yyyy-MM-dd hh:mm")
form.date = timeFormat(e.value, "yyyy-mm-dd hh:MM")
}
const confirmPicker = e => {
form.sign_time = e.value[0]
@ -108,7 +108,7 @@ onLoad(options => {
}
})
.then(res => {
form.date = timeFormat(res.date, "yyyy-MM-dd hh:mm")
form.date = timeFormat(res.date, "yyyy-mm-dd hh:MM")
form.reason = res.reason
form.isOutSide = res.sign_type == 1 ? false : true
form.outside_remarks = res.outside_remarks

View File

@ -23,16 +23,12 @@
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>申请时间</view>
<view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-MM-dd hh:mm") }}</view>
<view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-mm-dd hh:MM") }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx flex items-center justify-between">
<view>补卡时间</view>
<view class="text-hex-999999">{{ timeFormat(detail.date, "yyyy-MM-dd hh:mm") }}</view>
</view>
<view class="py-20rpx flex items-center justify-between">
<view>补卡类别</view>
<view class="text-hex-999999">{{ detail.sign_time == 1 ? "上班打卡" : "下班打卡" }}</view>
<view class="text-hex-999999">{{ timeFormat(detail.date, "yyyy-mm-dd hh:MM") }}</view>
</view>
<uv-line></uv-line>
<view class="py-20rpx">

View File

@ -72,7 +72,7 @@ const opList = [
{
icon: "car",
title: "请假申请",
url: ""
url: "/pages/ask-leave/list"
},
{
icon: "setting-fill",