弹出框拖拽
This commit is contained in:
parent
f18b24b21a
commit
2a8221d083
119
src/assets/js/directive.js
Normal file
119
src/assets/js/directive.js
Normal file
@ -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);
|
||||
}
|
||||
})
|
||||
@ -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);
|
||||
|
||||
@ -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,
|
||||
|
||||
107
src/pages/mediation-page/components/MediationRecordDialog.vue
Normal file
107
src/pages/mediation-page/components/MediationRecordDialog.vue
Normal file
@ -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>
|
||||
@ -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}`
|
||||
if(item.previewUrl.includes('http')){previewUrl = item.previewUrl}
|
||||
// console.log(previewUrl,'previewUrl')
|
||||
let previewUrl = `/mediate/minio/preview/${item.fullUrl}`
|
||||
if(item.fullUrl.includes('http')){previewUrl = item.fullUrl}
|
||||
this.previewPath = previewUrl
|
||||
this.editPdfFlag = true;
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user