<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; 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; 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; 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=" 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 {
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 {
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 {
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 {
40%;
}
&.latername {
40%;
}
&.index {
10%;
padding-left: 15px;
}
&.operation {
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 {
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>