首页 > 其他分享 >Vue3选择框选择不同的值输入框刷新变化

Vue3选择框选择不同的值输入框刷新变化

时间:2024-08-01 09:26:09浏览次数:13  
标签:el const undefined value 选择 输入框 Vue3 message true

场景:新增的时候根据选择框的不同来改变输入信息

例如:

实现方式:这个输入框我做的是业务字典实际的值是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

相关文章

  • SpringCloud+Vue3主子表插入数据(芋道)
    目的:多表联查获取到每个班级里面所有的学生上课的信息。点击消课插入到消课主表和消课子表,主表记录班级信息,消课人员信息,上课时间。子表记录上课学员的信息,学员姓名、手机号、班级名称、班级类型、上课时间、老师名称前端:<template><Dialog:title="dialogTitle"v-mode......
  • vue3 自定义渲染,渲染函数实现,配置渲染render函数,低代码配置自定义渲染函数核心实现
    代码父组件<template><divclass="component-name"><!--全局自动的icon--><Extend:render="render"/></div></template><scriptsetuplang="ts">import{ref,reac......
  • java算法递归算法之选择排序
    快速排序的原理就是将数组进行分区,分为三个区,然后如果每个区都是有序数组的话,就已经达成了我们的目标小于基准值的数组组成的子数组基准值大于基准值的数组组成的子数组因此我们需要重复以上的步骤,分别对1和3也选择基准值进行分区,直到数组中最后只剩0个或者1个,那么就达到目标......
  • Cuberite——低配mc服务器的最佳选择
    最近白嫖了一个1h1g的服务器,想拿它来开mc服务器,正当我用mcsmanager开服的时候,突然给我报了一条OutOfMemoryError下面就给大家介绍一下CubreiteCuberiteCuberiteisaMinecraft-compatiblemultiplayergameserverthatiswritteninC++anddesignedtobeefficientwith......
  • 饮冰十年-人工智能-Vue3-67-组件间数据交互
    上一篇:饮冰三年-人工智能-Vue-66Vue组件化很久以前我对Vue2的组件间数据交互做过学习,兜兜转转再用Vue已经是Vue3版本。Vue3组件间数据交互1、准备工作环境准备使用Vite创建一个新的Vue3项目功能介绍该功能由APPVue+4个组件组成  ......
  • Java还是C#?我该如何选择?给年轻人的建议...
    一.年轻人应该通吃其实这不应该是我们真正的主题,而且入了行的也很少会java还是c#这么比,但初学的,java和c#往往就代表了两大流派,java代替了j2ee,c#代替了.net,ok,没有关系,这么作为title,不影响我们说事。C#和Java这俩代码风格常相似,小孩子和老人才做选择,年轻人当然通吃!本人老年不正经......
  • 加油,为Vue3提供一个可媲美Angular的ioc容器
    为什么要为Vue3提供ioc容器Vue3因其出色的响应式系统,以及便利的功能特性,完全胜任大型业务系统的开发。但是,我们不仅要能做到,而且要做得更好。大型业务系统的关键就是解耦合,从而减缓shi山代码的生长。而ioc容器是目前最好的解耦合工具。Angular从一开始就引入了ioc容器,因此在业务......
  • vue3屏幕适配
    通过两个插件来实现  postcss-pxtorem和  amfe-flexible 在main.js中导入import"amfe-flexible";在vite.config.js中配置css:{postcss:{plugins:[postcssPxtoRem({rootValue:192,//根据使用的ui组件?定义根元素大小?......
  • 在Vue3中创建动态主题切换功能
    随着现代Web开发的进步,用户体验变得愈发重要。在这方面,实现动态主题切换功能无疑是提高用户体验的有效方式。通过动态主题切换,用户可以根据自己的喜好选择明亮的主题或暗色主题,提供了更个性化、更舒适的使用体验。今天,我们将通过一个简洁的示例来展示,如何在Vue3中实现动态......
  • Vue3 - 最新详细实现网站内部打开预览 office 全套附件,在页面弹窗内解析预览 word文档
    前言如果您需要Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现项目内部“打开解析预览各种office文档”通用预览插件,支持弹出一个窗口在弹框内预览或者直接显示在页面某个div容器里面,解析预览word文档、excel电子表格、ppt演示文稿、pdf文档、txt文......