fix: bug

zhengyiming

2 天以前 6dcaf1eec6c8e0326c27e8e7726e3d976e5b1026

 apps/bMiniApp/src/subpackages/task/taskHandleCheckDetail/InnerPage.vue

@@ -3,92 +3,227 @@
    <ContentScrollView style="background-color: #fff">
      <div class="personal-info-wrapper">
        <TaskCheckPersonalView
          :avatarUrl="setOSSLink(detail.avatarUrl)"
          :name="detail.name"
          :isRealName="detail.isRealName"
          :contactPhone="detail.contactPhone"
          :avatarUrl="setOSSLink(detail?.enterpriseEmployeeUser?.avatar)"
          :name="detail?.enterpriseEmployeeUser?.name"
          :isReal="detail?.enterpriseEmployeeUser?.isReal"
          :contactPhoneNumber="detail?.enterpriseEmployeeUser?.contactPhoneNumber"
        />
      </div>
      <div class="taskCheckDetail-status-wrapper">
        <div class="taskCheckDetail-status-title">验收照片</div>
      </div>
      <div class="taskCheckDetail-time">
        {{ dayjs(detail.appleCheckTime).format('YYYY.MM.DD HH:mm:ss') }}
      </div>
      <nut-grid
        square
        :column-num="3"
        :border="false"
        :gutter="20"
        v-if="list.length > 0"
        class="pro-img-grid"
      >
        <nut-grid-item
          v-for="(item, index) in detail.checkImageUrl"
          :key="index"
          class="pro-img-grid-item"
        >
          <div class="pro-img-grid-img-item">
            <PreviewImage :src="item" class="pro-img-grid-img" :urls="list" />
          </div>
        </nut-grid-item>
      </nut-grid>
      <div class="taskCheckFileCard-status-title">验收详情</div>
      <TaskCheckFileCard
        :created-time="detail?.createdTime"
        :userCheckInTime="detail?.userCheckInTime"
        :userCheckOutTime="detail?.userCheckOutTime"
        :checkInTime="detail?.checkInTime"
        :checkOutTime="detail?.checkOutTime"
        :checkReceiveMethods="detail?.checkReceiveMethods"
        :files="detail?.files?.map((x) => setOSSLink(x))"
        userCheckLabelPrefix="用户"
        showCheckTime
      ></TaskCheckFileCard>
    </ContentScrollView>
    <PageFooter>
      <PageFooterBtn type="primary" :color="Colors.Info" class="dark-btn">验收未通过</PageFooterBtn>
      <PageFooterBtn type="primary">验收通过</PageFooterBtn>
      <PageFooterBtn
        type="primary"
        :color="Colors.Info"
        class="dark-btn"
        @click="openDialog(detail?.checkInTime ?? '')"
        >修改服务费</PageFooterBtn
      >
      <PageFooterBtn type="primary" @click="checkReceiveTask()">验收</PageFooterBtn>
    </PageFooter>
    <nut-popup v-model:visible="dialogVisible">
      <div class="payroll-form-wrapper">
        <nut-form :model-value="form" ref="formRef">
          <nut-form-item
            label="服务费:"
            class="bole-form-item"
            prop="serviceFee"
            label-width="90px"
          >
            <div class="bole-form-input-wrapper">
              <NumberInput
                v-model.trim="form.serviceFee"
                class="nut-input-text bole-input-text"
                placeholder="请输入服务费"
                :min="0"
                :max="999999999999"
                :precision="2"
                type="text"
                disabled
              />
              <div class="form-input-unit">元</div>
            </div>
          </nut-form-item>
          <nut-form-item
            label="超时:"
            class="bole-form-item"
            prop="timeoutHours"
            label-width="90px"
          >
            <div class="bole-form-input-wrapper">
              <NumberInput
                v-model.trim="form.timeoutHours"
                class="nut-input-text bole-input-text"
                placeholder="请输入超时时长"
                :min="0"
                :max="999999999999"
                :precision="2"
                type="text"
                @change="onTimeoutHoursChange"
              />
              <div class="form-input-unit">小时</div>
            </div>
          </nut-form-item>
          <nut-form-item
            label="超时费用:"
            class="bole-form-item"
            prop="timeoutFee"
            label-width="90px"
          >
            <div class="bole-form-input-wrapper">
              <NumberInput
                v-model.trim="form.timeoutFee"
                class="nut-input-text bole-input-text"
                placeholder="请输入超时费用"
                :min="0"
                :max="999999999999"
                :precision="2"
                type="text"
              />
              <div class="form-input-unit">元</div>
            </div>
          </nut-form-item>
          <nut-form-item
            label="其他费用:"
            class="bole-form-item"
            prop="otherFee"
            label-width="90px"
          >
            <div class="bole-form-input-wrapper">
              <NumberInput
                v-model.trim="form.otherFee"
                class="nut-input-text bole-input-text"
                placeholder="请输入其他费用"
                :max="999999999999"
                :precision="2"
                type="text"
              />
              <div class="form-input-unit">元</div>
            </div>
          </nut-form-item>
          <nut-form-item
            label="结算金额:"
            class="bole-form-item"
            prop="settlementAmount"
            label-width="90px"
          >
            {{ `${settlementAmount}元` }}
          </nut-form-item>
          <nut-form-item
            label="备注:"
            class="bole-form-item alignTop"
            prop="remark"
            label-width="90px"
          >
            <nut-textarea v-model="form.remark" rows="4" placeholder="请输入备注"> </nut-textarea>
          </nut-form-item>
        </nut-form>
        <div class="payroll-form-footer">
          <nut-button @click="handleCancel">取消</nut-button>
          <nut-button type="primary" @click="handleConfirm">确认</nut-button>
        </div>
      </div>
    </nut-popup>
  </LoadingLayout>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { useQuery } from '@tanstack/vue-query';
import * as flexWorkerServices from '@12333/services/api/FlexWorker';
import TaskCheckPersonalView from '../components/TaskCheckPersonalView.vue';
import { PreviewImage } from '@12333/components';
import { Colors } from '@12333/constants';
import { setOSSLink } from '@12333/utils';
import * as taskCheckReceiveServices from '@12333/services/apiV2/taskCheckReceive';
import { TaskCheckFileCard, TaskCheckPersonalView, NumberInput } from '@12333/components';
import { Colors, EnumTaskUserSubmitCheckReceiveStatus } from '@12333/constants';
import { Message, setOSSLink } from '@12333/utils';
import dayjs from 'dayjs';
import { goBack } from '@/utils';
import { useCheckReceiveTaskUserSubmit } from '@12333/hooks';
import { useSettlementAmount } from '../hooks';

defineOptions({
  name: 'InnerPage',
});

const router = Taro.useRouter();
const taskId = router.params?.taskId ?? '';
const userId = router.params?.userId ?? '';
const id = router.params?.id ?? '';
const taskInfoId = router.params?.taskInfoId ?? '';
const date = router.params?.date ?? '';

const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['flexWorkerServices/getOrdeForDetail', taskId],
  queryFn: async () => {
    return await flexWorkerServices.getFlexTaskWorkerCheckContentDto(
      { flexTaskId: taskId, flexWorkerId: userId },
      {
        showLoading: false,
      }
    );
const { isLoading, isError, detail, refetch } = useCheckReceiveTaskUserSubmit({
  params: {
    taskInfoUserId: id,
    date: dayjs(date).format('YYYY-MM-DD'),
  },
  placeholderData: () => ({} as API.GetTaskWorkerCheckContentOutput),
});

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
]);
const {
  dialogVisible,
  form,
  settlementAmount,
  handleCancel,
  openDialog,
  handleConfirm,
  onTimeoutHoursChange,
} = useSettlementAmount({
  taskInfoUserId: id,
  id: taskInfoId,
  timeoutServiceFee: computed(() => detail.value?.timeoutServiceFee),
  date,
  onSuccess() {
    Message.success('提交成功', {
      onClosed() {
        goBack();
      },
    });
  },
});

async function checkReceiveTask() {
  try {
    let params: API.CheckReceiveTaskCommand = {
      id: detail.value?.id,
      checkReceiveStatus: EnumTaskUserSubmitCheckReceiveStatus.Success,
      // serviceFee: form.serviceFee,
      // timeoutHours: form.timeoutHours,
      // timeoutFee: form.timeoutFee,
      // otherFee: form.otherFee,
      // remark: form.remark,
      // settlementAmount: settlementAmount.value,
    };
    let res = await taskCheckReceiveServices.checkReceiveTask(params);
    if (res) {
      Message.success('提交成功', {
        onClosed() {
          goBack();
        },
      });
    }
  } catch (error) {}
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.taskHandleCheckDetail-page-wrapper {
  .taskCheckFileCard-status-title {
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 16px;
    color: boleGetCssVar('text-color', 'primary');
  }

  .personal-info-wrapper {
    padding-top: 52px;
    padding-bottom: 36px;
@@ -96,27 +231,28 @@
    margin-bottom: 22px;
  }

  .taskCheckDetail-status-wrapper {
  .bole-form-input-wrapper {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 16px;

    .taskCheckDetail-status-title {
      color: boleGetCssVar('text-color', 'primary');
      flex: 1;
      min-width: 0;
    }
  }

  .taskCheckDetail-time {
    font-weight: 400;
    font-size: 24px;
    color: boleGetCssVar('text-color', 'regular');
    line-height: 36px;
    margin-bottom: 22px;
  .form-input-unit {
    margin-left: 10px;
    color: boleGetCssVar('text-color', 'primary');
    flex-shrink: 0;
  }

  .payroll-form-wrapper {
    width: 600px;
  }

  .payroll-form-footer {
    padding: 10px 20px;
    text-align: center;

    .nut-button + .nut-button {
      margin-left: 20px;
    }
  }
}
</style>