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 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- Fast + Small Docker Image Builds for Rust Apps
转自:https://shaneutt.com/blog/rust-fast-small-docker-image-builds/ In this post I’m going to demonstr ...
- HTML5 文件读取
一.定义 input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名):file类型的input会有files属性,保存着文件的相关信息 ...
- [RN] React Native 使用 react-navigation 报错 "Unable to resolve module `react-native-gesture-handler`
在React Native 使用 react-navigation 过程中,报错 "Unable to resolve module `react-native-gesture-handle ...
- 洛谷 P2918 [USACO08NOV]买干草Buying Hay 题解
P2918 [USACO08NOV]买干草Buying Hay 题目描述 Farmer John is running out of supplies and needs to purchase H ...
- 计蒜客 39268.Tasks-签到 (The 2019 ACM-ICPC China Shannxi Provincial Programming Contest A.) 2019ICPC西安邀请赛现场赛重现赛
Tasks It's too late now, but you still have too much work to do. There are nn tasks on your list. Th ...
- Java两个数的和
给你一个整数数组, 返回两个数的指数,使他们加起来等于给定的数. 你可以假设只有一个解, 并且相同的元素不会用两次. 比如: 给定数组 = [2, 7, 11, 15], 目标数 = 9, 因为[0] ...
- Python调用win32 API绘制正弦波
Python调用win32 API新建窗口与直接创建窗口的流程相同 流程:注册窗口→创建窗口→显示窗口→更新窗口→消息循环 代码: # -*- coding: utf-8 -*- import win ...
- 微信小程序之页面导航栏
效果图: 页面有点丑,作为初次学习,页面可以要求不那么美观,先学会再说.毕竟后面可以优化的很漂亮. 代码实例如下: <view class="section btn-area" ...
- Net core学习系列（三）——Net Core中的依赖注入
本文通过一个维修工与工具库的例子形象的描述一下为什么要用依赖注入.它的工作原理是什么样的, 然后根据这个类比一下ASP.NET Core 中的依赖注入, 从而深刻了解它的使用方法.注意事项以及回收机制 ...
- Spring Boot-IntelliJ IDEA搭建SpringBoot
点击create new project 点击next 这里基本都已经自动生成了,简单介绍下: Name:项目名称 Type:我们是Maven构建的,那么选择第一个Maven Project Pack ...