最近项目中要开发一个OA审批；里边涉及到流程跳转（流程较多），具体方案有：直接下一步，选择参与人或者选择某一个流程之后再选择参与人；
我们前端是APiCloud开发，这里我主要使用Vue来实现，把实现结果分享给大家，希望有所帮助！
涉及到的指令有：
v-cloak；v-for;v-on;v-bind;v-model;
v-if；v-else-if；v-else；v-show
涉及到的html标签
文本输入框，多行文本输入框，下拉列表，单选框和复选框
界面设计关键代码
<div class="main">
<div class="aui-content aui-margin-b-5 aui-margin-t-5" id="biaoDanList">
<ul v-cloak class="aui-list aui-list-in">
<li v-for="(item,index) in items" class="aui-list-item" v-if="items.length>0">
<div class="aui-list-item-inner">
<div class="aui-list-item-label" style="width:80%;">
<span v-if="item.WEIKONG==0" style="color:red;">*</span>{{item.LIEMINGC}}:
</div>
<div v-if="item.SHUXING==4 && item.QUZHIFW.trim() != ''" class="aui-list-item-input">
<select v-model="item.Value">
<option v-for="(zhi,i) in item.QUZHIFW.split('/')" :value="zhi.split('^')[1]">{{zhi.split('^')[0]}}</option>
</select>
<span v-if="checkValue(item.Value)==''" style="position: absolute; top:10px; font-size:16px; color: #999; z-index:1;">请输入...</span>
</div>
<div v-else-if="item.LEIXING==4" class="aui-list-item-input">
<input type="text" readonly="readonly" v-model="item.Value" @click="ChooseDateTime(index)" placeholder="请输入..." />
</div>
<div v-else-if="item.CHANGDU>50" class="aui-list-item-input">
<textarea v-model="item.Value" style="height:5rem;" placeholder="请输入..."></textarea>
</div>
<div v-else class="aui-list-item-input">
<input type="text" v-model="item.Value" placeholder="请输入..." />
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<input class="aui-radio" type="radio" :value="XiaYiBID" v-model="BZID" >{{XiaYiBMC}}</div>
</div>
</li> <li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<input class="aui-radio" type="radio" :value="TiaoZhuanBZID" v-model="BZID" >{{TiaoZhuanMC}}</div>
</div>
</li>
</ul>
<ul v-cloak class="aui-list aui-list-in">
<li class="aui-list-item" v-show="BZID==XiaYiBID">
<section class="aui-grid aui-margin-b-5">
<div class="aui-row-padded">
<div v-for="(s,index) in xiaYiBUCanYuZhe" class="aui-col-xs-4">
<label>
<input class="aui-checkbox" type="checkbox" :value="s.name" v-model="postCanYuZhe" @click="chakan">{{s.name}}</label>
</div>
<div v-for="(s,index) in XiaYiBCanYuZhe.split('||')" class="aui-col-xs-4">
<label>
<input class="aui-checkbox" type="checkbox" :value="s" v-model="CanYuZhePost" @click="chakan">{{(s.split(':')[1]).toString().split(',')[0]}}</label>
</div>
</div>
</section>
</li>
</ul>
<div>
<ul v-for="(item,index) in TiaoZhuanBZ" v-show="BZID==TiaoZhuanBZID" class="aui-list aui-select-list">
<li class="aui-list-item aui-text-center">
<div class="aui-list-item-inner">
<label>
<input class="aui-radio" type="radio" :value="item.name" v-model="TiaoZhuanHDID">{{item.name}}</label>
</div>
</li>
<li class="aui-list-item ">
<section class="aui-grid">
<div class="aui-row-padded">
<div v-for="(s,index) in item.CanYuZhe" class="aui-col-xs-4">
<label>
<input class="aui-checkbox" type="checkbox" :disabled="item.name!=TiaoZhuanHDID" :value="s.name" v-model="postCanYuZhe">{{s.name}}</label>
</div>
</div>
</section>
</li>
</ul>
</div>
</div>
</div>
数据构造：
<script>
var vueApp = new Vue({
el: '#biaoDanList',
data: {
items: [],
TiaoZhuanHDID: "审核流程",
BZID: "1",
postCanYuZhe: [],
CanYuZhePost: ["1461:骆立康,6105,e8906", "1461:骆立康,6105,e89060"],
XiaYiBCanYuZhe: "1461:骆立康,6105,e8906||1461:骆立康,6105,e89060",
XiaYiBID: "1",
XiaYiBMC: "转到下一步（审核流程）",
xiaYiBUCanYuZhe: [{
"name": "李欣1"
},
{
"name": "红伞1"
},
{
"name": "罗立据1"
}
],
TiaoZhuanBZID: "4",
TiaoZhuanMC: "同意，跳转到...",
TiaoZhuanBZ: [{
"name": "审核流程",
"CanYuZhe": [{
"name": "李欣2"
},
{
"name": "红伞2"
},
{
"name": "罗立据2"
}
]
},
{
"name": "确认流程",
"CanYuZhe": [{
"name": "李欣3"
},
{
"name": "红伞3"
},
{
"name": "罗立据3"
}
]
},
{
"name": "驳回流程",
"CanYuZhe": [{
"name": "李欣4"
},
{
"name": "红伞4"
},
{
"name": "罗立据4"
}
]
}
]
},
methods: {
clear: function () {
var _this = this;
_this.postCanYuZhe = [];
var obj = JSON.stringify(_this.TiaoZhuanBZ);
console.log(_this.TiaoZhuanHDID);
console.log(obj); },
chakan: function () {
console.log(JSON.stringify(this.CanYuZhePost));
}
}
});
var mdata = [{
"BIAODANDM": "tab12",
"LIEDAIM": "field1",
"LIEMINGC": "姓名",
"XUHAO": 1,
"LEIXING": 1,
"LEIXINGMC": "VARCHAR2",
"CHANGDU": 50,
"JINGDU": 0,
"ZHUJIAN": 0,
"WEIKONG": 1,
"SHUXING": 0,
"QUZHIFW": " ",
"MORENZ": " "
}, {
"BIAODANDM": "tab12",
"LIEDAIM": "field2",
"LIEMINGC": "科室",
"XUHAO": 2,
"LEIXING": 1,
"LEIXINGMC": "VARCHAR2",
"CHANGDU": 50,
"JINGDU": 0,
"ZHUJIAN": 0,
"WEIKONG": 1,
"SHUXING": 0,
"QUZHIFW": " ",
"MORENZ": " "
}, {
"BIAODANDM": "tab12",
"LIEDAIM": "field3",
"LIEMINGC": "备注",
"XUHAO": 3,
"LEIXING": 1,
"LEIXINGMC": "VARCHAR2",
"CHANGDU": 50,
"JINGDU": 0,
"ZHUJIAN": 0,
"WEIKONG": 1,
"SHUXING": 0,
"QUZHIFW": " ",
"MORENZ": " "
}];
var itemData = [];
for (var i = 0; i < mdata.length; i++) {
if (mdata[i].ZHUJIAN == 0) {
mdata[i].Value = "";
itemData.push(mdata[i]);
}
}
vueApp.items = itemData;
var output = [{
"XiaYiBID": "1",
"XiaYiBMC": " 转到下一步（审核流程）;",
"TiaoZhuanBZID": "4",
"TiaoZhuanMC": "同意，跳转到...;",
"CanYuZhe": "活动ID:张三,1234,5678||活动ID:李四,4321,8765",
"TiaoZhuanBZ": "审核流程,1430||确认流程,1431"
}];
console.log(output[0].CanYuZhe);
</script>
效果展示：
Vue 基本指令和html常用标签结合使用综合案例（含代码）的更多相关文章
-
html 常用标签 a form input 标签 等等等
前端HTML HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...
-
4.Thymeleaf的常用标签
一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...
-
Freemaker FTL指令常用标签及语法
https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...
-
FTL指令常用标签及语法
FTL指令常用标签及语法注意:使用freemaker,要求所有标签必须闭合,否则会导致freemaker无法解析. freemaker注释:<#-- 注释内容 -->格式部分,不会输出 - ...
-
vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
-
vue自定义指令用法总结及案例
1.vue中的指令有哪些?
-
第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
-
Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...
-
Python 44 前端概述 、三剑客 、常用标签与分类
1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML: .htm .html 内容 CSS: .css 效果 JS: .js 行为 2.简述三剑客的主要 ...
随机推荐
-
sql操作
SQL Server 存储过程 Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这 ...
-
Android之startActivityForResult的使用
在Android中startActivityForResult主要作用就是: A-Activity需要在B-Activtiy中执行一些数据操作,而B-Activity又要将,执行操作数据的结果返回给A ...
-
POJ 2263 Heavy Cargo 多种解法
好题.这题可以有三种解法:1.Dijkstra 2.优先队列 3.并查集 我这里是优先队列的实现,以后有时间再用另两种方法做做..方法就是每次都选当前节点所连的权值最大的边,然后BFS搜索. ...
-
poj3411Paid Roads(dfs)
链接 想偷点懒用矩阵存 一直WA 后来看讨论说有重边改为邻接表 这题边可能走了不止一次 我设的最多两次可过 #include <iostream> #include<cstdio&g ...
-
spring MVC做form提交Neither BindingResult nor plain target object for bean name &#39;command&#39; available
这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...
-
修改vim中的tab为4个空格
记录一下,避免用时还得搜........ 1.临时修改 在vi中,set tabstop=4 或 set ts=4 2.永久修改 vi --version 查看要修改的文件 如果是vim的话,修改~/ ...
-
iOS多线程的基本使用
一.NSThread: 程序就是一段代码,是静态的概念 进程是运行起来的程序,是动态的概念,进程需要占内存空间 线程是进程的基本单位,一个进程至少有一个线程,iOS程序默认有一个主线程,用来显示和操作 ...
-
BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德
BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德 Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们 ...
-
一.javascript核心部分:1.词法结构
本文作为个人学习笔记,一直也没有重视javascript的系统学习(javascript是最容易被人忽视的语言),我都是要用的时候百度一下查找下资料开始用,但没有系统的,学习,和整理过javascri ...
-
eclipse使用异常An error has occurred.see error log for more details eclipse
eclipse使用异常An error has occurred.see error log for more details eclipse 解决Eclipse,MyEclipse出现An erro ...