change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面
<template>
<div>
<!-- <div class="banner">
<a-breadcrumb>
<a-breadcrumb-item>
<router-link to="/business/index">业务中心</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>
<router-link to="/business/index">内部事务</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>
<router-link to="/business/listmanagement">事项清单管理</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>事项清单变更</a-breadcrumb-item>
</a-breadcrumb>
</div>-->
<div class="content">
<div class="view">
<div class="form-item-title" id="anchor-one">
<span class="bar"></span>
<span class="text">基本信息</span>
</div>
<p class="basicInfo">
<span>发起单位 :{{infoobj.departmentname}}</span>
<span>发起人 :{{infoobj.username}}</span>
<span>发起时间 : {{infoobj.starttime}}</span>
<span>当前节点 : {{infoobj.currentnode}}</span>
</p>
<div class="form-item-title" id="anchor-one">
<span class="bar"></span>
<span class="text">当前办件信息</span>
</div>
<a-alert :message="tyeText" type="info" showIcon />
<div class="list">
<ul>
<li>
<div class="row header">
<span class="index">序号</span>
<span class="name">当前事项名称</span>
<span class="latername">调整后事项名称</span>
<!-- <span class="operation">操作</span> -->
</div>
</li>
<!-- <li class="loading" v-if="spinning">
<a-spin :spinning="spinning"/>
</li>-->
<template>
<li class="item" v-for="(item, index) in currentDoThingList" :key="index">
<div class="row">
<span class="index">{{item.index}}</span>
<span class="name">
<p>主项 ：{{item.currentBusiness.mainBusiness.name}}</p>
<p
v-if="item.currentBusiness.childBusiness.name==''?false:true"
>子项 ：{{item.currentBusiness.childBusiness.name}}</p>
<p>事项编码 ：3</p>
</span>
<span class="latername">
<!-- //调整后事项名称 -->
主项 ：
<!-- {{item.afterBusiness.mainBusiness.name}} -->
<a-input
v-if="item.afterBusiness.mainBusiness.name==''?true:false"
@change="changeList"
style="margin-bottom: 5px;width: 60%;"
:data-suoyin="item.index"
:placeholder="item.afterBusiness.mainBusiness.name"
/>
<!-- <a-input-group compact> -->
<!-- <a-select
@change="changeList3"
:data-suoyin="item.index"
v-if="item.afterBusiness.mainBusiness.name==''?false:true"
style="margin-bottom: 5px;width: 60%;"
>
<a-select-option
v-for="(item, index) in dataSource"
:key="index"
:value="item"
>{{item}}</a-select-option>
<a-select-option value="Jiangsu">Jiangsu</a-select-option>
</a-select>-->
<a-select
style="margin-bottom: 5px;width: 60%;"
@change="changeList3(item.index)"
v-model="selectVal[index]"
:data-suoyin="item.index"
:placeholder="item.afterBusiness.mainBusiness.name"
v-if="item.afterBusiness.mainBusiness.name==''?false:true"
>
<a-select-option
v-for="(item, index) in dataSource"
:key="index"
:value="item"
>{{item}}</a-select-option>
</a-select>
<!-- </a-input-group> -->
<br />
<br />
<span v-if="item.afterBusiness.mainBusiness.name==''?false:true">
子项 ：
<a-input
@change="changeList1"
style="width: 60%;"
:data-suoyin="item.index"
:placeholder="item.afterBusiness.childBusiness.name"
/>
</span>
</span>
<!-- <span class="operation">删除</span> -->
</div>
</li>
</template>
</ul>
</div>
<!-- //审批记录 -->
<div v-if="HaveToDealWith==1?false:true" class="form-item-title" id="anchor-one">
<span class="bar"></span>
<span class="text">审批记录</span>
</div>
<div v-if="HaveToDealWith==1?false:true">
<a-steps :current="1">
<a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
<template slot="content">
<span>
经办人 : {{index}}
<br />
经办时间: {{status}}
<br />
返回理由:{{prefixCls}}
</span>
</template>
<span :class="`${prefixCls}-icon-dot`"></span>
</a-popover>
<a-step title="提交申请" description />
<a-step title="退回" description />
<a-step title="提交申请" description />
<a-step title="审核通过" description />
</a-steps>
</div>
<!-- //按钮 -->
<div v-if="aaa==1" class="button" style="marginTop:20px;">
<a-button @click="auditPass" type="primary" style="margin-right: 15px;">提交申请</a-button>
<a-button @click="sendBack">取消</a-button>
</div>
</div>
</div>
<!-- //对话框 -->
<div>
<!-- <a-button type="primary" @click="showModal">Open Modal with async logic</a-button> -->
<a-modal
title="审核信息确认"
:visible="visible"
@ok="handleOk"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
>
<p>{{ModalText}}</p>
</a-modal>
<!-- //取消框输入信息 -->
<a-modal
title="取消申请提交"
:visible="visible1"
@ok="handleOk1"
:confirmLoading="confirmLoading"
@cancel="handleCancel1"
>
<p>
<a-input placeholder="请填写取消建议" v-model="backinfo" />
</p>
</a-modal>
</div>
</div>
</template>
<script>
import { passOrBack, namelike, detail, resubmit } from "@/api/approvalist";
export default {
name: "IistIndex",
data() {
return {
HaveToDealWith: this.$route.params.HaveToDealWith,
buttonShow: this.$route.params.buttonShow, //备注已办都不需要按钮 所以隐藏
dataSource: ["q", "w", "e", "r"],
listChange: this.$route.params.listChange,
id: this.$route.params.id,
isadd: 1,
selectVal: [],
infoobj: {
id: "", //当前变更ID
currentnode: "", //当前节点
starttime: "", //发起时间
username: "", //发起人
departmentname: "", //发起单位
mainbusinessnumber: "", //主项
childbusinessnumber: "", //子项
businessnumber: "" //主项个数
}, //信息对象
examineList: [], //审批记录数组
currentDoThingList: [], //当前办件信息数组
condition: true, //控制dislogo
ModalText: "请确认是否通过审核",
visible: false,
visible1: false, //控制退回
confirmLoading: false,
backinfo: "", //退回信息
aaa: this.$route.params.aaa,
businessListBeans: [
{
childBusiness: {
businessid: 0,
code: "string",
id: 0,
name: "string"
},
mainBusiness: {
businessid: 0,
code: "string",
id: 0,
name: "string"
}
}, {
childBusiness: {
businessid: 0,
code: "string",
id: 0,
name: "string"
},
mainBusiness: {
businessid: 0,
code: "string",
id: 0,
name: "string"
}
}
]
};
},
created() {
this.detaily();
setTimeout(() => {
this.namelikey();
}, 200);
},
watch: {},
methods: {
changeList(e) {
//输入框的回调事件 主项 的 输入框
console.log(e.target.value, "主项");
// console.log(this.currentDoThingList)
this.currentDoThingList.forEach((item, index) => {
if (e.target.dataset.suoyin == item.index) {
this.businessListBeans[index].mainBusiness.name = e.target.value; //输入框 主项变更后的名字
this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
this.businessListBeans[index].mainBusiness.code = item.currentBusiness.code;
}
});
},
changeList3(e) { //主要下拉框 这里后台数据和返回的数据不一所以 这里也可以动态创建一个对象businessListBeans//=》push数组里面
//这里有问题 内部需要一个判断 拿不到id 或者 index 主项的下拉框
this.currentDoThingList.forEach((item, index) => {
if (e - 1 == index) {
this.businessListBeans[index].mainBusiness.name = this.selectVal[index]; //下拉框 主项变更后的名字
console.log(index)
console.log(this.businessListBeans,"左边")
console.log(this.currentDoThingList,"右边")
this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
this.businessListBeans[index].mainBusiness.code = item.currentBusiness.mainBusiness.code;
}
});
},
changeList1(e) {
//输入框的回调事件 子项
// console.log(e.target.value, "子项");
this.currentDoThingList.forEach((item, index) => {
if (e.target.dataset.suoyin == item.index) {
this.businessListBeans[index].childBusiness.name = e.target.value; //子项变更后的名字
this.businessListBeans[index].childBusiness.id = item.currentBusiness.childBusiness.id;
this.businessListBeans[index].childBusiness.code = item.currentBusiness.childBusiness.code;
}
});
},
namelikey() {
namelike().then(res => {
console.log(res, "根据事项名称模糊查询");
this.dataSource = res.result;
// 如果=当前事项名称=只有主项没有子项的话 右边的 =调整后事项名称= 也只有主项 无子项 只能手动输入
console.log(this.currentDoThingList);
// this.currentDoThingList.forEach(item => {
// if (item.childBusiness.name == "") {
// this.dataSource = [];
// return;
// }
// });
});
},
tyeText() { //通过函数放置字符串
if (this.isadd) {
var tex = `新增 ${this.infoobj.businessnumber} 项`;
} else {
var tex = `新增1项`;
}
return tex;
},
detaily() {
detail(this.id).then(res => {
console.log(res, "获取变更的申请记录详细信息");
this.infoobj.id = res.result.id;
this.infoobj.currentnode = res.result.currentnode;
this.infoobj.starttime = res.result.starttime;
this.infoobj.username = res.result.username;
this.infoobj.departmentname = res.result.departmentname;
this.infoobj.mainbusinessnumber = res.result.mainbusinessnumber;
this.infoobj.childbusinessnumber = res.result.childbusinessnumber;
this.infoobj.businessnumber = res.result.businessnumber;
//当前办件信息数组
res.result.businessListUpdateBeans.forEach((item, index) => {
item.index = index + 1;
});
this.currentDoThingList = res.result.businessListUpdateBeans;
// let info = [{name:'',id:''}]
// this.currentDoThingList.forEach(item=>{
// itme.name = info
// })
// 审批记录数组
// this.examineList = res.result.approvalrecords;
// console.log(this.examineList, "0909");
});
},
auditPass() {
//审核通过
this.showModal();
},
sendBack() {
//退回
// passOrBack(this.id, false, "").then(res => {
// console.log(res);
// });
this.visible1 = true;
},
showModal() {
this.visible = true;
},
handleOk(e) {
//弹框的ok
// if (this.resubmitVo.length == 0) {
// this.$notification.open({
// message: "提交失败",
// description: "表单内容为空,请重新尝试",
// onClick: () => {
// console.log("提交失败");
// }
// });
// return;
// }
// if (this.isCL == 101) {
// this.XZadd = 1;
// } else if (this.isCL == 102) {
// console.log("撤销");
// this.XZadd = 2;
// }
// resubmit(this.resubmitVo, this.XZadd, this.recordid).then(res => {
// if (res.code == "form_valid_failed") {
// this.$notification.open({
// message: "提交失败",
// description: "表单内容重复,请重新尝试",
// onClick: () => {
// console.log("提交失败");
// }
// });
// }
// console.log(
// this.resubmitVo,
// this.XZadd,
// this.recordid,
// "这里看完成后的数据"
// );
// console.log(res, "更改成功");
// });
// this.$router.push({ name: "listrecord" });
resubmit(this.businessListBeans, 3, this.id).then(res => {
console.log(res, "结果集");
});
},
handleCancel(e) {
//弹框的取消
console.log("审核未通过");
this.visible = false;
},
//退回
handleOk1(e) {
//弹框的退回
passOrBack(this.id, true, this.backinfo).then(res => {
// console.log(res);
this.ModalText = "退回成功";
this.confirmLoading = true;
setTimeout(() => {
this.visible1 = false;
this.confirmLoading = false;
}, 2000);
});
this.$router.push({ name: "listrecord" });
},
handleCancel1(e) {
//弹框的取消
// console.log("退回未通过");
this.visible1 = false;
}
}
};
</script>
<style lang="less" scoped>
.banner {
width: 100%;
padding: 24px;
background: #fff;
}
.content {
padding: 0px 12px;
.view {
margin-top: 12px;
padding: 24px 24px;
overflow: hidden;
justify-content: left;
background: #fff;
.statistics {
padding: 5px;
display: flex;
align-items: center;
background-color: #e9f7fa;
border-radius: 2px;
border: solid 2px #0f6ddc;
p {
margin-bottom: 0;
}
span {
color: #0f6ddc;
}
}
}
}
.list {
width: 100%;
margin-top: 24px;
ul {
margin: 0px;
padding: 0px;
li {
height: 42px;
transition: ease-out 0.3s all;
list-style: none;
&.active {
height: auto;
}
&.loading {
text-align: center;
padding: 30px;
}
.row {
width: 100%;
height: 42px;
line-height: 42px;
display: flex;
// justify-content: space-between;
color: #171717;
border-bottom: 1px solid #f3f3f3;
&:hover {
background: #f3f3f3;
cursor: pointer;
}
&.header {
font-size: 15px;
color: #595959;
background: #f6f6f6;
.release {
color: #595959;
}
}
span {
&.name {
width: 40%;
}
&.latername {
width: 40%;
}
&.index {
width: 10%;
padding-left: 15px;
}
&.operation {
width: 10%;
}
}
}
}
}
}
.item {
height: 90px !important;
.row {
height: 90px !important;
line-height: 15px !important;
display: flex;
align-items: center;
}
p {
margin-bottom: 8px;
}
.operation {
padding-left: 15px;
color: #0f6ddc;
}
}
.plus {
margin: 20px 0;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
border: dashed 1px #c6c6c6;
&:hover {
border: dashed 1px #0f6ddc;
color: #0f6ddc;
cursor: pointer;
}
}
.form-item-title {
margin-top: 20px;
display: flex;
align-items: center;
padding-bottom: 15px;
span {
&.bar {
width: 3px;
height: 15px;
background: #1890ff;
}
&.text {
font-size: 16px;
color: #1890ff;
margin-left: 10px;
}
}
}
// .basicInfo {
// span:nth-of-type(1) {
// margin-right: 150px;
// }
// span:nth-of-type(2) {
// margin-right: 150px;
// }
// span:nth-of-type(3) {
// margin-right: 150px;
// }
// }
</style>
change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面的更多相关文章
- jquery 绑定事件 获取方式 --------------data event 获取
//绑定事件 bind event $("body").on("click",function(){ console.log("in") } ...
- C#窗体间常用的几种传值方式、以及委托与事件的详细介绍
窗体间的传值,最好使用委托方式传值,开始之前,我们先来说一下委托与事件的关系. 委托:是一个类. 事件:是委托类型的一个特殊实例,只能在类的内部触发执行. 首先创建2个窗体,这里我们以form1为发送 ...
- change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。
change([[data],fn]) 概述 当元素的值发生改变时,会发生 change 事件.大理石平台价格表 该事件仅适用于文本域(text field),以及 textarea 和 select ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- 浅谈Extjs radiogroup change事件与items下的checked属性
在使用Extjs制作crud时,由于添加和修改界面的高度相似,使用了相同的row字段. 在角色字段中使用了change监听事件,用于动态的无效化权限分配字段,因为权限分配界面默认没有隐藏,设定了che ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- type=file的change事件只能执行一次的解决方案
最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式. 起初帮朋友做个项目,项目中遇到上传文 ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- linux命令之------Chown命令
Chown命令 1) 作用:将指定文件的拥有者改为指定的用户或组. 2) -c:显示更改的部分的信息. 3)-f:忽略错误信息. 4)-h:修复符号链接. 5)-v:显示详细的处理信息. 6)-R:处 ...
- 洛谷P1270 访问美术馆
题目 树形DP,首先考虑递归建图,类似于线段树的中序遍历.然后取状态dp[i][j]表示i点花费j时间所偷到的最多的画,有方程: \(dp[now][nwt] = max(dp[now][nwt], ...
- 深度学习图像配准 Image Registration: From SIFT to Deep Learning
Image Registration is a fundamental step in Computer Vision. In this article, we present OpenCV feat ...
- element ui 里面的table怎么弹出一个框让表中数据点击出现弹框
<el-table-column label="团队" prop="name" min-width="120px" align=&qu ...
- kubernetes监控终极方案-kube-promethues
kube-promethues简介 前面我们学习了Heapster+cAdvisor方式监控,这是Prometheus Operator出现之前的k8s监控方案.后来出现了Prometheus Ope ...
- 安装与配置HSDIS与JITWatch
本作者的系统: 操作系统版本及位数可通过uname -a命令查看,如下: Linux ubuntu 3.13.0-32-generic #57~precise1-Ubuntu SMP Tue Jul ...
- Cloudera-Manager(一） —— 基本概念及使用
概念 Cloudera Manager(简称CM)是Cloudera公司开发的一款大数据集群安装部署利器,这款利器具有集群自动化安装.中心化管理.集群监控.报警等功能,极大的提高集群管理的效率. AP ...
- 腾讯云手动搭建nginx+php-fpm并自启动
自己一点小爱好,搭建了一个小网站植物大战僵尸百科, 使用的是腾讯云,市场里的镜像不好用,所以自己手动搭建一波. centos 7 编译安装 php-7.2.11的步骤 在官网下载php-7.2.11的 ...
- 【定制开发】经纪人报备软件 全民经纪人系统 房产中介微信小程序分享家恒房通
信真科技2019年最先扛鼎之作 - 全民经纪人软件系统 1.含有最基础的经纪人注册.客户报备系统功能: 2.可支持定制开发,针对房企售楼部.中介门店: 3.与微信端绑定使用,方便快捷,快速分享: 4. ...
- Tomcat的并发能力
关注 一.一些限制 Windows 每个进程中的线程数不允许超过 2000 Linux 每个进程中的线程数不允许超过 1000 在 Java 中每开启一个线程需要耗用 1MB 的 JVM 内存空间 ...