优化“知识库模块“--基本完善
This commit is contained in:
Cheng Zhou
@@ -1,4 +1,4 @@
|
||||
import { apiGet, apiPatch, apiPost } from "./axios";
|
||||
import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { ApiListResponse } from "../types/api";
|
||||
|
||||
@@ -17,6 +17,8 @@ export interface FaqItem {
|
||||
id: string;
|
||||
study_id?: string | null;
|
||||
category_id: string;
|
||||
best_reply_id?: string | null;
|
||||
status?: "PENDING" | "PROCESSING" | "RESOLVED";
|
||||
question: string;
|
||||
answer: string;
|
||||
keywords?: string | null;
|
||||
@@ -27,6 +29,25 @@ export interface FaqItem {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface FaqReplyQuote {
|
||||
id: string;
|
||||
content: string;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface FaqReply {
|
||||
id: string;
|
||||
faq_id: string;
|
||||
study_id?: string | null;
|
||||
content: string;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
quote_reply_id?: string | null;
|
||||
quote?: FaqReplyQuote | null;
|
||||
is_deleted?: boolean;
|
||||
}
|
||||
|
||||
export const fetchFaqCategories = (params?: Record<string, any>): Promise<AxiosResponse<ApiListResponse<FaqCategory>>> =>
|
||||
apiGet("/api/v1/faqs/categories", { params });
|
||||
|
||||
@@ -36,6 +57,9 @@ export const createFaqCategory = (payload: Record<string, any>) =>
|
||||
export const updateFaqCategory = (categoryId: string, payload: Record<string, any>) =>
|
||||
apiPatch<FaqCategory>(`/api/v1/faqs/categories/${categoryId}`, payload);
|
||||
|
||||
export const deleteFaqCategory = (categoryId: string) =>
|
||||
apiDelete<void>(`/api/v1/faqs/categories/${categoryId}`);
|
||||
|
||||
export const fetchFaqItems = (params?: Record<string, any>): Promise<AxiosResponse<ApiListResponse<FaqItem>>> =>
|
||||
apiGet("/api/v1/faqs/items", { params });
|
||||
|
||||
@@ -45,3 +69,21 @@ export const createFaqItem = (payload: Record<string, any>) => apiPost<FaqItem>(
|
||||
|
||||
export const updateFaqItem = (itemId: string, payload: Record<string, any>) =>
|
||||
apiPatch<FaqItem>(`/api/v1/faqs/items/${itemId}`, payload);
|
||||
|
||||
export const deleteFaqItem = (itemId: string) =>
|
||||
apiDelete<void>(`/api/v1/faqs/items/${itemId}`);
|
||||
|
||||
export const fetchFaqReplies = (itemId: string) =>
|
||||
apiGet<FaqReply[] | { items: FaqReply[] }>(`/api/v1/faqs/items/${itemId}/replies`);
|
||||
|
||||
export const createFaqReply = (itemId: string, payload: { content: string; quote_reply_id?: string | null }) =>
|
||||
apiPost<FaqReply>(`/api/v1/faqs/items/${itemId}/replies`, payload);
|
||||
|
||||
export const deleteFaqReply = (itemId: string, replyId: string) =>
|
||||
apiDelete<void>(`/api/v1/faqs/items/${itemId}/replies/${replyId}`);
|
||||
|
||||
export const setFaqBestReply = (itemId: string, payload: { best_reply_id: string | null }) =>
|
||||
apiPatch<FaqItem>(`/api/v1/faqs/items/${itemId}/best-reply`, payload);
|
||||
|
||||
export const setFaqStatus = (itemId: string, payload: { status: "PENDING" | "PROCESSING" | "RESOLVED" }) =>
|
||||
apiPatch<FaqItem>(`/api/v1/faqs/items/${itemId}/status`, payload);
|
||||
|
||||
@@ -49,7 +49,7 @@ const rules: FormRules = {
|
||||
const isEdit = computed(() => !!props.category);
|
||||
|
||||
const reset = () => {
|
||||
form.study_id = props.isAdmin ? "" : study.currentStudy?.id || "";
|
||||
form.study_id = study.currentStudy?.id || "";
|
||||
form.name = "";
|
||||
form.description = "";
|
||||
form.sort_order = 0;
|
||||
@@ -72,6 +72,15 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val && !props.category) {
|
||||
reset();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const close = () => emit("update:modelValue", false);
|
||||
|
||||
const onSubmit = async () => {
|
||||
@@ -80,15 +89,12 @@ const onSubmit = async () => {
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload: Record<string, any> = {
|
||||
study_id: form.study_id || null,
|
||||
study_id: study.currentStudy?.id || null,
|
||||
name: form.name,
|
||||
description: form.description || null,
|
||||
sort_order: form.sort_order,
|
||||
is_active: form.is_active,
|
||||
};
|
||||
if (!props.isAdmin) {
|
||||
payload.study_id = study.currentStudy?.id || null;
|
||||
}
|
||||
if (isEdit.value && props.category) {
|
||||
await updateFaqCategory(props.category.id, payload);
|
||||
} else {
|
||||
|
||||
@@ -8,22 +8,18 @@
|
||||
</PermissionAction>
|
||||
</div>
|
||||
</div>
|
||||
<el-menu :default-active="activeCategory" @select="onSelect">
|
||||
<el-menu :default-active="activeCategory" @select="onSelect" class="menu">
|
||||
<el-menu-item index="">全部</el-menu-item>
|
||||
<el-menu-item v-for="c in sortedCategories" :key="c.id" :index="c.id">
|
||||
<span>{{ c.name }}</span>
|
||||
<el-tag v-if="c.study_id" size="small" type="success" class="ml-4">项目</el-tag>
|
||||
<el-tag v-else size="small" class="ml-4">全局</el-tag>
|
||||
<PermissionAction v-if="canEdit(c)" action="faq.edit">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
style="margin-left: auto"
|
||||
@click.stop="openForm(c)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</PermissionAction>
|
||||
<span class="name" :title="c.name">{{ c.name }}</span>
|
||||
<div v-if="canEdit(c) || canDelete" class="actions">
|
||||
<PermissionAction v-if="canEdit(c)" action="faq.edit">
|
||||
<el-button type="text" size="small" @click.stop="openForm(c)">编辑</el-button>
|
||||
</PermissionAction>
|
||||
<PermissionAction v-if="canDelete" action="faq.edit">
|
||||
<el-button type="text" size="small" class="danger" @click.stop="onDelete(c)">删除</el-button>
|
||||
</PermissionAction>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<FaqCategoryForm v-model="showForm" :category="editing" :is-admin="isAdmin" @success="emit('refresh')" />
|
||||
@@ -32,8 +28,10 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import FaqCategoryForm from "./FaqCategoryForm.vue";
|
||||
import type { FaqCategory } from "../api/faqs";
|
||||
import { deleteFaqCategory } from "../api/faqs";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import PermissionAction from "./PermissionAction.vue";
|
||||
@@ -54,6 +52,7 @@ const editing = ref<FaqCategory | null>(null);
|
||||
const { can } = usePermission();
|
||||
const isAdmin = computed(() => auth.user?.role === "ADMIN");
|
||||
const canMaintain = computed(() => can("faq.edit"));
|
||||
const canDelete = computed(() => isAdmin.value);
|
||||
|
||||
const sortedCategories = computed(() =>
|
||||
[...props.categories].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
|
||||
@@ -75,6 +74,18 @@ const openForm = (cat?: FaqCategory) => {
|
||||
editing.value = cat || null;
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const onDelete = async (cat: FaqCategory) => {
|
||||
const ok = await ElMessageBox.confirm(`确认删除分类「${cat.name}」？`, "提示").catch(() => null);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await deleteFaqCategory(cat.id);
|
||||
ElMessage.success("删除成功");
|
||||
emit("refresh");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "删除失败");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -88,7 +99,24 @@ const openForm = (cat?: FaqCategory) => {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.ml-4 {
|
||||
margin-left: 4px;
|
||||
.menu {
|
||||
max-height: calc(100vh - 240px);
|
||||
overflow: auto;
|
||||
}
|
||||
.actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,12 +9,6 @@
|
||||
<el-form-item label="问题" prop="question">
|
||||
<el-input v-model="form.question" />
|
||||
</el-form-item>
|
||||
<el-form-item label="答案" prop="answer">
|
||||
<el-input v-model="form.answer" type="textarea" :rows="6" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="form.keywords" placeholder="逗号分隔，可选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用">
|
||||
<el-switch v-model="form.is_active" />
|
||||
</el-form-item>
|
||||
@@ -43,15 +37,12 @@ const form = reactive({
|
||||
study_id: "",
|
||||
category_id: "",
|
||||
question: "",
|
||||
answer: "",
|
||||
keywords: "",
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
category_id: [{ required: true, message: "请选择分类", trigger: "change" }],
|
||||
question: [{ required: true, message: "请输入问题", trigger: "blur" }],
|
||||
answer: [{ required: true, message: "请输入答案", trigger: "blur" }],
|
||||
};
|
||||
|
||||
const isEdit = computed(() => !!props.item);
|
||||
@@ -60,8 +51,6 @@ const reset = () => {
|
||||
form.study_id = study.currentStudy?.id || "";
|
||||
form.category_id = "";
|
||||
form.question = "";
|
||||
form.answer = "";
|
||||
form.keywords = "";
|
||||
form.is_active = true;
|
||||
};
|
||||
|
||||
@@ -72,8 +61,6 @@ watch(
|
||||
form.study_id = val.study_id || "";
|
||||
form.category_id = val.category_id;
|
||||
form.question = val.question;
|
||||
form.answer = val.answer;
|
||||
form.keywords = val.keywords || "";
|
||||
form.is_active = val.is_active;
|
||||
} else {
|
||||
reset();
|
||||
@@ -90,11 +77,9 @@ const onSubmit = async () => {
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload: Record<string, any> = {
|
||||
study_id: form.study_id || null,
|
||||
study_id: study.currentStudy?.id || null,
|
||||
category_id: form.category_id,
|
||||
question: form.question,
|
||||
answer: form.answer,
|
||||
keywords: form.keywords || null,
|
||||
is_active: form.is_active,
|
||||
};
|
||||
if (isEdit.value && props.item) {
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<el-table :data="items" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="question" label="问题" min-width="200" />
|
||||
<el-table :data="items" v-loading="loading" style="width: 100%" @row-click="onRowClick">
|
||||
<el-table-column prop="question" label="问题" min-width="200">
|
||||
<template #default="scope">
|
||||
<el-link type="primary" :underline="false" class="question-link">
|
||||
{{ scope.row.question }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="category_id" label="分类" width="140">
|
||||
<template #default="scope">
|
||||
{{ categoryMap[scope.row.category_id] || scope.row.category_id }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="version" label="版本" width="80" />
|
||||
<el-table-column prop="is_active" label="启用" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.is_active ? 'success' : 'info'">{{ scope.row.is_active ? "是" : "否" }}</el-tag>
|
||||
@@ -15,12 +20,16 @@
|
||||
<el-table-column prop="updated_at" label="更新时间" width="180">
|
||||
<template #default="scope">{{ displayDateTime(scope.row.updated_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="statusTagType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
|
||||
<PermissionAction v-if="canEdit" action="faq.edit">
|
||||
<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
|
||||
</PermissionAction>
|
||||
<el-button v-if="canDelete(scope.row)" type="text" size="small" class="danger" @click="remove(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
<PermissionAction v-if="canEdit" action="faq.edit">
|
||||
<el-button
|
||||
type="text"
|
||||
@@ -40,10 +49,11 @@
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { updateFaqItem } from "../api/faqs";
|
||||
import { deleteFaqItem, updateFaqItem } from "../api/faqs";
|
||||
import type { FaqItem, FaqCategory } from "../api/faqs";
|
||||
import PermissionAction from "./PermissionAction.vue";
|
||||
import { displayDateTime } from "../utils/display";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const props = defineProps<{
|
||||
items: FaqItem[];
|
||||
@@ -51,9 +61,10 @@ const props = defineProps<{
|
||||
loading: boolean;
|
||||
canEdit: boolean;
|
||||
}>();
|
||||
const emit = defineEmits(["refresh", "edit"]);
|
||||
const emit = defineEmits(["refresh"]);
|
||||
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const categoryMap = computed(() =>
|
||||
props.categories.reduce<Record<string, string>>((acc, cur) => {
|
||||
@@ -66,10 +77,26 @@ const view = (row: FaqItem) => {
|
||||
router.push(`/study/faq/${row.id}`);
|
||||
};
|
||||
|
||||
const edit = (row: FaqItem) => {
|
||||
emit("edit", row);
|
||||
const onRowClick = (row: FaqItem, column: any, event: MouseEvent) => {
|
||||
if (column?.property !== "question") return;
|
||||
view(row);
|
||||
};
|
||||
|
||||
const statusLabel = (status?: string) => {
|
||||
if (status === "RESOLVED") return "已解决";
|
||||
if (status === "PROCESSING") return "处理中";
|
||||
return "待回答";
|
||||
};
|
||||
|
||||
const statusTagType = (status?: string) => {
|
||||
if (status === "RESOLVED") return "success";
|
||||
if (status === "PROCESSING") return "warning";
|
||||
return "info";
|
||||
};
|
||||
|
||||
const canDelete = (row: FaqItem) => props.canEdit || row.created_by === auth.user?.id;
|
||||
|
||||
|
||||
const toggle = async (row: FaqItem) => {
|
||||
const target = !row.is_active;
|
||||
const ok = await ElMessageBox.confirm(`确认${target ? "启用" : "停用"}此 FAQ?`, "提示").catch(() => null);
|
||||
@@ -82,4 +109,25 @@ const toggle = async (row: FaqItem) => {
|
||||
ElMessage.error(e?.response?.data?.message || "操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (row: FaqItem) => {
|
||||
const ok = await ElMessageBox.confirm(`确认删除 FAQ「${row.question}」？`, "提示").catch(() => null);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await deleteFaqItem(row.id);
|
||||
ElMessage.success("问题已删除");
|
||||
emit("refresh");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "删除失败");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.question-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,6 +17,8 @@ const PERMISSIONS: Record<string, string[]> = {
|
||||
"finance.pay": ["ADMIN", "PM"],
|
||||
"imp.transaction": ["ADMIN", "PM", "IMP"],
|
||||
"faq.edit": ["ADMIN", "PM"],
|
||||
"faq.create": ["ADMIN", "PM", "CRA", "PV", "IMP"],
|
||||
"faq.reply": ["ADMIN", "PM", "CRA", "PV", "IMP"],
|
||||
"dataquery.edit": ["ADMIN", "PM", "CRA"],
|
||||
"project.members.manage": ["ADMIN", "PM"],
|
||||
"site.manage": ["ADMIN", "PM"],
|
||||
@@ -33,6 +35,8 @@ const REASONS: Record<string, string> = {
|
||||
"finance.pay": "支付确认需要 PM/ADMIN 权限",
|
||||
"imp.transaction": "仅 IMP/PM/ADMIN 可操作台账",
|
||||
"faq.edit": "仅 PM/ADMIN 可维护 FAQ",
|
||||
"faq.create": "仅项目成员可新建 FAQ",
|
||||
"faq.reply": "仅项目成员可回复 FAQ",
|
||||
"dataquery.edit": "仅 PM/CRA/ADMIN 可编辑数据问题",
|
||||
"project.members.manage": "仅 ADMIN / PM 可调整项目成员",
|
||||
"site.manage": "仅 ADMIN / PM 可管理中心",
|
||||
|
||||
+10
-12
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<el-col :span="5">
|
||||
<FaqCategoryPanel
|
||||
v-model="activeCategory"
|
||||
:categories="categories"
|
||||
@refresh="loadCategories"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-col :span="19">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-input
|
||||
@@ -18,14 +18,9 @@
|
||||
@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" />
|
||||
<PermissionAction action="faq.edit">
|
||||
<PermissionAction action="faq.create">
|
||||
<el-button type="primary" @click="openForm()">新建 FAQ</el-button>
|
||||
</PermissionAction>
|
||||
</div>
|
||||
@@ -37,7 +32,6 @@
|
||||
:loading="loading"
|
||||
:can-edit="canEdit"
|
||||
@refresh="loadFaqs"
|
||||
@edit="openForm"
|
||||
/>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@@ -55,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchFaqCategories, fetchFaqItems } from "../api/faqs";
|
||||
import FaqCategoryPanel from "../components/FaqCategoryPanel.vue";
|
||||
@@ -77,7 +71,6 @@ 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);
|
||||
@@ -89,6 +82,7 @@ const loadCategories = async () => {
|
||||
try {
|
||||
const params: Record<string, any> = {};
|
||||
if (study.currentStudy) params.study_id = study.currentStudy.id;
|
||||
params.include_global = false;
|
||||
const { data } = await fetchFaqCategories(params);
|
||||
categories.value = data.items || data || [];
|
||||
} catch (e: any) {
|
||||
@@ -108,7 +102,6 @@ const loadFaqs = async () => {
|
||||
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;
|
||||
@@ -129,6 +122,11 @@ const onPageChange = (p: number) => {
|
||||
loadFaqs();
|
||||
};
|
||||
|
||||
watch(activeCategory, () => {
|
||||
page.value = 1;
|
||||
loadFaqs();
|
||||
});
|
||||
|
||||
const openForm = (row?: any) => {
|
||||
editing.value = row || null;
|
||||
showForm.value = true;
|
||||
|
||||
@@ -1,52 +1,247 @@
|
||||
<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 class="question-header">
|
||||
<div class="question-label">问题描述</div>
|
||||
<div class="question-actions">
|
||||
<el-button v-if="canEditQuestion" type="primary" size="small" class="edit-btn" @click="openEdit">
|
||||
编辑问题
|
||||
</el-button>
|
||||
<el-button v-if="canConfirmResolved" type="success" size="small" @click="confirmResolved">
|
||||
确认解决
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-meta">
|
||||
<span class="meta-pill meta-user"
|
||||
>提问人：{{ displayUser(item?.created_by, { members: memberMap, users: userMap }) }}</span
|
||||
>
|
||||
<span class="meta-pill meta-time">提问时间：{{ displayDateTime(item?.created_at) }}</span>
|
||||
<span class="meta-pill meta-category">分类：{{ categoryName }}</span>
|
||||
<span class="meta-pill meta-status">状态：{{ statusLabel }}</span>
|
||||
</div>
|
||||
<pre class="question-text">{{ item?.question }}</pre>
|
||||
</div>
|
||||
<div v-if="bestReply" class="best-answer">
|
||||
<div class="best-title">
|
||||
<span>最佳答案</span>
|
||||
<el-tag type="success" size="small">已采纳</el-tag>
|
||||
</div>
|
||||
<div class="best-meta">
|
||||
{{ displayUser(bestReply.created_by, { members: memberMap, users: userMap }) }}
|
||||
· {{ displayDateTime(bestReply.created_at) }}
|
||||
</div>
|
||||
<div class="best-content">{{ bestReply.is_deleted ? "回复已删除" : bestReply.content }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt-12" v-loading="repliesLoading">
|
||||
<template #header>
|
||||
<div class="reply-header">
|
||||
<span>回复</span>
|
||||
<span class="reply-count">共 {{ replies.length }} 条</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="canReply" class="reply-form">
|
||||
<div v-if="quoteReply" class="quote-box">
|
||||
<div class="quote-meta">
|
||||
引用 {{ displayUser(quoteReply.created_by, { members: memberMap, users: userMap }) }}
|
||||
· {{ displayDateTime(quoteReply.created_at) }}
|
||||
<el-button type="text" size="small" @click="clearQuote">取消引用</el-button>
|
||||
</div>
|
||||
<div class="quote-content">{{ quoteReply.content }}</div>
|
||||
</div>
|
||||
<el-input v-model="replyContent" type="textarea" :rows="4" placeholder="请输入回复内容" />
|
||||
<div class="reply-actions">
|
||||
<el-button type="primary" :loading="submitting" @click="submitReply">提交回复</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="reply-disabled">当前角色无权限回复</div>
|
||||
<el-divider v-if="replies.length" />
|
||||
<el-timeline v-if="replies.length">
|
||||
<el-timeline-item v-for="r in replies" :key="r.id" :timestamp="displayDateTime(r.created_at)">
|
||||
<div class="reply-item">
|
||||
<div class="reply-meta">
|
||||
<strong>{{ displayUser(r.created_by, { members: memberMap, users: userMap }) }}</strong>
|
||||
<div class="reply-actions-inline">
|
||||
<el-tag v-if="item?.best_reply_id === r.id" type="success" size="small">最佳答案</el-tag>
|
||||
<el-button v-if="canReply" type="text" size="small" @click="setQuote(r)">引用</el-button>
|
||||
<el-button
|
||||
v-if="canSelectBest && !r.is_deleted"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="toggleBest(r)"
|
||||
>
|
||||
{{ item?.best_reply_id === r.id ? "取消最佳" : "设为最佳" }}
|
||||
</el-button>
|
||||
<el-button v-if="canDeleteReply(r)" type="text" size="small" class="danger" @click="removeReply(r)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="r.quote" class="quote-block">
|
||||
<div class="quote-meta">
|
||||
{{ displayUser(r.quote.created_by, { members: memberMap, users: userMap }) }}
|
||||
· {{ displayDateTime(r.quote.created_at) }}
|
||||
</div>
|
||||
<div class="quote-content">{{ r.quote.content }}</div>
|
||||
</div>
|
||||
<div class="reply-content">{{ r.is_deleted ? "回复已删除" : r.content }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<div v-else class="reply-empty">暂无回复</div>
|
||||
</el-card>
|
||||
|
||||
<FaqItemForm
|
||||
v-model="showForm"
|
||||
:item="editing"
|
||||
:categories="categories"
|
||||
@success="onEditSuccess"
|
||||
/>
|
||||
</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";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import {
|
||||
createFaqReply,
|
||||
deleteFaqReply,
|
||||
fetchFaqItem,
|
||||
fetchFaqReplies,
|
||||
fetchFaqCategories,
|
||||
setFaqBestReply,
|
||||
setFaqStatus,
|
||||
} from "../api/faqs";
|
||||
import { listMembers } from "../api/members";
|
||||
import { displayDateTime, displayUser } from "../utils/display";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import { usePermission } from "../utils/permission";
|
||||
import FaqItemForm from "../components/FaqItemForm.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const auth = useAuthStore();
|
||||
const item = ref<any>(null);
|
||||
const loading = ref(false);
|
||||
const categories = ref<any[]>([]);
|
||||
const replies = ref<any[]>([]);
|
||||
const repliesLoading = ref(false);
|
||||
const replyContent = ref("");
|
||||
const submitting = ref(false);
|
||||
const quoteReply = ref<any | null>(null);
|
||||
const members = ref<any[]>([]);
|
||||
const showForm = ref(false);
|
||||
const editing = ref<any | null>(null);
|
||||
|
||||
const { can } = usePermission();
|
||||
|
||||
const canReply = computed(() => {
|
||||
if (!item.value) return false;
|
||||
if (!item.value.study_id) return auth.user?.role === "ADMIN";
|
||||
return can("faq.reply");
|
||||
});
|
||||
|
||||
const canDeleteReply = (reply: any) => {
|
||||
if (reply.is_deleted) return false;
|
||||
if (auth.user?.role === "ADMIN") return true;
|
||||
if (reply.created_by === auth.user?.id) return true;
|
||||
return item.value?.study_id ? can("faq.edit") : false;
|
||||
};
|
||||
|
||||
const canSelectBest = computed(() => {
|
||||
if (!item.value) return false;
|
||||
if (!item.value.study_id) return auth.user?.role === "ADMIN";
|
||||
return can("faq.reply");
|
||||
});
|
||||
|
||||
const canEditQuestion = computed(() => {
|
||||
if (!item.value) return false;
|
||||
if (auth.user?.role === "ADMIN") return true;
|
||||
if (item.value.created_by === auth.user?.id) return true;
|
||||
return item.value?.study_id ? can("faq.edit") : false;
|
||||
});
|
||||
|
||||
const canConfirmResolved = computed(() => {
|
||||
if (!item.value) return false;
|
||||
if (item.value.status === "RESOLVED") return false;
|
||||
if (auth.user?.role === "ADMIN") return true;
|
||||
if (item.value.created_by === auth.user?.id) return true;
|
||||
return item.value?.study_id ? can("faq.edit") : false;
|
||||
});
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
if (item.value?.status === "RESOLVED") return "已解决";
|
||||
if (item.value?.status === "PROCESSING") return "处理中";
|
||||
return "待回答";
|
||||
});
|
||||
|
||||
const bestReply = computed(() => {
|
||||
if (!item.value?.best_reply_id) return null;
|
||||
return replies.value.find((r) => r.id === item.value.best_reply_id) || null;
|
||||
});
|
||||
|
||||
const memberMap = computed(() =>
|
||||
members.value.reduce<Record<string, string>>((acc, cur) => {
|
||||
const username = cur?.user?.display_name || cur?.user?.username || cur?.username;
|
||||
if (cur?.user_id) acc[cur.user_id] = username || cur.user_id;
|
||||
return acc;
|
||||
}, {})
|
||||
);
|
||||
|
||||
const userMap = computed(() => {
|
||||
if (!auth.user?.id) return {};
|
||||
const name = auth.user.display_name || auth.user.username || auth.user.id;
|
||||
return { [auth.user.id]: name };
|
||||
});
|
||||
|
||||
const categoryName = computed(() => {
|
||||
const cat = categories.value.find((c) => c.id === item.value?.category_id);
|
||||
return cat ? cat.name : item.value?.category_id;
|
||||
});
|
||||
|
||||
const loadMembers = async (studyId?: string | null) => {
|
||||
if (!studyId) {
|
||||
members.value = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { data } = await listMembers(studyId, { limit: 500 });
|
||||
members.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
members.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const loadReplies = async () => {
|
||||
const id = route.params.itemId as string;
|
||||
repliesLoading.value = true;
|
||||
try {
|
||||
const { data } = await fetchFaqReplies(id);
|
||||
replies.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "回复加载失败");
|
||||
} finally {
|
||||
repliesLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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 || [];
|
||||
const { data: faqData } = await fetchFaqItem(id);
|
||||
item.value = faqData;
|
||||
const categoryParams: Record<string, any> = {};
|
||||
if (faqData.study_id) {
|
||||
categoryParams.study_id = faqData.study_id;
|
||||
categoryParams.include_global = false;
|
||||
}
|
||||
const { data: catData } = await fetchFaqCategories(categoryParams);
|
||||
categories.value = catData.items || catData || [];
|
||||
await Promise.all([loadReplies(), loadMembers(faqData.study_id)]);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
@@ -54,6 +249,87 @@ const loadData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const setQuote = (reply: any) => {
|
||||
quoteReply.value = reply;
|
||||
};
|
||||
|
||||
const clearQuote = () => {
|
||||
quoteReply.value = null;
|
||||
};
|
||||
|
||||
const submitReply = async () => {
|
||||
if (!replyContent.value.trim()) {
|
||||
ElMessage.warning("请输入回复内容");
|
||||
return;
|
||||
}
|
||||
if (!item.value) return;
|
||||
submitting.value = true;
|
||||
try {
|
||||
await createFaqReply(item.value.id, {
|
||||
content: replyContent.value,
|
||||
quote_reply_id: quoteReply.value?.id || null,
|
||||
});
|
||||
ElMessage.success("回复已提交");
|
||||
replyContent.value = "";
|
||||
quoteReply.value = null;
|
||||
loadReplies();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "回复失败");
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const removeReply = async (reply: any) => {
|
||||
if (!item.value) return;
|
||||
const ok = await ElMessageBox.confirm("确认删除该回复？", "提示").catch(() => null);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await deleteFaqReply(item.value.id, reply.id);
|
||||
ElMessage.success("回复已删除");
|
||||
loadReplies();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "删除失败");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleBest = async (reply: any) => {
|
||||
if (!item.value) return;
|
||||
try {
|
||||
const target = item.value.best_reply_id === reply.id ? null : reply.id;
|
||||
if (target) {
|
||||
const ok = await ElMessageBox.confirm("设为最佳答案并确认已解决？", "提示").catch(() => null);
|
||||
if (!ok) return;
|
||||
}
|
||||
const { data } = await setFaqBestReply(item.value.id, { best_reply_id: target });
|
||||
item.value = data;
|
||||
ElMessage.success(target ? "已设为最佳答案" : "已取消最佳答案");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
const confirmResolved = async () => {
|
||||
if (!item.value) return;
|
||||
try {
|
||||
const { data } = await setFaqStatus(item.value.id, { status: "RESOLVED" });
|
||||
item.value = data;
|
||||
ElMessage.success("已设置为已解决");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
const openEdit = () => {
|
||||
editing.value = item.value;
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const onEditSuccess = () => {
|
||||
showForm.value = false;
|
||||
loadData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
@@ -63,16 +339,167 @@ onMounted(() => {
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.content {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.question-label {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.question-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.question-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
.edit-btn {
|
||||
font-weight: 600;
|
||||
}
|
||||
.question-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.meta-pill {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.meta-user {
|
||||
background: #eef2ff;
|
||||
border-color: #c7d2fe;
|
||||
color: #3730a3;
|
||||
}
|
||||
.meta-time {
|
||||
background: #fef9c3;
|
||||
border-color: #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
.meta-category {
|
||||
background: #ecfccb;
|
||||
border-color: #bef264;
|
||||
color: #3f6212;
|
||||
}
|
||||
.meta-status {
|
||||
background: #ecfeff;
|
||||
border-color: #a5f3fc;
|
||||
color: #155e75;
|
||||
}
|
||||
.confirm-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.reply-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-count {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.reply-form {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.reply-actions {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.reply-disabled {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.reply-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.reply-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-actions-inline {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.best-answer {
|
||||
margin-top: 16px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e1f3d8;
|
||||
background: #f0f9eb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.best-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #2f6f2f;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.best-meta {
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.best-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.question-text {
|
||||
margin: 6px 0 0;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
background: #f5f7ff;
|
||||
border: 1px solid #e0e7ff;
|
||||
color: #1f2a44;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.quote-block,
|
||||
.quote-box {
|
||||
background: #f5f7fa;
|
||||
border-left: 3px solid #dcdfe6;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.quote-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.quote-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.reply-empty {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user