后台列表复制功能

news2024/12/24 2:09:17

   html:

<el-button @click="copy(row)">复制</el-button>

<!-- 复制弹框 -->
<el-dialog :close-on-click-modal="false" title="复制" width="600px" 
    :visible.sync="copyVisible" append-to-body>
  <el-form ref="formData" :model="formData" :rules="rules"
    label-width="100px" v-loading="copyLoading">
    <el-form-item label="活动名称: " prop="title">
      <el-input v-model="formData.title" type="text" placeholder="请输入活动名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="copyTableData">提交</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

js变量:

data () {
    return {
       // 复制弹框显示和隐藏
       copyVisible: false,
       // 复制loading
       copyLoading: false,
       // 表单数据
       formData: {
         id: "",
         title: "",
       },
       rules: {
         title: [ { required: true, message: '请输入活动名称', trigger: 'blur', } ]
       }
    }
},

js方法:

/**
 * 复制弹框显示
 */
copy(row) {
  Object.keys(this.formData).forEach(key => {
    this.formData[key] = row[key];
  });
  this.copyVisible = true;
},
/**
 * 复制数据
 */
copyTableData() {
  this.$refs['formData'].validate(async valid => {
    if (valid) {
      this.$confirm("确定复制?", "提示", { type: "warning" })
        .then(async () => {
          this.copyLoading = true;
          let params =  { ...this.formData };
          let res = await activityInfo.copy(params);
          try {
            if (res.code == 200) {
              this.copyLoading = false;
              this.copyVisible = false;
              this.$message.success(`复制成功`);
              this.listQuery.page = 1;
              this.getList();
            } else {
              this.copyLoading = false;
              this.$message.error(`复制失败`);
            };
          } catch (error) {
            this.copyLoading = false;
          };
        });
    } else {
      return false;
    };
  });
}

效果图:

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

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

相关文章

博世战胜三星,577亿最大笔收购,豪赌杀入自动化新业务

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 德国工业巨头博世再次震惊业界&#xff01;近日&#xff0c;这家总部位于斯图加特的科技公司以74亿欧元&#xff08;约合人民币577亿&#xff09…

自动化测试常用函数(Java方向)

目录 一、元素的定位 1.1 cssSelector 1.2 xpath 1.2.1 获取HTML页面所有的节点 1.2.2 获取HTML页面指定的节点 1.2.3 获取⼀个节点中的直接子节点 1.2.4 获取⼀个节点的父节点 1.2.5 实现节点属性的匹配 1.2.6 使用指定索引的方式获取对应的节点内容 二、操作测试对…

麒麟系统如何删除光盘刻录痕迹??

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

一文解读ReentrantLock

本期说一下ReentrantLock的相关面试题。 Lock接口 是JDK层面锁 悲观锁 可重入锁。&#xff08;可重入锁&#xff08;Reentrant Lock&#xff09;是一种支持线程重复获取锁的锁机制。当一个线程已经获得了可重入锁后&#xff0c;它可以再次请求该锁而不会被阻塞&#xff0c;这就…

第G6周:CycleGAN实战

本文为365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊 可参考论文&#xff1a;《Unpaired Image-to-Image Translation》 1、CycleGAN 能做什么&#xff1f; CycleGAN的一个重要应用领域是Domain Adaptation&#xff08;域迁移&#xff1a;可以通俗的理解为…

Stable Diffusion 使用详解(5)---- 光影效果与场景融入

目录 背景 底模选取 提示词 ControlNet openpose illumination 效果 背景 有一家服装品牌店&#xff0c;需要绘制一款模特穿着某个英文LOG的漂亮服装&#xff0c;这是一种很常见UI作画需求&#xff0c;这类需求实际上可以透过选取正确的底模 controlNet 进行完美的实现…

vite vue3 Webstorm multiple export width the same name “default“

系统格式不一样&#xff0c;导致代码文件格式冲突导致的&#xff0c;解决方法找到对应的文件&#xff0c;将文件类型切换成LF。

软件测试--兼容性测试

兼容性测试综述 软件兼容性测试是指检查软件之间是否能够正确的交互和共享信息 交互可以同时运行于同一台计算机上的两个程序之间&#xff0c;甚至在相隔几千公里通过因特网连接的不同计算机上的两个程序之间进行。还可以离线介质如导出到介质然后导入到其他计算机的其他软件…

2024年最新护眼台灯攻略:孩视宝、飞利浦和书客护眼台灯哪个好

在当今数字时代&#xff0c;无论是工作还是学习&#xff0c;长时间面对电子屏幕已成为日常。这对眼睛健康提出了挑战&#xff0c;尤其是对于成长中的孩子&#xff0c;正确的照明环境对保护视力至关重要。因此&#xff0c;选择一款高质量的护眼台灯成为了许多家庭的刚需。 如今…

OPenCV高级编程——OPenCV形态学之腐蚀、膨胀、开运算、闭运算、形态学梯度等详解

目录 引言 形态学基础 结构元素&#xff08;Structuring Element&#xff09; 基本形态学操作 腐蚀&#xff08;Erosion&#xff09; 膨胀&#xff08;Dilation&#xff09; 开运算&#xff08;Opening&#xff09; 闭运算&#xff08;Closing&#xff09; 高级形态学…

读零信任网络:在不可信网络中构建安全系统06授权

1. 授权 1.1. 授权决策不容忽视&#xff0c;所有访问请求都必须被授权 1.2. 数据存储系统和其他各支撑子系统是授权的基石 1.2.1. 子系统提供访问控制的权威数据源和评估依据&#xff0c;直接影响授权决策 1.2.2. 谨慎区分各子系统的职责和能力&#xff0c;需要将其严格隔离…

高数经典反例记录(持续更新)

这篇博客总结了一些易混淆的概念以及经典反例&#xff0c;全部看完会有收获的&#xff0c;后期可能会继续补充&#xff01; 1.概念模糊 2.极限存在/不存在问题

豹5全新价格引爆市场,技术平权开启SUV新篇章

关注汽车市场的小伙伴&#xff0c;想必都知道最近方程豹品牌的豹5车型&#xff0c;打出了23.98万元至30.28万元的全新价格区间&#xff0c;重新定义了SUV市场的竞争格局。 方程豹的这一举动&#xff0c;立刻引发了市场的热烈讨论&#xff1a;“豹5现在值得入手吗&#xff1f;”…

科普文: jdk 1.7和 jdk 1.8 中ConcurrentHashMap 原理浅析

1. 前言 为什么要使用 ConcurrentHashMap 主要基于两个原因&#xff1a; 在并发编程中使用 HashMap 可能造成死循环(jdk1.7,jdk1.8 中会造成数据丢失)HashTable 效率非常低下 2. ConcurrentHashMap 结构 jdk 1.7 和 jdk 1.8 中&#xff0c;ConcurrentHashMap 的结构有着很…

软件产品测试报告包括哪些内容?专业软件测试服务供应商推荐

在当今快速发展的软件行业中&#xff0c;软件产品测试报告的重要性愈加凸显。卓码软件测评作为专业的软件测试服务供应商&#xff0c;深知一份高质量的测试报告对于开发团队、管理层以及客户的重要性。 软件产品测试报告是对软件产品在测试过程中所表现出来的各项指标和特性的…

【架构师进阶必备】Spring - 运行时以四种方式动态注册 bean

Spring — 运行时以四种方式动态注册 bean 1. 概述 在本教程中&#xff0c;我们将学习“使用 spring 动态注册 bean”或“在运行时动态将 bean 添加到 spring-context”。在Spring 应用程序中加载和删除 bean 时&#xff0c;无需在运行时重新启动应用程序即可完成此操作。 如…

先用先发!小样本故障诊断新思路!Transformer-SVM组合模型多特征分类预测/故障诊断(Matlab)

先用先发&#xff01;小样本故障诊断新思路&#xff01;Transformer-SVM组合模型多特征分类预测/故障诊断&#xff08;Matlab&#xff09; 目录 先用先发&#xff01;小样本故障诊断新思路&#xff01;Transformer-SVM组合模型多特征分类预测/故障诊断&#xff08;Matlab&#…

【RabbitMQ】路由模式(Routing)

一、基本概念 生产者&#xff08;Producer&#xff09;&#xff1a;发送消息到交换机的程序。在发送消息时&#xff0c;需要指定一个路由键。交换机&#xff08;Exchange&#xff09;&#xff1a;接收生产者发送的消息&#xff0c;并根据路由键将消息路由到与之匹配的队列。在…

【C++BFS】1466. 重新规划路线

本文涉及知识点 CBFS算法 LeetCode1466. 重新规划路线 n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部…

软件测试--易用性测试

人体工程学这是一门将日常使用的东西设计为易于使用何实用性强的科学。因此人体工程学的主要目标是达到易用性。 用户界面测试 用于与软件程序交互的方式称为用户界面或UI。大家都熟悉的计算机UI随着时间推移发生了变化。早期的计算机有触发开关和发光管。纸带、穿孔卡和电传打…