diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/work/index.vue b/src/views/coorBusiness/work/index.vue
index b54c59a..a8e970e 100644
--- a/src/views/coorBusiness/work/index.vue
+++ b/src/views/coorBusiness/work/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,12 +35,17 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    console.log('work mounted')
+    this.fetchData()
+  },
   activated() {
+    console.log('work activated')
     this.fetchData()
   },
   methods: {
     async fetchData() {
-      console.log(this.listQuery)
+      console.log('work list', this.listQuery)
       this.listLoading = true
       const res = await workListPage(this.listQuery)
       this.caseList = res.data.rows

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/work/index.vue b/src/views/coorBusiness/work/index.vue
index b54c59a..a8e970e 100644
--- a/src/views/coorBusiness/work/index.vue
+++ b/src/views/coorBusiness/work/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,12 +35,17 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    console.log('work mounted')
+    this.fetchData()
+  },
   activated() {
+    console.log('work activated')
     this.fetchData()
   },
   methods: {
     async fetchData() {
-      console.log(this.listQuery)
+      console.log('work list', this.listQuery)
       this.listLoading = true
       const res = await workListPage(this.listQuery)
       this.caseList = res.data.rows
diff --git a/src/views/seo/components/searchDiv.vue b/src/views/seo/components/searchDiv.vue
index 245722f..4b5ddd7 100644
--- a/src/views/seo/components/searchDiv.vue
+++ b/src/views/seo/components/searchDiv.vue
@@ -1,41 +1,39 @@
 <!--简易搜索框-->
 <template>
   <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.description" clearable placeholder="案卷描述"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-            <el-option
-              v-for="item in caseSourceList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.caseState" clearable placeholder="请选择案卷状态">
-            <el-option
-              v-for="item in caseStateList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="openSearchMore">高级检索</el-button>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>
+    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="search" @clear="clearInput">
+      <search-item>
+        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+          <el-option
+            v-for="item in caseSourceList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
+          <el-option
+            v-for="item in caseStateList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <div slot="searchMore">
+        <search-more/>
+      </div>
+
+    </search-area>
+    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
   </div>
 </template>
 
@@ -99,6 +97,10 @@
     openSearchMore() {
       this.searchMoreShow = true
       this.$refs.searchMore.initDialog(this.searchMoreShow)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
@@ -108,8 +110,8 @@
   .search-div{
     /* padding-top: 50px; */
     /* padding-bottom: -40px; */
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
   }
   .el-form-item {
     margin-bottom: 5px !important;

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/work/index.vue b/src/views/coorBusiness/work/index.vue
index b54c59a..a8e970e 100644
--- a/src/views/coorBusiness/work/index.vue
+++ b/src/views/coorBusiness/work/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,12 +35,17 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    console.log('work mounted')
+    this.fetchData()
+  },
   activated() {
+    console.log('work activated')
     this.fetchData()
   },
   methods: {
     async fetchData() {
-      console.log(this.listQuery)
+      console.log('work list', this.listQuery)
       this.listLoading = true
       const res = await workListPage(this.listQuery)
       this.caseList = res.data.rows
diff --git a/src/views/seo/components/searchDiv.vue b/src/views/seo/components/searchDiv.vue
index 245722f..4b5ddd7 100644
--- a/src/views/seo/components/searchDiv.vue
+++ b/src/views/seo/components/searchDiv.vue
@@ -1,41 +1,39 @@
 <!--简易搜索框-->
 <template>
   <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.description" clearable placeholder="案卷描述"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-            <el-option
-              v-for="item in caseSourceList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.caseState" clearable placeholder="请选择案卷状态">
-            <el-option
-              v-for="item in caseStateList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="openSearchMore">高级检索</el-button>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>
+    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="search" @clear="clearInput">
+      <search-item>
+        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+          <el-option
+            v-for="item in caseSourceList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
+          <el-option
+            v-for="item in caseStateList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <div slot="searchMore">
+        <search-more/>
+      </div>
+
+    </search-area>
+    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
   </div>
 </template>
 
@@ -99,6 +97,10 @@
     openSearchMore() {
       this.searchMoreShow = true
       this.$refs.searchMore.initDialog(this.searchMoreShow)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
@@ -108,8 +110,8 @@
   .search-div{
     /* padding-top: 50px; */
     /* padding-bottom: -40px; */
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
   }
   .el-form-item {
     margin-bottom: 5px !important;
diff --git a/src/views/seo/components/searchMore.vue b/src/views/seo/components/searchMore.vue
index d671314..32da887 100644
--- a/src/views/seo/components/searchMore.vue
+++ b/src/views/seo/components/searchMore.vue
@@ -1,8 +1,6 @@
 <!--高级检索-->
 <template>
-  <el-dialog :visible.sync="dialogFormVisible" class="searchMoreDialog" title="高级检索" append-to-body @close="cancel">
-    <el-scrollbar>
-      <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
+  <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="案卷编号">
@@ -195,14 +193,6 @@
         </el-row>
 
       </el-form>
-
-    </el-scrollbar>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
-      <el-button type="info" icon="el-icon-delete" @click="clearForm">清空</el-button>
-      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/work/index.vue b/src/views/coorBusiness/work/index.vue
index b54c59a..a8e970e 100644
--- a/src/views/coorBusiness/work/index.vue
+++ b/src/views/coorBusiness/work/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,12 +35,17 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    console.log('work mounted')
+    this.fetchData()
+  },
   activated() {
+    console.log('work activated')
     this.fetchData()
   },
   methods: {
     async fetchData() {
-      console.log(this.listQuery)
+      console.log('work list', this.listQuery)
       this.listLoading = true
       const res = await workListPage(this.listQuery)
       this.caseList = res.data.rows
diff --git a/src/views/seo/components/searchDiv.vue b/src/views/seo/components/searchDiv.vue
index 245722f..4b5ddd7 100644
--- a/src/views/seo/components/searchDiv.vue
+++ b/src/views/seo/components/searchDiv.vue
@@ -1,41 +1,39 @@
 <!--简易搜索框-->
 <template>
   <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.description" clearable placeholder="案卷描述"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-            <el-option
-              v-for="item in caseSourceList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.caseState" clearable placeholder="请选择案卷状态">
-            <el-option
-              v-for="item in caseStateList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="openSearchMore">高级检索</el-button>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>
+    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="search" @clear="clearInput">
+      <search-item>
+        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+          <el-option
+            v-for="item in caseSourceList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
+          <el-option
+            v-for="item in caseStateList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <div slot="searchMore">
+        <search-more/>
+      </div>
+
+    </search-area>
+    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
   </div>
 </template>
 
@@ -99,6 +97,10 @@
     openSearchMore() {
       this.searchMoreShow = true
       this.$refs.searchMore.initDialog(this.searchMoreShow)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
@@ -108,8 +110,8 @@
   .search-div{
     /* padding-top: 50px; */
     /* padding-bottom: -40px; */
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
   }
   .el-form-item {
     margin-bottom: 5px !important;
diff --git a/src/views/seo/components/searchMore.vue b/src/views/seo/components/searchMore.vue
index d671314..32da887 100644
--- a/src/views/seo/components/searchMore.vue
+++ b/src/views/seo/components/searchMore.vue
@@ -1,8 +1,6 @@
 <!--高级检索-->
 <template>
-  <el-dialog :visible.sync="dialogFormVisible" class="searchMoreDialog" title="高级检索" append-to-body @close="cancel">
-    <el-scrollbar>
-      <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
+  <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="案卷编号">
@@ -195,14 +193,6 @@
         </el-row>
 
       </el-form>
-
-    </el-scrollbar>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
-      <el-button type="info" icon="el-icon-delete" @click="clearForm">清空</el-button>
-      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script>
diff --git a/src/views/seo/seo.vue b/src/views/seo/seo.vue
index 75ae3eb..e4b344c 100644
--- a/src/views/seo/seo.vue
+++ b/src/views/seo/seo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-div @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="showDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -102,7 +102,11 @@
     },
     // 来自业务查询条件更改后的查询
     searchForm(listQuery) {
+      if (listQuery.specialQuery === '') {
+        listQuery.specialQuery = 0
+      }
       this.listQuery = listQuery
+
       this.fetchData()
     },
     // 查看详情

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index abe9f13..c5e8129 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -430,6 +430,14 @@
       }
     }
   },
+  mounted() {
+    console.log('mounted')
+    this.id = this.$route.query.id
+    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
+    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
+    this.resetData()
+    this.initData()
+  },
   activated() {
     console.log('activated')
     this.id = this.$route.query.id
@@ -490,6 +498,7 @@
       this.commonLanguage = ''
       this.processCompShow = ''
       this.processCompObj = {}
+
       this.$refs['processForm'].resetFields()
     },
     /**
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 8e33af7..6f163ce 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -1,6 +1,6 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
+  <app-container>
     <el-row class="table-title">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
       <el-col :span="12" :offset="6" class="edit_btns">
@@ -165,7 +165,7 @@
     >
       <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue
index 7700c37..82409b4 100644
--- a/src/components/CaseCommon/caseList.vue
+++ b/src/components/CaseCommon/caseList.vue
@@ -1,31 +1,41 @@
 <template>
-  <div>
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">
-        <el-table-column :index="indexMethod" align="center" type="index" />
-        <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        :current-page="listQuery.offset"
-        :page-sizes="[10,20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <normal-table :data="caseList" :query="listQuery" :total="total" :columns="tableColumns" @change="changePage">
+    <template slot="columns">
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="showDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+
+  <!--<div>-->
+  <!--<div class="table-container">-->
+  <!--<el-row class="table-title">-->
+  <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+  <!--</el-row>-->
+  <!--<el-table ref="table" :data="caseList" class="table" border highlight-current-row @row-click="showDetail">-->
+  <!--<el-table-column :index="indexMethod" align="center" type="index" />-->
+  <!--<el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+  <!--<template slot-scope="scope">-->
+  <!--<span :class="column.class">{{ scope.row[column.value] }}</span>-->
+  <!--</template>-->
+  <!--</el-table-column>-->
+  <!--</el-table>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;分页&ndash;&gt;-->
+  <!--<div class="pagination-container">-->
+  <!--<el-pagination-->
+  <!--:current-page="listQuery.offset"-->
+  <!--:page-sizes="[10,20,30,50]"-->
+  <!--:page-size="listQuery.limit"-->
+  <!--:total="total"-->
+  <!--align="center"-->
+  <!--layout="total, sizes, prev, pager, next"-->
+  <!--@size-change="handleSizeChange"-->
+  <!--@current-change="handleCurrentChange"/>-->
+  <!--</div>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +101,7 @@
     }
   },
   methods: {
+
     indexMethod(index) {
       return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
     },
@@ -104,8 +115,19 @@
       this.listQuery.offset = val
       this.$emit('changeQuery', this.listQuery)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.$emit('changeQuery', this.listQuery)
+    },
     showDetail(row, column, event) {
-      this.$refs.table.setCurrentRow(row)
+      console.log('row', row)
+      // this.$refs.table.setCurrentRow(row)
       const tabPane = {
         title: '案卷详情',
         name: 'case' + row.caseid,
@@ -120,40 +142,3 @@
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table-container{
-    margin: 20px;
-    // margin-top: 50px;
-  }
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .table-container >>> td {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
-  }
-
-</style>
diff --git a/src/components/CaseCommon/searchForm.vue b/src/components/CaseCommon/searchForm.vue
index 4347d3a..723d24e 100644
--- a/src/components/CaseCommon/searchForm.vue
+++ b/src/components/CaseCommon/searchForm.vue
@@ -1,64 +1,108 @@
 <template>
-  <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">
-              <el-option
-                v-for="item in caseLevelList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item class="selectForm-container-item">
-            <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-              <el-option
-                v-for="item in caseSourceList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeBegin"
-              popper-class="date-picker"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报开始时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5">
-          <el-form-item class="selectForm-container-item">
-            <el-date-picker
-              v-model="listQuery.createTimeEnd"
-              type="datetime"
-              popper-class="date-picker"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择上报结束时间"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">
-          <el-form-item>
-            <el-button type="primary" @click="search">查询</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" @clear="clearInput">
+    <search-item>
+      <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.caseLevel" size="small" clearable placeholder="请选择案卷等级">
+        <el-option
+          v-for="item in caseLevelList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+        <el-option
+          v-for="item in caseSourceList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeBegin"
+        popper-class="date-picker"
+        type="datetime"
+        size="small"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报开始时间"/>
+    </search-item>
+    <search-item>
+      <el-date-picker
+        v-model="listQuery.createTimeEnd"
+        type="datetime"
+        size="small"
+        popper-class="date-picker"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        placeholder="选择上报结束时间"/>
+    </search-item>
+  </search-area>
+
+  <!--<div class="search-div">-->
+    <!--<el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">-->
+      <!--<el-row>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.caseLevel" clearable placeholder="请选择案卷等级">-->
+              <!--<el-option-->
+                <!--v-for="item in caseLevelList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="4">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">-->
+              <!--<el-option-->
+                <!--v-for="item in caseSourceList"-->
+                <!--:key="item.value"-->
+                <!--:label="item.name"-->
+                <!--:value="item.value"-->
+              <!--/>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeBegin"-->
+              <!--popper-class="date-picker"-->
+              <!--type="datetime"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报开始时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="5">-->
+          <!--<el-form-item class="selectForm-container-item">-->
+            <!--<el-date-picker-->
+              <!--v-model="listQuery.createTimeEnd"-->
+              <!--type="datetime"-->
+              <!--popper-class="date-picker"-->
+              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
+              <!--placeholder="选择上报结束时间"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="2">-->
+          <!--<el-form-item>-->
+            <!--<el-button type="primary" @click="search">查询</el-button>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+    <!--</el-form>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -113,26 +157,30 @@
     search() {
       this.listQuery.offset = 1
       this.$emit('searchForm', this.listQuery)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.search-div{
-  margin-top: 20px;
-  margin-left: 20px;
-}
-.el-form-item {
-  margin-bottom: 0px !important;
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
+<!--.search-div{-->
+  <!--margin-top: 20px;-->
+  <!--margin-left: 20px;-->
+<!--}-->
+<!--.el-form-item {-->
+  <!--margin-bottom: 0px !important;-->
+<!--}-->
+<!--</style>-->
 
-<style rel="stylesheet/scss" lang="scss">
-.date-picker {
-  .el-date-table td {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-  }
-}
-</style>
+<!--<style rel="stylesheet/scss" lang="scss">-->
+<!--.date-picker {-->
+  <!--.el-date-table td {-->
+    <!--padding-top: 0px !important;-->
+    <!--padding-bottom: 0px !important;-->
+  <!--}-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index c7f2a64..7a8cd6b 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -1,184 +1,183 @@
 <template>
-  <div class="main-form">
-    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="举报人" prop="reporterName">
-            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="联系电话" prop="reporterPhone">
-            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="showHistoryList">历史记录</el-button>
-          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="信息来源" prop="source">
-            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
-              <el-option
-                v-for="item in caseSourceOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级" prop="caseLevel">
-            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
-              <el-option
-                v-for="item in caseLevelOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否核实">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+  <app-container>
+    <div class="main-form">
+      <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="auto" size="small">
+        <div class="top-block">
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="举报人" prop="reporterName">
+                <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否回访">
-            <div>
-              <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
-                <el-radio-button label="1">需要</el-radio-button>
-                <el-radio-button label="0">不需要</el-radio-button>
-              </el-radio-group>
+            <div class="form-item">
+              <el-form-item label="联系电话" prop="reporterPhone">
+                <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+              </el-form-item>
             </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
+            <div class="form-item">
+              <el-form-item label="信息来源" prop="source">
+                <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+                  <el-option
+                    v-for="item in caseSourceOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷等级" prop="caseLevel">
+                <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+                  <el-option
+                    v-for="item in caseLevelOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="padding-left: 20px; display: block;">
+              <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
+              <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="所在区县" prop="areaCode">
+                <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+                  <el-option key="361024" label="崇仁县" value="361024"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在街镇" prop="streetCode">
+                <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
+                  <el-option key="361024100" label="巴山镇" value="361024100"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="所在网格" prop="communityName">
+                <el-input v-model="caseForm.communityName" class="el-input--suffix" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="caseForm.componentId !== ''" class="form-item">
+              <el-form-item label="部件编码">
+                <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+              </el-form-item>
+            </div>
+            <div v-if="showVerifyPerson" class="form-item">
+              <el-form-item label="监督员" prop="verifyPersonId">
+                <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+                  <el-option
+                    v-for="item in verifyPersonOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-item">
+              <el-form-item label="案卷类别" prop="eorc">
+                <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+                  <el-option
+                    v-for="item in caseEorCOpts"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷大类" prop="casetypeCode">
+                <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="案卷小类" prop="casetypeDetailCode">
+                <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否核实">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedVerify" size="small" @change="changeNeedVerify()">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="是否回访">
+                <div>
+                  <el-radio-group v-model="caseForm.isNeedRevisit" size="small">
+                    <el-radio-button label="1">需要</el-radio-button>
+                    <el-radio-button label="0">不需要</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+          <div v-if="showCaseTypesTime" class="form-row">
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="立案标准" prop="casetypesTimeId">
+                <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+                  <el-option
+                    v-for="item in caseTypeTimeOpts"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
+              <el-form-item label="处理时限" prop="bzhours">
+                <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+              </el-form-item>
+            </div>
+            <div class="form-item">
+              <el-form-item label="选择部门" prop="deptId">
+                <el-select v-model="caseForm.deptId" filterable placeholder="请选择">
+                  <el-option v-for="item in deptOpts" :key="item.id" :label="item.simplename" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
 
-      <el-row :gutter="20">
+        <div class="sub-block">
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="案卷描述" prop="description">
+              <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+          <div class="form-row" style="display: block;width: 93%;">
+            <el-form-item label="发生地点" prop="fieldintro">
+              <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
+            </el-form-item>
+          </div>
+        </div>
 
-        <el-col :span="6">
-          <el-form-item label="所在区县" prop="areaCode">
-            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
-              <el-option key="361024" label="崇仁县" value="361024"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街镇" prop="streetCode">
-            <el-select v-model="caseForm.streetCode" placeholder="选择所在街镇" value="">
-              <el-option key="361024100" label="巴山镇" value="361024100"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在网格" prop="communityName">
-            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="caseForm.componentId !== ''" :span="6">
-          <el-form-item label="部件编码">
-            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col v-if="showVerifyPerson" :span="6">
-          <el-form-item label="监督员" prop="verifyPersonId">
-            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
-              <el-option
-                v-for="item in verifyPersonOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span style="float: left">{{ item.name }}</span>
-                <span style="float: right; color: #999999; font-size: 13px">{{ item.phone }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷类别" prop="eorc">
-            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
-              <el-option
-                v-for="item in caseEorCOpts"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类" prop="casetypeCode">
-            <el-select v-model="caseForm.casetypeCode" placeholder="选择案卷大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类" prop="casetypeDetailCode">
-            <el-select v-model="caseForm.casetypeDetailCode" placeholder="选择案卷小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row v-if="showCaseTypesTime" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="立案标准" prop="casetypesTimeId">
-            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
-              <el-option
-                v-for="item in caseTypeTimeOpts"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="处理时限" prop="bzhours">
-            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
-            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="案卷描述" prop="description">
-            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-form-item label="发生地点" prop="fieldintro">
-            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" maxlength="50" show-word-limit clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <div class="sub-block">
           <el-form-item label="图片信息" prop="images">
             <el-upload
               ref="upload"
@@ -196,40 +195,39 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
-        </el-col>
-      </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
+              <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
 
-      <el-row :gutter="20">
-        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
-          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
-        </el-col>
-      </el-row>
+      <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+        <div class="imgBox">
+          <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+        </div>
+      </el-dialog>
 
-    </el-form>
+      <el-dialog
+        :visible.sync="mapDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="地图查询"
+        width="80%"
+        append-to-body>
 
-    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
-      <div class="imgBox">
-        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
-      </div>
-    </el-dialog>
+        <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
-    <el-dialog
-      :visible.sync="mapDialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      title="地图查询"
-      width="80%"
-      append-to-body>
+      </el-dialog>
 
-      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
-
-    </el-dialog>
-
-  </div>
+    </div>
+  </app-container>
 </template>
 
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { getDeptList } from '@/api/coorBusiness/case'
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 
@@ -282,7 +280,8 @@
         description: '', // 案件描述
         fieldintro: '', // 位置描述
         verifyPersonId: '', // 核实人员id
-        fileIdVerify: '' // 图片存储的地址
+        fileIdVerify: '', // 图片存储的地址
+        deptId: ''
       }, // 表单
       rules: {
         reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
@@ -310,6 +309,7 @@
       caseDetailTypeOpts: [], // 案卷小类下拉框
       caseTypeTimeOpts: [], // 立案标准下拉框
       verifyPersonOpts: [], // 监督员下拉框
+      deptOpts: [],
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
@@ -354,9 +354,15 @@
     this.initCaseSource()
     this.initCaseLevel()
     this.initCaseEorC()
+    this.initDept()
     this.initVerifyPerson()
   },
   methods: {
+    initDept() {
+      getDeptList().then(response => {
+        this.deptOpts = response.data
+      })
+    },
     initCaseForm: function() {
       this.caseForm.reporterName = ''
       this.caseForm.reporterPhone = ''
@@ -378,6 +384,7 @@
       this.caseForm.eorc = ''
       this.caseForm.casetypeCode = ''
       this.caseForm.casetypeDetailCode = ''
+      this.caseForm.deptId = ''
 
       this.$refs.upload.clearFiles()
     },
@@ -686,8 +693,24 @@
 
 <style lang="scss" scoped>
   .main-form{
-    margin: 20px;
+    //padding: 20px;
   }
+  .form-row{
+    display: flex;
+  }
+  .form-item{
+    display: flex;
+    width: 20%;
+    padding-right: 20px;
+  }
+  .top-block{
+    padding: 20px;
+  }
+  .sub-block {
+    border-top: 12px solid #ebebeb;
+    padding: 20px;
+  }
+
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 0cb2ec2..2898f2f 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -1,140 +1,134 @@
 <!--案卷详情 只读-->
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <table-cell-read :text="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <table-cell-read :text="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <table-cell-read :text="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <table-cell-read :text="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <table-cell-read :text="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <table-cell-read :text="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <table-cell-read :text="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <table-cell-read :text="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <table-cell-read :text="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <table-cell-read :text="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <table-cell-read :text="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <table-cell-read :text="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <table-cell-read :text="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <table-cell-read :text="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <table-cell-read :text="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <table-cell-read :text="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-form-item label="立案标准">
-          <table-cell-read :text="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <table-cell-read :text="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <table-cell-read :text="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container"> -->
-      <!-- <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/> -->
-      <!-- <el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/> -->
-      <!-- </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -146,18 +140,16 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :max-height="250" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+    </div>
+    <div class="detail-block" style="padding: 20px;">
+      <el-table :data="recordList" :max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
-
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -165,7 +157,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -256,18 +248,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
@@ -276,19 +280,6 @@
       margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-  }
   .title{
     margin-left: 38px;
     font-size: 14px;
@@ -299,9 +290,9 @@
   }
 
   .image-container {
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 40px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/coorBusiness/completed/index.vue b/src/views/coorBusiness/completed/index.vue
index a6dfb43..87cd9a1 100644
--- a/src/views/coorBusiness/completed/index.vue
+++ b/src/views/coorBusiness/completed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -58,6 +58,9 @@
       ]
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toCheck/index.vue b/src/views/coorBusiness/toCheck/index.vue
index d415644..cc73d19 100644
--- a/src/views/coorBusiness/toCheck/index.vue
+++ b/src/views/coorBusiness/toCheck/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/toRegister/index.vue b/src/views/coorBusiness/toRegister/index.vue
index 4cf1eea..5bffac2 100644
--- a/src/views/coorBusiness/toRegister/index.vue
+++ b/src/views/coorBusiness/toRegister/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,6 +35,9 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.fetchData()
+  },
   activated() {
     this.fetchData()
   },
diff --git a/src/views/coorBusiness/work/index.vue b/src/views/coorBusiness/work/index.vue
index b54c59a..a8e970e 100644
--- a/src/views/coorBusiness/work/index.vue
+++ b/src/views/coorBusiness/work/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-form :list-query="listQuery" @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -8,7 +8,7 @@
       :list-query="listQuery"
       @changeQuery="changeQuery"
       @addDetail="addDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -35,12 +35,17 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    console.log('work mounted')
+    this.fetchData()
+  },
   activated() {
+    console.log('work activated')
     this.fetchData()
   },
   methods: {
     async fetchData() {
-      console.log(this.listQuery)
+      console.log('work list', this.listQuery)
       this.listLoading = true
       const res = await workListPage(this.listQuery)
       this.caseList = res.data.rows
diff --git a/src/views/seo/components/searchDiv.vue b/src/views/seo/components/searchDiv.vue
index 245722f..4b5ddd7 100644
--- a/src/views/seo/components/searchDiv.vue
+++ b/src/views/seo/components/searchDiv.vue
@@ -1,41 +1,39 @@
 <!--简易搜索框-->
 <template>
   <div class="search-div">
-    <el-form ref="searchForm" :inline="true" :model="listQuery.queryCondition" class="form-container">
-      <el-row>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.caseid" clearable placeholder="案卷编号"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-input v-model="listQuery.description" clearable placeholder="案卷描述"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.source" clearable placeholder="请选择信息来源">
-            <el-option
-              v-for="item in caseSourceList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item">
-          <el-select v-model="listQuery.caseState" clearable placeholder="请选择案卷状态">
-            <el-option
-              v-for="item in caseStateList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="openSearchMore">高级检索</el-button>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>
+    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="search" @clear="clearInput">
+      <search-item>
+        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
+          <el-option
+            v-for="item in caseSourceList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
+          <el-option
+            v-for="item in caseStateList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <div slot="searchMore">
+        <search-more/>
+      </div>
+
+    </search-area>
+    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
   </div>
 </template>
 
@@ -99,6 +97,10 @@
     openSearchMore() {
       this.searchMoreShow = true
       this.$refs.searchMore.initDialog(this.searchMoreShow)
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }
@@ -108,8 +110,8 @@
   .search-div{
     /* padding-top: 50px; */
     /* padding-bottom: -40px; */
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
   }
   .el-form-item {
     margin-bottom: 5px !important;
diff --git a/src/views/seo/components/searchMore.vue b/src/views/seo/components/searchMore.vue
index d671314..32da887 100644
--- a/src/views/seo/components/searchMore.vue
+++ b/src/views/seo/components/searchMore.vue
@@ -1,8 +1,6 @@
 <!--高级检索-->
 <template>
-  <el-dialog :visible.sync="dialogFormVisible" class="searchMoreDialog" title="高级检索" append-to-body @close="cancel">
-    <el-scrollbar>
-      <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
+  <el-form ref="dataForm" :label-position="labelPosition" :model="listQuery" label-width="120px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="案卷编号">
@@ -195,14 +193,6 @@
         </el-row>
 
       </el-form>
-
-    </el-scrollbar>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
-      <el-button type="info" icon="el-icon-delete" @click="clearForm">清空</el-button>
-      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script>
diff --git a/src/views/seo/seo.vue b/src/views/seo/seo.vue
index 75ae3eb..e4b344c 100644
--- a/src/views/seo/seo.vue
+++ b/src/views/seo/seo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <search-div @searchForm="searchForm"/>
     <case-list
       v-loading="listLoading"
@@ -9,7 +9,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="showDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -102,7 +102,11 @@
     },
     // 来自业务查询条件更改后的查询
     searchForm(listQuery) {
+      if (listQuery.specialQuery === '') {
+        listQuery.specialQuery = 0
+      }
       this.listQuery = listQuery
+
       this.fetchData()
     },
     // 查看详情
diff --git a/src/views/supervise/components/searchDiv.vue b/src/views/supervise/components/searchDiv.vue
index 3548713..5dd6220 100644
--- a/src/views/supervise/components/searchDiv.vue
+++ b/src/views/supervise/components/searchDiv.vue
@@ -108,8 +108,8 @@
   .search-div{
     /* padding-top: 50px; */
     /* padding-bottom: -40px; */
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
   }
   .el-form-item {
     margin-bottom: 5px !important;