bl-common-vue3 3.8.111 → 3.8.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.111",
+  "version": "3.8.114",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/common/utils/xlsx.js

@@ -5,6 +5,54 @@ const DEFAULT_COLUMN_WIDTH = 16;
 const MAX_COLUMN_WIDTH = 36;
 const HEADER_ROW_HEIGHT = 30;
 const DATA_ROW_HEIGHT = 24;
+const XLSX_MIME_TYPE =
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+const INVALID_FILE_NAME_REG = /[\\/:*?"<>|]/g;
+
+const getSafeXlsxFileName = (filename) => {
+  const safeName =
+    String(filename || "excel")
+      .replace(INVALID_FILE_NAME_REG, "_")
+      .trim() || "excel";
+  return /\.xlsx$/i.test(safeName) ? safeName : `${safeName}.xlsx`;
+};
+
+const isWeComBrowser = () => {
+  const ua = typeof navigator === "undefined" ? "" : navigator.userAgent || "";
+  return /wxwork|MicroMessenger/i.test(ua);
+};
+
+const saveByLink = (blob, fileName) => {
+  const objectUrl = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.style.display = "none";
+  link.href = objectUrl;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => window.URL.revokeObjectURL(objectUrl), 0);
+};
+
+const saveXlsxBlob = (blob, filename) => {
+  const fileName = getSafeXlsxFileName(filename);
+  const file =
+    typeof File === "function"
+      ? new File([blob], fileName, { type: XLSX_MIME_TYPE })
+      : blob;
+
+  if (window.navigator?.msSaveOrOpenBlob) {
+    window.navigator.msSaveOrOpenBlob(file, fileName);
+    return;
+  }
+
+  if (isWeComBrowser()) {
+    saveByLink(file, fileName);
+    return;
+  }
+
+  fs.saveAs(file, fileName);
+};
 
 const createBorder = (color) => ({
   top: { style: "thin", color: { rgb: color } },
@@ -33,56 +81,56 @@ const getStyledExportOptions = (options = {}) => {
       columnWidths && typeof columnWidths === "object" ? columnWidths : {},
   };
 };
-
+
 export function getVerticalMergeCells(json, fields, options = {}) {
-  const { groupField, mergeFields = [] } = options;
-  if (!groupField || !Array.isArray(mergeFields) || !mergeFields.length) {
-    return [];
-  }
-
-  const fieldKeys = Object.keys(fields);
-  const mergeColumnIndexes = mergeFields
-    .map((field) => fieldKeys.indexOf(field))
-    .filter((columnIndex) => columnIndex >= 0);
-  if (!mergeColumnIndexes.length) {
-    return [];
-  }
-
-  const merges = [];
-  let groupStartIndex = 0;
-
-  const appendGroupMerges = (groupEndIndex) => {
-    const groupValue = json[groupStartIndex]?.[groupField];
-    if (
-      groupEndIndex <= groupStartIndex ||
-      groupValue === undefined ||
-      groupValue === null ||
-      groupValue === ""
-    ) {
-      return;
-    }
-
-    mergeColumnIndexes.forEach((columnIndex) => {
-      merges.push({
-        // 工作表第 0 行是表头，数据行需要整体向下偏移一行。
-        s: { r: groupStartIndex + 1, c: columnIndex },
-        e: { r: groupEndIndex + 1, c: columnIndex },
-      });
-    });
-  };
-
-  for (let rowIndex = 1; rowIndex <= json.length; rowIndex++) {
-    const groupChanged =
-      rowIndex === json.length ||
-      json[rowIndex]?.[groupField] !== json[groupStartIndex]?.[groupField];
-    if (!groupChanged) {
-      continue;
-    }
-
-    appendGroupMerges(rowIndex - 1);
-    groupStartIndex = rowIndex;
-  }
-
+  const { groupField, mergeFields = [] } = options;
+  if (!groupField || !Array.isArray(mergeFields) || !mergeFields.length) {
+    return [];
+  }
+
+  const fieldKeys = Object.keys(fields);
+  const mergeColumnIndexes = mergeFields
+    .map((field) => fieldKeys.indexOf(field))
+    .filter((columnIndex) => columnIndex >= 0);
+  if (!mergeColumnIndexes.length) {
+    return [];
+  }
+
+  const merges = [];
+  let groupStartIndex = 0;
+
+  const appendGroupMerges = (groupEndIndex) => {
+    const groupValue = json[groupStartIndex]?.[groupField];
+    if (
+      groupEndIndex <= groupStartIndex ||
+      groupValue === undefined ||
+      groupValue === null ||
+      groupValue === ""
+    ) {
+      return;
+    }
+
+    mergeColumnIndexes.forEach((columnIndex) => {
+      merges.push({
+        // 工作表第 0 行是表头，数据行需要整体向下偏移一行。
+        s: { r: groupStartIndex + 1, c: columnIndex },
+        e: { r: groupEndIndex + 1, c: columnIndex },
+      });
+    });
+  };
+
+  for (let rowIndex = 1; rowIndex <= json.length; rowIndex++) {
+    const groupChanged =
+      rowIndex === json.length ||
+      json[rowIndex]?.[groupField] !== json[groupStartIndex]?.[groupField];
+    if (!groupChanged) {
+      continue;
+    }
+
+    appendGroupMerges(rowIndex - 1);
+    groupStartIndex = rowIndex;
+  }
+
   return merges;
 }
 
@@ -188,14 +236,14 @@ export async function createWorkbook(
     : null;
   //导出xlsx
   json.forEach((item) => {
-    for (let i in item) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (fields.hasOwnProperty(i)) {
-        item[fields[i]] = item[i];
-      }
-      delete item[i]; //删除原先的对象属性
-    }
-  });
+    for (let i in item) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (fields.hasOwnProperty(i)) {
+        item[fields[i]] = item[i];
+      }
+      delete item[i]; //删除原先的对象属性
+    }
+  });
   let wb = XLSX.utils.book_new(); //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
   let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }); //将JS对象数组转换为工作表。
   if (merges.length) {
@@ -223,32 +271,32 @@ export async function xlsx(
   const sheetName = filename.replace(/[\\/?*[\]:]/g, "").slice(0, 31) || "Sheet1"; //excel的文件名称
   wb.SheetNames.push(sheetName);
   wb.Sheets[sheetName] = ws;
-  const defaultCellStyle = {
-    font: { name: "Verdana", sz: 13, color: "FF00FF88" },
-    fill: { fgColor: { rgb: "FFFFAA00" } },
-  }; //设置表格的样式
-  let wopts = {
-    bookType: "xlsx",
-    bookSST: false,
-    type: "binary",
-    cellStyles: true,
-    defaultCellStyle: defaultCellStyle,
-    showGridLines: false,
-  }; //写入的样式
-  let wbout = XLSX.write(wb, wopts);
-  let blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
-  fs.saveAs(blob, filename + ".xlsx");
-}
-const s2ab = (s) => {
-  var buf;
-  if (typeof ArrayBuffer !== "undefined") {
-    buf = new ArrayBuffer(s.length);
-    var view = new Uint8Array(buf);
-    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
-    return buf;
-  } else {
-    buf = new Array(s.length);
-    for (var n = 0; n != s.length; ++n) buf[n] = s.charCodeAt(n) & 0xff;
-    return buf;
-  }
-};
+  const defaultCellStyle = {
+    font: { name: "Verdana", sz: 13, color: "FF00FF88" },
+    fill: { fgColor: { rgb: "FFFFAA00" } },
+  }; //设置表格的样式
+  let wopts = {
+    bookType: "xlsx",
+    bookSST: false,
+    type: "binary",
+    cellStyles: true,
+    defaultCellStyle: defaultCellStyle,
+    showGridLines: false,
+  }; //写入的样式
+  let wbout = XLSX.write(wb, wopts);
+  let blob = new Blob([s2ab(wbout)], { type: XLSX_MIME_TYPE });
+  saveXlsxBlob(blob, filename);
+}
+const s2ab = (s) => {
+  var buf;
+  if (typeof ArrayBuffer !== "undefined") {
+    buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+    return buf;
+  } else {
+    buf = new Array(s.length);
+    for (var n = 0; n != s.length; ++n) buf[n] = s.charCodeAt(n) & 0xff;
+    return buf;
+  }
+};

package/src/components/AttachmentInfo/index.vue

@@ -25,6 +25,7 @@
           :mobileAnnexUploadConfig="mobileAnnexUploadConfig"
           @handleRequest="handleRequest"
           @handleAddSuccess="handleAddSuccess"
+          @previewFile="previewClick"
         />
       </template>
       <a-table
@@ -52,11 +53,9 @@
             <a-tooltip v-if="record.annex_type == 2">
               <template #title>{{ t('AttachmentInfo.index.559728-5') }}</template>
               <a-button
-                  type="link"
-                  :disabled="record.online_preview && !record.online_preview.previewUrl &&
-                  record.online_preview.documentType !== 'pic'
-                "
-                  @click="previewClick(record)"
+                type="link"
+                :disabled="!canPreviewFile(record)"
+                @click="previewClick(record)"
               >
                 <template #icon>
                   <EyeOutlined/>
@@ -86,6 +85,7 @@
                 :mobileAnnexUploadConfig="mobileAnnexUploadConfig"
                 @handleRequest="handleRequest"
                 @handleAddSuccess="handleAddSuccess"
+                @previewFile="previewClick"
               />
               <a-tooltip v-if="record.operate.includes('Topping')">
                 <template #title>{{ t('AttachmentInfo.index.559728-6') }}</template>
@@ -136,6 +136,23 @@
         </template>
       </a-table>
     </a-card>
+
+    <!-- 预览图片 -->
+    <PreviewImg
+      :visible="imgVisible"
+      :index="0"
+      :list="imgList"
+      @close="onCloseImgPreview"
+    />
+
+    <!-- 文档预览 -->
+    <PreviewFile
+      :visible="previewFileVisible"
+      :urlData="previewUrlData"
+      :title="previewUrlData.name"
+      :esignDetail="{esignCheck: true}"
+      @close="onClosePreviewFile"
+    />
   </section>
 </template>
 
@@ -166,6 +183,8 @@ import {
 } from "ant-design-vue";
 import {t, loadLanguageAsync} from "../../locale";
 import AddAction from "./modules/AddAction.vue";
+import PreviewImg from "../PreviewImg/index.vue";
+import PreviewFile from "../PreviewFile/index.vue";
 export default defineComponent({
   name: "ContractAttachmentInfo",
   components: {
@@ -181,6 +200,8 @@ export default defineComponent({
     "a-tooltip": Tooltip,
     "a-button": Button,
     "a-space": Space,
+    PreviewImg: PreviewImg,
+    PreviewFile,
   },
   props: {
     active: {
@@ -315,7 +336,12 @@ export default defineComponent({
           disabled: false,
         };
       },
-    }
+    },
+    // 是否自定义预览
+    isCustomPreview: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
     const homeCrumb = { key: "home", parentId: 0, title: t('AttachmentInfo.index.559728-8') };
@@ -345,7 +371,6 @@ export default defineComponent({
         annexAdd: props.annexAdd,
         serviceFrom: props.serviceFrom,
       };
-      console.log(addParams.value, "!111");
       if (type != 3) {
         addVisible.value = true;
       }
@@ -542,17 +567,124 @@ export default defineComponent({
     const randomStr = utils.getRandomUid(18);
     let loaded = false;
 
+    // 获取文件后缀，统一处理带 query/hash 的预览地址
+    const getFileSuffix = (file) => {
+      if (!file) return "";
+      return file.split("?")[0].split("#")[0].split(".").pop().toLowerCase();
+    };
+
+    // 判断是否为图片文件
+    const isImageFile = (file) => {
+      if (!file) return false;
+      const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"];
+      return imageExtensions.includes(getFileSuffix(file));
+    };
+
+    // 判断是否为媒体文件
+    const isMediaFile = (file) => {
+      if (!file) return false;
+      const videoExtensions = ["mp4","mov","m4v","webm","ogv","avi","wmv","mkv","flv","mpeg"];
+      const radioExtensions = ["mp3","wav","ogg","m4a","aac","flac","wma"];
+      return [...videoExtensions, ...radioExtensions].includes(getFileSuffix(file));
+    };
+
+    // 统一整理附件预览数据，避免不同入口分别判断图片和文档逻辑
+    const resolvePreviewData = (record = {}) => {
+      const filePath = record.file_path || "";
+      const previewInfo = record.preview_url || record.online_preview || {};
+      const previewUrl = previewInfo.previewUrl || "";
+      const documentType = previewInfo.documentType || "";
+      const fileName = record.name || "";
+      const sourceUrl = previewUrl || filePath;
+
+      if (sourceUrl && (documentType === "pic" || isImageFile(sourceUrl))) {
+        return {
+          type: "image",
+          url: sourceUrl,
+          name: fileName,
+        };
+      }
+
+      if (getFileSuffix(filePath) === "pdf") {
+        return {
+          type: "file",
+          previewUrl: `/public_web/pdf/web/viewer.html?file=${encodeURIComponent(filePath)}`,
+          url: filePath,
+          name: fileName,
+        };
+      }
+
+      if (previewUrl) {
+        return {
+          type: "file",
+          previewUrl,
+          url: filePath || previewUrl,
+          name: fileName,
+        };
+      }
+
+      return null;
+    };
+
+    // 判断是否可预览文件
+    const canPreviewFile = (record = {}) => {
+      return !!resolvePreviewData(record) || !!record.file_path;
+    };
+
     // 在线预览
     const imgVisible = ref(false);
     const imgList = ref([]);
     const previewUrlData = ref({});
+    const previewFileVisible = ref(false);
+
+    // 关闭图片预览
+    const onCloseImgPreview = () => {
+      imgVisible.value = false;
+      imgList.value = [];
+    };
+
+    // 关闭预览文件
+    const onClosePreviewFile = () => {
+      previewFileVisible.value = false;
+      previewUrlData.value = {};
+    };
+
+    // 预览文件
     const previewClick = (record) => {
-      window.microApp.forceDispatch({
-        type: "previewFile",
-        visible: true,
-        file: { url: record.file_path },
-        filePreviewUrl: record.preview_url.previewUrl,
-      });
+      if(props.isCustomPreview){
+        context.emit("previewFile", record);
+        return;
+      }
+      // 视频和音频文件直接由浏览器打开，避免进入 iframe 预览导致无法播放
+      if (record.file_path && isMediaFile(record?.file_path)) {
+        record.file_path && window.open(record.file_path);
+        return;
+      }
+      if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.microApp.forceDispatch({
+          type: "previewFile",
+          visible: true,
+          file: {
+            url: record?.file_path || '',
+            name: record?.name || '',
+          },
+          filePreviewUrl: record?.preview_url?.previewUrl || record?.online_preview?.previewUrl || '',
+        });
+      } else {
+        const previewData = resolvePreviewData(record);
+        if (previewData?.type === "image") {
+          imgList.value = [previewData.url];
+          imgVisible.value = true;
+          return;
+        }
+        if (previewData?.type === "file") {
+          previewUrlData.value = previewData;
+          previewFileVisible.value = true;
+          return;
+        }
+        // 没有可预览地址时，保留浏览器原生打开行为，避免误拦截下载型文件
+        record.file_path && window.open(record.file_path);
+      }
     };
 
     // 附件编辑
@@ -592,7 +724,6 @@ export default defineComponent({
       if(props.typeFrom){
         attachParams.typeFrom = props.typeFrom;
       }
-      console.log("attachParams", attachParams);
       getDataList();
       loaded = true;
     };
@@ -716,11 +847,15 @@ export default defineComponent({
       downloadFile,
       previewClick,
       previewUrlData,
+      previewFileVisible,
+      onClosePreviewFile,
 
       imgList,
       imgVisible,
+      onCloseImgPreview,
       multiAddVisible,
       handleRequest,
+      canPreviewFile,
 
       getAnnexEdit,
       mobileAnnexUploadConfigInfo,

package/src/components/AttachmentInfo/modules/AddAction.vue

@@ -81,6 +81,7 @@
     :annexAdd="annexAdd"
     :getFile="getFile"
     @handleCommit="handleAddSuccess"
+    @previewFile="previewClick"
     @request="handleRequest"/>
 </template>
 
@@ -265,6 +266,11 @@ export default defineComponent({
       return props.getFile ? {} : params;
     });
 
+    // 预览文件
+    const previewClick = (previewData) => {
+      context.emit("previewFile", previewData);
+    };
+
     return {
       t,
       multiAddVisible,
@@ -277,6 +283,7 @@ export default defineComponent({
       handleAddSuccess,
       handleRequest,
       addRequest,
+      previewClick,
     };
   },
 });

package/src/components/AttachmentInfo/modules/MultipleAddAttachments.vue

@@ -245,16 +245,33 @@ export default {
     const imgVisible = ref(false);
     const imgList = ref([]);
     const previewClick = (record) => {
+      let fileUrl = record.response.data.fileUrl || '';
+      let previewUrl = record.response.data.previewUrl || '';
+      const fileName = record?.originFileObj?.name || record?.name || '';
       if (record.type.startsWith("image")) {
-        imgList.value = [record.response.data.fileUrl];
+        imgList.value = [fileUrl];
         imgVisible.value = true;
       } else {
-        window.microApp.forceDispatch({
-        type: "previewFile",
-        visible: true,
-        file: { url: record.response.data.fileUrl },
-        filePreviewUrl: record.response.data.previewUrl,
-      });
+        if (window.__MICRO_APP_ENVIRONMENT__) {
+          window.microApp.forceDispatch({
+            type: "previewFile",
+            visible: true,
+            file: {
+              url: fileUrl,
+              name: fileName,
+            },
+            filePreviewUrl: previewUrl || '',
+          });
+        } else {
+          let previewData = {
+            file_path: fileUrl,
+            preview_url: {
+              previewUrl
+            },
+            name: fileName,
+          }
+          context.emit("previewFile", previewData);
+        }
       }
     };
 

package/src/components/ExtraManage/components/ExtraManageEdit.vue

@@ -111,6 +111,15 @@
           :config="item"
           :validateInfo="validateInfos[item.key]"
         />
+        <a-col :span="8" v-if="displayStatus">
+          <a-form-item :label="t('common.table.status')">
+            <a-switch
+                v-model:checked="formState.status"
+                :checkedValue="1"
+                :unCheckedValue="0"
+            />
+          </a-form-item>
+        </a-col>
         <a-col :span="24">
           <div class="text-title">{{t('components.extraManageEdit.enterSetting')}}</div>
         </a-col>
@@ -272,6 +281,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    displayStatus:{
+      type: Boolean,
+      default: true,
+    },
   },
   components: {
     BlModal,
@@ -575,6 +588,9 @@ export default defineComponent({
     const init = () => {
       gettypelist('extra_field_type')
       getCompanyList();
+      if (props.displayStatus){
+        state.formState.status = 1
+      }
       if (props.id) {
         // 编辑
         let detailInfo = props.requestAllInfo.detail;

package/src/components/ExtraManage/index.vue

@@ -28,6 +28,14 @@
           @change="handleCustomConfigChange($event, record, item)"
         />
       </template>
+      <template #column-status="{record}">
+        <a-switch
+            :checked="getStatusValue(record)"
+            :checkedValue="1"
+            :unCheckedValue="0"
+            @change="statusChange(record, $event)"
+        />
+      </template>
       <template #column-action="{ record }">
         <div v-if="record.is_system == 1">
           <a-button @click="handleEdit(record)" type="link" v-if="record?.can_edit">{{t('common.button.edit')}}</a-button>
@@ -52,6 +60,7 @@
       :requestAllInfo="requestAllInfo"
       :requestAllParams="requestAllParams"
       :displayCompany="displayCompany"
+      :display-status="displayStatus"
       :expandFieldsExtraParams="expandFieldsExtraParams"
       :id="editId"
       :hasVillageSelect="hasVillageSelect"
@@ -135,6 +144,11 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    // 是否展示状态
+    displayStatus:{
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     BlDrawer,
@@ -147,6 +161,7 @@ export default defineComponent({
       editVisible: false,
       editId: 0,
       customTable: null,
+      statusMap: {},
     });
 
     // 处理后的自定义配置项
@@ -298,6 +313,15 @@ export default defineComponent({
       const fillColumnIndex = _deepColumns.findIndex((column) => column.key === 'fill');
       const customColumns = getColumnsVisibleCustomConfigItems(normalizedCustomConfigItems.value);
       _deepColumns.splice(fillColumnIndex, 0, ...customColumns);
+      if (props.displayStatus){
+        let index = _deepColumns.length - 3
+        _deepColumns.splice(index, 0, {
+          title: t('common.table.status'),
+          dataIndex: "status" ,
+          key: 'status',
+          width: 120,
+        })
+      }
       return _deepColumns;
     });
 
@@ -346,6 +370,40 @@ export default defineComponent({
       });
     };
 
+    const getStatusValue = (record) => {
+      const key = record?.id;
+      if (Object.prototype.hasOwnProperty.call(state.statusMap, key)) {
+        return state.statusMap[key];
+      }
+      return Number(record?.status) === 1 ? 1 : 0;
+    }
+
+    const statusChange = (record, checked) => {
+      const status = checked ? 1 : 0;
+      const oldStatus = getStatusValue(record);
+      state.statusMap[record.id] = status;
+      record.status = status;
+      const params = { ...record, status };
+      // 编辑
+      emit("request", {
+        params: {
+          method: 'put',
+          server: props.requestAllInfo.edit.service,
+          url: props.requestAllInfo.edit.serviceUrl.replace(/\${id}/g, record.id),
+          extra: {
+            ...params,
+          },
+        },
+        success: (res) => {
+          message.success(res?.msg || t('common.save.success'));
+        },
+        fail: () => {
+          state.statusMap[record.id] = oldStatus;
+          record.status = oldStatus;
+        },
+      })
+    }
+
     return {
       t,
       ...toRefs(state),
@@ -361,6 +419,8 @@ export default defineComponent({
       getCustomConfigEditorProps,
       handleCustomConfigChange,
       editableCustomConfigItems,
+      getStatusValue,
+      statusChange,
     };
   },
 });

package/src/components/PreviewFile/PrintModal.vue

@@ -0,0 +1,158 @@
+<template>
+  <a-modal v-model:visible="showModal" :title="t('PreviewFile.printModal.title')" @cancel="handleOk">
+    <div>
+      {{ t('PreviewFile.printModal.noticeStart') }}
+      <div
+        class="text-blue"
+        style="display: inline-block; cursor: pointer"
+        @click="downloadExe"
+      >
+        {{ t('PreviewFile.printModal.download') }}
+        <cloud-download-outlined style="font-size: 20px" />
+      </div>
+      {{ t('PreviewFile.printModal.noticeEnd') }}
+    </div>
+    <template #footer>
+      <div style="text-align: right">
+        <a-button type="primary" @click="handleOk">{{ t('PreviewFile.printModal.ok') }}</a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import { onUnmounted, reactive, toRefs, watch } from "vue";
+import { CloudDownloadOutlined } from "@ant-design/icons-vue";
+import { message, Modal, Button } from "ant-design-vue";
+import { t, loadLanguageAsync } from "../../locale";
+import utils from "../../common/utils/util";
+
+export default {
+  components: { 
+    CloudDownloadOutlined, 
+    'a-button': Button, 
+    'a-modal': Modal 
+  },
+  props: {
+    usePrint: {
+      type: Boolean,
+      default: false,
+    },
+    file_list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      showModal: false,
+    });
+
+    const printHost = "http://127.0.0.1:19889/api";
+
+    // 带超时的本地接口请求，避免插件无响应时页面一直挂起
+    const requestWithTimeout = async (url, options = {}, timeout = 2000) => {
+      const controller = new AbortController();
+      const timer = window.setTimeout(() => controller.abort(), timeout);
+      try {
+        return await fetch(url, {
+          ...options,
+          signal: controller.signal,
+        });
+      } finally {
+        window.clearTimeout(timer);
+      }
+    };
+
+    // 连接成功后，把文件列表发给本地打印插件
+    const commitPrint = async () => {
+      const param = {
+        file_list: props.file_list,
+      };
+      console.log(JSON.stringify(param));
+      try {
+        const response = await requestWithTimeout(
+          `${printHost}/printDoc`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(param),
+          },
+          2000
+        );
+        if (!response.ok) {
+          throw new Error(response.statusText || "print failed");
+        }
+        message.success(t("PreviewFile.printModal.success"));
+        context.emit("change");
+      } catch (error) {
+        message.error(error?.message || error);
+      }
+    };
+
+    // 先检查本地打印插件是否已连接，未连接时展示下载提示
+    const connect = async () => {
+      try {
+        const response = await requestWithTimeout(`${printHost}/connect`, {
+          method: "GET",
+        }, 1000);
+        if (!response.ok) {
+          throw new Error(response.statusText || "connect failed");
+        }
+        console.log(await response.text());
+        await commitPrint();
+      } catch (error) {
+        console.error(error);
+        state.showModal = true;
+      }
+    };
+
+    // 下载网页打印插件安装包
+    const downloadExe = () => {
+      const url =
+          "https://bailing-customer-1305744786.cos.ap-nanjing.myqcloud.com/http_printer/%E7%BD%91%E9%A1%B5%E6%89%93%E5%8D%B0%E6%8F%92%E4%BB%B6.exe";
+      window.open(url);
+    };
+
+    // 关闭提示弹窗并通知父组件结束本次打印动作
+    const handleOk = () => {
+      state.showModal = false;
+      context.emit("change");
+    };
+
+    // 外部触发打印时，尝试连接本地插件
+    watch(() => props.usePrint, (value) => {
+      if (value) {
+        connect();
+      } else {
+        state.showModal = false;
+      }
+    });
+
+    // 保持当前组件的语言环境和全局语言一致
+    const handleLangChange = (event) => {
+      loadLanguageAsync(event.newValue);
+    };
+
+    loadLanguageAsync(utils.getLang());
+    window.addEventListener("setBLLang", handleLangChange);
+    onUnmounted(() => {
+      window.removeEventListener("setBLLang", handleLangChange);
+    });
+
+    return {
+      ...toRefs(state),
+      t,
+      downloadExe,
+      connect,
+      commitPrint,
+      handleOk,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

package/src/components/PreviewFile/index.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <a-modal
+      :width="1200"
+      :visible="visible"
+      centered
+      :footer="null"
+      :bodyStyle="{
+        padding: '0',
+      }"
+      destroyOnClose
+      @cancel="onClose"
+    >
+      <div class="content">
+        <a-spin :tip="t('PreviewFile.loading')" :spinning="spinLoading" :style="{ height: spinHeight }">
+          <iframe
+            v-if="previewUrl"
+            :height="clientHeight * 0.85"
+            width="100%"
+            :src="previewUrl"
+            allowtransparency="true"
+            allowfullscreen="true"
+            allowfullscreenInteractive="true"
+            scrolling="no"
+            border="0"
+            frameborder="0"
+            @load="handleLoad"
+          ></iframe>
+        </a-spin>
+      </div>
+      <template #title>
+        <a-space>
+          <div>{{ displayTitle }}</div>
+          <div v-if="esignDetail.esignCheck && (fileUrl || canPrint)">
+            <a-space>
+              <a-button v-if="fileUrl" :loading="esignLoading" type="primary" @click="operateClick('download')">
+                <DownloadOutlined />
+                {{ t('PreviewFile.download') }}
+              </a-button>
+              <a-button v-if="canPrint" type="primary" @click="printFile">
+                <PrinterOutlined />
+                {{ t('PreviewFile.print') }}
+              </a-button>
+            </a-space>
+          </div>
+        </a-space>
+      </template>
+    </a-modal>
+    <!--打印-->
+    <print-modal :file_list="printList" :usePrint="showModal" @change="showModal = false" />
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, onUnmounted, reactive, toRefs, watch } from "vue";
+import { Modal, Spin, Button, Space } from "ant-design-vue";
+import { DownloadOutlined, PrinterOutlined } from "@ant-design/icons-vue";
+import PrintModal from './PrintModal.vue';
+import { t, loadLanguageAsync } from "../../locale";
+import utils from "../../common/utils/util";
+
+export default defineComponent({
+  name: "PreviewFile",
+  components: {
+    PrintModal,
+    DownloadOutlined,
+    PrinterOutlined,
+    "a-modal": Modal,
+    "a-spin": Spin,
+    "a-button": Button,
+    "a-space": Space,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    esignDetail: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    title: {
+      type: String,
+      default: () => {
+        return t('PreviewFile.defaultTitle')
+      },
+    },
+    urlData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, {emit}) {
+    const state = reactive({
+      previewUrl: "",
+      fileUrl: "",
+      name: "",
+      clientHeight: document.body.clientHeight,
+      esignLoading: false,
+      spinLoading: true,
+      showModal: false,
+      canPrint: false,
+      printList: [],
+    });
+
+    // 预览弹窗标题统一使用多语言兜底，避免父组件不传标题时出现空白
+    const displayTitle = computed(() => props.title || t('PreviewFile.defaultTitle'));
+
+    // 重置所有预览状态，避免关闭后再次打开时残留上一次的文件信息
+    const resetPreviewState = () => {
+      state.previewUrl = "";
+      state.fileUrl = "";
+      state.name = "";
+      state.esignLoading = false;
+      state.spinLoading = true;
+      state.showModal = false;
+      state.canPrint = false;
+      state.printList = [];
+    };
+
+    // 获取文件后缀，统一处理带 query/hash 的预览地址
+    const getFileSuffix = (fileUrl = "") => {
+      if (!fileUrl) return "";
+      return fileUrl.split("?")[0].split("#")[0].split(".").pop().toLowerCase();
+    };
+
+    const operateClick = (action) => {
+      // 下载按钮只处理本地可下载的文档类型，其他文件直接交给浏览器打开
+      if (action == "download") {
+        const fileType = getFileSuffix(state.fileUrl);
+        let type = "";
+        if (["xlsx", "xls"].includes(fileType)) {
+          type = 'xlsx'
+        }
+        if (["docx", "doc"].includes(fileType)) {
+          type = 'word'
+        }
+        if (["pdf"].includes(fileType)) {
+          type = 'pdf'
+        }
+        if (state.name && ["pdf", "word", "xlsx"].includes(type)) {
+          if (state.esignLoading) {
+            return;
+          }
+          state.esignLoading = true;
+          fetchDownloadFile({
+            url: state.fileUrl,
+            name: state.name,
+            type,
+          });
+        } else {
+          window.open(state.fileUrl);
+        }
+        return;
+      }
+    };
+
+    // 使用浏览器能力完成本地下载，避免把下载链接再次交给预览页处理
+    const fetchDownloadFile = async (data) => {
+      if (!data?.url) {
+        state.esignLoading = false;
+        return;
+      }
+      let downloadUrl = "";
+      try {
+        const response = await fetch(data.url, {
+          method: "get",
+          mode: "cors",
+        });
+        if (!response.ok) {
+          throw new Error("download failed");
+        }
+        const res = await response.blob();
+        const typeObj = {
+          pdf: "application/pdf",
+          word: "application/msword",
+          xlsx: "application/vnd.ms-excel",
+        };
+        downloadUrl = window.URL.createObjectURL(
+          new Blob([res], {
+            type: typeObj[data.type] || "",
+          })
+        );
+        const link = document.createElement("a");
+        link.href = downloadUrl;
+        link.setAttribute("download", data.name);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+      } catch (error) {
+        window.open(data.url);
+      } finally {
+        if (downloadUrl) {
+          window.URL.revokeObjectURL(downloadUrl);
+        }
+        state.esignLoading = false;
+      }
+    };
+
+    const onClose = () => {
+      resetPreviewState();
+      emit("close");
+    };
+
+    const handleLoad = () => {
+      state.spinLoading = false;
+    };
+
+    const spinHeight = computed(() => {
+      return state.clientHeight * 0.85 + "px";
+    });
+
+    // 打开弹窗时重建预览状态，关闭时清理现场，避免上一个文件的状态串到下一个文件
+    watch(
+      () => [props.visible, props.urlData?.previewUrl, props.urlData?.url, props.urlData?.name],
+      ([visible]) => {
+        if (visible) {
+          state.previewUrl = props.urlData?.previewUrl || "";
+          state.fileUrl = props.urlData?.url || "";
+          state.name = props.urlData?.name || "";
+          state.canPrint = state.fileUrl.endsWith(".docx");
+          state.spinLoading = !!state.previewUrl;
+          state.esignLoading = false;
+          state.showModal = false;
+          state.printList = [];
+        } else {
+          resetPreviewState();
+        }
+      }
+    );
+
+    const printFile = () => {
+      state.printList = [state.fileUrl];
+      state.showModal = true;
+    };
+
+    // 同步当前系统语言，保证单独使用该组件时多语言也能正常切换
+    const handleLangChange = (event) => {
+      loadLanguageAsync(event.newValue);
+    };
+
+    loadLanguageAsync(utils.getLang());
+    window.addEventListener("setBLLang", handleLangChange);
+    onUnmounted(() => {
+      window.removeEventListener("setBLLang", handleLangChange);
+    });
+
+    return {
+      ...toRefs(state),
+      t,
+      displayTitle,
+      onClose,
+      operateClick,
+      spinHeight,
+      handleLoad,
+      printFile,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.el-loading {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+:deep(.ant-spin-nested-loading) {
+  width: 100%;
+}
+</style>

package/src/components/components.js

@@ -51,3 +51,5 @@ export { default as PublicExtensionField } from "./PublicExtensionField/index.vu
 export { default as BlCreateChatBtn } from "./BlChat/createChatBtn.vue";//发起讨论按钮
 export { default as BlModal } from "./BlModal/index.vue";
 export { default as BlDrawer } from "./BlDrawer/index.vue";
+export { default as BlTinymceEditor } from "./BlTinymceEditor/index.vue";
+export { default as PreviewFile } from "./PreviewFile/index.vue";

package/src/locale/local/cht.json

@@ -515,5 +515,15 @@
 	"DepartmentUser.index.555981-1": "展開",
 	"DepartmentUser.index.555981-2": "收起",
   "BlMobileAnnexUpload.index.676543-0": "此 QR Code 於 15 分鐘內有效",
-  "AttchmentInfo.userShow": "對業戶开放"
+  "AttchmentInfo.userShow": "對業戶开放",
+  "PreviewFile.loading": "載入中...",
+  "PreviewFile.printModal.title": "提示訊息",
+  "PreviewFile.printModal.noticeStart": "您目前尚未開啟網頁列印插件，請先開啟或",
+  "PreviewFile.printModal.download": "點擊下載",
+  "PreviewFile.printModal.noticeEnd": "。電腦需安裝 Microsoft Word 或 WPS Office 才能使用。",
+  "PreviewFile.printModal.ok": "好的",
+  "PreviewFile.printModal.success": "發送成功",
+  "PreviewFile.download": "文件下載",
+  "PreviewFile.print": "列印文件",
+  "PreviewFile.defaultTitle": "預覽文件"
 }

package/src/locale/local/en.json

@@ -515,5 +515,15 @@
   "DepartmentUser.index.555981-1": "Expand",
   "DepartmentUser.index.555981-2": "Collapse",
   "BlMobileAnnexUpload.index.676543-0": "This QR code is valid for 15 minutes",
-  "AttchmentInfo.userShow": "Show to Users"
+  "AttchmentInfo.userShow": "Show to Users",
+  "PreviewFile.loading": "Loading...",
+  "PreviewFile.printModal.title": "Notice",
+  "PreviewFile.printModal.noticeStart": "The web print plugin is not open. Open it or",
+  "PreviewFile.printModal.download": "download it",
+  "PreviewFile.printModal.noticeEnd": ". Microsoft Word or WPS Office is also required.",
+  "PreviewFile.printModal.ok": "OK",
+  "PreviewFile.printModal.success": "Sent",
+  "PreviewFile.download": "Download File",
+  "PreviewFile.print": "Print File",
+  "PreviewFile.defaultTitle": "Preview File"
 }

package/src/locale/local/jp.json

@@ -515,5 +515,15 @@
   "DepartmentUser.index.555981-1": "展開",
   "DepartmentUser.index.555981-2": "折りたたむ",
   "BlMobileAnnexUpload.index.676543-0": "このQRコードは15分間有効です",
-  "AttchmentInfo.userShow": "ユーザー表示"
+  "AttchmentInfo.userShow": "ユーザー表示",
+  "PreviewFile.loading": "読み込み中...",
+  "PreviewFile.printModal.title": "お知らせ",
+  "PreviewFile.printModal.noticeStart": "Web 印刷プラグインが起動していません。起動するか、",
+  "PreviewFile.printModal.download": "ダウンロードしてください",
+  "PreviewFile.printModal.noticeEnd": "。Microsoft Word または WPS Office も必要です。",
+  "PreviewFile.printModal.ok": "OK",
+  "PreviewFile.printModal.success": "送信しました",
+  "PreviewFile.download": "ファイルダウンロード",
+  "PreviewFile.print": "ファイル印刷",
+  "PreviewFile.defaultTitle": "ファイルをプレビュー"
 }

package/src/locale/local/zh-HK.json

@@ -515,5 +515,15 @@
   "BlMobileAnnexUpload.index-0": "查看二維碼",
   "BlMobileAnnexUpload.index-1": "使用手機掃碼上載",
   "modules.ListFieldModal.082665-0": "選項內容不能留空",
-  "AttchmentInfo.userShow": "對業戶开放"
+  "AttchmentInfo.userShow": "對業戶开放",
+  "PreviewFile.loading": "載入中...",
+  "PreviewFile.printModal.title": "提示訊息",
+  "PreviewFile.printModal.noticeStart": "您目前尚未開啟網頁列印插件，請先開啟或",
+  "PreviewFile.printModal.download": "點擊下載",
+  "PreviewFile.printModal.noticeEnd": "。電腦需安裝 Microsoft Word 或 WPS Office 才能使用。",
+  "PreviewFile.printModal.ok": "好的",
+  "PreviewFile.printModal.success": "發送成功",
+  "PreviewFile.download": "文件下載",
+  "PreviewFile.print": "列印文件",
+  "PreviewFile.defaultTitle": "預覽文件"
 }

package/src/locale/local/zh.json

@@ -515,5 +515,15 @@
 	"DepartmentUser.index.555981-1": "展开",
 	"DepartmentUser.index.555981-2": "收起",
   "BlMobileAnnexUpload.index.676543-0": "该二维码十五分钟内有效",
-  "AttchmentInfo.userShow": "对业户开放"
+  "AttchmentInfo.userShow": "对业户开放",
+  "PreviewFile.loading": "加载中...",
+  "PreviewFile.printModal.title": "温馨提示",
+  "PreviewFile.printModal.noticeStart": "您当前没有打开网页打印插件，请先打开或者",
+  "PreviewFile.printModal.download": "点击下载",
+  "PreviewFile.printModal.noticeEnd": "。电脑需要同时安装微软word软件或者wps软件，才能使用。",
+  "PreviewFile.printModal.ok": "好的",
+  "PreviewFile.printModal.success": "发送成功",
+  "PreviewFile.download": "文档下载",
+  "PreviewFile.print": "文档打印",
+  "PreviewFile.defaultTitle": "预览文档"
 }