|  |  |  | 
|---|
|  |  |  | <LoadingLayout :loading="isLoading"> | 
|---|
|  |  |  | <AppContainer> | 
|---|
|  |  |  | <PageFormLayout> | 
|---|
|  |  |  | <ProForm :model="detail" ref="formRef" label-width="140px" is-read> | 
|---|
|  |  |  | <ProForm :model="form" ref="productFormRef" label-width="110px" is-read> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务名称:" prop="name"> | 
|---|
|  |  |  | <ProFormText v-model.trim="detail.enterpriseName" /> | 
|---|
|  |  |  | <ProFormText v-model.trim="form.name" placeholder="请输入任务名称" /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormItemV2 label="服务费:" prop="salaryType"> | 
|---|
|  |  |  | <RadioWithExtra | 
|---|
|  |  |  | v-model="detail.enterpriseName" | 
|---|
|  |  |  | :value-enum="[ | 
|---|
|  |  |  | { value: 1, text: '按月' }, | 
|---|
|  |  |  | { value: 2, text: '按日' }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | enumLabelKey="text" | 
|---|
|  |  |  | enum-value-key="value" | 
|---|
|  |  |  | :showExtra="true" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #extra> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="detail.enterpriseName" | 
|---|
|  |  |  | :unit="detail.enterpriseName === '' ? '元/月' : '元/日'" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </RadioWithExtra> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="服务费:" prop="billingMethod"> | 
|---|
|  |  |  | <RadioWithExtra | 
|---|
|  |  |  | v-model="form.billingMethod" | 
|---|
|  |  |  | :value-enum="EnumBillingMethodText" | 
|---|
|  |  |  | :showExtra="true" | 
|---|
|  |  |  | :button-style="false" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #extra> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | v-model="form.serviceFee" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | :unit="EnumBillingMethodUnitText[form.billingMethod]" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </RadioWithExtra> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="结算方式:" prop="salaryType"> | 
|---|
|  |  |  | <ProFormItemV2 label="结算方式:" prop="settlementCycle"> | 
|---|
|  |  |  | <ProFormRadio | 
|---|
|  |  |  | v-model="detail.enterpriseName" | 
|---|
|  |  |  | :value-enum="[ | 
|---|
|  |  |  | { label: '月结', value: 1 }, | 
|---|
|  |  |  | { label: '日结', value: 2 }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | v-model="form.settlementCycle" | 
|---|
|  |  |  | :value-enum="EnumSettlementCycleText" | 
|---|
|  |  |  | :button-style="false" | 
|---|
|  |  |  | ></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="福利:" prop="salaryType"> | 
|---|
|  |  |  | <ProFormRadio v-model="detail.enterpriseName" :value-enum="dictionaryDataList" /> | 
|---|
|  |  |  | <ProFormItemV2 label="福利:" prop="benefits"> | 
|---|
|  |  |  | <ProFormCheckbox | 
|---|
|  |  |  | v-model="form.benefits" | 
|---|
|  |  |  | :value-enum="welfareList" | 
|---|
|  |  |  | ></ProFormCheckbox> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="年龄范围:" prop="ageRange"> | 
|---|
|  |  |  | <ProFormInputNumber v-model="detail.enterpriseName"></ProFormInputNumber> | 
|---|
|  |  |  | <ProFormItemV2 label="年龄范围:" prop="ageRange" class="form-age-range"> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | v-model="form.ageMinLimit" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | <div class="form-input-separator">至</div> | 
|---|
|  |  |  | <ProFormInputNumber | 
|---|
|  |  |  | :controls="false" | 
|---|
|  |  |  | :min="0" | 
|---|
|  |  |  | v-model="form.ageMaxLimit" | 
|---|
|  |  |  | placeholder="请输入" | 
|---|
|  |  |  | ></ProFormInputNumber> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="性别需求:" prop="salaryType"> | 
|---|
|  |  |  | <ProFormItemV2 label="性别要求:" prop="genderLimit"> | 
|---|
|  |  |  | <ProFormRadio | 
|---|
|  |  |  | v-model="detail.enterpriseName" | 
|---|
|  |  |  | :value-enum="[ | 
|---|
|  |  |  | { label: '男', value: 1 }, | 
|---|
|  |  |  | { label: '女', value: 2 }, | 
|---|
|  |  |  | ]" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | v-model="form.genderLimit" | 
|---|
|  |  |  | :value-enum="EnumUserGenderText" | 
|---|
|  |  |  | show-all-btn | 
|---|
|  |  |  | ></ProFormRadio> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="资格证书:" prop="salaryType"> | 
|---|
|  |  |  | <ProFormRadio v-model="detail.enterpriseName" :value-enum="dictionaryDataList" /> | 
|---|
|  |  |  | <ProFormItemV2 label="资格证书:" prop="credentialLimits"> | 
|---|
|  |  |  | <ProFormCheckbox | 
|---|
|  |  |  | v-model="form.credentialLimits" | 
|---|
|  |  |  | :value-enum="certificateTypeList" | 
|---|
|  |  |  | ></ProFormCheckbox> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务地点:" prop="areaList"> | 
|---|
|  |  |  | <!-- <ProFromAddressSelectV2 | 
|---|
|  |  |  | v-model:areaList="detail.areaList" | 
|---|
|  |  |  | areaListPlaceholder="请选择" | 
|---|
|  |  |  | :layer="AreaType.Area" | 
|---|
|  |  |  | /> --> | 
|---|
|  |  |  | <ProFormItemV2 label="任务地点:" prop="weMapInfo"> | 
|---|
|  |  |  | {{ | 
|---|
|  |  |  | `${form.weMapInfo.provinceName ?? ''}${form.weMapInfo.cityName ?? ''}${ | 
|---|
|  |  |  | form.weMapInfo.addressName ?? '' | 
|---|
|  |  |  | }` | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务时间:" prop="creationTime" mode="read"> | 
|---|
|  |  |  | <ProFormItemV2 label="详细地址:" prop="addressDetail"> | 
|---|
|  |  |  | <ProFormText v-model.trim="form.addressDetail" placeholder="请输入详细地址" /> | 
|---|
|  |  |  | </ProFormItemV2> | 
|---|
|  |  |  | </ProFormColItem> | 
|---|
|  |  |  | </ProFormCol> | 
|---|
|  |  |  | <ProFormCol> | 
|---|
|  |  |  | <ProFormColItem :span="12"> | 
|---|
|  |  |  | <ProFormItemV2 label="任务时间:" prop="time"> | 
|---|
|  |  |  | <ProFormDatePicker | 
|---|
|  |  |  | v-model="detail.enterpriseName" | 
|---|
|  |  |  | v-model="form.time" | 
|---|
|  |  |  | type="daterange" | 
|---|
|  |  |  | range-separator="至" | 
|---|
|  |  |  | start-placeholder="开始日期" | 
|---|
|  |  |  | 
|---|
|  |  |  | ProFormInputNumber, | 
|---|
|  |  |  | ProFormRadio, | 
|---|
|  |  |  | ProFormDatePicker, | 
|---|
|  |  |  | ProFormCheckbox, | 
|---|
|  |  |  | } from '@bole-core/components'; | 
|---|
|  |  |  | import { useQuery } from '@tanstack/vue-query'; | 
|---|
|  |  |  | import { AreaType } from '@/constants'; | 
|---|
|  |  |  | import * as enterpriseServices from '@/services/api/enterprise'; | 
|---|
|  |  |  | import * as taskServices from '@/services/api/task'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | EnumUserGenderText, | 
|---|
|  |  |  | EnumBillingMethodText, | 
|---|
|  |  |  | EnumBillingMethodUnitText, | 
|---|
|  |  |  | EnumSettlementCycleText, | 
|---|
|  |  |  | } from '@/constants'; | 
|---|
|  |  |  | import { ModelValueType } from 'element-plus'; | 
|---|
|  |  |  | import { format } from '@/utils'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'TaskDetailView', | 
|---|
|  |  |  | 
|---|
|  |  |  | const route = useRoute(); | 
|---|
|  |  |  | const id = route.params?.id as string; | 
|---|
|  |  |  | const { closeViewPush } = useRouteView(); | 
|---|
|  |  |  | const { dictionaryDataList } = useDictionaryDataSelect({ | 
|---|
|  |  |  | categoryCode: computed(() => CategoryCode.Welfare), | 
|---|
|  |  |  | const { dictionaryDataList: welfareList } = useDictionaryDataSelect({ | 
|---|
|  |  |  | categoryCode: CategoryCode.Welfare, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | const { dictionaryDataList: certificateTypeList } = useDictionaryDataSelect({ | 
|---|
|  |  |  | categoryCode: CategoryCode.CertificateType, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { data: detail, isLoading } = useQuery({ | 
|---|
|  |  |  | queryKey: ['enterpriseServices/getEnterprise', id], | 
|---|
|  |  |  | const form = reactive({ | 
|---|
|  |  |  | name: '', | 
|---|
|  |  |  | billingMethod: '' as any as EnumBillingMethod, | 
|---|
|  |  |  | serviceFee: 0, | 
|---|
|  |  |  | settlementCycle: '' as any as EnumSettlementCycle, | 
|---|
|  |  |  | benefits: [] as string[], | 
|---|
|  |  |  | ageMinLimit: 0, | 
|---|
|  |  |  | ageMaxLimit: 0, | 
|---|
|  |  |  | genderLimit: 0 as any as EnumUserGender, | 
|---|
|  |  |  | credentialLimits: [] as string[], | 
|---|
|  |  |  | time: [] as unknown as ModelValueType, | 
|---|
|  |  |  | weMapInfo: {} as WeMapModel, | 
|---|
|  |  |  | addressDetail: '', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { isLoading } = useQuery({ | 
|---|
|  |  |  | queryKey: ['taskServices/getTaskInfo', id], | 
|---|
|  |  |  | queryFn: async () => { | 
|---|
|  |  |  | return await enterpriseServices.getEnterprise( | 
|---|
|  |  |  | return await taskServices.getTaskInfo( | 
|---|
|  |  |  | { id: id }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | showLoading: false, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | placeholderData: () => ({} as API.GetEnterpriseQueryResult), | 
|---|
|  |  |  | placeholderData: () => ({} as API.GetTaskInfoQueryResult), | 
|---|
|  |  |  | onSuccess(data) { | 
|---|
|  |  |  | form.name = data.name; | 
|---|
|  |  |  | form.billingMethod = data.billingMethod; | 
|---|
|  |  |  | form.serviceFee = data.serviceFee; | 
|---|
|  |  |  | form.settlementCycle = data.settlementCycle; | 
|---|
|  |  |  | form.benefits = data.benefits?.map((x) => x.benefitCode) ?? []; | 
|---|
|  |  |  | form.ageMinLimit = data.ageMinLimit; | 
|---|
|  |  |  | form.ageMaxLimit = data.ageMaxLimit; | 
|---|
|  |  |  | form.genderLimit = data.genderLimit; | 
|---|
|  |  |  | form.credentialLimits = data.credentialLimits?.map((x) => x.typeCode) ?? []; | 
|---|
|  |  |  | form.time = [ | 
|---|
|  |  |  | format(data.beginTime, 'YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | format(data.endTime, 'YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  | form.weMapInfo = { | 
|---|
|  |  |  | latitude: data.latitude, | 
|---|
|  |  |  | longitude: data.longitude, | 
|---|
|  |  |  | provinceName: data.provinceContent, | 
|---|
|  |  |  | cityName: data.cityContent, | 
|---|
|  |  |  | provinceCode: data.provinceCode, | 
|---|
|  |  |  | cityCode: data.cityCode, | 
|---|
|  |  |  | addressName: data.addressName, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | form.addressDetail = data.addressDetail; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | enabled: computed(() => !!id), | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | @use '@/style/common.scss' as *; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | :deep() { | 
|---|
|  |  |  | .radio-with-input-extra-wrapper { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .form-age-range { | 
|---|
|  |  |  | .pro-from-item-read-content-wrapper { | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|