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

news2024/10/6 20:37:06

在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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ios环境搭建_xcode安装及运行源码

目录 1 xcode 介绍 2 xcode 下载 3 xocde 运行ios源码 1 xcode 介绍 Xcode 是运行在操作系统Mac OS X上的集成开发工具&#xff08;IDE&#xff09;&#xff0c;由Apple Inc开发。Xcode是开发 macOS 和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计&#xff0…

Apache Flink连载(十八):Flink On Yarn运行原理及环境准备

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. Flink On Yarn运行原理…

迅为RK3588开发板RTMP推流之视频监控之搭建 RTMP 媒流体服务器

1.安装 nginxrtmp 运行所要用到的库和依赖环境 apt-get update apt-get install build-essential libpcre3 libpcre3-dev libssl-dev zlib1g-dev openssl 2. 下 载 nginx-1.20.2 源 码 ( 下 载 地 址 &#xff1a; http://nginx.org/download/nginx-1.20.2.tar.gz) 和nginx-…

在Spring Cloud中使用Ribbon完成一个简单的负载均衡demo

Spring Cloud系列断更了有一段时间了&#xff0c;这段时间最近都在忙着项目上的事&#xff0c;天天修复bug以及调整需求&#xff0c;反正各种操劳&#xff0c;了解业务需求&#xff0c;然后开发相关功能&#xff0c;很久都没碰Spring Cloud系列的相关文章了&#xff0c;最近回头…

数据结构第0章 初识

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 本篇笔记整理&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 0、思维导图1、数据结构1&#xff09;数据结构是什么&am…

如何取消ChatGPT Plus 订阅服务,不取消订阅有什么影响?取消了又如何再次订阅

一、前言 很多小伙伴给我反馈说自己不会取消chatgpt的plus订阅&#xff0c;今天就来给大家分享一下如何取消ChatGPTPlus订阅 ChatGPTplus快速订阅升级方法 二、不取消订阅有什么影响&#xff1f; 1、账号被风控&#xff08;有些可以使用3.5但是不能在升级4.0&#xff09; …

【Java】云HIS云计算医院信息平台源码

云HIS系统可实现“云部署”&#xff0c;即可实现在云计算下的多种部署模式。系统采用SaaS服务模式的新驱动&#xff0c;功能设计充分合理&#xff0c;界面布局合理美观&#xff0c;每个用户可具有个性化工作台。 一、系统特色 使用简易化 即开即用&#xff0c;快速复制&#…

前端实现websocket类封装

随着Web应用程序的发展&#xff0c;越来越多的人开始利用Websocket技术来构建实时应用程序。Websocket是一种在客户端和服务器之间建立持久连接的协议。这种协议可以在一个单独的连接上实现双向通信。与HTTP请求-响应模型不同&#xff0c;Websocket允许服务器自主地向客户端发送…

Flutter配置Android和IOS允许http访问

默认情况下&#xff0c;Android和IOS只支持对https的访问&#xff0c;如果需要访问不安全的连接&#xff0c;也就是http&#xff0c;需要做以下配置。 Android 在res目录下的xml目录中(如果不存在&#xff0c;先创建xml目录)&#xff0c;创建一个xml文件network_security_con…

八股文打卡day12——计算机网络(12)

面试题&#xff1a;HTTPS的工作原理&#xff1f;HTTPS是怎么建立连接的&#xff1f; 我的回答&#xff1a; 1.客户端向服务器发起请求&#xff0c;请求建立连接。 2.服务器收到请求之后&#xff0c;向客户端发送其SSL证书&#xff0c;这个证书包含服务器的公钥和一些其他信息…

Codeforces Round 917 (Div. 2)更新中...

A.Least Product(思维) 题意&#xff1a; 给出一个数组 a 1 , a 2 , . . . , a n a_1, a_2, ..., a_n a1​,a2​,...,an​&#xff0c;你可以进行若干次以下操作&#xff1a; 选择数组中的一个元素 a i a_i ai​&#xff0c;将这个数字修改为 0 ∼ a i 0 \sim a_i 0∼ai​之…

《Spring Cloud学习笔记:微服务保护Sentinel》

Review 解决了服务拆分之后的服务治理问题&#xff1a;Nacos解决了服务治理问题OpenFeign解决了服务之间的远程调用问题网关与前端进行交互&#xff0c;基于网关的过滤器解决了登录校验的问题 流量控制&#xff1a;避免因为突发流量而导致的服务宕机。 隔离和降级&#xff1a…

XIAO ESP32S3之物体检测加入视频流

一、前言 由于XIAO ESP32S3开发套件没有显示屏配件&#xff0c;因此加入http视频流功能&#xff0c;可通过浏览器请求ESP32S3上的视频流。 二、思路 1、XIAO ESP32S3启动后通过wifi连接到AP&#xff1b; 2、启动http服务器&#xff0c;注册get_mjpeg处理函数&#xff1b; 3…

判断电话号码是否重复-excel

有时候重复的数据不需要或者很烦人&#xff0c;就需要采取措施&#xff0c;希望以下的方法能帮到你。 1.判断是否重复 方法一&#xff1a; 1&#xff09;针对第一个单元格输入等号&#xff0c;以及公式countif(查找记录数的范围&#xff0c;需要查找的单元格&#xff09; 2…

Linux:不同计算机使用NFS共享资源

一&#xff0c;安装NFS文件系统 NFS即网络文件系统(network file system)&#xff0c;它允许网络中的计算机之间通过网络共享资源。目前&#xff0c;NFS只用于在Linux和UNIX主机间共享文件系统。 #使用mount命令可以将远程主机的文件系统 安装到 本地&#xff1a; #将远程主机…

2.3_3 进程互斥的硬件实现办法

2.3_3 进程互斥的硬件实现办法 1.中断屏蔽方法 利用“开/关中断指令”实现&#xff08;与原语的实现思想相同,即在某进程开始访问临界区到结束访问为止都不允许被中断,也就不能发生进程切换,因此也不可能发生两个同时访问临界区的情况&#xff09; 优点&#xff1a;简单、高效…

浏览器Post请求出现413 Request Entity Too Large (Nginx)

环境 操作系统 window server 2016 前端项目 Vue2 Nginx-1.25.3 一、错误信息 前端是vue项目&#xff0c;打包后部署在Nginx上&#xff0c;前端post请求出现Request Entity Too Large错误信息。 ​这种问题一般是请求实体太大&#xff08;包含参数&#xff0c;文件等&#xf…

是德科技E9304A功率传感器

是德科技E9304A二极管功率传感器测量频率范围为9 kHz至6 GHz的平均功率&#xff0c;功率范围为-60至20 dBm。该传感器非常适合甚低频(VLF)功率测量。E系列E9304A功率传感器有两个独立的测量路径&#xff0c;设计用于EPM系列功率计。功率计自动选择合适的功率电平路径。为了避免…

HTML制作暴雨特效

🎀效果展示 🎀代码展示 <body> <!-- partial:index.partial.html --> <canvas id="canvas-club">

c语言结构体(初阶)

1. 结构体的声明 1.1 结构体的基础知识 结构是一些值的集合&#xff0c;这些值被称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member - list; }variable-list; 例&#xff1a;描述一个人的信息&#xff1a;名字电话性别身高 //声明的…