案件列表内容的开发

src/views/caseManagement/caseList.vue

@@ -61,10 +61,12 @@
                 <template slot-scope="scope">
                     <el-button size="mini" @click="eidtNodeprocess(scope.row)" type="text" icon="el-icon-edit">修改</el-button>
                     <el-button size="mini" @click="checkDetail(scope.row)" type="text" icon="el-icon-view">查看详情</el-button>
-                    <el-button size="mini" @click="consultantApplica(scope.row)" type="text"
-                        icon="el-icon-tickets">法律顾问用印申请</el-button>
-                    <el-button size="mini" @click="departmentApplica(scope.row)" type="text"
-                        icon="el-icon-edit-outline">部门长用印申请</el-button>                   
+                    <el-button size="mini" @click="consultantApplica(scope.row)" type="text" icon="el-icon-tickets">法律顾问用印申请</el-button>
+                    <el-button size="mini" @click="departmentApplica(scope.row)" type="text" icon="el-icon-edit-outline">部门长用印申请</el-button>
+                    <el-button size="mini" @click="caseFlow(scope.row)" type="text" icon="el-icon-zoom-in">查看流程</el-button>
+                    <el-button size="mini" @click="caseLog(scope.row)" type="text" icon="el-icon-edit-outline">案件日志</el-button>
+                    <el-button size="mini" @click="caseFiling(scope.row)" type="text" icon="el-icon-tickets">案件归档</el-button>
+                    <el-button size="mini" @click="signMediation(scope.row)" type="text" icon="el-icon-edit-outline">签收调解书</el-button>                 
                 </template>
             </el-table-column>
         </el-table>
@@ -77,6 +79,10 @@
         <caseCompressionPackage :openCompressedPackages="openCompressedPackages" :queryParams="queryParams"
             @cancelCompreess="cancelCompreess" :getList="getList">
         </caseCompressionPackage>
+        <!-- 案件详情 -->
+        <mediationCaseDetails :processVisable="processVisable" @cancelViewProcess="cancelViewProcess"></mediationCaseDetails>
+        <!-- 案件日志 -->
+        <mediationCaseLog :showcaseLog="showcaseLog" @cancelcaseLog="cancelcaseLog"></mediationCaseLog>
     </div>
 </template>
 
@@ -86,12 +92,16 @@ import { listDept } from '@/api/system/dept.js'
 import moment from "moment";
 import addCase from './components/addCase.vue'
 import caseCompressionPackage from './components/caseCompressionPackage.vue';
+import mediationCaseDetails from './components/mediationCaseDetails.vue'
+import mediationCaseLog from './components/mediationCaseLog.vue'
 export default {
     name: "caseList",
     dicts: ["case_flow_node"],
     components: {
         addCase,
-        caseCompressionPackage
+        caseCompressionPackage,
+        mediationCaseDetails,
+        mediationCaseLog
     },
     data() {
         return {
@@ -110,6 +120,8 @@ export default {
             dataList: [],
             addVisable: false,//新增弹窗
             openCompressedPackages:false,//压缩包导入弹窗
+            processVisable:false,//案件详情
+            showcaseLog:false,//案件日志
             caseData: {},
             caseDisabled: false,
             caseTime: '',
@@ -203,6 +215,36 @@ export default {
         // 部门长用印申请
         departmentApplica(){
             
+        },
+        //案件流程
+        caseFlow(row){
+           this.processVisable = true 
+        },
+        cancelViewProcess(){
+            this.processVisable = false
+        },
+        //案件日志
+        caseLog(){
+           this.showcaseLog = true 
+        },
+        cancelcaseLog(){
+            this.showcaseLog = false
+        },
+        // 案件归档
+        caseFiling(){
+           this.$modal.confirm("你确定要案件归档吗？").then((res) => {
+                     
+                }).catch(() =>{
+                    
+            }) 
+        },
+        //签收调解书
+        signMediation(){
+            this.$modal.confirm("你确定要签收调解书吗？").then((res) => {
+                     
+                }).catch(() =>{
+                    
+            })  
         }
     },
 };

src/views/caseManagement/components/mediationCaseDetails.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <el-dialog title="案件流程" :visible="processVisable" @close="cancel" center :distroy-on-close="true">
+            <div>
+                <!-- <el-steps class="steps" :active="caseStatus">
+                    <el-step :title="item.caseNodeName || item.content" v-for="(item,index) in pageData.allCasenode" :key="index" :description="(item.createNickName || '') + (item.caseNodeTime || '')+(item.nextRoleName || '')"></el-step>
+                   
+                </el-steps> -->
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import {selectCaseProgress} from '@/api/caseManagement/caseManagement'
+export default {
+    props: ["processVisable","processData"],
+    data() {
+        return {
+            processId:null,
+            pageData:{},
+            caseStatus:0
+        };
+    },
+    watch: {
+        processVisable(val){
+            if(val){
+                // this.processId = this.processData.id;
+                // this.selectCaseProgressFn({id:this.processId});
+            }
+        }
+    },
+    methods: {
+        cancel() {
+            this.$emit("cancelViewProcess");
+        },
+        selectCaseProgressFn(data){
+            selectCaseProgress(data).then(res=>{
+                 this.pageData = res.data.data; 
+                let allCasenode = res.data.data.allCasenode;
+                console.log(allCasenode)
+                allCasenode.forEach((item,index) => {
+                    if(item.caseNode==res.data.data.caseStatus){
+                        this.caseStatus = index
+                    }
+                });
+            })
+        }
+    },
+};
+</script>
+  
+<style lang="scss" scoped>
+    .steps{
+        display: flex;
+        flex-wrap: wrap;
+    }
+    ::v-deep .el-step{
+        // width: 150px;
+        flex-basis:25% !important;
+        margin-right: 20px;
+        margin-bottom: 20px;
+    }
+    ::v-deep .el-dialog__body {
+    height: 500px !important;
+    overflow: auto !important;
+    }
+    ::v-deep .el-dialog {
+    width: 800px;
+    background: #ffffff;
+    border-radius: 20px;
+    }
+</style>

src/views/caseManagement/components/mediationCaseLog.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-dialog
+      title="案件日志"
+      :visible="showcaseLog"
+      @close="cancel"
+      center
+      :distroy-on-close="true"
+    >
+      <!-- <div class="loading" v-if="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-else>
+        <div class="noData" v-if="noData">暂无数据！</div>
+        <el-timeline v-else>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="(index + 1).toString()"
+            placement="top"
+          >
+            <p>{{ activity.content }}</p>
+          </el-timeline-item>
+        </el-timeline>
+      </div> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel" class="endbutton1"
+          ><span>取 消</span></el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["showcaseLog", "flagLoading", "caselogDataArr"],
+  data() {
+    return {
+      reverse: true,
+      activities: [],
+      noData: false,
+    };
+  },
+  watch: {
+    caselogDataArr: {
+      handler(val) {
+        if (val && val.length > 0) {
+          this.noData = false;
+          this.activities = val;
+          this.activities.forEach((item) => {
+            item.content = item.content;
+          });
+        } else {
+          this.noData = true;
+        }
+      },
+    },
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancelcaseLog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 500px !important;
+  overflow: auto !important;
+}
+::v-deep .el-dialog {
+  width: 800px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.endbutton1 {
+  width: 154px;
+  height: 37px;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-radius: 19px;
+  span {
+    width: 31px;
+    height: 13px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #959595;
+  }
+}
+.loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-icon-loading {
+    font-size: 50px;
+  }
+}
+.noData {
+  width: 100%;
+  height: 400px;
+  font-size: 30px;
+  font-weight: 700;
+  color: #959595;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>