xiaoshu/src/components/dialog-wrap/DocRefItem.vue

<template>
    <div>
        <a-popover :title="knowledge.doc_name" position="left">
            <div @click="openDocuementPage(knowledge)" class="doc-ref-container">
                <span class="doc-ref-index">{{ knowledgeIndex + 1 }}</span>
                <span class="doc-ref-label">{{ knowledge.doc_name }}</span>
            </div>
            <template #content>
                <div class="knowledge-detail">
                    <div class="knowledge-content">
                        {{ knowledge.content_ltks }}
                    </div>
                    <div class="knowledge-footer">
                        <p>检索片段</p>
                        <p>
                            <span v-for="(content, contentIndex) in knowledge.content_ltks" :key="contentIndex"
                                :class="{ active: knowledge.page === contentIndex }" @click="() => {
                                    knowledge.page = contentIndex;
                                }
                                    ">{{ contentIndex + 1 }}</span>
                        </p>
                        <!-- TODO详情暂时注释 -->
                        <p @click="goKnowledge(knowledge)">查看详情></p>
                    </div>
                </div>
            </template>
        </a-popover>
    </div>
</template>
<script setup>
import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from "vue";
import { defineEmits } from 'vue'
import { getDocumentUrl } from '../../ajax/document';

const props = defineProps({
    knowledge: Object,
    knowledgeIndex: Number
});
const emit = defineEmits(['go-document']);

const openDocuementPage = (knowledge) => {
    const doc_name = knowledge.doc_name;
    const doc_id = knowledge.id;

    // const pdf_url = `http://192.168.20.119:11080/v1/document/get/${doc_id}`;
    const pdf_url = getDocumentUrl(doc_id);

    window.open(pdf_url);
}
const goKnowledge = (knowledge) => {
    emit('go-document', knowledge)
}
</script>
<style scoped>
.knowledge-detail {
    width: 320px;
    padding-top: 20px;

    .knowledge-content {
        height: 300px;
        overflow-y: auto;
        line-height: 30px;
    }

    .knowledge-footer {
        border-top: 1px solid rgba(229, 229, 229, 1);
        margin-top: 20px;
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            &:nth-child(1) {
                opacity: 0.8;
            }

            &:nth-child(2) {
                flex: 1;
                display: flex;
                justify-content: left;
                margin: 0 30px;

                >span {
                    margin: 0 5px;
                    cursor: pointer;

                    &:hover,
                    &.active {
                        color: #00aea3;
                    }
                }
            }

            &:nth-child(3) {
                font-weight: bold;
                cursor: pointer;

                &:hover {
                    color: #00aea3;
                }
            }
        }
    }
}

.doc-ref-container {
    height: 40px;
    display: inline-flex;
    align-items: center;
}

.doc-ref-index {
    display: inline-block;
    background-color: #00aea333;
    color: #00aea3;
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 12px;

    /* margin: 0 5px; */
    cursor: pointer;
}

.doc-ref-label {
    /* margin: 0 5px; */
    cursor: pointer;
}

.doc-ref-label:hover {
    color: #00aea3;
}
</style>