wip: bookmark replace

src/api/infra/bookmark/index.ts

@@ -57,7 +57,7 @@ export interface TextExData extends AbstractExData {
  * @param fileId 文件id
  */
 export function getAllBookmarks(fileId: string | number) {
-  return defHttp.get<BookmarkQueryRespVo[]>({ url: `/infra/word/bookmark/file/${fileId}` })
+  return defHttp.post<BookmarkQueryRespVo[]>({ url: `/infra/word/bookmark/file/${fileId}` })
 }
 
 /**
@@ -66,5 +66,5 @@ export function getAllBookmarks(fileId: string | number) {
  * @param data 数据
  */
 export function getDoBookmarkReplace(fileId: string | number, data: BookmarkGenData) {
-  return defHttp.get({ url: `/infra/word/bookmark/file/${fileId}/generate`, data })
+  return defHttp.post({ url: `/infra/word/bookmark/file/${fileId}/generate`, data })
 }

src/views/infra/bookmark/index.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { Button } from 'ant-design-vue'
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
+import { useFileDialog } from '@vueuse/core'
 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'
+import type { BookmarkQueryRespVo } from '@/api/infra/bookmark'
+import { getAllBookmarks } from '@/api/infra/bookmark'
+import { useMessage } from '@/hooks/web/useMessage'
 
 defineOptions({ name: 'BookmarkReplace' })
 
@@ -16,10 +20,78 @@ 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)
+
+  await handleQueryBookmark()
+}
+
+const bookmarks = ref<BookmarkQueryRespVo[]>([])
+
+interface FormItemType {
+  name: string
+  type: string
+  value: string | File
+  fileName?: string
+}
+
+const formItems = ref<FormItemType[]>([])
+
+watchEffect(() => {
+  if (currentEditFile.value) {
+    bookmarks.value = []
+    formItems.value = []
+  }
+})
+
+const { createMessage } = useMessage()
+
+async function handleQueryBookmark() {
+  bookmarks.value = []
+  formItems.value = []
+  if (currentEditFile.value)
+    bookmarks.value = await getAllBookmarks(currentEditFile.value.id)
+
+  else
+    createMessage.error('请选择文件！')
+
+  for (const bk of bookmarks.value) {
+    let type = ''
+    if (!bk.type)
+      type = 'TEXT'
+    else
+      type = bk.type
+
+    formItems.value.push({ name: bk.name, type, value: '' })
+  }
+}
+
+const { files, open, reset, onChange } = useFileDialog({
+  accept: 'image/*',
+  directory: false,
+})
+
+let currentEdit
+
+function handleSelectPicture(item: FormItemType) {
+  reset()
+  open()
+  currentEdit = item
+}
+
+onChange(() => {
+  if (files.value?.length && files.value?.length > 0 && currentEdit) {
+    const file = files.value.item(0)
+    if (file) {
+      currentEdit.value = file
+      currentEdit.fileName = file.name
+    }
+  }
+})
+
+function handleGenerateNew() {
+
 }
 </script>
 
@@ -36,13 +108,45 @@ async function handleSelect(file: FileVO) {
               : {{ currentEditFile?.name }}
             </div>
             <div class="flex flex-row items-center">
-              <Button>
+              <Button @click="handleQueryBookmark">
                 获取书签
               </Button>
             </div>
           </div>
-          <div class="h-full rounded bg-white dark:bg-black">
-            left: {{ previewUrl }}
+          <div class="h-full w-full overflow-scroll rounded bg-white p-4 dark:bg-black">
+            <a-form
+              class="w-full"
+              layout="vertical"
+              :label-col="{ span: 16 }"
+            >
+              <a-col v-for="(item) in formItems" :key="item.name">
+                <a-form-item :label="item.name">
+                  <a-radio-group v-model:value="item.type" class="mb-2" :disabled="item.type === 'PICTURE_DESC'">
+                    <a-radio value="TEXT">
+                      文本
+                    </a-radio>
+                    <a-radio value="PICTURE">
+                      图片
+                    </a-radio>
+                    <a-radio v-if="item.type === 'PICTURE_DESC'" value="PICTURE_DESC" :disabled="true">
+                      图片（替换）
+                    </a-radio>
+                  </a-radio-group>
+                  <a-input v-if="item.type === 'TEXT'" />
+                  <a-button v-if="item.type.includes('PICTURE')" @click="handleSelectPicture(item)">
+                    选择图片
+                  </a-button>
+                  <p v-if="item.type.includes('PICTURE') && item.value && item?.fileName" class="overflow-hidden">
+                    {{ item?.fileName }}
+                  </p>
+                </a-form-item>
+                <a-divider />
+              </a-col>
+            </a-form>
+
+            <a-button v-if="formItems.length > 0" type="primary" @click="handleGenerateNew">
+              生成替换后文件
+            </a-button>
           </div>
         </div>
         <div class="w-75% flex flex-row bg-white dark:bg-black">