|
|
@@ -43,16 +43,15 @@
|
|
|
<el-table-column label="反馈ID" align="center" prop="id" width="80" />
|
|
|
<el-table-column label="用户昵称" align="center" prop="nickname" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="手机号" align="center" prop="phone" width="120" />
|
|
|
- <el-table-column label="反馈内容" align="center" prop="content" :show-overflow-tooltip="true" min-width="200" />
|
|
|
- <el-table-column label="图片" align="center" width="100">
|
|
|
+ <el-table-column label="反馈内容" align="center" prop="content" min-width="200">
|
|
|
<template #default="scope">
|
|
|
- <el-button v-if="scope.row.images" link type="primary" @click="handleViewImages(scope.row)">查看图片</el-button>
|
|
|
- <span v-else class="text-gray-400">无</span>
|
|
|
+ <div class="content-ellipsis">{{ scope.row.content }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="170" />
|
|
|
- <el-table-column label="操作" align="center" width="80">
|
|
|
+ <el-table-column label="操作" align="center" width="150">
|
|
|
<template #default="scope">
|
|
|
+ <el-button link type="primary" icon="View" @click="handleViewDetail(scope.row)">详情</el-button>
|
|
|
<el-tooltip content="删除" placement="top">
|
|
|
<el-button v-hasPermi="['miniapp:feedback:remove']" link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
|
|
</el-tooltip>
|
|
|
@@ -69,18 +68,27 @@
|
|
|
/>
|
|
|
</el-card>
|
|
|
|
|
|
- <!-- 图片预览对话框 -->
|
|
|
- <el-dialog v-model="imageDialogVisible" title="反馈图片" width="800px">
|
|
|
- <div class="image-preview-container">
|
|
|
- <el-image
|
|
|
- v-for="(image, index) in currentImages"
|
|
|
- :key="index"
|
|
|
- :src="image"
|
|
|
- :preview-src-list="currentImages"
|
|
|
- :initial-index="index"
|
|
|
- fit="cover"
|
|
|
- class="preview-image"
|
|
|
- />
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog v-model="detailDialogVisible" title="反馈详情" width="800px">
|
|
|
+ <div class="feedback-detail">
|
|
|
+ <div class="detail-section">
|
|
|
+ <h4>反馈内容</h4>
|
|
|
+ <div class="content-text">{{ currentDetail.content }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="currentDetail.images" class="detail-section">
|
|
|
+ <h4>反馈图片</h4>
|
|
|
+ <div class="image-preview-container">
|
|
|
+ <el-image
|
|
|
+ v-for="(image, index) in currentImages"
|
|
|
+ :key="index"
|
|
|
+ :src="image"
|
|
|
+ :preview-src-list="currentImages"
|
|
|
+ :initial-index="index"
|
|
|
+ fit="cover"
|
|
|
+ class="preview-image"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -100,7 +108,8 @@ const showSearch = ref(true);
|
|
|
const total = ref(0);
|
|
|
const ids = ref<number[]>([]);
|
|
|
const multiple = ref(true);
|
|
|
-const imageDialogVisible = ref(false);
|
|
|
+const detailDialogVisible = ref(false);
|
|
|
+const currentDetail = ref<any>({});
|
|
|
const currentImages = ref<string[]>([]);
|
|
|
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
@@ -155,19 +164,20 @@ const handleSelectionChange = (selection: any[]) => {
|
|
|
multiple.value = !selection.length;
|
|
|
};
|
|
|
|
|
|
-/** 查看图片 */
|
|
|
-const handleViewImages = (row: any) => {
|
|
|
+/** 查看详情 */
|
|
|
+const handleViewDetail = (row: any) => {
|
|
|
+ currentDetail.value = row;
|
|
|
if (row.images) {
|
|
|
- // 将逗号分隔的图片URL转换为数组
|
|
|
currentImages.value = row.images.split(',').map((url: string) => {
|
|
|
- // 如果是相对路径，拼接小程序后端代理路径
|
|
|
if (url.startsWith('/')) {
|
|
|
return '/miniapp-api' + url;
|
|
|
}
|
|
|
return url;
|
|
|
});
|
|
|
- imageDialogVisible.value = true;
|
|
|
+ } else {
|
|
|
+ currentImages.value = [];
|
|
|
}
|
|
|
+ detailDialogVisible.value = true;
|
|
|
};
|
|
|
|
|
|
/** 删除按钮（工具栏） */
|
|
|
@@ -205,6 +215,21 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.detail-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-section h4 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.content-text {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
.image-preview-container {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -215,6 +240,11 @@ onMounted(() => {
|
|
|
width: 150px;
|
|
|
height: 150px;
|
|
|
cursor: pointer;
|
|
|
- border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-ellipsis {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
</style>
|
