<template>
|
<ContentScrollView :paddingH="false">
|
<nut-form :model-value="form" ref="formRef" :rules="rules">
|
<nut-form-item label="资源名称:" class="bole-form-item" prop="title" required>
|
<nut-input
|
v-model.trim="form.title"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入资源名称"
|
type="text"
|
:max-length="20"
|
/>
|
</nut-form-item>
|
<nut-form-item label="交付人数:" class="bole-form-item" prop="resourceCount" required>
|
<NumberInput
|
v-model.trim="form.resourceCount"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入可交付人数"
|
:min="1"
|
/>
|
</nut-form-item>
|
<nut-form-item label="所在城市:" class="bole-form-item" prop="cities" required>
|
<ChooseInputWithAreaSheet
|
v-model="form.cities"
|
placeholder="请选择资源所在的城市"
|
:max="1"
|
/>
|
<!-- <ChooseInputWithAreaPicker
|
:columns="cityAreaTree"
|
v-model="form.citiesList"
|
placeholder="清添加工作地点"
|
></ChooseInputWithAreaPicker> -->
|
</nut-form-item>
|
<nut-form-item label="意向城市:" class="bole-form-item" prop="intendedDeliveryCity" required>
|
<ChooseInputWithAreaSheet
|
v-model="form.intendedDeliveryCity"
|
placeholder="请选择意向交付的城市"
|
:max="1"
|
/>
|
</nut-form-item>
|
<nut-form-item label="行业类型:" class="bole-form-item" prop="industryTypeId" required>
|
<ChooseInputWithPicker
|
v-model="form.industryTypeId"
|
placeholder="请选择行业类型"
|
:value-enum="industryCategoryList"
|
enum-label-key="name"
|
enum-value-key="id"
|
/>
|
</nut-form-item>
|
<nut-form-item label="合作费用:" class="bole-form-item" prop="cooperationFee" required>
|
<nut-input
|
v-model.trim="form.cooperationFee"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写您的意向合作费用"
|
type="text"
|
/>
|
</nut-form-item>
|
</nut-form>
|
</ContentScrollView>
|
<PageFooter :isOnlyAction="false">
|
<PageFooterBtn type="primary" @click="handleNext">下一步</PageFooterBtn>
|
</PageFooter>
|
</template>
|
|
<script setup lang="ts">
|
import { usePublishResourceContext } from './context';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import {
|
ChooseInputWithPicker,
|
ChooseInputWithAreaSheet,
|
NumberInput,
|
ChooseInputWithAreaPicker,
|
} from '@12333/components';
|
import { useAllSearchSettingList } from '@12333/hooks';
|
import { SearchType } from '@12333/constants';
|
import { FormValidator } from '@12333/utils';
|
|
defineOptions({
|
name: 'PublishResourceStep1',
|
});
|
|
const { goToNext, form } = usePublishResourceContext();
|
|
const { allSearchSettingList: industryCategoryList } = useAllSearchSettingList({
|
searchType: SearchType.IndustryCategory,
|
enabled: true,
|
status: true,
|
});
|
|
const rules = reactive<FormRules>({
|
title: [{ required: true, message: '请输入资源名称' }],
|
resourceCount: [
|
{
|
required: true,
|
message: '请输入可交付人数',
|
validator: FormValidator.validatorNumberNotNull,
|
},
|
],
|
industryTypeId: [{ required: true, message: '请选择行业类型' }],
|
cities: [
|
{ required: true, message: '请选择资源所在的城市', validator: FormValidator.validatorArray },
|
],
|
intendedDeliveryCity: [
|
{ required: true, message: '请选择意向交付的城市', validator: FormValidator.validatorArray },
|
],
|
cooperationFee: [{ required: true, message: '请填写您的意向合作费用' }],
|
});
|
|
const formRef = ref<any>(null);
|
|
function handleNext() {
|
if (!formRef.value) return;
|
formRef.value.validate().then(({ valid, errors }: any) => {
|
if (valid) {
|
goToNext();
|
}
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
</style>
|
