基于element-plus的Dialog选择控件

翻看之前工程师写的vue2的代码,很多都是复制、粘贴,也真是搞不懂,明明可以写一个控件,不就可以重复使用。很多前端总喜欢element搞一下,ant-design也搞一下,有啥意义,控件也不是自己写的,积木也没有搭好。
1
选中之后将值带回去
1
先看看组件代码

<template><el-input v-model="inputLabel" @click="showSub"><template #suffix><i class="iconfont iconicon2-081"></i></template></el-input><BaseDialog ref="dialog" title="选择会计科目" width="470px" :visible='visible' :showClose="true" @beforeClose="visible=false"><el-tabs v-model="subjectName" ><el-tab-pane v-for="(item,index) in subjectTabs" :key="index" :name='item.name' :label="item.title" :value="index" class="tabPane"><el-tree :data="categoryTree[index]" node-key="id" default-expand-all highlight-current :expand-on-click-node='false' @node-click="handleSubjectClick" :props="defaultSubjecTreeProps"style="height: 380px;overflow-y: auto;"><template #default="{ node,data }"><span class="custom-tree-node"><i :class="data.children.length>0 ? 'iconfont iconicon2-08' : 'iconfont iconicon2-11' "></i>{{ node.label }}</span></template></el-tree></el-tab-pane></el-tabs><template #footer><div  class="dialog-footer"><el-button type="primary" @click="cancelDialog">返 回</el-button></div></template></BaseDialog>
</template>
<script lang="ts" setup>
import {ref,getCurrentInstance,computed,onMounted,watch } from 'vue'
import BaseDialog from '@/components/base/BaseDialog.vue';
import { useAppStore } from '@/store'
import { de } from 'element-plus/es/locale';
const { proxy }: any = getCurrentInstance();
const appStore = useAppStore()
const userInfo = computed(() => appStore.userInfo)
const curAccountSet = computed(() => appStore.curAccountSet)
const defaultSubjecTreeProps = ref({children: 'children',label: 'label'})
const inputProps = ref({label:'name',value:'id'})
const inputLabel = ref('')
const emits = defineEmits(['update:modelValue','change'])
const visible = ref(false)
const props = defineProps<{modelValue:{},
}>()
const showSub = () =>{visible.value = true;
}
const subjectName = ref(1)
const subjectTabs = ref(curAccountSet.value?.accountingStandard=='1'?[{title: "资产", name: 1,},{title: "负债", name: 2,},{title: "权益", name: 3,},{title: "成本", name: 4,},{title: "损益", name: 5,},
]:[{title: "资产", name: 1,},{title: "负债", name: 2,},{title: "共同", name: 3,},{title: "权益", name: 4,},{title: "成本", name: 5,},{title: "损益", name: 6,},
])
const categoryTree = ref([])
const getCategoryTree = async (cate) =>{const res = await proxy.$api.acc.accountsubject.list({asId:curAccountSet.value.accId,category:cate});if (res.success){categoryTree.value[cate - 1] = res.data;} else{proxy.$message.error(res.msg);}
}
const handleSubjectClick = (data) => {if (proxy.$_.isEmpty(data.children)){inputLabel.value = data.nameemits('update:modelValue',{value:data.id,label:data.name})visible.value = false}
}
const cancelDialog = () =>{visible.value = false;
}
watch(()=>props.modelValue,(newVal,oldVal)=>{if (!proxy.$_.isEmpty(newVal)){inputLabel.value = newVal['label']}
},{immediate:true,deep:true})
onMounted(()=>{getCategoryTree(1);getCategoryTree(2);getCategoryTree(3);getCategoryTree(4);getCategoryTree(5);
})
</script>

控件使用比较简单了

<el-form-item label="应付账款" prop="yfzk"><acc-account-subject v-model="orderForm.yfzk"></acc-account-subject></el-form-item>

但是在保存和加载的时候需要特殊处理,因为控件的值是{value:data.id,label:data.name}
保存之前,需要做一次深拷贝,不能直接修改orderForm.value,因为双向绑定,页面的数据会改变。

const convertParams = () =>{debuggerlet params = proxy.$tool.deepClone({...orderForm.value})// 应收账款params['yszk'] = orderForm.value['yszk']?.value || ''params['yszkName'] = orderForm.value['yszk']?.label || ''return params;
}
const save = async () => {orderRef.value?.validate(async valid=>{if (valid){isLoading.value = trueconst params = convertParams()const res = await proxy.$api.setting.psiAccConfig.save(params)if (res.success){isLoading.value = false;proxy.$message.success(res.msg);} else{isLoading.value = false;proxy.$message.error(res.msg);}}})
}

页面加载的时候也需要做一下处理,还是因为数据结构的缘故

const load = async () => {const res = await proxy.$api.setting.psiAccConfig.load({asId:userInfo.value.currentAsId})if (res.success){isLoading.value = false;orderForm.value = res.data;// 应收张狂if (orderForm.value['yszkName']){orderForm.value['yszk'] = {label:orderForm.value['yszkName'],value:orderForm.value['yszk']}}}} else{isLoading.value = false;proxy.$message.error(res.msg);}
}

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

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

相关文章

Python递归函数你用对了吗?

1.递归函数 递归函数&#xff1a;函数自己调用自己 2.需求 使用函数的方式&#xff0c;计算数字n的阶乘 # 5&#xff01; """ 5! 1 * 2 * 3 * 4 * 5 4! 1 * 2 * 3 * 4 3! 1 * 2 * 3 2! 1 * 2 1! 1综上可以总结出&#xff1a;n! n * (n - 1) "&qu…

什么是防静电晶圆隔离膜?一分钟让你了解抗静电晶圆隔离纸

防静电晶圆隔离膜&#xff0c;也被称为防静电蓄积纸、硅片纸、半导体晶圆盒内缓冲垫片等多种名称&#xff0c;是半导体制造和运输过程中的一种重要辅助材料。 该隔离膜具备多种特性&#xff0c;如防静电、无尘、不掉屑、强韧耐用等&#xff0c;这些特性使其在半导体制造和运输中…

网络安全之从原理看懂XSS

01、XSS的原理和分类 跨站脚本攻击XSS(Cross Site Scripting)&#xff0c;为了不和层叠样式表(Cascading Style Sheets&#xff0c;CSS)的缩写混淆 故将跨站脚本攻击缩写为XSS&#xff0c;恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页面时&#xff0c…

Word转PDF保持图片原有清晰度

目录 1、需要的软件 2、配置Acrobat PDFMaker 3、配置Acrobat Distiller 4、更改Acrobat PDFMaker中的首选项 5、将word转换成pdf 1、需要的软件 利用Adobe Acrobat DC工具。 打开word&#xff0c;选择Acrobat的插件&#xff0c;选择首选项。 如果没有出现Acrobat插件也…

AI辅助研发:2024年科技与工业领域的新革命

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;2024年AI辅助研发成为了科技界和工业界广泛关注的焦点。这一年&#xff0c;从医药研发到汽车设计&#xff0c;从软件开发到材料科学&#xff0c;AI的身影无处不在&#xff0c;正逐步改变着研发领域的面貌。这…

Python 基础语法:基本数据类型(元组)

1 元组&#xff08;Tuples&#xff09;概述 1.1 元组的定义与特点 元组&#xff08;Tuples&#xff09;是Python中的一个内置数据类型&#xff0c;用于存储一系列有序的元素。元组中的元素可以是任何类型&#xff0c;包括数字、字符串、列表等&#xff0c;且元素之间用逗号…

java并发编程知识点汇总

文章目录 1. Java8新特性1.1 Lambda表达式1.2 函数式接口1.3 Stream流式计算&#xff0c;应用了上述函数式接口能力1.4 接口增强 2. 常用原子类3. 多线程与高并发-juc3.1 谈一谈对volatile的理解3.2 谈一谈对JMM的理解3.3 谈一谈对CAS及底层原理的理解3.4 谈一谈对ABA问题及原子…

Vue 图片加载失败显示默认图片

方法一&#xff1a;通过onerror属性加载默认图片 <img :src"img" :onerror"defaultImg" /><script> export default {name: testImgError,data() {return {img: , // 访问图片的ip地址defaultImg: this.src ${require(/assets/images/right/…

VOS3000外呼系统 AXB工作原理

VOS AXB 模块适用于语音市场直连运营商或虚拟运营商 X 号平台的业务需求 与 VOS 系统无缝集成&#xff0c;无需独立服务器部署&#xff0c;节约硬件&#xff0c;网络成本 单机支持不低于 2,000 并发 AXB 呼叫&#xff0c;性能是市面常见 AXB 产品的 2-3 倍 支持设定在呼叫接…

php常用设计模式应用场景及示例

单例模式 含义描述 应用程序中最多只有该类的一个实例存在 应用场景 常应用于数据库类设计&#xff0c;采用单例模式&#xff0c;只连接一次数据库&#xff0c;防止打开多个数据库连接。 代码示例 class Singleton {private static $instance; // 定义一个私有的静态变量保存…

【恒源智享云】conda虚拟环境的操作指令

conda虚拟环境的操作指令 由于虚拟环境经常会用到&#xff0c;但是我总忘记&#xff0c;所以写个博客&#xff0c;留作自用。 在恒源智享云上&#xff0c;可以直接在终端界面输入指令&#xff0c;例如&#xff1a; 查看已经存在的虚拟环境列表 conda env list查看当前虚拟…

C语言 编译和链接

1. 翻译环境和运⾏环境 在ANSI?C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执⾏的机器指令。 第2种是执⾏环境&#xff0c;它⽤于实际执⾏代码。 我们来看一下过程&#xff1a; 2. 翻译环境 那翻译环境是…

Android系统键值列表

转载于网络&#xff0c;记录下来自用 电话键 键名 描述 键值 KEYCODE_CALL 拨号键5 KEYCODE_ENDCALL 挂机键6 KEYCODE_HOME 按键Home3 KEYCODE_MENU 菜单键82 KEYCODE_BACK 返回键4 KEYCODE_SEARCH 搜索键84 KEYCODE_CAMERA 拍照键27 KEYCODE_FOCUS 拍照对焦键80 KEYCODE_POWE…

《幻兽帕鲁》新手入门 幻兽帕鲁新手开荒攻略 幻兽帕鲁配置要求

2024年1月&#xff0c;讨论热度最高的新游无疑是Pocketpair出品的《幻兽帕鲁》。这部作品发售两周即在Steam游戏平台售出超过1200万份&#xff0c;且Xbox/XGP玩家规模超过700万。不仅如此&#xff0c;该游戏同时在线玩家人数超过200万&#xff0c;在Steam的游戏史上仅次于《绝地…

java中几种对象存储(文件存储)中间件的介绍

一、前言 在博主得到系统中使用的对象存储主要有OSS&#xff08;阿里云的对象存储&#xff09; COS&#xff08;腾讯云的对象存储&#xff09;OBS&#xff08;华为云的对象存储&#xff09;还有就是MinIO 这些玩意。其实这种东西大差不差&#xff0c;几乎实现方式都是一样&…

深入理解Java中的ConcurrentSkipListMap:高效并发的有序映射

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 摘要&#xff1a;本文将详细介绍Java中的ConcurrentSkipListMap&#xff0c;一个支持高效并发操作的有序映射。我们将深入探讨其数…

xilinx SDK 2018.3 undefined reference to `f_mount‘,`f_open‘等等

用xilinx SDK 写SD的读写实验时&#xff0c;已经添加了头文件ff.h并且没有报错&#xff0c;但是当用到内部的函数f_mount&#xff0c;f_open’等等时却显示未定义。 很可能是漏掉了在ZYNQ中定义SD的MIO接口&#xff0c;在下方图示中进行定义&#xff08;需要查找自己板子的原理…

Java零基础入门到精通_Day 1

01 Java 语言发展史 Java语言是美国Sun公司(StanfordUniversity Network)在1995年推出的 计算机语言Java之父:詹姆斯高斯林(ames Gosling) 重要的版本过度&#xff1a; 2004年 Java 5.0 2014年 Java 8.0 2018年 9月 Java 11.0 &#xff08;目前所使用的&#xff09; 02 J…

函数的说明文档

函数是纯代码语言&#xff0c;想要理解其含义&#xff0c;就需要一行行去阅读理解代码&#xff0c;效率比较低。 我们可以给函数添加说明文档&#xff0c;辅助理解函数的作用。 语法如下&#xff1a; 通过多行注释的形式&#xff0c;对函数进行说明解释 内容应写在函数体之前…

leetcode 25、k个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内部的值…