经典案例管理功能重构

src/views/modules/case/caseinfo.vue

@@ -1,31 +0,0 @@
-<template>
-    <keep-alive include="caseInfoList">
-        <component :is="selectComponent"></component>
-    </keep-alive>
-</template>
-<script>
-import CaseInfoList from './typicalcase'
-import CaseInfoDetailView from './typicalcasedetail'
-import CaseInfoAdd from './typicalcase-add-or-update'
-export default {
-  data () {
-    return {
-      selectComponent: CaseInfoList
-    }
-  },
-  components: {
-    CaseInfoList,
-    CaseInfoDetailView,
-    CaseInfoAdd
-  },
-  methods: {
-    init () {
-      this.selectComponent = CaseInfoList
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/modules/case/issue-detail.vue

@@ -0,0 +1,368 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+               :modal-append-to-body="false"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               width="80%">
+        <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
+            <div class="project-handle">
+                <div class="project-detail">
+                    <div class="project-detail-tip">议题详情</div>
+                    <el-form label-position="right" label-width="120px">
+                        <el-form-item label="议题内容:">
+                            <div>{{dataForm.issueContent}}</div>
+                            <el-image v-for="url in dataForm.images"
+                                      style="width: 100px; height: 100px; margin-right: 10px"
+                                      :key="url"
+                                      :src="url"
+                                      :preview-src-list="previewImgList"
+                                      @click="clickImg(url)">
+                            </el-image>
+                        </el-form-item>
+                        <el-form-item label="所属网格:" prop="ownGrid">
+                            <div>{{dataForm.allDeptNames}}</div>
+                        </el-form-item>
+                        <el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0" label="议题来源:" prop="ownGrid">
+                            <div>{{dataForm.groupName}}</div>
+                        </el-form-item>
+                        <el-form-item v-if="!dataForm.groupName || dataForm.groupName.length == 0" label="议题来源:" prop="ownGrid">
+                            <div>党群议事</div>
+                        </el-form-item>
+                        <el-form-item label="上报时间:">
+                            <div>{{dataForm.distributeTime}}</div>
+                        </el-form-item>
+                        <el-form-item label="上报人:">
+                            <div>{{dataForm.nickName}}</div>
+                        </el-form-item>
+                        <el-form-item label="电话:" prop="mobile">
+                            <div>{{dataForm.mobile}}</div>
+                        </el-form-item>
+                        <el-form-item label="所属类别:" prop="categoryName">
+                            <div>{{dataForm.categoryName}}</div>
+                        </el-form-item>
+                        <el-form-item label="议题态度:">
+                            <span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
+                            <span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
+                            <span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
+                            <span>不支持 {{dataForm.opposeNum}}</span>
+                        </el-form-item>
+                    </el-form>
+                    <div class="container">
+                        <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.address}}</div>
+                        <div id="map"></div>
+                    </div>
+                </div>
+                <div class="project-progress">
+                    <div class="project-progress-tip">处理进展</div>
+                    <el-timeline>
+                        <el-timeline-item
+                                v-for="(item, index) in timeLineList"
+                                :key="item.id"
+                                :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
+                            <div :id="`content${index}`" style="line-height:25px; ">
+                                <div
+                                        :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+                                        v-if="item.type !== 'init'">
+                                    {{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
+                                </div>
+                                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
+                                <div v-if="item.state === 3">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
+                                </div>
+                                <div v-if="item.state !== 3">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
+                                </div>
+                                <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">吹哨部门：</span> </div>
+                                    <div>
+                              <span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
+                              {{ csDept.deptName }}<br/>
+                            </span>
+                                    </div>
+                                </div>
+                                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span>  {{item.advice}}</div>
+                                <div style="display: flex;">
+                                    <el-image v-for="url in item.images"
+                                              style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
+                                              :key="url"
+                                              :src="url"
+                                              :preview-src-list="previewImgList"
+                                              alt="处理图片"
+                                              @click="clickImg(url)">
+                                    </el-image>
+                                </div>
+                            </div>
+
+                        </el-timeline-item>
+                    </el-timeline>
+                </div>
+                <div style="width: 100%; text-align:center; float:left;">
+                    <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
+                </div>
+            </div>
+        </el-form>
+    </el-dialog>
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+    data () {
+        return {
+            map: '',
+            visible: false,
+            dataForm: {
+                id: '',
+                nickName: '',
+                distributeTime: '',
+                issueContent: '',
+                handleProgressResultDTOS: [],
+                issueProgressResultDTOS: [],
+                images: []
+            },
+            previewImgList: [],
+            order: '',
+            orderField: '',
+            pageIndex: 1,
+            limitVal: 10,
+            total: 0,
+            commentsDTOs: [],
+            timeLineList: []
+        }
+    },
+    filters: {
+        formatState (item) {
+            if (item.type === 'project') {
+                if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
+                    return '吹哨'
+                } else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
+                    return '回应'
+                } else if (item.state === 5) {
+                    return '关闭'
+                } else if (item.state === 10) {
+                    return '结案'
+                } else if (item.state === 15) {
+                    return '上报网格化平台'
+                } else if (item.state === 20) {
+                    return '网格化平台-受理'
+                } else if (item.state === 25) {
+                    return '网格化平台-立案'
+                } else if (item.state === 30) {
+                    return '网格化平台-派遣'
+                } else if (item.state === 35) {
+                    return '网格化平台-中间再派'
+                } else if (item.state === 40) {
+                    return '网格化平台-接单'
+                } else if (item.state === 45) {
+                    return '网格化平台-处理'
+                } else if (item.state === 50) {
+                    return '网格化平台-中间督办'
+                } else if (item.state === 55) {
+                    return '网格化平台-催办'
+                } else if (item.state === 60) {
+                    return '网格化平台-结案'
+                }
+            } else if (item.type === 'issue' || item.type === 'init') {
+                if (item.state === 0) {
+                    return '审核通过'
+                } else if (item.state === 1) {
+                    return '回应'
+                } else if (item.state === 2) {
+                    return '关闭'
+                } else if (item.state === 3) {
+                    return '转议题'
+                }
+            } else if (item.type === 'issue-project') {
+                return '转项目'
+            }
+        }
+    },
+    methods: {
+        back () {
+            this.visible = false
+        },
+        initBmap (latitude, longitude) {
+            this.map = new BMap.Map('map')
+            const point = new BMap.Point(longitude, latitude)
+            var marker = new BMap.Marker(point)
+            this.map.addOverlay(marker)
+            this.map.centerAndZoom(point, 13)
+            this.map.enableScrollWheelZoom(true)
+        },
+        init (id) {
+            this.visible = true
+            this.dataForm.id = id
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+                if (this.dataForm.id) {
+                    this.getInfo()
+                }
+            })
+        },
+        clickImg (url) {
+            this.previewImgList = []
+            this.previewImgList.push(url)
+        },
+        getInfo () {
+            this.$http.get(`/events/issue/issueContentDetail/${this.dataForm.id}`).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.dataForm = {
+                    ...this.dataForm,
+                    ...res.data
+                }
+                this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
+                    if (index === arr.length - 1) {
+                        item.type = 'issue-project'
+                    } else {
+                        item.type = 'project'
+                    }
+                })
+                this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
+                    if (index === arr.length - 1) {
+                        item.type = 'init'
+                    } else {
+                        item.type = 'issue'
+                    }
+                })
+                this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
+                this.$nextTick(() => {
+                    this.timeLineList.forEach((item, index) => {
+                        const oDiv = document.getElementById(`content${index}`)
+                        const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
+                        if (item.type === 'issue' || item.type === 'issue-project') {
+                            oBorder.style.borderLeft = '1px solid #ffa546'
+                        } else if (item.type === 'project') {
+                            oBorder.style.borderLeft = '1px solid #009688'
+                        }
+                    })
+                })
+                this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
+            }).catch(() => {})
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+            width: 79%;
+            height: 80%;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            padding: 10px;
+            padding-top: 20px;
+            float:left;
+            margin-bottom: 1%;
+            position:relative;
+            .project-detail-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #4ac38b;
+                text-align:center;
+            }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #fff;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 80%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            position: relative;
+            padding-top: 40px;
+            .project-progress-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #0098ff;
+                text-align:center;
+            }
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            width: 79%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+        }
+    }
+</style>

src/views/modules/case/item-detail.vue

@@ -0,0 +1,471 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+             :modal-append-to-body="false"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             width="80%">
+    <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
+      <div class="project-handle">
+        <div style="width: 100%; height: 100%;">
+          <div class="project-detail">
+            <div class="project-detail-tip">议题详情</div>
+
+            <el-form-item label="议题内容:"
+                          prop="eventContent">
+              <div>{{dataForm.itemContent}}</div>
+              <el-image v-for="url in dataForm.images"
+                        style="width: 100px; height: 100px; margin-right: 10px"
+                        :key="url"
+                        :src="url"
+                        :preview-src-list="previewImgList"
+                        @click="clickImg(url)">
+              </el-image>
+            </el-form-item>
+            <el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0"
+                          label="项目来源:"
+                          prop="ownGrid">
+              <div>{{dataForm.groupName}}</div>
+            </el-form-item>
+            <el-form-item label="上报时间:"
+                          prop="distributeTime">
+              <div>{{dataForm.distributeTime}}</div>
+            </el-form-item>
+            <el-form-item label="上报人:"
+                          prop="nickName">
+              <div>{{dataForm.nickName}}</div>
+            </el-form-item>
+            <el-form-item label="电话:"
+                          prop="mobile">
+              <div>{{dataForm.mobile}}</div>
+            </el-form-item>
+            <el-form-item label="所属类别:"
+                          prop="categoryName">
+              <div>{{dataForm.categoryName}}</div>
+            </el-form-item>
+            <el-form-item label="项目态度:">
+              <span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
+              <span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
+              <span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
+              <span>不支持 {{dataForm.opposeNum}}</span>
+            </el-form-item>
+            <div class="container">
+              <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
+              <div id="map"></div>
+            </div>
+          </div>
+          <div class="project-progress">
+            <div class="project-progress-tip">处理进展</div>
+            <el-timeline>
+              <el-timeline-item v-for="(item, index) in timeLineList"
+                                :key="item.id"
+                                :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
+                <div :id="`content${index}`"
+                     style="line-height:25px; ">
+                  <div :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+                       v-if="item.type !== 'init'">
+                    {{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
+                  </div>
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
+                  <div v-if="item.state === 3">
+                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
+                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
+                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
+                  </div>
+                  <div v-if="item.state !== 3">
+                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
+                  </div>
+                  <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0"
+                       style="width: 100%; display: flex;">
+                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门：</span> </div>
+                    <div>
+                  <span v-for="(csDept, index1) in item.itemDeptDTOS"
+                        :key="index1">
+                    {{ csDept.deptName }}<br />
+                  </span>
+                    </div>
+                  </div>
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span> {{item.advice}}</div>
+                  <div style="display: flex;">
+                    <el-image v-for="url in item.images"
+                              style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
+                              :key="url"
+                              :src="url"
+                              :preview-src-list="previewImgList"
+                              alt="处理图片"
+                              @click="clickImg(url)">
+                    </el-image>
+                  </div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+          <el-form-item style="float: right;">
+            <el-button size="small"
+                       style="width: 95px"
+                       @click="back">返回</el-button>
+          </el-form-item>
+        </div>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      map: '',
+      visible: false,
+      dataForm: {
+        id: '',
+        nickName: '',
+        distributeTime: '',
+        itemContent: '',
+        images: [],
+        issueAddress: '',
+        handleProgressResultDTOS: [],
+        issueProgressResultDTOS: [],
+        handleResultDTOS: [],
+        deptResultDTOS: [],
+        evaluateDeptDTOS: [],
+        handleAdvice: '',
+        outHandleAdvice: '',
+        handleCategory: '',
+        issueLatitude: '',
+        issueLongitude: ''
+      },
+      isAble: false,
+      previewImgList: [],
+      deptResult: [],
+      commentsDTOs: [],
+      pageIndex: 0,
+      limitVal: 10,
+      total: null,
+      postDataForm: {
+        id: '',
+        handleAdvice: '',
+        outHandleAdvice: '',
+        handleCategory: '',
+        deptResultDTOS: [],
+        evaluateDeptDTOS: []
+      },
+      deptResultDTOSVisible: false,
+      evaluateDeptDTOSVisible: false,
+      timeLineList: []
+    }
+  },
+  filters: {
+    formatState (item) {
+      if (item.type === 'project') {
+        if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
+          return '吹哨'
+        } else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
+          return '回应'
+        } else if (item.state === 5) {
+          return '关闭'
+        } else if (item.state === 10) {
+          return '结案'
+        } else if (item.state === 15) {
+          return '上报网格化平台'
+        } else if (item.state === 20) {
+          return '网格化平台-受理'
+        } else if (item.state === 25) {
+          return '网格化平台-立案'
+        } else if (item.state === 30) {
+          return '网格化平台-派遣'
+        } else if (item.state === 35) {
+          return '网格化平台-中间再派'
+        } else if (item.state === 40) {
+          return '网格化平台-接单'
+        } else if (item.state === 45) {
+          return '网格化平台-处理'
+        } else if (item.state === 50) {
+          return '网格化平台-中间督办'
+        } else if (item.state === 55) {
+          return '网格化平台-催办'
+        } else if (item.state === 60) {
+          return '网格化平台-结案'
+        }
+      } else if (item.type === 'issue' || item.type === 'init') {
+        if (item.state === 0) {
+          return '审核通过'
+        } else if (item.state === 1) {
+          return '回应'
+        } else if (item.state === 2) {
+          return '关闭'
+        } else if (item.state === 3) {
+          return '转议题'
+        }
+      } else if (item.type === 'issue-project') {
+        return '转项目'
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+      }
+    }
+  },
+  watch: {
+    'postDataForm.handleAdvice': function (val) {
+      this.dataForm.handleAdvice = val
+    },
+    'postDataForm.outHandleAdvice': function (val) {
+      this.dataForm.outHandleAdvice = val
+    },
+    'postDataForm.handleCategory': function (val) {
+      if (val === 1) {
+        this.deptResultDTOSVisible = true
+        this.evaluateDeptDTOSVisible = false
+        for (let index = 0; index < this.dataForm.deptResultDTOS.length; index++) {
+          const deptResultDTO = this.dataForm.deptResultDTOS[index]
+          if (deptResultDTO.selected === true) {
+            // this.postDataForm.deptResultDTOS.push(deptResultDTO)
+          }
+        }
+      } else if (val === 10) {
+        if (this.dataForm.evaluateDeptDTOS.length === 0) {
+          return
+        }
+        this.evaluateDeptDTOSVisible = true
+        this.deptResultDTOSVisible = false
+      } else {
+        this.evaluateDeptDTOSVisible = false
+        this.deptResultDTOSVisible = false
+      }
+    }
+  },
+  methods: {
+    back () {
+      this.visible = false
+    },
+    initBmap (latitude, longitude) {
+      this.map = new BMap.Map('map')
+      const point = new BMap.Point(longitude, latitude)
+      var marker = new BMap.Marker(point)
+      this.map.addOverlay(marker)
+      this.map.centerAndZoom(point, 13)
+      this.map.enableScrollWheelZoom(true)
+    },
+    init (id) {
+      this.visible = true
+      this.dataForm.id = id
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.postDataForm.handleAdvice = ''
+          this.postDataForm.outHandleAdvice = ''
+          this.postDataForm.handleCategory = ''
+          this.postDataForm.deptResultDTOS = []
+          this.postDataForm.evaluateDeptDTOS = []
+          this.getInfo()
+        }
+      })
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/events/item/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'issue-project'
+          } else {
+            item.type = 'project'
+          }
+        })
+        this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'init'
+          } else {
+            item.type = 'issue'
+          }
+        })
+        this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
+        this.$nextTick(() => {
+          this.timeLineList.forEach((item, index) => {
+            const oDiv = document.getElementById(`content${index}`)
+            const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
+            if (item.type === 'issue' || item.type === 'issue-project') {
+              oBorder.style.borderLeft = '1px solid #ffa546'
+            } else if (item.type === 'project') {
+              oBorder.style.borderLeft = '1px solid #009688'
+            }
+          })
+        })
+        this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
+        for (let index = 0; index < res.data.handleResultDTOS.length; index++) {
+          const handleResultDTO = res.data.handleResultDTOS[index]
+          if (handleResultDTO.select === true) {
+            this.dataForm.handleCategory = handleResultDTO.processResult
+          }
+        }
+      }).catch(() => { })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 79%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #aaa;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 40px;
+    overflow-y: auto;
+    position: relative;
+    .project-progress-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #0098ff;
+      text-align: center;
+    }
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 20px;
+    box-sizing: border-box;
+    width: 79%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    overflow-y: auto;
+    position: relative;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/modules/case/topic-detail.vue

@@ -0,0 +1,211 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+               :modal-append-to-body="false"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               width="80%">
+        <div class="project-handle">
+            <div class="project-detail">
+                <div class="project-detail-tip">话题详情</div>
+                <el-form :model="dataForm" ref="dataForm" style="width: 50%; height: 100%;">
+                    <el-form-item label="话题内容:" prop="eventContent">
+                        <div>{{dataForm.topicContent}}</div>
+                        <el-image v-for="url in dataForm.images"
+                                  style="width: 100px; height: 100px; margin-right: 10px"
+                                  :key="url"
+                                  :src="url"
+                                  :preview-src-list="previewImgList"
+                                  @click="clickImg(url)">
+                        </el-image>
+                    </el-form-item>
+                    <el-form-item label="所属网格:" prop="allDeptNames">
+                        <div>{{dataForm.allDeptNames}}</div>
+                    </el-form-item>
+                    <el-form-item label="话题来源:" prop="groupName">
+                        <div>{{dataForm.groupName}}</div>
+                    </el-form-item>
+                    <el-form-item label="发言人:" prop="nickName">
+                        <div>{{dataForm.nickname}}</div>
+                    </el-form-item>
+                </el-form>
+                <div class="container">
+                    <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.topicAddress}}</div>
+                    <div id="map"></div>
+                </div>
+            </div>
+            <div style="width: 100%; text-align:center; float:left;">
+                <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
+            </div>
+        </div>
+    </el-dialog>
+
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+  data () {
+    return {
+      visible: false,
+      innerVisible: false,
+      dataForm: {
+        id: ''
+      },
+      previewImgList: [],
+      order: '',
+      orderField: '',
+      pageIndex: 1,
+      limitVal: 10,
+      total: 0,
+      commentsDTOs: []
+    }
+  },
+  methods: {
+    back () {
+      this.visible = false
+    },
+    initBmap (latitude, longitude) {
+      this.map = new BMap.Map('map')
+      const point = new BMap.Point(longitude, latitude)
+      var marker = new BMap.Marker(point)
+      this.map.addOverlay(marker)
+      this.map.centerAndZoom(point, 13)
+      this.map.enableScrollWheelZoom(true)
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    init (id) {
+      this.visible = true
+      this.dataForm.id = id
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/group/topic/detail/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.initBmap(this.dataForm.topicLatitude, this.dataForm.topicLongitude)
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+          width: 100%;
+          height: 80%;
+          border: 2px solid #ccc;
+          box-sizing: border-box;
+          padding: 10px;
+          padding-top: 20px;
+          float:left;
+          margin-bottom: 1%;
+          position:relative;
+          .project-detail-tip {
+            position: absolute;
+            top: 0;
+            left:0;
+            width: 80px;
+            height: 30px;
+            line-height: 30px;
+            color: #ffffff;
+            background: #4ac38b;
+            text-align:center;
+          }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #fff;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 100%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            width: 79%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+        }
+    }
+</style>

src/views/modules/case/typicalcase-add-or-update.vue

@@ -1,89 +1,102 @@
 <template>
     <el-card shadow="never" class="aui-card--fill">
         <div class="mod-news__typicalcase}">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+            <el-form :inline="true"
-        <el-form-item label="" prop="mainPicture">
+                     :model="dataForm"
-            <el-upload
+                     :rules="dataRule"
-                    :limit="1"
+                     ref="dataForm"
-                    ref="upload1"
+                     :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
-                    class="upload-demo"
+                <el-row>
-                    :on-change="handleChange"
+                    <el-form-item label="banner：" v-loading="loading" prop="mainPicture">
-                    :action="uploadUrl"
+                        <el-upload class="avatar-uploader"
-                    :name="'file'"
+                                   :action="uploadUrl"
-                    :auto-upload="false"
+                                   :show-file-list="false"
-                    :before-upload="beforeAvatarUpload"
+                                   :on-success="handleAvatarActSuccess"
-                    :before-remove="beforeRemove"
+                                   :on-error="handelError"
-                    list-type="picture-card">
+                                   :before-upload="beforeAvatarUpload">
-                <el-button>{{"上传文件"}}</el-button>
+                            <img v-if="dataForm.mainPicture"
-                <div slot="tip" class="" style="width: 272px;font-size: 13px">{{"支持：.jpg/png"}}</div>
+                                 :src="dataForm.mainPicture"
-            </el-upload>
+                                 class="avatar">
-        </el-form-item>
+                            <i v-else
-        <el-form-item label="案例标题" prop="caseTitle" style="width: 40rem;">
+                               class="el-icon-plus avatar-uploader-icon"></i>
-          <el-input v-model="dataForm.caseTitle" placeholder="请输入40字以内" maxlength="40"></el-input>
+                            <div slot="tip"
-        </el-form-item>
+                                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          <el-form-item label="摘要" prop="typicalAbstract" style="width: 40rem;">
+                        </el-upload>
-          <el-input  v-model="dataForm.typicalAbstract" placeholder="文本输入框，限制200字内" maxlength="200"
+                    </el-form-item>
-                     type="textarea" :rows="5"></el-input>
+                </el-row>
-      </el-form-item>
+                <el-row>
-    </el-form>
+                    <el-form-item label="案例标题：" prop="caseTitle">
-<!--            实际案例-->
+                        <el-input v-model="dataForm.caseTitle" type="text"
- <div v-for="(item, index) in dataForm1.dynamicItem" :key="index">
+                                  maxlength="40"
-     <div style="text-align: left">{{"案例"+(index+1)}}</div>
+                                  show-word-limit
-    <el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+                                  placeholder="请输入标题，40字以内"
-        <el-form-item label="案例来源" style="width: 40rem;">
+                                  clearable
-            <el-cascader v-model="item.ids"
+                                  style="width:500px"></el-input>
-                         :options="options"
+                    </el-form-item>
-                         :props="{ checkStrictly: true }"
+                </el-row>
-                         clearable>
+                <el-row>
-            </el-cascader>
+                    <el-form-item label="摘要：" prop="typicalAbstract">
-        </el-form-item>
+                        <el-input  v-model="dataForm.typicalAbstract" placeholder="文本输入框，限制200字内" type="textarea"
-        <el-form-item label="关联案例" style="width: 40rem;">
+                                   style="width:500px"
-            <el-input v-model="item.casename" placeholder="" disabled></el-input>
+                                   maxlength="200"
-            <el-button @click="addOrUpdateHandle(item.ids)">{{"选择案例"}}</el-button>
+                                   clearable></el-input>
-        </el-form-item>
+                    </el-form-item>
-        <el-form-item label="案例类型" style="width: 40rem;">
+                </el-row>
-            <el-input v-model="item.casetype" placeholder="" disabled></el-input>
+                <el-row>
-        </el-form-item>
+                    <div v-for="(item, index) in dataForm.dynamicItem" :key="index">
-        <el-form-item label="内容描述" style="width: 40rem;">
+                        <div style="text-align: left">{{"案例"+(index+1)}}</div>
-            <quill-editor ref="text" v-model="item.content" class="myQuillEditor" :options="editorOption"></quill-editor>
+                        <el-row>
-        </el-form-item>
+                            <el-form-item label="案例来源："
-<!--        <el-form-item prop="actContent"-->
+                                          prop="caseSource">
-<!--                      label="活动内容：">-->
+                                <el-input v-model="item.caseSource"
-<!--            <div style="width:1000px">-->
+                                          disabled="true"
-<!--                &lt;!&ndash; 富文本编辑器, 容器 &ndash;&gt;-->
+                                          type="text"
-<!--                <div id="J_quillEditor" ></div>-->
+                                          clearable
-<!--                &lt;!&ndash; 自定义上传图片功能 (使用element upload组件) &ndash;&gt;-->
+                                          style="width: 40rem;">
-<!--                <el-upload :action="uploadUrl"-->
+                                </el-input>&emsp;
-<!--                           :show-file-list="false"-->
+                                &emsp;
-<!--                           :before-upload="uploadBeforeUploadHandle"-->
+                                <el-button @click="addConnect(index)">{{"选择案例"}}</el-button>
-<!--                           :on-success="uploadSuccessHandle"-->
+                            </el-form-item>
-<!--                           style="display: none;">-->
+                        </el-row>
-<!--                    <el-button ref="uploadBtn"-->
+                        <el-row>
-<!--                               type="primary"-->
+                            <el-form-item label="案例类型："prop="associatedType">
-<!--                               size="small">{{ $t('upload.button') }}</el-button>-->
+                                <el-select v-model="item.associatedType" disabled="true">
-<!--                </el-upload>-->
+                                    <el-option label="议题" value="0"></el-option>
-<!--            </div>-->
+                                    <el-option label="项目" value="1"></el-option>
-<!--        </el-form-item>-->
+                                    <el-option label="话题" value="2"></el-option>
-    </el-form>
+                                </el-select>
- </div>
+                            </el-form-item>
-            <el-form>
+                        </el-row>
+                        <el-row>
+                            <el-form-item label="内容描述：" prop="contentDescription">
+                                <quill-editor ref="text" v-model="item.contentDescription" class="myQuillEditor" :options="editorOption" style="width: 40rem;"></quill-editor>
+                            </el-form-item>
+                        </el-row>
+                    </div>
+                </el-row>
                 <el-form-item>
                     <el-button @click="addItem">{{"添加案例"}}</el-button>
                 </el-form-item>
             </el-form>
-<!--            发布按钮-->
+            <el-form>
-    <el-form>
+                <el-button type="primary" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
-            <el-button type="primary" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
+                <el-button size="small" style="width: 95px" @click="back">返回</el-button>
-     </el-form>
+            </el-form>
-            <add-or-update v-if="addOrUpdateVisible"  ref="addOrUpdate" @refreshDataList="getDataList" v-on:listenTochildEvent="showMessageFromChild"></add-or-update>
+            <el-form>
+                <el-row>
+
+                </el-row>
+            </el-form>
+            <typicalcase-connect-list v-if="connectListVisible"  ref="connectList" @refreshDataList="getDataList"  v-on:connectResponse="connectResponse"></typicalcase-connect-list>
         </div>
     </el-card>
 </template>
 
 <script>
 import debounce from 'lodash/debounce'
-import AddOrUpdate from './typicalcasedialog'
+import TypicalcaseConnectList from './typicalcase-connect-list'
 import { quillEditor } from 'vue-quill-editor'
+import CaseInfoList from './typicalcase-list'
 import Quill from 'quill'
 import Cookies from 'js-cookie'
 import 'quill/dist/quill.core.css'
@@ -95,7 +108,6 @@ export default {
   created () {
     this.addItem()
     this.addItem()
-    this.visible = true
     this.$nextTick(() => {
       // 富文本
       this.hideUpload = false
@@ -110,54 +122,42 @@ export default {
   },
   components: {
     quillEditor,
-    AddOrUpdate
+    TypicalcaseConnectList,
+    CaseInfoList
   },
   data () {
     return {
       fileList: [],
-      visible: false,
+      connectListVisible: false,
       content: '',
+      loading: false,
       editorOption: {},
-      quillEditor: null,
+        // 富文本
-      quillEditorToolbarOptions: [
+        quillEditor: null,
-        ['bold', 'italic', 'underline', 'strike'],
+        quillEditorToolbarOptions: [
-        ['blockquote', 'code-block', 'image'],
+            ['bold', 'italic', 'underline', 'strike'],
-        [{ 'header': 1 }, { 'header': 2 }],
+            ['blockquote', 'code-block', 'image'],
-        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            [{ 'header': 1 }, { 'header': 2 }],
-        [{ 'script': 'sub' }, { 'script': 'super' }],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-        [{ 'indent': '-1' }, { 'indent': '+1' }],
+            [{ 'script': 'sub' }, { 'script': 'super' }],
-        [{ 'direction': 'rtl' }],
+            [{ 'indent': '-1' }, { 'indent': '+1' }],
-        [{ 'size': ['small', false, 'large', 'huge'] }],
+            [{ 'direction': 'rtl' }],
-        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'size': ['small', false, 'large', 'huge'] }],
-        [{ 'color': [] }, { 'background': [] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-        [{ 'font': [] }],
+            [{ 'color': [] }, { 'background': [] }],
-        [{ 'align': [] }],
+            [{ 'font': [] }],
-        ['clean']
+            [{ 'align': [] }],
-      ],
+            ['clean']
-      uploadUrl: '',
+        ],
-      addOrUpdateVisible: false,
+        uploadUrl: '',
       dataForm: {
-        id: '',
         caseTitle: '',
-        caseNumber: '',
+        caseNumber: 0,
-        state: '',
         mainPicture: '',
         typicalAbstract: '',
-        revision: '',
-        delFlag: '',
-        createdBy: '',
-        createdTime: '',
-        updatedBy: '',
-        updatedTime: ''
-      },
-      dataForm1: {
-        number: 0,
-        ids: '',
-        casename: '',
-        casetype: '',
-        content: '',
         dynamicItem: []
-      }
+      },
+        requiredFlag: false
     }
   },
   computed: {
@@ -166,86 +166,96 @@ export default {
         caseTitle: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        caseNumber: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        state: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
         mainPicture: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         typicalAbstract: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        revision: [
+          associatedId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        delFlag: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        createdBy: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        createdTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        updatedBy: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        updatedTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
-    showMessageFromChild (data) {
-      // // eslint-disable-next-line no-undef
-      // item.casename = data.id
-      // // eslint-disable-next-line no-undef
-      // item.casetype = data.type
-      // // eslint-disable-next-line no-undef
-      // item.casename = data.case
-      console.log(data)
-    },
     handleChange (file) {
       this.beforeAvatarUpload(file)
     },
+    back () {
+        this.$parent.selectComponent = 'CaseInfoList'
+        this.$router.push({ path: '/case-typicalcase'})
+    },
+    connectResponse (connectResponse) {
+        // 部门名称
+        this.dataForm.dynamicItem[connectResponse.caseIndex].caseSource = connectResponse.allDeptNames
+        // 案例类别
+        this.dataForm.dynamicItem[connectResponse.caseIndex].associatedType = connectResponse.associatedType
+        // 内容描述
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.issueContent
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.itemContent
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.topicContent
+        }
+        // 类别
+        this.dataForm.dynamicItem[connectResponse.caseIndex].category = connectResponse.categoryName
+        // 案例ID
+        this.dataForm.dynamicItem[connectResponse.caseIndex].associatedId = connectResponse.id
+        // 网格Id
+        this.dataForm.dynamicItem[connectResponse.caseIndex].sourceGridId = connectResponse.gridId
+        //发布人姓名
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickname
+        }
+        // 头像
+        this.dataForm.dynamicItem[connectResponse.caseIndex].publisherHeader = connectResponse.userFace
+        // 内容
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.issueContent
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.itemContent
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.topicContent
+        }
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.createdTime
+        }
 
-    beforeRemove (file, fileList) {
+        this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum
-      console.log(file)
+        this.requiredFlag = true
-      file = null
+        this.dataForm.caseNumber = this.dataForm.caseNumber + 1
-      this.file1 = file
-      this.dataForm.mainPicture = null
-      console.log(file)
-      // this.canUpload = false;
     },
-    // 限制上传类型和大小
+    addConnect(index){
-    beforeAvatarUpload (file) {
+        this.connectListVisible = true
-      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+        this.$nextTick(() => {
-      // alert(testmsg)
+            this.$refs.connectList.init(index)
-      const extension = testmsg === 'png'
+        })
-      const extension2 = testmsg === 'jpg'
-      if (!extension && !extension2) {
-        this.$message.error('请上传jpg或png格式图片')
-        this.$refs.upload1.clearFiles()
-        file = null
-        this.dataForm.mainPicture = null
-      } else {
-        this.dataForm.mainPicture = file.name
-        this.canUpload = true
-      }
-      this.file1 = file
     },
     // 动态添加
     addItem () {
-      this.dataForm1.number++
+      this.dataForm.dynamicItem.push({
-      this.dataForm1.dynamicItem.push({
+          caseSource: '',
-        number: this.dataForm1.number,
+          associatedType: '',
-        ids: '',
+          contentDescription: '',
-        caseid: '',
+          category: '',
-        content: ''
+          associatedId: '',
+          sourceGridId: '',
+          publisherName: '',
+          publisherHeader: '',
+          releaseTime: '',
+          content: '',
+          expressingAttitude: ''
+
       })
     },
 
@@ -293,30 +303,20 @@ export default {
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
-        if (this.dataForm.id) {
-          this.getInfo()
-        }
       })
     },
-    // 获取信息
-    getInfo () {
-      this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
-    },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return false
         }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', this.dataForm).then(({ data: res }) => {
+        if(!this.requiredFlag){
+            alert("请关联案例！")
+            return false
+        }
+
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
           }
@@ -331,7 +331,178 @@ export default {
           })
         }).catch(() => {})
       })
-    }, 1000, { 'leading': true, 'trailing': false })
+    }, 1000, { 'leading': true, 'trailing': false }),
+      handleAvatarActSuccess (res, file) {
+          this.loading = false
+          this.dataForm.mainPicture = res.data.url
+      },
+      beforeAvatarUpload (file) {
+          this.loading = true
+      },
+      handelError () {
+          this.loading = false
+      },
   }
 }
 </script>
+<style>
+    .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+        border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+        .el-textarea {
+            width: 600px !important;
+        }
+        .el-input {
+            width: 600px !important;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+            width: 100%;
+            height: 49%;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            padding: 10px;
+            padding-top: 20px;
+            float:left;
+            margin-bottom: 1%;
+            position:relative;
+            .project-detail-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #4ac38b;
+                text-align:center;
+            }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #ccc;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 100%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            padding-top: 30px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+            position: relative;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+            .handle-operation-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #ff7600;
+                text-align:center;
+            }
+        }
+    }
+</style>

src/views/modules/case/typicalcase-connect-list.vue

@@ -0,0 +1,260 @@
+<template>
+  <el-dialog :visible.sync="visible"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             width="80%"
+             height="80%">
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+    <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="getDataList" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="所属机构">
+            <el-cascader v-model="ids"
+                         :options="options"
+                         :props="{ checkStrictly: true }"
+                         clearable>
+            </el-cascader>
+        </el-form-item>
+        <el-form-item label="案例类型">
+            <el-select v-model="dataForm.associatedType" @change="getDataList">
+                <el-option label="议题" value="0"></el-option>
+                <el-option label="项目" value="1"></el-option>
+                <el-option label="话题" value="2"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="内容检索">
+            <el-input v-model="dataForm.keyword" property="请输入内容" style="width: 20rem;"></el-input>
+            &nbsp;
+            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+    </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" max-height="250"
+                style="width: 100%;">
+          <el-table-column label="单选" width="70">
+              <template slot-scope="scope">
+                  <el-radio v-model="radio" :label="scope.$index+1"
+                            @change.native= selectAction(scope.row)></el-radio>
+              </template>
+          </el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 0" prop="issueContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 1" prop="itemContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 2" prop="topicContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 0" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 1" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 2" prop="nickname" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column prop="createdTime" label="发布时间" header-align="center" align="center" 问题内容style="width: 10%"></el-table-column>
+          <el-table-column prop="commentNum" label="表达态度总数" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+              <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
+              </template>
+          </el-table-column>
+      </el-table>
+       <el-pagination
+               :current-page="page"
+               :page-sizes="[10, 20, 50, 100]"
+               :page-size="limit"
+               :total="total"
+               layout="total, sizes, prev, pager, next, jumper"
+               @size-change="pageSizeChangeHandle"
+               @current-change="pageCurrentChangeHandle">
+       </el-pagination>
+
+    <el-form>
+            <el-button type="primary" @click="getInfo()">{{"确定案例"}}</el-button>
+     </el-form>
+        </div>
+    </el-card>
+      <issue-detail v-if="issueDetailVisible" ref="issueDetails" @refreshDataList="getDataList"></issue-detail>
+      <item-detail v-if="itemDetailVisible" ref="itemDetails" @refreshDataList="getDataList"></item-detail>
+      <topic-detail v-if="topicDetailVisible" ref="topicDetails" @refreshDataList="getDataList"></topic-detail>
+  </el-dialog>
+</template>
+
+<script>
+
+import debounce from 'lodash/debounce'
+import mixinViewModule from '@/mixins/view-module'
+import IssueDetail from './issue-detail'
+import ItemDetail from './item-detail'
+import TopicDetail from './topic-detail'
+export default {
+    mixins: [mixinViewModule],
+    data () {
+        return {
+            mixinViewModuleOptions: {
+                getDataListURL: '/events/issue/page',
+                getDataListIsPage: true
+            },
+            visible: false,
+            radio: 0,
+            issueDetailVisible: false,
+            itemDetailVisible: false,
+            topicDetailVisible: false,
+            dataForm: {
+                streetId: '',
+                communityId: '',
+                gridId: '',
+                caseIndex: '',
+                associatedType: '0',
+                keyword: '',
+                selectedType: '0',
+                selectId: ''
+            },
+            options: [],
+            responseData: []
+        }
+    },
+    created: function () {
+        this.getOptions()
+    },
+    watch: {
+        'ids': function (val) {
+            if (val.length === 0) {
+                this.dataForm.streetId = ''
+                this.dataForm.communityId = ''
+                this.dataForm.gridId = ''
+            }
+            if (val.length === 1) {
+                this.dataForm.streetId = this.ids[0]
+            }
+            if (val.length === 2) {
+                this.dataForm.streetId = this.ids[0]
+                this.dataForm.communityId = this.ids[1]
+            }
+            if (val.length === 3) {
+                this.dataForm.streetId = this.ids[0]
+                this.dataForm.communityId = this.ids[1]
+                this.dataForm.gridId = this.ids[2]
+            }
+        }
+    },
+    methods: {
+        selectAction (item) {
+            this.dataForm.selectId = item.id
+        },
+        getOptions () {
+            this.$http
+                .get(`/sys/user/deptOptions/getByLoginUser`)
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    }
+                    this.options = res.data.options
+                })
+                .catch(() => {})
+        },
+        // 获取数据列表
+        init (index) {
+            this.visible = true
+            this.dataForm.caseIndex = index
+            this.$nextTick(() => {
+                this.getDataList()
+            })
+        },
+        detailHandle (id) {
+            // 议题
+            if (this.dataForm.selectedType == 0) {
+                this.issueDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.issueDetails.init(id)
+                })
+                // 项目
+            } else if (this.dataForm.selectedType == 1) {
+                this.itemDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.itemDetails.init(id)
+                })
+                // 话题
+            } else if (this.dataForm.selectedType == 2) {
+                this.topicDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.topicDetails.init(id)
+                })
+            } else {
+                console.log('未选择类型')
+            }
+        },
+        getDataList () {
+            this.dataListLoading = true
+            if (this.dataForm.associatedType == 0) {
+                // 议题
+                this.dataForm.state = 4
+                this.mixinViewModuleOptions.getDataListURL = '/events/issue/page'
+            } else if (this.dataForm.associatedType == 1) {
+                // 项目
+                this.dataForm.state = ''
+                this.mixinViewModuleOptions.getDataListURL = '/events/item/page'
+            } else if (this.dataForm.associatedType == 2) {
+                this.dataForm.state = ''
+                this.dataForm.orderType = ''
+                // 话题
+                this.mixinViewModuleOptions.getDataListURL = '/group/topic/page'
+            } else {
+                console.log('先选择类型')
+            }
+            this.$http.get(
+                this.mixinViewModuleOptions.getDataListURL,
+                {
+                    params: {
+                        order: this.order,
+                        orderField: this.orderField,
+                        page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+                        limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+                        ...this.dataForm
+                    }
+                }
+            ).then(({ data: res }) => {
+                this.dataListLoading = false
+                this.radio = 0
+                if (res.code !== 0) {
+                    this.dataList = []
+                    this.total = 0
+                    return this.$message.error(res.msg)
+                }
+                this.dataList = res.data.list
+                this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+                this.dataForm.selectedType = this.dataForm.associatedType
+
+            }).catch(() => {
+                this.dataListLoading = false
+            })
+        },
+        getInfo () {
+            if (!this.dataForm.selectId) {
+                alert("未选择！")
+                return
+            }
+            var url = ''
+            if (this.dataForm.selectedType == 0) {
+                url = '/events/issue/issueContentDetail/' + this.dataForm.selectId
+            } else if (this.dataForm.selectedType == 1) {
+                url = '/events/item/' + this.dataForm.selectId
+            } else if (this.dataForm.selectedType == 2) {
+                url = '/group/topic/detail/' + this.dataForm.selectId
+            } else {
+                console.log('未选择类型')
+                return
+            }
+            this.$http.get(url).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.responseData = {
+                    ...this.responseData,
+                    ...res.data
+                }
+                this.responseData.id = this.dataForm.selectId
+                this.responseData.associatedType = this.dataForm.selectedType
+                this.responseData.caseIndex = this.dataForm.caseIndex
+                this.$emit('connectResponse', this.responseData)
+                this.visible = false
+            }).catch(() => {})
+        }
+    },
+    components: {
+        IssueDetail,
+        ItemDetail,
+        TopicDetail
+    }
+}
+</script>

src/views/modules/case/typicalcase-detail.vue

@@ -0,0 +1,120 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+            <el-form :inline="true"
+                     :model="dataForm"
+                     :rules="dataRule"
+                     ref="dataForm"
+                     :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
+                <el-row>
+                    <el-form-item label="banner：" v-loading="loading" prop="headPic">
+                        <img v-if="dataForm.mainPicture"
+                             :src="dataForm.mainPicture"
+                             class="avatar">
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="案例标题："
+                                  prop="caseTitle">
+                        {{dataForm.caseTitle}}
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="摘要："
+                                  prop="typicalAbstract">
+                        {{dataForm.typicalAbstract}}
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div v-for="(item, index) in dataForm.dynamicItem" :key="index">
+                        <div style="text-align: left">{{"案例"+(index+1)}}</div>
+                        <el-row>
+                            <el-form-item label="案例来源："
+                                          prop="caseSource">
+                                {{item.caseSource}}
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item label="案例类型："prop="associatedType">
+                                <el-select v-model="item.associatedType" disabled="true">
+                                    <el-option label="议题" value="0"></el-option>
+                                    <el-option label="项目" value="1"></el-option>
+                                    <el-option label="话题" value="2"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item prop="contentDescription"
+                                          label="内容描述：">
+                                <p v-html="item.contentDescription"></p>
+                            </el-form-item>
+                        </el-row>
+                    </div>
+                </el-row>
+            </el-form>
+            <el-form>
+                <el-button size="small" style="width: 95px" @click="back">返回</el-button>
+            </el-form>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import mixinViewModule from '@/mixins/view-module'
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+export default {
+  mixins: [mixinViewModule],
+  components: {
+    quillEditor
+  },
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/cloudAnalysis/typicalcase/detail' + '/' + this.$route.query.id
+      },
+      dataForm: {
+          id: '',
+          caseTitle: '',
+          caseNumber: 0,
+          mainPicture: '',
+          typicalAbstract: '',
+          dynamicItem: []
+      }
+    }
+  },
+  mounted () {
+      this.dataForm.id = this.$route.query.id
+      this.init()
+  },
+  methods: {
+    back () {
+      this.$parent.selectComponent = 'CaseInfoList'
+      this.$router.push({ path: '/case-typicalcase' })
+    },
+    init () {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/cloudAnalysis/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/modules/case/typicalcase-list.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-news__typicalcase}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item label="案例标题">
+          <el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker v-model="dataForm.startTime" placeholder="" value-format="yyyy-MM-dd 00:00:00" clearable></el-date-picker>
+        </el-form-item>
+        <el-form-item label="至">
+          <el-date-picker v-model="dataForm.endTime" placeholder="" value-format="yyyy-MM-dd 23:59:59" clearable></el-date-picker>
+        </el-form-item>
+        <!--查询按钮-->
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form>
+        <!--添加按钮-->
+        <el-form-item>
+          <el-button type="primary" @click="addHandle()">{{"新增典型案例"}}</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 列表-->
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column label="全选" type="selection"  header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column label="序号" type="index"  header-align="center" align="center" width="150"></el-table-column>
+        <el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="caseNumber" label="优秀案例数" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="UpdateStateOff(scope.row.id)">{{"下架"}}</el-button>
+            <el-button type="text" size="small" @click="UpdateStateOn(scope.row.id)">{{"上架"}}</el-button>
+            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div style="text-align:center">
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      </div>
+<!--      &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
+<!--      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './typicalcase-add-or-update'
+import CaseInfoDetailView from './typicalcase-detail'
+export default {
+  mixins: [mixinViewModule],
+  name: 'CaseInfoList',
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/cloudAnalysis/typicalcase/page',
+        getDataListIsPage: true
+      },
+      dataForm: {
+        caseTitle: '',
+        startTime: '',
+        endTime: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate,
+    CaseInfoDetailView
+  },
+  created: function () {
+    this.getDataList()
+  },
+  methods: {
+    UpdateStateOn (id) {
+      this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id
+      this.getDataList()
+    },
+    UpdateStateOff (id) {
+      this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id
+      this.getDataList()
+    },
+    detailHandle (id) {
+      this.$parent.selectComponent = 'CaseInfoDetailView'
+      this.$router.push({ path: '/case-typicalcase', query: { id: id } })
+    },
+    addHandle () {
+      this.$parent.selectComponent = 'CaseInfoAdd'
+      this.$router.push({ path: '/case-typicalcase' })
+    }
+  }
+}
+</script>

src/views/modules/case/typicalcase.vue

@@ -1,100 +1,31 @@
 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <keep-alive include="caseInfoList">
-    <div class="mod-news__typicalcase}">
+    <component :is="selectComponent"></component>
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+  </keep-alive>
-        <el-form-item label="案例标题">
-          <el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
-        </el-form-item>
-        <el-form-item label="创建时间">
-          <el-date-picker v-model="dataForm.startTime" placeholder="" value-format="yyyy-MM-dd 00:00:00" clearable></el-date-picker>
-        </el-form-item>
-        <el-form-item label="至">
-          <el-date-picker v-model="dataForm.endTime" placeholder="" value-format="yyyy-MM-dd 23:59:59" clearable></el-date-picker>
-        </el-form-item>
-        <!--查询按钮-->
-        <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
-        </el-form-item>
-      </el-form>
-      <el-form>
-        <!--添加按钮-->
-        <el-form-item>
-          <el-button type="primary" @click="addHandle()">{{"新增典型案例"}}</el-button>
-        </el-form-item>
-      </el-form>
-      <!-- 列表-->
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column label="全选" type="selection"  header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column label="序号" type="index"  header-align="center" align="center" width="150"></el-table-column>
-        <el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseNumber" label="优秀案例数" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click="UpdateStateOff(scope.row.id)">{{"下架"}}</el-button>
-            <el-button type="text" size="small" @click="UpdateStateOn(scope.row.id)">{{"上架"}}</el-button>
-            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!--分页-->
-      <div style="text-align:center">
-      <el-pagination
-        :current-page="page"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="limit"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
-      </el-pagination>
-      </div>
-<!--      &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
-<!--      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
-    </div>
-  </el-card>
 </template>
-
 <script>
-import mixinViewModule from '@/mixins/view-module'
+import CaseInfoList from './typicalcase-list'
-import AddOrUpdate from './typicalcase-add-or-update'
+import CaseInfoDetailView from './typicalcase-detail'
+import CaseInfoAdd from './typicalcase-add-or-update'
 export default {
-  mixins: [mixinViewModule],
-  name: 'CaseInfoList',
   data () {
     return {
-      mixinViewModuleOptions: {
+      selectComponent: CaseInfoList
-        getDataListURL: '/cloudAnalysis/typicalcase/page',
-        getDataListIsPage: true
-      },
-      dataForm: {
-        caseTitle: '',
-        startTime: '',
-        endTime: ''
-      }
     }
   },
   components: {
-    AddOrUpdate
+    CaseInfoList,
+    CaseInfoDetailView,
+    CaseInfoAdd
   },
   methods: {
-    UpdateStateOn (id) {
+    init () {
-      this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id
+      this.selectComponent = CaseInfoList
-      this.getDataList()
-    },
-    UpdateStateOff (id) {
-      this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id
-      this.getDataList()
-    },
-    detailHandle (id) {
-      this.$parent.selectComponent = 'CaseInfoDetailView'
-      this.$router.push({ path: '/case-typicalcasedetail', query: { id: id } })
-    },
-    addHandle () {
-      this.$parent.selectComponent = 'CaseInfoAdd'
-      this.$router.push({ path: '/case-typicalcase-add-or-update' })
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/modules/case/typicalcasedetail.vue

@@ -1,239 +0,0 @@
-<template>
-    <el-card shadow="never" class="aui-card--fill">
-        <div class="mod-news__typicalcase}">
-    <el-form :model="dataList" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-        <el-form-item label="" prop="mainPicture">
-            <el-upload disabled
-                    :limit="1"
-                    ref="upload1"
-                    class="upload-demo"
-                    :on-change="handleChange"
-                    action="werwer"
-                    :name="'file'"
-                    :auto-upload="false"
-                    :before-upload="beforeAvatarUpload"
-                    :before-remove="beforeRemove"
-                    list-type="picture-card">
-                <el-button disabled>{{"上传文件"}}</el-button>
-                <div slot="tip" class="" style="width: 272px;font-size: 13px">{{"支持：.jpg/png"}}</div>
-            </el-upload>
-        </el-form-item>
-        <el-form-item label="案例标题" prop="caseTitle" style="width: 40rem;">
-          <el-input disabled v-model="dataList.caseTitle" placeholder="" maxlength="40"></el-input>
-        </el-form-item>
-        <el-form-item label="摘要" prop="typicalAbstract" style="width: 40rem;">
-            <el-input disabled v-model="dataList.typicalAbstract" placeholder="" maxlength="200"
-                      type="textarea" :rows="5"></el-input>
-        </el-form-item>
-        <el-form-item label="时间" prop="createdTime" style="width: 40rem;">
-            <el-input disabled v-model="dataList.createdTime" placeholder="" maxlength="200"></el-input>
-        </el-form-item>
-    </el-form>
-<!--            实际案例-->
- <div v-for="(item, index) in dataList.caseData" :key="index">
-     <div style="text-align: left">{{"案例"+(index+1)}}</div>
-    <el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-        <el-form-item label="案例来源" style="width: 40rem;">
-            <el-input v-model="item.caseSource" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="关联案例" style="width: 40rem;">
-            <el-input v-model="item.associatedType" placeholder="" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="内容描述" style="width: 40rem;">
-            <quill-editor ref="text" v-model="item.contentDescription" class="myQuillEditor" :options="editorOption" disabled=""></quill-editor>
-        </el-form-item>
-    </el-form>
-    </div>
-            <el-form>
-                <el-form-item label-width="200px">
-                    <el-button size="small" style="width: 95px" @click="backToList">返回</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-    </el-card>
-</template>
-
-<script>
-import debounce from 'lodash/debounce'
-import mixinViewModule from '@/mixins/view-module'
-import { quillEditor } from 'vue-quill-editor'
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-export default {
-  mixins: [mixinViewModule],
-  components: {
-    quillEditor
-  },
-  data () {
-    return {
-      mixinViewModuleOptions: {
-        getDataListURL: '/cloudAnalysis/typicalcase/detail' + '/' + this.$route.query.id
-      },
-      fileList: [],
-      visible: false,
-      content: '',
-      editorOption: {},
-      dataForm: {
-        id: '',
-        caseTitle: '',
-        caseNumber: '',
-        state: '',
-        mainPicture: '',
-        typicalAbstract: '',
-        revision: '',
-        delFlag: '',
-        createdBy: '',
-        createdTime: '',
-        updatedBy: '',
-        updatedTime: ''
-      },
-      dataForm1: {
-        number: 0,
-        ids: '',
-        caseid: '',
-        content: '',
-        dynamicItem: []
-      }
-    }
-  },
-  computed: {
-    // dataRule () {
-    //   return {
-    //     caseTitle: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     caseNumber: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     state: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     mainPicture: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     typicalAbstract: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     revision: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     delFlag: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     createdBy: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     createdTime: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     updatedBy: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     updatedTime: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ]
-    //   }
-    // }
-  },
-  methods: {
-    backToList () {
-      this.$parent.selectComponent = 'CaseInfoList'
-      // eslint-disable-next-line standard/object-curly-even-spacing
-      this.$router.push({ path: '/case-typicalcase' })
-    },
-    // handleChange (file) {
-    //   this.beforeAvatarUpload(file)
-    // },
-    //
-    // beforeRemove (file, fileList) {
-    //   console.log(file)
-    //   file = null
-    //   this.file1 = file
-    //   this.dataForm.mainPicture = null
-    //   console.log(file)
-    //   // this.canUpload = false;
-    // },
-    // // 限制上传类型和大小
-    // beforeAvatarUpload (file) {
-    //   var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
-    //   // alert(testmsg)
-    //   const extension = testmsg === 'png'
-    //   const extension2 = testmsg === 'jpg'
-    //   if (!extension && !extension2) {
-    //     this.$message.error('请上传jpg或png格式图片')
-    //     this.$refs.upload1.clearFiles()
-    //     file = null
-    //     this.dataForm.mainPicture = null
-    //   } else {
-    //     this.dataForm.mainPicture = file.name
-    //     this.canUpload = true
-    //   }
-    //   this.file1 = file
-    // },
-    // 动态添加
-    addItem () {
-      this.dataForm1.number++
-      this.dataForm1.dynamicItem.push({
-        number: this.dataForm1.number,
-        ids: '',
-        caseid: '',
-        content: ''
-      })
-    },
-
-    init () {
-      this.visible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
-        if (this.dataForm.id) {
-          this.getInfo()
-        }
-      })
-    },
-    // 获取信息
-    getInfo () {
-      this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-        // this.dataForm1.domains = []
-        // for (var j = 0; j < res.data.caseData.length; j++) {
-        //   var obj = {}
-        //   obj.label = res.data.data[j].label
-        //   obj.prop = res.data.data[j].prop
-        //   obj.value = res.data.data[j].value
-        //   obj.editable = res.data.data[j].editable
-        //   this.dynamicValidateForm.domains.push(obj)
-        // }
-      }).catch(() => {})
-    },
-    // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
-</script>

src/views/modules/case/typicalcasedialog.vue

@@ -1,265 +0,0 @@
-<template>
-  <el-dialog :visible.sync="visible"  :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-card shadow="never" class="aui-card--fill">
-        <div class="mod-news__typicalcase}">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-        <el-form-item label="案例类型">
-            <el-select v-model="dataForm.associatedType">
-                <el-option label="议题" value="0"></el-option>
-                <el-option label="项目" value="1"></el-option>
-                <el-option label="话题" value="2"></el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item label="内容检索">
-            <el-input v-model="dataForm.casecontent" property="请输入内容" style="width: 20rem;"></el-input>
-            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
-        </el-form-item>
-    </el-form>
-            <!-- 列表-->
-      <el-table v-loading="dataListLoading" :data="dataList" max-height="250"
-                style="width: 100%;">
-          <el-table-column label="项目单选" width="65">
-              <template slot-scope="scope">
-                  <el-radio  v-model="tableRadio" :label="scope.row.id"
-                             @change.native= selectAction(scope.row.id,scope.row.issueContent,scope.row.itemContent,scope.row.topicContent)><i></i></el-radio>
-              </template>
-          </el-table-column>
-          <el-table-column label="序号" type="index"  header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column v-if="this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题'" prop="issueContent" label="问题内容" header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column v-if="this.dataForm.associatedType == 1" prop="itemContent" label="问题内容" header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column v-if="this.dataForm.associatedType == 2" prop="topicContent" label="问题内容" header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column prop="nickName" label="问题发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column prop="createdTime" label="发布时间" header-align="center" align="center" style="width: 10%"></el-table-column>
-<!--          <el-table-column prop="caseSource" label="来源网络" header-align="center" align="center" style="width: 10%"></el-table-column>-->
-          <el-table-column prop="commentNum" label="表达态度总数" header-align="center" align="center" style="width: 10%"></el-table-column>
-          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
-              <template slot-scope="scope">
-                  <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
-              </template>
-                </el-table-column>
-            </el-table>
-            <!--  确定关联按钮-->
-    <el-form>
-            <el-button type="primary" @click="Backtypicalcase()">{{"确定案例"}}</el-button>
-     </el-form>
-        </div>
-    </el-card>
-  </el-dialog>
-</template>
-
-<script>
-import debounce from 'lodash/debounce'
-export default {
-  data () {
-    return {
-      // 设置属性
-      mixinViewModuleOptions: {
-        activatedIsNeed: true, // 此页面是否在激活（进入）时，调用查询数据列表接口？
-        getDataListURL: '', // 数据列表接口，API地址
-        getDataListIsPage: false // 数据列表接口，是否需要分页？
-      },
-      // 默认属性
-      dataForm: {
-        associatedType: '议题',
-        casecontent: ''
-      }, // 查询条件
-      dataList: [],
-      // 数据列表
-      order: '', // 排序，asc／desc
-      orderField: '', // 排序，字段
-      page: 1, // 当前页码
-      limit: 10, // 每页数
-      total: 0, // 总条数
-      dataListLoading: false, // 数据列表，loading状态
-      dataListSelections: [], // 数据列表，多选项
-      addOrUpdateVisible: false, // 新增／更新，弹窗visible状态
-      fileList: [],
-      tableRadio: '',
-      visible: false,
-      content: '',
-      currentRow: null,
-      Contentname: '',
-      editorOption: {}
-    }
-  },
-  computed: {
-    dataRule () {
-      return {
-        caseTitle: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        caseNumber: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        state: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        mainPicture: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        typicalAbstract: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        revision: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        delFlag: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        createdBy: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        createdTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        updatedBy: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        updatedTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    selectAction (val, val1, val2, val3) {
-      // 内容
-      if (this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题') {
-        this.Contentname = val1
-      } else if (this.dataForm.associatedType == 1) {
-        this.Contentname = val2
-      } else if (this.dataForm.associatedType == 2) {
-        this.Contentname = val3
-      } else {
-        console.log('未选择类型')
-      }
-    },
-    clickChange (item) {
-      this.tableRadio = item
-    },
-
-    // 获取数据列表
-    getDataList () {
-      this.dataListLoading = true
-      // eslint-disable-next-line no-cond-assign,no-constant-condition
-      // if (this.dataForm.associatedType == '议题') {
-      //   this.dataForm.associatedType = 0
-      // }
-      if (this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题') {
-        // 议题
-        this.dataForm.state = 4
-        this.mixinViewModuleOptions.getDataListURL = '/events/issue/page'
-      } else if (this.dataForm.associatedType == 1) {
-        // 项目
-        this.mixinViewModuleOptions.getDataListURL = '/events/item/page'
-      } else if (this.dataForm.associatedType == 2) {
-        // 话题
-        this.mixinViewModuleOptions.getDataListURL = '/group/topic/page'
-      } else {
-        console.log('先选择类型')
-      }
-      this.$http.get(
-        this.mixinViewModuleOptions.getDataListURL,
-        {
-          params: {
-            order: this.order,
-            orderField: this.orderField,
-            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
-            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
-            ...this.dataForm
-          }
-        }
-      ).then(({ data: res }) => {
-        this.dataListLoading = false
-        if (res.code !== 0) {
-          this.dataList = []
-          this.total = 0
-          return this.$message.error(res.msg)
-        }
-        this.dataList = res.data.list
-        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
-      }).catch(() => {
-        this.dataListLoading = false
-      })
-    },
-
-    init () {
-      this.visible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
-        if (this.dataForm.id) {
-          this.getInfo()
-        }
-      })
-    },
-
-    // 返回类型、案例id和内容
-    Backtypicalcase () {
-      let params = {}
-      params.id = this.tableRadio
-      params.case = this.Contentname
-      if (this.dataForm.associatedType == '议题') {
-        params.type = 0
-      } else {
-        params.type = this.dataForm.associatedType
-      }
-      this.$emit('listenTochildEvent', params)
-      this.visible = false
-    },
-    detailHandle (id) {
-      // 议题
-      // eslint-disable-next-line eqeqeq
-      if (this.dataForm.associatedType == 0) {
-        this.$parent.selectComponent = ''
-        this.$router.push({ path: '/', query: { id: id } })
-        // 项目
-        // eslint-disable-next-line eqeqeq
-      } else if (this.dataForm.associatedType == 1) {
-        this.$parent.selectComponent = ''
-        this.$router.push({ path: '/', query: { id: id } })
-        // 话题
-        // eslint-disable-next-line eqeqeq
-      } else if (this.dataForm.associatedType == 2) {
-        this.$parent.selectComponent = ''
-        this.$router.push({ path: '/', query: { id: id } })
-      } else {
-        console.log('未选择类型')
-      }
-    },
-    // 获取信息
-    getInfo () {
-      this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
-    },
-    // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
-</script>