116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
|
<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>
|