From 87af8cf62c1470aeeb34e1332519318693e1d8bb Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Fri, 10 Oct 2025 10:28:07 +0800
Subject: [PATCH] =?UTF-8?q?=E9=95=BF=E8=80=85=E6=A0=87=E7=AD=BE=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=94=B9=E4=B8=BA=E4=B8=8A=E4=BC=A0=E8=87=B3=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=B9=B3=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jeecg/components/JImageUploadToOpe.vue    | 366 ++++++++++++++++++
 src/views/elder/eldertag/ElderTag.data.ts     |   8 +-
 .../eldertag/components/ElderTagForm.vue      |  11 +-
 3 files changed, 378 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Form/src/jeecg/components/JImageUploadToOpe.vue

diff --git a/src/components/Form/src/jeecg/components/JImageUploadToOpe.vue b/src/components/Form/src/jeecg/components/JImageUploadToOpe.vue
new file mode 100644
index 0000000..44a96f4
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JImageUploadToOpe.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="clearfix">
+    <a-upload :listType="listType" accept="image/*" :multiple="multiple" :action="currentUploadUrl"
+      :data="{ biz: bizPath, ...extraUploadData }" :headers="headers" v-model:fileList="uploadFileList"
+      :beforeUpload="beforeUpload" :disabled="disabled" @change="handleChange" @preview="handlePreview">
+      <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="opeMediaAddress + 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, uploadPre } from '/@/api/common/api';
+import { getToken } from '/@/utils/auth';
+import { Upload } from 'ant-design-vue';
+
+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,
+    },
+    // 是否上传至管理平台
+    toOpe: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
+  },
+  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'];
+    });
+    const currentUploadUrl = ref(uploadUrl);
+    const extraUploadData = ref<Record<string, any>>({});
+    const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
+    /**
+     * 监听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;
+    }
+
+    /**
+     * 上传前校验
+     */
+    async function beforeUpload(file) {
+      let fileType = file.type;
+      if (fileType.indexOf('image') < 0) {
+        createMessage.info('请上传图片');
+        return false;
+      }
+      if (props.toOpe) {
+        let res = await uploadPre({ fileName: file.name, fileSize: file.size });
+        if (res.result == 500) {
+          createMessage.info('服务暂时不可用，请稍后重试');
+          return Upload.LIST_IGNORE;
+        } else {
+          // 切换上传地址和参数
+          currentUploadUrl.value = '/opeexup/sys/common/static/upload/export';
+          extraUploadData.value = { name: res.result, size: file.size };
+        }
+      } else {
+        // 恢复默认
+        currentUploadUrl.value = uploadUrl;
+        extraUploadData.value = {};
+      }
+      return true;
+    }
+    /**
+     * 文件上传结果回调
+     */
+    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,
+      currentUploadUrl,
+      extraUploadData,
+      opeMediaAddress,
+    };
+  },
+});
+</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;
+  /* 保持比例，不拉伸 */
+}
+</style>
diff --git a/src/views/elder/eldertag/ElderTag.data.ts b/src/views/elder/eldertag/ElderTag.data.ts
index 55c55d6..aae2eb7 100644
--- a/src/views/elder/eldertag/ElderTag.data.ts
+++ b/src/views/elder/eldertag/ElderTag.data.ts
@@ -3,6 +3,8 @@ import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
 import { render } from '/@/utils/common/renderUtils';
 import { getWeekMonthQuarterYear } from '/@/utils';
+const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS;
+
 //列表数据
 export const columns: BasicColumn[] = [
   {
@@ -32,10 +34,10 @@ export const columns: BasicColumn[] = [
     customRender: ({ text, record }) => {
       // 如果 text 为空或 null/undefined，使用默认图片
       const imageUrl = text
-        ? text
+        ? opeMediaAddress +  text
         : record.type == 'tx'
-          ? import.meta.env.VITE_DEFAULT_ELDER_TAG_BODY_PIC
-          : import.meta.env.VITE_DEFAULT_ELDER_TAG_EMO_PIC;
+          ? opeMediaAddress +  import.meta.env.VITE_DEFAULT_ELDER_TAG_BODY_PIC
+          : opeMediaAddress +  import.meta.env.VITE_DEFAULT_ELDER_TAG_EMO_PIC;
       return render.renderImage({ text: imageUrl });
     },
     // customRender: render.renderImage,
diff --git a/src/views/elder/eldertag/components/ElderTagForm.vue b/src/views/elder/eldertag/components/ElderTagForm.vue
index ae3754f..5d67335 100644
--- a/src/views/elder/eldertag/components/ElderTagForm.vue
+++ b/src/views/elder/eldertag/components/ElderTagForm.vue
@@ -30,10 +30,11 @@
             </a-col>
             <a-col :span="24">
               <a-form-item label="图标" v-bind="validateInfos.pic" id="ElderTagForm-pic" name="pic">
-                <JImageUpload v-if="opeType == 'dmlook'" :fileMax="1" v-model:value="dmlookVal">
-                </JImageUpload>
-                <JImageUpload v-else :fileMax="1" v-model:value="formData.pic" :disabled="!!formData.id || !isMain">
-                </JImageUpload>
+                <!-- <JImageUploadToOpe v-if="opeType == 'dmlook'" :fileMax="1" v-model:value="dmlookVal">
+                </JImageUploadToOpe> -->
+                <JImageUploadToOpe :toOpe="true" :bizPath="'eldertag'" :fileMax="1" v-model:value="formData.pic"
+                  :disabled="!!formData.id || !isMain">
+                </JImageUploadToOpe>
               </a-form-item>
             </a-col>
             <!-- <a-col :span="24">
@@ -64,7 +65,9 @@ import { Form } from 'ant-design-vue';
 import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
+import JImageUploadToOpe from '/@/components/Form/src/jeecg/components/JImageUploadToOpe.vue';
 
+const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
 const props = defineProps({
   formDisabled: { type: Boolean, default: false },
   formData: { type: Object, default: () => ({}) },