Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
b2eacbc4 by 任超
Options

style:工作流

1 parent e9c9b431
Inline Side-by-side
Showing 25 changed files with 14 additions and 637 deletions
......@@ -29,7 +29,7 @@ export const constantRoutes = [
// 业务流程框架
{
path: '/workFrame',
component: () => import('@/views/ywbl/fqsq/workFrame.vue'),
component: () => import('@/views/workflow/workFrame.vue'),
name: 'workFrame',
hidden: true,
meta: { title: '发起申请' }
......
//流程环节操作按钮
export function getForm(tabName) {
export function getForm (tabName) {
let form;
switch (tabName) {
case "slxx":
form = require("@/views/ywbl/fqsq/components/slxx.vue");
form = require("@/views/workflow/components/slxx.vue");
break;
case "slxxCfdj":
form = require("@/views/ywbl/fqsq/components/slxxCfdj.vue");
form = require("@/views/workflow/components/slxxCfdj.vue");
break;
case "clxx":
form = require("@/views/ywbl/fqsq/components/clxx.vue");
form = require("@/views/workflow/components/clxx.vue");
break;
case "spyj":
form = require("@/views/ywbl/fqsq/components/spyj.vue");
form = require("@/views/workflow/components/spyj.vue");
break;
case "zdjbxx":
form = require("@/views/zhcx/djbcx/components/zdxx.vue");
......@@ -21,10 +21,10 @@ export function getForm(tabName) {
form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
break;
case "szxx":
form = require("@/views/ywbl/fqsq/components/szxx.vue");
form = require("@/views/workflow/components/szxx.vue");
break;
case "fzxx":
form = require("@/views/ywbl/fqsq/components/fzxx.vue");
form = require("@/views/workflow/components/fzxx.vue");
break;
}
......
......@@ -122,13 +122,13 @@
}
.map-drawer-expand {
background: url("../../../image/right.png");
background: url("../../image/right.png");
background-size: cover;
right: 0%;
}
.map-drawer-click {
background: url("../../../image/left.png");
background: url("../../image/left.png");
background-size: cover;
left: 0%;
}
......
......@@ -74,9 +74,9 @@ import {
record,
getNextLinkInfo,
completeTask,
} from "@/api/fqsq.js";
} from "@/api/fqsq.js"
import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
import { getForm } from "./flowform.js";
import { getForm } from "./flowform.js"
export default {
data () {
return {
......@@ -115,7 +115,7 @@ export default {
clxxIndex: "",
//材料信息选项卡对象
clxxTab: {},
};
}
},
mounted () {
this.loadBdcdylist();
......@@ -145,7 +145,7 @@ export default {
//默认加载第一个选项卡的组件内容
this.getFromRouter(res.result.form[0].value);
}
});
})
},
//流程环节操作按钮
operation (index, item) {
......@@ -185,7 +185,6 @@ export default {
this.send(res.result);
}
});
// this.$alert(res.result);
break;
case "tc":
window.close();
......@@ -194,7 +193,6 @@ export default {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
// comMsg;
this.$confirm("请确认是否登簿", "提示", {
iconClass: "el-icon-question", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
......
//流程环节操作按钮
export function getForm(tabName) {
let form;
switch (tabName) {
case "slxx":
form = require("@/views/ywbl/fqsq/components/slxx.vue");
break;
case "slxxCfdj":
form = require("@/views/ywbl/fqsq/components/slxxCfdj.vue");
break;
case "clxx":
form = require("@/views/ywbl/fqsq/components/clxx.vue");
break;
case "spyj":
form = require("@/views/ywbl/fqsq/components/spyj.vue");
break;
case "zdjbxx":
form = require("@/views/zhcx/djbcx/components/zdxx.vue");
break;
case "qlxx":
form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
break;
case "szxx":
form = require("@/views/ywbl/fqsq/components/szxx.vue");
break;
case "fzxx":
form = require("@/views/ywbl/fqsq/components/fzxx.vue");
break;
}
return (r) => require.ensure([], () => r(form));
}
<template>
<div class="fqsq">
<div class="fqsq-header">
<ul>
<li @click="operation(index, item)" v-for="(item, index) in headerleftList" :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 headerRightList" :key="index">
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
</div>
<div class="tabsList">
<div class="tabsList-left">
<div class="map-drawer-click" v-if="!isShowdrawer" @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
<div class="map-drawer-expand" v-else @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
<ul v-if="this.isShowdrawer">
<p class="title">申请单元列表({{ unitData.length }})</p>
<div v-for="(item, index) in unitData" :key="index">
<li @click="unitClick(item)">
<p>{{ item.bdcdyh }}</p>
<p>{{ item.zl }}</p>
</li>
<div class="xian"></div>
</div>
</ul>
</div>
<div class="tabsList-right">
<div class="fenpin" v-show="issplitScreen">
<p class="splitScreen tabsList-title">材料信息</p>
<div class="splitScreen"></div>
</div>
<div style="width: 100%">
<el-tabs v-model="activeName" @tab-click="activeClick">
<el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
</el-tab-pane>
</el-tabs>
<div class="splitScreen-con">
<component ref="slxx" v-if="activeName == 'slsq'" :is="editItem" :flag="flag" :fetch='fetch' :key="key" />
<component :is="editItem" v-else :key="key" />
</div>
</div>
</div>
</div>
<zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
<thDialog ref="thdialogRef" v-model="thflag" :bsmBusiness="bsmBusiness" :queryForm="queryForm" />
<zslqDialog ref="zslqDialog" v-model="zslqDialog" />
<!-- <zsylDialog v-model="zsylFlag" /> -->
</div>
</template>
<script>
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
import comMsg from "@/views/components/comMsg.vue";
import zc from "./components/zc.vue";
import thDialog from "./components/th.vue";
// import zsylDialog from "./components/zsyl";
import zslqDialog from "./components/zslq";
export default {
/**注册组件*/
components: { zc, thDialog, zsylDialog, comMsg, zslqDialog },
data () {
return {
activeIndex: '0',
zsylFlag: false,
zcDialog: false,
thflag: false,
zslqDialog: false,
queryForm: {
bsmSlsq: "",
bestepid: "",
bsmBusiness: ""
},
isShowdrawer: true,
key: 0,
flag: false,
headerleftList: [],
headerRightList: [],
activeName: "slxx",
tabList1: [],
tabList: [],
editItem: "",
issplitScreen: false,
unitData: [],
bsmBusiness: "",
fetch: false
};
},
watch: {
activeName: {
handler (newName, oldName) {
if (newName === "qlxx") {
this.editItem = this.loadViewSlsq();
} else {
console.log(newName, 'newNamenewNamenewName');
this.editItem = this.loadView(newName);
}
},
immediate: true,
},
},
mounted () {
if (this.$route.query.bsmSlsq) {
this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
this.queryForm.bsmSlsq = this.$route.query.bsmSlsq;
this.queryForm.bestepid = this.$route.query.bestepid;
this.queryForm.bsmBusiness = this.$route.query.bsmBusiness;
this.list();
}
},
methods: {
// 获取左侧列表
list () {
let that = this;
var formdata = new FormData();
formdata.append("bsmSlsq", that.queryForm.bsmSlsq);
formdata.append("bestepid", that.queryForm.bestepid);
formdata.append("bsmBusiness", that.queryForm.bsmBusiness);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
this.unitData = res.result ? res.result : [];
setTimeout(() => {
that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
}, 300);
}
});
},
//获取环节扩展信息
expandInfo (bsmSlsq, bestepid) {
let that = this;
var formdata = new FormData();
formdata.append("bsmSlsq", bsmSlsq);
formdata.append("bestepid", bestepid);
stepExpandInfo(formdata).then((res) => {
if (res.code === 200) {
this.tabList1 = [...res.result.form];
this.tabList = res.result.form;
this.activeName = res.result.form[0].value;
this.headerleftList = res.result.button;
this.headerRightList = res.result.operation;
}
});
},
activeClick (tab, event) {
if (tab.name == "slxx") {
this.list();
}
},
// 左侧列表点击调用接口
unitClick (item) {
console.log(item, 'unitClickunitClickunitClick');
this.bsmBusiness = item.bsmBusiness
var activeTabName = this.activeName
if (activeTabName == 'slxx') {
//受理信息页面接口调取
this.$nextTick(() => {
this.$refs.slxx[0].list(item.bsmSldy)
})
} else if (activeTabName == 'spyj') {
//审批页面接口调取
this.$nextTick(() => {
this.$refs.spyj[0].list(this.bsmBusiness, this.queryForm.bestepid)
})
}
},
operation (index, item) {
let that = this;
switch (item.value) {
case "zsyl":
this.zsylFlag = true;
break;
case "clfp":
this.key++;
this.issplitScreen = !this.issplitScreen;
this.flag = !this.flag;
if (this.issplitScreen) {
this.tabList.splice(1, 1);
} else {
this.tabList = [...this.tabList1];
}
break;
case "th":
this.thflag = true;
this.$nextTick(() => {
this.$refs.thdialogRef.tablelistFn();
});
break;
case "zc":
this.zcDialog = true;
this.$refs.zcDialogRef.tablelistFn();
break;
case "tc":
window.close();
break;
case "zslq":
this.zslqDialog = true;
this.$refs.zslqDialog.tablelistFn();
break;
case "db":
var formdata = new FormData();
formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
formdata.append("bestepid", this.$route.query.bestepid);
// comMsg;
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 || res.code === 2002) {
that.$alert(res.message);
}
});
});
break;
}
},
loadView (view) {
return (r) =>
require.ensure([], () => r(require(`./components/${view}.vue`)));
},
loadViewSlsq () {
return (r) =>
require.ensure([], () =>
r(require("@/views/zhcx/djbcx/components/jsydsyq.vue"))
);
},
},
};
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
/deep/.svg-icon {
width: 2.5em;
height: 2.5em;
}
/deep/.el-tabs__nav-wrap {
padding: 5px 0 0 15px;
}
/deep/.el-tabs__nav-wrap::after {
height: 1px;
}
.iconName {
line-height: 24px;
font-size: 12px;
}
/deep/.el-tabs__header {
margin: 0 !important;
}
.splitScreen-con {
padding: 0 15px;
box-sizing: border-box;
height: calc(100% - 350px);
}
.fqsq {
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
background-color: #ffffff;
overflow: hidden;
.splitScreen {
min-width: 50%;
}
&-header {
@include flex;
width: 100%;
height: 80px;
background-color: #3498db;
color: #ffffff;
justify-content: space-between;
padding-left: 15px;
position: sticky;
top: 0;
z-index: 100;
ul {
@include flex;
li {
@include flex-center;
cursor: pointer;
flex-direction: column;
margin-right: 15px;
box-sizing: border-box;
width: 70px;
margin: 0 5px;
}
li:hover {
border: 1px solid #ffffff;
border-radius: 5px;
.svg-icon {
//color: $light-blue ;
}
}
}
}
/deep/.el-menu-item.is-active {
background-color: #e7f4fe;
}
.map-drawer-expand {
width: 20px;
height: 77px;
background: url("../../../image/right.png");
background-size: cover;
position: absolute;
right: 0%;
top: 30%;
z-index: 99;
cursor: pointer;
}
.map-drawer-click {
width: 20px;
height: 77px;
background: url("../../../image/left.png");
background-size: cover;
position: absolute;
left: 0%;
top: 30%;
z-index: 999;
cursor: pointer;
}
.hide {
display: none;
}
.tabsList {
width: 100%;
position: sticky;
top: 80px;
background-color: #ffffff;
z-index: 100;
@include flex;
.tabsList-left {
border-right: 1px solid #ebeef5;
position: relative;
box-sizing: border-box;
ul {
position: relative;
.xian {
background: #f2f2f2;
padding: 2px;
}
.title {
padding: 20px;
text-align: center;
}
li {
padding: 10px;
font-size: 14px;
color: #606266;
line-height: 20px;
}
li:hover {
color: #0f93f6;
cursor: pointer;
}
}
}
.tabsList-right {
.fenpin {
min-width: 50%;
border-right: 1px solid #ebeef5;
}
background-color: #ffffff;
width: 100%;
height: 100%;
z-index: 100;
@include flex;
}
}
.tabsList-title {
display: block;
line-height: 59px;
}
/deep/.el-tabs {
width: 100%;
}
}
</style>
\ No newline at end of file
.containerFrame {
height: 100%;
width: 100%;
position: sticky;
top: 80px;
border: 1px solid #ebeef5;
z-index: 100;
@include flex;
}
.leftmenu {
width: 0;
transition: all 0.3s;
border-right: 1px solid #ebeef5;
position: relative;
box-sizing: border-box;
padding-right: 5px;
.title {
line-height: 36px;
text-align: center;
}
.title-detail {
display: flex;
flex-wrap: wrap;
width: 100%;
}
ul {
position: relative;
.xian {
background: #f2f2f2;
padding: 2px;
}
.title {
padding: 5px;
text-align: center;
}
li {
padding: 5px;
font-size: 14px;
line-height: 20px;
cursor: pointer;
}
li:hover {
color: #0f93f6;
cursor: pointer;
}
}
}
.animation-map-drawer {
width: 260px;
}
/deep/.el-menu-item {
padding-left: 5px !important;
}
/deep/.el-tabs__header {
margin-bottom: 0 !important;
}
/deep/.el-menu-item.is-active {
background-color: #e7f4fe;
}
.leftCon {
flex: 1;
width: calc(100% - 260px);
display: flex;
}
.splitScreen-con {
flex: 1;
width: 0;
}
.rightContainer {
flex: 1;
width: 0;
height: calc(100vh - 80px);
}
/deep/.el-tabs {
box-sizing: border-box;
padding: 0 5px;
width: 100%;
}
.svg-icon {
width: 2.5em;
height: 2.5em;
}
.iconName {
line-height: 24px;
font-size: 12px;
}
.container {
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
background-color: #ffffff;
overflow: hidden;
}
.map-drawer {
width: 20px;
height: 79px;
position: absolute;
top: 30%;
z-index: 99;
cursor: pointer;
}
.map-drawer-expand {
background: url("../../../image/right.png");
background-size: cover;
right: 0%;
}
.map-drawer-click {
background: url("../../../image/left.png");
background-size: cover;
left: 0%;
}
.topButton {
@include flex;
width: 100%;
height: 80px;
background-color: #3498db;
color: #ffffff;
justify-content: space-between;
padding-left: 15px;
position: sticky;
top: 0;
z-index: 100;
ul {
@include flex;
li {
@include flex-center;
cursor: pointer;
flex-direction: column;
margin-right: 15px;
box-sizing: border-box;
width: 70px;
margin: 0 5px;
}
li:hover {
border: 1px solid #ffffff;
border-radius: 5px;
}
}
}
\ No newline at end of file