修改样式

2025-07-29 14:50:05 +08:00 · 2025-07-29 14:50:05 +08:00 · 790c382e28
parent 5d07d6cb98
commit 790c382e28
8 changed files with 103 additions and 11 deletions
--- a/public/resource/img/modalback.png
+++ b/public/resource/img/modalback.png
--- a/src/components/Form/src/jeecg/components/JImageUpload.vue
+++ b/src/components/Form/src/jeecg/components/JImageUpload.vue
@ -25,8 +25,31 @@
        </a-button>
      </div>
    </a-upload>
-    <a-modal :open="previewVisible" :footer="null" @cancel="handleCancel()">
-      <img alt="example" style="width: 100%" :src="previewImage" />
+      <!-- <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"
+    :style="{ maxWidth: '90vw' }"
+  >
+    <img
+      ref="previewImgRef"
+      class="preview-img"
+      :src="previewImage"
+      @load="handleImageLoad"
+    />
  </a-modal>
  </div>
 </template>
@ -106,6 +129,7 @@
      //预览框状态
      const previewVisible = ref<boolean>(false);

+
      //计算是否开启多图上传
      const multiple = computed(() => {
        return props['fileMax'] > 1 || props['fileMax'] === 0;
@ -227,7 +251,8 @@
        //如有需要新增 删除逻辑
        console.log(file);
      }
-
+      const previewImgRef = ref<HTMLImageElement | null>(null);
+      const modalWidth = ref('auto');
      /**
       * 预览图片
       */
@ -247,6 +272,20 @@
        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,
@ -262,6 +301,9 @@
        handlePreview,
        handleCancel,
        handleChange,
+        handleImageLoad,
+        previewImgRef,
+        modalWidth,
      };
    },
  });
@ -276,4 +318,27 @@
    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>
--- a/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
+++ b/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
@ -22,6 +22,12 @@
        <span>{{ text }}</span>
      </a-button>
    </a-upload>
+    <template v-if="bindProps.fileType=='pdf' && maxCount=='1'">
+      <a style="border:1px solid #d9d9d9;width:60px;text-align:center;border-radius:4px;padding:2px 5px;" @click="handleView({url:getFileAccessHttpUrl(bindProps.value)})">
+        <Icon icon="ant-design:search-outlined" style="color: rgb(140, 134, 134)" />
+        <span class="ant-upload-text" style="color: rgb(140, 134, 134)" >预览</span>
+      </a>
+    </template>
  </div>
 </template>

@ -38,6 +44,10 @@
  import { UploadTypeEnum } from './upload.data';
  import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
  import UploadItemActions from './components/UploadItemActions.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import {encryptByBase64} from "@/utils/cipher";
+  const glob = useGlobSetting();
+  

  const { createMessage, createConfirm } = useMessage();
  const { prefixCls } = useDesign('j-upload');
@ -357,6 +367,7 @@

  // 预览文件、图片
  function onFilePreview(file) {
+    console.log("🚀 ~ onFilePreview ~ file:", file)
    if (isImageMode.value) {
      createImgPreview({ imageList: [file.url], maskClosable: true });
    } else {
@ -364,6 +375,18 @@
    }
  }

+   /**
+   * 预览
+   */
+  function handleView(record) {
+    if (record && record.url) {
+      console.log('glob.onlineUrl', glob.viewUrl);
+      let url = encodeURIComponent(encryptByBase64(record.url));
+      let previewUrl = `${glob.viewUrl}?url=` + url;
+      window.open(previewUrl, '_blank');
+    }
+  }
+
  function emitValue(value) {
    emit('change', value);
    emit('update:value', value);
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@ -47,6 +47,9 @@

  .ant-modal-body {
    padding: 0;
+    background: url(../resource/img/modalback.png);
+    background-repeat: no-repeat;
+    background-size: cover;

    > .scrollbar > .scrollbar__bar.is-horizontal {
      display: none;
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@ -4,7 +4,7 @@
    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
    <Layout :class="[layoutClass]">
      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
-      <Layout :class="`${prefixCls}-main`"  style="background-image: url('../resource/img/bj.png');">
+      <Layout :class="`${prefixCls}-main`" >
        <LayoutMultipleHeader />
        <LayoutContent />
        <LayoutFooter />
--- a/src/views/admin/orginfo/components/OrgInfoForm.vue
+++ b/src/views/admin/orginfo/components/OrgInfoForm.vue
@ -1,6 +1,6 @@
 <template>
  <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer >
      <template #detail>
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
          name="NuOrgInfoForm">
@ -198,7 +198,8 @@
          <a-row>
            <a-col :span="12">
              <a-form-item label="加盟合同" v-bind="validateInfos.contract" id="OrgApplyInfoForm-contract">
-                <JUpload v-model:value="formData.contract" :maxCount="1"></JUpload>
+                <!-- <JUpload v-model:value="formData.contract" :maxCount="1"></JUpload> -->
+                <JUpload v-model:value="formData.contract" :maxCount="1" :buttonVisible="false" disabled="true" fileType="pdf"></JUpload>
              </a-form-item>
            </a-col>
            <!-- <a-col :span="12">
--- a/src/views/admin/workorder/components/WorkOrderFankui.vue
+++ b/src/views/admin/workorder/components/WorkOrderFankui.vue
@ -57,7 +57,7 @@
          <a-row>
            <a-col :span="12">
              <a-form-item label="反馈内容" v-bind="validateInfos.replyContent" id="WorkOrderForm-replyContent" name="replyContent">
-                <a-textarea v-model:value="formData.replyContent" rows="4" placeholder="请输入反馈内容" />
+                <a-textarea v-model:value="formData.replyContent" rows="4" placeholder="请输入反馈内容" :maxlength="100" showCount/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
--- a/src/views/admin/workorder/components/WorkOrderForm.vue
+++ b/src/views/admin/workorder/components/WorkOrderForm.vue
@ -7,7 +7,7 @@
          <div style="margin: 20px;">
              <SectionDivider :title="'工单信息'" />
          </div>
-          <a-row style="border: 1px solid #e8e8e8;padding: 20px;margin:40px;border-radius: 4px;">
+          <a-row style="padding: 20px;margin:40px;">
            <a-col :span="12">
              <a-form-item label="机构名称" v-bind="validateInfos.orgName" id="WorkOrderForm-orgName" name="orgName">
                {{formData.orgName}}
@ -30,7 +30,7 @@
                {{formData.workType_dictText}}
              </a-form-item>
            </a-col>
-            <a-col :span="12">
+            <!-- <a-col :span="12">
              <a-form-item label="标题" v-bind="validateInfos.title" id="WorkOrderForm-title" name="title">
                {{formData.title}}
              </a-form-item>
@ -39,7 +39,7 @@
              <a-form-item label="描述" v-bind="validateInfos.content" id="WorkOrderForm-content" name="content">
                {{formData.content}}
              </a-form-item>
-            </a-col>
+            </a-col> -->
            <a-col :span="12">
              <a-form-item label="提交人" v-bind="validateInfos.createBy" id="WorkOrderForm-createBy" name="createBy">
                {{formData.createBy}}