客服后台结构
This commit is contained in:
@@ -1,57 +1,247 @@
|
||||
<template>
|
||||
<AdminLayout
|
||||
:title="知识库管理"
|
||||
:info="管理外部和内部知识库文档"
|
||||
>
|
||||
<template action>
|
||||
<ElButton></ElButton>
|
||||
</template>
|
||||
<template default>
|
||||
<div class="knowledge">
|
||||
<!-- 知识库管理视图 -->
|
||||
<div>
|
||||
<!-- 内外部知识库选择器 -->
|
||||
</div>
|
||||
<span>
|
||||
<!-- 描述内外部知识库 -->
|
||||
</span>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 知识库列表 -->
|
||||
<div v-for="value in source">
|
||||
<!-- 知识库封面、icon -->
|
||||
<img/>
|
||||
<span>
|
||||
<!-- 知识库名称 -->
|
||||
</span>
|
||||
<span>
|
||||
<!-- 文件数量 -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 知识库名称+搜索 -->
|
||||
</div>
|
||||
<div>
|
||||
<!-- 文件列表 -->
|
||||
</div>
|
||||
<div>
|
||||
<!-- EL分页组件 全局样式 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 { ElButton } from 'element-plus';
|
||||
import AdminLayout from '@/views/admin/AdminLayout.vue';
|
||||
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");
|
||||
@import url("./KnowLedgeView.scss");
|
||||
|
||||
.knowledge-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tab-desc {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user