<template>
|
<LoadingLayout :loading="isLoading">
|
<AppContainer>
|
<PageFormLayout>
|
<ProForm :model="form" ref="productFormRef" label-width="110px" is-read>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="任务名称:" prop="name">
|
<ProFormText v-model.trim="form.name" placeholder="请输入任务名称" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<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="settlementCycle">
|
<ProFormRadio
|
v-model="form.settlementCycle"
|
:value-enum="EnumSettlementCycleText"
|
:button-style="false"
|
></ProFormRadio>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="福利:" prop="benefits">
|
<ProFormCheckbox
|
v-model="form.benefits"
|
:value-enum="welfareList"
|
enumLabelKey="name"
|
enum-value-key="code"
|
></ProFormCheckbox>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<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="genderLimit">
|
<ProFormRadio
|
v-model="form.genderLimit"
|
:value-enum="EnumUserGenderText"
|
show-all-btn
|
></ProFormRadio>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="资格证书:" prop="credentialLimits">
|
<ProFormCheckbox
|
v-model="form.credentialLimits"
|
:value-enum="certificateTypeList"
|
enumLabelKey="name"
|
enum-value-key="code"
|
></ProFormCheckbox>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="任务地点:" prop="weMapInfo">
|
<WeMap v-model="form.weMapInfo" />
|
</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>
|
</ProForm>
|
<template #footer>
|
<el-button @click="handleBack">关闭</el-button>
|
</template>
|
</PageFormLayout>
|
</AppContainer>
|
</LoadingLayout>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
LoadingLayout,
|
AppContainer,
|
PageFormLayout,
|
ProForm,
|
ProFormCol,
|
ProFormColItem,
|
ProFormItemV2,
|
ProFormText,
|
ProFormInputNumber,
|
ProFormRadio,
|
ProFormDatePicker,
|
ProFormCheckbox,
|
} from '@bole-core/components';
|
import { useQuery } from '@tanstack/vue-query';
|
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: welfareList } = useDictionaryDataSelect({
|
categoryCode: CategoryCode.Welfare,
|
});
|
const { dictionaryDataList: certificateTypeList } = useDictionaryDataSelect({
|
categoryCode: CategoryCode.CertificateType,
|
});
|
|
const form = reactive({
|
name: '',
|
billingMethod: '' as any as EnumBillingMethod,
|
serviceFee: 0,
|
settlementCycle: '' as any as EnumSettlementCycle,
|
benefits: [] as string[],
|
ageMinLimit: 0,
|
ageMaxLimit: 0,
|
genderLimit: '' 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 taskServices.getTaskInfo(
|
{ id: id },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
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.code) ?? [];
|
form.ageMinLimit = data.ageMinLimit;
|
form.ageMaxLimit = data.ageMaxLimit;
|
form.genderLimit = data.genderLimit;
|
form.credentialLimits = data.credentialLimits?.map((x) => x.code) ?? [];
|
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.provinceName,
|
cityName: data.cityName,
|
provinceCode: data.provinceCode,
|
cityCode: data.cityCode,
|
addressName: data.addressName,
|
};
|
form.addressDetail = data.addressDetail;
|
},
|
enabled: computed(() => !!id),
|
});
|
|
function handleBack() {
|
closeViewPush(route, {
|
name: 'TaskManageList',
|
});
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
</style>
|
