瀏覽代碼

feature 1001563

参考文献段落的插入功能实现
Kevin Jiang 2 年之前
父節點
當前提交
f19e95715f

+ 13 - 3
src/views/report/components/ChapterEditor.vue

@@ -30,8 +30,10 @@ const keywordsEditor = ref<HTMLInputElement | null>(null);
 const keywordsEditing = ref(false);
 
 const fullTitle = ref('');
-
+// 参考文献抽屉组件ref
 const referenceDraw = ref<InstanceType<typeof ReferenceDraw> | null>(null);
+// 内容编辑器组件ref
+const contentEditor = ref<InstanceType<typeof ContentEditor> | null>(null)
 
 const emits = defineEmits<{
   (e: "update:data", data: Chapter): void;
@@ -99,6 +101,14 @@ function onMenuClick(e: { key: string }) {
 function searchReference() {
   referenceDraw.value?.show();
 }
+
+function onInsert(text: string) {
+  contentEditor.value?.insert(text)
+}
+
+function onReferenceDrawClose() {
+  contentEditor.value?.focus()
+}
 </script>
 
 <template>
@@ -158,7 +168,7 @@ function searchReference() {
       </a-col>
     </a-row>
     <p v-if="contentEditorVisible">
-      <ContentEditor :data="data.content" @change="onContentChange" />
+      <ContentEditor :data="data.content" @change="onContentChange" ref="contentEditor" />
     </p>
     <div class="chapter-button-group" v-if="contentEditorVisible">
       <a-space>
@@ -167,7 +177,7 @@ function searchReference() {
       </a-space>
     </div>
   </div>
-  <ReferenceDraw :keywords="data.keywords || []" ref="referenceDraw" />
+  <ReferenceDraw :keywords="data.keywords || []" ref="referenceDraw" @insert="onInsert" @close="onReferenceDrawClose" />
 </template>
 
 <style scoped lang="scss">

+ 20 - 0
src/views/report/components/ContentEditor.vue

@@ -70,6 +70,20 @@ function onChange() {
   emits("change", content.value);
 }
 
+const editor = ref<any>(null)
+
+function onInit(event: any, editorIn: any) {
+  editor.value = editorIn
+}
+
+function focus() {
+  editor.value.focus()
+}
+
+function insert(text: string) {
+  editor.value.insertContent(text)
+}
+
 onMounted(() => {
   content.value = props.data;
 
@@ -80,6 +94,11 @@ onMounted(() => {
     }
   );
 });
+
+defineExpose({
+  focus,
+  insert,
+})
 </script>
 
 <template>
@@ -89,5 +108,6 @@ onMounted(() => {
     v-model="content"
     output-format="html"
     @change="onChange"
+    @init="onInit"
   />
 </template>

+ 7 - 1
src/views/report/components/reference/ReferenceDraw.vue

@@ -16,6 +16,11 @@ const props = defineProps({
   }
 });
 
+const emits = defineEmits<{
+  (e: "insert", text: string): void;
+  (e: "close"): void;
+}>();
+
 // 组件可见状态
 const visible = ref<boolean>(false);
 // 章节搜索结果总数量
@@ -85,6 +90,7 @@ function onReferenceSearchWithInSearch(queryWithInKeywordsIn: string[]) {
 
 const onClose = () => {
   visible.value = false;
+  emits("close")
 };
 
 const show = () => {
@@ -119,7 +125,7 @@ defineExpose({
     </a-divider>
     <SpinComponent :spinning="loading">
       <div v-for="(item, index) in referenceSearchResult" :key="index">
-        <ReferenceSearchResultItem :data="item" />
+        <ReferenceSearchResultItem :data="item" @insert="emits('insert', $event)" />
         <a-divider class="result-item-divider" v-if="index < referenceSearchResult.length - 1" />
       </div>
       <div class="pigination-wrap">

+ 10 - 1
src/views/report/components/reference/ReferenceSearchResultItem.vue

@@ -11,6 +11,10 @@ const props = defineProps({
   }
 });
 
+const emits = defineEmits<{
+  (e: "insert", text: string): void;
+}>();
+
 const clipboard = useClipboard()
 
 function getSelectedText() {
@@ -31,6 +35,11 @@ function onCopy() {
     message.success(msg)
   })
 }
+
+function onInsertion() {
+  const text = getSelectedText() || props.data.content
+  emits("insert", text)
+}
 </script>
 
 <template>
@@ -50,7 +59,7 @@ function onCopy() {
     <a-radio-group>
       <a-radio-button value="large">标记使用</a-radio-button>
       <a-radio-button value="default" @mousedown="onCopy">复制</a-radio-button>
-      <a-radio-button value="small">插入</a-radio-button>
+      <a-radio-button value="small" @mousedown="onInsertion">插入</a-radio-button>
     </a-radio-group>
   </div>
 </template>