层级关联,审批人功能

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

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

<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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI新工具(20240219) Ollama Windows预览版;谷歌开源的人工智能文件类型识别系统; PopAi是您的个人人工智能工作空间

Ollama Windows preview - Ollama Windows预览版用户可以在本地创建和运行大语言模型&#xff0c;并且支持NVIDIA GPU和现代CPU指令集的硬件加速 Ollama发布了Windows预览版&#xff0c;使用户能够在原生的Windows环境中拉取、运行和创建大语言模型。该版本支持英伟达的GPU&am…

iOS整理 - 关于直播 - 搭建服务端

前言 其实本人一直都想自己简单做一套直播&#xff08;包括移动端和服务端&#xff09;的开发测试&#xff0c;但是之前一直做得比较迷茫。最近偶然间在来了灵感&#xff0c;瞬间解除了我很多疑惑。我会分享出来&#xff0c;希望大家一起研究下。稍后&#xff0c;我完整做好了…

车载氢气浓度传感器为氢能源车保驾护航

最近&#xff0c;车载氢气浓度传感器成为了一个热门话题。作为一名对科技充满热情的汽车爱好者&#xff0c;我自然也对这个话题产生了浓厚的兴趣。那么&#xff0c;车载氢气浓度传感器到底是什么&#xff1f;它又是如何工作的呢&#xff1f;下面就让我为你一一揭秘。 首先&…

PMP考完之后考什么,NPDP值得考吗?

PMP考完之后可以考虑考一个NPDP证书&#xff0c;从事新产品开发相关工作的学习下NPDP是很有必要的~参与新产品开发相关的中高层管理人员&#xff0c;产品团队成员等非常适合学习NPDP。 一、什么是NPDP&#xff1f; NPDP 是产品经理国际资格认证&#xff0c;美国产品开发与管理…

java数据结构与算法刷题-----LeetCode155. 最小栈

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 1. 法一&#xff1a;使用辅助最小栈 解题思路&#xff1a;时间复杂度O(1)…

如何搭建一个稳定的服务器集群?

服务器集群能够提供高效、可扩展的计算和存储资源&#xff0c;满足企业不断增长的业务需求。但是&#xff0c;如何搭建一个稳定的服务器集群呢&#xff1f;下面将从多个方面进行介绍。 一、需求分析 在搭建服务器集群之前&#xff0c;首先要进行需求分析&#xff0c;明确集群…

Vue26 内置标签 v-text v-html

实例 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>v-text指令</title><!-- 引入Vue --><script type"text/javascript" src"../js/vue.js"></script></head><…

《最新出炉》系列初窥篇-Python+Playwright自动化测试-19-处理鼠标拖拽-中篇

1.简介 上一篇中&#xff0c;主要是介绍了拖拽的各种方法的理论知识以及实践&#xff0c;今天宏哥讲解和分享一下划取字段操作。例如&#xff1a;需要在一堆log字符中随机划取一段文字&#xff0c;然后右键选择摘取功能。 2.划取字段操作 划取字段操作就是在一段文字中随机选…

qt for python创建UI界面

现在很多库都有用到python,又想使用QT creater创作界面&#xff0c;来使用。 1.使用的版本 使用虚拟机安装Ubuntu22.04&#xff0c;Ubuntu使用命令行安装qt,默认安装的是QT5&#xff0c;不用来回调了&#xff0c;就用系统默认的吧&#xff0c;不然安装工具都要费不少事情。pyt…

新版Java面试专题视频教程——框架篇

新版Java面试专题视频教程——框架篇 框架篇 01-框架篇介绍02-Spring-单例bean是线程安全的吗03-Spring-AOP相关面试题04-Spring-事务失效的场景05-Spring-bean的生命周期5.1 BeanDefinition 06-Spring-bean的循环依赖(循环引用)6.1 一般对象的循环依…

Spring Cloud微服务网关Zuul动态路由配置优化和手动触发路由刷新

一、前文必看 Spring Cloud微服务网关Zuul动态路由配置。在前文中留了两个小坑。在本文将怕它给填了&#xff0c;所以前一篇文章建议看一下。 二、DynamicZuulRouteLocator小优化 在前文中提到&#xff0c;HeartbeatEvent事件会频繁触发&#xff0c;每次都需要去查询数据库。…

云HIS定义,云HIS系统源码,云HIS建设方法,云HIS发展机制

一、重新定义HIS&#xff1a; 传统HIS是基于局域网的医院信息系统&#xff0c;云HIS全称为基于云计算的医疗卫生信息系统&#xff08;Cloud-Based Healthcare Information System&#xff09;&#xff0c;是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫…

http前生今世

HTTP/0.9&#xff0c;仅支持GET方法&#xff0c;并且响应中没有HTTP头信息&#xff0c;只有文档内容。 HTTP/1.0增加了对POST方法、状态码、HTTP头信息等的支持&#xff0c;这一版本也是广泛应用的历史性版本。 HTTP/1.1引入了持久连接&#xff08;Persistent Connections&…

照片去除多余人物的方法分享之三分钟教你怎么去除

在拍摄照片时&#xff0c;有时候会遇到照片中有多余的人物&#xff0c;这会影响照片的美观度和主题表达。去除照片中多余的人物&#xff0c;需要采用一些技巧和方法。本文将介绍几种常用的去除照片中多余人物的方法。 一、使用水印云软件去除多余人物 水印云是一款功能强大的图…

[转载]31省市数字经济发展规划(2024版)

近期&#xff0c;国家统计局、国家税务总局、工业和信息化部等部门先后在国新办新闻发布会上发布2023年发展成绩单&#xff0c;其中&#xff0c;数字经济核心产业频频出现在发展成绩单中。 我国数实融合加快推进。根据国家税务总局发布的数据&#xff0c;2023年我国数字经济核…

JAVA高并发——锁的优化

文章目录 1、减少锁持有时间2、减小锁粒度3、用读写分离锁来替换独占锁4、锁分离5、锁粗化 锁是最常用的同步方法之一。在高并发的环境下&#xff0c;激烈的锁竞争会导致程序的性能下降&#xff0c;因此我们有必要讨论一些有关锁的性能的问题&#xff0c;以及一些注意事项&…

vulhub中Apache Log4j Server 反序列化命令执行漏洞复现(CVE-2017-5645)

Apache Log4j是一个用于Java的日志记录库&#xff0c;其支持启动远程日志服务器。Apache Log4j 2.8.2之前的2.x版本中存在安全漏洞。攻击者可利用该漏洞执行任意代码。 1.我们使用ysoserial生成payload&#xff0c;然后直接发送给your-ip:4712端口即可。 java -jar ysoserial-…

微软和OpenAI将检查AI聊天记录,以寻找恶意账户

据国外媒体报道&#xff0c;大型科技公司及其附属的网络安全、人工智能产品很可能会推出类似的安全研究&#xff0c;尽管这会引起用户极度地隐私担忧。大型语言模型被要求提供情报机构信息&#xff0c;并用于帮助修复脚本错误和开发代码以侵入系统&#xff0c;这将很可能会成为…

01 Qt自定义风格控件的基本原则

目录 1.继承原生控件 2.组合原生控件 3.仿写原生控件 PS:后续将继续分享开发实践中各类自定义控件的方法、思路以及组件库 1.继承原生控件 关键字&#xff1a;继承、paintEvent 这里想说的是&#xff0c;Qt的Gui框架在封装原生控件的同时&#xff0c; 也为开发者提供了各…

AGI|一篇小白都能看懂的RAG入门介绍!

目录 一、前言 二、LLM主要存在的问题 三、RAG 是什么&#xff1f; 四、RAG中的搜索器 &#xff08;一&#xff09;主要的检索技术 &#xff08;二&#xff09;知识库索引技术 五、RAG目前遇到的问题和展望 一、前言 随着近几年AIGC的发展&#xff0c;不仅是大模型自身在…