| | |
| | | <template> |
| | | <ContentScrollView :paddingH="false"> |
| | | <nut-form :model-value="form" ref="formRef" :rules="rules"> |
| | | <nut-form-item label="任务名称:" class="bole-form-item" prop="taskName" label-width="90px"> |
| | | <nut-input v-model="form.taskName" placeholder="请输入任务名称"> </nut-input> |
| | | <nut-form-item label="任务名称:" class="bole-form-item" prop="name" label-width="90px"> |
| | | <nut-input v-model="form.name" placeholder="请输入任务名称"> </nut-input> |
| | | </nut-form-item> |
| | | <nut-form-item |
| | | label="服务费:" |
| | | class="bole-form-item alignTop" |
| | | prop="feeType" |
| | | prop="billingMethod" |
| | | required |
| | | label-width="90px" |
| | | label-position="top" |
| | | > |
| | | <nut-radio-group v-model="form.feeType" direction="horizontal"> |
| | | <BlRadio :label="Number(key)" v-for="(val, key) in FlexTaskFeeTypeEnumText" :key="key">{{ |
| | | <nut-radio-group v-model="form.billingMethod" direction="horizontal"> |
| | | <BlRadio :label="Number(key)" v-for="(val, key) in EnumBillingMethodText" :key="key">{{ |
| | | val |
| | | }}</BlRadio> |
| | | </nut-radio-group> |
| | | </nut-form-item> |
| | | <nut-form-item label=" " class="bole-form-item" prop="fee" label-width="0"> |
| | | <nut-form-item label=" " class="bole-form-item" prop="serviceFee" label-width="0"> |
| | | <div class="bole-form-input-wrapper"> |
| | | <nut-input |
| | | v-model.trim="form.fee" |
| | | v-model.trim="form.serviceFee" |
| | | class="nut-input-text bole-input-text" |
| | | placeholder="请输入服务费" |
| | | type="text" |
| | | /> |
| | | <div class="form-input-unit">{{ SalaryTimeTypeEnumUnit[form.feeType] }}</div> |
| | | <div class="form-input-unit">{{ BillingMethodEnumUnit[form.billingMethod] }}</div> |
| | | </div> |
| | | </nut-form-item> |
| | | <nut-form-item |
| | |
| | | required |
| | | label-width="90px" |
| | | > |
| | | <nut-radio-group v-model="form.settleType" direction="horizontal"> |
| | | <BlRadio |
| | | :label="Number(key)" |
| | | v-for="(val, key) in FlexTaskSettleTypeEnumText" |
| | | :key="key" |
| | | >{{ val }}</BlRadio |
| | | > |
| | | <nut-radio-group v-model="form.settlementCycle" direction="horizontal"> |
| | | <BlRadio :label="Number(key)" v-for="(val, key) in EnumSettlementCycleText" :key="key">{{ |
| | | val |
| | | }}</BlRadio> |
| | | </nut-radio-group> |
| | | </nut-form-item> |
| | | <nut-form-item label="福利:" class="bole-form-item" prop="settleType" label-width="90px"> |
| | | <nut-form-item label="福利:" class="bole-form-item" prop="benefits" label-width="90px"> |
| | | <ChooseInputWithCheckbox |
| | | v-model="form.listAideIds" |
| | | v-model="form.benefits" |
| | | title="请选择福利" |
| | | :columns="WelfareTypeList" |
| | | placeholder="请选择福利" |
| | |
| | | <nut-form-item |
| | | label="年龄范围:" |
| | | class="bole-form-item" |
| | | prop="minAge" |
| | | prop="ageMinLimit" |
| | | required |
| | | label-width="90px" |
| | | > |
| | | <div class="bole-form-input-wrapper"> |
| | | <NumberInput |
| | | v-model.trim="form.minAge" |
| | | v-model.trim="form.ageMinLimit" |
| | | class="nut-input-text bole-input-text" |
| | | placeholder="请选择年龄范围" |
| | | :min="1" |
| | | /> |
| | | <div class="form-input-separator">至</div> |
| | | <NumberInput |
| | | v-model.trim="form.maxAge" |
| | | v-model.trim="form.ageMaxLimit" |
| | | class="nut-input-text bole-input-text" |
| | | placeholder="请选择年龄范围" |
| | | :min="1" |
| | | /> |
| | | </div> |
| | | </nut-form-item> |
| | | <nut-form-item label="性别:" class="bole-form-item" prop="sexType" label-width="90px"> |
| | | <nut-form-item |
| | | label="性别要求:" |
| | | class="bole-form-item" |
| | | prop="genderLimit" |
| | | label-width="90px" |
| | | required |
| | | > |
| | | <ChooseInputWithPicker |
| | | v-model="form.sexType" |
| | | v-model="form.genderLimit" |
| | | placeholder="请选择性别要求" |
| | | :value-enum="GenderText" |
| | | :value-enum="EnumUserGenderText" |
| | | /> |
| | | </nut-form-item> |
| | | <nut-form-item label="资格证书:" class="bole-form-item" prop="settleType" label-width="90px"> |
| | | <nut-form-item |
| | | label="资格证书:" |
| | | class="bole-form-item" |
| | | prop="credentialLimits" |
| | | label-width="90px" |
| | | > |
| | | <ChooseInputWithCheckbox |
| | | v-model="form.listCertionIds" |
| | | v-model="form.credentialLimits" |
| | | title="请选择资格证书" |
| | | :columns="CertificateTypeList" |
| | | placeholder="请选择资格证书" |
| | | /> |
| | | </nut-form-item> |
| | | <nut-form-item label="任务地点" class="bole-form-item" prop="areaList" required> |
| | | <!-- <ChooseLocationInput placeholder="请选择任务所在地" v-model="form.weMapInfo" /> --> |
| | | <ChooseInputWithAreaPicker |
| | | <nut-form-item label="任务地点" class="bole-form-item" prop="weMapInfo" required> |
| | | <ChooseLocationInput placeholder="请选择任务地点" v-model="form.weMapInfo" /> |
| | | <!-- <ChooseInputWithAreaPicker |
| | | :columns="areaTreeList" |
| | | v-model="form.areaList" |
| | | placeholder="请选择所在地区" |
| | | ></ChooseInputWithAreaPicker> |
| | | ></ChooseInputWithAreaPicker> --> |
| | | </nut-form-item> |
| | | <nut-form-item label="详细地址:" class="bole-form-item" prop="address" label-width="90px"> |
| | | <nut-input v-model="form.address" placeholder="请输入详细地址"> </nut-input> |
| | | <nut-form-item |
| | | label="详细地址:" |
| | | class="bole-form-item" |
| | | prop="addressDetail" |
| | | label-width="90px" |
| | | required |
| | | > |
| | | <nut-input v-model="form.addressDetail" placeholder="请输入详细地址"> </nut-input> |
| | | </nut-form-item> |
| | | <nut-form-item |
| | | label="任务开始日期:" |
| | | class="bole-form-item" |
| | | prop="startDate" |
| | | prop="beginTime" |
| | | label-width="90px" |
| | | > |
| | | <ChooseInputWithDatePicker v-model="form.startDate"></ChooseInputWithDatePicker> |
| | | <ChooseInputWithDatePicker v-model="form.beginTime"></ChooseInputWithDatePicker> |
| | | </nut-form-item> |
| | | <nut-form-item label="任务结束日期:" class="bole-form-item" prop="endDate" label-width="90px"> |
| | | <ChooseInputWithDatePicker v-model="form.endDate"></ChooseInputWithDatePicker> |
| | | <nut-form-item label="任务结束日期:" class="bole-form-item" prop="endTime" label-width="90px"> |
| | | <ChooseInputWithDatePicker v-model="form.endTime"></ChooseInputWithDatePicker> |
| | | </nut-form-item> |
| | | </nut-form> |
| | | </ContentScrollView> |
| | |
| | | <script setup lang="ts"> |
| | | import { useUser } from '@/hooks'; |
| | | import { |
| | | FlexTaskSettleTypeEnum, |
| | | FlexTaskSettleTypeEnumText, |
| | | FlexTaskFeeTypeEnum, |
| | | FlexTaskFeeTypeEnumText, |
| | | SalaryTimeTypeEnumUnit, |
| | | CategoryCode, |
| | | EnumBillingMethod, |
| | | EnumSettlementCycle, |
| | | EnumUserGender, |
| | | EnumBillingMethodText, |
| | | EnumUserGenderText, |
| | | EnumSettlementCycleText, |
| | | BillingMethodEnumUnit, |
| | | } from '@12333/constants'; |
| | | import { |
| | | ChooseInputWithPicker, |
| | |
| | | } from '@12333/components'; |
| | | import { FormValidator, Message } from '@12333/utils'; |
| | | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; |
| | | import * as taskServices from '@12333/services/apiV2/task'; |
| | | import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; |
| | | import Taro from '@tarojs/taro'; |
| | | import { goBack } from '@/utils'; |
| | | import { Gender, GenderText, SearchType } from '@12333/constants'; |
| | | import { useAllAreaList, useSearchSettingType } from '@12333/hooks'; |
| | | import { useAllAreaList, useDictionaryDataSelect } from '@12333/hooks'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import dayjs from 'dayjs'; |
| | | |
| | |
| | | }); |
| | | |
| | | const { userDetail } = useUser(); |
| | | const { areaTreeList } = useAllAreaList(); |
| | | const { findAreaNameFromCode } = useAllAreaList(); |
| | | const router = Taro.useRouter(); |
| | | const taskId = router.params?.taskId ?? ''; |
| | | const isEdit = !!taskId; |
| | | const isCopy = router.params?.isCopy === 'true'; |
| | | console.log('isCopy: ', router.params?.isCopy); |
| | | |
| | | const WelfareTypeList = ref([]); |
| | | const CertificateTypeList = ref([]); |
| | | const { dictionaryDataList: WelfareTypeList } = useDictionaryDataSelect({ |
| | | categoryCode: CategoryCode.Welfare, |
| | | }); |
| | | const { dictionaryDataList: CertificateTypeList } = useDictionaryDataSelect({ |
| | | categoryCode: CategoryCode.CertificateType, |
| | | }); |
| | | |
| | | const form = reactive({ |
| | | taskName: '', |
| | | feeType: FlexTaskFeeTypeEnum.OfMonth, |
| | | fee: 0, |
| | | settleType: FlexTaskSettleTypeEnum.OfMonth, |
| | | listAideIds: [] as string[], |
| | | minAge: 0, |
| | | maxAge: 0, |
| | | sexType: Gender.Male, |
| | | listCertionIds: [] as string[], |
| | | address: '', |
| | | startDate: '', |
| | | endDate: '', |
| | | areaList: [] as number[], |
| | | name: '', |
| | | billingMethod: EnumBillingMethod.Month, |
| | | serviceFee: '' as any as number, |
| | | settlementCycle: EnumSettlementCycle.Month, |
| | | benefits: [] as string[], |
| | | ageMinLimit: 0, |
| | | ageMaxLimit: 0, |
| | | genderLimit: '' as any as EnumUserGender, |
| | | credentialLimits: [] as string[], |
| | | // address: '', |
| | | beginTime: '', |
| | | endTime: '', |
| | | // areaList: [] as number[], |
| | | |
| | | weMapInfo: {} as WeMapModel, |
| | | addressDetail: '', |
| | | }); |
| | | |
| | | const rules = reactive<FormRules>({ |
| | | taskName: [{ required: true, message: '请输入任务名称' }], |
| | | name: [{ required: true, message: '请输入任务名称' }], |
| | | genderLimit: [{ required: true, message: '请选择性别要求' }], |
| | | addressDetail: [{ required: true, message: '请输入详细地址' }], |
| | | |
| | | // weMapInfo: [ |
| | | // { required: true, message: '请设置工作地点', validator: FormValidator.validatorWeMap }, |
| | | // ], |
| | | areaList: [ |
| | | { required: true, message: '清添加工作地点', validator: FormValidator.validatorArray }, |
| | | weMapInfo: [ |
| | | { required: true, message: '请设置工作地点', validator: FormValidator.validatorWeMap }, |
| | | ], |
| | | // areaList: [ |
| | | // { required: true, message: '请添加工作地点', validator: FormValidator.validatorArray }, |
| | | // ], |
| | | |
| | | minAge: [ |
| | | ageMinLimit: [ |
| | | { |
| | | required: true, |
| | | message: '请输入年龄要求', |
| | | validator: () => { |
| | | if (!form.minAge) { |
| | | if (!form.ageMinLimit) { |
| | | return Promise.reject('请输入年龄要求'); |
| | | } |
| | | if (!form.maxAge) { |
| | | if (!form.ageMaxLimit) { |
| | | return Promise.reject('请输入年龄要求'); |
| | | } |
| | | if (Number(form.maxAge) <= Number(form.minAge)) { |
| | | if (Number(form.ageMaxLimit) <= Number(form.ageMinLimit)) { |
| | | return Promise.reject('最大年龄不能小于最小年龄'); |
| | | } |
| | | return Promise.resolve(true); |
| | |
| | | }, |
| | | ], |
| | | |
| | | startDate: [ |
| | | beginTime: [ |
| | | { |
| | | required: true, |
| | | message: '请选择开始日期', |
| | | }, |
| | | ], |
| | | endDate: [ |
| | | endTime: [ |
| | | { |
| | | required: true, |
| | | message: '请选择结束日期', |
| | | validator(value) { |
| | | if (!value) return Promise.reject('请选择结束日期'); |
| | | if (value <= form.startDate) return Promise.reject('结束日期不能小于开始日期'); |
| | | if (value <= form.beginTime) return Promise.reject('结束日期不能小于开始日期'); |
| | | return Promise.resolve(true); |
| | | }, |
| | | }, |
| | |
| | | data: detail, |
| | | refetch, |
| | | } = useQuery({ |
| | | queryKey: ['flexWorkerServices/getFlexTaskDto', taskId], |
| | | queryKey: ['taskServices/getTaskInfo', taskId], |
| | | queryFn: async () => { |
| | | return await flexWorkerServices.getFlexTaskDto( |
| | | return await taskServices.getTaskInfo( |
| | | { id: taskId }, |
| | | { |
| | | showLoading: false, |
| | | } |
| | | ); |
| | | }, |
| | | placeholderData: () => ({} as API.GetFlexTaskDtoOutput), |
| | | placeholderData: () => ({} as API.GetTaskInfoQueryResult), |
| | | enabled: isEdit, |
| | | onSuccess(data) { |
| | | form.taskName = data.taskName; |
| | | form.feeType = data.feeType; |
| | | form.fee = data.fee; |
| | | form.settleType = data.settleType; |
| | | form.listAideIds = data.taskWeals?.length > 0 ? data.taskWeals.map((item) => item.id) : []; |
| | | form.minAge = data.minAge; |
| | | form.maxAge = data.maxAge; |
| | | form.sexType = data.sexType; |
| | | form.listCertionIds = data.taskCerts?.length > 0 ? data.taskCerts.map((item) => item.id) : []; |
| | | form.address = data.address; |
| | | form.startDate = dayjs(data.startDate).format('YYYY-MM-DD'); |
| | | form.endDate = dayjs(data.endDate).format('YYYY-MM-DD'); |
| | | form.areaList = [data.provinceId, data.cityId, data.areaId]; |
| | | form.address = data.address; |
| | | form.name = data.name; |
| | | form.billingMethod = data.billingMethod; |
| | | form.serviceFee = data.serviceFee; |
| | | form.settlementCycle = data.settlementCycle; |
| | | form.benefits = (data.benefits ?? []).map((item) => item.code); |
| | | form.ageMinLimit = data.ageMinLimit; |
| | | form.ageMaxLimit = data.ageMaxLimit; |
| | | form.genderLimit = data.genderLimit; |
| | | form.credentialLimits = (data.credentialLimits ?? []).map((item) => item.code); |
| | | form.beginTime = dayjs(data.beginTime).format('YYYY-MM-DD'); |
| | | form.endTime = dayjs(data.endTime).format('YYYY-MM-DD'); |
| | | form.addressDetail = data.addressDetail; |
| | | form.weMapInfo = { |
| | | provinceName: findAreaNameFromCode(data.provinceCode), |
| | | cityName: findAreaNameFromCode(data.cityCode), |
| | | provinceCode: data.provinceCode, |
| | | cityCode: data.cityCode, |
| | | latitude: data.latitude, |
| | | longitude: data.longitude, |
| | | addressName: data.addressName, |
| | | }; |
| | | }, |
| | | }); |
| | | |
| | |
| | | |
| | | async function confirm() { |
| | | try { |
| | | let params: API.AddEidtFlexTaskInput = { |
| | | taskName: form.taskName, |
| | | feeType: form.feeType, |
| | | fee: form.fee, |
| | | settleType: form.settleType, |
| | | listAideIds: form.listAideIds, |
| | | minAge: form.minAge, |
| | | maxAge: form.maxAge, |
| | | sexType: form.sexType, |
| | | listCertionIds: form.listCertionIds, |
| | | address: form.address, |
| | | startDate: form.startDate, |
| | | endDate: form.endDate, |
| | | provinceId: form.areaList[0], |
| | | cityId: form.areaList[1], |
| | | areaId: form.areaList[2], |
| | | 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: form.beginTime, |
| | | endTime: form.endTime, |
| | | }; |
| | | if (isEdit) { |
| | | params.taskId = taskId; |
| | | params.id = taskId; |
| | | } |
| | | if (isCopy) { |
| | | params.taskId = ''; |
| | | params.id = ''; |
| | | } |
| | | let res = await flexWorkerServices.addEidtFlexTask(params); |
| | | let res = await taskServices.saveTaskInfo(params); |
| | | if (res) { |
| | | Message.success(isEdit ? '编辑成功' : '发布成功', { |
| | | onClosed() { |