feat(projects): 增加意见反馈
This commit is contained in:
328
src/views/feedback/index.vue
Normal file
328
src/views/feedback/index.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { FEEDBACK_STATUS_DICT_CODE, FEEDBACK_TYPE_DICT_CODE } from '@/constants/dict';
|
||||
import { getFeedbackStatusTagType } from '@/constants/status-tag';
|
||||
import { fetchDeleteFeedback, fetchGetFeedbackPage, fetchGetFeedbackStat } from '@/service/api';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { useUIPaginatedTable } from '@/hooks/common/table';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
|
||||
import FeedbackFacet from './modules/feedback-facet.vue';
|
||||
import FeedbackSearch from './modules/feedback-search.vue';
|
||||
import FeedbackOperateDialog from './modules/feedback-operate-dialog.vue';
|
||||
import FeedbackDetailDialog from './modules/feedback-detail-dialog.vue';
|
||||
import FeedbackStatusDialog from './modules/feedback-status-dialog.vue';
|
||||
import IconMdiDeleteOutline from '~icons/mdi/delete-outline';
|
||||
import IconMdiEyeOutline from '~icons/mdi/eye-outline';
|
||||
import IconMdiProgressCheck from '~icons/mdi/progress-check';
|
||||
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
|
||||
|
||||
defineOptions({ name: 'Feedback' });
|
||||
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 动态路由模式下后端不返回 R_SUPER，超管按固定登录名 admin 识别（写操作放开依据）
|
||||
const isSuper = computed(() => authStore.userInfo.userName === 'admin');
|
||||
|
||||
// 后端已移除反馈相关权限码：提交对所有登录用户开放；写操作纯前端按「归属 + 超管」控制
|
||||
/** 是否本人提交 */
|
||||
function isOwn(row: Api.Feedback.FeedbackItem) {
|
||||
return authStore.userInfo.userId === row.creator;
|
||||
}
|
||||
|
||||
/** 修改状态：仅超管 */
|
||||
const canUpdateStatus = computed(() => isSuper.value);
|
||||
|
||||
/** 删除按钮逐行显隐：自己提交的，或超管 */
|
||||
function canDeleteRow(row: Api.Feedback.FeedbackItem) {
|
||||
return isOwn(row) || isSuper.value;
|
||||
}
|
||||
|
||||
/** 编辑按钮逐行显隐：自己提交的，或超管 */
|
||||
function canEditRow(row: Api.Feedback.FeedbackItem) {
|
||||
return isOwn(row) || isSuper.value;
|
||||
}
|
||||
|
||||
function getInitSearchParams(): Api.Feedback.FeedbackSearchParams {
|
||||
return { pageNo: 1, pageSize: 20, type: undefined, status: undefined, title: undefined };
|
||||
}
|
||||
|
||||
function transformPageResult(
|
||||
response: Awaited<ReturnType<typeof fetchGetFeedbackPage>>,
|
||||
pageNo: number,
|
||||
pageSize: number
|
||||
) {
|
||||
if (!response.error) {
|
||||
return { data: response.data.list, pageNum: pageNo, pageSize, total: response.data.total };
|
||||
}
|
||||
return { data: [], pageNum: pageNo, pageSize, total: 0 };
|
||||
}
|
||||
|
||||
const searchParams = reactive(getInitSearchParams());
|
||||
|
||||
// 弹层 / 抽屉开关与上下文
|
||||
const operateVisible = ref(false);
|
||||
const operateMode = ref<'create' | 'edit'>('create');
|
||||
const operateRow = ref<Api.Feedback.FeedbackItem | null>(null);
|
||||
const detailVisible = ref(false);
|
||||
const detailId = ref<string | null>(null);
|
||||
const statusVisible = ref(false);
|
||||
const statusId = ref<string | null>(null);
|
||||
const statusCurrent = ref<number | null>(null);
|
||||
|
||||
function openCreate() {
|
||||
operateMode.value = 'create';
|
||||
operateRow.value = null;
|
||||
operateVisible.value = true;
|
||||
}
|
||||
|
||||
function openEdit(row: Api.Feedback.FeedbackItem) {
|
||||
operateMode.value = 'edit';
|
||||
operateRow.value = row;
|
||||
operateVisible.value = true;
|
||||
}
|
||||
|
||||
function openDetail(row: Api.Feedback.FeedbackItem) {
|
||||
detailId.value = row.id;
|
||||
detailVisible.value = true;
|
||||
}
|
||||
|
||||
function openStatus(row: Api.Feedback.FeedbackItem) {
|
||||
statusId.value = row.id;
|
||||
statusCurrent.value = row.status;
|
||||
statusVisible.value = true;
|
||||
}
|
||||
|
||||
const { columns, data, loading, getData, getDataByPage, mobilePagination } = useUIPaginatedTable({
|
||||
paginationProps: {
|
||||
currentPage: searchParams.pageNo,
|
||||
pageSize: searchParams.pageSize
|
||||
},
|
||||
api: () => fetchGetFeedbackPage(searchParams),
|
||||
transform: response => transformPageResult(response, searchParams.pageNo, searchParams.pageSize),
|
||||
onPaginationParamsChange: params => {
|
||||
searchParams.pageNo = params.currentPage ?? 1;
|
||||
searchParams.pageSize = params.pageSize ?? 20;
|
||||
},
|
||||
columns: () => [
|
||||
{ prop: 'index', type: 'index', label: '序号', width: 64, align: 'center' },
|
||||
{ prop: 'title', label: '标题', minWidth: 180, showOverflowTooltip: true },
|
||||
{
|
||||
prop: 'content',
|
||||
label: '内容',
|
||||
minWidth: 260,
|
||||
showOverflowTooltip: true,
|
||||
formatter: row => <span>{row.contentPreview}</span>
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '分类',
|
||||
width: 110,
|
||||
align: 'center',
|
||||
formatter: row => <DictTag dictCode={FEEDBACK_TYPE_DICT_CODE} value={row.type} />
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
width: 110,
|
||||
align: 'center',
|
||||
formatter: row => (
|
||||
<DictTag dictCode={FEEDBACK_STATUS_DICT_CODE} value={row.status} type={getFeedbackStatusTagType(row.status)} />
|
||||
)
|
||||
},
|
||||
{
|
||||
prop: 'creatorName',
|
||||
label: '提交人',
|
||||
width: 140,
|
||||
formatter: row => <span>{row.creatorName || row.creator}</span>
|
||||
},
|
||||
{ prop: 'createTime', label: '提交时间', width: 180 },
|
||||
{
|
||||
prop: 'operate',
|
||||
label: '操作',
|
||||
width: 140,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
formatter: row => <BusinessTableActionCell variant="icon" actions={getRowActions(row)} />
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 左侧分面统计（全量口径，不随筛选变化；仅在进入页面与写操作后刷新）
|
||||
const facetStat = ref<Api.Feedback.FeedbackStat>({ total: 0, typeCounts: {}, statusCounts: {} });
|
||||
const facetLoading = ref(false);
|
||||
|
||||
async function loadFacet() {
|
||||
facetLoading.value = true;
|
||||
try {
|
||||
const { data: stat, error } = await fetchGetFeedbackStat();
|
||||
if (!error && stat) {
|
||||
facetStat.value = stat;
|
||||
}
|
||||
} finally {
|
||||
// 统计接口异常（含 normalize 解引用空数据抛错）也要复位，避免分面面板 v-loading 永久转圈
|
||||
facetLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row: Api.Feedback.FeedbackItem) {
|
||||
const confirmed = await ElMessageBox.confirm('确认删除该意见反馈？', '提示', { type: 'warning' })
|
||||
.then(() => true)
|
||||
.catch(() => false);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
const { error } = await fetchDeleteFeedback(row.id);
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success('删除成功');
|
||||
await Promise.all([getData(), loadFacet()]);
|
||||
}
|
||||
|
||||
function getRowActions(row: Api.Feedback.FeedbackItem): BusinessTableAction[] {
|
||||
const actions: BusinessTableAction[] = [
|
||||
{ key: 'detail', label: '查看详情', buttonType: 'primary', icon: IconMdiEyeOutline, onClick: () => openDetail(row) }
|
||||
];
|
||||
if (canEditRow(row)) {
|
||||
actions.push({
|
||||
key: 'edit',
|
||||
label: '编辑',
|
||||
buttonType: 'primary',
|
||||
icon: IconMdiPencilOutline,
|
||||
onClick: () => openEdit(row)
|
||||
});
|
||||
}
|
||||
if (canUpdateStatus.value) {
|
||||
actions.push({
|
||||
key: 'status',
|
||||
label: '处理',
|
||||
buttonType: 'warning',
|
||||
icon: IconMdiProgressCheck,
|
||||
onClick: () => openStatus(row)
|
||||
});
|
||||
}
|
||||
if (canDeleteRow(row)) {
|
||||
actions.push({
|
||||
key: 'delete',
|
||||
label: '删除',
|
||||
buttonType: 'danger',
|
||||
icon: IconMdiDeleteOutline,
|
||||
onClick: () => handleDelete(row)
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
searchParams.pageNo = 1;
|
||||
getDataByPage(1);
|
||||
}
|
||||
|
||||
// 搜索区「重置」只清搜索区自有字段（标题）；左侧分面选中的 type/status 由分面单独控制，不在此连带清除
|
||||
function resetSearchParams() {
|
||||
searchParams.title = undefined;
|
||||
searchParams.pageNo = 1;
|
||||
getDataByPage(1);
|
||||
}
|
||||
|
||||
function handleSubmitted() {
|
||||
// 新增回到首页看最新；编辑只刷新当前页，避免跳页
|
||||
if (operateMode.value === 'edit') {
|
||||
getData();
|
||||
} else {
|
||||
getDataByPage(1);
|
||||
}
|
||||
loadFacet();
|
||||
}
|
||||
|
||||
function handleStatusUpdated() {
|
||||
getData();
|
||||
loadFacet();
|
||||
}
|
||||
|
||||
// 左侧分面点击：单选切换 toggle 由面板内部处理，这里只接收最终值并刷新列表
|
||||
function handleSelectType(value?: string | number) {
|
||||
searchParams.type = value ?? undefined;
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
function handleSelectStatus(value?: string | number) {
|
||||
searchParams.status = value ?? undefined;
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
function handleSelectAll() {
|
||||
searchParams.type = undefined;
|
||||
searchParams.status = undefined;
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
onMounted(loadFacet);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex gap-16px overflow-hidden">
|
||||
<FeedbackFacet
|
||||
class="w-200px shrink-0"
|
||||
:total="facetStat.total"
|
||||
:type-counts="facetStat.typeCounts"
|
||||
:status-counts="facetStat.statusCounts"
|
||||
:selected-type="searchParams.type"
|
||||
:selected-status="searchParams.status"
|
||||
:loading="facetLoading"
|
||||
@select-type="handleSelectType"
|
||||
@select-status="handleSelectStatus"
|
||||
@select-all="handleSelectAll"
|
||||
/>
|
||||
|
||||
<div class="flex-col-stretch flex-1-hidden gap-16px">
|
||||
<FeedbackSearch v-model:model="searchParams" @reset="resetSearchParams" @search="handleSearch" />
|
||||
|
||||
<ElCard class="flex-1-hidden card-wrapper" body-class="business-table-card-body">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-12px">
|
||||
<div class="flex items-center gap-10px">
|
||||
<p>意见反馈</p>
|
||||
<ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
|
||||
</div>
|
||||
<ElButton plain type="primary" @click="openCreate">提交反馈</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex-1">
|
||||
<ElTable v-loading="loading" height="100%" border row-key="id" :data="data">
|
||||
<ElTableColumn v-for="col in columns" :key="String(col.prop)" v-bind="col" />
|
||||
</ElTable>
|
||||
</div>
|
||||
|
||||
<div class="mt-20px flex justify-end">
|
||||
<ElPagination
|
||||
v-if="mobilePagination.total"
|
||||
layout="total,prev,pager,next,sizes"
|
||||
v-bind="mobilePagination"
|
||||
@current-change="mobilePagination['current-change']"
|
||||
@size-change="mobilePagination['size-change']"
|
||||
/>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
|
||||
<FeedbackOperateDialog
|
||||
v-model:visible="operateVisible"
|
||||
:mode="operateMode"
|
||||
:row-data="operateRow"
|
||||
@submitted="handleSubmitted"
|
||||
/>
|
||||
<FeedbackDetailDialog :id="detailId" v-model:visible="detailVisible" />
|
||||
<FeedbackStatusDialog
|
||||
:id="statusId"
|
||||
v-model:visible="statusVisible"
|
||||
:current-status="statusCurrent"
|
||||
@submitted="handleStatusUpdated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
115
src/views/feedback/modules/feedback-detail-dialog.vue
Normal file
115
src/views/feedback/modules/feedback-detail-dialog.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { FEEDBACK_STATUS_DICT_CODE, FEEDBACK_TYPE_DICT_CODE } from '@/constants/dict';
|
||||
import { getFeedbackStatusTagType } from '@/constants/status-tag';
|
||||
import { fetchGetFeedback } from '@/service/api';
|
||||
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
|
||||
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
|
||||
import BusinessFormSection from '@/components/custom/business-form-section.vue';
|
||||
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
|
||||
defineOptions({ name: 'FeedbackDetailDialog' });
|
||||
|
||||
const visible = defineModel<boolean>('visible', { default: false });
|
||||
|
||||
interface Props {
|
||||
id?: string | null;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const loading = ref(false);
|
||||
const detail = ref<Api.Feedback.FeedbackItem | null>(null);
|
||||
|
||||
async function loadDetail() {
|
||||
if (!props.id) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const { error, data } = await fetchGetFeedback(props.id);
|
||||
loading.value = false;
|
||||
if (!error) {
|
||||
detail.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
watch(visible, value => {
|
||||
if (value) {
|
||||
detail.value = null;
|
||||
loadDetail();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BusinessFormDialog
|
||||
v-model="visible"
|
||||
title="反馈详情"
|
||||
width="980px"
|
||||
max-body-height="76vh"
|
||||
:loading="loading"
|
||||
:show-footer="false"
|
||||
>
|
||||
<div v-if="detail" class="feedback-detail__grid">
|
||||
<div class="feedback-detail__col-left">
|
||||
<BusinessFormSection title="反馈信息">
|
||||
<ElDescriptions :column="1" border>
|
||||
<ElDescriptionsItem label="分类">
|
||||
<DictTag :dict-code="FEEDBACK_TYPE_DICT_CODE" :value="detail.type" />
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="状态">
|
||||
<DictTag
|
||||
:dict-code="FEEDBACK_STATUS_DICT_CODE"
|
||||
:value="detail.status"
|
||||
:type="getFeedbackStatusTagType(detail.status)"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="标题">{{ detail.title }}</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="联系方式">{{ detail.contact || '--' }}</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="提交人">{{ detail.creatorName || detail.creator }}</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="提交时间">{{ detail.createTime }}</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</BusinessFormSection>
|
||||
|
||||
<BusinessFormSection title="附件">
|
||||
<BusinessAttachmentUploader :model-value="detail.attachments" disabled directory="feedback" />
|
||||
</BusinessFormSection>
|
||||
</div>
|
||||
|
||||
<div class="feedback-detail__col-right">
|
||||
<BusinessFormSection title="详细描述">
|
||||
<BusinessRichTextEditor
|
||||
:model-value="detail.content"
|
||||
disabled
|
||||
:height="380"
|
||||
upload-directory="feedback"
|
||||
placeholder="--"
|
||||
/>
|
||||
</BusinessFormSection>
|
||||
</div>
|
||||
</div>
|
||||
</BusinessFormDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.feedback-detail__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.feedback-detail__col-left,
|
||||
.feedback-detail__col-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (width <= 1024px) {
|
||||
.feedback-detail__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
303
src/views/feedback/modules/feedback-facet.vue
Normal file
303
src/views/feedback/modules/feedback-facet.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<script setup lang="ts">
|
||||
import { type Component, computed } from 'vue';
|
||||
import { FEEDBACK_STATUS_DICT_CODE, FEEDBACK_TYPE_DICT_CODE } from '@/constants/dict';
|
||||
import { getFeedbackStatusTagType } from '@/constants/status-tag';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import IconBugOutline from '~icons/mdi/bug-outline';
|
||||
import IconEmoticonSadOutline from '~icons/mdi/emoticon-sad-outline';
|
||||
import IconLightbulbOnOutline from '~icons/mdi/lightbulb-on-outline';
|
||||
import IconTagOutline from '~icons/mdi/tag-outline';
|
||||
|
||||
defineOptions({ name: 'FeedbackFacet' });
|
||||
|
||||
interface Props {
|
||||
/** 全部反馈总数 */
|
||||
total: number;
|
||||
/** 各分类计数：key=分类码值字符串 */
|
||||
typeCounts: Record<string, number>;
|
||||
/** 各状态计数：key=状态码值字符串 */
|
||||
statusCounts: Record<string, number>;
|
||||
/** 当前选中的分类码值（来自列表搜索参数） */
|
||||
selectedType?: string | number | null;
|
||||
/** 当前选中的状态码值 */
|
||||
selectedStatus?: string | number | null;
|
||||
/** 统计加载态 */
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
selectedType: undefined,
|
||||
selectedStatus: undefined,
|
||||
loading: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 切换分类筛选（已处理单选 toggle，传最终值或 undefined） */
|
||||
selectType: [value: string | number | undefined];
|
||||
/** 切换状态筛选 */
|
||||
selectStatus: [value: string | number | undefined];
|
||||
/** 清空分类 + 状态筛选 */
|
||||
selectAll: [];
|
||||
}>();
|
||||
|
||||
const { dictData: typeDictData } = useDict(FEEDBACK_TYPE_DICT_CODE);
|
||||
const { dictData: statusDictData } = useDict(FEEDBACK_STATUS_DICT_CODE);
|
||||
|
||||
// 统计接口按字典全集返回计数，分面也使用全集，避免停用码值的历史数据被隐藏。
|
||||
const typeOptions = computed(() => typeDictData.value.map(item => ({ label: item.label, value: item.value })));
|
||||
const statusOptions = computed(() => statusDictData.value.map(item => ({ label: item.label, value: item.value })));
|
||||
|
||||
// ElTag type → 主题色变量，用于状态色点（颜色语义来源仍是 status-tag.ts）
|
||||
// 注意：本主题把 --el-color-info 设成了蓝色（settings.ts otherColor.info=#2080f0），
|
||||
// 与「处理中」的 primary 蓝撞色；故分面里 info（已忽略/兜底）单独落真实灰，仅作用于左侧圆点，
|
||||
// 右侧表格状态标签仍走主题色不受影响。
|
||||
const TAG_TYPE_COLOR_VAR: Record<string, string> = {
|
||||
primary: 'var(--el-color-primary)',
|
||||
success: 'var(--el-color-success)',
|
||||
warning: 'var(--el-color-warning)',
|
||||
danger: 'var(--el-color-danger)',
|
||||
info: 'var(--el-text-color-secondary)'
|
||||
};
|
||||
|
||||
function statusDotColor(value: string | number) {
|
||||
return TAG_TYPE_COLOR_VAR[getFeedbackStatusTagType(value)] ?? TAG_TYPE_COLOR_VAR.info;
|
||||
}
|
||||
|
||||
// 分类图标按字典码值映射（feedback_type：1 缺陷 / 2 体验问题 / 3 功能建议，口径见 constants/dict.ts）
|
||||
const TYPE_ICON_MAP: Record<string, Component> = {
|
||||
'1': IconBugOutline,
|
||||
'2': IconEmoticonSadOutline,
|
||||
'3': IconLightbulbOnOutline
|
||||
};
|
||||
|
||||
/** 分类前导图标，未匹配码值回退通用标签图标 */
|
||||
function typeIcon(value: string | number): Component {
|
||||
return TYPE_ICON_MAP[String(value)] ?? IconTagOutline;
|
||||
}
|
||||
|
||||
/** 未选任何分类 / 状态时，「全部」高亮 */
|
||||
const isAllActive = computed(
|
||||
() =>
|
||||
(props.selectedType === undefined || props.selectedType === null) &&
|
||||
(props.selectedStatus === undefined || props.selectedStatus === null)
|
||||
);
|
||||
|
||||
/** 选中值与候选项是否同一码值（统一 String 比较，兼容字典 value 的 number/string 形态） */
|
||||
function isSame(selected: string | number | null | undefined, value: string | number) {
|
||||
return selected !== undefined && selected !== null && String(selected) === String(value);
|
||||
}
|
||||
|
||||
function handleType(value: string | number) {
|
||||
emit('selectType', isSame(props.selectedType, value) ? undefined : value);
|
||||
}
|
||||
|
||||
function handleStatus(value: string | number) {
|
||||
emit('selectStatus', isSame(props.selectedStatus, value) ? undefined : value);
|
||||
}
|
||||
|
||||
function handleAll() {
|
||||
emit('selectAll');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElCard class="feedback-facet card-wrapper">
|
||||
<div v-loading="loading" class="feedback-facet__scroll">
|
||||
<button
|
||||
type="button"
|
||||
class="facet-item facet-item--all"
|
||||
:class="{ 'is-active': isAllActive }"
|
||||
:aria-pressed="isAllActive"
|
||||
@click="handleAll"
|
||||
>
|
||||
<span class="facet-item__lead" aria-hidden="true"><icon-mdi-inbox-multiple-outline /></span>
|
||||
<span class="facet-item__label">全部</span>
|
||||
<span class="facet-item__count" :class="{ 'is-zero': total === 0 }">{{ total }}</span>
|
||||
</button>
|
||||
|
||||
<div class="facet-group">
|
||||
<p class="facet-group__title">分类</p>
|
||||
<button
|
||||
v-for="opt in typeOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="facet-item"
|
||||
:class="{ 'is-active': isSame(selectedType, opt.value) }"
|
||||
:aria-pressed="isSame(selectedType, opt.value)"
|
||||
@click="handleType(opt.value)"
|
||||
>
|
||||
<span class="facet-item__lead" aria-hidden="true"><component :is="typeIcon(opt.value)" /></span>
|
||||
<span class="facet-item__label">{{ opt.label }}</span>
|
||||
<span class="facet-item__count" :class="{ 'is-zero': (typeCounts[String(opt.value)] ?? 0) === 0 }">
|
||||
{{ typeCounts[String(opt.value)] ?? 0 }}
|
||||
</span>
|
||||
</button>
|
||||
<p v-if="!typeOptions.length" class="facet-empty">分类字典未加载</p>
|
||||
</div>
|
||||
|
||||
<div class="facet-group">
|
||||
<p class="facet-group__title">状态</p>
|
||||
<button
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="facet-item"
|
||||
:class="{ 'is-active': isSame(selectedStatus, opt.value) }"
|
||||
:aria-pressed="isSame(selectedStatus, opt.value)"
|
||||
@click="handleStatus(opt.value)"
|
||||
>
|
||||
<span class="facet-item__lead" aria-hidden="true">
|
||||
<span class="facet-item__dot" :style="{ backgroundColor: statusDotColor(opt.value) }" />
|
||||
</span>
|
||||
<span class="facet-item__label">{{ opt.label }}</span>
|
||||
<span class="facet-item__count" :class="{ 'is-zero': (statusCounts[String(opt.value)] ?? 0) === 0 }">
|
||||
{{ statusCounts[String(opt.value)] ?? 0 }}
|
||||
</span>
|
||||
</button>
|
||||
<p v-if="!statusOptions.length" class="facet-empty">状态字典未加载</p>
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.feedback-facet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-facet__scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.facet-item--all {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.facet-group + .facet-group {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.facet-group__title {
|
||||
margin: 14px 10px 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.facet-empty {
|
||||
margin: 4px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.facet-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.18s ease-out;
|
||||
}
|
||||
|
||||
.facet-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
// 键盘聚焦可见环（offset 内缩，避免被圆角裁切）
|
||||
.facet-item:focus-visible {
|
||||
outline: 2px solid var(--el-color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.facet-item.is-active {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
// 选中项左侧主题色强调条
|
||||
.facet-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 3px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: var(--el-color-primary);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// 前导标记列：全部=收件箱图标 / 状态=语义色点，对齐同一宽度
|
||||
.facet-item__lead {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.facet-item:hover .facet-item__lead,
|
||||
.facet-item.is-active .facet-item__lead {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.facet-item__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.facet-item__label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.facet-item__count {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
// 计数为 0 的项弱化，避免一排 0 抢视线
|
||||
.facet-item__count.is-zero {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.facet-item.is-active .facet-item__count {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
// 尊重系统「减少动态效果」偏好
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.facet-item {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
src/views/feedback/modules/feedback-operate-dialog.vue
Normal file
252
src/views/feedback/modules/feedback-operate-dialog.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { FEEDBACK_TYPE_DICT_CODE } from '@/constants/dict';
|
||||
import { fetchCreateFeedback, fetchUpdateFeedback } from '@/service/api';
|
||||
import { useForm, useFormRules } from '@/hooks/common/form';
|
||||
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
|
||||
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
|
||||
import BusinessFormSection from '@/components/custom/business-form-section.vue';
|
||||
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
|
||||
import DictSelect from '@/components/custom/dict-select.vue';
|
||||
|
||||
defineOptions({ name: 'FeedbackOperateDialog' });
|
||||
|
||||
type OperateMode = 'create' | 'edit';
|
||||
|
||||
interface Props {
|
||||
mode: OperateMode;
|
||||
rowData?: Api.Feedback.FeedbackItem | null;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
rowData: null
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submitted: [];
|
||||
}>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', { default: false });
|
||||
|
||||
const { formRef, validate } = useForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const submitting = ref(false);
|
||||
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
|
||||
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
|
||||
|
||||
interface FormModel {
|
||||
/** DictSelect 选中后为字符串；提交时 Number() 转字典 Integer（非 ID，允许转 number） */
|
||||
type: string | number | null;
|
||||
title: string;
|
||||
content: string;
|
||||
contact: string;
|
||||
attachments: Api.Project.AttachmentItem[];
|
||||
}
|
||||
|
||||
const model = reactive<FormModel>({
|
||||
type: null,
|
||||
title: '',
|
||||
content: '',
|
||||
contact: '',
|
||||
attachments: []
|
||||
});
|
||||
|
||||
const dialogTitle = computed(() => (props.mode === 'create' ? '提交意见反馈' : '编辑意见反馈'));
|
||||
|
||||
/** 富文本是否为空：去标签去 后无文本，且无图片 */
|
||||
function isEmptyRichText(html: string | null | undefined) {
|
||||
if (!html) {
|
||||
return true;
|
||||
}
|
||||
const text = html
|
||||
.replace(/<[^>]+>/g, '')
|
||||
.replace(/ /g, '')
|
||||
.trim();
|
||||
if (text) {
|
||||
return false;
|
||||
}
|
||||
return !/<img\b/i.test(html);
|
||||
}
|
||||
|
||||
const rules = computed(
|
||||
() =>
|
||||
({
|
||||
type: [createRequiredRule('请选择反馈分类')],
|
||||
title: [createRequiredRule('请输入标题')],
|
||||
content: [
|
||||
{
|
||||
validator: (_rule, _value, callback) => {
|
||||
if (isEmptyRichText(model.content)) {
|
||||
callback(new Error('请输入详细描述'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}) satisfies Record<string, App.Global.FormRule[]>
|
||||
);
|
||||
|
||||
function applyRowDataToModel() {
|
||||
const row = props.rowData;
|
||||
if (props.mode === 'edit' && row) {
|
||||
// 字典选项 value 为字符串，回显需转字符串才能与下拉项严格匹配（否则显示原始数字）
|
||||
model.type = row.type === null || row.type === undefined ? null : String(row.type);
|
||||
model.title = row.title ?? '';
|
||||
model.content = row.content ?? '';
|
||||
model.contact = row.contact ?? '';
|
||||
model.attachments = row.attachments ? [...row.attachments] : [];
|
||||
return;
|
||||
}
|
||||
model.type = null;
|
||||
model.title = '';
|
||||
model.content = '';
|
||||
model.contact = '';
|
||||
model.attachments = [];
|
||||
}
|
||||
|
||||
async function handleConfirm() {
|
||||
await validate();
|
||||
|
||||
if (attachmentUploaderRef.value?.hasUploading) {
|
||||
window.$message?.warning('附件还在上传中，请稍候');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
const basePayload: Api.Feedback.FeedbackSubmitParams = {
|
||||
type: Number(model.type),
|
||||
title: model.title.trim(),
|
||||
content: model.content,
|
||||
contact: model.contact.trim() || undefined,
|
||||
attachments: [...model.attachments]
|
||||
};
|
||||
|
||||
const { error } =
|
||||
props.mode === 'edit' && props.rowData
|
||||
? await fetchUpdateFeedback({ id: props.rowData.id, ...basePayload })
|
||||
: await fetchCreateFeedback(basePayload);
|
||||
|
||||
submitting.value = false;
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 成功后先 commit，置 committed=true，避免 destroy-on-close 触发 rollback 误删已存文件/图片
|
||||
await Promise.all([attachmentUploaderRef.value?.commit(), richTextEditorRef.value?.commit()]);
|
||||
window.$message?.success(props.mode === 'edit' ? '保存成功' : '提交成功');
|
||||
visible.value = false;
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
await Promise.all([attachmentUploaderRef.value?.rollback(), richTextEditorRef.value?.rollback()]);
|
||||
}
|
||||
|
||||
watch(visible, async value => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
applyRowDataToModel();
|
||||
await nextTick();
|
||||
// 让附件 / 富文本组件把当前 model 视作 original，必须在 model 填充之后
|
||||
attachmentUploaderRef.value?.initSession();
|
||||
richTextEditorRef.value?.initSession();
|
||||
formRef.value?.clearValidate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BusinessFormDialog
|
||||
v-model="visible"
|
||||
:title="dialogTitle"
|
||||
width="980px"
|
||||
max-body-height="76vh"
|
||||
:confirm-loading="submitting"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<ElForm
|
||||
ref="formRef"
|
||||
:model="model"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
:validate-on-rule-change="false"
|
||||
class="feedback-operate-dialog__form"
|
||||
>
|
||||
<div class="feedback-operate-dialog__grid">
|
||||
<div class="feedback-operate-dialog__col-left">
|
||||
<BusinessFormSection title="反馈信息">
|
||||
<ElFormItem label="反馈分类" prop="type">
|
||||
<DictSelect v-model="model.type" :dict-code="FEEDBACK_TYPE_DICT_CODE" placeholder="请选择反馈分类" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="标题" prop="title">
|
||||
<ElInput v-model="model.title" maxlength="100" show-word-limit placeholder="请输入标题" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="联系方式">
|
||||
<ElInput v-model="model.contact" maxlength="100" placeholder="选填，方便我们联系你" />
|
||||
</ElFormItem>
|
||||
</BusinessFormSection>
|
||||
|
||||
<BusinessFormSection title="附件">
|
||||
<ElFormItem class="feedback-operate-dialog__attachment-item">
|
||||
<BusinessAttachmentUploader
|
||||
ref="attachmentUploaderRef"
|
||||
v-model="model.attachments"
|
||||
directory="feedback"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</BusinessFormSection>
|
||||
</div>
|
||||
|
||||
<div class="feedback-operate-dialog__col-right">
|
||||
<BusinessFormSection title="详细描述">
|
||||
<ElFormItem prop="content" class="feedback-operate-dialog__desc-item">
|
||||
<BusinessRichTextEditor
|
||||
ref="richTextEditorRef"
|
||||
v-model="model.content"
|
||||
:height="380"
|
||||
upload-directory="feedback"
|
||||
placeholder="请输入详细描述"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</BusinessFormSection>
|
||||
</div>
|
||||
</div>
|
||||
</ElForm>
|
||||
</BusinessFormDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.feedback-operate-dialog__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.feedback-operate-dialog__col-left,
|
||||
.feedback-operate-dialog__col-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feedback-operate-dialog__desc-item,
|
||||
.feedback-operate-dialog__attachment-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (width <= 1024px) {
|
||||
.feedback-operate-dialog__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
src/views/feedback/modules/feedback-search.vue
Normal file
31
src/views/feedback/modules/feedback-search.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
|
||||
|
||||
defineOptions({ name: 'FeedbackSearch' });
|
||||
|
||||
const emit = defineEmits<{
|
||||
reset: [];
|
||||
search: [];
|
||||
}>();
|
||||
|
||||
const model = defineModel<Api.Feedback.FeedbackSearchParams>('model', { required: true });
|
||||
|
||||
// 分类 / 状态筛选已迁移至左侧分面面板，搜索区只保留标题关键词
|
||||
const fields: SearchField[] = [{ key: 'title', label: '标题', type: 'input', placeholder: '请输入标题关键词' }];
|
||||
|
||||
function reset() {
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
function search() {
|
||||
// 输入期不实时 trim（避免受控 input 吃掉词间空格）；提交前规整一次，空串归一为 undefined
|
||||
model.value.title = model.value.title?.trim() || undefined;
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableSearchFields v-model="model" :fields="fields" :columns="2" @reset="reset" @search="search" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
74
src/views/feedback/modules/feedback-status-dialog.vue
Normal file
74
src/views/feedback/modules/feedback-status-dialog.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { FEEDBACK_STATUS_DICT_CODE } from '@/constants/dict';
|
||||
import { fetchUpdateFeedbackStatus } from '@/service/api';
|
||||
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
|
||||
import DictSelect from '@/components/custom/dict-select.vue';
|
||||
|
||||
defineOptions({ name: 'FeedbackStatusDialog' });
|
||||
|
||||
const visible = defineModel<boolean>('visible', { default: false });
|
||||
|
||||
interface Props {
|
||||
id?: string | null;
|
||||
currentStatus?: number | null;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
submitted: [];
|
||||
}>();
|
||||
|
||||
const submitting = ref(false);
|
||||
const status = ref<string | number | null>(null);
|
||||
|
||||
const confirmDisabled = computed(() => status.value === null || status.value === undefined || status.value === '');
|
||||
|
||||
async function handleConfirm() {
|
||||
if (!props.id || confirmDisabled.value) {
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
// status 是字典编码（非 ID），DictSelect 选中为字符串，转 Integer 提交
|
||||
const { error } = await fetchUpdateFeedbackStatus(props.id, Number(status.value));
|
||||
submitting.value = false;
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.$message?.success('状态已更新');
|
||||
visible.value = false;
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, value => {
|
||||
if (value) {
|
||||
// 字典选项 value 为字符串，回显需转字符串才能与下拉项严格匹配（否则显示原始数字）
|
||||
const current = props.currentStatus;
|
||||
status.value = current === null || current === undefined ? null : String(current);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BusinessFormDialog
|
||||
v-model="visible"
|
||||
title="修改处理状态"
|
||||
preset="sm"
|
||||
:confirm-loading="submitting"
|
||||
:confirm-disabled="confirmDisabled"
|
||||
@confirm="handleConfirm"
|
||||
>
|
||||
<ElForm label-position="top">
|
||||
<ElFormItem label="处理状态">
|
||||
<DictSelect
|
||||
v-model="status"
|
||||
:dict-code="FEEDBACK_STATUS_DICT_CODE"
|
||||
:clearable="false"
|
||||
placeholder="请选择处理状态"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</BusinessFormDialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user