urbanLifeline/urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue

<template>
    <AdminLayout title="知识库管理" info="管理外部和内部知识库文档">
        <template #action>
            <el-button type="primary" @click="showUploadDialog = true">
                <el-icon><Upload /></el-icon>
                上传文档
            </el-button>
        </template>

        <div class="knowledge-container">
            <el-card>
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="外部知识库" name="external">
                        <p class="tab-desc">面向客户的知识库内容，包含设备操作指南、故障解决方案等</p>

                        <div class="kb-categories">
                            <div v-for="cat in externalCategories" :key="cat.key" class="kb-category-card"
                                :class="{ active: activeExternalCat === cat.key }" @click="activeExternalCat = cat.key">
                                <el-icon :style="{ color: cat.color }"><component :is="cat.icon" /></el-icon>
                                <span class="cat-name">{{ cat.name }}</span>
                                <span class="cat-count">{{ cat.count }} 个文件</span>
                            </div>
                        </div>

                        <div class="kb-files-section">
                            <div class="section-toolbar">
                                <h3>{{ currentExternalCatName }}</h3>
                                <el-input v-model="externalSearch" placeholder="搜索文件名" style="width: 240px;" :prefix-icon="Search" clearable />
                            </div>

                            <el-table :data="filteredExternalFiles" style="width: 100%">
                                <el-table-column prop="name" label="文件名" min-width="280">
                                    <template #default="{ row }">
                                        <div class="file-name-cell">
                                            <el-icon class="file-icon"><Document /></el-icon>
                                            <span>{{ row.name }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="uploader" label="上传人员" width="120" />
                                <el-table-column prop="uploadTime" label="上传时间" width="180" />
                                <el-table-column label="操作" width="180" align="center">
                                    <template #default="{ row }">
                                        <el-button type="primary" link size="small" @click="previewFile(row)">
                                            <el-icon><View /></el-icon>预览
                                        </el-button>
                                        <el-button type="success" link size="small" @click="downloadFile(row)">
                                            <el-icon><Download /></el-icon>下载
                                        </el-button>
                                        <el-button type="danger" link size="small" @click="deleteFile(row)">
                                            <el-icon><Delete /></el-icon>删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="内部知识库" name="internal">
                        <p class="tab-desc">内部技术资料与服务规范，仅供内部员工使用</p>

                        <div class="kb-categories">
                            <div v-for="cat in internalCategories" :key="cat.key" class="kb-category-card"
                                :class="{ active: activeInternalCat === cat.key }" @click="activeInternalCat = cat.key">
                                <el-icon :style="{ color: cat.color }"><component :is="cat.icon" /></el-icon>
                                <span class="cat-name">{{ cat.name }}</span>
                                <span class="cat-count">{{ cat.count }} 个文件</span>
                            </div>
                        </div>

                        <div class="kb-files-section">
                            <div class="section-toolbar">
                                <h3>{{ currentInternalCatName }}</h3>
                                <el-input v-model="internalSearch" placeholder="搜索文件名" style="width: 240px;" :prefix-icon="Search" clearable />
                            </div>

                            <el-table :data="filteredInternalFiles" style="width: 100%">
                                <el-table-column prop="name" label="文件名" min-width="280">
                                    <template #default="{ row }">
                                        <div class="file-name-cell">
                                            <el-icon class="file-icon"><Document /></el-icon>
                                            <span>{{ row.name }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="uploader" label="上传人员" width="120" />
                                <el-table-column prop="uploadTime" label="上传时间" width="180" />
                                <el-table-column label="操作" width="180" align="center">
                                    <template #default="{ row }">
                                        <el-button type="primary" link size="small" @click="previewFile(row)">
                                            <el-icon><View /></el-icon>预览
                                        </el-button>
                                        <el-button type="success" link size="small" @click="downloadFile(row)">
                                            <el-icon><Download /></el-icon>下载
                                        </el-button>
                                        <el-button type="danger" link size="small" @click="deleteFile(row)">
                                            <el-icon><Delete /></el-icon>删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>

        <!-- 上传文档弹窗 -->
        <el-dialog v-model="showUploadDialog" title="上传文档" width="500px">
            <el-form :model="uploadForm" label-width="80px">
                <el-form-item label="知识库" required>
                    <el-select v-model="uploadForm.kbType" placeholder="请选择知识库">
                        <el-option label="外部知识库" value="external" />
                        <el-option label="内部知识库" value="internal" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类" required>
                    <el-select v-model="uploadForm.category" placeholder="请选择分类">
                        <el-option label="操作指南" value="guide" />
                        <el-option label="故障排查" value="troubleshoot" />
                        <el-option label="技术规范" value="spec" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文件" required>
                    <el-upload action="#" :auto-upload="false" drag>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽文件到此或 <em>点击上传</em>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showUploadDialog = false">取消</el-button>
                <el-button type="primary" @click="uploadFile">上传</el-button>
            </template>
        </el-dialog>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { Upload, Search, Document, View, Download, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('external')
const activeExternalCat = ref('guide')
const activeInternalCat = ref('spec')
const externalSearch = ref('')
const internalSearch = ref('')
const showUploadDialog = ref(false)

const uploadForm = ref({
    kbType: '',
    category: '',
    file: null
})

const externalCategories = ref([
    { key: 'guide', name: '操作指南', count: 12, color: '#409eff', icon: 'Document' },
    { key: 'troubleshoot', name: '故障排查', count: 8, color: '#67c23a', icon: 'Document' },
    { key: 'spec', name: '技术规范', count: 5, color: '#e6a23c', icon: 'Document' }
])

const internalCategories = ref([
    { key: 'spec', name: '技术规范', count: 15, color: '#409eff', icon: 'Document' },
    { key: 'process', name: '流程文档', count: 10, color: '#67c23a', icon: 'Document' },
    { key: 'training', name: '培训资料', count: 7, color: '#e6a23c', icon: 'Document' }
])

const externalFiles = ref([
    { name: 'TH-500GF操作手册.pdf', uploader: '张三', uploadTime: '2024-12-10 14:30', category: 'guide' },
    { name: 'TH-300D故障排查指南.pdf', uploader: '李四', uploadTime: '2024-12-09 10:15', category: 'troubleshoot' },
    { name: '设备安装规范.pdf', uploader: '王五', uploadTime: '2024-12-08 09:45', category: 'spec' }
])

const internalFiles = ref([
    { name: '内部技术规范v2.0.pdf', uploader: '赵六', uploadTime: '2024-12-11 16:20', category: 'spec' },
    { name: '售后服务流程.pdf', uploader: '孙七', uploadTime: '2024-12-10 11:00', category: 'process' },
    { name: '员工培训手册.pdf', uploader: '周八', uploadTime: '2024-12-09 15:30', category: 'training' }
])

const currentExternalCatName = computed(() => {
    const cat = externalCategories.value.find(c => c.key === activeExternalCat.value)
    return cat?.name || '操作指南'
})

const currentInternalCatName = computed(() => {
    const cat = internalCategories.value.find(c => c.key === activeInternalCat.value)
    return cat?.name || '技术规范'
})

const filteredExternalFiles = computed(() => {
    return externalFiles.value.filter(f => {
        const matchCat = f.category === activeExternalCat.value
        const matchSearch = !externalSearch.value || f.name.toLowerCase().includes(externalSearch.value.toLowerCase())
        return matchCat && matchSearch
    })
})

const filteredInternalFiles = computed(() => {
    return internalFiles.value.filter(f => {
        const matchCat = f.category === activeInternalCat.value
        const matchSearch = !internalSearch.value || f.name.toLowerCase().includes(internalSearch.value.toLowerCase())
        return matchCat && matchSearch
    })
})

const previewFile = (row: any) => {
    ElMessage.info(`预览文件: ${row.name}`)
}

const downloadFile = (row: any) => {
    ElMessage.success(`下载文件: ${row.name}`)
}

const deleteFile = (row: any) => {
    ElMessage.warning(`删除文件: ${row.name}`)
}

const uploadFile = () => {
    if (!uploadForm.value.kbType || !uploadForm.value.category) {
        ElMessage.error('请填写必填项')
        return
    }
    ElMessage.success('文件上传成功')
    showUploadDialog.value = false
    uploadForm.value = { kbType: '', category: '', file: null }
}
</script>

<style lang="scss" scoped>
@import url("./KnowLedgeView.scss");

.knowledge-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tab-desc {
    color: #909399;
    font-size: 13px;
    margin-bottom: 12px;
}
</style>