弹出框拖拽

src/assets/js/directive.js

@@ -0,0 +1,119 @@
+import Vue from 'vue'
+ 
+/**
+ * 新增弹框拖拽功能
+ */
+Vue.directive('drag', {
+    bind: (el) => {
+        // 获取弹框标题区域dom节点
+        const headerDom = el.querySelector('.el-dialog__header');
+        // 修改鼠标图标样式
+        headerDom.style.cursor = "move";
+        // 禁止拖拽时选中标题中文本内容
+        headerDom.style.userSelect = "none";
+ 
+        // 获取弹框区域的dom节点
+        const dialogDom = el.querySelector('.el-dialog__wrapper .el-dialog');
+        console.log(dialogDom,'dialogDom')
+        // 弹窗距离边界的距离
+        const boundingPadding = 1;
+        
+        // 是否正在拖动
+        let isDrag = false;
+ 
+        // 鼠标按下时位置坐标
+        let clientX = 0, clientY = 0;
+ 
+        // 按下时弹框位置坐标
+        let dialogLeft = 0, dialogTop = 0;
+        let newLeft = 0, newTop = 0;
+        let dialogWidth = 0, dialogHeight = 0;
+        let distLeft = 0, distTop = 0;
+ 
+        // 监听鼠标按下事件
+        headerDom.onmousedown = function(e) {
+            isDrag = true;
+ 
+            // 获取当前鼠标位置坐标
+            clientX = e.clientX;
+            clientY = e.clientY;
+            
+            if(dialogDom.style.left == '')
+            {
+                // 未获取到 直接取50%
+                dialogLeft = document.documentElement.clientWidth / 2;
+            }
+            else
+            {
+                // 获取当前弹窗位置坐标
+                dialogLeft = parseFloat(dialogDom.style.left);
+            }
+            if(isNaN(dialogLeft)){
+                dialogLeft = 0;
+            }
+            newLeft = dialogLeft;
+ 
+            if(dialogDom.style.top == '')
+            {
+                // 未获取到 直接取50%
+                dialogTop = document.documentElement.clientHeight / 2;
+            }
+            else
+            {
+                // 获取当前弹窗位置坐标
+                dialogTop = parseFloat(dialogDom.style.top);
+            }
+            if(isNaN(dialogTop)){
+                dialogTop = 0;
+            }
+            newTop = dialogTop;
+ 
+            const dialogBounding = dialogDom.getBoundingClientRect();
+            dialogWidth = dialogBounding.width;
+            dialogHeight = dialogBounding.height;
+            distLeft = dialogLeft - dialogBounding.left;
+            distTop = dialogTop - dialogBounding.top;
+ 
+            // 绑定鼠标移动事件
+            document.addEventListener('mousemove', el.mousemove);
+        }
+ 
+        // 监听鼠标移动事件
+        el.mousemove = function(e) {
+            // 按下的时候，执行移动操作
+            if(isDrag){
+                // 设置弹窗位置以及边界处理
+                newLeft = dialogLeft + e.clientX - clientX;
+                if(newLeft-distLeft<boundingPadding){
+                    newLeft = boundingPadding+distLeft;
+                }else if(newLeft-distLeft>window.innerWidth-boundingPadding-dialogWidth){
+                    newLeft = distLeft + window.innerWidth - boundingPadding - dialogWidth;
+                }
+                dialogDom.style.left = newLeft + 'px';
+ 
+                newTop = dialogTop + e.clientY - clientY;
+                if(newTop-distTop<=boundingPadding){
+                    newTop = boundingPadding + distTop;
+                }else if(newTop-distTop>=window.innerHeight-boundingPadding-dialogHeight){
+                    newTop = distTop + window.innerHeight - boundingPadding - dialogHeight;
+                }
+                dialogDom.style.top = newTop + 'px';
+            }
+        }
+ 
+        // 监听鼠标抬起事件
+        el.mouseup = function(e) {
+            isDrag = false;
+ 
+            // 解绑鼠标移动事件
+            document.removeEventListener('mousemove', el.mousemove);
+        }
+ 
+        // 绑定鼠标抬起事件
+        document.addEventListener('mouseup', el.mouseup);
+    },
+    unbind: (el) => {
+        // 解绑鼠标抬起事件
+        document.removeEventListener('mouseup', el.mouseup);
+    }
+})

src/main.js

@@ -16,6 +16,8 @@ import './assets/style/element-ui-variable.scss'
 // import 'element-ui/lib/theme-chalk/index.css';
 import 'element-ui/lib/theme-chalk/icon.css'
 import {TrydoFiles} from "@trydo/files-utils"
+// 引入全局通用自定义指令
+import '@/assets/js/directive';
 
 
 Vue.use(ElementUI);

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

@@ -453,7 +453,7 @@
               <el-select v-model="communicationRecord" placeholder="请选择">
                 <el-option label="111" value="222"></el-option>
               </el-select>
-              <el-button plain icon="el-icon-plus">新增沟通记录</el-button>
+              <el-button plain icon="el-icon-plus" @click="visiblemediatRecord = true">新增沟通记录</el-button>
             </div>
 
             <el-timeline class="padding-0">
@@ -634,6 +634,7 @@
     </div>
 
     <caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
+    <MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecord.sync="visiblemediatRecord" />
   </div>
 
 </template>
@@ -655,9 +656,11 @@ export default {
     singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
     singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
     singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达
+    MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录
   },
   data() {
     return {
+      visiblemediatRecord:false,
       singledeliveryvisible:false,
       singlesealvisible:false,
       singleofficevisible:false,

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

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-dialog title="新增调解记录" :visible="true"
+      :modal="false" width="500px" append-to-body :close-on-click-modal="false"
+        @close="handleClose" v-drag>
+      <div class="dialog-content dialog-office-batch">
+        <div class="p-16 pr-40">
+          
+
+        </div>
+
+      </div>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose()">取消</el-button>
+          <el-button type="primary" @click="handleSubmit111()">完成</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import caseMaterial from "@/services/caseMaterial";
+export default {
+  components: {
+    uploadFile: () => import('@/components/uploadFile.vue'),//上传
+  },
+  props: {
+    eventDialog: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      materialTypeOptions: [
+        { label: '身份证件', value: 'IDENTITY' },
+        { label: '金融许可证', value: 'FINANCIAL_LICENSES' },
+        { label: '营业执照', value: 'BUSINESS_LICENSES' },
+        { label: '法定代表人身份证明', value: 'IDENTITY_LEGAL' },
+        { label: '起诉状', value: 'COMPLAINTS' },
+        { label: '证据清单', value: 'EVIDENCE' },
+        { label: '合约', value: 'CONTRACTS' },
+        { label: '申领表', value: 'APPLICATION_FORMS' },
+        { label: '交易明细', value: 'TRANSACTION_DETAILS' },
+        { label: '其他证据', value: 'OTHER' },
+      ],
+      repaymentObj: {
+        caseId: '',
+        materialType: '',
+        category: 'EVIDENTIAL',
+        name: '',
+        url: '',
+      },
+      rulesClientRule: {
+        materialType: [
+          {required: true, message: '请选择', trigger: 'change',},
+        ],
+        url: [
+          { required: true, message: '请上传', trigger: 'change',},
+        ],
+      },
+      fileList: [],
+    };
+  },
+  mounted() {
+    // console.log(1231)
+  },
+  methods: {
+    handleUploadFile(fileList){
+      // console.log('获取上传文件信息',fileList)
+      fileList = JSON.parse(JSON.stringify(fileList))
+      this.fileList = fileList.map((item,i) => {
+        return {
+          url: item.url,
+          fileName: item.fileName,
+          previewUrl:item.previewUrl,
+          objectName: item.objectName
+        }
+      })
+      this.repaymentObj.url = this.fileList.length?this.fileList[0].fileName : '';
+      this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
+      // console.log(this.repaymentObj, '---this.repaymentObj', this.fileList)
+    },
+    handleClose() {
+      this.$emit('update:eventDialog', null)
+    },
+    handleSubmit() {
+      if(!this.$clickThrottle()) { return }//防止重复点击
+      this.$refs.ruleFormRepayment.validate((valid) => {
+        if (valid) {
+          this.repaymentObj.caseId = this.eventDialog.caseId;
+          caseMaterial.addCaseFile(this.repaymentObj).then(res => {
+            this.$parent.getFileCaseList()
+            this.handleClose()
+            this.$message.success("操作成功");
+          })
+        }
+      })
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -179,7 +179,7 @@ export default {
         type: "warning",
       }).then(() => {
         if(!this.$clickThrottle()) { return }//防止重复点击
-        let data = {id: item.id}
+        let data = {id: item.generateLogId}
         caseManagement.traceGenerateDelete(data).then((res) => {
           this.$message.success("文书删除成功");
           this.getWritCaseList()
@@ -187,9 +187,8 @@ export default {
       }).catch(() => {});
     },
     async handlePreview(item) {
-      let previewUrl = `/mediate/minio/preview/${item.previewUrl}`
+      let previewUrl = `/mediate/minio/preview/${item.fullUrl}`
-      if(item.previewUrl.includes('http')){previewUrl = item.previewUrl}
+      if(item.fullUrl.includes('http')){previewUrl = item.fullUrl}
-      // console.log(previewUrl,'previewUrl')
       this.previewPath = previewUrl
       this.editPdfFlag = true;
     },