<template>
|
<LoadingLayout :loading="isLoading && isEdit">
|
<AppContainer>
|
<PageFormLayout title="基本信息">
|
<ProForm :model="form" ref="productFormRef" label-width="110px" :is-read="isDetail">
|
<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="salaryType">
|
<RadioWithExtra
|
v-model="form.salaryType"
|
:value-enum="[
|
{ label: '按月', value: 1 },
|
{ label: '按日', value: 2 },
|
]"
|
:showExtra="true"
|
:button-style="false"
|
>
|
<template #extra>
|
<ProFormInputNumber
|
:controls="false"
|
:min="0"
|
:max="999"
|
v-model="form.name"
|
placeholder="请输入"
|
:unit="form.salaryType === 1 ? '元/月' : '元/天'"
|
></ProFormInputNumber>
|
</template>
|
</RadioWithExtra>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="结算方式:" prop="salaryType">
|
<ProFormRadio
|
v-model="form.salaryType"
|
:value-enum="[{ label: '是', value: 1 }]"
|
:button-style="false"
|
></ProFormRadio>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="福利:" prop="benefits">
|
<el-checkbox
|
v-model="state.checBenefitskAll"
|
style="margin-right: 30px"
|
:indeterminate="state.isBenefitsIndeterminate"
|
@change="handleCheckBenefitsAllChange"
|
>全选</el-checkbox
|
>
|
<ProFormCheckbox
|
v-model="form.benefits"
|
:value-enum="[]"
|
enumLabelKey="name"
|
enum-value-key="id"
|
@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"
|
placeholder="请输入"
|
></ProFormInputNumber>
|
<div class="form-input-separator">至</div>
|
<ProFormInputNumber
|
:controls="false"
|
:min="0"
|
v-model="form.ageEnd"
|
placeholder="请输入"
|
></ProFormInputNumber>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="性别要求:" prop="sexRequirement" required>
|
<ProFormRadio
|
v-model="form.sexRequirement"
|
:value-enum="[{ label: '不限', value: 1 }]"
|
></ProFormRadio>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="资格证书:" prop="benefits">
|
<el-checkbox
|
v-model="state.checBenefitskAll"
|
style="margin-right: 30px"
|
:indeterminate="state.isBenefitsIndeterminate"
|
@change="handleCheckBenefitsAllChange"
|
>全选</el-checkbox
|
>
|
<ProFormCheckbox
|
v-model="form.benefits"
|
:value-enum="[]"
|
enumLabelKey="name"
|
enum-value-key="id"
|
@change="handleCheckedBenefitsServicesChange"
|
></ProFormCheckbox>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="任务地点:" prop="areaList">
|
<!-- <ProFromAddressSelect :areaList="form.areaList" :address="form.address" /> -->
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="任务时间:" prop="name">
|
<ProFormDatePicker
|
v-model="form.name"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></ProFormDatePicker>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
</ProForm>
|
<template #footer>
|
<el-button @click="handleBack()">关闭</el-button>
|
<el-button v-if="!isDetail" type="primary" @click="handleConfirm()">保存</el-button>
|
</template>
|
</PageFormLayout>
|
</AppContainer>
|
</LoadingLayout>
|
</template>
|
<script setup lang="ts">
|
import {
|
LoadingLayout,
|
ProForm,
|
ProFormCol,
|
ProFormColItem,
|
AppContainer,
|
PageFormLayout,
|
ProFormItemV2,
|
ProFormText,
|
ProFormInputNumber,
|
ProFormRadio,
|
ProFormDatePicker,
|
ProFormCheckbox,
|
} from '@bole-core/components';
|
import { FormInstance } from 'element-plus';
|
import { Message } from '@bole-core/core';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useGlobalEventContext, useRouteView } from '@/hooks';
|
|
defineOptions({
|
name: 'AddOrEditEmploymentView',
|
});
|
type Props = {
|
isDetail: boolean;
|
};
|
defineProps<Props>();
|
const route = useRoute();
|
const id = route.params.id as string;
|
const isEdit = !!id;
|
|
const eventContext = useGlobalEventContext();
|
|
const { closeViewPush } = useRouteView();
|
|
const state = reactive({
|
checBenefitskAll: false,
|
isBenefitsIndeterminate: false,
|
});
|
|
const form = reactive({
|
name: '',
|
salaryType: 1,
|
ageStart: 0,
|
ageEnd: 0,
|
sexRequirement: 1,
|
manNumber: 0,
|
womanNumber: 0,
|
benefits: [],
|
areaList: [] as number[],
|
address: '',
|
});
|
|
const { isLoading } = useQuery({
|
queryKey: ['flexTaskServices/getFlexTaskDetail', id],
|
queryFn: async () => {
|
return await flexTaskServices.getFlexTaskDetail(
|
{ id: id },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetFlexTaskDetailForBackOutput),
|
onSuccess(data) {
|
form.name = data.taskName;
|
},
|
enabled: isEdit,
|
});
|
|
function handleBack() {
|
closeViewPush(route, {
|
name: 'EmploymentManageList',
|
});
|
}
|
const productFormRef = ref<FormInstance>();
|
function handleConfirm() {
|
if (!productFormRef.value) return;
|
productFormRef.value.validate((valid) => {
|
if (valid) {
|
submit();
|
} else {
|
return;
|
}
|
});
|
}
|
async function submit() {
|
try {
|
let params = {};
|
let res;
|
if (res) {
|
Message.successMessage('操作成功');
|
eventContext.emit(isEdit ? 'employment:edit' : 'employment:add');
|
handleBack();
|
}
|
} catch (error) {}
|
}
|
|
function handleCheckBenefitsAllChange() {}
|
|
function handleCheckedBenefitsServicesChange() {}
|
</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>
|
