Cheng Zhou
398 lines
10 KiB
Vue
398 lines
10 KiB
Vue
<template>
|
|
<div class="faq-list-card" :class="{ 'faq-list-card--desktop': isDesktop }">
|
|
<el-table
|
|
:data="items"
|
|
v-loading="loading"
|
|
style="width: 100%"
|
|
class="faq-table"
|
|
:class="{ 'faq-table--with-actions': canDelete, 'faq-table--without-actions': !canDelete }"
|
|
:row-class-name="rowClassName"
|
|
:height="isDesktop ? '100%' : undefined"
|
|
@row-click="onRowClick"
|
|
table-layout="fixed"
|
|
>
|
|
<el-table-column prop="question" :label="TEXT.common.fields.question" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<div class="question-cell">
|
|
<span class="question-icon"><el-icon><QuestionFilled /></el-icon></span>
|
|
<el-link type="primary" :underline="false" class="question-link">
|
|
{{ scope.row.question }}
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="category_id" :label="TEXT.common.labels.category" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span class="category-pill">{{ categoryLabel(scope.row.category_id) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span class="time-text">
|
|
<span class="time-date">{{ splitDateTime(scope.row.updated_at).date }}</span>
|
|
<span class="time-clock">{{ splitDateTime(scope.row.updated_at).time }}</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" :label="TEXT.common.fields.status">
|
|
<template #default="scope">
|
|
<el-tag :type="statusTagType(scope.row.status)" size="small" effect="light" round>{{ statusLabel(scope.row.status) }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="canDelete" :label="TEXT.common.labels.actions">
|
|
<template #default="scope">
|
|
<div class="cell-actions">
|
|
<el-button v-if="canDelete" link type="danger" size="small" class="danger" @click.stop="remove(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { QuestionFilled } from "@element-plus/icons-vue";
|
|
import { computed } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { deleteFaqItem } from "../api/faqs";
|
|
import type { FaqItem, FaqCategory } from "../api/faqs";
|
|
import { displayDateTime, displayEnum } from "../utils/display";
|
|
import { TEXT } from "../locales";
|
|
import { isTauriRuntime } from "../runtime";
|
|
|
|
const props = defineProps<{
|
|
items: FaqItem[];
|
|
categories: FaqCategory[];
|
|
loading: boolean;
|
|
canUpdate: boolean;
|
|
canDelete: boolean;
|
|
}>();
|
|
const emit = defineEmits(["refresh"]);
|
|
|
|
const router = useRouter();
|
|
const isDesktop = isTauriRuntime();
|
|
|
|
const categoryMap = computed(() =>
|
|
props.categories.reduce<Record<string, string>>((acc, cur) => {
|
|
acc[cur.id] = cur.name;
|
|
return acc;
|
|
}, {})
|
|
);
|
|
|
|
const categoryLabel = (categoryId: string) => {
|
|
return categoryMap.value[categoryId] || categoryId || "--";
|
|
};
|
|
|
|
const splitDateTime = (value?: string | number | Date | null) => {
|
|
const displayValue = displayDateTime(value);
|
|
const [date, time] = displayValue.split(" ");
|
|
return { date, time: time || "" };
|
|
};
|
|
|
|
const rowClassName = () => "faq-row";
|
|
|
|
const view = (row: FaqItem) => {
|
|
router.push(`/knowledge/medical-consult/${row.id}`);
|
|
};
|
|
|
|
const onRowClick = (row: FaqItem) => {
|
|
view(row);
|
|
};
|
|
|
|
const statusLabel = (status?: string) => {
|
|
return displayEnum(TEXT.enums.faqStatus, status || "");
|
|
};
|
|
|
|
const statusTagType = (status?: string) => {
|
|
if (status === "RESOLVED") return "success";
|
|
if (status === "PROCESSING") return "warning";
|
|
return "info";
|
|
};
|
|
|
|
const remove = async (row: FaqItem) => {
|
|
if (!props.canDelete) {
|
|
ElMessage.warning("权限不足");
|
|
return;
|
|
}
|
|
const ok = await ElMessageBox.confirm(
|
|
TEXT.modules.knowledgeMedicalConsult.confirmDeleteItem.replace("{name}", row.question),
|
|
TEXT.common.labels.tips
|
|
).catch(() => null);
|
|
if (!ok) return;
|
|
try {
|
|
await deleteFaqItem(row.id, row.study_id);
|
|
ElMessage.success(TEXT.common.messages.deleteSuccess);
|
|
emit("refresh");
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.faq-list-card {
|
|
min-height: 240px;
|
|
}
|
|
|
|
.faq-table {
|
|
background: transparent;
|
|
}
|
|
|
|
.faq-table :deep(.el-table__inner-wrapper::before) {
|
|
display: none;
|
|
}
|
|
|
|
.faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
|
|
height: 46px;
|
|
border-bottom: 1px solid #dce8f7;
|
|
background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
|
|
color: #5d7088;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.faq-table :deep(.el-table__body-wrapper) {
|
|
background: transparent;
|
|
}
|
|
|
|
.faq-table :deep(.el-table__body) {
|
|
border-collapse: separate;
|
|
border-spacing: 0 10px;
|
|
}
|
|
|
|
.faq-table :deep(.faq-row) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.faq-table :deep(.faq-row td.el-table__cell) {
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid #e8eef6;
|
|
background: #ffffff;
|
|
transition: background 0.18s ease;
|
|
}
|
|
|
|
.faq-table :deep(.faq-row:hover td.el-table__cell) {
|
|
background: #f7fbff;
|
|
}
|
|
|
|
.faq-table--with-actions :deep(col) {
|
|
width: 20%;
|
|
}
|
|
|
|
.faq-table--without-actions :deep(col) {
|
|
width: 25%;
|
|
}
|
|
|
|
|
|
|
|
/* 紧凑操作按钮 */
|
|
.faq-row .cell-actions { display: flex; gap: 4px; white-space: nowrap; }
|
|
.faq-row .cell-actions .el-button { font-size: 12px; padding: 0; height: auto; }
|
|
.faq-row .cell-actions .el-button + .el-button { margin-left: 0; }
|
|
.danger { color: #f56c6c !important; }
|
|
|
|
.question-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.question-icon {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background:
|
|
radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.42) 0%, transparent 28%),
|
|
linear-gradient(135deg, #2f7be8 0%, #23b7d9 100%);
|
|
color: #ffffff;
|
|
font-size: 17px;
|
|
font-weight: 800;
|
|
box-shadow:
|
|
0 10px 20px rgba(47, 123, 232, 0.2),
|
|
0 1px 0 rgba(255, 255, 255, 0.45) inset;
|
|
}
|
|
|
|
.question-icon :deep(.el-icon) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.question-link {
|
|
min-width: 0;
|
|
color: #26323b;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.category-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
border-radius: 7px;
|
|
background: #eaf4ff;
|
|
color: #2c73d2;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time-text {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
color: #8794a6;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time-clock {
|
|
color: #9aa6b6;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.danger {
|
|
color: #f56c6c;
|
|
}
|
|
.question-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.faq-list-card--desktop {
|
|
display: flex;
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table {
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__inner-wrapper) {
|
|
height: 100%;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
|
|
height: 42px;
|
|
padding: 0 14px;
|
|
border-bottom: 1px solid rgba(121, 152, 188, 0.28) !important;
|
|
background: linear-gradient(180deg, #f4f9ff 0%, #eaf3fc 100%) !important;
|
|
color: #49647f;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__body) {
|
|
border-collapse: separate;
|
|
border-spacing: 0 6px;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper) {
|
|
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper::-webkit-scrollbar),
|
|
.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap) {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-scrollbar__bar.is-vertical) {
|
|
display: none !important;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.el-table__empty-block) {
|
|
min-height: 100%;
|
|
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell) {
|
|
padding: 10px 14px;
|
|
border-top: 1px solid rgba(226, 235, 246, 0.92);
|
|
border-bottom: 1px solid rgba(226, 235, 246, 0.92);
|
|
background: #ffffff;
|
|
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:first-child) {
|
|
border-left: 1px solid rgba(226, 235, 246, 0.92);
|
|
border-radius: 9px 0 0 9px;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:last-child) {
|
|
border-right: 1px solid rgba(226, 235, 246, 0.92);
|
|
border-radius: 0 9px 9px 0;
|
|
}
|
|
|
|
.faq-list-card--desktop .faq-table :deep(.faq-row:hover td.el-table__cell) {
|
|
border-color: rgba(111, 159, 220, 0.34);
|
|
background: #f5faff;
|
|
box-shadow: 0 8px 18px rgba(45, 86, 143, 0.06);
|
|
}
|
|
|
|
.faq-list-card--desktop .question-cell {
|
|
gap: 10px;
|
|
}
|
|
|
|
.faq-list-card--desktop .question-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
box-shadow:
|
|
0 8px 16px rgba(47, 123, 232, 0.18),
|
|
0 1px 0 rgba(255, 255, 255, 0.45) inset;
|
|
}
|
|
|
|
.faq-list-card--desktop .question-link {
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.faq-list-card--desktop .category-pill {
|
|
height: 24px;
|
|
padding: 0 9px;
|
|
border-radius: 7px;
|
|
background: linear-gradient(135deg, #e7f3ff 0%, #eefaff 100%);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.faq-list-card--desktop .time-text {
|
|
gap: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row td.el-table__cell) {
|
|
border-color: #26364a;
|
|
background: #172033;
|
|
}
|
|
|
|
:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row:hover td.el-table__cell) {
|
|
background: #1d2b42;
|
|
}
|
|
</style>
|