| | |
| | | <template> |
| | | <div class="task-check-card-wrapper"> |
| | | <div class="task-check-card-wrapper" @click.stop="emit('checkReceive')"> |
| | | <TaskCheckPersonalView |
| | | class="task-check-card-view" |
| | | :avatarUrl="avatarUrl" |
| | | :avatar="avatar" |
| | | :name="name" |
| | | :genderType="genderType" |
| | | :isRealName="isRealName" |
| | | :contactPhone="contactPhone" |
| | | :gender="gender" |
| | | :isReal="isReal" |
| | | :contactPhoneNumber="contactPhoneNumber" |
| | | > |
| | | <template #actions> |
| | | <nut-button |
| | | v-if="checkAcceptStatus === FlexTaskCheckAcceptStatusEnum.Wait" |
| | | type="primary" |
| | | class="task-check-card-phone-btn" |
| | | >验收</nut-button |
| | | > |
| | | <div v-else class="task-check-card-phone-status" :style="{ color: Colors.Success }"> |
| | | {{ FlexTaskCheckAcceptStatusEnumText[checkAcceptStatus] }} |
| | | </div> |
| | | <template v-if="checkReceiveMethod === EnumTaskCheckReceiveMethod.CheckIn"> |
| | | <!-- <nut-button |
| | | v-if="!checkInTime" |
| | | type="primary" |
| | | class="task-check-card-phone-btn" |
| | | @click.stop="emit('checkInOrOut', CheckInOrOutEventEnum.CheckIn)" |
| | | >签到</nut-button |
| | | > |
| | | <nut-button |
| | | v-else-if="!checkOutTime" |
| | | type="primary" |
| | | class="task-check-card-phone-btn" |
| | | @click.stop="emit('checkInOrOut', CheckInOrOutEventEnum.CheckOut)" |
| | | >签出</nut-button |
| | | > |
| | | <div v-else class="task-check-card-phone-status" :style="{ color: Colors.Success }"> |
| | | {{ EnumTaskCheckReceiveStatusText[checkReceiveStatus] }} |
| | | </div> --> |
| | | <nut-button type="primary" class="task-check-card-phone-btn" @click.stop="handleMore" |
| | | >操作</nut-button |
| | | > |
| | | </template> |
| | | <template v-else> |
| | | <nut-button |
| | | v-if="checkReceiveStatus === EnumTaskCheckReceiveStatus.WaitCheckReceive" |
| | | type="primary" |
| | | class="task-check-card-phone-btn" |
| | | >验收</nut-button |
| | | > |
| | | <div v-else class="task-check-card-phone-status" :style="{ color: Colors.Success }"> |
| | | {{ EnumTaskCheckReceiveStatusText[checkReceiveStatus] }} |
| | | </div> |
| | | </template> |
| | | </template> |
| | | </TaskCheckPersonalView> |
| | | </div> |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import TaskCheckPersonalView from './TaskCheckPersonalView.vue'; |
| | | import { Colors, Gender } from '@12333/constants'; |
| | | import { FlexTaskCheckAcceptStatusEnum, FlexTaskCheckAcceptStatusEnumText } from '@/constants/task'; |
| | | import { |
| | | Colors, |
| | | EnumUserGender, |
| | | EnumTaskCheckReceiveStatus, |
| | | EnumTaskCheckReceiveStatusText, |
| | | EnumTaskCheckReceiveMethod, |
| | | } from '@12333/constants'; |
| | | import { CheckInOrOutEventEnum } from '../constants'; |
| | | import { Portal } from 'senin-mini/components'; |
| | | import { ActionSheet } from '@nutui/nutui-taro'; |
| | | |
| | | defineOptions({ |
| | | name: 'TaskCheckCard', |
| | | }); |
| | | |
| | | enum ManageActions { |
| | | CheckIn = 1, |
| | | CheckOut, |
| | | OutWork, |
| | | } |
| | | |
| | | type Props = { |
| | | avatarUrl?: string; |
| | | avatar?: string; |
| | | name?: string; |
| | | genderType?: Gender; |
| | | isRealName?: boolean; |
| | | contactPhone?: string; |
| | | checkAcceptStatus?: API.FlexTaskCheckAcceptStatusEnum; |
| | | gender?: EnumUserGender; |
| | | isReal?: boolean; |
| | | contactPhoneNumber?: string; |
| | | checkReceiveStatus?: EnumTaskCheckReceiveStatus; |
| | | /** 签到时间 */ |
| | | checkInTime?: string; |
| | | /** 签出时间 */ |
| | | checkOutTime?: string; |
| | | checkReceiveMethod?: EnumTaskCheckReceiveMethod; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | |
| | | const emit = defineEmits<{ |
| | | (e: 'checkReceive'): void; |
| | | (e: 'checkInOrOut', ev: CheckInOrOutEventEnum): void; |
| | | }>(); |
| | | |
| | | const menuList = computed(() => { |
| | | let _menuList = []; |
| | | if (props.checkReceiveMethod === EnumTaskCheckReceiveMethod.CheckIn) { |
| | | _menuList.push( |
| | | { |
| | | name: '签到', |
| | | value: ManageActions.CheckIn, |
| | | }, |
| | | { |
| | | name: '签出', |
| | | value: ManageActions.CheckOut, |
| | | }, |
| | | { |
| | | name: '未到岗', |
| | | value: ManageActions.OutWork, |
| | | } |
| | | ); |
| | | } |
| | | |
| | | return _menuList; |
| | | }); |
| | | |
| | | function handleMore() { |
| | | Portal.add((key) => { |
| | | return h( |
| | | Portal.Container, |
| | | { keyNumber: key, delayOpen: true }, |
| | | { |
| | | default: ({ open, onClose }) => |
| | | // @ts-ignore |
| | | h(ActionSheet, { |
| | | visible: open.value, |
| | | 'onUpdate:visible': () => onClose(), |
| | | menuItems: menuList.value, |
| | | onChoose: (item) => { |
| | | handleEmit(item); |
| | | onClose(); |
| | | }, |
| | | }), |
| | | } |
| | | ); |
| | | }); |
| | | } |
| | | |
| | | function handleEmit(action: { name: string; value: number }) { |
| | | switch (action.value) { |
| | | case ManageActions.CheckIn: |
| | | emit('checkInOrOut', CheckInOrOutEventEnum.CheckIn); |
| | | break; |
| | | case ManageActions.CheckOut: |
| | | emit('checkInOrOut', CheckInOrOutEventEnum.CheckOut); |
| | | break; |
| | | case ManageActions.OutWork: |
| | | emit('checkInOrOut', CheckInOrOutEventEnum.CheckOut); |
| | | break; |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |