层级关联,审批人功能

 一个需求要求选择一级,下方展示一级的效果

后端给了审批人数据,但是数据需要单独处理

<template><div class="box"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="层级" prop="cj"><el-select v-model="ruleForm.cj" @change="btn" clearable><el-option label="一级" :value="1"></el-option><el-option label="二级" :value="2"></el-option><el-option label="三级" :value="3"></el-option><el-option label="四级" :value="4"></el-option><el-option label="五级" :value="5"></el-option></el-select></el-form-item><el-form-item label="审批人" required><el-timeline class="m-t-20"><el-timeline-item placement="top" v-for="(item,index) in ruleForm.list" :key="index"><el-form-item :prop="'list.'+index+'.userName'" :rules="rules.userName">{{num[index]}}级审批人:<el-select v-model="item.userName" clearable><el-option v-for="(item,index) in option" :key="index" :label="item.userName" :value="item.userName"></el-option></el-select></el-form-item></el-timeline-item></el-timeline></el-form-item><el-form-item><el-button @click="submit">提交</el-button></el-form-item></el-form></div>
</template><script>
export default {data () {return {ruleForm: {cj: '',list: []},rules: {cj: [{ required: true, message: '请选择', trigger: 'change' }],userName: [{ required: true, message: '请选择', trigger: 'change' }]},num: ['一', '二', '三', '四', '五'],// 审批人数据option: [{userId: 11020218,userName: "tumourdata1",aaa: '1'},{userId: 11020217,userName: "tumourdata2",aaa: '12'},{userId: 11020213,userName: "tumourdata3",aaa: '13'}]}},methods: {// 切换层级btn (val) {// 后端需要加上标识,选的几级const selectOptions = [{level: 1,userName: ''},{level: 2,userName: ''},{level: 3,userName: ''},{level: 4,userName: ''},{level: 5,userName: ''}]this.ruleForm.list = selectOptions.slice(0, val)},// 提交submit () {const arr = []this.ruleForm.list.forEach(item => {this.option.forEach(item2 => {if (item2.userName == item.userName) {arr.push({...item2,level: item.level})}})})this.$refs.ruleForm.validate((valid) => {if (valid) {// 提交数据}})}}
}
</script><style lang="less" scoped>
.box {margin: 200px;border: 1px solid black;background: #fff;padding: 30px 0;
}
/deep/ .el-timeline-item__wrapper {top: -20px;
}
</style>

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

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

相关文章

MySQL多实例部署:从概念到实操的全面指南

目录 MySQL多实例管理 单实例 什么是多实例 多实例的好处 多实例的弊端 MySQL多实例用在哪些场景 资金紧张的公司 用户并发访问量不大的业务 大型网站也有用多实例 部署MySQL多实例 rpm和源码的优缺点 二进制方式安装mysql 准备二进制mysql运行所需的环境 准备多…

Android---Retrofit实现网络请求:Java 版

简介 在 Android 开发中&#xff0c;网络请求是一个极为关键的部分。Retrofit 作为一个强大的网络请求库&#xff0c;能够简化开发流程&#xff0c;提供高效的网络请求能力。 Retrofit 是一个建立在 OkHttp 基础之上的网络请求库&#xff0c;能够将我们定义的 Java 接口转化为…

IO线程进程

代码练习 使用fread和fwrite完成两个文件的拷贝 #include<myhead.h>int main(int argc, const char *argv[]) {FILE *fp NULL;//重新以只读的形式打开文件if((fp fopen("./OIP-C.bmp", "r")) NULL){perror("fopen error");return -1;…

SICTF round#3 web

1.100&#xff05;_upload url可以进行文件包含&#xff0c;但是flag被过滤 看一下源码 <?phpif(isset($_FILES[upfile])){$uploaddir uploads/;$uploadfile $uploaddir . basename($_FILES[upfile][name]);$ext pathinfo($_FILES[upfile][name],PATHINFO_EXTENSION);$t…

FL Studio21中文版本混音功能介绍

FL Studio 21的混音功能是其音乐制作能力中不可或缺的一部分&#xff0c;它为用户提供了强大的工具&#xff0c;以便他们可以对音轨进行细致的调整&#xff0c;确保音乐作品的最终呈现效果达到最佳。 FL Studio 21 Win-安装包下载如下: https://wm.makeding.com/iclk/?zonei…

基于Java的家政预约管理平台

功能介绍 平台采用B/S结构&#xff0c;后端采用主流的Springboot框架进行开发&#xff0c;前端采用主流的Vue.js进行开发。 整个平台包括前台和后台两个部分。 前台功能包括&#xff1a;首页、家政详情、家政入驻、用户中心模块。后台功能包括&#xff1a;家政管理、分类管理…

数字化转型导师坚鹏:政府数字化转型之数字化技术

政府数字化转型之数字化技术 ——物联网、云计算、大数据、人工智能、虚拟现实、区块链、数字孪生、元宇宙等综合解析及应用 课程背景&#xff1a; 数字化背景下&#xff0c;很多政府存在以下问题&#xff1a; 不清楚新技术的发展现状&#xff1f; 不清楚新技术的重要应…

macOS开启HiDPI外接2K显示器(解决字体发虚问题)

1.前言&#xff1a; 购置了一台2K显示器&#xff0c;但通过HDMI直接连接时的显示效果让人难以接受&#xff0c;因此我们需要启用苹果系统的HiDPI模式&#xff0c;以实现更完美的显示效果。 那么&#xff0c;为什么要启用HiDPI模式呢&#xff1f;2K显示器的分辨率为2560*1440&…

IDEA连接database数据库

文章目录 一、连接数据库1、连接mysql2、连接参数配置3、配置驱动从maven仓库下载&#xff1a;要求联网将提前下载好的jar放到本地目录 4、完成 二、执行sql1、选择要操作的数据库2、执行sql 三、问题1、可能因为时区问题连接不上 一、连接数据库 1、连接mysql 2、连接参数配置…

【AI数字人-论文】AD-NeRF论文

文章目录 NeRFAD-NeRF模型NeRF体渲染个体NeRF表示背景和姿态编辑 loss 参考 NeRF 将一个连续的场景表示为一个输入为5D向量的函数&#xff0c;这个函数为NeRF函数&#xff0c;它的输入由一个空间点的3D位置 x ( x , y , z ) \mathbf{x} \left( x, y, z \right) x(x,y,z)和它…

Android S - 添加按键,上报键值为0

仅作记录 展锐8581模块 device/sprd/mpool/module/keylayout/gpio-keys.kl#仿照下面的形式&#xff0c;新增一行 key 68 F10 WAKE key 114 VOLUME_DOWN WAKE key 115 VOLUME_UP WAKE key 116 POWER WAKE key 212 CAM…

【前端素材】几款实用的后台管理系统html模板(附带源码)

一、需求分析 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;它通常作为一个独立的后台界面存在&#xff0c;供管理员或特定用户使用。下面详细分析后台管理系统的定义和功能&#xff1a; 1. 定义 后台管理系统是一个用于管理和控制网站、应用程序或系统…

湖南建研工程质量检测系统/Scripts/admintool文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

了解c++智能指针的使用案例和场景

c智能指针是一种封装了原始指针的类对象&#xff0c;可以实现自动管理内存的功能&#xff0c;避免手动new和delete造成的内存泄漏或重复释放等问题。 c智能指针有三种类型&#xff0c;分别是&#xff1a; std::unique_ptr&#xff1a;独占式智能指针&#xff0c;表示对内存的唯…

YAPI接口自动鉴权功能部署详解

安装准备 以下操作&#xff0c;默认要求自己部署过yapi&#xff0c;最好是部署过yapi二次开发环境。 无论是选择在线安装或者是本地安装&#xff0c;都需要安装client工具。 1、yapi-cli&#xff1a;npm install yapi-cli –g&#xff0c; 2、安装后将文件夹nodejs/node_gl…

Chapter 8 - 16. Congestion Management in TCP Storage Networks

Active Queue Management As previously mentioned, dropping or marking schemes for packets that are waiting in a queue can significantly influence TCP’s behavior on the end devices. These schemes are called Active Queue Management (AQM). 如前所述,针对在队…

推荐一个内网穿透工具,支持Windows桌面、Linux、Arm平台客户端

神卓互联是一款常用的内网穿透工具&#xff0c;它可以将本地服务器映射到公网上&#xff0c;并提供域名或子域名给外部访问。神卓互联具有简单易用、高速稳定的特点&#xff0c;支持Windows桌面版、Linux版、Arm版客户端&#xff0c;以及硬件等。 神卓互联内网穿透技术简介 企…

【C++航海王:追寻罗杰的编程之路】vector

目录 1 -> vector的介绍及使用 1.1 -> vector的介绍 1.2 -> vector的使用 1.2.1 -> vector的介绍 1.2.2 -> vector iterator的使用 1.2.3 -> vector空间增长问题 1.2.4 -> vector的增删查改 1.2.5 -> vector迭代器失效问题 2 -> vector的深…

uniapp登录逻辑

1.登录页面实现 <template><view class"box"><view class"boxTop"><view class"title">欢迎登录</view><view class"topic">还没有账号&#xff0c;<span clickgetRegister>立即注册</…

已解决:IDEA中@Autowired自动注入MyBatis Mapper报红警告的几种解决方法

今天在使用 IDEA 使用 MyBatis 的时候遇到了这种情况&#xff1a; 可以看到 userMapper 下有个红色的波浪警告&#xff0c;虽然代码没有任何问题&#xff0c;能正常运行&#xff0c;但是这个红色警告在这里杵着确实让人很窝心。 于是我在网上找了找&#xff0c;最终明白了原因…