From e32d6239d09f6d9d66c77ad5a7d9716d20b61428 Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期五, 08 八月 2025 15:26:28 +0800 Subject: [PATCH] feat: 任务 --- src/views/EmploymentManage/components/AddOrEditEmploymentView.vue | 311 +++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 238 insertions(+), 73 deletions(-) diff --git a/src/views/EmploymentManage/components/AddOrEditEmploymentView.vue b/src/views/EmploymentManage/components/AddOrEditEmploymentView.vue index f3edcb3..3d0d1d1 100644 --- a/src/views/EmploymentManage/components/AddOrEditEmploymentView.vue +++ b/src/views/EmploymentManage/components/AddOrEditEmploymentView.vue @@ -11,91 +11,138 @@ </ProFormColItem> </ProFormCol> <ProFormCol> - <ProFormItemV2 label="鏈嶅姟璐�:" prop="salaryType"> - <RadioWithExtra - v-model="form.salaryType" - :value-enum="[ - { label: '鎸夋湀', value: 1 }, - { label: '鎸夋棩', value: 2 }, - ]" - :showExtra="true" - > - <template #extra> - <ProFormInputNumber - :controls="false" - :min="0" - :max="999" - v-model="form.name" - placeholder="璇疯緭鍏�" - :unit="form.salaryType === 1 ? '鍏�/鏈�' : '鍏�/澶�'" - ></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="form.salaryType" - :value-enum="[{ label: '鏄�', value: 1 }]" + v-model="form.settlementCycle" + :value-enum="EnumSettlementCycleText" + :button-style="false" ></ProFormRadio> </ProFormItemV2> </ProFormColItem> </ProFormCol> <ProFormCol> <ProFormColItem :span="12"> - <ProFormItemV2 label="骞撮緞瑕佹眰:" prop="ageRange"> + <ProFormItemV2 label="绂忓埄:" prop="benefits"> + <el-checkbox + v-if="!isDetail" + v-model="state.checkBenefitsAll" + style="margin-right: 30px" + :indeterminate="state.isBenefitsIndeterminate" + @change="handleCheckBenefitsAllChange" + >鍏ㄩ��</el-checkbox + > + <ProFormCheckbox + v-model="form.benefits" + :value-enum="welfareList" + @change="handleCheckedBenefitsServicesChange" + ></ProFormCheckbox> + </ProFormItemV2> + </ProFormColItem> + </ProFormCol> + <ProFormCol> + <ProFormColItem :span="12"> + <ProFormItemV2 label="骞撮緞鑼冨洿:" prop="ageRange" class="form-age-range"> <ProFormInputNumber :controls="false" - :min="0" - v-model="form.ageStart" + :min="1" + v-model="form.ageMinLimit" placeholder="璇疯緭鍏�" - disabled ></ProFormInputNumber> <div class="form-input-separator">鑷�</div> <ProFormInputNumber :controls="false" - :min="0" - v-model="form.ageEnd" + :min="1" + v-model="form.ageMaxLimit" placeholder="璇疯緭鍏�" - disabled ></ProFormInputNumber> </ProFormItemV2> </ProFormColItem> </ProFormCol> <ProFormCol> <ProFormColItem :span="12"> - <ProFormItemV2 label="鎬у埆瑕佹眰:" prop="sexRequirement" required> - <RadioWithExtra - v-model="form.sexRequirement" - :value-enum="[ - { - label: '涓嶉檺', - value: 1, - }, - ]" - :showExtra="true" + <ProFormItemV2 label="鎬у埆瑕佹眰:" prop="genderLimit"> + <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="credentialLimits"> + <el-checkbox + v-if="!isDetail" + v-model="state.checkCertificatesAll" + style="margin-right: 30px" + :indeterminate="state.isCertificatesIndeterminate" + @change="handleCheckCertificatesAllChange" + >鍏ㄩ��</el-checkbox > - <template #extra> - <div class="form-input-separator">鐢锋��</div> - <ProFormInputNumber - :controls="false" - :min="0" - v-model="form.manNumber" - placeholder="璇疯緭鍏�" - disabled - ></ProFormInputNumber> - <div class="form-input-separator">濂虫��</div> - <ProFormInputNumber - :controls="false" - :min="0" - v-model="form.womanNumber" - placeholder="璇疯緭鍏�" - disabled - ></ProFormInputNumber> - </template> - </RadioWithExtra> + <ProFormCheckbox + v-model="form.credentialLimits" + :value-enum="certificateTypeList" + @change="handleCheckedCertificatesServicesChange" + ></ProFormCheckbox> + </ProFormItemV2> + </ProFormColItem> + </ProFormCol> + <ProFormCol> + <ProFormColItem :span="12"> + <ProFormItemV2 label="浠诲姟鍦扮偣:" prop="weMapInfo"> + <WeMap v-if="!isDetail" v-model="form.weMapInfo" /> + <div v-else> + {{ + `${form.weMapInfo.provinceName ?? ''}${form.weMapInfo.cityName ?? ''}${ + form.weMapInfo.addressName ?? '' + }` + }} + </div> + </ProFormItemV2> + </ProFormColItem> + </ProFormCol> + <ProFormCol> + <ProFormColItem :span="12"> + <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="form.time" + type="daterange" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></ProFormDatePicker> </ProFormItemV2> </ProFormColItem> </ProFormCol> @@ -120,11 +167,22 @@ ProFormText, ProFormInputNumber, ProFormRadio, + ProFormDatePicker, + ProFormCheckbox, } from '@bole-core/components'; -import { FormInstance } from 'element-plus'; +import { FormInstance, ModelValueType } from 'element-plus'; import { Message } from '@bole-core/core'; import { useQuery } from '@tanstack/vue-query'; import { useGlobalEventContext, useRouteView } from '@/hooks'; +import * as taskServices from '@/services/api/task'; +import { + EnumUserGenderTextForEdit, + EnumBillingMethodText, + EnumBillingMethodUnitText, + EnumSettlementCycleText, +} from '@/constants'; +import { format } from '@/utils'; +import dayjs from 'dayjs'; defineOptions({ name: 'AddOrEditEmploymentView', @@ -140,36 +198,78 @@ const eventContext = useGlobalEventContext(); const { closeViewPush } = useRouteView(); +const { dictionaryDataList: welfareList } = useDictionaryDataSelect({ + categoryCode: CategoryCode.Welfare, +}); +const { dictionaryDataList: certificateTypeList } = useDictionaryDataSelect({ + categoryCode: CategoryCode.CertificateType, +}); + +const state = reactive({ + checkBenefitsAll: false, + isBenefitsIndeterminate: false, + + checkCertificatesAll: false, + isCertificatesIndeterminate: false, +}); const form = reactive({ name: '', - salaryType: 1, - ageStart: 0, - ageEnd: 0, - sexRequirement: 1, - manNumber: 0, - womanNumber: 0, + 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: ['flexTaskServices/getFlexTaskDetail', id], + queryKey: ['taskServices/getTaskInfo', id], queryFn: async () => { - return await flexTaskServices.getFlexTaskDetail( + return await taskServices.getTaskInfo( { id: id }, { showLoading: false, } ); }, + placeholderData: () => ({} as API.GetTaskInfoQueryResult), onSuccess(data) { - form.name = data.taskName; + 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: isEdit, }); function handleBack() { closeViewPush(route, { - name: 'TaskManage', + name: 'TaskManageList', }); } const productFormRef = ref<FormInstance>(); @@ -185,8 +285,30 @@ } async function submit() { try { - let params = {}; - let res; + console.log('form.weMapInfo: ', form.weMapInfo); + let params: API.SaveTaskInfoCommand = { + name: form.name, + billingMethod: form.billingMethod, + serviceFee: form.serviceFee, + settlementCycle: form.settlementCycle, + benefits: form.benefits, + ageMinLimit: form.ageMinLimit, + ageMaxLimit: form.ageMaxLimit, + genderLimit: form.genderLimit, + credentialLimits: form.credentialLimits, + provinceCode: form.weMapInfo.provinceCode, + cityCode: form.weMapInfo.cityCode, + addressName: form.weMapInfo.addressName, + addressDetail: form.addressDetail, + longitude: form.weMapInfo.longitude, + 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'), + }; + if (isEdit) { + params.id = id; + } + let res = await taskServices.saveTaskInfo(params); if (res) { Message.successMessage('鎿嶄綔鎴愬姛'); eventContext.emit(isEdit ? 'taskManage:edit' : 'taskManage:add'); @@ -194,7 +316,50 @@ } } catch (error) {} } + +function handleCheckBenefitsAllChange(val: boolean) { + form.benefits = val + ? welfareList.value.map((item) => { + return item.value; + }) + : []; + state.isBenefitsIndeterminate = false; +} + +function handleCheckedBenefitsServicesChange(value: string[]) { + const checkedCount = value.length; + state.checkBenefitsAll = checkedCount === welfareList.value.length; + state.isBenefitsIndeterminate = checkedCount > 0 && checkedCount < welfareList.value.length; +} + +function handleCheckCertificatesAllChange(val: boolean) { + form.credentialLimits = val + ? certificateTypeList.value.map((item) => { + return item.value; + }) + : []; + state.isCertificatesIndeterminate = false; +} + +function handleCheckedCertificatesServicesChange(value: string[]) { + const checkedCount = value.length; + state.checkCertificatesAll = checkedCount === certificateTypeList.value.length; + state.isCertificatesIndeterminate = + checkedCount > 0 && checkedCount < certificateTypeList.value.length; +} </script> <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> -- Gitblit v1.9.1