Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
54fb416c by 任超
Options

refactor:工作流

1 parent 726d21d7
Inline Side-by-side
Showing 3 changed files with 1 additions and 816 deletions
......@@ -24,20 +24,13 @@ export const constantRoutes = [
]
},
// 业务流程框架
{
path: '/workFrame',
component: () => import('@/views/workflow/workFrame.vue'),
name: 'workFrame',
hidden: true,
meta: { title: '发起申请' }
},
// 业务流程框架
{
path: '/workFramecs',
component: () => import('@/views/workflow/workFrame1.vue'),
name: 'workFramecs',
hidden: true,
meta: { title: '发起申请1' }
meta: { title: '发起申请' }
},
// 业务流程只读框架
{
......@@ -45,14 +38,6 @@ export const constantRoutes = [
component: () => import('@/views/workflow/workFrameView1.vue'),
name: 'workFrameViewcs',
hidden: true,
meta: { title: '发起申请2' }
},
// 业务流程只读框架
{
path: '/workFrameView',
component: () => import('@/views/workflow/workFrameView.vue'),
name: 'workFrameView',
hidden: true,
meta: { title: '发起申请' }
},
{
......
<template>
<div class="container">
<!-- 顶部内容框 -->
<div class="topButton">
<!-- 左侧业务功能按钮 -->
<ul>
<li @click="operation(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(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>
<NoticeBar class="NoticeBar" :noticeList="noticeList" />
</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 NoticeBar from '@/components/NoticeBar/index'
import { deleteFlow, unClaimTask } from "@/api/ywbl.js";
import ProcessViewer from './components/processViewer.vue'
import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js";
import { getForm } from "./flowform.js";
import fqsqDialog from "@/views/ywbl/ywsq/selectBdc.vue";
import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
export default {
components: {
fqsqDialog,
NoticeBar,
ProcessViewer
},
data () {
return {
noticeList: [],
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: {},
//页面监听时间
_beforeUnload_time: "",
};
},
mounted () {
this.loadBdcdylist();
this.flowInitParam();
//添加页面监听事件
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed () {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
},
methods: {
beforeunloadHandler () {
this._beforeUnload_time = new Date().getTime()
},
unloadHandler (e) {
thsi.$alert("234234");
this._gap_time = new Date().getTime() - this._beforeUnload_time
//判断是窗口关闭还是刷新
if (this._gap_time <= 10) {
//取消认领
unClaimTask(this.bsmSlsq, this.bestepid)
}
},
changeLoadIndex () {
this.loadIndex++
},
closeDialog () {
this.myValue = false
},
// 更新列表
updateDialog () {
this.loadBdcdylist();
},
// 删除左侧列表
handleDel (item) {
this.$confirm("确定要删除吗, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
var formdata = new FormData();
formdata.append("bsmSldyList", item.bsmSldy.split(","));
formdata.append("bsmSlsq", this.bsmSlsq);
deleteFlow(formdata).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;
}
});
},
//流程环节操作按钮
operation (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("流程图", "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("登记簿详情", "registerBook/djbFrame", {
formData: this.currentSelectProps,
width: "1220px",
height: "790px",
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
});
break;
case "B5":
this.$popup("证书预览", "workflow/components/zsyl", {
height: "850px",
width: "1070px",
formData: {
bsmSlsq: this.bsmSlsq,
entryType: '1'
},
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("确认回调");
},
})
break;
case "B7":
this.$popup("证书领取", "workflow/components/zslq", {
width: '900px',
formData: { bsmSlsq: this.$route.query.bsmSlsq },
})
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) {
if (res.result) {
this.sendToNext(res.result);
} else {
this.sendToEnd();
}
}
});
break;
case "stop": //终止按钮
this.$popup("终止", "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();
//取消认领
unClaimTask(this.bsmSlsq, this.bestepid)
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;
}
});
}
});
},
//批量按钮判断
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 (activeName && activeName != 0) this.getFromRouter(activeName)
},
//切换选项卡内容组件
getFromRouter (tabname) {
console.log(tabname, 'tabnametabname');
this.componentTag = getForm(tabname, this.$route.query.sqywbm);
},
//发送下一个环节
sendToNext (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 {
instance.confirmButtonLoading = false;
instance.confirmButtonText = "确定";
this.$message.error(res.message);
}
});
} else {
done();
}
},
}).then((action) => {
this.$message({
type: "info",
message: "action: " + action,
});
});
},
sendToEnd () {
const h = this.$createElement;
this.$msgbox({
title: "您确定转出吗？",
message: "此环节为流程结束环节，转出后流程将结束",
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 {
instance.confirmButtonLoading = false;
instance.confirmButtonText = "确定";
this.$message.error(res.message);
}
});
} else {
done();
}
},
}).then((action) => {
this.$message({
type: "info",
message: "action: " + action,
});
});
}
},
};
</script>
\ No newline at end of file
<template>
<div class="container">
<!-- 顶部内容框 -->
<div class="topButton">
<!-- 左侧业务功能按钮 -->
<ul>
<li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
<svg-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 v-if="this.isShowdrawer">
<div class="title">申请单元列表({{ unitData.length }})</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>
</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" @tab-click="tabClick">
<el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
</el-tab-pane>
</el-tabs>
<component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
</div>
</div>
</div>
</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 { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js"
import { getForm } from "./flowform.js"
export default {
data () {
return {
// 流程图
imgSrc: '',
// 折叠
isShowdrawer: true,
// 默认选中
activeIndex: '0',
//受理申请标识码
bsmSlsq: this.$route.query.bsmSlsq,
//当前流程所在环节
bestepid: this.$route.query.bestepid,
//顶部左侧按钮集合
leftButtonList: [],
//顶部右侧按钮集合
rightButtonList: [],
//左侧菜单数据集合
unitData: [],
//设置那个表单选中
tabName: "",
//表单集合
tabList: [],
//选择加载哪一个组件
componentTag: "",
//设置表单组件是否刷选值
fresh: 10,
//设置表单传递数据
currentSelectProps: {},
//是否开启材料分屏
splitScreen: false,
//材料分屏表单
clxxForm: "",
//材料信息选择卡索引
clxxIndex: "",
//材料信息选项卡对象
clxxTab: {},
}
},
mounted () {
this.loadBdcdylist();
this.flowInitParam();
},
methods: {
//加载流程初始参数
flowInitParam () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
formdata.append("type", "READ_ONLY");
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.clxxTab = item;
// }
// });
// //默认加载第一个选项卡的组件内容
// this.getFromRouter(res.result.form[0].value);
}
})
},
//流程环节操作按钮
operation (index, item) {
//按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书
//操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
let that = this;
switch (item.value) {
case "B1":
getWorkFlowImage(this.bsmSlsq).then(res => {
this.imgSrc = URL.createObjectURL(res)
this.$popup({
title: '流程图',
editItem: 'workflow/components/flowChart',
formData: this.imgSrc
})
})
break;
case "B5":
this.zsylFlag = true;
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, 1, this.clxxTab);
}
break;
case "signout":
window.close();
break;
}
},
//读取申请单元信息
loadBdcdylist () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
this.unitData = res.result;
this.currentSelectProps = res.result[0];
this.unitClick(0);
}
})
},
//申请单元点击事件
unitClick (index) {
this.currentSelectProps = this.unitData[index];
this.currentSelectProps.type = 'ONLY_READ';
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;
// }
},
//表单选项卡事件
tabClick (tab, event) {
this.getFromRouter(tab.name);
},
//切换选项卡内容组件
getFromRouter (tabname) {
this.componentTag = getForm(tabname);
},
}
}
</script>
\ No newline at end of file