zhengyiming
5 天以前 fbb9fdb5b11cd5ecd3ff19f41738bbd3b0afb82c
apps/cMiniApp/src/subpackages/task/taskSubmitCheck/InnerPage.vue
@@ -1,50 +1,123 @@
<template>
  <ContentScrollView :paddingH="false">
    <nut-form :model-value="form" ref="formRef" :rules="rules">
      <nut-form-item label="上传照片:" class="bole-form-item alignTop" prop="imgUrl" required>
        <Uploader
          v-model:file-list="form.imgUrl"
          :maximum="9"
          :limitFileSize="10"
          class="bole-uploader nopaddingtop"
  <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch">
    <ContentScrollView :paddingH="false">
      <nut-form :model-value="form" ref="formRef" :rules="rules">
        <nut-form-item label="上传照片:" class="bole-form-item alignTop" prop="files" required>
          <Uploader
            v-model:file-list="form.files"
            :maximum="9"
            :limitFileSize="10"
            class="bole-uploader nopaddingtop"
            :sourceType="['camera']"
          >
          </Uploader>
        </nut-form-item>
      </nut-form>
    </ContentScrollView>
    <PageFooter :isOnlyAction="false">
      <template v-if="isContainCheckIn">
        <PageFooterBtn type="primary" v-if="!detail.userCheckHistoryType" @click="handleCheckIn()"
          >签到</PageFooterBtn
        >
        </Uploader>
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
  <PageFooter :isOnlyAction="false">
    <PageFooterBtn type="primary" @click="handleSubmit()">提交</PageFooterBtn>
  </PageFooter>
        <PageFooterBtn
          v-else-if="detail.userCheckHistoryType === EnumTaskUserSubmitCheckHistoryType.CheckIn"
          type="primary"
          @click="handleCheckOut()"
          >签出</PageFooterBtn
        >
      </template>
      <PageFooterBtn v-else type="primary" @click="handleSubmit()">提交</PageFooterBtn>
    </PageFooter>
  </LoadingLayout>
</template>
<script setup lang="ts">
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
import { FormValidator } from '@12333/utils';
import { FormValidator, Message, OrderUtils, convertApiPath2Url } from '@12333/utils';
import * as taskCheckReceiveServices from '@12333/services/apiV2/taskCheckReceive';
import Taro from '@tarojs/taro';
import { goBack } from '@/utils';
import { useQueryClient } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { useCheckReceiveTaskUserSubmit } from '@12333/hooks';
import { EnumTaskUserSubmitCheckHistoryType } from '@12333/constants';
defineOptions({
  name: 'InnerPage',
});
const route = Taro.useRouter();
const id = route.params?.id as string;
const date = route.params?.date as string;
const queryClient = useQueryClient();
const { isLoading, isError, detail, refetch, isContainCheckIn } = useCheckReceiveTaskUserSubmit({
  params: {
    taskInfoId: id,
    date: dayjs(date).format('YYYY-MM-DD'),
  },
  onSuccess(data) {
    if (data.files?.length > 0) {
      form.files = data.files.map(convertApiPath2Url);
    }
  },
});
const form = reactive({
  imgUrl: [] as FileItem[],
  files: [] as FileItem[],
});
const rules = reactive<FormRules>({
  imgUrl: [{ required: true, message: '请上传照片', validator: FormValidator.validatorArray }],
  files: [{ required: true, message: '请上传照片', validator: FormValidator.validatorArray }],
});
const formRef = ref<any>(null);
function handleCheckIn() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      submitCheckReceiveTask(EnumTaskUserSubmitCheckHistoryType.CheckIn);
    }
  });
}
function handleCheckOut() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      submitCheckReceiveTask(EnumTaskUserSubmitCheckHistoryType.CheckOut);
    }
  });
}
function handleSubmit() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      submitCheckReceiveTask();
    }
  });
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
</style>
async function submitCheckReceiveTask(userCheckHistoryType?: EnumTaskUserSubmitCheckHistoryType) {
  try {
    let params: API.SubmitCheckReceiveTaskCommand = {
      taskInfoId: id,
      date: dayjs(date).format('YYYY-MM-DD'),
      files: form.files.map((x) => x.path),
      userCheckHistoryType,
    };
    let res = await taskCheckReceiveServices.submitCheckReceiveTask(params);
    if (res) {
      Message.success('提交成功', {
        onClosed() {
          goBack();
          queryClient.invalidateQueries(['taskServices/getTaskInfo', id]);
        },
      });
    }
  } catch (error) {}
}
</script>