Browse Source

feat(coach): 优化作业发布页面

- 为表单添加校验规则,确保必填字段不为空
- 优化表单布局,使用 fui-form 组件包裹表单元素
- 修改部分表单字段名称,使其更具描述性
- 添加表单提交前的验证逻辑,提高数据完整性
master
liutong 12 months ago
parent
commit
033a38694f
  1. 56
      pages/coach/job/add.vue

56
pages/coach/job/add.vue

@ -1,7 +1,7 @@
<!--发布作业--> <!--发布作业-->
<template> <template>
<view class="main_section"> <view class="main_section">
<view class="formData"> <fui-form class="formData" ref="form">
<view class="radio_input"> <view class="radio_input">
<fui-form-item label="作业类型" asterisk> <fui-form-item label="作业类型" asterisk>
<fui-radio-group name="radio" v-model="formData.type" @change="changeType"> <fui-radio-group name="radio" v-model="formData.type" @change="changeType">
@ -25,12 +25,15 @@
</view> </view>
<view> <view>
<fui-input required label="班级" borderTop placeholder="请选择班级" v-model="formData.class_name" @click="show_class=true"></fui-input> <fui-input required label="班级" borderTop placeholder="请选择班级" v-model="formData.classes_id_name"
<fui-picker layer="1" :linkage="true" :options="options_class_arr" :show="show_class" @change="changeClass" @cancel="show_class=false"></fui-picker> @click="show_class=true"></fui-input>
<fui-picker layer="1" :linkage="true" :options="options_class_arr" :show="show_class" @change="changeClass"
@cancel="show_class=false"></fui-picker>
</view> </view>
<view v-if="formData.type != 1"> <view v-if="formData.type != 1">
<fui-input required label="学员" borderTop placeholder="请选择学员" v-model="formData.students_ids_name" @click="show_student=true"></fui-input> <fui-input required label="学员" borderTop placeholder="请选择学员" v-model="formData.students_ids_name"
@click="show_student=true"></fui-input>
<!--下拉多选--> <!--下拉多选-->
<fui-select <fui-select
:show="show_student" :show="show_student"
@ -49,20 +52,22 @@
</view> </view>
<view> <view>
<fui-input required label="课程" borderTop placeholder="请选择课程" v-model="formData.course_name" @click="show_course=true"></fui-input> <fui-input required label="课程" borderTop placeholder="请选择课程" v-model="formData.course_id_name"
@click="show_course=true"></fui-input>
<fui-picker <fui-picker
layer="1" layer="1"
:linkage="true" :linkage="true"
:options="options_course_arr" :show="show_course" @change="changeCourse" @cancel="show_course=false"></fui-picker> :options="options_course_arr" :show="show_course" @change="changeCourse"
@cancel="show_course=false"></fui-picker>
</view> </view>
<view> <view>
<fui-textarea required flexStart label="作业" placeholder="请输入内容" v-model="formData.homework"></fui-textarea> <fui-textarea required flexStart label="作业" placeholder="请输入内容" v-model="formData.content_text"></fui-textarea>
</view> </view>
<view class="submet_btn" @click="submetForm">提交</view> <view class="submet_btn" @click="submetForm">提交</view>
</view>
</fui-form>
<!-- 底部导航--> <!-- 底部导航-->
<AQTabber/> <AQTabber/>
</view> </view>
@ -72,6 +77,24 @@
import memberApi from '@/api/member.js'; import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
//
const rules = [
{
name: "classes_id_name",
rule: ["required"],
msg: ["请选择班级"]
},
{
name: "course_id_name",
rule: ["required"],
msg: ["请选择课程"]
},
{
name: "content_text",
rule: ["required"],
msg: ["请输入作业内容"]
},
];
export default { export default {
components: { components: {
AQTabber, AQTabber,
@ -199,14 +222,14 @@ export default {
changeClass(e) { changeClass(e) {
console.log('选择器-班级', e); console.log('选择器-班级', e);
this.formData.class_id = e.value; // class_id this.formData.class_id = e.value; // class_id
this.formData.class_name = e.text; // class_name this.formData.classes_id_name = e.text; // class_name
this.show_class = false; // this.show_class = false; //
}, },
//- //-
changeCourse(e) { changeCourse(e) {
console.log('选择器-课程', e); console.log('选择器-课程', e);
this.formData.course_id = e.value; // course_id this.formData.course_id = e.value; // course_id
this.formData.course_name = e.text; // course_name this.formData.course_id_name = e.text; // course_name
this.show_course = false; // this.show_course = false; //
}, },
//- //-
@ -237,10 +260,23 @@ export default {
} }
}, },
async validatorForm(data) {
let res = await this.$refs.form.validator(data, rules)
return res
},
// //
async submetForm(){ async submetForm(){
let data = {...this.formData} let data = {...this.formData}
console.log('提交',data) console.log('提交',data)
let vf = await this.validatorForm(data)
if(!vf.isPassed){
console.log('验证',vf)
return
}
return return
let res = await memberApi.jlPublishJob(data) let res = await memberApi.jlPublishJob(data)

Loading…
Cancel
Save