<template> 
 | 
  <ContentScrollView :paddingH="false"> 
 | 
    <nut-form :model-value="form" ref="formRef" :rules="rules"> 
 | 
      <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" 
 | 
            @change="onActualSettlementAmountChange" 
 | 
          /> 
 | 
          <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" 
 | 
            @change="onActualSettlementAmountChange" 
 | 
          /> 
 | 
          <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> 
 | 
  </ContentScrollView> 
 | 
  <PageFooter> 
 | 
    <PageFooterBtn type="primary" @click="handleConfirm">确认修改</PageFooterBtn> 
 | 
  </PageFooter> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; 
 | 
import { NumberInput } from '@12333/components'; 
 | 
import { FormValidator, Message } from '@12333/utils'; 
 | 
import * as userServices from '@12333/services/apiV2/user'; 
 | 
import { EnumEnterpriseWalletAccess, EnumUserBankCardAccess } from '@12333/constants'; 
 | 
import { goBack } from '@/utils'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import * as taskUserServices from '@12333/services/apiV2/taskUser'; 
 | 
import { useQuery } from '@tanstack/vue-query'; 
 | 
import * as taskServices from '@12333/services/apiV2/task'; 
 | 
import { useEventChannel } from 'senin-mini/hooks'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const router = Taro.useRouter(); 
 | 
//结算单id 
 | 
const settleId = router.params?.settleId ?? ''; 
 | 
//人员id 
 | 
const orderRosterId = router.params?.orderRosterId ?? ''; 
 | 
const operatorToken = router.params?.operatorToken ?? ''; 
 | 
  
 | 
const { isLoading, refetch } = useQuery({ 
 | 
  queryKey: ['taskUserServices/getSettlementTaskUsers', settleId, operatorToken], 
 | 
  queryFn: async () => { 
 | 
    let params: API.APIgetSettlementTaskUsersParams = { 
 | 
      id: settleId, 
 | 
      operatorToken: operatorToken, 
 | 
    }; 
 | 
  
 | 
    return await taskUserServices.getSettlementTaskUsers(params, { 
 | 
      showLoading: false, 
 | 
    }); 
 | 
  }, 
 | 
  placeholderData: () => ({} as API.GetSettlementTaskUsersQueryResult), 
 | 
  onSuccess(res) { 
 | 
    const settlementTaskUser = res.data.find((x) => x.id === orderRosterId); 
 | 
    if (res?.detail) { 
 | 
      form.serviceFee = settlementTaskUser?.serviceFee ?? 0; 
 | 
      form.actualSettlementAmount = settlementTaskUser?.actualSettlementAmount ?? 0; 
 | 
      form.settlementAmount = settlementTaskUser?.settlementAmount ?? 0; 
 | 
      form.receiveAccount = settlementTaskUser?.receiveAccount ?? ''; 
 | 
      form.bank = settlementTaskUser?.bank ?? ''; 
 | 
      form.settlementAccess = res?.detail?.settlementAccess; 
 | 
      form.timeoutServiceFee = res?.detail?.timeoutServiceFee ?? 0; 
 | 
      form.timeoutHours = settlementTaskUser?.timeoutHours ?? ('' as any as number); 
 | 
      form.timeoutFee = settlementTaskUser?.timeoutFee ?? ('' as any as number); 
 | 
      form.otherFee = settlementTaskUser?.otherFee ?? ('' as any as number); 
 | 
      form.remark = settlementTaskUser?.remark ?? ''; 
 | 
  
 | 
      // form.settlementOrderName = setOssFileName(res?.detail?.settlementOrderName); 
 | 
      // form.settlementOrderTime = res?.detail?.settlementOrderTime ?? ''; 
 | 
    } 
 | 
  }, 
 | 
}); 
 | 
  
 | 
const form = reactive({ 
 | 
  settlementAmount: '' as any as number, 
 | 
  serviceFee: '' as any as number, 
 | 
  actualSettlementAmount: '' as any as number, 
 | 
  receiveAccount: '', 
 | 
  bank: '', 
 | 
  settlementAccess: EnumEnterpriseWalletAccess.PingAnPay, 
 | 
  timeoutServiceFee: 0, 
 | 
  timeoutHours: '' as any as number, 
 | 
  timeoutFee: '' as any as number, 
 | 
  otherFee: '' as any as number, 
 | 
  remark: '', 
 | 
}); 
 | 
  
 | 
const settlementAmount = computed(() => sumSettlementAmount()); 
 | 
  
 | 
function sumSettlementAmount() { 
 | 
  return ( 
 | 
    getFeeValue(Number(form.timeoutFee ?? 0)) + 
 | 
    getFeeValue(Number(form.serviceFee ?? 0)) + 
 | 
    getFeeValue(Number(form.otherFee ?? 0)) 
 | 
  ); 
 | 
} 
 | 
  
 | 
function getFeeValue(val: number) { 
 | 
  return val || 0; 
 | 
} 
 | 
  
 | 
const rules = reactive<FormRules>({ 
 | 
  code: [ 
 | 
    { required: true, message: '请输入银行卡号' }, 
 | 
    { message: '请输入正确的银行卡号', validator: FormValidator.validatorBankCard }, 
 | 
  ], 
 | 
  bank: [{ required: true, message: '请输入开户行' }], 
 | 
  phoneNumber: [ 
 | 
    { required: true, message: '请填写手机号码' }, 
 | 
    { message: '请输入正确的手机号码', validator: FormValidator.validatorPhoneNumber }, 
 | 
  ], 
 | 
  verifyCode: [{ required: true, message: '请输入验证码' }], 
 | 
}); 
 | 
  
 | 
function onTimeoutHoursChange(event: any) { 
 | 
  form.timeoutFee = Number(form.timeoutServiceFee) 
 | 
    ? form.timeoutServiceFee * event.detail.value 
 | 
    : 0; 
 | 
  onActualSettlementAmountChange(); 
 | 
} 
 | 
  
 | 
function onActualSettlementAmountChange() { 
 | 
  //暂时注掉 
 | 
  // form.actualSettlementAmount = sumSettlementAmount(); 
 | 
} 
 | 
  
 | 
const formRef = ref<any>(null); 
 | 
function handleConfirm() { 
 | 
  if (!formRef.value) return; 
 | 
  formRef.value.validate().then(({ valid, errors }: any) => { 
 | 
    if (valid) { 
 | 
      confirm(); 
 | 
    } 
 | 
  }); 
 | 
} 
 | 
  
 | 
const eventChannel = useEventChannel(); 
 | 
  
 | 
async function confirm() { 
 | 
  let params: API.EditTaskSettlementOrderRosterCommand = { 
 | 
    id: orderRosterId, 
 | 
    settlementAmount: settlementAmount.value, 
 | 
    actualSettlementAmount: settlementAmount.value, 
 | 
    receiveAccount: form.receiveAccount, 
 | 
    bank: form.bank, 
 | 
    // totalWorkHours: editForm.totalWorkHours, 
 | 
    // bankBranch: editForm.bankBranch, 
 | 
    serviceFee: Number(form.serviceFee), 
 | 
    timeoutHours: Number(form.timeoutHours), 
 | 
    timeoutFee: Number(form.timeoutFee), 
 | 
    otherFee: Number(form.otherFee), 
 | 
    remark: form.remark, 
 | 
  }; 
 | 
  // try { 
 | 
  //   let params: API.EditTaskSettlementOrderRosterCommand = { 
 | 
  //     id: orderRosterId, 
 | 
  //     settlementAmount: settlementAmount.value, 
 | 
  //     actualSettlementAmount: form.actualSettlementAmount, 
 | 
  //     receiveAccount: form.receiveAccount, 
 | 
  //     bank: form.bank, 
 | 
  //     // totalWorkHours: editForm.totalWorkHours, 
 | 
  //     // bankBranch: editForm.bankBranch, 
 | 
  //     serviceFee: form.serviceFee, 
 | 
  //     timeoutHours: form.timeoutHours, 
 | 
  //     timeoutFee: form.timeoutFee, 
 | 
  //     otherFee: form.otherFee, 
 | 
  //     remark: form.remark, 
 | 
  //   }; 
 | 
  //   let res = await taskServices.editTaskSettlementOrderRoster(params); 
 | 
  //   if (res) { 
 | 
  //     Message.success('修改成功', { 
 | 
  //       onClosed() { 
 | 
  //         goBack(); 
 | 
  //       }, 
 | 
  //     }); 
 | 
  //     eventChannel.emit('update'); 
 | 
  //   } 
 | 
  // } catch (error) {} 
 | 
  eventChannel.emit('update', params); 
 | 
  goBack(); 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.payrollChange-page-wrapper { 
 | 
  .bole-form-input-wrapper { 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
  } 
 | 
  
 | 
  .form-input-unit { 
 | 
    margin-left: 10px; 
 | 
    color: boleGetCssVar('text-color', 'primary'); 
 | 
    flex-shrink: 0; 
 | 
  } 
 | 
} 
 | 
</style> 
 |