@@ -1,5 +1,5 @@
< script setup lang = "ts" >
import { computed , ref } from 'vue' ;
import { computed , reactive , ref } from 'vue' ;
import { useVbenModal } from '@vben/common-ui' ;
import { $t } from '@vben/locales' ;
@@ -20,7 +20,7 @@ import {
noClockingColumns ,
weekdayColumns
} from './data' ;
import { Tag , Button , Table , Checkbox , Select , SelectOption , message } from 'ant-design-vue'
import { Tag , Button , Table , Checkbox , Select , SelectOption , message , Alert } from 'ant-design-vue'
import { getDictOptions } from "#/utils/dict" ;
import holidayCalendar from './holiday-calendar.vue'
import changeShiftSchedule from './change-shift-schedule.vue'
@@ -31,12 +31,16 @@ import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/mod
const emit = defineEmits < { reload : [ ] } > ( ) ;
const isUpdate = ref ( false ) ;
const weekdayData = ref < any [ ] > ( [ ] )
const title = computed ( ( ) => {
return isUpdate . value ? $t ( 'pages.common.edit' ) : $t ( 'pages.common.add' ) ;
} ) ;
const settingData = ref < any > ( {
const settingData = reactive ( {
isAutomatic : true ,
weekdayData : [ ] ,
cycleData : [ ] ,
unCheckInData : [ ] ,
checkInData : [ ] ,
shiftId : ''
} )
const [ BasicForm , formApi ] = useVbenForm ( {
commonConfig : {
@@ -73,23 +77,26 @@ const [BasicModal, modalApi] = useVbenModal({
return null ;
}
modalApi . modalLoading ( true ) ;
const { id } = modalApi . getData ( ) as { id ? : number | string } ;
isUpdate . value = ! ! id ;
if ( isUpdate . value && id ) {
const record = await groupInfo ( id ) ;
await formApi . setValues ( record ) ;
} else {
weekdayData . value = [ ]
getDictOptions ( 'wy_kqgzr' ) . forEach ( item => {
weekdayData . value . push ( {
dayOfWeek : item . value ,
label : item . label ,
shiftValue : '休息' ,
isRest : true ,
shiftId : null ,
const dictOptions = getDictOptions ( 'wy_kqgzr' ) ;
console . log ( dictOptions )
if ( dictOptions ) {
dictOptions . forEach ( item => {
settingData . weekdayData . push ( {
dayOfWeek : item . value ,
label : item . label ,
shiftValue : '休息' ,
isRest : 1 ,
id : null ,
} )
} )
} )
}
settingData . cycleData = [ { id : '' } , { id : '' } ] ;
}
await markInitialized ( ) ;
modalApi . modalLoading ( false ) ;
@@ -105,6 +112,24 @@ async function handleConfirm() {
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep ( await formApi . getValues ( ) ) ;
if ( data . attendanceType == 1 ) {
let hasError = false ;
settingData . cycleData . forEach ( ( item , index ) => {
if ( ! item . id ) {
message . warning ( '请选择周期天数对应班次。' ) ;
return ;
}
item . dayNumber = index + 1
} )
if ( ! hasError ) {
return ;
}
data . numList = settingData . cycleData
} else {
data . weekSetList = settingData . weekdayData
data . clockDate = settingData . checkInData . concat ( settingData . unCheckInData )
}
await ( isUpdate . value ? groupUpdate ( data ) : groupAdd ( data ) ) ;
resetInitialized ( ) ;
emit ( 'reload' ) ;
@@ -119,9 +144,14 @@ async function handleConfirm() {
async function handleClosed ( ) {
await formApi . resetForm ( ) ;
resetInitialized ( ) ;
cycleData . value = [ ]
unCheckInData . value = [ ]
checkInData . value = [ ]
Object . assign ( settingData , {
isAutomatic : true ,
weekdayData : [ ] ,
cycleData : [ ] ,
unCheckInData : [ ] ,
checkInData : [ ] ,
shiftId : '' ,
} ) ;
}
const [ HolidayCalendar , holidayApi ] = useVbenModal ( {
@@ -138,7 +168,7 @@ const [CheckInDate, checkInDateApi] = useVbenModal({
/**
* 查看法定节假日日历
*/
async function showHoliday ( ) {
function showHoliday ( ) {
holidayApi . open ( )
}
@@ -146,18 +176,20 @@ async function showHoliday() {
* 更改班次
* @param type 1.设置班次 2.选择班次
*/
async function shiftScheduleHandle ( type : number ) {
function shiftScheduleHandle ( type : number ) {
shiftApi . setData ( { type } )
shiftApi . open ( )
}
const shiftInfo = ref < ShiftVO > ( )
const shiftList = ref < ShiftVO [ ] > ( [ ] )
const handleShiftInfo = ( info : ShiftVO ) => {
function handleShiftInfo ( info : ShiftVO ) {
if ( info ) {
settingData . shiftId = info . id
shiftInfo . value = info ;
weekday Data. value . forEach ( item => {
item . shiftI d = info . id
setting Data. weekdayData . forEach ( item => {
item . i d = info . id
let str = ''
if ( info . isRest ) {
str = ` ${ info . name } : ${ info . startTime } ~ ${ info . restStartTime } ${ info . restEndTime } ~ ${ info . endTime } ` ;
@@ -165,102 +197,105 @@ const handleShiftInfo = (info: ShiftVO) => {
str = ` ${ info . name } : ${ info . startTime } ~ ${ info . endTime } ` ;
}
item . shiftValue = str
item . isRest = false
item . isRest = 0
} )
}
} ;
}
const handleShiftList = ( list : any [ ] ) => {
function handleShiftList ( list : any [ ] ) {
shiftList . value = list ;
} ;
}
const cycleData = ref < any [ ] > ( [ ] )
const unCheckInData = ref < any [ ] > ( [ ] )
const checkInData = ref < any [ ] > ( [ ] )
async function addCycleHandle ( ) {
if ( cycleData . value . length < 31 ) {
cycleData.value.push ( {
shiftId : ' ' ,
function addCycleHandle ( ) {
if ( settingData . cycleData . length < 31 ) {
settingData . cycleData . push ( {
id : '' ,
} )
} else {
} else {
message . warning ( '周期天数最多31天。' ) ;
}
}
async function deleteCycleHandle ( index: number ) {
if( cycleData.value. length >2 ) {
cycle Data. value . splice ( index , 1 )
} else {
function deleteCycleHandle ( index: number ) {
if ( settingData . cycleData. length > 2 ) {
setting Data. cycleData . splice ( index , 1 )
} else {
message . warning ( '周期天数最少2天。' ) ;
}
}
async function deleteUnCheckInHandle ( index : number ) {
unCheckInData. value . splice ( index , 1 )
function deleteUnCheckInHandle ( index : number ) {
settingData . unCheckInData. splice ( index , 1 )
}
async function deleteCheckInHandle ( index : number ) {
checkIn Data. value . splice ( index , 1 )
function deleteCheckInHandle ( index : number ) {
setting Data. checkInData . splice ( index , 1 )
}
const tableIndex = ref ( - 1 )
async function changeShiftHandle ( type : number , index : number ) {
function changeShiftHandle ( type : number , index : number ) {
tableIndex . value = index
shiftApi . setData ( { type } ) //3.更改班次
shiftApi . open ( )
}
async function restHandle ( index : number ) {
weekday Data. value [ index ] . isRest = true
weekday Data. value [ index ] . shiftValue = '休息'
function restHandle ( index : number ) {
setting Data. weekdayData [ index ] . isRest = 1
setting Data. weekdayData [ index ] . shiftValue = '休息'
settingData . weekdayData [ index ] . id = null
}
const handleAfterValue = ( val : ShiftVO ) => {
function handleAfterValue ( val : ShiftVO ) {
if ( tableIndex . value > - 1 && val ) {
weekday Data. value [ tableIndex . value ] . shiftI d = val . id
setting Data. weekdayData [ tableIndex . value ] . i d = val . id
let str = ''
if ( val . isRest ) {
str = ` ${ val . name } : ${ val . startTime } ~ ${ val . restStartTime } ${ val . restEndTime } ~ ${ val . endTime } ` ;
} else {
str = ` ${ val . name } : ${ val . startTime } ~ ${ val . endTime } ` ;
}
weekday Data. value [ tableIndex . value ] . shiftValue = str
weekday Data. value [ tableIndex . value ] . isRest = false
setting Data. weekdayData [ tableIndex . value ] . shiftValue = str
setting Data. weekdayData [ tableIndex . value ] . isRest = 0
}
} ;
}
const closeHandle = ( i : number ) => {
function closeTag Handle ( i : number ) {
shiftList . value . splice ( i , 1 )
} ;
}
const checkInIndex = ref ( - 1 )
async function addCheckInHandle ( index : number ) {
function addCheckInHandle ( index : number ) {
checkInIndex . value = index
checkInDateApi . setData ( { check : true } )
checkInDateApi . open ( )
}
const getCheckInData = ( val : any ) => {
function getCheckInData ( val : any ) {
if ( val ) {
checkIn Data. value . push ( val )
setting Data. checkInData . push ( {
... val ,
mustNoCheck : 1
} )
}
}
const unCheckInIndex = ref ( - 1 )
async function addUnCheckInHandle ( index : number ) {
function addUnCheckInHandle ( index : number ) {
unCheckInIndex . value = index
checkInDateApi . setData ( { check : false } )
checkInDateApi . open ( )
}
const getUnCheckInData = ( val : any ) => {
function getUnCheckInData ( val : any ) {
if ( val ) {
unCheckInData . value . push( val )
settingData . unCheckInData. push ( {
... val ,
mustNoCheck : 0
} )
}
}
@@ -268,7 +303,7 @@ const getUnCheckInData = (val: any) => {
< template >
< BasicModal :title = "title+'考勤组'" >
< BasicForm >
< BasicForm class = "form-content" >
< template # weekdaySetting >
< div class = "item-font" >
< span > 快捷设置班次 : < / span >
@@ -287,7 +322,8 @@ const getUnCheckInData = (val: any) => {
< / template >
< template # settingItem >
< div class = "item-font" style = "width: 100%;" >
< Table style = "width: 90%" bordered :columns = "weekdayColumns" :data-source = "weekdayData"
< Table style = "width: 90%" bordered :columns = "weekdayColumns"
:data-source = "settingData.weekdayData"
size = "small" :pagination = "false" >
< template # bodyCell = "{ column, record,index }" >
< template v-if = "column.dataIndex==='action'" >
@@ -306,7 +342,7 @@ const getUnCheckInData = (val: any) => {
< p class = "item-padding-top item-font-weight" > 特殊日期 : < / p >
< p class = "item-padding" > 无需打卡日期 : < / p >
< Table style = "width: 75%" bordered :columns = "noClockingColumns"
:data-source = "unCheckInData"
:data-source = "settingData. unCheckInData"
size = "small" :pagination = "false" >
< template # headerCell = "{ column }" >
< template v-if = "column.dataIndex === 'action'" >
@@ -329,7 +365,8 @@ const getUnCheckInData = (val: any) => {
< / template >
< / Table >
< p class = "item-padding" > 必须打卡日期 : < / p >
< Table style = "width: 75%" bordered :columns = "clockingColumns" :data-source = "checkInData"
< Table style = "width: 75%" bordered :columns = "clockingColumns"
:data-source = "settingData.checkInData"
size = "small" :pagination = "false" >
< template # headerCell = "{ column }" >
< template v-if = "column.dataIndex === 'action'" >
@@ -354,24 +391,26 @@ const getUnCheckInData = (val: any) => {
< / div >
< / template >
< template # attendanceShift >
< Button size = "small" @click ="shiftScheduleHandle(2)" type = "primary" > 选择班次 < / Button >
< Button @click ="shiftScheduleHandle(2)" type = "primary" > 选择班次 < / Button >
< Alert type = "info" message = "请优先选择班次" banner / >
< / template >
< template # shiftData >
< div v-if = "shiftList" >
< Tag closable color = "processing" v-for = "(item,i) in shiftList" @close="closeHandle(i)" >
< Tag closable color = "processing" v-for = "(item,i) in shiftList" @close="closeTag Handle(i)" >
{{ item.name }}
< / Tag >
< / div >
< / template >
< template # schedulingCycle >
< span class = "item-font" > 周期天数
< span class = "item-font-weight item-font-color" > { { cycleData . length } } < / span >
< span class = "item-font-weight item-font-color" > { { settingData . cycleData. length } } < / span >
天
< span style = "color:#b2b0b0;" > ( 周期最少2天 , 最多31天 ) < / span >
< / span >
< / template >
< template # cycleData >
< Table style = "width: 80%" bordered :columns = "cycleColumns" :data-source = "cycleData"
< Table style = "width: 80%" bordered :columns = "cycleColumns"
:data-source = "settingData.cycleData"
size = "small" :pagination = "false" >
< template # headerCell = "{ column }" >
< template v-if = "column.dataIndex === 'action'" >
@@ -399,7 +438,9 @@ const getUnCheckInData = (val: any) => {
< SelectOption v-for = "item in shiftList" :value="item.id" >
{{ item.name + ' \ xa0 ' }}
< span
v-if = "item.isRest" > {{ item.startTime + ' ~ ' + item.restStartTime + ' \ xa0 ' + item.restEndTime + ' ~ ' + item.endTime }} < / span >
v-if = "item.isRest" > {{
item.startTime + ' ~ ' + item.restStartTime + ' \ xa0 ' + item.restEndTime + ' ~ ' + item.endTime
}} < / span >
< span v-else > {{ item.startTime + ' ~ ' + item.endTime }} < / span >
< / SelectOption >
< / Select >
@@ -419,24 +460,32 @@ const getUnCheckInData = (val: any) => {
< / BasicModal >
< / template >
< style lang = "scss" scoped >
. ite m- fo nt {
font - size : 0.875 rem ;
. for m- conte nt {
. item - font {
font - size : 0.875 rem ;
}
. item - font - weight {
font - weight : 500 ;
}
. item - font - color {
color : red ;
}
. item - padding - top {
padding - top : 1.1 rem ;
}
. item - padding {
padding : 1.1 rem 0 0.5 rem 0 ;
}
: deep ( . ant - alert ) {
padding : 5 px 12 px ;
margin - left : 20 px ;
}
}
. item - font - weight {
font - weight : 500 ;
}
. item - font - color {
color : red ;
}
. item - padding - top {
padding - top : 1.1 rem ;
}
. item - padding {
padding : 1.1 rem 0 0.5 rem 0 ;
}
< / style >