|  |  |  | 
|---|
|  |  |  | <ProForm :model="form" ref="productFormRef" label-width="110px" :is-read="isDetail"> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务名称:" prop="name"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="任务名称:" | 
|---|
|  |  |  | prop="name" | 
|---|
|  |  |  | :check-rules="[{ message: '请输入任务名称' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormText v-model.trim="form.name" placeholder="请输入任务名称" /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="服务费:" prop="billingMethod"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="服务费:" | 
|---|
|  |  |  | prop="billingMethod" | 
|---|
|  |  |  | :check-rules="[ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | validator: (rule, value, callback) => { | 
|---|
|  |  |  | if (!form.billingMethod) { | 
|---|
|  |  |  | callback(new Error('请选择服务费类型')); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (!form.serviceFee) { | 
|---|
|  |  |  | callback(new Error('请输入服务费')); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | callback(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <RadioWithExtra | 
|---|
|  |  |  | v-model="form.billingMethod" | 
|---|
|  |  |  | :value-enum="EnumBillingMethodText" | 
|---|
|  |  |  | 
|---|
|  |  |  | :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="name"> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.serviceFee" | 
|---|
|  |  |  | placeholder="请输入核定工时" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | :max="999999999999" | 
|---|
|  |  |  | unit="小时/天" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="超时服务费:" prop="name"> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.serviceFee" | 
|---|
|  |  |  | placeholder="请输入超时服务费" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | :max="999999999999" | 
|---|
|  |  |  | unit="元/小时" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="结算方式:" prop="settlementCycle"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="结算方式:" | 
|---|
|  |  |  | prop="settlementCycle" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择结算方式' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormRadio | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="年龄范围:" prop="ageRange" class="form-age-range"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="年龄范围:" | 
|---|
|  |  |  | prop="ageRange" | 
|---|
|  |  |  | class="form-age-range" | 
|---|
|  |  |  | :check-rules="[ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | validator: (rule, value, callback) => { | 
|---|
|  |  |  | if (!form.ageMinLimit) { | 
|---|
|  |  |  | callback(new Error('请输入年龄要求')); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (!form.ageMaxLimit) { | 
|---|
|  |  |  | callback(new Error('请输入年龄要求')); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (Number(form.ageMaxLimit) <= Number(form.ageMinLimit)) { | 
|---|
|  |  |  | callback(new Error('最大年龄不能小于最小年龄')); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | callback(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="性别要求:" prop="genderLimit"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="性别要求:" | 
|---|
|  |  |  | prop="genderLimit" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择性别要求' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormRadio | 
|---|
|  |  |  | v-model="form.genderLimit" | 
|---|
|  |  |  | :value-enum="EnumUserGenderTextForEdit" | 
|---|
|  |  |  | show-all-btn | 
|---|
|  |  |  | :all-btn-label="'不限'" | 
|---|
|  |  |  | :allBtnValue="0" | 
|---|
|  |  |  | ></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务地点:" prop="weMapInfo"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="任务地点:" | 
|---|
|  |  |  | prop="weMapInfo" | 
|---|
|  |  |  | :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"> | 
|---|
|  |  |  | <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="time"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务描述:" prop="addressDetail"> | 
|---|
|  |  |  | <ProFormTextArea | 
|---|
|  |  |  | :rows="4" | 
|---|
|  |  |  | v-model.trim="form.addressDetail" | 
|---|
|  |  |  | placeholder="请输入任务描述" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="任务时间:" | 
|---|
|  |  |  | prop="time" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择任务时间', type: 'array' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormDatePicker | 
|---|
|  |  |  | v-model="form.time" | 
|---|
|  |  |  | type="daterange" | 
|---|
|  |  |  | range-separator="至" | 
|---|
|  |  |  | start-placeholder="开始日期" | 
|---|
|  |  |  | end-placeholder="结束日期" | 
|---|
|  |  |  | :disabled-date="disabledDate" | 
|---|
|  |  |  | ></ProFormDatePicker> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="报名时间:" | 
|---|
|  |  |  | prop="time" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择报名时间', type: 'array' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormDatePicker | 
|---|
|  |  |  | v-model="form.time" | 
|---|
|  |  |  | type="daterange" | 
|---|
|  |  |  | range-separator="至" | 
|---|
|  |  |  | start-placeholder="开始日期" | 
|---|
|  |  |  | end-placeholder="结束日期" | 
|---|
|  |  |  | :disabled-date="disabledDate" | 
|---|
|  |  |  | ></ProFormDatePicker> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 | 
|---|
|  |  |  | label="验收方式:" | 
|---|
|  |  |  | prop="genderLimit" | 
|---|
|  |  |  | :check-rules="[{ message: '请选择验收方式' }]" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <ProFormRadio v-model="form.genderLimit" :value-enum="[]"></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | } from '@/constants'; | 
|---|
|  |  |  | import { format } from '@/utils'; | 
|---|
|  |  |  | import { format, FormValidator } from '@/utils'; | 
|---|
|  |  |  | import dayjs from 'dayjs'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | 
|---|
|  |  |  | const id = route.params.id as string; | 
|---|
|  |  |  | const isEdit = !!id; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function disabledDate(time: Date) { | 
|---|
|  |  |  | return dayjs(time).isBefore(dayjs(), '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: '' as any as EnumBillingMethod, | 
|---|
|  |  |  | serviceFee: 0, | 
|---|
|  |  |  | settlementCycle: '' as any as EnumSettlementCycle, | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | enabled: isEdit, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleSettlementCycleChange() { | 
|---|
|  |  |  | form.settlementDate = null as number; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleBack() { | 
|---|
|  |  |  | closeViewPush(route, { | 
|---|
|  |  |  | name: 'EmploymentManageList', | 
|---|
|  |  |  | name: 'TaskManageList', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const productFormRef = ref<FormInstance>(); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | 
|---|
|  |  |  | let res = await taskServices.saveTaskInfo(params); | 
|---|
|  |  |  | if (res) { | 
|---|
|  |  |  | Message.successMessage('操作成功'); | 
|---|
|  |  |  | eventContext.emit(isEdit ? 'employment:edit' : 'employment:add'); | 
|---|
|  |  |  | eventContext.emit(isEdit ? 'taskManage:edit' : 'taskManage:add'); | 
|---|
|  |  |  | handleBack(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } catch (error) {} | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|