diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseSearch.vue b/src/views/caseManage/caseCommon/caseSearch.vue
new file mode 100644
index 0000000..4c7cfdb
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @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.reporterName" 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>
+    <!--高级检索-->
+    <div slot="searchMore">
+      <search-item>
+        <el-select v-model="listQuery.caseState" placeholder="处理方式" clearable>
+          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.state" placeholder="处理状态" clearable>
+          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.isDelay" placeholder="事件状态" clearable>
+          <el-option label="超期未办" value="1"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" placeholder="事件来源" clearable>
+          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" clearable>
+          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </div>
+  </search-area>
+</template>
+
+<script>
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
+export default {
+  name: 'CaseSearch',
+  components: { SearchItem, SearchArea },
+  props: {
+    listQuery: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      timeRange: [], // 时间范围
+      caseStateList: [],
+      caseSourceList: [],
+      processStateList: [],
+      caseLevelList: []
+    }
+  },
+  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 = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchCaseStateList()
+    this.fetchCaseSourceList()
+    this.fetchProcessStateList()
+    this.fetchCaseLevelList()
+  },
+  methods: {
+    fetchCaseStateList() {
+      getCaseState().then(response => {
+        this.caseStateList = response.data
+      })
+    },
+    fetchProcessStateList() {
+      getProcessState().then(repsonse => {
+        this.processStateList = repsonse.data
+      })
+    },
+    fetchCaseSourceList() {
+      getCaseSource().then(response => {
+        this.caseSourceList = response.data
+      })
+    },
+    fetchCaseLevelList() {
+      getCaseLevel().then(response => {
+        this.caseLevelList = response.data
+      })
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
+    },
+    search() {
+      this.$emit('search', this.listQuery)
+    }
+  }
+}
+</script>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseSearch.vue b/src/views/caseManage/caseCommon/caseSearch.vue
new file mode 100644
index 0000000..4c7cfdb
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @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.reporterName" 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>
+    <!--高级检索-->
+    <div slot="searchMore">
+      <search-item>
+        <el-select v-model="listQuery.caseState" placeholder="处理方式" clearable>
+          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.state" placeholder="处理状态" clearable>
+          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.isDelay" placeholder="事件状态" clearable>
+          <el-option label="超期未办" value="1"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" placeholder="事件来源" clearable>
+          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" clearable>
+          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </div>
+  </search-area>
+</template>
+
+<script>
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
+export default {
+  name: 'CaseSearch',
+  components: { SearchItem, SearchArea },
+  props: {
+    listQuery: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      timeRange: [], // 时间范围
+      caseStateList: [],
+      caseSourceList: [],
+      processStateList: [],
+      caseLevelList: []
+    }
+  },
+  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 = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchCaseStateList()
+    this.fetchCaseSourceList()
+    this.fetchProcessStateList()
+    this.fetchCaseLevelList()
+  },
+  methods: {
+    fetchCaseStateList() {
+      getCaseState().then(response => {
+        this.caseStateList = response.data
+      })
+    },
+    fetchProcessStateList() {
+      getProcessState().then(repsonse => {
+        this.processStateList = repsonse.data
+      })
+    },
+    fetchCaseSourceList() {
+      getCaseSource().then(response => {
+        this.caseSourceList = response.data
+      })
+    },
+    fetchCaseLevelList() {
+      getCaseLevel().then(response => {
+        this.caseLevelList = response.data
+      })
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
+    },
+    search() {
+      this.$emit('search', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 9a53658..2207aff 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -1,12 +1,110 @@
 <!--事件详情-->
-<template/>
+<template>
+  <div v-loading="wholeLoading" class="app-container">
+    <!-- 基础信息表单 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+      </el-row>
+      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
+    </div>
+    <!-- 事件流程处理 -->
+    <div v-if="showProcess&&caseDetail.id">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+      </el-row>
+      <case-process
+        ref="caseProcess"
+        :biz-id="caseDetail.id"
+        :process-id="caseDetail.processId"
+        :case-state="caseDetail.caseState"
+        @loading="loading"
+        @submitSuccess="submitSuccess"
+        @submitError="submitError"
+      />
+    </div>
+    <!-- 事件处理记录 -->
+    <div v-if="caseDetail.processId">
+      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+    </div>
+  </div>
+</template>
 
 <script>
+import CaseFormRead from './caseCommon/caseFormRead'
+import CaseProcess from './caseCommon/caseProcess'
+import CaseRecord from './caseCommon/caseRecord'
+import { caseDetail } from '@/api/callCase'
+
 export default {
-  name: 'CaseDetail'
+  name: 'CaseDetail',
+  components: { CaseFormRead, CaseProcess, CaseRecord },
+  data() {
+    return {
+      id: '',
+      caseDetail: {},
+      showProcess: false,
+      wholeLoading: false
+    }
+  },
+  mounted() {
+    this.id = this.$route.params.id
+    if (this.$route.query.showProcess) {
+      this.showProcess = this.$route.query.showProcess
+    }
+    this.fetchDetail()
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    fetchDetail() {
+      if (this.id) {
+        this.wholeLoading = true
+        caseDetail(this.id).then(response => {
+          this.caseDetail = response.data
+          this.wholeLoading = false
+        })
+      }
+    },
+    loading() {
+      this.wholeLoading = true
+    },
+    /**
+     * 提交成功之后
+     */
+    submitSuccess() {
+      console.log('submitSuccess')
+      this.$message.success('提交成功')
+      this.showProcess = false
+      this.$route.query.showProcess = false
+      this.wholeLoading = false
+      this.fetchDetail()
+      this.$refs['caseRecord'].fetchProcessRecords()
+    },
+    /**
+     * 提交失败之后
+     */
+    submitError() {
+      console.log('submitError')
+      this.wholeLoading = false
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .title-header{
+      line-height:46px;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
 </style>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseSearch.vue b/src/views/caseManage/caseCommon/caseSearch.vue
new file mode 100644
index 0000000..4c7cfdb
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @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.reporterName" 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>
+    <!--高级检索-->
+    <div slot="searchMore">
+      <search-item>
+        <el-select v-model="listQuery.caseState" placeholder="处理方式" clearable>
+          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.state" placeholder="处理状态" clearable>
+          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.isDelay" placeholder="事件状态" clearable>
+          <el-option label="超期未办" value="1"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" placeholder="事件来源" clearable>
+          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" clearable>
+          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </div>
+  </search-area>
+</template>
+
+<script>
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
+export default {
+  name: 'CaseSearch',
+  components: { SearchItem, SearchArea },
+  props: {
+    listQuery: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      timeRange: [], // 时间范围
+      caseStateList: [],
+      caseSourceList: [],
+      processStateList: [],
+      caseLevelList: []
+    }
+  },
+  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 = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchCaseStateList()
+    this.fetchCaseSourceList()
+    this.fetchProcessStateList()
+    this.fetchCaseLevelList()
+  },
+  methods: {
+    fetchCaseStateList() {
+      getCaseState().then(response => {
+        this.caseStateList = response.data
+      })
+    },
+    fetchProcessStateList() {
+      getProcessState().then(repsonse => {
+        this.processStateList = repsonse.data
+      })
+    },
+    fetchCaseSourceList() {
+      getCaseSource().then(response => {
+        this.caseSourceList = response.data
+      })
+    },
+    fetchCaseLevelList() {
+      getCaseLevel().then(response => {
+        this.caseLevelList = response.data
+      })
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
+    },
+    search() {
+      this.$emit('search', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 9a53658..2207aff 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -1,12 +1,110 @@
 <!--事件详情-->
-<template/>
+<template>
+  <div v-loading="wholeLoading" class="app-container">
+    <!-- 基础信息表单 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+      </el-row>
+      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
+    </div>
+    <!-- 事件流程处理 -->
+    <div v-if="showProcess&&caseDetail.id">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+      </el-row>
+      <case-process
+        ref="caseProcess"
+        :biz-id="caseDetail.id"
+        :process-id="caseDetail.processId"
+        :case-state="caseDetail.caseState"
+        @loading="loading"
+        @submitSuccess="submitSuccess"
+        @submitError="submitError"
+      />
+    </div>
+    <!-- 事件处理记录 -->
+    <div v-if="caseDetail.processId">
+      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+    </div>
+  </div>
+</template>
 
 <script>
+import CaseFormRead from './caseCommon/caseFormRead'
+import CaseProcess from './caseCommon/caseProcess'
+import CaseRecord from './caseCommon/caseRecord'
+import { caseDetail } from '@/api/callCase'
+
 export default {
-  name: 'CaseDetail'
+  name: 'CaseDetail',
+  components: { CaseFormRead, CaseProcess, CaseRecord },
+  data() {
+    return {
+      id: '',
+      caseDetail: {},
+      showProcess: false,
+      wholeLoading: false
+    }
+  },
+  mounted() {
+    this.id = this.$route.params.id
+    if (this.$route.query.showProcess) {
+      this.showProcess = this.$route.query.showProcess
+    }
+    this.fetchDetail()
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    fetchDetail() {
+      if (this.id) {
+        this.wholeLoading = true
+        caseDetail(this.id).then(response => {
+          this.caseDetail = response.data
+          this.wholeLoading = false
+        })
+      }
+    },
+    loading() {
+      this.wholeLoading = true
+    },
+    /**
+     * 提交成功之后
+     */
+    submitSuccess() {
+      console.log('submitSuccess')
+      this.$message.success('提交成功')
+      this.showProcess = false
+      this.$route.query.showProcess = false
+      this.wholeLoading = false
+      this.fetchDetail()
+      this.$refs['caseRecord'].fetchProcessRecords()
+    },
+    /**
+     * 提交失败之后
+     */
+    submitError() {
+      console.log('submitError')
+      this.wholeLoading = false
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .title-header{
+      line-height:46px;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
 </style>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
new file mode 100644
index 0000000..ff50d06
--- /dev/null
+++ b/src/views/caseManage/completedList.vue
@@ -0,0 +1,82 @@
+ <!-- 已办事件 -->
+<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">
+      <template slot="operations">
+        <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>
+    </case-list-table>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { completedList } from '@/api/callCase'
+
+export default {
+  name: 'CompletedList',
+  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'
+      } // 筛选条件
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      completedList(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
+        }
+      })
+    }
+  }
+}
+</script>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseSearch.vue b/src/views/caseManage/caseCommon/caseSearch.vue
new file mode 100644
index 0000000..4c7cfdb
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @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.reporterName" 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>
+    <!--高级检索-->
+    <div slot="searchMore">
+      <search-item>
+        <el-select v-model="listQuery.caseState" placeholder="处理方式" clearable>
+          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.state" placeholder="处理状态" clearable>
+          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.isDelay" placeholder="事件状态" clearable>
+          <el-option label="超期未办" value="1"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" placeholder="事件来源" clearable>
+          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" clearable>
+          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </div>
+  </search-area>
+</template>
+
+<script>
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
+export default {
+  name: 'CaseSearch',
+  components: { SearchItem, SearchArea },
+  props: {
+    listQuery: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      timeRange: [], // 时间范围
+      caseStateList: [],
+      caseSourceList: [],
+      processStateList: [],
+      caseLevelList: []
+    }
+  },
+  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 = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchCaseStateList()
+    this.fetchCaseSourceList()
+    this.fetchProcessStateList()
+    this.fetchCaseLevelList()
+  },
+  methods: {
+    fetchCaseStateList() {
+      getCaseState().then(response => {
+        this.caseStateList = response.data
+      })
+    },
+    fetchProcessStateList() {
+      getProcessState().then(repsonse => {
+        this.processStateList = repsonse.data
+      })
+    },
+    fetchCaseSourceList() {
+      getCaseSource().then(response => {
+        this.caseSourceList = response.data
+      })
+    },
+    fetchCaseLevelList() {
+      getCaseLevel().then(response => {
+        this.caseLevelList = response.data
+      })
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
+    },
+    search() {
+      this.$emit('search', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 9a53658..2207aff 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -1,12 +1,110 @@
 <!--事件详情-->
-<template/>
+<template>
+  <div v-loading="wholeLoading" class="app-container">
+    <!-- 基础信息表单 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+      </el-row>
+      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
+    </div>
+    <!-- 事件流程处理 -->
+    <div v-if="showProcess&&caseDetail.id">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+      </el-row>
+      <case-process
+        ref="caseProcess"
+        :biz-id="caseDetail.id"
+        :process-id="caseDetail.processId"
+        :case-state="caseDetail.caseState"
+        @loading="loading"
+        @submitSuccess="submitSuccess"
+        @submitError="submitError"
+      />
+    </div>
+    <!-- 事件处理记录 -->
+    <div v-if="caseDetail.processId">
+      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+    </div>
+  </div>
+</template>
 
 <script>
+import CaseFormRead from './caseCommon/caseFormRead'
+import CaseProcess from './caseCommon/caseProcess'
+import CaseRecord from './caseCommon/caseRecord'
+import { caseDetail } from '@/api/callCase'
+
 export default {
-  name: 'CaseDetail'
+  name: 'CaseDetail',
+  components: { CaseFormRead, CaseProcess, CaseRecord },
+  data() {
+    return {
+      id: '',
+      caseDetail: {},
+      showProcess: false,
+      wholeLoading: false
+    }
+  },
+  mounted() {
+    this.id = this.$route.params.id
+    if (this.$route.query.showProcess) {
+      this.showProcess = this.$route.query.showProcess
+    }
+    this.fetchDetail()
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    fetchDetail() {
+      if (this.id) {
+        this.wholeLoading = true
+        caseDetail(this.id).then(response => {
+          this.caseDetail = response.data
+          this.wholeLoading = false
+        })
+      }
+    },
+    loading() {
+      this.wholeLoading = true
+    },
+    /**
+     * 提交成功之后
+     */
+    submitSuccess() {
+      console.log('submitSuccess')
+      this.$message.success('提交成功')
+      this.showProcess = false
+      this.$route.query.showProcess = false
+      this.wholeLoading = false
+      this.fetchDetail()
+      this.$refs['caseRecord'].fetchProcessRecords()
+    },
+    /**
+     * 提交失败之后
+     */
+    submitError() {
+      console.log('submitError')
+      this.wholeLoading = false
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .title-header{
+      line-height:46px;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
 </style>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
new file mode 100644
index 0000000..ff50d06
--- /dev/null
+++ b/src/views/caseManage/completedList.vue
@@ -0,0 +1,82 @@
+ <!-- 已办事件 -->
+<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">
+      <template slot="operations">
+        <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>
+    </case-list-table>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { completedList } from '@/api/callCase'
+
+export default {
+  name: 'CompletedList',
+  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'
+      } // 筛选条件
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      completedList(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
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/searchList.vue b/src/views/caseManage/searchList.vue
new file mode 100644
index 0000000..20f23bb
--- /dev/null
+++ b/src/views/caseManage/searchList.vue
@@ -0,0 +1,82 @@
+ <!-- 事件查询 -->
+<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">
+      <template slot="operations">
+        <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>
+    </case-list-table>
+  </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'
+
+export default {
+  name: 'CompletedList',
+  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'
+      } // 筛选条件
+    }
+  },
+  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
+        }
+      })
+    }
+  }
+}
+</script>

diff --git a/mock/index.js b/mock/index.js
index 0e41bf6..0b386e7 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -7,6 +7,7 @@
 import area from './system/area'
 import role from './system/role'
 import log from './system/log'
+import callCase from './system/callCase'
 import config from './system/config'
 import search from './remote-search'
 
@@ -19,7 +20,8 @@
   ...role,
   ...log,
   ...config,
-  ...search
+  ...search,
+  ...callCase
 ]
 
 Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
diff --git a/mock/system/callCase.js b/mock/system/callCase.js
new file mode 100644
index 0000000..3c83885
--- /dev/null
+++ b/mock/system/callCase.js
@@ -0,0 +1,34 @@
+const caseList = [
+  { id: '1', caseId: '20200405105004', title: '事件标题1', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述111', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '2', caseId: '20200405105005', title: '事件标题2', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述222', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '3', caseId: '20200405105006', title: '事件标题3', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述333', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '4', caseId: '20200405105007', title: '事件标题4', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述444', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '5', caseId: '20200405105008', title: '事件标题5', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述555', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' },
+  { id: '6', caseId: '20200405105009', title: '事件标题6', reporterName: '张三', callTime: '2020-04-04 11:58:40', reporterPhone: '15652464913', caseState: '1', caseStateName: '暂存', description: '事件描述666', state: '0', stateName: '待处理', eorc: '1', eorcName: '咨询', caseTypeCode: '01', caseTypeName: '咨询', caseDetailTypeCode: '01', caseDetailTypeName: '扶贫', createUser: '1', createUserName: '超级管理员', limitedTime: '2020-04-08 12:00:00', createTime: '2020-04-05 11:31:30' }
+]
+export default [
+  {
+    url: '/case/workList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          rows: caseList,
+          total: 6
+        }
+      }
+    }
+  },
+  {
+    url: '/case/detail',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+        }
+      }
+    }
+  }
+]
diff --git a/src/api/allDict.js b/src/api/allDict.js
new file mode 100644
index 0000000..cd6cafd
--- /dev/null
+++ b/src/api/allDict.js
@@ -0,0 +1,50 @@
+/**
+ * 字典值查询接口
+ */
+import request from '@/utils/request'
+
+// 事部件（事件类型一级）
+export function getEorc(params) {
+  return request({
+    url: '/dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 事件状态
+export function getCaseState(params) {
+  return request({
+    url: '/dict/code/caseState',
+    method: 'get',
+    params
+  })
+}
+
+// 处理状态
+export function getProcessState(params) {
+  return request({
+    url: '/dict/code/processState',
+    method: 'get',
+    params
+  })
+}
+
+// 事件来源
+export function getCaseSource(params) {
+  return request({
+    url: '/dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 事件等级
+export function getCaseLevel(params) {
+  return request({
+    url: '/dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/callCase.js b/src/api/callCase.js
new file mode 100644
index 0000000..b4c1c5b
--- /dev/null
+++ b/src/api/callCase.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export function workList(params) {
+  return request({
+    url: 'case/workList',
+    method: 'get',
+    params
+  })
+}
+
+export function completedList(params) {
+  return request({
+    url: 'case/completedList',
+    method: 'get',
+    params
+  })
+}
+
+export function searchList(params) {
+  return request({
+    url: 'case/searchList',
+    method: 'get',
+    params
+  })
+}
+
+export function caseDetail(id) {
+  return request({
+    url: 'case/detail',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 获得处置部门列表
+export function getDisposalDeptList() {
+  return request({
+    url: '/case/disposalDept',
+    method: 'get'
+  })
+}
+
+// 获得处置人员列表
+export function getUserList(params) {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/api/process.js b/src/api/process.js
new file mode 100644
index 0000000..b9c3642
--- /dev/null
+++ b/src/api/process.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function historicalRecords(processId) {
+  return request({
+    url: '/process/historicalRecords',
+    method: 'get',
+    params: {
+      processId: processId
+    }
+  })
+}
+
+export function getNextNodeList(caseState) {
+  return request({
+    url: '/process/nextNodes',
+    method: 'get',
+    params: {
+      caseState: caseState
+    }
+  })
+}
+
+export function completeCaseTask(params) {
+  console.log(params)
+  return request({
+    url: '/process/completeCaseTask',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/case.js b/src/router/modules/case.js
index b75de56..f0cd972 100644
--- a/src/router/modules/case.js
+++ b/src/router/modules/case.js
@@ -24,6 +24,18 @@
       meta: { title: '待办事件', icon: '' }
     },
     {
+      path: '/completedList',
+      name: 'CompletedList',
+      component: () => import('@/views/caseManage/completedList'),
+      meta: { title: '已办事件', icon: '' }
+    },
+    {
+      path: '/searchList',
+      name: 'SearchList',
+      component: () => import('@/views/caseManage/searchList'),
+      meta: { title: '事件查询', icon: '' }
+    },
+    {
       path: '/createCase',
       name: 'CreateCase',
       hidden: true,
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
new file mode 100644
index 0000000..8ab1b88
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件受理录音">
+            <el-input :value="caseForm.sound"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件回访录音">
+            <el-input :value="caseForm.satisfactionSound"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+export default {
+  name: 'CaseFormRead',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    // fetchDetail() {
+    //   if (this.id) {
+    //     caseDetail(this.id).then(response => {
+    //       this.caseForm = response.data
+    //     })
+    //   }
+    // }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseListTable.vue b/src/views/caseManage/caseCommon/caseListTable.vue
new file mode 100644
index 0000000..5a19ac3
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseListTable.vue
@@ -0,0 +1,157 @@
+<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">
+        <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">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createUserName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="限办日期" align="center" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.limitedTime }}</span>
+        </template>
+      </el-table-column>
+      <!-- 自定义操作 -->
+      <slot name="operations"/>
+    </template>
+  </normal-table>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+
+export default {
+  name: 'CaseListTable',
+  components: { NormalTable },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }, // 案件列表
+    listQuery: {
+      type: Object,
+      default() {
+        return {
+          caseId: '', // 事件编号
+          title: '', // 事件标题
+          description: '', // 事件内容
+          reporterPhone: '', // 联系方式
+          reporterName: '', // 联系人
+          startTime: '', // 来电开始时间
+          endTime: '', // 来电结束时间
+          caseState: '', // 处理方式
+          state: '', // 处理状态
+          isDelay: '', // 事件状态
+          source: '', // 事件来源
+          caseLevel: '', // 紧急程度
+          offset: 1,
+          limit: 20,
+          sort: 'createTime',
+          order: 'desc'
+        }
+      }
+    }, // 查询条件
+    columns: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: '事件标题',
+            value: 'title',
+            align: 'center'
+          },
+          {
+            text: '联系人',
+            value: 'reporterName',
+            align: 'center'
+          },
+          {
+            text: '来电时间',
+            value: 'callTime',
+            width: 160,
+            align: 'center'
+          },
+          {
+            text: '处理状态',
+            value: 'stateName',
+            align: 'center'
+          },
+          {
+            text: '事件内容',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '处理方式',
+            value: 'caseStateName',
+            align: 'center'
+          }
+        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
+        // {
+        //   text: '处理类型',
+        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
+        //   align: 'center'
+        // },
+        // {
+        //   text: '受理人',
+        //   value: 'createUserName',
+        //   // width: 120,
+        //   align: 'center'
+        // },
+        // {
+        //   text: '限办日期',
+        //   value: 'limitedTime',
+        //   width: 160,
+        //   align: 'center'
+        // }
+        ] // 显示列
+      }
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    listLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // total: 0, // 数据总数
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changePage', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseProcess.vue b/src/views/caseManage/caseCommon/caseProcess.vue
new file mode 100644
index 0000000..38a69b6
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcess.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <el-form ref="processForm" :model="processForm" label-width="auto">
+      <el-row>
+        <el-form-item label="下一步处理方式">
+          <el-radio-group v-model="processForm.changeState" @change="selectNextOperation">
+            <el-radio v-for="node in nextNodeList" :key="'_node'+node.id" :label="node.nextState">{{ node.nextOperation }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-row>
+      <el-row >
+        <el-col v-if="showDeptSelect" :span="6">
+          <el-form-item label="处理部门">
+            <el-select v-model="processForm.dispatchDeptId" :loading="deptSelectLoading" placeholder="请选择处理部门" @change="selectDept">
+              <el-option v-for="item in disposalDeptList" :key="item.id" :label="item.simplename" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showUserSelect" :span="6">
+          <el-form-item label="处理人">
+            <el-select v-model="processForm.taskUserId" :loading="userSelectLoading" placeholder="请选择处理人">
+              <el-option v-for="item in normalUserList" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="反馈结果">
+          <el-input v-model="processForm.remarks" type="textarea" maxlength="50" show-word-limit/>
+        </el-form-item>
+      </el-row>
+      <el-row style="text-align: center;">
+        <el-button class="submitBtn" type="primary" @click="onSubmit">提交</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+
+import { getDisposalDeptList, getUserList } from '@/api/callCase'
+import { getNextNodeList, completeCaseTask } from '@/api/process'
+export default {
+  name: 'CaseProcess',
+  components: { DeptSelect },
+  props: {
+    bizId: {
+      type: String,
+      default: ''
+    },
+    processId: {
+      type: String,
+      default: ''
+    },
+    caseState: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      processForm: { // 流程处理表单
+        bizId: '', // 事件id（主键id）
+        processId: '', // 流程ID
+        currState: '', // 当前处理状态
+        changeState: '', // 待变更状态
+        remarks: '', // 备注
+        dispatchDeptId: '', // 指派任务给某个组织机构
+        taskUserId: '' // 任务指派人员
+      },
+      nextNodeList: [], // 流程节点列表
+      disposalDeptList: [], // 处置部门列表
+      normalUserList: [], // 处置人员列表
+      showDeptSelect: false, // 是否显示处置部门选择框
+      showUserSelect: false, // 是否显示处理人选择框
+      deptSelectLoading: false, // 处置部门选择框加载动画
+      userSelectLoading: false, // 处理人选择框加载动画
+      userQuery: {
+        deptid: '', // 部门id （默认为当前用户部门）
+        hasMine: '0', // 是否包含本人，1包含, 0不包含
+        roleTips: '' // 角色标识，这里默认noraml
+      }
+      // TODO loading: 整个页面加载， 人员下拉框加载
+    }
+  },
+  mounted() {
+    this.processForm.bizId = this.bizId
+    this.processForm.processId = this.processId
+    this.processForm.currState = this.caseState
+    this.fetchNextNodeList()
+    this.fetchDisposalDeptList()
+  },
+  methods: {
+    fetchNextNodeList() {
+      getNextNodeList(this.processForm.currState).then(response => {
+        this.nextNodeList = response.data
+      })
+    },
+    fetchDisposalDeptList() {
+      this.deptSelectLoading = true
+      getDisposalDeptList().then(response => {
+        this.disposalDeptList = response.data
+        this.deptSelectLoading = false
+      })
+    },
+    fetchNormalUserList() {
+      this.userSelectLoading = true
+      getUserList(this.userQuery).then(response => {
+        this.normalUserList = response.data
+        this.userSelectLoading = false
+      })
+    },
+    selectDept(val) {
+      this.normalUserList = []
+      this.processForm.taskUserId = ''
+      if (val) {
+        this.userQuery.deptid = val
+        this.fetchNormalUserList()
+      }
+    },
+    /**
+     * 选择处理方式之后：
+     * 如果下一步是交办，选择人员和部门（单选）
+     * 否则，隐藏人员和部门，同时清除processForm中的人员信息
+     * TODO： 会签的特殊处理
+     */
+    selectNextOperation(changeState) {
+      if (changeState === 2) {
+        this.showDeptSelect = true
+        this.showUserSelect = true
+      } else {
+        this.showDeptSelect = false
+        this.showUserSelect = false
+        this.processForm.dispatchDeptId = ''
+        this.processForm.taskUserId = ''
+      }
+    },
+    // 提交
+    onSubmit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.validProcessForm()
+        if (!isBuild) {
+          return
+        }
+        this.$emit('loading')
+        completeCaseTask(this.processForm).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            this.$emit('submitSuccess')
+          } else {
+            this.$emit('submitError')
+          }
+        }).catch((res) => {
+          this.$emit('submitError')
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    },
+    validProcessForm() {
+      if (!this.processForm.changeState) {
+        this.$message.error('处理方式不能为空')
+        return false
+      }
+      if (!this.processForm.changeState === 2) {
+        if (!this.processForm.dispatchDeptId) {
+          this.$message.error('处理部门不能为空')
+          return false
+        }
+        if (!this.processForm.taskUserId) {
+          this.$message.error('处理人不能为空')
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-select {
+  width: 200px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseRecord.vue b/src/views/caseManage/caseCommon/caseRecord.vue
new file mode 100644
index 0000000..6f03a43
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseRecord.vue
@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+import { historicalRecords } from '@/api/process'
+export default {
+  name: 'CaseRecord',
+  props: {
+    processId: {
+      type: String,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      processRecordList: [],
+      processRecordColumns: [
+        {
+          text: '处理操作',
+          value: 'operationTypeName',
+          align: 'center'
+        },
+        {
+          text: '执行部门',
+          value: 'deptName',
+          align: 'center'
+        },
+        {
+          text: '执行人',
+          value: 'userName',
+          align: 'center'
+        },
+        {
+          text: '处理时间',
+          value: 'time',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        }
+      ],
+      processRecordLoading: false
+    }
+  },
+  mounted() {
+    this.fetchProcessRecords()
+  },
+  methods: {
+    fetchProcessRecords() {
+      this.processRecordLoading = true
+      historicalRecords(this.processId).then(res => {
+        this.processRecordList = res.data
+        this.processRecordLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-title{
+  background-color:rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header{
+    line-height:46px;
+    color: #606266;
+    font-size: 15px;
+    i{
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.record{
+  margin-bottom: 40px;
+}
+</style>
diff --git a/src/views/caseManage/caseCommon/caseSearch.vue b/src/views/caseManage/caseCommon/caseSearch.vue
new file mode 100644
index 0000000..4c7cfdb
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="search" @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.reporterName" 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>
+    <!--高级检索-->
+    <div slot="searchMore">
+      <search-item>
+        <el-select v-model="listQuery.caseState" placeholder="处理方式" clearable>
+          <el-option v-for="item in caseStateList" :key="'caseState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.state" placeholder="处理状态" clearable>
+          <el-option v-for="item in processStateList" :key="'processState_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.isDelay" placeholder="事件状态" clearable>
+          <el-option label="超期未办" value="1"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" placeholder="事件来源" clearable>
+          <el-option v-for="item in caseSourceList" :key="'caseSource_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseLevel" placeholder="紧急程度" clearable>
+          <el-option v-for="item in caseLevelList" :key="'caseLevel_'+item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </div>
+  </search-area>
+</template>
+
+<script>
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import { getCaseState, getProcessState, getCaseSource, getCaseLevel } from '@/api/allDict'
+export default {
+  name: 'CaseSearch',
+  components: { SearchItem, SearchArea },
+  props: {
+    listQuery: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      timeRange: [], // 时间范围
+      caseStateList: [],
+      caseSourceList: [],
+      processStateList: [],
+      caseLevelList: []
+    }
+  },
+  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 = ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchCaseStateList()
+    this.fetchCaseSourceList()
+    this.fetchProcessStateList()
+    this.fetchCaseLevelList()
+  },
+  methods: {
+    fetchCaseStateList() {
+      getCaseState().then(response => {
+        this.caseStateList = response.data
+      })
+    },
+    fetchProcessStateList() {
+      getProcessState().then(repsonse => {
+        this.processStateList = repsonse.data
+      })
+    },
+    fetchCaseSourceList() {
+      getCaseSource().then(response => {
+        this.caseSourceList = response.data
+      })
+    },
+    fetchCaseLevelList() {
+      getCaseLevel().then(response => {
+        this.caseLevelList = response.data
+      })
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
+    },
+    search() {
+      this.$emit('search', this.listQuery)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 9a53658..2207aff 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -1,12 +1,110 @@
 <!--事件详情-->
-<template/>
+<template>
+  <div v-loading="wholeLoading" class="app-container">
+    <!-- 基础信息表单 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+      </el-row>
+      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
+    </div>
+    <!-- 事件流程处理 -->
+    <div v-if="showProcess&&caseDetail.id">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+      </el-row>
+      <case-process
+        ref="caseProcess"
+        :biz-id="caseDetail.id"
+        :process-id="caseDetail.processId"
+        :case-state="caseDetail.caseState"
+        @loading="loading"
+        @submitSuccess="submitSuccess"
+        @submitError="submitError"
+      />
+    </div>
+    <!-- 事件处理记录 -->
+    <div v-if="caseDetail.processId">
+      <case-record ref="caseRecord" :process-id="caseDetail.processId"/>
+    </div>
+  </div>
+</template>
 
 <script>
+import CaseFormRead from './caseCommon/caseFormRead'
+import CaseProcess from './caseCommon/caseProcess'
+import CaseRecord from './caseCommon/caseRecord'
+import { caseDetail } from '@/api/callCase'
+
 export default {
-  name: 'CaseDetail'
+  name: 'CaseDetail',
+  components: { CaseFormRead, CaseProcess, CaseRecord },
+  data() {
+    return {
+      id: '',
+      caseDetail: {},
+      showProcess: false,
+      wholeLoading: false
+    }
+  },
+  mounted() {
+    this.id = this.$route.params.id
+    if (this.$route.query.showProcess) {
+      this.showProcess = this.$route.query.showProcess
+    }
+    this.fetchDetail()
+  },
+  methods: {
+    /**
+     * 获取事件详情
+     */
+    fetchDetail() {
+      if (this.id) {
+        this.wholeLoading = true
+        caseDetail(this.id).then(response => {
+          this.caseDetail = response.data
+          this.wholeLoading = false
+        })
+      }
+    },
+    loading() {
+      this.wholeLoading = true
+    },
+    /**
+     * 提交成功之后
+     */
+    submitSuccess() {
+      console.log('submitSuccess')
+      this.$message.success('提交成功')
+      this.showProcess = false
+      this.$route.query.showProcess = false
+      this.wholeLoading = false
+      this.fetchDetail()
+      this.$refs['caseRecord'].fetchProcessRecords()
+    },
+    /**
+     * 提交失败之后
+     */
+    submitError() {
+      console.log('submitError')
+      this.wholeLoading = false
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .title-header{
+      line-height:46px;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
 </style>
diff --git a/src/views/caseManage/completedList.vue b/src/views/caseManage/completedList.vue
new file mode 100644
index 0000000..ff50d06
--- /dev/null
+++ b/src/views/caseManage/completedList.vue
@@ -0,0 +1,82 @@
+ <!-- 已办事件 -->
+<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">
+      <template slot="operations">
+        <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>
+    </case-list-table>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { completedList } from '@/api/callCase'
+
+export default {
+  name: 'CompletedList',
+  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'
+      } // 筛选条件
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    search(listQuery) {
+      console.log('search')
+      this.fetchData()
+    },
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    fetchData() {
+      this.listLoading = true
+      completedList(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
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/searchList.vue b/src/views/caseManage/searchList.vue
new file mode 100644
index 0000000..20f23bb
--- /dev/null
+++ b/src/views/caseManage/searchList.vue
@@ -0,0 +1,82 @@
+ <!-- 事件查询 -->
+<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">
+      <template slot="operations">
+        <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>
+    </case-list-table>
+  </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'
+
+export default {
+  name: 'CompletedList',
+  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'
+      } // 筛选条件
+    }
+  },
+  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
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/waitForHandle.vue b/src/views/caseManage/waitForHandle.vue
index 88312a8..50e32ee 100644
--- a/src/views/caseManage/waitForHandle.vue
+++ b/src/views/caseManage/waitForHandle.vue
@@ -1,155 +1,53 @@
 <!--待办事件-->
 <template>
   <app-container>
-    <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
-      <!--一般查询条件-->
-      <search-item>
-        <el-input v-model.trim="listQuery.name" placeholder="姓名" clearable/>
-      </search-item>
-      <search-item/>
-      <search-item>
-        <el-select v-model="listQuery.sex" placeholder="性别" clearable>
-          <el-option label="男" value="男"/>
-        </el-select>
-      </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>
-      <!--高级检索-->
-      <div slot="searchMore">
-        <search-item>
-          <el-input v-model.trim="listQuery.name" placeholder="姓名" clearable/>
-        </search-item>
-        <search-item/>
-        <search-item>
-          <el-select v-model="listQuery.sex" placeholder="性别" clearable>
-            <el-option label="男" value="男"/>
-          </el-select>
-        </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>
-      </div>
-    </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="btns">
-        <el-button size="small" class="edit_btn">添加</el-button>
-        <el-button size="small" class="edit_btn">修改</el-button>
-        <el-button size="small" class="edit_btn">删除</el-button>
-      </template>
-      <template slot="columns">
-        <el-table-column label="操作" align="center" width="160">
+    <case-search :list-query="listQuery" @search="search"/>
+    <case-list-table :list-query="listQuery" :list="list" :total="total" :list-loading="listLoading" @changePage="changePage">
+      <template slot="operations">
+        <el-table-column label="操作" align="center" width="200">
           <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="edit(scope.row)">编辑</el-button>
-            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+            <el-button type="text" size="small" @click.stop="processCase(scope.row)">任务办理</el-button>
+            <el-button type="text" size="small" @click.stop="applyDelay(scope.row)">申请延期</el-button>
+            <el-button type="text" size="small" @click.stop="applyReport(scope.row)">上报请示</el-button>
           </template>
         </el-table-column>
       </template>
-    </normal-table>
+    </case-list-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 CaseSearch from './caseCommon/caseSearch'
+import CaseListTable from './caseCommon/caseListTable'
+import { workList } from '@/api/callCase'
+
 export default {
-  name: 'TableExample',
-  components: { SearchItem, SearchArea, AppContainer, NormalTable },
+  name: 'WaitForHandle',
+  components: { CaseSearch, CaseListTable, AppContainer },
   data() {
     return {
       listQuery: {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        personTag: '', // 人员标签
-        startTime: '', // 创建开始时间
-        endTime: '', // 创建结束时间
+        caseId: '', // 事件编号
+        title: '', // 事件标题
+        description: '', // 事件内容
+        reporterPhone: '', // 联系方式
+        reporterName: '', // 联系人
+        startTime: '', // 来电开始时间
+        endTime: '', // 来电结束时间
+        caseState: '', // 处理方式
+        state: '', // 处理状态
+        isDelay: '', // 事件状态
+        source: '', // 事件来源
+        caseLevel: '', // 紧急程度
         offset: 1,
         limit: 20,
         sort: 'createTime',
         order: 'desc'
       }, // 筛选条件
-      columns: [
-        {
-          text: '姓名',
-          value: 'name',
-          align: 'center'
-        },
-        {
-          text: '性别',
-          value: 'sexName',
-          align: 'center',
-          width: 60
-        },
-        {
-          text: '民族',
-          value: 'nationName',
-          width: 50,
-          align: 'center'
-        },
-        {
-          text: '采集原因',
-          value: 'collReasonName',
-          align: 'center'
-        },
-        {
-          text: '证件类型',
-          value: 'cardTypeName',
-          align: 'center',
-          width: 80
-        },
-        {
-          text: '证件号码',
-          value: 'idCardNo',
-          align: 'center'
-        },
-        {
-          text: '户籍地址',
-          value: 'residenceAddr',
-          align: 'center'
-        },
-        {
-          text: '创建时间',
-          value: 'createTime',
-          width: 120,
-          align: 'center'
-        }
-      ], // 显示列
-      timeRange: [], // 时间范围
       list: [], // 列表数据
       total: 0, // 数据总数
-      listLoading: true, // 列表加载动画
-      tableOption: {
-        head: {
-          show: false, // 是否需要标题栏，
-          text: '数据列表' // 标题名称
-        },
-        options: {
-          needIndex: false // 是否需要序号列
-        },
-        toolsOption: {
-          selectColumns: false, // 是否需要筛选列
-          refresh: false // 是否需要刷新按钮
-        }
-      } // 表格属性
+      listLoading: true // 列表加载动画
     }
   },
   created() {
@@ -158,39 +56,33 @@
   methods: {
     fetchData() {
       this.listLoading = true
-      const that = this
-      setTimeout(function() {
-        that.list = [
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
-          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
-        ]
-        that.total = 200
-        that.listLoading = false
-      }, 2000)
+      workList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.totalt
+        this.listLoading = false
+      })
     },
-    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-    changePage(val) {
-      if (val && val.size) {
-        this.listQuery.limit = val.size
-      }
-      if (val && val.page) {
-        this.listQuery.offset = val.page
-      }
+    search(listQuery) {
+      console.log('search')
       this.fetchData()
     },
-    // 重置后的操作， 若不需要显示重置按钮则不需要写
-    clearInput() {
-      this.$message.success('clearInput')
-    }
+    changePage(listQuery) {
+      console.log('changePage')
+      this.fetchData()
+    },
+    // 任务办理
+    processCase(row) {
+      this.$router.push({
+        path: '/caseDetail/' + row.id,
+        query: {
+          showProcess: true
+        }
+      })
+    },
+    // 申请延期
+    applyDelay(row) { },
+    // 上报请示
+    applyReport(row) { }
   }
 }
 </script>