流程中心-监控流程查看页面绘制

src/router/modules/userCenter.js

@@ -12,8 +12,14 @@ const routes = [
           component: () => import('../../views/userCenter/processCenter.vue'),
           meta: {
             crumb: ['流程中心']
-          }
+          },
+         
         },
+        {
+          path:'monitorViews',
+          name:'monitorViews',
+          component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorViews.vue')
+        }
       ]
     }
   ]

src/views/userCenter/processCenter/monitorProcesses.vue

@@ -69,7 +69,12 @@ export default {
     },
     methods: {
         view() {
-            alert(111)
+          this.$router.push({
+            path: 'monitorViews',
+            query:{
+                id: this.$route.query.id
+            }
+          })
         }
     }
 }

src/views/userCenter/processCenter/monitorProcesses/monitorModal.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <el-dialog title="调整处理人" :visible.sync="dialogVisible" :before-close="handleClose">
+            <div class="form-container">
+                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+                    <el-form-item label="选择人员" prop="select">
+                        <el-select v-model="form.select" placeholder="请选择调整处理人">
+                            <el-option label="张三" value="1"></el-option>
+                            <el-option label="李四" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
+                <el-button type="primary" @click="submit" class="btn">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'modal',
+    data() {
+        return {
+            dialogVisible: false,
+            form: {},
+            rules: {
+                select: [
+                    {
+                        required: 'true',
+                        trigger: 'change',
+                        message: '请选择调整处理人'
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then(_ => {
+                    done();
+                })
+                .catch(_ => { });
+        },
+        open() {
+            this.dialogVisible = true
+        },
+        submit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    alert(11)
+                    this.dialogVisible = false
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+
+}
+
+::v-deep .el-dialog {
+    width: 600px;
+
+}
+
+::v-deep .el-dialog .el-dialog__body {
+    font-size: 50px;
+    height: 230px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+::v-deep .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+}
+
+:v-deep .el-form-item--mini .el-form-item__label {
+    line-height: 40px !important;
+}
+
+::v-deep .btn {
+    width: 90px;
+    height: 40px;
+    border-radius: 30px;
+    margin-right: 30px;
+}</style>

src/views/userCenter/processCenter/monitorProcesses/monitorViews.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="content">
+       <div class="map">
+       </div>
+       <div class="btn">
+        <el-button type="primary" class="inner-btn" @click="showDialog">
+            调整处理人
+        </el-button>
+       </div>
+       <div class="table">
+        <el-table :data="tableData" style="width: 100%" border
+            :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
+            <el-table-column
+            type="selection"
+            width="55">
+            </el-table-column>
+            <el-table-column prop="step" label="任务步骤"  align="center">
+            </el-table-column>
+            <el-table-column prop="missionPer" label="任务受理人"  align="center">
+            </el-table-column>
+            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+            </el-table-column>
+            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
+            </el-table-column>
+            <el-table-column prop="status" label="状态"  align="center">
+            </el-table-column>
+        </el-table>
+       </div>
+       <monitorModal ref="monitorModal"></monitorModal>
+    </div>
+</template>
+
+<script>
+import monitorModal from './monitorModal.vue'
+    export default {
+        name:'monitorViews',
+        components:{
+            monitorModal
+        },
+        data() {
+            return {
+                tableData: [
+                    {
+                        step:'1',
+                        missionPer:'王五',
+                        createTime:'2023-1-1',
+                        endTime:'2023-5-1',
+                        status:'待定'
+                    }
+                ]
+            }
+        },
+        methods: {
+            showDialog() {
+                this.$refs.monitorModal.open()
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.content{
+    min-height: calc(100vh - 60px - 20px);
+    box-shadow: 0 6px 11px 0 rgba(163, 163, 163, 0.2);
+    border-radius: 6px;
+    background: #FFFFFF;
+    .map{
+        width: 100%;
+        height: 360px;
+        border: 1px red solid;
+    }
+    .btn{
+        padding: 20px 13px;
+     .inner-btn{
+        width: 100px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    
+}
+</style>