From c7675a6a327f24d27aee88b10e65da50411752fa Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Mon, 9 Mar 2026 13:38:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/JImageUploadNoPreview.vue      | 366 ++++++++++++++++++
 src/views/deviceSync/index.vue                |   2 +-
 .../NuResourcesManagement.data.ts             |  10 +-
 .../components/NuResourcesManagementForm.vue  |   6 +-
 4 files changed, 375 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Form/src/jeecg/components/JImageUploadNoPreview.vue

diff --git a/src/components/Form/src/jeecg/components/JImageUploadNoPreview.vue b/src/components/Form/src/jeecg/components/JImageUploadNoPreview.vue
new file mode 100644
index 0000000..841f4b7
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JImageUploadNoPreview.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :listType="listType"
+      accept="image/*"
+      :multiple="multiple"
+      :action="uploadUrl"
+      :headers="headers"
+      :data="{ biz: bizPath }"
+      v-model:fileList="uploadFileList"
+      :beforeUpload="beforeUpload"
+      :disabled="disabled"
+      @change="handleChange"
+    >
+      <div v-if="uploadVisible">
+        <div v-if="listType == 'picture-card'">
+          <LoadingOutlined v-if="loading" />
+          <UploadOutlined v-else />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+        <a-button v-if="listType == 'picture'" :disabled="disabled">
+          <UploadOutlined></UploadOutlined>
+          {{ text }}
+        </a-button>
+      </div>
+    </a-upload>
+      <!-- <img alt="example" style="width: 100%" :src="previewImage" /> -->
+    <!-- <a-modal :open="previewVisible" width="70%" class="imgView" :footer="null" @cancel="handleCancel()">
+      <div class="img-container">
+        <img
+          alt="example"
+          class="preview-img"
+          :src="previewImage"
+        />
+      </div>
+    </a-modal> -->
+
+    <a-modal
+    :open="previewVisible"
+    :width="modalWidth"
+    :bodyStyle="{ padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+    <img
+      ref="previewImgRef"
+      class="preview-img"
+      :src="previewImage"
+      @load="handleImageLoad"
+    />
+  </a-modal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
+  import { LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getFileAccessHttpUrl, getHeaders, getRandom } from '/@/utils/common/compUtils';
+  import { uploadUrl } from '/@/api/common/api';
+  import { getToken } from '/@/utils/auth';
+
+  const { createMessage, createErrorModal } = useMessage();
+  export default defineComponent({
+    name: 'JImageUpload',
+    components: { LoadingOutlined, UploadOutlined },
+    inheritAttrs: false,
+    props: {
+      //绑定值
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      //按钮文本
+      listType: {
+        type: String,
+        required: false,
+        default: 'picture-card',
+      },
+      //按钮文本
+      text: {
+        type: String,
+        required: false,
+        default: '上传',
+      },
+      //这个属性用于控制文件上传的业务路径
+      bizPath: {
+        type: String,
+        required: false,
+        default: 'temp',
+      },
+      //是否禁用
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      //上传数量
+      fileMax: {
+        type: Number,
+        required: false,
+        default: 1,
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>([]);
+      const attrs = useAttrs();
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //获取文件名
+      const getFileName = (path) => {
+        if (path.lastIndexOf('\\') >= 0) {
+          let reg = new RegExp('\\\\', 'g');
+          path = path.replace(reg, '/');
+        }
+        return path.substring(path.lastIndexOf('/') + 1);
+      };
+      //token
+      const headers = getHeaders();
+      //上传状态
+      const loading = ref<boolean>(false);
+      //是否是初始化加载
+      const initTag = ref<boolean>(true);
+      //文件列表
+      let uploadFileList = ref<any[]>([]);
+      //预览图
+      const previewImage = ref<string | undefined>('');
+      //预览框状态
+      const previewVisible = ref<boolean>(false);
+
+
+      //计算是否开启多图上传
+      const multiple = computed(() => {
+        return props['fileMax'] > 1 || props['fileMax'] === 0;
+      });
+
+      //计算是否可以继续上传
+      const uploadVisible = computed(() => {
+        if (props['fileMax'] === 0) {
+          return true;
+        }
+        return uploadFileList.value.length < props['fileMax'];
+      });
+
+      /**
+       * 监听value变化
+       */
+      watch(
+        () => props.value,
+        (val, prevCount) => {
+         //update-begin---author:liusq ---date:20230601  for：【issues/556】JImageUpload组件value赋初始值没显示图片------------
+            if (val && val instanceof Array) {
+            val = val.join(',');
+          }
+          if (initTag.value == true) {
+            initFileList(val);
+          }
+        },
+        { immediate: true }
+        //update-end---author:liusq ---date:20230601  for：【issues/556】JImageUpload组件value赋初始值没显示图片------------
+      );
+
+      /**
+       * 初始化文件列表
+       */
+      function initFileList(paths) {
+        if (!paths || paths.length == 0) {
+          uploadFileList.value = [];
+          return;
+        }
+        let files = [];
+        let arr = paths.split(',');
+        arr.forEach((value) => {
+          let url = getFileAccessHttpUrl(value);
+          files.push({
+            uid: getRandom(10),
+            name: getFileName(value),
+            status: 'done',
+            url: url,
+            response: {
+              status: 'history',
+              message: value,
+            },
+          });
+        });
+        uploadFileList.value = files;
+      }
+
+      /**
+       * 上传前校验
+       */
+      function beforeUpload(file) {
+        let fileType = file.type;
+        if (fileType.indexOf('image') < 0) {
+          createMessage.info('请上传图片');
+          return false;
+        }
+      }
+      /**
+       * 文件上传结果回调
+       */
+      function handleChange({ file, fileList, event }) {
+        initTag.value = false;
+        // update-begin--author:liaozhiyang---date:20231116---for：【issues/846】上传多个列表只显示一个
+        // uploadFileList.value = fileList;
+        if (file.status === 'error') {
+          createMessage.error(`${file.name} 上传失败.`);
+        }
+        // update-begin--author:liaozhiyang---date:20240704---for：【TV360X-1640】上传图片大小超出限制显示优化
+        if (file.status === 'done' && file.response.success === false) {
+          const failIndex = uploadFileList.value.findIndex((item) => item.uid === file.uid);
+          if (failIndex != -1) {
+            uploadFileList.value.splice(failIndex, 1);
+          }
+          createMessage.warning(file.response.message);
+          return;
+        }
+        // update-end--author:liaozhiyang---date:20240704---for：【TV360X-1640】上传图片大小超出限制显示优化
+        let fileUrls = [];
+        let noUploadingFileCount = 0;
+        if (file.status != 'uploading') {
+          fileList.forEach((file) => {
+            if (file.status === 'done') {
+              fileUrls.push(file.response.message);
+            }
+            if (file.status != 'uploading') {
+              noUploadingFileCount++;
+            }
+          });
+          if (file.status === 'removed') {
+            handleDelete(file);
+          }
+          if (noUploadingFileCount == fileList.length) {
+            state.value = fileUrls.join(',');
+            emit('update:value', fileUrls.join(','));
+            // update-begin---author:wangshuai ---date:20221121  for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
+            nextTick(() => {
+              initTag.value = true;
+            });
+            // update-end---author:wangshuai ---date:20221121  for：[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
+          }
+        }
+        // update-end--author:liaozhiyang---date:20231116---for：【issues/846】上传多个列表只显示一个
+      }
+
+      /**
+       * 删除图片
+       */
+      function handleDelete(file) {
+        //如有需要新增 删除逻辑
+        console.log(file);
+      }
+      const previewImgRef = ref<HTMLImageElement | null>(null);
+      const modalWidth = ref('auto');
+      /**
+       * 预览图片
+       */
+      async function handlePreview(file) {
+        if (!file.url && !file.preview) {
+          file.preview = (await getBase64(file.originFileObj)) as string;
+        }
+        previewImage.value = file.url || file.preview;
+        previewVisible.value = true;
+      }
+      function getBase64(file: File) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = error => reject(error);
+        });
+      }
+
+      function getAvatarView() {
+        if (uploadFileList.length > 0) {
+          let url = uploadFileList[0].url;
+          return getFileAccessHttpUrl(url, null);
+        }
+      }
+
+      function handleCancel() {
+        previewVisible.value = false;
+      }
+
+// 图片加载完成后计算宽高
+const handleImageLoad = () => {
+  if (!previewImgRef.value) return;
+
+  const img = previewImgRef.value;
+  const maxWidth = window.innerWidth * 0.9; // 最大宽度为屏幕90%
+  const maxHeight = window.innerHeight * 0.8; // 最大高度为屏幕80%
+
+  // 计算适应比例
+  const ratio = Math.min(maxWidth / img.naturalWidth, maxHeight / img.naturalHeight, 1);
+  modalWidth.value = `${img.naturalWidth * ratio}px`;
+};
+
+
+      return {
+        state,
+        attrs,
+        previewImage,
+        previewVisible,
+        uploadFileList,
+        multiple,
+        headers,
+        loading,
+        uploadUrl,
+        beforeUpload,
+        uploadVisible,
+        handlePreview,
+        handleCancel,
+        handleChange,
+        handleImageLoad,
+        previewImgRef,
+        modalWidth,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+/* 确保 Modal 内容区域填满 */
+.imgView .ant-modal-body {
+  height: 80vh; /* 限制模态框高度，避免超出屏幕 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 图片容器 */
+.img-container {
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 图片自适应 */
+.preview-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* 保持比例，不拉伸 */
+}
+
+/* 隐藏预览图标 */
+:deep(.ant-upload-list-item-info .anticon-eye) {
+  display: none !important;
+}
+
+/* 如果是 picture-card 模式 */
+:deep(.ant-upload-list-picture-card-container .anticon-eye) {
+  display: none !important;
+}
+:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye) {
+  display: none !important;
+}
+</style>
diff --git a/src/views/deviceSync/index.vue b/src/views/deviceSync/index.vue
index 26674d7..c6ba8a4 100644
--- a/src/views/deviceSync/index.vue
+++ b/src/views/deviceSync/index.vue
@@ -86,7 +86,7 @@
   <div class="cardContent" v-show="!orgSelectedCon">
     <a-row>
       <a-col :span="24" style="margin-bottom: 10px;padding: 0 0 0 10px;">
-        <a-button type="primary" @click="handleAddNuIot">添加区域</a-button>
+        <!-- <a-button type="primary" @click="handleAddNuIot">添加区域</a-button> -->
         <a-button type="primary" @click="handlePrview(orgData)" style="margin-left: 10px;">设备预览</a-button>
       </a-col>
       <a-col v-for="(item,index) in nuDataList" style="padding: 0 5px 10px 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
diff --git a/src/views/resourcesManagement/NuResourcesManagement.data.ts b/src/views/resourcesManagement/NuResourcesManagement.data.ts
index 736e54d..b60ccfb 100644
--- a/src/views/resourcesManagement/NuResourcesManagement.data.ts
+++ b/src/views/resourcesManagement/NuResourcesManagement.data.ts
@@ -32,11 +32,11 @@ export const columns: BasicColumn[] = [
     dataIndex: 'checkPicPath',
     // customRender: render.renderImage,
   },
-  {
-    title: '备注',
-    align: "center",
-    dataIndex: 'content'
-  },
+  // {
+  //   title: '备注',
+  //   align: "center",
+  //   dataIndex: 'content'
+  // },
 ];
 
 // 高级查询数据
diff --git a/src/views/resourcesManagement/components/NuResourcesManagementForm.vue b/src/views/resourcesManagement/components/NuResourcesManagementForm.vue
index d0b98e2..5cb411a 100644
--- a/src/views/resourcesManagement/components/NuResourcesManagementForm.vue
+++ b/src/views/resourcesManagement/components/NuResourcesManagementForm.vue
@@ -21,12 +21,12 @@
 						</a-col>
 						<a-col :span="24" v-if="formData.fileType == 'image'">
 							<a-form-item label="默认图标" v-bind="validateInfos.filePath" id="NuResourcesManagementForm-filePath" name="filePath">
-								<j-image-upload :fileMax="1" v-model:value="formData.filePath" ></j-image-upload>
+								<j-image-upload :fileMax="1" text="无" v-model:value="formData.filePath" ></j-image-upload>
 							</a-form-item>
 						</a-col>
 						<a-col :span="24" v-if="formData.fileType == 'image'">
 							<a-form-item label="焦点图标" v-bind="validateInfos.checkPicPath" id="NuResourcesManagementForm-checkPicPath" name="checkPicPath">
-								<j-image-upload :fileMax="1" v-model:value="formData.checkPicPath" ></j-image-upload>
+								<j-image-upload :fileMax="1" text="无"  v-model:value="formData.checkPicPath" ></j-image-upload>
 							</a-form-item>
 						</a-col>
 						<a-col :span="24" v-if="formData.fileType == 'video'">
@@ -61,7 +61,7 @@
   import { defHttp } from '/@/utils/http/axios';
   import { useMessage } from '/@/hooks/web/useMessage';
   import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
+  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUploadNoPreview.vue';
 import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
 import JUploadMp3 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMp3.vue';
 import JUploadMp4 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMp4.vue';