diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,
diff --git a/src/views/caseManage/delayApplyList.vue b/src/views/caseManage/delayApplyList.vue
new file mode 100644
index 0000000..3b71a6b
--- /dev/null
+++ b/src/views/caseManage/delayApplyList.vue
@@ -0,0 +1,229 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="approve(scope.row)">同意</el-button>
+            <el-button type="text" size="small" @click.stop="reject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog :visible.sync="rejectDialogVisible" :close-on-click-modal="false" title="拒绝延期" append-to-body @close="cancelReject">
+      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="auto">
+        <el-form-item label="驳回理由" prop="rejectReason">
+          <el-input v-model="rejectForm.rejectReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelReject">取消</el-button>
+        <el-button type="primary" @click="submitReject">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { applyList, approveDelay, rejectDelay } from '@/api/caseDelay'
+export default {
+  name: 'DelayApplyList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center'
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      rejectDialogVisible: false,
+      rejectForm: {
+        id: '',
+        rejectReason: ''
+      },
+      rejectRules: {
+        rejectReason: [{ required: true, message: '请填写驳回理由', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      applyList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+      this.$message.success('clearInput')
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    approve(row) {
+      this.$confirm('确认同意延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        approveDelay(row.id).then(res => {
+          this.$message.success('已确认')
+          this.fetchData()
+        })
+      })
+    },
+    reject(row) {
+      this.$confirm('确认拒绝延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.rejectForm.id = row.id
+        this.rejectDialogVisible = true
+      })
+    },
+    resetRejectForm() {
+      this.$refs['rejectForm'].resetFields()
+      this.rejectForm = {
+        id: '',
+        rejectReason: ''
+      }
+    },
+    cancelReject() {
+      this.rejectDialogVisible = false
+      this.resetRejectForm()
+    },
+    submitReject() {
+      rejectDelay(this.rejectForm).then(res => {
+        this.$message.success('已拒绝')
+        this.cancelReject()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,
diff --git a/src/views/caseManage/delayApplyList.vue b/src/views/caseManage/delayApplyList.vue
new file mode 100644
index 0000000..3b71a6b
--- /dev/null
+++ b/src/views/caseManage/delayApplyList.vue
@@ -0,0 +1,229 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="approve(scope.row)">同意</el-button>
+            <el-button type="text" size="small" @click.stop="reject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog :visible.sync="rejectDialogVisible" :close-on-click-modal="false" title="拒绝延期" append-to-body @close="cancelReject">
+      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="auto">
+        <el-form-item label="驳回理由" prop="rejectReason">
+          <el-input v-model="rejectForm.rejectReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelReject">取消</el-button>
+        <el-button type="primary" @click="submitReject">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { applyList, approveDelay, rejectDelay } from '@/api/caseDelay'
+export default {
+  name: 'DelayApplyList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center'
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      rejectDialogVisible: false,
+      rejectForm: {
+        id: '',
+        rejectReason: ''
+      },
+      rejectRules: {
+        rejectReason: [{ required: true, message: '请填写驳回理由', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      applyList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+      this.$message.success('clearInput')
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    approve(row) {
+      this.$confirm('确认同意延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        approveDelay(row.id).then(res => {
+          this.$message.success('已确认')
+          this.fetchData()
+        })
+      })
+    },
+    reject(row) {
+      this.$confirm('确认拒绝延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.rejectForm.id = row.id
+        this.rejectDialogVisible = true
+      })
+    },
+    resetRejectForm() {
+      this.$refs['rejectForm'].resetFields()
+      this.rejectForm = {
+        id: '',
+        rejectReason: ''
+      }
+    },
+    cancelReject() {
+      this.rejectDialogVisible = false
+      this.resetRejectForm()
+    },
+    submitReject() {
+      rejectDelay(this.rejectForm).then(res => {
+        this.$message.success('已拒绝')
+        this.cancelReject()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/delayList.vue b/src/views/caseManage/delayList.vue
new file mode 100644
index 0000000..873adbd
--- /dev/null
+++ b/src/views/caseManage/delayList.vue
@@ -0,0 +1,185 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.applyState" placeholder="状态" clearable>
+          <el-option v-for="item in applyStateList" :key="'applyState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getDelayState } from '@/api/allDict'
+import { delayList } from '@/api/caseDelay'
+export default {
+  name: 'DelayList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '', // 申请状态
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      applyStateList: []
+    }
+  },
+  created() {
+    this.fetchData()
+    this.fetchApplyStateList()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      delayList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    fetchApplyStateList() {
+      getDelayState().then(res => {
+        this.applyStateList = res.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,
diff --git a/src/views/caseManage/delayApplyList.vue b/src/views/caseManage/delayApplyList.vue
new file mode 100644
index 0000000..3b71a6b
--- /dev/null
+++ b/src/views/caseManage/delayApplyList.vue
@@ -0,0 +1,229 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="approve(scope.row)">同意</el-button>
+            <el-button type="text" size="small" @click.stop="reject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog :visible.sync="rejectDialogVisible" :close-on-click-modal="false" title="拒绝延期" append-to-body @close="cancelReject">
+      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="auto">
+        <el-form-item label="驳回理由" prop="rejectReason">
+          <el-input v-model="rejectForm.rejectReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelReject">取消</el-button>
+        <el-button type="primary" @click="submitReject">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { applyList, approveDelay, rejectDelay } from '@/api/caseDelay'
+export default {
+  name: 'DelayApplyList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center'
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      rejectDialogVisible: false,
+      rejectForm: {
+        id: '',
+        rejectReason: ''
+      },
+      rejectRules: {
+        rejectReason: [{ required: true, message: '请填写驳回理由', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      applyList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+      this.$message.success('clearInput')
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    approve(row) {
+      this.$confirm('确认同意延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        approveDelay(row.id).then(res => {
+          this.$message.success('已确认')
+          this.fetchData()
+        })
+      })
+    },
+    reject(row) {
+      this.$confirm('确认拒绝延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.rejectForm.id = row.id
+        this.rejectDialogVisible = true
+      })
+    },
+    resetRejectForm() {
+      this.$refs['rejectForm'].resetFields()
+      this.rejectForm = {
+        id: '',
+        rejectReason: ''
+      }
+    },
+    cancelReject() {
+      this.rejectDialogVisible = false
+      this.resetRejectForm()
+    },
+    submitReject() {
+      rejectDelay(this.rejectForm).then(res => {
+        this.$message.success('已拒绝')
+        this.cancelReject()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/delayList.vue b/src/views/caseManage/delayList.vue
new file mode 100644
index 0000000..873adbd
--- /dev/null
+++ b/src/views/caseManage/delayList.vue
@@ -0,0 +1,185 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.applyState" placeholder="状态" clearable>
+          <el-option v-for="item in applyStateList" :key="'applyState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getDelayState } from '@/api/allDict'
+import { delayList } from '@/api/caseDelay'
+export default {
+  name: 'DelayList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '', // 申请状态
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      applyStateList: []
+    }
+  },
+  created() {
+    this.fetchData()
+    this.fetchApplyStateList()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      delayList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    fetchApplyStateList() {
+      getDelayState().then(res => {
+        this.applyStateList = res.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/searchList.vue b/src/views/caseManage/searchList.vue
index 20f23bb..1c2bb89 100644
--- a/src/views/caseManage/searchList.vue
+++ b/src/views/caseManage/searchList.vue
@@ -2,7 +2,7 @@
 <template>
   <app-container>
     <case-search :list-query="listQuery" @search="search"/>
-    <case-list-table :list-query="listQuery" :list="list" :total="total" :list-loading="listLoading" @changePage="changePage">
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
       <template slot="operations">
         <el-table-column label="操作" align="center" width="100">
           <template slot-scope="scope">
@@ -45,7 +45,51 @@
         limit: 20,
         sort: 'createTime',
         order: 'desc'
-      } // 筛选条件
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ] // 显示列
     }
   },
   mounted() {

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,
diff --git a/src/views/caseManage/delayApplyList.vue b/src/views/caseManage/delayApplyList.vue
new file mode 100644
index 0000000..3b71a6b
--- /dev/null
+++ b/src/views/caseManage/delayApplyList.vue
@@ -0,0 +1,229 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="approve(scope.row)">同意</el-button>
+            <el-button type="text" size="small" @click.stop="reject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog :visible.sync="rejectDialogVisible" :close-on-click-modal="false" title="拒绝延期" append-to-body @close="cancelReject">
+      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="auto">
+        <el-form-item label="驳回理由" prop="rejectReason">
+          <el-input v-model="rejectForm.rejectReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelReject">取消</el-button>
+        <el-button type="primary" @click="submitReject">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { applyList, approveDelay, rejectDelay } from '@/api/caseDelay'
+export default {
+  name: 'DelayApplyList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center'
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      rejectDialogVisible: false,
+      rejectForm: {
+        id: '',
+        rejectReason: ''
+      },
+      rejectRules: {
+        rejectReason: [{ required: true, message: '请填写驳回理由', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      applyList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+      this.$message.success('clearInput')
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    approve(row) {
+      this.$confirm('确认同意延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        approveDelay(row.id).then(res => {
+          this.$message.success('已确认')
+          this.fetchData()
+        })
+      })
+    },
+    reject(row) {
+      this.$confirm('确认拒绝延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.rejectForm.id = row.id
+        this.rejectDialogVisible = true
+      })
+    },
+    resetRejectForm() {
+      this.$refs['rejectForm'].resetFields()
+      this.rejectForm = {
+        id: '',
+        rejectReason: ''
+      }
+    },
+    cancelReject() {
+      this.rejectDialogVisible = false
+      this.resetRejectForm()
+    },
+    submitReject() {
+      rejectDelay(this.rejectForm).then(res => {
+        this.$message.success('已拒绝')
+        this.cancelReject()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/delayList.vue b/src/views/caseManage/delayList.vue
new file mode 100644
index 0000000..873adbd
--- /dev/null
+++ b/src/views/caseManage/delayList.vue
@@ -0,0 +1,185 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.applyState" placeholder="状态" clearable>
+          <el-option v-for="item in applyStateList" :key="'applyState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getDelayState } from '@/api/allDict'
+import { delayList } from '@/api/caseDelay'
+export default {
+  name: 'DelayList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '', // 申请状态
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      applyStateList: []
+    }
+  },
+  created() {
+    this.fetchData()
+    this.fetchApplyStateList()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      delayList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    fetchApplyStateList() {
+      getDelayState().then(res => {
+        this.applyStateList = res.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/searchList.vue b/src/views/caseManage/searchList.vue
index 20f23bb..1c2bb89 100644
--- a/src/views/caseManage/searchList.vue
+++ b/src/views/caseManage/searchList.vue
@@ -2,7 +2,7 @@
 <template>
   <app-container>
     <case-search :list-query="listQuery" @search="search"/>
-    <case-list-table :list-query="listQuery" :list="list" :total="total" :list-loading="listLoading" @changePage="changePage">
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
       <template slot="operations">
         <el-table-column label="操作" align="center" width="100">
           <template slot-scope="scope">
@@ -45,7 +45,51 @@
         limit: 20,
         sort: 'createTime',
         order: 'desc'
-      } // 筛选条件
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ] // 显示列
     }
   },
   mounted() {
diff --git a/src/views/caseManage/urgeList.vue b/src/views/caseManage/urgeList.vue
new file mode 100644
index 0000000..e70152a
--- /dev/null
+++ b/src/views/caseManage/urgeList.vue
@@ -0,0 +1,177 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="催办内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="催办开始时间"
+          end-placeholder="催办结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getUrgeList } from '@/api/caseUrge'
+export default {
+  name: 'UrgeList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        urgeContent: '', // 申请状态
+        startTime: '', // 催办开始时间
+        endTime: '', // 催办结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      timeRange: [],
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '当前处理状态',
+          value: 'nowStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getUrgeList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/allDict.js b/src/api/allDict.js
index cd6cafd..0472304 100644
--- a/src/api/allDict.js
+++ b/src/api/allDict.js
@@ -48,3 +48,12 @@
   })
 }
 
+// 延期申请状态
+export function getDelayState(params) {
+  return request({
+    url: '/dict/code/delayState',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/caseDelay.js b/src/api/caseDelay.js
new file mode 100644
index 0000000..bd9b0a3
--- /dev/null
+++ b/src/api/caseDelay.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+/**
+ * 事件延期相关接口
+ */
+// 申请延期
+export function applyDelay(params) {
+  return request({
+    url: 'caseDelay/apply',
+    method: 'post',
+    params
+  })
+}
+
+// 同意延期
+export function approveDelay(id) {
+  return request({
+    url: 'caseDelay/approveDelay',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 拒绝延期
+export function rejectDelay(params) {
+  return request({
+    url: 'caseDelay/rejectDelay',
+    method: 'post',
+    params
+  })
+}
+
+// 申请延期列表
+export function applyList(params) {
+  return request({
+    url: 'caseDelay/applyList',
+    method: 'get',
+    params
+  })
+}
+
+// 申请记录列表
+export function delayList(params) {
+  return request({
+    url: 'caseDelay/delayList',
+    method: 'get',
+    params
+  })
+}
+
+// 事件延期记录
+export function delayRecords(caseId) {
+  return request({
+    url: 'caseDelay/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
+
diff --git a/src/api/caseUrge.js b/src/api/caseUrge.js
new file mode 100644
index 0000000..f667a16
--- /dev/null
+++ b/src/api/caseUrge.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+/**
+ * 事件催办相关接口
+ */
+// 催办
+export function addUrge(params) {
+  return request({
+    url: 'callCaseUrge/addUrge',
+    method: 'post',
+    params
+  })
+}
+
+// 催办列表
+export function getUrgeList(params) {
+  return request({
+    url: 'callCaseUrge/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 催办记录
+export function getUrgeRecords(caseId) {
+  return request({
+    url: 'callCaseUrge/records',
+    method: 'get',
+    params: {
+      caseId: caseId
+    }
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index f0cd972..afd5dc4 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -36,6 +36,30 @@
       meta: { title: '事件查询', icon: '' }
     },
     {
+      path: '/delayApplyList',
+      name: 'delayApplyList',
+      component: () => import('@/views/caseManage/delayApplyList'),
+      meta: { title: '延期申请', icon: '' }
+    },
+    {
+      path: '/delayList',
+      name: 'delayList',
+      component: () => import('@/views/caseManage/delayList'),
+      meta: { title: '延期查询', icon: '' }
+    },
+    {
+      path: '/urgeList',
+      name: 'urgeList',
+      component: () => import('@/views/caseManage/urgeList'),
+      meta: { title: '催办查询', icon: '' }
+    },
+    {
+      path: '/caseManage',
+      name: 'caseManage',
+      component: () => import('@/views/caseManage/caseManage'),
+      meta: { title: '事件管理', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
index 5a19ac3..72c5b20 100644
--- a/src/views/caseManage/caseCommon/caseListTable.vue
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -1,17 +1,17 @@
 <template>
   <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
     <template slot="columns">
-      <el-table-column label="处理类型" align="center" width="160">
+      <el-table-column label="处理类型" show-overflow-tooltip align="center" min-width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="受理人" align="center">
+      <el-table-column label="受理人" show-overflow-tooltip align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.createUserName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="限办日期" align="center" width="160">
+      <el-table-column label="限办日期" show-overflow-tooltip align="center" min-width="140">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedTime }}</span>
         </template>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
index 6f03a43..aab28e9 100644
--- a/src/views/caseManage/caseCommon/caseRecord.vue
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -1,32 +1,80 @@
 <template>
-  <!-- 流转记录 -->
-  <div v-loading="processRecordLoading" class="record">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
-    </el-row>
-    <el-table :data="processRecordList" border max-height="250">
-      <el-table-column
-        v-for="column in processRecordColumns"
-        :key="column.value"
-        :label="column.text"
-        :width="column.width"
-        :align="column.align?column.align:'center'">
-        <template slot-scope="scope">
-          <span>{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div>
+    <!-- 流转记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
+      </el-row>
+      <el-table v-loading="processRecordLoading" :data="processRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in processRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 督办记录 -->
+    <!-- TODO 催办记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件催办记录</div></el-col>
+      </el-row>
+      <el-table v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
+        <el-table-column
+          v-for="column in urgeRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 延期记录 -->
+    <div class="record">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件延期记录</div></el-col>
+      </el-row>
+      <el-table v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
+        <el-table-column
+          v-for="column in delayRecordColumns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align?column.align:'center'">
+          <template slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- TODO 监察记录 -->
+    <!-- TODO 上报请示记录 -->
   </div>
 </template>
 
 <script>
 import { historicalRecords } from '@/api/process'
+import { delayRecords } from '@/api/caseDelay'
+import { getUrgeRecords } from '@/api/caseUrge'
+
 export default {
   name: 'CaseRecord',
   props: {
     processId: {
       type: String,
-      default: -1
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -59,11 +107,71 @@
           align: 'center'
         }
       ],
-      processRecordLoading: false
+      processRecordLoading: false,
+      delayRecordList: [],
+      delayRecordColumns: [
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请理由',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        }
+      ],
+      delayRecordLoading: false,
+      urgeRecordLsit: [],
+      urgeRecordColumns: [
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办环节',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '当时处理者',
+          value: 'processUserName',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center'
+        }
+      ],
+      urgeRecordLoading: false
     }
   },
   mounted() {
     this.fetchProcessRecords()
+    this.fetchDelayRecords()
+    this.fetchUrgeRecords()
   },
   methods: {
     fetchProcessRecords() {
@@ -72,6 +180,20 @@
         this.processRecordList = res.data
         this.processRecordLoading = false
       })
+    },
+    fetchDelayRecords() {
+      this.delayRecordLoading = true
+      delayRecords(this.id).then(res => {
+        this.delayRecordList = res.data
+        this.delayRecordLoading = false
+      })
+    },
+    fetchUrgeRecords() {
+      this.urgeRecordLoading = true
+      getUrgeRecords(this.id).then(res => {
+        this.urgeRecordLsit = res.data
+        this.urgeRecordLoading = false
+      })
     }
   }
 }
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 2207aff..481c7a3 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -25,7 +25,7 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
     </div>
   </div>
 </template>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
new file mode 100644
index 0000000..9a879b7
--- /dev/null
+++ b/src/views/caseManage/caseManage.vue
@@ -0,0 +1,172 @@
+ <!-- 事件查询 -->
+<template>
+  <app-container>
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="">删除</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">督办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="urge(scope.row)">催办</el-button>
+            <el-button v-if="scope.row.state<2" type="text" size="small" @click.stop="">作废</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </case-list-table>
+
+    <el-dialog :visible.sync="urgeDialogVisible" :close-on-click-modal="false" title="催办" append-to-body @close="cancelUrge">
+      <el-form ref="urgeForm" :model="urgeForm" :rules="urgeRules" label-width="auto">
+        <el-form-item label="说明" prop="urgeContent">
+          <el-input v-model="urgeForm.urgeContent" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelUrge">取消</el-button>
+        <el-button type="primary" @click="submitUrge">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { searchList } from '@/api/callCase'
+import { addUrge } from '@/api/caseUrge'
+
+export default {
+  name: 'CaseManage',
+  components: { AppContainer, CaseSearch, CaseListTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      urgeDialogVisible: false,
+      urgeForm: {
+        caseId: '',
+        urgeContent: ''
+      },
+      urgeRules: {
+        urgeContent: [{ required: true, message: '请填写催办说明', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      searchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
+    },
+    // 任务办理
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    urge(row) {
+      this.urgeForm.caseId = row.id
+      this.urgeDialogVisible = true
+    },
+    cancelUrge() {
+      this.urgeDialogVisible = false
+      this.resetUrgeForm()
+    },
+    submitUrge() {
+      addUrge(this.urgeForm).then(res => {
+        this.$message.success('催办成功')
+        this.urgeDialogVisible = false
+      })
+    },
+    resetUrgeForm() {
+      this.$refs['urgeForm'].resetFields()
+      this.urgeForm = {
+        caseId: '',
+        urgeContent: ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
index ff50d06..487f29a 100644
--- a/src/views/caseManage/completedList.vue
+++ b/src/views/caseManage/completedList.vue
@@ -68,7 +68,7 @@
         this.listLoading = false
       })
     },
-    // 任务办理
+    // 查看详情
     goDetail(row) {
       this.$router.push({
         path: '/caseDetail/' + row.id,
diff --git a/src/views/caseManage/delayApplyList.vue b/src/views/caseManage/delayApplyList.vue
new file mode 100644
index 0000000..3b71a6b
--- /dev/null
+++ b/src/views/caseManage/delayApplyList.vue
@@ -0,0 +1,229 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="approve(scope.row)">同意</el-button>
+            <el-button type="text" size="small" @click.stop="reject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog :visible.sync="rejectDialogVisible" :close-on-click-modal="false" title="拒绝延期" append-to-body @close="cancelReject">
+      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="auto">
+        <el-form-item label="驳回理由" prop="rejectReason">
+          <el-input v-model="rejectForm.rejectReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelReject">取消</el-button>
+        <el-button type="primary" @click="submitReject">确定</el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { applyList, approveDelay, rejectDelay } from '@/api/caseDelay'
+export default {
+  name: 'DelayApplyList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center'
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center'
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center'
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      rejectDialogVisible: false,
+      rejectForm: {
+        id: '',
+        rejectReason: ''
+      },
+      rejectRules: {
+        rejectReason: [{ required: true, message: '请填写驳回理由', trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      applyList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+      this.$message.success('clearInput')
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    },
+    approve(row) {
+      this.$confirm('确认同意延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        approveDelay(row.id).then(res => {
+          this.$message.success('已确认')
+          this.fetchData()
+        })
+      })
+    },
+    reject(row) {
+      this.$confirm('确认拒绝延期吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.rejectForm.id = row.id
+        this.rejectDialogVisible = true
+      })
+    },
+    resetRejectForm() {
+      this.$refs['rejectForm'].resetFields()
+      this.rejectForm = {
+        id: '',
+        rejectReason: ''
+      }
+    },
+    cancelReject() {
+      this.rejectDialogVisible = false
+      this.resetRejectForm()
+    },
+    submitReject() {
+      rejectDelay(this.rejectForm).then(res => {
+        this.$message.success('已拒绝')
+        this.cancelReject()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/delayList.vue b/src/views/caseManage/delayList.vue
new file mode 100644
index 0000000..873adbd
--- /dev/null
+++ b/src/views/caseManage/delayList.vue
@@ -0,0 +1,185 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.applyState" placeholder="状态" clearable>
+          <el-option v-for="item in applyStateList" :key="'applyState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getDelayState } from '@/api/allDict'
+import { delayList } from '@/api/caseDelay'
+export default {
+  name: 'DelayList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '', // 申请状态
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '延期时间',
+          value: 'delayTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '申请说明',
+          value: 'applyReason',
+          align: 'center'
+        },
+        {
+          text: '申请人',
+          value: 'applyUserName',
+          align: 'center'
+        },
+        {
+          text: '申请时间',
+          value: 'applyTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '状态',
+          value: 'applyStateName',
+          align: 'center'
+        },
+        {
+          text: '审核人',
+          value: 'approveUserName',
+          align: 'center'
+        },
+        {
+          text: '审核时间',
+          value: 'approveTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '审核驳回理由',
+          value: 'rejectReason',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      }, // 表格属性
+      applyStateList: []
+    }
+  },
+  created() {
+    this.fetchData()
+    this.fetchApplyStateList()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      delayList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    fetchApplyStateList() {
+      getDelayState().then(res => {
+        this.applyStateList = res.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/searchList.vue b/src/views/caseManage/searchList.vue
index 20f23bb..1c2bb89 100644
--- a/src/views/caseManage/searchList.vue
+++ b/src/views/caseManage/searchList.vue
@@ -2,7 +2,7 @@
 <template>
   <app-container>
     <case-search :list-query="listQuery" @search="search"/>
-    <case-list-table :list-query="listQuery" :list="list" :total="total" :list-loading="listLoading" @changePage="changePage">
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :columns="columns" :list-loading="listLoading" @changePage="changePage">
       <template slot="operations">
         <el-table-column label="操作" align="center" width="100">
           <template slot-scope="scope">
@@ -45,7 +45,51 @@
         limit: 20,
         sort: 'createTime',
         order: 'desc'
-      } // 筛选条件
+      }, // 筛选条件
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '联系人',
+          value: 'reporterName',
+          align: 'center'
+        },
+        {
+          text: '联系方式',
+          value: 'reporterPhone',
+          align: 'center'
+        },
+        {
+          text: '来电时间',
+          value: 'callTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 140,
+          align: 'center'
+        },
+        {
+          text: '处理状态',
+          value: 'stateName',
+          align: 'center'
+        },
+        {
+          text: '事件内容',
+          value: 'description',
+          align: 'center'
+        },
+        {
+          text: '处理方式',
+          value: 'caseStateName',
+          align: 'center'
+        }
+      ] // 显示列
     }
   },
   mounted() {
diff --git a/src/views/caseManage/urgeList.vue b/src/views/caseManage/urgeList.vue
new file mode 100644
index 0000000..e70152a
--- /dev/null
+++ b/src/views/caseManage/urgeList.vue
@@ -0,0 +1,177 @@
+<template>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.caseId" placeholder="事件编号" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-input v-model.trim="listQuery.title" placeholder="事件标题" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="事件内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="联系方式" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.reporterPhone" placeholder="催办内容" clearable/>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="催办开始时间"
+          end-placeholder="催办结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getUrgeList } from '@/api/caseUrge'
+export default {
+  name: 'UrgeList',
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        urgeContent: '', // 申请状态
+        startTime: '', // 催办开始时间
+        endTime: '', // 催办结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }, // 筛选条件
+      timeRange: [],
+      columns: [
+        {
+          text: '事件标题',
+          value: 'title',
+          align: 'center'
+        },
+        {
+          text: '催办内容',
+          value: 'urgeContent',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '催办人',
+          value: 'urgeUserName',
+          align: 'center'
+        },
+        {
+          text: '催办时间',
+          value: 'urgeTime',
+          align: 'center',
+          width: 160
+        },
+        {
+          text: '当前处理状态',
+          value: 'nowStateName',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getUrgeList(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.total
+        this.listLoading = false
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.listQuery = {
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        applyState: '',
+        offset: 1,
+        limit: 20,
+        sort: 'applyTime',
+        order: 'desc'
+      }
+    },
+    // 查看详情
+    goDetail(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.caseId,
+        query: {
+          showProcess: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/caseManage/waitForHandle.vue b/src/views/caseManage/waitForHandle.vue
index 50e32ee..b052915 100644
--- a/src/views/caseManage/waitForHandle.vue
+++ b/src/views/caseManage/waitForHandle.vue
@@ -13,6 +13,21 @@
         </el-table-column>
       </template>
     </case-list-table>
+
+    <el-dialog :visible.sync="delayDialogVisible" :close-on-click-modal="false" title="申请延期" append-to-body @close="cancelDelay">
+      <el-form ref="delayForm" :model="delayForm" :rules="delayRules" label-width="auto">
+        <el-form-item label="延期时间" prop="delayTime">
+          <el-date-picker v-model="delayForm.delayTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择延期时间"/>
+        </el-form-item>
+        <el-form-item label="申请理由" prop="applyReason">
+          <el-input v-model="delayForm.applyReason" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelDelay()">取消</el-button>
+        <el-button type="primary" @click="submitDelay()">确定</el-button>
+      </div>
+    </el-dialog>
   </app-container>
 </template>
 
@@ -21,6 +36,7 @@
 import CaseSearch from './caseCommon/caseSearch'
 import CaseListTable from './caseCommon/caseListTable'
 import { workList } from '@/api/callCase'
+import { applyDelay } from '@/api/caseDelay'
 
 export default {
   name: 'WaitForHandle',
@@ -47,7 +63,17 @@
       }, // 筛选条件
       list: [], // 列表数据
       total: 0, // 数据总数
-      listLoading: true // 列表加载动画
+      listLoading: true, // 列表加载动画
+      delayDialogVisible: false, // 申请延期对话框
+      delayForm: {
+        caseId: '',
+        delayTime: '',
+        applyReason: ''
+      },
+      delayRules: {
+        delayTime: [{ required: true, message: '请选择延期时间', trigger: ['change', 'blur'] }],
+        applyReason: [{ required: true, message: '请填写申请理由', trigger: ['change', 'blur'] }]
+      }
     }
   },
   created() {
@@ -80,7 +106,34 @@
       })
     },
     // 申请延期
-    applyDelay(row) { },
+    applyDelay(row) {
+      this.delayDialogVisible = true
+      this.delayForm.caseId = row.id
+    },
+    resetDeleyForm() {
+      this.$refs['delayForm'].resetFields()
+      this.delayForm = {
+        id: '',
+        delayTime: '',
+        applyReason: ''
+      }
+    },
+    cancelDelay() {
+      this.delayDialogVisible = false
+      this.resetDeleyForm()
+    },
+    submitDelay() {
+      this.$refs['delayForm'].validate((valid) => {
+        if (valid) {
+          applyDelay(this.delayForm).then(res => {
+            this.$message.success('申请延期成功')
+            this.cancelDelay()
+          }).catch((res) => {
+            this.cancelDelay()
+          })
+        }
+      })
+    },
     // 上报请示
     applyReport(row) { }
   }