DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流程中心页面绘制

Browse Source
This commit is contained in:
yuekuo
2023-04-14 15:45:12 +08:00
parent 7c5b276b5d
commit 4ed0752b86
10 changed files with 690 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/modules/processCenter.js
+19
View File
@@ -0,0 +1,19 @@
import { instance as request } from '@/utils/request'
export default{
//查询
search(data){
return request({
url: '',
method: 'POST',
data
})
},
//重置
reset(data){
return request({
url: '',
method: 'POST',
data
})
}
}
src/router/index.js
+1 -2
View File
@@ -10,7 +10,6 @@ let routes = []
const requireComponents = require.context('./modules', false, /\.js/)
requireComponents.keys().forEach(file => routes = [...routes, ...requireComponents(file).default])
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
@@ -19,7 +18,7 @@ const router = new VueRouter({
return position
}
})
console.log(routes);
// 路由守卫
router.beforeEach((to, from, next) => {
/**
src/router/modules/userCenter.js
+22
View File
@@ -0,0 +1,22 @@
const routes = [
// 用户中心管理
{
path: '/userCenter',
name: 'userCenter',
component: () => import('../../views/Layout.vue'),
children: [
// 流程中心
{
path: 'processCenter',
name: 'processCenter',
component: () => import('../../views/userCenter/processCenter.vue'),
meta: {
crumb: ['流程中心']
}
},
]
}
]
export default routes
src/views/Layout.vue
+2
View File
@@ -65,7 +65,9 @@ export default {
return this.$router.push({ path: '/report/list', query: { id: 'AEHJB8YNJ3' } })
}
const data = JSON.parse(JSON.stringify(this.$store.state.menuData))
console.log('data',data);
const menu = data.filter(item => item.parentId === this.$route.query.id)
console.log('id', this.$route.query.id);
let menuData = []
const menuFun = (menu) => {
menuData = [...menuData, ...menu]
src/views/userCenter/processCenter.vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<div class="content">
<div class="title">
<span>流程中心</span>
</div>
<div class="searchForm">
<div class="item">
<div>流程编号：</div>
<el-input v-model="form.id" ></el-input>
</div>
<div class="item">
<div>流程名称：</div>
<el-input v-model="form.name"></el-input>
</div>
<div class="item">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="" @click="reset">重置</el-button>
</div>
</div>
<div class="tabs">
<tabs />
</div>
</div>
</template>
<script>
import tabs from '../userCenter/processCenter/tabs.vue'
export default {
name:'processCenter',
components:{
tabs
},
data() {
return {
form: {}
}
},
created () {
;
},
mounted () {
;
},
methods: {
//查询
search() {
// this.$api.processCenter.search({})
},
//重置
reset(){
this.form={}
// this.$api.processCenter.reset({})
}
},
}
</script>
<style lang="scss" scoped>
.content{
.title {
border-bottom: 1px solid #EBEEF5;
height: 42px;
line-height: 42px;
margin: 0 18px 0 22px;
span {
font-size: 16px;
font-weight: 600;
color: #262626;
}
}
.searchForm{
width: 1200px;
display: flex;
align-items: center;
margin: 20px 0 0 22px;
.item{
width: 300px;
display: flex;
align-items: center;
}
}
.tabs{
margin: 20px 0 0 5px;
}
}
::v-deep .el-input{
width: 200px;
}
</style>
src/views/userCenter/processCenter/finishProcess.vue
+129
View File
@@ -0,0 +1,129 @@
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
>
<el-table-column
prop="processId"
label="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
align="center"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'finishProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4'
}]
}
},
methods: {
view(){
alert(111)
},
}
}
</script>
<style lang="sass" scoped>
</style>
src/views/userCenter/processCenter/gencyProcess.vue
+96
View File
@@ -0,0 +1,96 @@
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
>
<el-table-column
prop="processId"
label="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
align="left"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="390"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="260"
sortable
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="handle(scope.$index, tableData)"
type="text"
size="small">
办理
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'gencyProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4'
}]
}
},
methods: {
handle(){
alert(111)
}
}
}
</script>
<style lang="sass" scoped>
</style>
src/views/userCenter/processCenter/monitorProcesses.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
>
<el-table-column
prop="processId"
label="流程编号"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope" >
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small"
>
<span>查看</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'monitorProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4'
}]
}
},
methods: {
view(){
alert(111)
}
}
}
</script>
<style lang="sass" scoped>
</style>
src/views/userCenter/processCenter/sentProcess.vue
+145
View File
@@ -0,0 +1,145 @@
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
>
<el-table-column
prop="processId"
label="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
align="center"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope" >
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small"
>
<span>查看</span>
</el-button>
<el-button
@click.native.prevent="back(scope.$index, tableData)"
type="text"
size="small"
>
<span>强制撤回</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'sentProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4'
}]
}
},
methods: {
view(){
alert(111)
},
back(){
alert(222)
}
}
}
</script>
<style lang="scss" scoped>
.slot{
}
</style>
src/views/userCenter/processCenter/tabs.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="待办流程" name="first">
<gencyProcess></gencyProcess>
</el-tab-pane>
<el-tab-pane label="已办流程" name="second">
<finishProcess></finishProcess>
</el-tab-pane>
<el-tab-pane label="已发流程" name="third">
<sentProcess></sentProcess>
</el-tab-pane>
<el-tab-pane label="监控流程" name="fourth">
<monitorProcesses></monitorProcesses>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import gencyProcess from './gencyProcess.vue'
import finishProcess from './finishProcess.vue'
import monitorProcesses from './monitorProcesses.vue'
import sentProcess from './sentProcess.vue'
export default {
name: 'tabs',
components:{
gencyProcess,
finishProcess,
monitorProcesses,
sentProcess
},
data() {
return {
activeName: 'first'
};
},
created () {
;
},
mounted () {
;
},
methods: {
handleClick(tab, event) {
// console.log(tab, event);
}
}
}
</script>
<style lang="sass" scoped>
</style>