场景:新增的时候根据选择框的不同来改变输入信息
例如:
实现方式:这个输入框我做的是业务字典实际的值是0和1,在点击选择框的时候用v-if判断选择的值是1还是0,如果是0则是一个输入信息,如果是1则又是另一个输入信息。
实现代码片:
<el-row :span="24" v-if="formData.courseType === 0">
全部代码:
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" class="views" style="--el-dialog-width: 45%;">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<div style="padding: 8px 0;background: #f8fbff">
<div class="tip">
<div class="bold">1</div><span class="btitle">基本信息</span>
</div>
<el-row :span="24">
<el-form-item label="课程类型" prop="courseType">
<el-select v-model="formData.courseType" placeholder="请选择课程类型">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-row>
<el-row :span="24" v-if="formData.courseType === 0">
<el-form-item label="课程名称" prop="courseName">
<el-input v-model="formData.courseName" placeholder="请输入课程名称" />
</el-form-item>
<!-- <el-form-item label="课程应用范围" prop="courseApplicationScope">
<el-select v-model="formData.courseApplicationScope" placeholder="课程应用范围">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_SOURCE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="年级" prop="grade">
<el-select v-model="formData.grade" placeholder="请选择年级">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.GRADE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="科目" prop="subject">
<el-select v-model="formData.subject"
multiple
placeholder="请选择科目">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SUBJECT)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="学期" prop="term">
<el-select v-model="formData.term" placeholder="请选择学期">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TERM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="课程状态" prop="courseStatus">
<el-select v-model="formData.courseStatus" disabled placeholder="请选择课程状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="备注" prop="remark" class="textarea">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item> -->
</el-row>
</div>
<div style="padding: 8px 0;background: #f8fbff" v-if="formData.courseType === 1">
<el-row :span="24" >
<el-form-item label="课程名称" prop="courseName">
<el-input v-model="formData.courseName" placeholder="请输入课程名称" />
</el-form-item>
<!-- <el-form-item label="课程应用范围" prop="courseApplicationScope">
<el-select v-model="formData.courseApplicationScope" placeholder="课程应用范围">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_SOURCE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="年级" prop="grade">
<el-select v-model="formData.grade" placeholder="请选择年级">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.GRADE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="课程状态" prop="courseStatus">
<el-select v-model="formData.courseStatus" disabled placeholder="请选择课程状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="备注" prop="remark" class="textarea">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item> -->
</el-row>
</div>
<div style="padding: 8px 0;background: #f8fbff;margin-top:10px" v-if="formData.courseType === 0">
<div class="tip" style="margin-top:10px">
<div class="bold">2</div><span class="btitle">收费信息</span>
</div>
<el-row :span="24">
<!-- <el-form-item label="收费方式" prop="chargeMethod">
<el-select v-model="formData.chargeMethod" placeholder="请选择收费方式">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CHARGE_METHOD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="扣课时规则" prop="deduceClassRules">
<el-select v-model="formData.deduceClassRules" placeholder="请选择扣课时规则">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.DEDUCE_CLASS_RULES)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="定价(元)" prop="coursePrice" class=".el-input-number">
<el-input-number v-model="formData.coursePrice" placeholder="请输入定价(元)" />
</el-form-item>
<el-form-item label="学时" prop="courseStudyTime" class=".el-input-number">
<el-input-number v-model="formData.courseStudyTime" placeholder="请输入学时" />
</el-form-item>
</el-row>
</div>
<div style="padding: 8px 0;background: #f8fbff;margin-top:10px" v-if="formData.courseType === 1">
<div class="tip" style="margin-top:10px">
<div class="bold">2</div><span class="btitle">收费信息</span>
</div>
<el-row :span="24">
<!-- <el-form-item label="收费方式" prop="chargeMethod">
<el-select v-model="formData.chargeMethod" placeholder="请选择收费方式">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CHARGE_METHOD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="扣课时规则" prop="deduceClassRules">
<el-select v-model="formData.deduceClassRules" placeholder="请选择扣课时规则">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.DEDUCE_CLASS_RULES)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="定价(元)" prop="coursePrice" class=".el-input-number">
<el-input-number v-model="formData.coursePrice" placeholder="请输入定价(元)" />
</el-form-item>
<el-form-item label="学时" prop="courseStudyTime" class=".el-input-number">
<el-input-number v-model="formData.courseStudyTime" placeholder="请输入学时" />
</el-form-item>
<el-form-item label="折扣" prop="discount" class=".el-input-number">
<el-input-number v-model="formData.discount" placeholder="请输入折扣" />
</el-form-item>
<el-form-item label="赠送课时" prop="giftCourseNumber" class=".el-input-number">
<el-input-number v-model="formData.giftCourseNumber" placeholder="请输入赠送课时" />
</el-form-item>
</el-row>
</div>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">保存并启用</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { CourseManageApi, CourseManageVO } from '@/api/teach/coursemanage'
import { ref } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
/** 课程管理 表单 */
defineOptions({ name: 'CourseManageForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
courseName: undefined,
courseType: undefined,
chargeMethod: undefined,
priceStandard: undefined,
courseStatus: undefined,
grade: undefined,
subject: undefined,
term: undefined,
studentName: undefined,
studentPhone: undefined,
courseSource: undefined,
courseApplicationScope: undefined,
remark: undefined,
deduceClassRules: undefined,
operaName: undefined,
operaTime: undefined,
operaType: undefined,
operaExplain: undefined,
coursePrice: undefined,
courseStudyTime: undefined,
discount: undefined,
giftCourseNumber: undefined,
})
const formRules = reactive({
courseName: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
courseApplicationScope: [{ required: true, message: '课程应用范围不能为空', trigger: 'blur' }],
courseType: [{ required: true, message: '课程类型不能为空', trigger: 'blur' }],
grade: [{ required: true, message: '年级不能为空', trigger: 'blur' }],
subject: [{ required: true, message: '科目不能为空', trigger: 'blur' }],
term: [{ required: true, message: '学期不能为空', trigger: 'blur' }],
courseStatus: [{ required: true, message: '课程状态不能为空', trigger: 'blur' }],
chargeMethod: [{ required: true, message: '收费方式不能为空', trigger: 'blur' }],
deduceClassRules: [{ required: true, message: '扣课时规则不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await CourseManageApi.getCourseManage(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as CourseManageVO
if (formType.value === 'create') {
await CourseManageApi.createCourseManage(data)
message.success(t('common.createSuccess'))
} else {
await CourseManageApi.updateCourseManage(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
courseName: undefined,
courseType: undefined,
chargeMethod: undefined,
priceStandard: undefined,
courseStatus: undefined,
grade: undefined,
subject: undefined,
term: undefined,
studentName: undefined,
studentPhone: undefined,
courseSource: undefined,
courseApplicationScope: undefined,
remark: undefined,
deduceClassRules: undefined,
operaName: undefined,
operaTime: undefined,
operaType: undefined,
operaExplain: undefined,
coursePrice: undefined,
courseStudyTime: undefined,
discount: undefined,
giftCourseNumber: undefined,
}
formRef.value?.resetFields()
}
</script>
<style scoped lang="scss">
.el-form-item{
width: 47%;
}
.bold{
width: 20px;
height:20px;
border-radius: 50%;
background:#85afd5;
text-align: center;
margin-top:5px;
margin-left:-10px;
color:#fff
}
.btitle{
line-height:30px;
margin-left:10px;
color:#84b0d5
}
.tip{
border:1px solid #84b0d5;
border-radius:0 20px 20px 0;
width:140px;
height:30px;
display:flex;
margin-left:30px;
margin-bottom:20px
}
:deep(.el-form-item__content){
display: block;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
width: -webkit-fill-available;
}
.textarea{
width: 94%;
}
:deep(.views>.el-dialog__body){
padding: calc(var(--el-dialog-padding-primary) - 20px) var(--el-dialog-padding-primary);
}
:deep(.el-form-item__label){
width: 108px !important;
}
.el-input-number{
width: 230px !important;
}
</style>
标签:el,const,undefined,value,选择,输入框,Vue3,message,true
From: https://blog.csdn.net/qq_50684356/article/details/140838724