Merge remote-tracking branch 'origin/dev_test' into dev_test

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

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"

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)