vue3+elementPlus:el-drawer新增修改弹窗复用

在el-drawer的属性里设置:title属性,和重置函数

//html
 <!-- 弹窗  -->
  <el-drawer
    v-model="drawer"
    :title="title"
    :size="505"
    :direction="direction"
    :before-close="handleClose"
  >
    <el-form
      label-position="top"
      :inline="true"
      ref="ruleFormRef"
      size="default"
      :model="form.queryParams"
      class="RuleForm"
      :rules="rules"
      :label-position="labelPosition"
      status-icon
    >
      <el-form-item label="型号" prop="bearingModel">
        <el-input
          v-model="form.queryParams.bearingModel"
          placeholder="请添加型号"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="factoryName">
        <el-select
          v-model="form.queryParams.factoryName"
          placeholder="请选择供应商名称"
          clearable
        >
          <el-option
            v-for="item in Code.bearingData"
            :key="item.id"
            :label="item.factoryName"
            :value="item.factoryName"
            @click="changeSelect(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接触角" prop="contactAngle">
        <el-input-number
          v-model="form.queryParams.contactAngle"
          :step="1"
          :min="0"
          placeholder="请添加接触角"
          controls-position="right"
        />
      </el-form-item>
      
   ......
   
    </el-form>
    <el-form-item>
      <el-button
        v-if="title == '新增轴承信息'"
        type="primary"
        @click="onRuleSubmit">创建</el-button>
      <el-button v-else type="primary" @click="onRuleSave">保存</el-button>
      <el-button type="primary" plain @click="onRuleReset(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-drawer>


//data
 const title = ref("")//弹窗标题

//js
//新增按钮
const onForm = () => {
  reset() // 重置表单
  drawer.value = true
  title.value = "新增轴承信息"  // 标题为“新增”
}
//新增 保存按钮
const onRuleSubmit = () => {
  const objAdd = {
    bearingModel: form.queryParams.bearingModel,
    factoryID: selectData.value.id,
    factoryName: selectData.value.factoryName,
    contactAngle: Math.floor(form.queryParams.contactAngle),
  };
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      BearingAdd(objAdd).then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: '提示',
            message: '新增成功',
            type: 'success',
          })
          getBearingList()
          ruleFormRef.value.resetFields()
          drawer.value = false
        }
      })
    } else {
      ElNotification({
        title: '提示',
        message: '提交字段内容错误!!!',
        type: 'warning',
      })
      return false
    }
  })
}
//详情 编辑按钮
const onRuleForm = (row) => {
  drawer.value = true;
  title.value = "编辑轴承信息" // 标题为“编辑”
  BearingDetail({
    id: row.id,
  }).then((res) => {
    if (res.status === 200) {
      drawer.value = true;
      form.queryParams = res.data.data;
    }
  });
};
//编辑 保存按钮
const onRuleSave = (val) => {
  const objSave = {
    id: form.queryParams.id,
    bearingModel: form.queryParams.bearingModel,
    factoryID: selectData.value.id,
    factoryName: selectData.value.factoryName,
    contactAngle: Math.floor(form.queryParams.contactAngle),
  };
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      BearingEdit(objSave).then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: "提示",
            message: "修改成功",
            type: "success",
          });
          drawer.value = false;
          getBearingList();
        }
      });
    } else {
      ElNotification({
        title: "提示",
        message: "提交字段内容错误!!!",
        type: "warning",
      });
      return false;
    }
  });
};


//表单重置 
const reset = () => {
  form.queryParams = {
    bearingModel: undefined,
    factoryID: undefined,
    factoryName: undefined,
    contactAngle: undefined,
  };
}

上一篇文章, 

uniapp踩坑之项目:使用过滤器将时间格式化为特定格式_uniapp过滤器-CSDN博客文章浏览阅读446次。uniapp踩坑之项目:使用过滤器将时间格式化为特定格式,利用filters过滤器对数据直接进行格式化,注意:与method、onLoad、data同层级_uniapp过滤器https://blog.csdn.net/weixin_43928112/article/details/134807024

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/275277.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

yolov8 细胞分割数据集准备及训练

1、数据 下载:https://universe.roboflow.com/motherson-hm/5-part-diff 500来张,5个类别(嗜碱性细胞、嗜酸细胞、淋巴细胞、单核细胞、中性粒细胞) yolo 分割数据标注格式: 与检测类似,就是坐标分割有多个 2、训练 训练yaml: seg_data.yaml (与检测格式一样) …

Guava自加载缓存LoadingCache使用指南

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;今天我们来聊聊缓存。在Java世界里&#xff0c;高效的缓存机制对于提升应用性能、降低数据库负担至关重要。想象一下&#xff0c;如果每次数据请求都要跑到数据库里取&#xff0c;那服务器岂不是要累趴了&#x…

SpringBoot发布项目到docker

Dockerfile FROM openjdk:11 # 作者 MAINTAINER chenxiaodong<2774398338qq.com># 安装 vim # RUN yum -y install vim# 环境变量 # 进入容器后的默认工作目录 ENV WORKPATH /usr/local/webapp ENV EXECFILE Docker2Application-0.0.1-SNAPSHOT.jarRUN mkdir -p $WORKPA…

论文分享 | 利用单模态自监督学习实现多模态AVSR

以下文章来源于智能语音新青年 &#xff0c;作者ttslr 论文地址&#xff1a; https://aclanthology.org/2022.acl-long.308.pdf 代码仓库&#xff1a; https://github.com/LUMIA-Group/Leveraging-Self-Supervised-Learning-for-AVSR 训练一个基于Transformer的模型需要大量的…

从0开始学前端day1

script setup 在script里写一个setup的作用 自动注册子组件属性和方法无需返回&#xff0c;执行完后自动更新支持props和context Vue 3中的props和context props是一种用于父子组件通信的机制。父组件可以通过props向子组件传递数据&#xff0c;子组件则可以通过props接收来…

Android : 画布绘制矩形和文字 让其居中显示简单应用

示例图&#xff1a; CenterView.java package com.example.demo;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.Log; import android.view.View;public class Center…

大数据Doris(四十二):使用物化视图

文章目录 使用物化视图 一、​​​​​​​创建物化视图

听GPT 讲Rust源代码--src/tools(29)

File: rust/src/tools/clippy/clippy_lints/src/unused_peekable.rs 在Rust源代码中&#xff0c;rust/src/tools/clippy/clippy_lints/src/unused_peekable.rs这个文件是Clippy工具中一个特定的Lint规则的实现文件&#xff0c;用于检测未使用的Peekable迭代器。 Peekable迭代器…

Bind for 0.0.0.0:2379 failed: port is already allocated

1、执行命令docker-compose -p docker-apisix up -d 报错 Error response from daemon: driver failed programming external connectivity on endpoint docker-apisix-etcd-1 (2a92a0cefff9194fcd1dad4bdeabf4201d9047ec2633eda455c6e46528668af4): Bind for 0.0.0.0:2379 fa…

Pandas教程(三)—— 数据清洗与准备

1.处理缺失值 1.1 数据删除函数 作用&#xff1a;删除Dataframe某行或某列的数据 语法&#xff1a;df.drop&#xff08; labels [ ] &#xff09; drop函数的几个参数&#xff1a; labels &#xff1a;接收一个列表&#xff0c;内含删除行 / 列的索引编号或索引名 axis &…

用友薪福社解决社会化用工难题,助力企业走上“降本增效”之路

“就业”一直是人们关注的重点。用人需求与求职人数环比均明显上升&#xff0c;人力资源市场活跃度也明显增强&#xff0c;但供求关系整体仍旧偏紧。在行业快速发展的前提下&#xff0c;如何快速缓解企业用工荒难题&#xff0c;成为当前诸多企业面临的困境。为了科学合规地降低…

金融贷款行业怎么精准获客,电销打吐了!教你两招

助贷行业&#xff0c;一般都会设有kpi&#xff0c;压力竞争都不小。虽然现在贷款电销大家对此意见不同&#xff0c;但是&#xff0c;不可否认&#xff0c;这个行业&#xff0c;电销就是它们最快速的获客方式。只要耐得住性子&#xff0c;有一份精准的话单&#xff0c;就可以开工…

二叉树数据结构:深入了解二叉树的概念、特性与结构

在探索栈和队列之后&#xff08;大家可以移步至我的数据结构专栏&#xff09;&#xff1a;T-rLN的数据结构专栏 我们转向了更为复杂而有趣的数据结构——二叉树。本文将引领我们进入二叉树的世界&#xff0c;从最基本的概念和结构开始&#xff0c;逐步深入了解二叉树的顺序结构…

Postman使用

Postman使用 Pre-request Script 参考&#xff1a; Scripting in Postman 可以请求、集合或文件夹中添加Pre-request Script&#xff0c;在请求运行之前执行JavaScript 如设置变量值、参数、Header和正文数据&#xff0c;也可以使用Pre-request Script来调试代码&#xff0…

解决Hive在DataGrip 中注释乱码问题

注释属于元数据的一部分&#xff0c;同样存储在mysql的metastore库中&#xff0c;如果metastore库的字符集不支持中文&#xff0c;就会导致中文显示乱码。 不建议修改Hive元数据库的编码&#xff0c;此处我们在metastore中找存储注释的表&#xff0c;找到表中存储注释的字段&a…

【汇编笔记】初识汇编-内存读写

汇编语言的由来&#xff1a; CPU是计算机的核心&#xff0c;由于计算机只认识二进制&#xff0c;所以CPU执行的指令是二进制。 我们要想让CPU工作&#xff0c;就得给他提供它认识的指令&#xff0c;这一系列的指令的集合&#xff0c;称之为指令集。 指令集&#xff1a; 不同的体…

VR全景图片制作时有哪些技巧,VR全景图片能带来哪些好处

引言&#xff1a; VR全景图片是通过虚拟现实技术制作出的具有沉浸感的图片&#xff0c;能够提供给用户一种身临其境的感觉。在宣传方面&#xff0c;它有着独特的优势和潜力&#xff0c;能够帮助吸引更多的潜在客户&#xff0c;那么VR全景图片制作时有哪些技巧&#xff0c;VR全…

【科普】家长们:如何早期发现孩子的听力问题?

孩子太小还不会说话&#xff0c; 或表达不准确&#xff0c; 家长往往很难发现他们听力下降&#xff1b; 那在生活中 如何发现孩子听力异常呢&#xff1f; 1、新生儿听力筛查 每一个新生儿出生后都要求做听力筛查&#xff0c;这样可以及早判断是否存在听力障碍的可能&#…

【Java 进阶篇】Jedis 操作 Set 与 SortedSet 详解

Redis 是一个强大的键值存储系统&#xff0c;而 Jedis 是 Redis 的 Java 客户端&#xff0c;为 Java 开发者提供了方便的操作接口。在这篇博客中&#xff0c;我们将深入探讨 Jedis 如何操作 Redis 中的 Set 和 SortedSet 数据结构。无论你是初学者还是有一些经验的开发者&#…

javaEE -18(11000字 JavaScript入门 - 3)

一&#xff1a;事件 &#xff08;高级&#xff09; 1.1 注册事件&#xff08;绑定事件&#xff09; 给元素添加事件&#xff0c;称为注册事件或者绑定事件&#xff0c;注册事件有两种方式&#xff1a;传统方式和方法监听注册方式 传统注册方式 &#xff1a; 利用 on 开头的…