预约弹窗相关内容

src/pages/mediation-page/components/LayoutContentNew.vue

@@ -557,10 +557,58 @@
       </div>
       <div class="ml-24 mr-24 btn-group-interval"></div>
       <div class="flex-row justify-content-between align-items-center btn-group-processing-event">
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+
-          <i class="f24 el-icon-video-camera color-4E5969"></i>
+        <el-popover
-          <div class="pl-4 f14">预约</div>
+            placement="top"
-        </div>
+            width="500"
+            @show="popoverShow"
+            v-model="visiblePopover">
+          <div>
+            <div class="flex-row justify-content-between width100 pl-16 pr-16 pt-6 pb-16 bor-E5E6EB">
+              <div class="color-000 f-weight600 f16">视频调解预约</div>
+              <div class="f16 cursor-pointer" @click="visiblePopover = false"><i class="el-icon-close"></i></div>
+            </div>
+            <div class="pl-16 pr-16">
+              <div class="flex-row justify-content-between align-items-center pt-16 pb-16">
+                <div class="flex-row justify-content-between">
+                  <div class="pt-6 pb-6 ml-16 mr-16 cursor-pointer actionVideo">待视频</div>
+                  <div class="pt-6 pb-6 ml-16 mr-16 cursor-pointer">已视频</div>
+                </div>
+                <div class="f14 pt-6 pb-6 pl-16 pr-16 cursor-pointer color-fff bag-BC6F60"
+                     @click="VideoDialog={caseId:caseId}">新增预约</div>
+              </div>
+              <div class="p-16 border-radius-8 border-solid-lighter-1">
+                <el-scrollbar :style="'height: 132px'">
+                  <div class="pb-6 pt-6 bor-E5E6EB" v-for="(item, index) in videoTableData" :key="index">
+                    <div class="flex-row align-items-center">
+                      <div class="mr-8 color-000 f-weight600 f16">{{item.pkgName}} {{item.bookingTime}}</div>
+                      <el-tag size="small">待视频</el-tag>
+                    </div>
+                    <div class="flex-row justify-content-between align-items-center">
+                      <div class="f12">{{item.invitee}}</div>
+                      <div class="flex-row align-items-center">
+                        <div class="f16 mr-8 cursor-pointer"><i class="el-icon-video-camera"></i></div>
+                        <div class="f16 mr-8 cursor-pointer"
+                             @click="VideoEditDialog={id:item.id, bookingTime:item.bookingTime}">
+                          <i class="el-icon-edit-outline"></i>
+                        </div>
+                        <div class="f16 cursor-pointer" @click="handleBackCase(item)">
+                          <i class="el-icon-delete"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </el-scrollbar>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex-row justify-content-between align-items-center cursor-pointer" slot="reference">
+            <i class="f24 el-icon-video-camera color-4E5969"></i>
+            <div class="pl-4 f14">预约</div>
+          </div>
+        </el-popover>
+
         <div class="flex-row justify-content-between align-items-center cursor-pointer">
           <i class="f24 el-icon-document color-4E5969"></i>
           <div class="pl-4 f14">协议</div>
@@ -603,17 +651,22 @@
 
     <!-- 视频预约 -->
     <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
+    <!--  视频预约修改  -->
+    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog"  />
   </div>
 
 </template>
 <script>
 import api from "@/services/caseManagement";
+import eventTracingApi from "@/services/eventTracingApi";
+import videoTelephone from "@/services/videoTelephone";
 export default {
   components: {
     uploadFile: () => import('@/components/uploadFile.vue'),//上传
     RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
     RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
     VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
+    videoReservationEditDialog: () => import('../../event-tracing/components/videoReservationDialog'),//视频预约修改
     caseMaterial: () => import('./caseMaterial'),//
     caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
     contactPerson: () => import('./contactPerson'),//联系人左
@@ -621,7 +674,6 @@ export default {
   },
   data() {
     return {
-      VideoDialog: null,
       eventDialog: {caseId: this.$route.query.caseId},
       leftActive: 1,
       rightActive: 1,
@@ -685,7 +737,12 @@ export default {
         ],
       },
 
-      communicationRecord: ''
+      communicationRecord: '',
+
+      visiblePopover: false,
+      videoTableData: [],
+      VideoDialog: null,
+      VideoEditDialog: null,
     };
   },
   computed: {
@@ -811,6 +868,39 @@ export default {
       this.$router.push('/mediation-management')
     },
 
+    popoverShow() {
+      console.log('popover显示回调！！！')
+      this.getVideoList(1);
+    },
+    // 列表数据
+    getVideoList(val) {
+      let dataJson = {
+        caseNo: '',
+        pkgName: '',
+        size: 99999,
+        current: 1
+      }
+      eventTracingApi.posttrace_video(dataJson).then(res => {
+        if (!res.code) {
+          this.videoTableData = res.records;
+          // this.total = res.total;
+        }
+      })
+    },
+    handleBackCase(row) {
+      this.$confirm("请确定是否取消?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        if(!this.$clickThrottle()) { return }//防止重复点击
+        let data = {id:row.id}
+        videoTelephone.videoTelephoneCancel(data).then((res) => {
+          this.$message.success("取消成功");
+          this.getVideoList()
+        });
+      }).catch(() => {});
+    },
   }
 };
 </script>
@@ -848,6 +938,18 @@ export default {
   }
 }
 
+.actionVideo{
+  color: #BC6F60;
+  border-bottom: 1px solid #BC6F60;
+}
+
+.bag-BC6F60{
+  background-color: #BC6F60;
+}
+.bor-E5E6EB{
+  border-bottom: solid 1px #E5E6EB;
+}
+
 .layout-center-wrap {
   height: 100%;
   font-size: 14px;