|  |  |  | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.serviceFee" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | :max="999999999999" | 
|---|
|  |  |  | :unit="EnumBillingMethodUnitText[form.billingMethod]" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <template v-if="form.billingMethod === EnumBillingMethod.Hour"> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="核定工时:" prop="verifyWorkHours"> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.verifyWorkHours" | 
|---|
|  |  |  | placeholder="请输入核定工时" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | :max="999999999999" | 
|---|
|  |  |  | unit="小时/天" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="超时服务费:" prop="timeoutServiceFee"> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.timeoutServiceFee" | 
|---|
|  |  |  | placeholder="请输入超时服务费" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | :max="999999999999" | 
|---|
|  |  |  | unit="元/小时" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | 
|---|
|  |  |  | v-model="form.settlementCycle" | 
|---|
|  |  |  | :value-enum="EnumSettlementCycleText" | 
|---|
|  |  |  | :button-style="false" | 
|---|
|  |  |  | @change="handleSettlementCycleChange" | 
|---|
|  |  |  | ></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12" class="settlement-cycle-date-form-item"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | v-if="form.settlementCycle !== EnumSettlementCycle.Day" | 
|---|
|  |  |  | label="结算日期:" | 
|---|
|  |  |  | prop="settlementCycle" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择结算日期' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {{ EnumSettlementCycleDateText[form.settlementCycle] }} | 
|---|
|  |  |  | <ProFormSelect | 
|---|
|  |  |  | v-model="form.settlementDate" | 
|---|
|  |  |  | :value-enum="settlementDateList" | 
|---|
|  |  |  | :button-style="false" | 
|---|
|  |  |  | ></ProFormSelect> | 
|---|
|  |  |  | {{ '结算' }} | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | :min="1" | 
|---|
|  |  |  | :min="16" | 
|---|
|  |  |  | v-model="form.ageMinLimit" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | <div class="form-input-separator">至</div> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | :min="1" | 
|---|
|  |  |  | :min="16" | 
|---|
|  |  |  | v-model="form.ageMaxLimit" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | 岁 | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="任务地点:" | 
|---|
|  |  |  | prop="weMapInfo" | 
|---|
|  |  |  | :check-rules="[ | 
|---|
|  |  |  | { message: '请选择任务地点', validator: FormValidator.validatorWeMap }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择任务地点', type: 'weMap' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <WeMap v-if="!isDetail" v-model="form.weMapInfo" /> | 
|---|
|  |  |  | <div v-else> | 
|---|
|  |  |  | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="详细地址:" | 
|---|
|  |  |  | prop="addressDetail" | 
|---|
|  |  |  | :check-rules="[{ message: '请输入详细地址' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormText v-model.trim="form.addressDetail" placeholder="请输入详细地址" /> | 
|---|
|  |  |  | <ProFormItemV2 label="地点说明:" prop="addressDetail"> | 
|---|
|  |  |  | <ProFormText v-model.trim="form.addressDetail" placeholder="请输入地点说明" /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务描述:" prop="description"> | 
|---|
|  |  |  | <ProFormTextArea | 
|---|
|  |  |  | :rows="4" | 
|---|
|  |  |  | v-model.trim="form.description" | 
|---|
|  |  |  | placeholder="请输入任务描述" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="报名时间:" | 
|---|
|  |  |  | prop="applyTime" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择报名时间', type: 'array' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormDatePicker | 
|---|
|  |  |  | v-model="form.applyTime" | 
|---|
|  |  |  | type="daterange" | 
|---|
|  |  |  | range-separator="至" | 
|---|
|  |  |  | start-placeholder="开始日期" | 
|---|
|  |  |  | end-placeholder="结束日期" | 
|---|
|  |  |  | :disabled-date="disabledapplyDate" | 
|---|
|  |  |  | ></ProFormDatePicker> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="验收方式:" | 
|---|
|  |  |  | prop="checkReceiveMethod" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择验收方式' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormRadio | 
|---|
|  |  |  | v-model="form.checkReceiveMethod" | 
|---|
|  |  |  | :value-enum="EnumTaskCheckReceiveMethodText" | 
|---|
|  |  |  | :button-style="false" | 
|---|
|  |  |  | ></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="结算方式:" | 
|---|
|  |  |  | prop="settlementAccess" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择结算方式' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormSelect | 
|---|
|  |  |  | v-model="form.settlementAccess" | 
|---|
|  |  |  | :value-enum="EnumEnterpriseWalletAccessText" | 
|---|
|  |  |  | :disabled="isEdit" | 
|---|
|  |  |  | placeholder="请选择结算方式" | 
|---|
|  |  |  | ></ProFormSelect> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProForm> | 
|---|
|  |  |  | <template #footer> | 
|---|
|  |  |  | <el-button @click="handleBack()">关闭</el-button> | 
|---|
|  |  |  | 
|---|
|  |  |  | ProFormRadio, | 
|---|
|  |  |  | ProFormDatePicker, | 
|---|
|  |  |  | ProFormCheckbox, | 
|---|
|  |  |  | ProFormSelect, | 
|---|
|  |  |  | ProFormTextArea, | 
|---|
|  |  |  | } from '@bole-core/components'; | 
|---|
|  |  |  | import { FormInstance, ModelValueType } from 'element-plus'; | 
|---|
|  |  |  | import { Message } from '@bole-core/core'; | 
|---|
|  |  |  | 
|---|
|  |  |  | import * as taskServices from '@/services/api/task'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | EnumUserGenderTextForEdit, | 
|---|
|  |  |  | EnumBillingMethod, | 
|---|
|  |  |  | EnumBillingMethodText, | 
|---|
|  |  |  | EnumBillingMethodUnitText, | 
|---|
|  |  |  | EnumSettlementCycleText, | 
|---|
|  |  |  | EnumSettlementCycleDateText, | 
|---|
|  |  |  | EnumSettlementCycleDateMonthArray, | 
|---|
|  |  |  | EnumSettlementCycleDateWeekArray, | 
|---|
|  |  |  | EnumSettlementCycle, | 
|---|
|  |  |  | EnumTaskCheckReceiveMethodText, | 
|---|
|  |  |  | EnumEnterpriseWalletAccessText, | 
|---|
|  |  |  | } from '@/constants'; | 
|---|
|  |  |  | import { format, FormValidator } from '@/utils'; | 
|---|
|  |  |  | import dayjs from 'dayjs'; | 
|---|
|  |  |  | 
|---|
|  |  |  | return dayjs(time).isBefore(dayjs(), 'day'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function disabledapplyDate(time: Date) { | 
|---|
|  |  |  | return dayjs(time).isBefore(form.time[0], 'day'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const eventContext = useGlobalEventContext(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { closeViewPush } = useRouteView(); | 
|---|
|  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | const { dictionaryDataList: certificateTypeList } = useDictionaryDataSelect({ | 
|---|
|  |  |  | categoryCode: CategoryCode.CertificateType, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const settlementDateList = computed(() => { | 
|---|
|  |  |  | if (form.settlementCycle === EnumSettlementCycle.Month) { | 
|---|
|  |  |  | return EnumSettlementCycleDateMonthArray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (form.settlementCycle === EnumSettlementCycle.Week) { | 
|---|
|  |  |  | return EnumSettlementCycleDateWeekArray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return []; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const state = reactive({ | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const form = reactive({ | 
|---|
|  |  |  | name: '', | 
|---|
|  |  |  | billingMethod: EnumBillingMethod.Month, | 
|---|
|  |  |  | serviceFee: 0, | 
|---|
|  |  |  | settlementCycle: EnumSettlementCycle.Month, | 
|---|
|  |  |  | billingMethod: EnumBillingMethod.Day, | 
|---|
|  |  |  | serviceFee: null, | 
|---|
|  |  |  | settlementCycle: EnumSettlementCycle.Day, | 
|---|
|  |  |  | settlementDate: null as number, | 
|---|
|  |  |  | benefits: [] as string[], | 
|---|
|  |  |  | ageMinLimit: 0, | 
|---|
|  |  |  | ageMaxLimit: 0, | 
|---|
|  |  |  | ageMinLimit: null, | 
|---|
|  |  |  | ageMaxLimit: null, | 
|---|
|  |  |  | genderLimit: 0 as any as EnumUserGender, | 
|---|
|  |  |  | credentialLimits: [] as string[], | 
|---|
|  |  |  | time: [] as unknown as ModelValueType, | 
|---|
|  |  |  | weMapInfo: {} as WeMapModel, | 
|---|
|  |  |  | addressDetail: '', | 
|---|
|  |  |  | verifyWorkHours: null as number, | 
|---|
|  |  |  | timeoutServiceFee: null as number, | 
|---|
|  |  |  | description: '', | 
|---|
|  |  |  | checkReceiveMethod: '' as any as EnumTaskCheckReceiveMethod, | 
|---|
|  |  |  | applyTime: [] as unknown as ModelValueType, | 
|---|
|  |  |  | settlementAccess: '' as any as EnumEnterpriseWalletAccess, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { isLoading } = useQuery({ | 
|---|
|  |  |  | 
|---|
|  |  |  | form.billingMethod = data.billingMethod; | 
|---|
|  |  |  | form.serviceFee = data.serviceFee; | 
|---|
|  |  |  | form.settlementCycle = data.settlementCycle; | 
|---|
|  |  |  | form.settlementDate = data.settlementDate; | 
|---|
|  |  |  | form.benefits = data.benefits?.map((x) => x.benefitCode) ?? []; | 
|---|
|  |  |  | form.ageMinLimit = data.ageMinLimit; | 
|---|
|  |  |  | form.ageMaxLimit = data.ageMaxLimit; | 
|---|
|  |  |  | 
|---|
|  |  |  | form.time = [ | 
|---|
|  |  |  | format(data.beginTime, 'YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | format(data.endTime, 'YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  | form.applyTime = [ | 
|---|
|  |  |  | format(data.applyBeginTime, 'YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | format(data.applyEndTime, 'YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  | form.weMapInfo = { | 
|---|
|  |  |  | latitude: data.latitude, | 
|---|
|  |  |  | 
|---|
|  |  |  | addressName: data.addressName, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | form.addressDetail = data.addressDetail; | 
|---|
|  |  |  | form.verifyWorkHours = data.verifyWorkHours; | 
|---|
|  |  |  | form.timeoutServiceFee = data.timeoutServiceFee; | 
|---|
|  |  |  | form.description = data.description; | 
|---|
|  |  |  | form.checkReceiveMethod = data.checkReceiveMethod; | 
|---|
|  |  |  | form.applyTime = [ | 
|---|
|  |  |  | format(data.applyBeginTime, 'YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | format(data.applyEndTime, 'YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  | form.settlementAccess = data.settlementAccess; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | enabled: isEdit, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleSettlementCycleChange() { | 
|---|
|  |  |  | form.settlementDate = null as number; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleBack() { | 
|---|
|  |  |  | closeViewPush(route, { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | async function submit() { | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | console.log('form.weMapInfo: ', form.weMapInfo); | 
|---|
|  |  |  | let params: API.SaveTaskInfoCommand = { | 
|---|
|  |  |  | name: form.name, | 
|---|
|  |  |  | billingMethod: form.billingMethod, | 
|---|
|  |  |  | serviceFee: form.serviceFee, | 
|---|
|  |  |  | settlementCycle: form.settlementCycle, | 
|---|
|  |  |  | settlementDate: form.settlementDate ? form.settlementDate : 0, | 
|---|
|  |  |  | benefits: form.benefits, | 
|---|
|  |  |  | ageMinLimit: form.ageMinLimit, | 
|---|
|  |  |  | ageMaxLimit: form.ageMaxLimit, | 
|---|
|  |  |  | 
|---|
|  |  |  | latitude: form.weMapInfo.latitude, | 
|---|
|  |  |  | beginTime: dayjs(form.time[0]).format('YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | endTime: dayjs(form.time[1]).format('YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | applyBeginTime: dayjs(form.applyTime[0]).format('YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | applyEndTime: dayjs(form.applyTime[1]).format('YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | verifyWorkHours: form.verifyWorkHours, | 
|---|
|  |  |  | timeoutServiceFee: form.timeoutServiceFee, | 
|---|
|  |  |  | description: form.description, | 
|---|
|  |  |  | checkReceiveMethod: form.checkReceiveMethod, | 
|---|
|  |  |  | settlementAccess: form.settlementAccess, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | if (isEdit) { | 
|---|
|  |  |  | params.id = id; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .settlement-cycle-date-form-item { | 
|---|
|  |  |  | color: inherit; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .el-form-item__content { | 
|---|
|  |  |  | flex-wrap: nowrap; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .el-select { | 
|---|
|  |  |  | margin: 0 20px; | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pro-from-item-read-content-wrapper { | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|