<template>
<div class="container">
<!-- 顶部内容框 -->
<div class="topButton">
<!-- 左侧业务功能按钮 -->
<ul>
<li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
<!-- 右侧流程按钮 -->
<ul>
<li @click="operation(index, item)" v-for="(item, index) in rightButtonList" :key="index">
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
</div>
<!-- 内容框架 -->
<div class="containerFrame">
<!-- 左侧菜单栏 -->
<div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
<div class="title" @click="unitClick(-1)" v-if="showBatch">{{batchButtonName}}</div>
<div v-if="this.isShowdrawer">
<div class="title">
申请单元列表({{ unitData.length }})
<el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length > 1">批量删除</el-button>
</div>
<el-menu :default-active="activeIndex" @select="unitClick">
<el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
<div>
<p>{{ item.bdcdyh }}</p>
<p class="title-detail">{{ item.zl }}</p>
</div>
<i class="el-icon-delete" v-if="unitData.length > 1" @click.stop="handleDel(item)"></i>
</el-menu-item>
</el-menu>
</div>
<div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
<div class="map-drawer-expand map-drawer" v-else @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
</div>
<div class="leftCon">
<!-- 分屏左侧预览 -->
<div v-if="splitScreen" class="splitScreen-con">
<component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
</div>
<!-- 表单内容区域 -->
<div class="rightContainer">
<el-tabs v-model="tabName" :before-leave="beforeLeave">
<el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
</el-tab-pane>
</el-tabs>
<component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
</div>
</div>
</div>
<fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
</div>
</template>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import {
leftMenu,
stepExpandInfo,
record,
getNextLinkInfo,
completeTask,
getStepFormInfo,
} from "@/api/fqsq.js";
import { mapGetters } from "vuex"
import { deleteBdcdy } from "@/api/ywbl.js";
import ProcessViewer from './components/processViewer.vue'
import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
import { getForm } from "./flowform.js";
import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
export default {
components: {
fqsqDialog,
ProcessViewer
},
data () {
return {
isDialog: false,
// 流程图
// 折叠
isShowdrawer: true,
// 默认选中
activeIndex: "0",
//受理申请标识码
bsmSlsq: this.$route.query.bsmSlsq,
//当前流程所在环节
bestepid: this.$route.query.bestepid,
//是否展示批量按钮
showBatch: false,
//批量按钮名称
batchButtonName: '',
//顶部左侧按钮集合
leftButtonList: [],
//顶部右侧按钮集合
rightButtonList: [],
//左侧菜单数据集合
unitData: [],
//设置那个表单选中
tabName: "",
//表单集合
tabList: [],
//选择加载哪一个组件
componentTag: "",
//设置表单组件是否刷选值
fresh: 10,
//设置表单传递数据
currentSelectProps: {},
//是否开启材料分屏
splitScreen: false,
//材料分屏表单
clxxForm: "",
//材料信息选择卡索引
clxxIndex: "",
//材料信息选项卡对象
clxxTab: {},
};
},
mounted () {
this.loadBdcdylist();
this.flowInitParam();
},
computed: {
...mapGetters(["oldDetail", "newDetail"])
},
methods: {
changeLoadIndex () {
this.loadIndex++
},
closeDialog () {
this.myValue = false
},
// 更新列表
updateDialog () {
this.loadBdcdylist();
},
// 删除左侧列表
handleDel (item) {
this.$confirm("确定要删除吗, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteBdcdy({
bsmSlsq: this.bsmSlsq,
bsmSldyList: item.bsmSldy.split(","),
}).then((res) => {
if (res.code == 200) {
this.$message.success("删除成功");
this.loadBdcdylist();
} else {
this.$message.error(res.message);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleBatchDel () {
let that = this;
this.$popup({
title: "批量删除",
width: "50%",
btnShow: true,
editItem: "workflow/components/batchDel",
height: "600px",
formData: {
bsmSlsq: this.bsmSlsq,
dataList: this.unitData,
},
cancel: function () { }, //取消事件的回调
confirm: function () {
that.loadBdcdylist();
}, //确认事件的回调
});
},
//加载流程初始参数
flowInitParam () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
stepExpandInfo(formdata).then((res) => {
if (res.code === 200) {
this.leftButtonList = res.result.button;
this.rightButtonList = res.result.operation;
//this.tabList = res.result.form;
//默认选择第一个选项卡内容
// this.tabName = res.result.form[0].value;
// let that = this;
// this.tabList.forEach(function (item, index) {
// if (item.value == "clxx") {
// that.clxxIndex = index;
// that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
// that.clxxTab = item;
// }
// });
// //默认加载第一个选项卡的组件内容
// this.getFromRouter(res.result.form[0].value);
}
});
},
//流程环节操作按钮
operation (index, item) {
//按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿
//操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
let that = this;
switch (item.value) {
case "B0":
// let type = queueDjywmc(this.$route.query.sqywbm)
this.isDialog = true;
break;
case "B1":
getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => {
let { result } = res
this.$popup({
title: "流程图",
height: '500px',
editItem: "workflow/components/processViewer",
formData: {
xml: result.xml,
finishedInfo: {
finishedTaskSet: result.finishedTaskSet,
unfinishedTaskSet: result.unfinishedTaskSet,
rejectedTaskSet: result.rejectedTaskSet,
finishedSequenceFlowSet: result.finishedSequenceFlowSet
},
allCommentList: result.historyTaskList
}
})
})
break;
case "B2": //材料分屏按钮
this.splitScreen = this.splitScreen ? false : true;
this.$store.dispatch("app/settScreen", this.splitScreen);
if (this.splitScreen) {
//如果当前选项卡为材料信息内容，递减到上一个选项卡内容
if (this.tabName == this.clxxTab.value) {
this.tabName = this.tabList[this.clxxIndex - 1].value;
this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
}
//删除材料信息选项卡数据
this.tabList.splice(this.clxxIndex, 1);
} else {
//新增材料信息选项卡数据
this.tabList.splice(this.clxxIndex, 0, this.clxxTab);
}
break;
case "B4":
this.$popup({
titleStyle: "left",
title: "登记簿详情", // 弹窗标题
editItem: "registerBook/djbFrame", // 弹窗内容
formData: this.currentSelectProps,
width: "1220px",
height: "790px",
// cancelText: '取消摆烂', // 右边按钮文本
// confirmText: '确定点击', //左边按钮文本
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
});
break;
case "B5":
this.$popup({
title: "证书预览",
editItem: "workflow/components/zsyl",
height: "600px",
width: "800px",
formData: {
bsmSlsq: this.bsmSlsq,
entryType: '1'
},
btnShow: false,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
})
break;
case "B7":
this.$popup({
title: "证书领取",
editItem: "workflow/components/zslq",
height: "500px",
formData: {},
btnShow: true,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
})
break;
case "back": //退回按钮
this.$popup({
title: "退回",
editItem: "workflow/components/th",
height: "400px",
width: '30%',
formData: {
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid
},
btnShow: true,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
})
break;
case "transfer": //转件按钮
getNextLinkInfo({
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid,
}).then((res) => {
if (res.code === 200) {
this.send(res.result);
}
});
break;
case "stop": //终止按钮
this.$popup({
title: "终止",
editItem: "workflow/components/stop",
height: "330px",
width: '30%',
formData: {
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid,
},
btnShow: true,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
})
break;
case "signout":
window.close();
break;
case "B9":
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
this.$confirm("请确认是否登簿", "提示", {
iconClass: "el-icon-question", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
cancelButtonText: "取消", //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: "warning", //提示类型 success/info/warning/error
}).then(function () {
record(formdata).then((res) => {
if (res.code === 200) {
if(res.result.length===1){
res.result[0].state? that.$alert("登簿成功！"): that.$alert(res.result[0].msg);;
}
else{
that.$alert('<div>'+res.result[0].ywh+','+res.result[0].msg+'</div>', '登簿明细', {
dangerouslyUseHTMLString: true
});
}
}else{
that.$alert(res.message);
}
});
});
break;
}
},
//读取申请单元信息
loadBdcdylist () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
if(res.result){
this.unitData = res.result;
this.currentSelectProps = res.result[0];
this.judgeBatchShow();
if(this.showBatch){
//满足批量查封/批量抵押按钮出现 即先展示批量表单
this.unitClick(-1);
}else{
//默认选择单元列表第一个
this.unitClick(0);
}
}
}
});
},
//申请单元点击事件
unitClick (index) {
if(index >= 0){
this.currentSelectProps = this.unitData[index];
this.currentSelectProps.batchOperation = false;
}else{
this.currentSelectProps.batchOperation = true;
}
getStepFormInfo(this.currentSelectProps).then((res) => {
if (res.code === 200) {
this.fresh += 1;
//获取单元对应的所有表单信息
this.tabList = res.result;
//默认加载第一个表单信息
this.tabName = res.result[0].value;
//处理分屏材料信息
let that = this;
this.tabList.forEach(function (item, index) {
if (item.value == "clxx") {
that.clxxIndex = index;
that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
that.clxxTab = item;
}
});
}
});
// if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
// this.currentSelectProps = this.unitData[index];
// this.fresh += 1;
// }
},
//批量按钮判断
judgeBatchShow() {
this.showBatch = false;
let qllx = this.$route.query.sqywbm.substring(0,3);
if(this.unitData.length > 1){
switch(qllx){
case 'B39':
this.showBatch = true;
this.batchButtonName = '批量查封';
break;
case 'A37':
this.showBatch = true;
this.batchButtonName = '批量抵押';
break;
}
}
},
//表单选项卡事件
beforeLeave (activeName, oldActiveName) {
if (!_.isEqual(this.oldDetail, this.newDetail)) {
this.$message.error('界面内容有所变化,请先保存')
return false
} else {
if (activeName && activeName != 0) this.getFromRouter(activeName)
}
},
//切换选项卡内容组件
getFromRouter (tabname) {
console.log(tabname, 'tabnametabname');
this.componentTag = getForm(tabname, this.$route.query.sqywbm);
},
//发送下一个环节
send (obj) {
const h = this.$createElement;
this.$msgbox({
title: "您确定转出吗？",
message: h("div", { style: "margin: auto" }, [
h("span", null, "下个环节名称："),
h("i", { style: "color: teal" }, obj.taskName),
h("div", null, ""),
h("span", null, "下个环节经办人： "),
h("i", { style: "color: teal" }, obj.usernames.join("，")),
]),
showCancelButton: true,
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.confirmButtonText = "执行中...";
completeTask({
bsmSlsq: this.bsmSlsq,
shyj: "this.bestepid",
stepform: JSON.stringify(this.tabList),
}).then((res) => {
if (res.code === 200) {
instance.confirmButtonLoading = false;
this.$message.success("转件成功");
setTimeout(() => {
window.opener = null;
window.open("about:blank", "_self");
window.close();
this.$emit("input", false);
}, 1000);
}
});
} else {
done();
}
},
}).then((action) => {
this.$message({
type: "info",
message: "action: " + action,
});
});
},
},
};
</script>