编辑, 抽成组件
问题


错误思路:
1 dept不能修改, 用watch监听一下:赋值给新的变量进行修改,
问题: currentDept 发生改变, depth也发生了改变,因为是浅拷贝, 用了json.pase(json.stringify(value))
还有问题: 修改后,取消,再点进去,发现currentpet 还是变化后的值,
因为watch监听dept,你在进入编辑弹框,还是没有变化,不会重新赋值给currentDept。导致currentDept还是变化后的值
解决:
监听visible,而不是currentDept: 只要进入一次,就重新赋值


<template><el-dialogtop="48px"width="500"title="编辑销方信息":modelValue="visible"@close="handleClose()"><el-formref="ruleFormRef":model="ruleForm"label-width="150px"class="demo-ruleForm"status-icon><el-form-item label="分司名称: " prop="companyName"><div>{{ ruleForm.companyName }}</div></el-form-item><el-form-itemlabel="分公司全称: "prop="orgName":rules="{required: true,message: '请输入分公司全称',trigger: 'change'}"><el-input v-model="ruleForm.orgName" placeholder="请输入分公司全称" /></el-form-item><el-form-itemlabel="地址: "prop="address":rules="{required: true,message: '请输入地址',trigger: 'change'}"><el-input v-model="ruleForm.address" placeholder="请输入地址" /></el-form-item><el-form-itemlabel="纳税人识别号: "prop="taxNo":rules="{required: true,message: '请输入纳税人识别号',trigger: 'change'}"><el-input v-model="ruleForm.taxNo" placeholder="请输入纳税人识别号" /></el-form-item><el-form-itemlabel="电话: "prop="telPhone":rules="{required: true,message: '请输入电话',trigger: 'change'}"><el-input v-model="ruleForm.telPhone" placeholder="请输入电话" /></el-form-item><el-form-itemlabel="开户行: "prop="bankName":rules="{required: true,message: '请输入开户行',trigger: 'change'}"><el-input v-model="ruleForm.bankName" placeholder="请输入开户行" /></el-form-item><el-form-itemlabel="银行账号: "prop="bankNumber":rules="{required: true,message: '请输入银行账号',trigger: 'change'}"><el-input v-model="ruleForm.bankNumber" placeholder="请输入银行账号" /></el-form-item><el-form-itemlabel="开票点编码: "prop="openInvoiceCode":rules="{required: true,message: '请输入开票点编码',trigger: 'change'}"><el-input v-model="ruleForm.openInvoiceCode" placeholder="请输入开票点编码" /></el-form-item><el-form-itemlabel="电子票开票点编码: "prop="electronOpenInvoiceCode":rules="{required: true,message: '请输入电子票开票点编码',trigger: 'change'}"><el-input v-model="ruleForm.electronOpenInvoiceCode" placeholder="请输入电子票开票点编码" /></el-form-item><el-form-itemlabel="预开张数: "prop="invoicePreNum":rules="{required: true,message: '请输入预开张数',trigger: 'change'}"><el-input v-model="ruleForm.invoicePreNum" placeholder="请输入预开张数" /></el-form-item></el-form><template #footer><el-button @click="handleClose()">取消</el-button><el-button type="primary" @click="confirm(ruleFormRef)">保存</el-button></template></el-dialog>
</template><script setup lang="ts">
import type { FormInstance } from "element-plus"
import { editSellerInformation } from "@/api/sellerInformation/list"
let props = defineProps({visible: {type: Boolean,default: false},editData: {type: Object,default: () => ({})}
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({companyId: "",companyName: "",orgName: "",address: "",taxNo: "",telPhone: "",bankName: "",bankNumber: "",openInvoiceCode: "",electronOpenInvoiceCode: "",invoicePreNum: ""
}) as any
const emits = defineEmits(["closeDialog"])
const handleClose = (getData?: boolean) => {emits("closeDialog", getData ? true : false)
}
watch(() => props.visible,(newVal) => {if (newVal) {ruleForm.companyId = props.editData.companyIdruleForm.companyName = props.editData.companyNameruleForm.orgName = props.editData.orgNameruleForm.address = props.editData.addressruleForm.taxNo = props.editData.taxNoruleForm.telPhone = props.editData.telPhoneruleForm.bankName = props.editData.bankNameruleForm.bankNumber = props.editData.bankNumberruleForm.openInvoiceCode = props.editData.openInvoiceCoderuleForm.electronOpenInvoiceCode = props.editData.electronOpenInvoiceCoderuleForm.invoicePreNum = props.editData.invoicePreNum}}
)
// 确定按钮
const confirm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {editSellerInformation(ruleForm).then((res: any) => {if (res.code == 200) {ElMessage.success(res.msg)handleClose(true)} else {ElMessage.error(res.msg)}})} else {console.log("error submit!", fields)}})
}
</script><style scoped lang="scss">
.demo-ruleForm {padding-right: 30px;padding-bottom: 20px;
}
</style>
相关文章:
编辑, 抽成组件
问题 错误思路: 1 dept不能修改, 用watch监听一下:赋值给新的变量进行修改, 问题: currentDept 发生改变, depth也发生了改变,因为是浅拷贝, 用了json.pase(json.stringify(value…...
使用C#绘制具有平滑阴影颜色的曼德布洛特集分形
示例使用复数类在 C# 中轻松绘制曼德布洛特集分形解释了如何通过迭代方程绘制曼德布洛特集:...
【批量生成WORD和PDF文件】根据表格内容和模板文件批量创建word文件,一次性生成多个word文档和批量创建PDF文件
如何按照Word模板和表格的数据快速制作5000个word文档 ? 在与客户的合作的中需要创建大量的合同,这些合同的模板大概都是一致的,是不是每次我们都需要填充不一样的数据来完成? 今天用表格数据完成合同模板的填充,批量…...
低延迟!实时处理!中软高科AI边缘服务器,解决边缘计算多样化需求!
根据相关统计,随着物联网的发展和5G技术的普及,到2025年,全球物联网设备连接数将达到1000亿,海量的计算数据使得传输到云端再处理的云计算方式显得更捉襟见肘。拥有低延迟、实时处理、可扩展性和更高安全性的边缘计算应运而生&…...
内旋风铣削知识再学习
最近被有不少小伙伴们问到蜗杆加工的一种方式——内旋风铣削加工。关于旋风铣之前出过一篇《什么是旋风铣?》,简要介绍了旋风铣(Whilring)的一些基本内容。本期再重新仔细聊一聊内旋风这种加工方式,可加工的零件种类&a…...
Redis 7.x如何安装与配置?保姆级教程
大家好,我是袁庭新。最新写了一套最新版的Redis 7.x企业级开发教程,今天先给大家介绍下Redis 7.x如何在Linux系统上安装和配置。 1 Redis下载与安装 使用非关系型数据库Redis必须先进行安装配置并开启Redis服务,然后使用对应客户端连接使用…...
SLAAC如何工作?
SLAAC如何工作? IPv6无状态地址自动配置(SLAAC)-常见问题 - 苍然满关中 - 博客园 https://support.huawei.com/enterprise/zh/doc/EDOC1100323788?sectionj00shttps://www.zhihu.com/question/6691553243/answer/57023796400 主机在启动或接口UP后,发…...
电脑丢失dll文件一键修复的多种方法分析,电脑故障修复攻略
电脑在使用过程中,有时会遇到DLL文件丢失的情况,这可能导致软件无法正常运行或系统出现故障。当面对这种状况时,不必过于慌张,因为有多种有效的修复方法可供选择。下面我们一起来看看电脑丢失dll文件的多种解决方法。 一.了解什么…...
Docker容器命令
docker 命令说明docker pull拉取镜像docker push推送镜像到DockerRegistrydocker images查看本地镜像docker rmi删除本地镜像docker run创建并运行容器(不能重复创建)docker stop停止指定容器docker start启动指定容器docker restart重新启动容器docker…...
【Leetcode 每日一题】3291. 形成目标字符串需要的最少字符串数 I
问题背景 给你一个字符串数组 w o r d s words words 和一个字符串 t a r g e t target target。 如果字符串 x x x 是 w o r d s words words 中 任意 字符串的 前缀(字符串的前缀是从字符串的开头开始并延伸到其中任意点的子串),则认为…...
Windows聚焦壁纸代理不更新——解除UWP应用回环限制
开代理后经常出现Microsoft store打不开,聚焦壁纸不更新的情况,因为UWP应用默认禁止回环地址,导致开了代理以后不仅用不了代理上网,还把自己的本来的通信堵死了 打开CMD输入 FOR /F "tokens11 delims\" %p IN (REG QUER…...
电脑开机提示error loading operating system怎么修复?
前一天电脑还能正常运行,但今天启动时却显示“Error loading operating system”(加载操作系统错误)。我已经仔细检查了硬盘、接线、内存、CPU和电源,确认这些硬件都没有问题。硬盘在其他电脑上可以正常使用,说明不是硬…...
javaFX.(蜜雪冰城点餐小程序)MySQL数据库
学习Java只有3个月,不喜勿喷 该小程序是用的MySQL数据库,编辑软件用的equals,为什么不用idea有提示因为主打一个纯手打 要源码私信 目录 javafx.小程序(蜜雪冰城点餐系统)简介 主体思路 思路讲解 用户登录 用户注册 忘记…...
Unity Apple Vision Pro 开发教程:物体识别跟踪
Spatial XR 开发者社区官网:SpatialXR 社区 开发流程与原理:Apple Vision Pro 物体识别跟踪原理与开发流程【Unity Apple Vision Pro 开发系列教程】 PolySpatial 物体跟踪官方样例讲解:Unity Apple Vision Pro 开发教程:物体识别…...
nano编辑器的使用
nano 是一个非常简单易用的命令行文本编辑器,它常用于在 Linux 或类 Unix 系统中快速编辑文件,特别适用于需要修改配置文件或快速编辑文本的场景。以下是一些常见的 nano 使用技巧和基本操作。 1. 打开文件 要使用 nano 编辑文件,打开终端并…...
框架问题学习
1、gin 1.1、gin框架路由是怎么处理的 在 Gin 中,路由是通过 gin.Default() 或 gin.New() 创建的 *gin.Engine 对象来管理的。gin.Default() 是 gin.New() 的一个封装,它在创建路由对象时会自动添加一个默认的中间件(如日志记录、恢复中间件…...
前端:纯前端快速实现html导出word和pdf
实现html导出word,需要使用两个库。 html-docx-js和file-saver 导出word的js方法 > npm install html-docx-js >npm install file-saver js引入 import FileSaver from “file-saver”; import htmlDocx from “html-docx-js/dist/html-docx”; /**导出…...
三相异步电动机如何调试?
在现代工业中,三相异步电动机因其结构简单、运行可靠和适应性强而被广泛应用。然而,正确的调试过程是确保电动机高效运行和延长其使用寿命的关键。 一、调试前的准备工作 在开始调试之前,必须进行充分的准备工作,以确保调试顺利…...
四川托普信息技术职业学院教案1
四川托普信息技术职业学院教案 【计科系】 周次 第 1周,第1次课 备 注 章节名称 第1章 XML语言简介 引言 1.1 HTML与标记语言 1.2 XML的来源 1.3 XML的制定目标 1.4 XML概述 1.5 有了HTML了,为什么还要发展XML 1.5.1 HTML的缺点 1.5.2 XML的特点 1.6 X…...
JS数组方法汇总
Array.from //将可迭代对象或字符串转换为数组 console.log(Array.from(1234)); //[ 1, 2, 3, 4 ]Array.isArray //判断是否是数组 Array.isArray([1])//trueArray.concat //用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组 let arr [1,2,3]…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
