视频预约接口联调及页面内容修改

src/pages/event-tracing/components/videoReservationDialog.vue

@@ -78,6 +78,7 @@ export default {
       this.$refs.ruleFormVideoReservation.validate((valid) => {
         if (valid) {
           videoTelephone.videoTelephoneModify(this.videoReservationObj).then(res => {
+            this.$parent.getList()
             this.handleClose()
             this.$message.success("操作成功");
           })

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

@@ -558,56 +558,10 @@
       <div class="ml-24 mr-24 btn-group-interval"></div>
       <div class="flex-row justify-content-between align-items-center btn-group-processing-event">
 
-        <el-popover
+        <div class="flex-row justify-content-between align-items-center cursor-pointer" @click="visiblePopover={caseId: caseId}">
-            placement="top"
+          <i class="f24 el-icon-video-camera color-4E5969"></i>
-            width="500"
+          <div class="pl-4 f14">预约</div>
-            @show="popoverShow"
+        </div>
-            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>
@@ -649,10 +603,7 @@
       </div>
     </div>
 
-    <!-- 视频预约 -->
+    <caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
-    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
-    <!--  视频预约修改  -->
-    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog"  />
   </div>
 
 </template>
@@ -665,12 +616,11 @@ export default {
     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'),//联系人左
     cassWrit: () => import('./cassWrit'),//
+    caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
   },
   data() {
     return {
@@ -739,10 +689,7 @@ export default {
 
       communicationRecord: '',
 
-      visiblePopover: false,
+      visiblePopover: null,
-      videoTableData: [],
-      VideoDialog: null,
-      VideoEditDialog: null,
     };
   },
   computed: {
@@ -867,40 +814,6 @@ export default {
       // this.$route.query.sourcePage == 'mediationManagement'
       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>
@@ -938,18 +851,6 @@ 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;

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

@@ -9,6 +9,25 @@
                    :rules="rulesClientRule"
                    label-width="130px">
             <el-row :gutter="56">
+              <el-col :span="24">
+                <el-form-item label="预约视频名称" prop="name">
+                  <el-input
+                      v-model="repaymentObj.name"
+                      clearable
+                      placeholder="请输入"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="预约视频内容" prop="content">
+                  <el-input
+                      v-model="repaymentObj.content"
+                      type="textarea"
+                      :rows="2"
+                      placeholder="请输入"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
               <el-col :span="24">
                 <el-form-item label="开始时间" prop="bookingTime">
 <!--                  format="yyyy-MM-dd HH:mm"-->
@@ -181,6 +200,8 @@ export default {
         { label: '其他', value: '其他' }
       ],
       repaymentObj: {
+        name: '',
+        content: '',
         litigants: [], //{name: xx, phone: xx, identity: xx}  当事人
         members: [], //{name: xx, phone: xx, identity: xx}  邀请人
         bookingTime: '',
@@ -188,6 +209,12 @@ export default {
         caseId: '', // 案件ID
       },
       rulesClientRule: {
+        name: [
+          { required: true, message: '请输入', trigger: 'change',},
+        ],
+        content: [
+          { required: true, message: '请输入', trigger: 'change',},
+        ],
         litigants: [
           { type: 'array', required: true, message: '请选择', trigger: 'change' }
         ],
@@ -239,7 +266,7 @@ export default {
           this.repaymentObj.caseId = this.eventDialog.caseId;
           // console.log(resultArr, '---resultArr' , this.repaymentObj)
           videoTelephone.videoTelephoneBooking({...this.repaymentObj, litigants: resultArr}).then(res => {
-            // this.$parent.getDataList(1)
+            this.$parent.getList()
             this.handleClose()
             this.$message.success("预约成功");
           })

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="case-videoReservation-dialog p-16">
+    <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="handleClose"><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"
+               v-for="(item,index) in videoTypeList" :key="index"
+               :class="{ 'actionVideo': item.value === queryCondition.type }"
+               @click="selectType(item.value)">
+            {{item.label}}</div>
+        </div>
+        <div class="f14 pt-6 pb-6 pl-16 pr-16 cursor-pointer color-fff bag-BC6F60"
+             @click="VideoDialog={caseId:visiblePopover.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 mr-8 cursor-pointer" @click="handleBackCase(item)">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <!-- 视频预约 -->
+    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
+    <!--  视频预约修改  -->
+    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog"  />
+  </div>
+</template>
+
+<script>
+import eventTracingApi from "@/services/eventTracingApi";
+import videoTelephone from "@/services/videoTelephone";
+export default {
+  name: "caseVideoReservationDialog",
+  components: {
+    VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
+    videoReservationEditDialog: () => import('../../event-tracing/components/videoReservationDialog'),//视频预约修改
+  },
+  props: {
+    visiblePopover: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return{
+      videoTypeList: [
+        {label: '待视频', value: 0},
+        {label: '已视频', value: 1}
+      ],
+      queryCondition: {
+        type: 0,
+        size: 99999,
+        current: 1,
+      },
+      videoTableData: [],
+      VideoDialog: null,
+      VideoEditDialog: null,
+    }
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visiblePopover', null)
+    },
+    selectType(typeValue) {
+      this.queryCondition.type = typeValue;
+      this.getList()
+    },
+    // 列表数据
+    getList() {
+      let dataJson = {
+        ...this.queryCondition,
+        caseId: this.visiblePopover.caseId
+      }
+      videoTelephone.getListByCaseId(dataJson).then(res => {
+        if (!res.code) {
+          this.videoTableData = res.records;
+          // this.total = res.total;
+        }
+      })
+    },
+    handleBackCase(item) {
+      this.$confirm("请确定是否取消?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        if(!this.$clickThrottle()) { return }//防止重复点击
+        let data = {id:item.id}
+        videoTelephone.videoTelephoneCancel(data).then((res) => {
+          this.$message.success("取消成功");
+          this.getList()
+        });
+      }).catch(() => {});
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.case-videoReservation-dialog{
+  width: 500px;
+  background-color: #FFFFFF;
+  border: 1px solid #f5f5f5;
+  position: absolute;
+  bottom: 86px;
+  left: calc(50% - 432px);
+}
+
+.actionVideo{
+  color: #BC6F60;
+  border-bottom: 1px solid #BC6F60;
+}
+
+.bag-BC6F60{
+  background-color: #BC6F60;
+}
+.bor-E5E6EB{
+  border-bottom: solid 1px #E5E6EB;
+}
+</style>

src/services/videoTelephone.js

@@ -21,7 +21,24 @@ const apiVideoTelephone = {
     // 录像
     // 进入房间回调
     // 停止调解
+    stopMediate: data => {
+        return service.service.post(`${api}stop`, data)
+    },
     // 开始录像
+    startRecord: data => {
+        return service.service.post(`${api}start-record`, data)
+    },
     // 停止录像
+    stopRecord: data => {
+        return service.service.post(`${api}stop-record`, data)
+    },
+    // 获取进入房间的参数
+    getEnterById: data => {
+        return service.service.post(`${api}enterById`, data)
+    },
+    // 获取列表(待视频、已视频)
+    getListByCaseId: data => {
+        return service.service.post(`${api}listByCaseId`, data)
+    },
 }
 export default apiVideoTelephone;