Step F10：FAQ / 知识库
This commit is contained in:
Cheng Zhou
+152
-2
@@ -1,13 +1,163 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>FAQ</h2></el-card>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<FaqCategoryPanel
|
||||
v-model="activeCategory"
|
||||
:categories="categories"
|
||||
@refresh="loadCategories"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="搜索关键词"
|
||||
clearable
|
||||
@keyup.enter="loadFaqs"
|
||||
style="width: 260px"
|
||||
/>
|
||||
<el-select v-model="studyScope" placeholder="范围" clearable style="width: 160px" @change="loadFaqs">
|
||||
<el-option label="项目 FAQ" value="project" />
|
||||
<el-option label="全局 FAQ" value="global" />
|
||||
<el-option label="全部" value="all" />
|
||||
</el-select>
|
||||
<el-switch v-model="onlyActive" active-text="仅启用" @change="loadFaqs" />
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canEdit" @click="openForm()">新建 FAQ</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<FaqList
|
||||
:items="faqs"
|
||||
:categories="categories"
|
||||
:loading="loading"
|
||||
:can-edit="canEdit"
|
||||
@refresh="loadFaqs"
|
||||
@edit="openForm"
|
||||
/>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<FaqItemForm v-model="showForm" :item="editing" :categories="categories" @success="loadFaqs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchFaqCategories, fetchFaqItems } from "../api/faqs";
|
||||
import FaqCategoryPanel from "../components/FaqCategoryPanel.vue";
|
||||
import FaqList from "../components/FaqList.vue";
|
||||
import FaqItemForm from "../components/FaqItemForm.vue";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import { useStudyStore } from "../store/study";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const study = useStudyStore();
|
||||
|
||||
const categories = ref<any[]>([]);
|
||||
const faqs = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const total = ref(0);
|
||||
const keyword = ref("");
|
||||
const onlyActive = ref(true);
|
||||
const studyScope = ref("project");
|
||||
const activeCategory = ref("");
|
||||
const showForm = ref(false);
|
||||
const editing = ref<any | null>(null);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM";
|
||||
});
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const params: Record<string, any> = {};
|
||||
if (study.currentStudy) params.study_id = study.currentStudy.id;
|
||||
const { data } = await fetchFaqCategories(params);
|
||||
categories.value = data.items || data || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "分类加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const loadFaqs = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
skip: (page.value - 1) * pageSize,
|
||||
limit: pageSize,
|
||||
study_id: study.currentStudy.id,
|
||||
};
|
||||
if (activeCategory.value) params.category_id = activeCategory.value;
|
||||
if (keyword.value) params.keyword = keyword.value;
|
||||
if (onlyActive.value) params.is_active = true;
|
||||
if (studyScope.value) params.study_scope = studyScope.value;
|
||||
const { data } = await fetchFaqItems(params);
|
||||
if (Array.isArray(data)) {
|
||||
faqs.value = data;
|
||||
total.value = data.length;
|
||||
} else {
|
||||
faqs.value = data.items || [];
|
||||
total.value = data.total || 0;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "FAQ 加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
loadFaqs();
|
||||
};
|
||||
|
||||
const openForm = (row?: any) => {
|
||||
editing.value = row || null;
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadCategories();
|
||||
loadFaqs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card v-loading="loading">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3>{{ item?.question }}</h3>
|
||||
<el-tag size="small">{{ item?.version ? "v" + item.version : "" }}</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag type="info">{{ categoryName }}</el-tag>
|
||||
<el-tag :type="item?.is_active ? 'success' : 'info'" class="ml-8">
|
||||
{{ item?.is_active ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="content">
|
||||
<pre>{{ item?.answer }}</pre>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchFaqItem, fetchFaqCategories } from "../api/faqs";
|
||||
|
||||
const route = useRoute();
|
||||
const item = ref<any>(null);
|
||||
const loading = ref(false);
|
||||
const categories = ref<any[]>([]);
|
||||
|
||||
const categoryName = computed(() => {
|
||||
const cat = categories.value.find((c) => c.id === item.value?.category_id);
|
||||
return cat ? cat.name : item.value?.category_id;
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
const id = route.params.itemId as string;
|
||||
loading.value = true;
|
||||
try {
|
||||
const [{ data: catData }, { data: faqData }] = await Promise.all([
|
||||
fetchFaqCategories(),
|
||||
fetchFaqItem(id),
|
||||
]);
|
||||
categories.value = catData.items || catData || [];
|
||||
item.value = faqData;
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.content {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user