wip: bookmark replace

src/api/infra/bookmark/index.ts

@@ -0,0 +1,70 @@
+import { defHttp } from '@/utils/http/axios'
+
+/**
+ * 查询书签
+ */
+export interface BookmarkQueryRespVo {
+
+  /** 标识 */
+  name: string
+
+  /** 类型 */
+  type?: BookmarkType
+}
+
+export interface BookmarkGenData {
+  /** 书签名称（标识） */
+  name: string
+
+  /** 扩展类型 */
+  extData: PictureExData | TextExData
+}
+
+/** 书签需要替换的数据类型（文本，图片，图片（描述）） */
+export type BookmarkType = 'TEXT' | 'PICTURE' | 'PICTURE_DESC'
+
+/** 图片提供的data类型，下载地址，base64文本，服务器绝对路径 */
+export type PictureProvideDataType = 'DOWNLOAD_URL' | 'BASE64' | 'ABSOLUTE_PATH'
+
+/**
+ * 书签数据类型
+ */
+interface AbstractExData {
+  type: BookmarkType
+  value: string
+}
+
+/**
+ * 图片数据
+ */
+export interface PictureExData extends AbstractExData {
+  width: number
+  height: number
+  pictureName: string
+  dataType: PictureProvideDataType
+}
+
+/**
+ * 文本数据
+ */
+export interface TextExData extends AbstractExData {
+  bold: boolean
+  italic: boolean
+}
+
+/**
+ * 查询文件中所有书签
+ * @param fileId 文件id
+ */
+export function getAllBookmarks(fileId: string | number) {
+  return defHttp.get<BookmarkQueryRespVo[]>({ url: `/infra/word/bookmark/file/${fileId}` })
+}
+
+/**
+ * 执行书签替换
+ * @param fileId 文件id
+ * @param data 数据
+ */
+export function getDoBookmarkReplace(fileId: string | number, data: BookmarkGenData) {
+  return defHttp.get({ url: `/infra/word/bookmark/file/${fileId}/generate`, data })
+}

src/components/FileSelect/index.ts

@@ -0,0 +1,3 @@
+import FileSelectModal from './src/FileSelectModal.vue'
+
+export { FileSelectModal }

src/components/FileSelect/src/FileSelectModal.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { FileVO } from '@/api/infra/file'
+import { getFilePage } from '@/api/infra/file'
+import { BasicTable, useTable } from '@/components/Table'
+import { columns, searchFormSchema } from '@/views/infra/file/file.data'
+import { BasicModal, useModalInner } from '@/components/Modal'
+
+const emit = defineEmits(['select'])
+
+const [registerTable, { getSelectRows }] = useTable({
+  title: '文件列表',
+  api: getFilePage,
+  columns,
+  formConfig: { labelWidth: 120, schemas: searchFormSchema },
+  useSearchForm: true,
+  showTableSetting: true,
+  showIndexColumn: false,
+  clickToRowSelect: true,
+  canResize: false,
+  isCanResizeParent: false,
+  scroll: { y: 360 },
+  rowSelection: { type: 'radio' },
+  afterFetch: (data: FileVO[]) => {
+    return data.filter((d) => {
+      return d.name.endsWith('.doc') || d.name.endsWith('.docx')
+    })
+  },
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
+  setModalProps({ height: 500 })
+})
+
+function handleConfirm() {
+  const row = getSelectRows() as FileVO[]
+  if (row.length > 0)
+    emit('select', row[0])
+
+  closeModal()
+}
+</script>
+
+<template>
+  <div>
+    <BasicModal width="80%" v-bind="$attrs" title="选择文件" @register="registerModal" @ok="handleConfirm">
+      <BasicTable @register="registerTable" />
+    </BasicModal>
+  </div>
+</template>

src/components/IFrame/src/IFrame.vue

@@ -4,12 +4,20 @@ import { propTypes } from '@/utils/propTypes'
 
 const props = defineProps({
   src: propTypes.string.def(''),
+  height: {
+    type: [String, Number],
+  },
 })
 const loading = ref(true)
 const height = ref('')
 const frameRef = ref<HTMLElement | null>(null)
 function init() {
-  height.value = `${document.documentElement.clientHeight - 94.5}px`
+  console.warn(height.value)
+  if (!props.height)
+    height.value = `${document.documentElement.clientHeight - 94.5}px`
+  else
+    height.value = props.height
+
   loading.value = false
 }
 onMounted(() => {

src/utils/file/preview.ts

@@ -0,0 +1,11 @@
+import { getConfigKey } from '@/api/infra/config'
+
+/**
+ * 获取文件预览地址
+ * @param fileId
+ */
+export async function initFilePreviewUrl(fileId: string | number): Promise<string> {
+  const wopi_client = await getConfigKey('wopi_client_addr')
+  const wopi_server = await getConfigKey('wopi_server_ip_addr')
+  return `${wopi_client}?lang=zh-cn&WOPISrc=${wopi_server}/admin-api/infra/file/preview/wopi/files/${fileId}`
+}

src/views/infra/bookmark/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Button } from 'ant-design-vue'
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+import { FileSelectModal } from '@/components/FileSelect'
+import { useModal } from '@/components/Modal'
+import type { FileVO } from '@/api/infra/file'
+import { initFilePreviewUrl } from '@/utils/file/preview'
+
+defineOptions({ name: 'BookmarkReplace' })
+
+const previewUrl = ref<string | undefined>(undefined)
+
+const [registerModal, { openModal }] = useModal()
+
+const currentEditFile = ref<FileVO | undefined>(undefined)
+
+async function handleSelect(file: FileVO) {
+  console.warn(file)
+  currentEditFile.value = file
+
+  previewUrl.value = await initFilePreviewUrl(file.id)
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col p-2 pt-4">
+      <div class="h-[calc(100vh-105px)] w-full flex flex-row">
+        <div class="mr-2 h-full w-25% flex flex-col">
+          <div class="mb-2 flex flex-row items-center justify-between rounded bg-white px-2 py-2 dark:bg-black">
+            <div class="flex flex-row items-center">
+              <Button type="primary" class="mr-2" @click="openModal()">
+                选择文件
+              </Button>
+              : {{ currentEditFile?.name }}
+            </div>
+            <div class="flex flex-row items-center">
+              <Button>
+                获取书签
+              </Button>
+            </div>
+          </div>
+          <div class="h-full rounded bg-white dark:bg-black">
+            left: {{ previewUrl }}
+          </div>
+        </div>
+        <div class="w-75% flex flex-row bg-white dark:bg-black">
+          <i-frame v-if="previewUrl" class="w-full bg-white dark:bg-black" :src="previewUrl" height="calc(100vh - 105px)" />
+        </div>
+      </div>
+    </div>
+
+    <FileSelectModal v-bind="$attrs" @register="registerModal" @select="handleSelect" />
+  </div>
+</template>

src/views/infra/file/index.vue

@@ -12,7 +12,7 @@ import { getAccessToken, getTenantId } from '@/utils/auth'
 import { copyText } from '@/utils/copyTextToClipboard'
 import { uploadApi } from '@/api/base/upload'
 import { DocAlert } from '@/components/DocAlert'
-import { getConfigKey } from '@/api/infra/config'
+import { initFilePreviewUrl } from '@/utils/file/preview'
 
 defineOptions({ name: 'InfraFile' })
 
@@ -64,9 +64,8 @@ async function handleOnlineView(record: Recordable, type: 'openNewTab' | 'iframe
     createMessage.success(`暂不支持预览 ${fileType} 格式文件!`)
     return
   }
-  const wopi_client = await getConfigKey('wopi_client_addr')
-  const wopi_server = await getConfigKey('wopi_server_ip_addr')
-  const previewUlr = `${wopi_client}?lang=zh-cn&WOPISrc=${wopi_server}/admin-api/infra/file/preview/wopi/files/${record.id}`
+
+  const previewUlr = await initFilePreviewUrl(record.id)
 
   if (type === 'openNewTab')
     window.open(previewUlr)