From 81c887c6724e2c4b3ece3d68dcc631f839dae5dc Mon Sep 17 00:00:00 2001
From: zyn <nn_0223@163.com>
Date: Thu, 16 Nov 2023 16:54:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87=E4=BB=A4-e?=
 =?UTF-8?q?l-dialog=E5=8F=AF=E6=8B=96=E6=8B=BD=E6=8B=89=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/dragDialogWidth/index.js          | 62 ++++++++++++++++++++
 src/components/CustomFormComponents/File.vue |  2 +
 src/main.js                                  |  2 +
 3 files changed, 66 insertions(+)
 create mode 100644 src/common/dragDialogWidth/index.js

diff --git a/src/common/dragDialogWidth/index.js b/src/common/dragDialogWidth/index.js
new file mode 100644
index 000000000..3fb9b4433
--- /dev/null
+++ b/src/common/dragDialogWidth/index.js
@@ -0,0 +1,62 @@
+import Vue from "vue";
+
+const dragDialogWidth = {
+    bind(el, binding, vnode) {
+        const dragDom = el.querySelector('.el-dialog');
+        // 容器初始宽度
+        const initWidth = Number(dragDom.style.width.replace('px', ''));
+
+        // 添加可拖拽对象
+        const lineEl = document.createElement('div');
+        lineEl.style = 'width: 5px; background: inherit; height: 100%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;'
+
+        lineEl.addEventListener('mousedown', (ee) => {
+            // ee 鼠标按下时的事件对象
+            // 拖动时容器初始宽度
+            const initDragDomWidth = Number(dragDom.style.width.replace('px', ''));
+            document.onmousemove = function (e) {
+                // e 鼠标拖动时的事件对象
+                e.preventDefault(); // 移动时禁用默认事件
+                // ee.clientX 鼠标按下时指针距离可视区最左边的距离
+                // e.clientX 鼠标拖动时指针距离可视区最左边的距离
+                // 向右拖动1px，容器宽度需要增加2px，需要*2
+                const x = (e.clientX - ee.clientX) * 2 + initDragDomWidth
+
+                if (e.clientX >= window.innerWidth * 0.9) {
+                    // 鼠标拖动到可视区最右边时，容器宽度为可视区宽度,防止拖出可视区
+                    // window.innerWidth 可视区域宽度
+                    // 当鼠标移动到可视宽度的90%时，鼠标距离最右边为10%，所以容器距离最右边为10%，容器距离左边也为10%，所以需要减去20%
+                    dragDom.style.width = `${window.innerWidth * 0.8}px`;
+                } else if (x <= initWidth) {
+                    // 设置最小宽度
+                    dragDom.style.width = `${initWidth}px`;
+                } else {
+                    dragDom.style.width = `${x}px`;
+                }
+            }
+            document.onmouseup = function (e) {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            }
+        }, false)
+        dragDom.appendChild(lineEl);
+    },
+    update (el, binding, vnode) {
+        Vue.nextTick(() => {
+            // 设置el-upload上传组件拖拽容器宽度
+            const elUploadDom = el.querySelector('.el-upload');
+            const elUploadDraggerDom =  el.querySelector('.el-upload-dragger');
+
+            if (elUploadDom && elUploadDraggerDom) {
+                elUploadDom.style.width = '100%'
+                elUploadDraggerDom.style.width = '100%'
+            }
+        });
+    }
+}
+
+const install = function(Vue) {
+    Vue.directive('dragDialogWidth', dragDialogWidth);
+}
+
+export default install
diff --git a/src/components/CustomFormComponents/File.vue b/src/components/CustomFormComponents/File.vue
index f0488b990..0a2c89bb9 100644
--- a/src/components/CustomFormComponents/File.vue
+++ b/src/components/CustomFormComponents/File.vue
@@ -41,11 +41,13 @@
         </el-button>
       </template>
       <el-dialog
+          v-dragDialogWidth
           width='400px'
           :visible.sync="importModalshowflagtemp"
           :title="processModel && disabled ? '查看已上传的文件' : (title || '导入文件')"
           :footer-hide="true"
           append-to-body
+          :close-on-click-modal="false"
       >
         <el-upload
             class="customer-upload"
diff --git a/src/main.js b/src/main.js
index 0ecb50f39..48bd5fee0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,7 @@ import $axios from '@/common/axios'
 import components from '@/components'
 // 自定义插件
 import common from '@/common'
+import dragDialogWidth from '@/common/dragDialogWidth'
 // 自定义按钮显示指令
 import btnPermission from '@/common/btnPermission' // eslint-disable-line
 import VueI18n from 'vue-i18n' // 国际化
@@ -517,6 +518,7 @@ Vue.config.productionTip = false
 Vue.prototype.$ = $
 Vue.use(ElementUI)
 Vue.use(common)
+Vue.use(dragDialogWidth)
 Vue.use(components)
 Vue.use(VueI18n)
 Vue.use(VueClipboard)