diff --git a/anrui-system-ui/src/api/flow/read.js b/anrui-system-ui/src/api/flow/read.js
new file mode 100644
index 0000000000..109058b0fd
--- /dev/null
+++ b/anrui-system-ui/src/api/flow/read.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+// 查看待阅和已阅列表
+export function pagerList(data) {
+  return request({
+    url: '/message/v1/messagelist/todoAllReadList',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+// 待阅列表--修改为已阅
+export function changeRead(data) {
+  return request({
+    url: '/message/v1/messagelist/changeRead?sids=' + data,
+    method: 'get'
+  })
+}
+
diff --git a/anrui-system-ui/src/api/flow/todo.js b/anrui-system-ui/src/api/flow/todo.js
index 417d96f7e6..61bb9b2799 100644
--- a/anrui-system-ui/src/api/flow/todo.js
+++ b/anrui-system-ui/src/api/flow/todo.js
@@ -100,6 +100,18 @@ export function breakProcess(params) {
   })
 }
 
+// 审批记录--保存评论
+export function commentSave(data) {
+  return request({
+    url: '/flowable/v1/processcomment/save',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
 // 根据流程定义id，节点id，终端及类型查询流程与业务表单url
 export function selectUrl(params) {
   return request({
diff --git a/anrui-system-ui/src/router/index.js b/anrui-system-ui/src/router/index.js
index 6314f2495b..37a16736b7 100644
--- a/anrui-system-ui/src/router/index.js
+++ b/anrui-system-ui/src/router/index.js
@@ -5,7 +5,6 @@ import Layout from '@/layout'
 
 Vue.use(Router)
 
-
 /* 所有角色可以访问/没有权限要求的基页 */
 
 export const constantRoutes = [
@@ -255,7 +254,7 @@ export const constantRoutes = [
         meta: {
           title: '表单配置'
         }
-      },
+      }
     ]
   },
   {
@@ -266,7 +265,7 @@ export const constantRoutes = [
       path: '/datamapping',
       component: () => import('@/views/datamapping/shujuyingshe.vue'),
       name: 'shujuyingshe',
-      meta: {title: '数据映射', noCache: true}
+      meta: { title: '数据映射', noCache: true }
     }]
   },
   // {
@@ -291,6 +290,14 @@ export const constantRoutes = [
     path: '/done',
     component: () => import('@/views/flow/doneList.vue')
   },
+  {
+    path: '/toberead',
+    component: () => import('@/views/flow/tobereadList.vue')
+  },
+  {
+    path: '/haveread',
+    component: () => import('@/views/flow/havereadList.vue')
+  },
 
 //	{
 //		path: '/',
@@ -314,7 +321,7 @@ export const constantRoutes = [
   },
   {
     path: '/flow/flowRecordForBusiness',
-    component: ()=> import('@/views/flow/flowRecordForBusiness'),
+    component: () => import('@/views/flow/flowRecordForBusiness'),
     name: 'flowRecordForBusiness'
   }/*,
   {
diff --git a/anrui-system-ui/src/views/Home/Home.vue b/anrui-system-ui/src/views/Home/Home.vue
index bcc7f736e6..613de8acea 100644
--- a/anrui-system-ui/src/views/Home/Home.vue
+++ b/anrui-system-ui/src/views/Home/Home.vue
@@ -34,11 +34,11 @@
               <img src="@/assets/home/ltIcon2.png">
               <p>已办工作</p>
             </li>
-            <li>
+            <li @click="tobereadwork">
               <img src="@/assets/home/ltIcon3.png">
               <p>待阅工作</p>
             </li>
-            <li>
+            <li @click="havereadwork">
               <img src="@/assets/home/ltIcon4.png">
               <p>已阅工作</p>
             </li>
@@ -360,6 +360,12 @@ export default {
       // this.$router.push({ path: '/done' + '?token=' + getStorage() })
       //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
     },
+    tobereadwork() {
+      window.open('/#/toberead' + '?token=' + getStorage(), '_blank')
+    },
+    havereadwork() {
+      window.open('/#/haveread' + '?token=' + getStorage(), '_blank')
+    },
     logout() {
       this.$confirm('确定要退出吗, 是否继续?', '提示', {
         confirmButtonText: '确定',
diff --git a/anrui-system-ui/src/views/flow/doneList.vue b/anrui-system-ui/src/views/flow/doneList.vue
index 947edc1b01..e4d2c9b8d2 100644
--- a/anrui-system-ui/src/views/flow/doneList.vue
+++ b/anrui-system-ui/src/views/flow/doneList.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="tab-header webtop">
       <div style="text-align: right">
-<!--        <router-link tag='a' :to="'/home'">《&nbsp;返回首页</router-link>-->
+        <!--        <router-link tag='a' :to="'/home'">《&nbsp;返回首页</router-link>-->
         <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
       </div>
     </div>
@@ -31,7 +31,8 @@
         <el-table-column width="180px" label="操作" align="center">
           <template slot-scope="scope">
             <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
-            <el-button type="danger" v-show="scope.row.endTime === null && scope.row.startUserSid === listQuery.params.userSid" size="small" @click="handleTerminate(scope.row)">终止</el-button>
+            <el-button type="danger" v-show="scope.row.endTime === null && scope.row.startUserSid === listQuery.params.userSid" size="small" @click="handleTerminate(scope.row)">终止
+            </el-button>
           </template>
         </el-table-column>
         <!--        <el-table-column label="流程类别" align="center">-->
@@ -41,41 +42,41 @@
         <!--        </el-table-column>-->
         <el-table-column label="工作名称" align="center">
           <template slot-scope="scope">
-            <span>{{scope.row.procDefName}}</span>
+            <span>{{ scope.row.procDefName }}</span>
           </template>
         </el-table-column>
         <el-table-column label="发起人" align="center">
           <template slot-scope="scope">
-            <span>{{scope.row.startUserName}}</span>
+            <span>{{ scope.row.startUserName }}</span>
           </template>
         </el-table-column>
         <el-table-column label="最新审批日期" align="center">
           <template slot-scope="scope">
-            <span>{{scope.row.createTime|formatTimer}}</span>
+            <span>{{ scope.row.createTime|formatTimer }}</span>
           </template>
         </el-table-column>
         <el-table-column label="发起部门" align="center">
           <template slot-scope="scope">
-            <span>{{scope.row.startDeptName}}</span>
+            <span>{{ scope.row.startDeptName }}</span>
           </template>
         </el-table-column>
         <el-table-column label="当前处理人" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.endTime!=null"></span>
-            <span v-else>{{scope.row.assigneeName}}</span>
+            <span v-else>{{ scope.row.assigneeName }}</span>
           </template>
         </el-table-column>
         <el-table-column label="当前环节" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.endTime!=null" class="bluezi" @click="handleFlowRecord(scope.row)">已办结</span>
-            <span v-else class="bluezi" @click="handleFlowRecord(scope.row)">{{scope.row.taskName}}</span>
+            <span v-else class="bluezi" @click="handleFlowRecord(scope.row)">{{ scope.row.taskName }}</span>
           </template>
         </el-table-column>
-<!--        <el-table-column width="80px" label="审批记录" align="center">-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-button type="primary" size="small" @click="handleFlowRecord(scope.row)">查看</el-button>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+        <!--        <el-table-column width="80px" label="审批记录" align="center">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            <el-button type="primary" size="small" @click="handleFlowRecord(scope.row)">查看</el-button>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
       </el-table>
     </div>
     <div class="pages">
@@ -90,16 +91,16 @@
       height="1%"
       :before-close="closeIt"
       center>
-      <iframe frameborder="0" id="iframe_done"
-              style="width:100%;"
-              :src="this.centerDialogVisible === true ? url :''"
-      ></iframe>
+      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
     </el-dialog>
     <!-- End查看页面-->
 
     <!-- 编辑信息 -->
-    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden">
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
       <!--流程流转记录-->
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
       <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
     </el-dialog>
 
@@ -122,334 +123,381 @@
         <el-button size="small" @click="breakProcessVisible = false">取消</el-button>
       </span>
     </el-dialog>
+
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import flowRecords from '@/components/flow/flowRecord'
-  import Pagination from '@/components/pagination'
-  import pageye from '@/components/pagination/pageye'
-  import { getStorage } from '@/utils/auth'
-  import { revokeTask, getList, selectUrl, readXml, getFlowViewer, breakProcess } from '@/api/flow/todo'
-  import { flowRecord, revokeProcess } from "@/api/workflow/finished"
-  import { loginDetails } from '@/api/user'
- // import flow from "@/views/flow/flow";
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import { getStorage } from '@/utils/auth'
+import { revokeTask, getList, selectUrl, readXml, getFlowViewer, breakProcess, commentSave } from '@/api/flow/todo'
+import { flowRecord, revokeProcess } from '@/api/workflow/finished'
+import { loginDetails } from '@/api/user'
+// import flow from "@/views/flow/flow";
 
-  export default {
-    name: "",
-    components: {
-      pageye, Pagination, flowRecords
-    },
-    data() {
-      return {
-        taskList: [],
-        xmlData: '',
-        dialogHeight: '80%',
-        isDialogVisible: false, // 撤回弹窗
-        centerDialogVisible: false, // 弹框
-        editDialog: false,
-        flowRecordList: [],
-        listLoading: false,
-        total: 0,
-        list: [],
-        tableKey: 0,
-        taskName_now: '',
-        url: '',
-        loginInfo: {
-          userSid: ''
-        },
-        // 撤回
-        revokeList: {
-          businessSid: '',
-          instanceId: '',
-          taskId: '',
-          userSid: ''
-        },
-        breakProcessVisible: false,
-        dialogList: {
-          businessSid: '',
-          comment: '',
-          instanceId: '',
-          taskId: '',
-          orgSidPath: '',
-          taskDefKey: '',
+export default {
+  name: '',
+  components: {
+    pageye, Pagination, flowRecords
+  },
+  data() {
+    return {
+      taskList: [],
+      xmlData: '',
+      dialogHeight: '80%',
+      isDialogVisible: false, // 撤回弹窗
+      centerDialogVisible: false, // 弹框
+      editDialog: false,
+      flowRecordList: [],
+      listLoading: false,
+      total: 0,
+      list: [],
+      tableKey: 0,
+      taskName_now: '',
+      url: '',
+      commentVisible: false, // 评论内容弹框
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      },
+      line_row: {},
+      loginInfo: {
+        userSid: ''
+      },
+      // 撤回
+      revokeList: {
+        businessSid: '',
+        instanceId: '',
+        taskId: '',
+        userSid: ''
+      },
+      breakProcessVisible: false,
+      dialogList: {
+        businessSid: '',
+        comment: '',
+        instanceId: '',
+        taskId: '',
+        orgSidPath: '',
+        taskDefKey: '',
+        userSid: ''
+      },
+      selectUrl_list: {
+        proc_def_id: '', // 流程定义id
+        taskDefKey: '', // 节点id
+        type: '' // 类型
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        params: {
+          proDefName: '',
+          startDate: '',
+          endDate: '',
           userSid: ''
-        },
-        selectUrl_list: {
-          proc_def_id: '', // 流程定义id
-          taskDefKey: '', // 节点id
-          type: '' // 类型
-        },
-        listQuery: {
-          current: 1,
-          size: 10,
-          params: {
-            proDefName: '',
-            startDate: '',
-            endDate: '',
-            userSid: ''
-          }
         }
       }
+    }
+  },
+  mounted() {
+    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
+    window.addEventListener('message', this.handleMessage)
+  },
+  created() {
+    // 加载列表
+    // this.getList()
+    this.init()
+  },
+  filters: {
+    formatTimer: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d // + " " + h + ":" + m;
+    }
+  },
+  methods: {
+    /** xml 文件 */
+    getModelDetail(deployId) {
+      var token = getStorage()
+      // 发送请求，获取xml
+      readXml(deployId, token).then(res => {
+        this.xmlData = res.data
+      })
     },
-    mounted() {
-      // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
-      window.addEventListener('message', this.handleMessage)
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      var token = getStorage()
+      getFlowViewer(procInsId, token).then(res => {
+        this.taskList = res.data
+      })
     },
-    created() {
-      // 加载列表
-      // this.getList()
-      this.init()
+    setIframeHeight(iframe) {
+      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
     },
-    filters: {
-      formatTimer: function(value) {
-        let date = new Date(value)
-        let y = date.getFullYear()
-        let MM = date.getMonth() + 1
-        MM = MM < 10 ? '0' + MM : MM
-        let d = date.getDate()
-        d = d < 10 ? '0' + d : d
-        let h = date.getHours()
-        h = h < 10 ? '0' + h : h
-        let m = date.getMinutes()
-        m = m < 10 ? '0' + m : m
-        let s = date.getSeconds()
-        s = s < 10 ? '0' + s : s
-        return y + '-' + MM + '-' + d // + " " + h + ":" + m;
+    async handleMessage(event) {
+      var code = event.data.params.code
+      if (code == 1) {
+        this.init()
+        this.centerDialogVisible = false
+      } else if (code == 2) {
+        this.dialogHeight = event.data.params.data
+        this.setIframeHeight(document.getElementById('iframe_done'))
       }
     },
-    methods: {
-      /** xml 文件 */
-      getModelDetail(deployId) {
-        var token = getStorage()
-        // 发送请求，获取xml
-        readXml(deployId, token).then(res => {
-          this.xmlData = res.data
-        })
-      },
-      //已办环节的节点
-      getFlowViewer(procInsId) {
-        var token = getStorage()
-        getFlowViewer(procInsId, token).then(res => {
-          this.taskList = res.data
-        })
-      },
-      setIframeHeight(iframe) {
-        iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
-      },
-      async handleMessage(event) {
-        var code = event.data.params.code
-        if (code == 1) {
-          this.init()
-          this.centerDialogVisible = false
-        } else if (code == 2) {
-          this.dialogHeight = event.data.params.data
-          this.setIframeHeight(document.getElementById('iframe_done'))
+    init() {
+      var token = getStorage()
+      loginDetails(token).then((response) => {
+        if (response.code === '200') {
+          this.loginInfo = response.data
+          this.revokeList.userSid = this.loginInfo.sid
+          this.listQuery.params.userSid = this.loginInfo.sid
+          this.getList()
         }
-      },
-      init() {
-        var token = getStorage();
-        loginDetails(token).then((response) => {
-          if (response.code === '200') {
-            this.loginInfo = response.data;
-            this.revokeList.userSid = this.loginInfo.sid
-            this.listQuery.params.userSid = this.loginInfo.sid
-            this.getList()
-          }
-        });
-      },
-      /** 打开详情 */
-      handleCheck(row) {
-        this.selectUrl_list.proc_def_id = row.procDefId
-        this.selectUrl_list.taskDefKey = row.taskDefKey
-        this.selectUrl_list.type = 2 // 详情
-        const parameter_list = {
-          businessSid: row.processVariables.businessSid,
-          instanceId: row.procInsId,
-          taskId: row.taskId,
-          taskDefKey: row.taskDefKey,
-          taskName: row.taskName,
-          deployId: row.deployId
+      })
+    },
+    /** 打开详情 */
+    handleCheck(row) {
+      this.selectUrl_list.proc_def_id = row.procDefId
+      this.selectUrl_list.taskDefKey = row.taskDefKey
+      this.selectUrl_list.type = 2 // 详情
+      const parameter_list = {
+        businessSid: row.processVariables.businessSid,
+        instanceId: row.procInsId,
+        taskId: row.taskId,
+        taskDefKey: row.taskDefKey,
+        taskName: row.taskName,
+        deployId: row.deployId
+      }
+      selectUrl(this.selectUrl_list).then((response) => {
+        if (response.success && response.data.url !== '') {
+          // this.url = 'http://127.0.0.1:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+        } else if (response.success && response.data.url === '') {
+          this.$notify({
+            title: '提示',
+            message: '请在手机端进行审核',
+            type: 'error',
+            duration: 2000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: '执行失败',
+            type: 'error',
+            duration: 2000
+          })
         }
-        selectUrl(this.selectUrl_list).then((response) => {
-          if (response.success && response.data.url !== '') {
-            // this.url = 'http://127.0.0.1:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
-            this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
-            // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
-          } else if (response.success && response.data.url === '') {
-            this.$notify({
-              title: '提示',
-              message: '请在手机端进行审核',
-              type: 'error',
-              duration: 2000
-            })
-          } else {
-            this.$notify({
-              title: '提示',
-              message: '执行失败',
-              type: 'error',
-              duration: 2000
-            })
-          }
-        })
-        // 撤回
-        this.taskName_now = row.taskName
-        this.revokeList.businessSid = row.processVariables.businessSid
-        this.revokeList.instanceId = row.procInsId
-        this.revokeList.taskId = row.taskId
-        this.getFlowRecordList(row.procInsId, row.deployId)
-        this.centerDialogVisible = true
-        // this.$router.push({path: '/todo' + '?token=' + getStorage()})
-      },
-      closeIt() {
-        this.url = ''
-        this.centerDialogVisible = false
-      },
-      handleTerminate(row) {
-        this.breakProcessVisible = true
-        this.dialogList.comment = ''
-        this.dialogList.businessSid = row.processVariables.businessSid
-        this.dialogList.instanceId = row.procInsId
-        this.dialogList.taskId = row.taskId
-        this.dialogList.taskDefKey = row.taskDefKey
-        this.dialogList.userSid = window.sessionStorage.getItem('userSid')
-      },
-      handleConfirm() {
-        if (this.dialogList.comment === '') {
-          this.$message({ showClose: true, type: 'error', message: '请填写终止原因' })
-          return
+      })
+      // 撤回
+      this.taskName_now = row.taskName
+      this.revokeList.businessSid = row.processVariables.businessSid
+      this.revokeList.instanceId = row.procInsId
+      this.revokeList.taskId = row.taskId
+      this.getFlowRecordList(row.procInsId, row.deployId)
+      this.centerDialogVisible = true
+      // this.$router.push({path: '/todo' + '?token=' + getStorage()})
+    },
+    closeIt() {
+      this.url = ''
+      this.centerDialogVisible = false
+    },
+    handleTerminate(row) {
+      this.breakProcessVisible = true
+      this.dialogList.comment = ''
+      this.dialogList.businessSid = row.processVariables.businessSid
+      this.dialogList.instanceId = row.procInsId
+      this.dialogList.taskId = row.taskId
+      this.dialogList.taskDefKey = row.taskDefKey
+      this.dialogList.userSid = window.sessionStorage.getItem('userSid')
+    },
+    handleComment() {
+      this.commentVisible = true
+      this.comment = {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      }
+    },
+    handleCommentConfirm() {
+      if (this.comment.content === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+        return
+      }
+      this.comment.reviewer = window.sessionStorage.getItem('name')
+      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+      this.comment.processId = this.line_row.procInsId
+      commentSave(this.comment).then((resp) => {
+        if (resp.success) {
+          this.commentVisible = false
+          this.handleFlowRecord(this.line_row)
         }
-        const tip = '请确认是否终止该申请'
-        this.$confirm(tip, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          breakProcess(this.dialogList).then((resp) => {
-            if (resp.success) {
-              this.breakProcessVisible = false
-              this.$message({ showClose: true, type: 'success', message: '操作成功' })
-              this.getList()
-            }
-          })
-        })
-      },
-      /** 流程流转记录 */
-      handleFlowRecord(row) {
-        this.getModelDetail(row.deployId)
-        this.getFlowViewer(row.procInsId)
-        this.getFlowRecordList(row.procInsId, row.deployId)
-        this.editDialog = true
-      },
-      /** 流程流转记录 */
-      getFlowRecordList(procInsId, deployId) {
-        var token = getStorage()
-        const params = { procInsId: procInsId, deployId: deployId, token: token }
-        flowRecord(params).then(res => {
-          this.flowRecordList = res.data
-          // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
-          if (res.data.formData) {
-            this.formConf = res.data.formData
-            this.formConfOpen = true
-          }
-        }).catch(res => {
-          this.getList()
-        })
-      },
-      getList() {
-        this.listLoading = true
-        getList({
-          current: this.listQuery.current,
-          size: this.listQuery.size,
-          params: {
-            proDefName: this.listQuery.params.proDefName,
-            startDate: this.listQuery.params.startDate,
-            endDate: this.listQuery.params.endDate,
-            userSid: this.listQuery.params.userSid
+      })
+    },
+    handleConfirm() {
+      if (this.dialogList.comment === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写终止原因' })
+        return
+      }
+      const tip = '请确认是否终止该申请'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        breakProcess(this.dialogList).then((resp) => {
+          if (resp.success) {
+            this.breakProcessVisible = false
+            this.$message({ showClose: true, type: 'success', message: '操作成功' })
+            this.getList()
           }
-        }).then((rep) => {
-          this.listLoading = false
-          this.list = rep.data.records
-          this.total = rep.data.total
         })
-      },
-      handleFilter() {
-        this.listQuery.pageNumber = 1
-        this.getList()
-      },
-      handleSelectionChange() {
-
-      },
-
-      indexMethod() {
-        return 0;
-      },
-      setIcon(val) {
-        if (val) {
-          return "el-icon-check";
-        } else {
-          return "el-icon-time";
+      })
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row) {
+      this.line_row = row
+      this.getModelDetail(row.deployId)
+      this.getFlowViewer(row.procInsId)
+      this.getFlowRecordList(row.procInsId, row.deployId)
+      this.editDialog = true
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, deployId) {
+      var token = getStorage()
+      const params = { procInsId: procInsId, deployId: deployId, token: token }
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        if (res.data.formData) {
+          this.formConf = res.data.formData
+          this.formConfOpen = true
         }
-
-      },
-      setColor(val) {
-        if (val) {
-          return "#2bc418";
-        } else {
-          return "#b3bdbb";
+      }).catch(res => {
+        this.getList()
+      })
+    },
+    getList() {
+      this.listLoading = true
+      getList({
+        current: this.listQuery.current,
+        size: this.listQuery.size,
+        params: {
+          proDefName: this.listQuery.params.proDefName,
+          startDate: this.listQuery.params.startDate,
+          endDate: this.listQuery.params.endDate,
+          userSid: this.listQuery.params.userSid
         }
+      }).then((rep) => {
+        this.listLoading = false
+        this.list = rep.data.records
+        this.total = rep.data.total
+      })
+    },
+    handleFilter() {
+      this.listQuery.pageNumber = 1
+      this.getList()
+    },
+    handleSelectionChange() {
 
+    },
+    indexMethod() {
+      return 0
+    },
+    setIcon(val) {
+      if (val) {
+        return 'el-icon-check'
+      } else {
+        return 'el-icon-time'
+      }
+    },
+    setColor(val) {
+      if (val) {
+        return '#2bc418'
+      } else {
+        return '#b3bdbb'
       }
     }
   }
+}
 </script>
 
 <style>
-  .scroll_div {
-    height: 500px;
-    overflow-y: scroll;
-  }
+.scroll_div {
+  height: 500px;
+  overflow-y: scroll;
+}
 
-  .diaTitle {
-    padding: 30px 0 15px 0;
-    font-size: 20px;
-    font-weight: 500;
-  }
+.diaTitle {
+  padding: 30px 0 15px 0;
+  font-size: 20px;
+  font-weight: 500;
+}
 
-  .el-icon-document, .el-icon-chat-line-square, .el-icon-notebook-2 {
-    margin-right: 5px;
-  }
+.el-icon-document, .el-icon-chat-line-square, .el-icon-notebook-2 {
+  margin-right: 5px;
+}
 
-  .listtop {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0px 0px 10px 15px;
-    margin: 0;
-  }
+.listtop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 0px 10px 15px;
+  margin: 0;
+}
 
-  .listtop .tit {
-    font-weight: bold;
-  }
+.listtop .tit {
+  font-weight: bold;
+}
 
-  .listtop .pagination {
-    margin: 0;
-    padding: 0;
-  }
+.listtop .pagination {
+  margin: 0;
+  padding: 0;
+}
 
-  .pages {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0px 0px 15px 15px;
-  }
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0px 0px 15px 15px;
+}
 
-  .pages .tit {
-    font-weight: bold;
-  }
+.pages .tit {
+  font-weight: bold;
+}
 
-  .pages .pagination {
-    margin: 0;
-  }
+.pages .pagination {
+  margin: 0;
+}
+.dialogStyle /deep/ .el-dialog__body {
+  padding-top: 0px !important;
+}
 </style>
diff --git a/anrui-system-ui/src/views/flow/flowRecordForBusiness.vue b/anrui-system-ui/src/views/flow/flowRecordForBusiness.vue
index e2ee8273cd..0d9d5c7d4c 100644
--- a/anrui-system-ui/src/views/flow/flowRecordForBusiness.vue
+++ b/anrui-system-ui/src/views/flow/flowRecordForBusiness.vue
@@ -4,70 +4,71 @@
   </div>
 </template>
 <script>
-import flowRecords from "@C/flow/flowRecord";
-import {setStorage} from "@/utils/auth";
-import {getFlowViewer, readXml} from '@/api/flow/todo';
-import {flowRecord} from "@/api/workflow/finished";
+import flowRecords from '@/components/flow/flowRecord'
+import { setStorage } from '@/utils/auth'
+import { getFlowViewer, readXml } from '@/api/flow/todo'
+import { flowRecord } from '@/api/workflow/finished'
+
 export default {
-  name: "flowRecordForBusiness",
+  name: 'flowRecordForBusiness',
   components: {
     flowRecords
   },
   data() {
     return {
       taskList: [],
-      xmlData: "",
-      flowRecordList :[]
-    };
+      xmlData: '',
+      flowRecordList: []
+    }
   },
   created() {
     var one = window.location.href.indexOf('?data') + 6
     const data = window.location.href.substr(one) // url解码unescape()已从web中移除,尽量不使用
     const obj = JSON.parse(decodeURIComponent(data))
-    this.obj = obj;
-    var token = obj.token;//getStorage();
+    this.obj = obj
+    var token = obj.token
     setStorage(token)
     console.log(obj)
     this.getFlowViewer(obj.procInsId)
     this.getModelDetail(obj.deployId)
-    this.getFlowRecordList(obj.procInsId,obj.deployId)
+    this.getFlowRecordList(obj.procInsId, obj.deployId)
     window.parent.postMessage({
       cmd: 'returnHeight',
       params: {
-        //告诉父级页面，子页面的弹框高度。
+        // 告诉父级页面，子页面的弹框高度。
         code: 2,
         data: 600 + 'px'
       }
     }, '*')
   },
-  methods:{
+  methods: {
     /** xml 文件 */
     getModelDetail(deployId) {
       // 发送请求，获取xml
-      readXml(deployId).then(res =>{
+      readXml(deployId).then(res => {
         this.xmlData = res.data
       })
     },
-    //已办环节的节点
-    getFlowViewer(procInsId){
-      getFlowViewer(procInsId).then(res =>{
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      getFlowViewer(procInsId).then(res => {
         this.taskList = res.data
       })
     },
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
-        this.flowRecordList = res.data.flowList;
+        this.flowRecordList = res.data
         // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
         if (res.data.formData) {
-          this.formConf = res.data.formData;
+          this.formConf = res.data.formData
           this.formConfOpen = true
         }
       }).catch(res => {
-        this.getList();
+        this.getList()
       })
     }
   }
-};
+}
 </script>
diff --git a/anrui-system-ui/src/views/flow/havereadList.vue b/anrui-system-ui/src/views/flow/havereadList.vue
new file mode 100644
index 0000000000..5e8518c39e
--- /dev/null
+++ b/anrui-system-ui/src/views/flow/havereadList.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div style="text-align: right">
+        <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
+      </div>
+    </div>
+    <div class="searchcon">
+      <div class="search">
+        <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
+          <el-form-item label="流程名称">
+            <el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="发送日期">
+            <el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+            <span style="padding: 0 8px">至</span>
+            <el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+          </el-form-item>
+          <el-button type="primary" @click="handleFilter">查询</el-button>
+        </el-form>
+      </div>
+    </div>
+    <div class="listtop">
+      <div class="tit">已阅列表</div>
+      <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <div class="">
+      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
+        <el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
+        <el-table-column width="180px" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作名称" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgTitle }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送人" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sendTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送部门" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送来源" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgSource }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="阅读日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.modifyTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审批记录" align="center">
+          <template slot-scope="scope">
+            <span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pages">
+      <div class="tit"/>
+      <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <!-- Start查看页面 -->
+    <el-dialog
+      title=""
+      :visible.sync="centerDialogVisible"
+      width="78%"
+      height="1%"
+      :before-close="closeIt"
+      center>
+      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
+    </el-dialog>
+    <!-- End查看页面-->
+
+    <!-- 编辑信息 -->
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
+      <!--流程流转记录-->
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
+      <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
+    </el-dialog>
+
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import flowRecords from '@/components/flow/flowRecord'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import { getStorage } from '@/utils/auth'
+import { selectUrl, readXml, getFlowViewer, commentSave } from '@/api/flow/todo'
+import { pagerList } from '@/api/flow/read'
+import { flowRecord } from '@/api/workflow/finished'
+
+export default {
+  name: '',
+  components: {
+    pageye,
+    Pagination,
+    flowRecords
+  },
+  data() {
+    return {
+      taskList: [],
+      xmlData: '',
+      dialogHeight: '80%',
+      centerDialogVisible: false, // 弹框
+      editDialog: false,
+      flowRecordList: [],
+      listLoading: false,
+      list: [],
+      tableKey: 0,
+      url: '',
+      commentVisible: false, // 评论内容弹框
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      },
+      line_row: {},
+      loginInfo: {
+        userSid: ''
+      },
+      selectUrl_list: {
+        proc_def_id: '', // 流程定义id
+        taskDefKey: '', // 节点id
+        type: '' // 类型
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          names: '',
+          createStartTime: '',
+          createEndTime: '',
+          userSid: '',
+          state: '1', // 0是待阅,1是已阅
+          orgPath: ''
+        }
+      }
+    }
+  },
+  mounted() {
+    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
+    window.addEventListener('message', this.handleMessage)
+  },
+  created() {
+    // 加载列表
+    this.init()
+  },
+  methods: {
+    async handleMessage(event) {
+      var code = ''
+      if (event.data.params !== null && event.data.params !== undefined) {
+        code = event.data.params.code
+      }
+      if (code === 1) {
+        this.init()
+        this.centerDialogVisible = false
+      } else if (code === 2) {
+        this.dialogHeight = event.data.params.data
+        this.setIframeHeight(document.getElementById('iframe_done'))
+      }
+    },
+    setIframeHeight(iframe) {
+      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
+    },
+    init() {
+      this.getList()
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
+      this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
+      pagerList(this.listQuery).then((rep) => {
+        this.listLoading = false
+        if (rep.success) {
+          this.list = rep.data.records
+          this.listQuery.total = rep.data.total
+        } else {
+          this.list = []
+          this.listQuery.total = 0
+        }
+      })
+    },
+    handleFilter() {
+      this.listQuery.pageNumber = 1
+      this.getList()
+    },
+    /** 打开详情 */
+    handleCheck(row) {
+      this.selectUrl_list.proc_def_id = row.procDefId
+      this.selectUrl_list.taskDefKey = row.taskDefKey
+      this.selectUrl_list.type = 2 // 详情
+      const parameter_list = {
+        businessSid: row.businessSid,
+        instanceId: row.procInsId,
+        taskId: row.taskId,
+        taskDefKey: row.taskDefKey,
+        taskName: row.taskName,
+        deployId: row.procDefId
+      }
+      selectUrl(this.selectUrl_list).then((response) => {
+        if (response.success && response.data.url !== '') {
+          this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          // this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+        } else if (response.success && response.data.url === '') {
+          this.$notify({
+            title: '提示',
+            message: '请联系系统管理员',
+            type: 'error',
+            duration: 2000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: '执行失败',
+            type: 'error',
+            duration: 2000
+          })
+        }
+      })
+      this.getFlowRecordList(row.procInsId, row.procDefId)
+      this.centerDialogVisible = true
+    },
+    handleComment() {
+      this.commentVisible = true
+      this.comment = {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      }
+    },
+    handleCommentConfirm() {
+      if (this.comment.content === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+        return
+      }
+      this.comment.reviewer = window.sessionStorage.getItem('name')
+      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+      this.comment.processId = this.line_row.procInsId
+      commentSave(this.comment).then((resp) => {
+        if (resp.success) {
+          this.commentVisible = false
+          this.handleFlowRecord(this.line_row)
+        }
+      })
+    },
+    closeIt() {
+      this.url = ''
+      this.centerDialogVisible = false
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row) {
+      this.line_row = row
+      this.getModelDetail(row.procDefId)
+      this.getFlowViewer(row.procInsId)
+      this.getFlowRecordList(row.procInsId, row.procDefId)
+      this.editDialog = true
+    },
+    /** xml 文件 */
+    getModelDetail(procDefId) {
+      var token = getStorage()
+      // 发送请求，获取xml
+      readXml(procDefId, token).then(res => {
+        this.xmlData = res.data
+      })
+    },
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      var token = getStorage()
+      getFlowViewer(procInsId, token).then(res => {
+        this.taskList = res.data
+      })
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, procDefId) {
+      var token = getStorage()
+      const params = { procInsId: procInsId, deployId: procDefId, token: token }
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        if (res.data.formData) {
+          this.formConf = res.data.formData
+          this.formConfOpen = true
+        }
+      }).catch(res => {
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.listtop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 0px 10px 15px;
+  margin: 0;
+}
+
+.listtop .tit {
+  font-weight: bold;
+}
+
+.listtop .pagination {
+  margin: 0;
+  padding: 0;
+}
+
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0px 0px 15px 15px;
+}
+
+.pages .tit {
+  font-weight: bold;
+}
+
+.pages .pagination {
+  margin: 0;
+}
+.dialogStyle /deep/ .el-dialog__body {
+  padding-top: 0px !important;
+}
+</style>
diff --git a/anrui-system-ui/src/views/flow/tobereadList.vue b/anrui-system-ui/src/views/flow/tobereadList.vue
new file mode 100644
index 0000000000..29104562fc
--- /dev/null
+++ b/anrui-system-ui/src/views/flow/tobereadList.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div style="text-align: right">
+        <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
+      </div>
+    </div>
+    <div class="searchcon">
+      <div class="search">
+        <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
+          <el-form-item label="流程名称">
+            <el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="发送日期">
+            <el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+            <span style="padding: 0 8px">至</span>
+            <el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+          </el-form-item>
+          <el-button type="primary" @click="handleFilter">查询</el-button>
+        </el-form>
+      </div>
+    </div>
+    <div class="listtop">
+      <div class="tit">待阅列表</div>
+      <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <div class="">
+      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
+        <el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
+        <el-table-column width="180px" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作名称" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgTitle }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送人" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sendTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送部门" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送来源" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgSource }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审批记录" align="center">
+          <template slot-scope="scope">
+            <span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pages">
+      <div class="tit"/>
+      <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <!-- Start查看页面 -->
+    <el-dialog :visible.sync="centerDialogVisible" width="78%" height="1%" center @close="colsePage">
+      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
+    </el-dialog>
+    <!-- End查看页面-->
+
+    <!-- 编辑信息 -->
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle" @close="colsePage">
+      <!--流程流转记录-->
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
+      <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
+    </el-dialog>
+
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import flowRecords from '@/components/flow/flowRecord'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import { getStorage } from '@/utils/auth'
+import { selectUrl, readXml, getFlowViewer, commentSave } from '@/api/flow/todo'
+import { pagerList, changeRead } from '@/api/flow/read'
+import { flowRecord } from '@/api/workflow/finished'
+export default {
+  name: '',
+  components: {
+    pageye,
+    Pagination,
+    flowRecords
+  },
+  data() {
+    return {
+      taskList: [],
+      xmlData: '',
+      dialogHeight: '80%',
+      centerDialogVisible: false, // 弹框
+      editDialog: false,
+      flowRecordList: [],
+      listLoading: false,
+      list: [],
+      tableKey: 0,
+      url: '',
+      commentVisible: false, // 评论内容弹框
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      },
+      line_row: {},
+      loginInfo: {
+        userSid: ''
+      },
+      selectUrl_list: {
+        proc_def_id: '', // 流程定义id
+        taskDefKey: '', // 节点id
+        type: '' // 类型
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          names: '',
+          createStartTime: '',
+          createEndTime: '',
+          userSid: '',
+          state: '0', // 0是待阅,1是已阅
+          orgPath: ''
+        }
+      }
+    }
+  },
+  mounted() {
+    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
+    window.addEventListener('message', this.handleMessage)
+  },
+  created() {
+    // 加载列表
+    this.init()
+  },
+  methods: {
+    async handleMessage(event) {
+      var code = ''
+      if (event.data.params !== null && event.data.params !== undefined) {
+        code = event.data.params.code
+      }
+      if (code === 1) {
+        this.init()
+        this.centerDialogVisible = false
+      } else if (code === 2) {
+        this.dialogHeight = event.data.params.data
+        this.setIframeHeight(document.getElementById('iframe_done'))
+      }
+    },
+    setIframeHeight(iframe) {
+      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
+    },
+    init() {
+      this.getList()
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
+      this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
+      pagerList(this.listQuery).then((rep) => {
+        this.listLoading = false
+        if (rep.success) {
+          this.list = rep.data.records
+          this.listQuery.total = rep.data.total
+        } else {
+          this.list = []
+          this.listQuery.total = 0
+        }
+      })
+    },
+    handleFilter() {
+      this.listQuery.pageNumber = 1
+      this.getList()
+    },
+    /** 打开详情 */
+    handleCheck(row) {
+      changeRead(row.sid).then((res) => {
+        if (res.success) {
+          this.selectUrl_list.proc_def_id = row.procDefId
+          this.selectUrl_list.taskDefKey = row.taskDefKey
+          this.selectUrl_list.type = 2 // 详情
+          const parameter_list = {
+            businessSid: row.businessSid,
+            instanceId: row.procInsId,
+            taskId: row.taskId,
+            taskDefKey: row.taskDefKey,
+            taskName: row.taskName,
+            deployId: row.procDefId
+          }
+          selectUrl(this.selectUrl_list).then((response) => {
+            if (response.success && response.data.url !== '') {
+              this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+              // this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+              // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+            } else if (response.success && response.data.url === '') {
+              this.$notify({
+                title: '提示',
+                message: '请联系系统管理员',
+                type: 'error',
+                duration: 2000
+              })
+            } else {
+              this.$notify({
+                title: '提示',
+                message: '执行失败',
+                type: 'error',
+                duration: 2000
+              })
+            }
+          })
+          this.getFlowRecordList(row.procInsId, row.procDefId)
+          this.centerDialogVisible = true
+          // this.$router.push({path: '/todo' + '?token=' + getStorage()})
+        }
+      })
+    },
+    handleComment() {
+      this.commentVisible = true
+      this.comment = {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      }
+    },
+    handleCommentConfirm() {
+      if (this.comment.content === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+        return
+      }
+      this.comment.reviewer = window.sessionStorage.getItem('name')
+      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+      this.comment.processId = this.line_row.procInsId
+      commentSave(this.comment).then((resp) => {
+        if (resp.success) {
+          this.commentVisible = false
+          this.handleFlowRecord(this.line_row)
+        }
+      })
+    },
+    closeIt() {
+      this.url = ''
+      this.centerDialogVisible = false
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row) {
+      this.line_row = row
+      changeRead(row.sid).then((res) => {
+        if (res.success) {
+          this.getModelDetail(row.procDefId)
+          this.getFlowViewer(row.procInsId)
+          this.getFlowRecordList(row.procInsId, row.procDefId)
+          this.editDialog = true
+        }
+      })
+    },
+    colsePage() {
+      this.getList()
+    },
+    /** xml 文件 */
+    getModelDetail(procDefId) {
+      var token = getStorage()
+      // 发送请求，获取xml
+      readXml(procDefId, token).then(res => {
+        this.xmlData = res.data
+      })
+    },
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      var token = getStorage()
+      getFlowViewer(procInsId, token).then(res => {
+        this.taskList = res.data
+      })
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, procDefId) {
+      var token = getStorage()
+      const params = { procInsId: procInsId, deployId: procDefId, token: token }
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        if (res.data.formData) {
+          this.formConf = res.data.formData
+          this.formConfOpen = true
+        }
+      }).catch(res => {
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.listtop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 0px 10px 15px;
+  margin: 0;
+}
+
+.listtop .tit {
+  font-weight: bold;
+}
+
+.listtop .pagination {
+  margin: 0;
+  padding: 0;
+}
+
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0px 0px 15px 15px;
+}
+
+.pages .tit {
+  font-weight: bold;
+}
+
+.pages .pagination {
+  margin: 0;
+}
+.dialogStyle /deep/ .el-dialog__body {
+  padding-top: 0px !important;
+}
+</style>
diff --git a/anrui-system-ui/src/views/flow/todoList.vue b/anrui-system-ui/src/views/flow/todoList.vue
index a5399d0dc0..96c9a173e7 100644
--- a/anrui-system-ui/src/views/flow/todoList.vue
+++ b/anrui-system-ui/src/views/flow/todoList.vue
@@ -102,17 +102,29 @@
     <!-- End办理页面-->
 
     <!-- 编辑信息页面 -->
-    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden">
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
       <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
     </el-dialog>
 
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import flowRecords from '@/components/flow/flowRecord'
 import Pagination from '@/components/pagination'
 import pageye from '@/components/pagination/pageye'
-import { getFlowViewer, readXml, breakTask, businessAgree, pagerList, rejectTask, selectUrl } from '@/api/flow/todo'
+import { getFlowViewer, readXml, breakTask, businessAgree, pagerList, rejectTask, selectUrl, commentSave } from '@/api/flow/todo'
 import { getStorage } from '@/utils/auth'
 import { flowRecord } from '@/api/workflow/finished'
 import { loginDetails } from '@/api/user'
@@ -136,6 +148,16 @@ export default {
         list: [],
         tableKey: 0,
         url: '',
+      commentVisible: false, // 评论内容弹框
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: ''
+      },
+      line_row: {},
         taskName_now: '',
         loginInfo: {
           userSid: ''
@@ -227,11 +249,14 @@ export default {
             iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
       },
       async handleMessage(event) {
-       var code = event.data.params.code
-        if (code == 1) {
+        var code = ''
+        if (event.data.params !== null && event.data.params !== undefined) {
+          code = event.data.params.code
+        }
+        if (code === 1) {
           this.init()
           this.centerDialogVisible = false
-        } else if (code == 2) {
+        } else if (code === 2) {
           this.dialogHeight = event.data.params.data
           this.setIframeHeight(document.getElementById('iframe'))
         }
@@ -280,8 +305,8 @@ export default {
         }
         selectUrl(this.selectUrl_list).then((response) => {
           if (response.success && response.data.url !== '') {
-            // this.url = 'http://127.0.0.1:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
-            this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+            this.url = 'http://127.0.0.1:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+            // this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
             // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
             console.log('已办拼接url:', this.url)
           } else if (response.success && response.data.url === '') {
@@ -412,7 +437,32 @@ export default {
           }
         })
       },
-
+      handleComment() {
+        this.commentVisible = true
+        this.comment = {
+          reviewer: '',
+          reviewerSid: '',
+          time: '',
+          content: '',
+          processId: '',
+          processInstSid: ''
+        }
+      },
+      handleCommentConfirm() {
+        if (this.comment.content === '') {
+          this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+          return
+        }
+        this.comment.reviewer = window.sessionStorage.getItem('name')
+        this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+        this.comment.processId = this.line_row.procInsId
+        commentSave(this.comment).then((resp) => {
+          if (resp.success) {
+            this.commentVisible = false
+            this.handleFlowRecord(this.line_row)
+          }
+        })
+      },
       /** 更新列表 */
       refreshIt() {
         this.centerDialogVisible = false
@@ -420,6 +470,7 @@ export default {
       },
       /** 流程流转记录 */
       handleFlowRecord(row) {
+        this.line_row = row
         this.getModelDetail(row.deployId)
         this.getFlowViewer(row.procInsId)
         this.getFlowRecordList(row.procInsId,row.deployId)
@@ -542,4 +593,7 @@ export default {
   .searchlist {
     padding-top: 20px;
   }
+  .dialogStyle /deep/ .el-dialog__body {
+    padding-top: 0px !important;
+  }
 </style>