bug修复

src/components/imgPreview/NodeImg.vue

@@ -1,67 +0,0 @@
-<template>
-    <div :class="[ui, mode,filter?'filter-' + filter:'']" :style="[{ width: width }, { height: height }]" class="ui-img-box" @click="_imgClick">
-        <img :class="mode" :src="src" alt="" class="ui-img" @error="_error" @load="_load"/>
-    </div>
-</template>
-
-<script setup>
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    src: {
-        type: String,
-        default: ''
-    },
-    mode: {
-        type: String,
-        default: 'cover'
-    },
-    filter: {
-        type: String,
-        default: ''
-    },
-    width: {
-        type: String,
-        default: 'auto'
-    },
-    height: {
-        type: String,
-        default: '140px'
-    },
-})
-//事件
-const emit = defineEmits(['load', 'error', 'imgClick']);
-//图片加载完毕
-const _load = () => {
-    emit('load')
-}
-//图片加载出错
-const _error = () => {
-    emit('error')
-}
-//图片被点击
-const _imgClick = () => {
-    emit('imgClick', props.src)
-}
-</script>
-
-<style lang="scss" scoped>
-.ui-img-box {
-    position: relative;
-    width: auto;
-    height: 140px;
-    display: inline-block;
-    z-index: 2;
-    .ui-img {
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        border-radius: inherit;
-    }
-    &.cover {
-        background-size: cover;
-    }
-}
-</style>

src/components/imgPreview/index.vue

@@ -1,240 +0,0 @@
-<template>
-    <div :class="[ui,isDom?'cu-img-preview-dom':'']" class="cu-img-preview">
-        <div class="cu-img-preview-box">
-            <div :style="{transform:'scale('+ scale +')'}" class="cu-img-preview-scale">
-                <NodeImg :src="imgUrl" :style="{transform:'rotate('+ rotate +'deg)'}" height="auto" ui="ui-img-auto-box"/>
-            </div>
-        </div>
-        <div v-if="srcs.length > 0" :class="isThumb?'show':''" class="cu-img-thumb-box">
-            <div v-for="(item,id) in srcs" :class="id === index?'cur':''" class="cu-img-thumb-item" @click="tapThumbClick(id,item)">
-                <NodeImg :src="item" height="80px"/>
-            </div>
-        </div>
-        <div class="cu-img-preview-tools-box" :class="toolsSm?'cu-img-preview-tools-sm':''">
-            <div class="preview-tools-box">
-                <div class="preview-tools-flex">
-                    <div v-if="srcs.length > 0" :class="isThumb?'cur':''" class="preview-tools-item" @click="thumbClick">
-                        thumb
-                    </div>
-                    <div class="preview-tools-item" @click="leftRotationClick">
-                        <HcIcon name="anticlockwise"/>
-                    </div>
-                    <div class="preview-tools-item" @click="rightRotationClick">
-                        <HcIcon name="clockwise"/>
-                    </div>
-                    <div class="preview-tools-item" @click="enlargeClick">
-                        <HcIcon name="zoom-in"/>
-                    </div>
-                    <div class="preview-tools-item" @click="shrinkClick">
-                        <HcIcon name="zoom-out"/>
-                    </div>
-                    <div class="preview-tools-item" @click="scaleClick">
-                        <HcIcon name="merge-cells-horizontal" :line="false"/>
-                    </div>
-                    <div v-if="srcs.length > 0" class="preview-tools-item" @click="topClick">
-                        back
-                    </div>
-                    <div v-if="srcs.length > 0" class="preview-tools-item" @click="nextClick">
-                        arrow
-                    </div>
-                    <div v-if="enlarge" class="preview-tools-item">
-                        enlarge
-                    </div>
-
-                    <div v-for="item in tools" class="preview-tools-item" @click="toolsClick(item)">
-                        <HcIcon :name="item.icon"/>
-                    </div>
-
-                    <div class="preview-tools-item" v-if="!isDom" @click="closeClick">
-                        <HcIcon name="close"/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-import NodeImg from "./NodeImg.vue"
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    //单图片
-    src: {
-        type: String,
-        default: ''
-    },
-    //图片数组
-    srcs: {
-        type: Array,
-        default: () => ([])
-    },
-    //选中索引
-    cur: {
-        type: Number,
-        default: -1
-    },
-    //是否全屏
-    enlarge: {
-        type: Boolean,
-        default: false
-    },
-    //扩展工具栏
-    tools: {
-        type: Array,
-        default: () => ([])
-    },
-    //小工具栏
-    toolsSm: {
-        type: Boolean,
-        default: false
-    },
-    //挂载在某个dom上
-    isDom: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//变量
-const scale = ref(1);
-const rotate = ref(0);
-const isThumb = ref(false);
-const imgUrl = ref(props.src||'');
-const index = ref(parseInt(props.cur) || -1);
-
-//监听
-watch(() => [
-    props.src,
-    props.cur,
-], ([src,cur]) => {
-    imgUrl.value = src
-    index.value = parseInt(cur) || -1
-})
-
-//事件
-const emit = defineEmits(['curImg', 'thumb', 'tapThumb', 'tapRotation', 'tapZoom', 'tapScale', 'tapTools', 'close', 'vmClose']);
-
-const curIndex = props.srcs?.length - 1;
-
-//处理默认选择图片
-if (props.src && props.srcs?.length <= 0) {
-    imgUrl.value = props.src
-    index.value = -1;
-} else if (props.srcs?.length > 0) {
-    if (curIndex >= index.value && index.value >= 0) {
-        imgUrl.value = props.srcs?.[index.value];
-    } else {
-        imgUrl.value = props.srcs?.[0];
-        index.value = 0;
-    }
-}
-
-//上一张
-function topClick() {
-    if (index.value === 0) {
-        index.value = curIndex;
-    } else {
-        index.value--;
-    }
-    setCurImageUrl();
-}
-
-//下一张
-function nextClick() {
-    if (index.value === curIndex) {
-        index.value = 0;
-    } else {
-        index.value++;
-    }
-    setCurImageUrl();
-}
-
-//从缩略图里选择图片
-function tapThumbClick(id, item) {
-    index.value = id;
-    imgUrl.value = item;
-    emit('thumb', {cur: id, img: item})
-}
-
-//设置选中的图片
-function setCurImageUrl() {
-    imgUrl.value = props.srcs?.[index.value];
-    emit('curImg', {cur: index.value, img: imgUrl.value})
-}
-
-//缩略图
-function thumbClick() {
-    isThumb.value = !isThumb.value;
-    emit('tapThumb', isThumb.value)
-}
-
-//逆时针旋转
-function leftRotationClick() {
-    if (rotate.value === 0) {
-        rotate.value = 270
-    } else if (rotate.value === 270) {
-        rotate.value = 180
-    } else if (rotate.value === 180) {
-        rotate.value = 90
-    } else if (rotate.value === 90) {
-        rotate.value = 0
-    }
-    emit('tapRotation', rotate.value)
-}
-
-//顺时针旋转
-function rightRotationClick() {
-    if (rotate.value === 0) {
-        rotate.value = 90
-    } else if (rotate.value === 90) {
-        rotate.value = 180
-    } else if (rotate.value === 180) {
-        rotate.value = 270
-    } else if (rotate.value === 270) {
-        rotate.value = 0
-    }
-    emit('tapRotation', rotate.value)
-}
-
-//放大
-function enlargeClick() {
-    if (scale.value <= 6) {
-        scale.value += 0.1
-    }
-    emit('tapZoom', scale.value)
-}
-
-//缩小
-function shrinkClick() {
-    if (scale.value >= 0.11) {
-        scale.value -= 0.1
-    }
-    emit('tapZoom', scale.value)
-}
-
-//还原尺寸
-function scaleClick() {
-    scale.value = 1;
-    rotate.value = 0;
-    emit('tapScale')
-}
-
-//扩展栏被点击
-function toolsClick(item) {
-    emit('tapTools', item)
-}
-
-//close
-function closeClick() {
-    emit('close')
-    emit('vmClose')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss';
-</style>

src/components/imgPreview/style.scss

@@ -1,143 +0,0 @@
-.cu-img-preview {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 999999;
-    overflow: hidden;
-    background: rgba(0, 0, 0, .8);
-
-    .cu-img-preview-box {
-        position: relative;
-        width: 100%;
-        top: 12px;
-        height: calc(100vh - 80px);
-        padding: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: auto;
-
-        &::-webkit-scrollbar-thumb {
-            background-color: rgba(113, 113, 113, 0.8);
-            border-radius: 12px;
-        }
-
-        .cu-img-preview-scale {
-            display: inline-block;
-            -webkit-user-drag: none;
-            transition: transform 0.2s;
-        }
-    }
-
-    .cu-img-thumb-box {
-        position: fixed;
-        width: 100%;
-        overflow-x: auto;
-        white-space: nowrap;
-        text-align: center;
-        bottom: -160px;
-        opacity: 0;
-        padding: 0 20px;
-        transition: bottom, opacity 0.2s;
-
-        &.show {
-            bottom: 65px;
-            opacity: 1;
-
-            &::-webkit-scrollbar-thumb {
-                background-color: rgba(113, 113, 113, 0.8);
-                border-radius: 12px;
-            }
-        }
-
-        .cu-img-thumb-item {
-            position: relative;
-            height: 80px;
-            width: 80px;
-            display: inline-block;
-            border-radius: 5px;
-            overflow: hidden;
-            border: 2px solid #4c4c4c;
-            cursor: pointer;
-            transition: border 0.2s;
-
-            &:hover {
-                border: 2px solid #005ea5;
-            }
-            &.cur {
-                border: 2px solid var(--el-color-primary);
-            }
-        }
-        .cu-img-thumb-item + .cu-img-thumb-item {
-            margin-left: 10px;
-        }
-    }
-
-    .cu-img-preview-tools-box {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .preview-tools-box {
-            position: relative;
-            background: #F5F6F8;
-            display: inline-block;
-            border-radius: 6px;
-            padding: 0 5px;
-            user-select: none;
-            .preview-tools-flex {
-                display: flex;
-                position: relative;
-                justify-content: center;
-                align-items: center;
-                .preview-tools-item {
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    color: #8799a3;
-                    cursor: pointer;
-                    height: 36px;
-                    width: 36px;
-                    font-size: 22px;
-                    transition: background-color, color 0.2s;
-                    &:hover, &.cur {
-                        background-color: rgba(0, 129, 255, .1);
-                        color: var(--el-color-primary);
-                    }
-                }
-            }
-        }
-    }
-    &.cu-img-preview-dom {
-        position: relative;
-        top: initial;
-        left: initial;
-        z-index: initial;
-        border-radius: 5px;
-        background: #ffffff;
-        box-shadow: 0 0 6px 0 rgba(0,0,0,0.10);
-        display: flex;
-        flex-direction: column;
-        .cu-img-preview-box {
-            height: 100%;
-            top: 0;
-            padding: 0;
-            &::-webkit-scrollbar-thumb {
-                background-color: #d1d1d1;
-            }
-            &::-webkit-scrollbar-track-piece {
-                border-radius: inherit;
-                background-color: transparent;
-            }
-        }
-        .cu-img-preview-tools-box {
-            position: relative;
-            margin: 16px 0;
-        }
-    }
-}

src/config/index.js

@@ -17,7 +17,7 @@ export default {
     statusWhiteList: [],    //http的status默认放行列表
     ossUrl: 'https://bladex-test-info.oss-cn-chengdu.aliyuncs.com', //oss地址
     smsPhone: '',  //测试接受短信验证码的手机号
-    dev_version: '202209300950',    //开发版本号
+    dev_version: '202209301050',    //开发版本号
     prod_host: 'http://47.110.251.215:8090',  //线上
     //dev_host: 'http://192.168.4.6', //黄键楠
     dev_host: 'http://192.168.0.118', //祝炜

src/global/components/hc-drag-modal/index.vue

@@ -2,17 +2,17 @@
     <div class="ui-drag-modal-box-hide" v-if="isBody">
         <Teleport to="#app">
             <div class="ui-drag-modal-box" :class="[isModalShow?'ui-drag-modal-show':'']" :id="'drag-modal-' + uuid"
-                 :style="{left: dragModalLeft + 'px', top: dragModalTop + 'px'}">
-                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}">
+                 :style="{left: dragModalLeft + 'px', top: dragModalTop + 'px', width: widthVal + 'px', height: heightVal + 'px'}">
+                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}" @mousedown="dragModalMouseDown">
                     <div class="ui-drag-modal-dialog-header" :class="titleBorder?'border-bottom':''">
-                        <div class="ui-drag-modal-dialog-title text-lg" :class="titleUi" @mousedown="dragModalMouseDown">
+                        <div class="ui-drag-modal-dialog-title text-lg" :class="titleUi">
                             <span v-if="title">{{title}}</span>
                         </div>
                         <div class="ui-drag-modal-dialog-close" v-if="closeIcon" @click="_closeClick()">
                             <HcIcon name="close"/>
                         </div>
                     </div>
-                    <div class="ui-drag-modal-dialog-body">
+                    <div class="ui-drag-modal-dialog-body" @mousedown.stop="dragModalBodyMouseDown">
                         <slot></slot>
                     </div>
                     <span class="ui-drag-modal-resize" @mousedown="dragModalResizeMouseDown"/>
@@ -97,19 +97,20 @@ const dragModalMouseDown = (event) => {
     //获取相关dom元素
     let body = document.body, dom = document.getElementById('drag-modal-' + uuid)
     // 鼠标按下，计算当前元素距离可视区的距离
-    const disX = event.clientX - dom.offsetLeft, disY = event.clientY - dom.offsetTop
+    const disX = event.clientX - dom.offsetLeft, disY = event.clientY - dom.offsetTop;
+    const lefts = body.clientWidth - dom.clientWidth, tops = body.clientHeight - dom.clientHeight;
     document.onmousemove = (ve) => {
         // 通过事件委托，计算移动的距离
         let left = ve.clientX - disX, top = ve.clientY - disY
         // 判断是否超出可视区
-        if (left < 0) left = 0
-        if (left > body.clientWidth - dom.clientWidth) {
-            left = body.clientWidth - dom.clientWidth
+        if (left <= 0) left = 0
+        if (left > lefts) {
+            left = lefts
         }
 
-        if (top < 0) top = 0
-        if (top > body.clientHeight - dom.clientHeight) {
-            top = body.clientHeight - dom.clientHeight
+        if (top <= 0) top = 0
+        if (top > tops) {
+            top = tops
         }
         // 移动当前元素
         dragModalLeft.value = left
@@ -121,6 +122,10 @@ const dragModalMouseDown = (event) => {
     }
 }
 
+//禁止拖动
+const dragModalBodyMouseDown = () => {}
+
+
 //弹窗改变宽高
 const dragModalResizeMouseDown = (event) => {
     // 阻止默认事件和冒泡

src/global/components/hc-drag-modal/modal.scss

@@ -42,8 +42,8 @@
         }
         .ui-drag-modal-dialog-body {
             position: relative;
-            height: calc(100% - 58px);
-            padding: 14px;
+            height: calc(100% - 75px);
+            margin: 14px;
         }
         .ui-drag-modal-resize {
             position: absolute;

src/styles/app/element.scss

@@ -545,6 +545,29 @@
     }
 }
 
+.ui-drag-modal-box .hc-image-preview-box.ui-drag-modal-dialog .ui-drag-modal-dialog-body {
+    .hc-image-preview-view {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        .el-image-viewer__wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            .el-image-viewer__mask {
+                border-radius: 3px;
+                box-shadow: 0 0 6px 0 rgba(0,0,0,0.10);
+            }
+            .el-image-viewer__close {
+                display: none;
+            }
+            .el-image-viewer__actions {
+                bottom: 10px;
+            }
+        }
+    }
+}
 
 //设置表单样式
 .hc-excel-table-form-view {

src/views/data-fill/wbs.vue

@@ -184,9 +184,9 @@
         </div>
 
         <!--查看图纸-->
-        <HcDragModal title="查看图纸" :isShow="drawingsShow" closeIcon tops="100" lefts="145" widths="380px" @close="drawingsClose">
-            <div class="img-preview-box">
-                <ImgPreview :src="nodeDataInfo.fileUrl" isDom toolsSm/>
+        <HcDragModal title="查看图纸" ui="hc-image-preview-box" :isShow="drawingsShow" closeIcon tops="100" lefts="145" widths="380px" @close="drawingsClose">
+            <div class="hc-image-preview-view">
+                <el-image-viewer :url-list="[nodeDataInfo.fileUrl]"/>
             </div>
         </HcDragModal>
 
@@ -324,7 +324,6 @@ import {useAppStore} from "~src/store";
 import {HcIsButton} from "~src/plugins/IsButtons";
 import ListItem from "./components/ListItem.vue"
 import NodeTree from "./components/nodeTree/index.vue"
-import ImgPreview from "~com/imgPreview/index.vue"
 import HcTreeNode from "./components/HcTreeNode.vue"
 import HcTreeData from "./components/HcTreeData.vue"
 import WbsTree from "./components/WbsTree.vue"