From 2d6b89dfecdbb8240f0ba9983bd6858eb7448cb0 Mon Sep 17 00:00:00 2001
From: lxd <1004405501@qq.com>
Date: Thu, 26 Jun 2025 15:26:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AE=A2=E6=88=B7=E7=95=99?=
 =?UTF-8?q?=E8=A8=80=E6=9D=BF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/feedback/index.ts          |  47 +++
 src/views/notice/FeedbackReply.vue | 204 +++++++++++
 src/views/notice/msgboard.vue      | 532 +++++++++++++++++++++++++++++
 3 files changed, 783 insertions(+)
 create mode 100644 src/api/feedback/index.ts
 create mode 100644 src/views/notice/FeedbackReply.vue
 create mode 100644 src/views/notice/msgboard.vue

diff --git a/src/api/feedback/index.ts b/src/api/feedback/index.ts
new file mode 100644
index 000000000..62f85cd9a
--- /dev/null
+++ b/src/api/feedback/index.ts
@@ -0,0 +1,47 @@
+import request from '@/config/axios'
+
+// 留言板 VO
+export interface FeedbackVO {
+  id: number // 主键
+  content: string // 客户提交的反馈内容
+  backContent: string // 医生回复的内容
+  userId: number // 客户id
+  doctorName: string // 医生姓名
+  doctorId: number // 医生id
+  backTime: Date | number // 医生回复时间（支持Date对象或时间戳）
+  orgid: number // 机构ID
+  orgname: string // 机构名称
+}
+
+// 留言板 API
+export const FeedbackApi = {
+  // 查询留言板分页
+  getFeedbackPage: async (params: any) => {
+    return await request.get({ url: `/system/feedback/page`, params })
+  },
+
+  // 查询留言板详情
+  getFeedback: async (id: number) => {
+    return await request.get({ url: `/system/feedback/get?id=` + id })
+  },
+
+  // 新增留言板
+  createFeedback: async (data: FeedbackVO) => {
+    return await request.post({ url: `/system/feedback/create`, data })
+  },
+
+  // 修改留言板
+  updateFeedback: async (data: FeedbackVO) => {
+    return await request.put({ url: `/system/feedback/update`, data })
+  },
+
+  // 删除留言板
+  deleteFeedback: async (id: number) => {
+    return await request.delete({ url: `/system/feedback/delete?id=` + id })
+  },
+
+  // 导出留言板 Excel
+  exportFeedback: async (params) => {
+    return await request.download({ url: `/system/feedback/export-excel`, params })
+  },
+}
diff --git a/src/views/notice/FeedbackReply.vue b/src/views/notice/FeedbackReply.vue
new file mode 100644
index 000000000..4f9a35f1a
--- /dev/null
+++ b/src/views/notice/FeedbackReply.vue
@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="isViewMode ? '查看回复' : '回复留言'"
+    width="600px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="reply-dialog-content">
+      <!-- 原留言内容 -->
+      <div class="original-message">
+        <h4>客户留言：</h4>
+        <div class="message-box">
+          <p>{{ feedbackData.content }}</p>
+          <div class="message-info">
+            <span>客户ID: {{ feedbackData.userId }}</span>
+            <span>机构: {{ feedbackData.orgname }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 回复表单 -->
+      <div class="reply-form">
+        <h4>{{ isViewMode ? '回复内容：' : '请输入回复：' }}</h4>
+        <el-form :model="replyForm" ref="replyFormRef" :rules="replyRules">
+          <el-form-item prop="backContent">
+            <el-input
+              v-model="replyForm.backContent"
+              type="textarea"
+              :rows="6"
+              placeholder="请输入回复内容..."
+              :disabled="isViewMode"
+              maxlength="500"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button
+          v-if="!isViewMode"
+          type="primary"
+          @click="handleSubmit"
+          :loading="submitLoading"
+        >
+          提交回复
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { FeedbackApi, type FeedbackVO } from '@/api/feedback'
+
+// 定义组件属性
+interface Props {
+  visible: boolean
+  feedbackData: FeedbackVO
+  doctorName?: string
+}
+
+// 定义组件事件
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 响应式数据
+const submitLoading = ref(false)
+const replyFormRef = ref<FormInstance>()
+
+// 回复表单
+const replyForm = reactive<FeedbackVO>({
+  id: 0,
+  content: '',
+  backContent: '',
+  userId: 0,
+  doctorName: '',
+  doctorId: 0,
+  backTime: Date.now(),
+  orgid: 0,
+  orgname: ''
+})
+
+// 表单验证规则
+const replyRules: FormRules = {
+  backContent: [
+    { required: true, message: '请输入回复内容', trigger: 'blur' },
+    { min: 1, max: 500, message: '回复内容长度在 1 到 500 个字符', trigger: 'blur' }
+  ]
+}
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (value) => emit('update:visible', value)
+})
+
+const isViewMode = computed(() => {
+  return !!props.feedbackData.backTime
+})
+
+// 监听数据变化，更新表单
+watch(() => props.feedbackData, (newData) => {
+  if (newData && newData.id) {
+    Object.assign(replyForm, newData)
+  }
+}, { immediate: true, deep: true })
+
+// 提交回复
+const handleSubmit = async () => {
+  try {
+    await replyFormRef.value?.validate()
+    submitLoading.value = true
+    
+    const submitData = {
+      ...replyForm,
+      backTime: Date.now(),
+      doctorName: props.doctorName || '未知医生'
+    }
+    
+    await FeedbackApi.updateFeedback(submitData)
+    ElMessage.success('回复成功')
+    emit('success')
+    handleClose()
+  } catch (error: any) {
+    console.error('回复失败:', error)
+    ElMessage.error('回复失败')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+// 关闭对话框
+const handleClose = () => {
+  dialogVisible.value = false
+  // 重置表单
+  replyFormRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss">
+.reply-dialog-content {
+  .original-message {
+    margin-bottom: 24px;
+
+    h4 {
+      margin: 0 0 12px 0;
+      color: #303133;
+      font-size: 16px;
+    }
+
+    .message-box {
+      background: #f8f9fa;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      padding: 16px;
+
+      p {
+        margin: 0 0 12px 0;
+        line-height: 1.6;
+        color: #303133;
+      }
+
+      .message-info {
+        display: flex;
+        gap: 16px;
+        font-size: 12px;
+        color: #909399;
+
+        span {
+          background: #e4e7ed;
+          padding: 2px 8px;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  .reply-form {
+    h4 {
+      margin: 0 0 12px 0;
+      color: #303133;
+      font-size: 16px;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/notice/msgboard.vue b/src/views/notice/msgboard.vue
new file mode 100644
index 000000000..f4929d645
--- /dev/null
+++ b/src/views/notice/msgboard.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="msgboard-container">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <h1 class="page-title">
+          <el-icon class="title-icon"><ChatDotRound /></el-icon>
+          留言板管理
+        </h1>
+        <p class="page-desc">查看客户留言并及时回复，提升客户满意度</p>
+      </div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <el-card class="search-card" shadow="never">
+        <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="search-form">
+          <el-form-item label="客户ID" prop="userId">
+            <el-input
+              v-model="queryParams.userId"
+              placeholder="请输入客户ID"
+              clearable
+              style="width: 120px"
+            />
+          </el-form-item>
+          <el-form-item label="回复状态" prop="replyStatus">
+            <el-select v-model="queryParams.replyStatus" placeholder="请选择回复状态" clearable style="width: 150px">
+              <el-option label="已回复" value="replied" />
+              <el-option label="未回复" value="unreplied" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="回复时间" prop="backTimeRange">
+            <el-date-picker
+              v-model="queryParams.backTimeRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon>
+              搜索
+            </el-button>
+            <el-button @click="handleReset">
+              <el-icon><RefreshLeft /></el-icon>
+              重置
+            </el-button>
+            <el-button type="success" @click="handleExport">
+              <el-icon><Download /></el-icon>
+              导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <!-- 留言列表 -->
+    <div class="message-list-section">
+      <el-card class="list-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">留言列表</span>
+            <div class="header-stats">
+              <el-tag type="info">总计: {{ total }}</el-tag>
+              <el-tag type="success">已回复: {{ repliedCount }}</el-tag>
+              <el-tag type="warning">未回复: {{ unrepliedCount }}</el-tag>
+            </div>
+          </div>
+        </template>
+
+        <el-table
+          v-loading="loading"
+          :data="messageList"
+          style="width: 100%"
+          row-key="id"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="留言内容" prop="content" min-width="300" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div class="message-content">
+                <div class="content-text">{{ row.content }}</div>
+                <div class="content-meta">
+                  <el-tag size="small" type="info">客户ID: {{ row.userId }}</el-tag>
+                  <el-tag size="small" type="primary">{{ row.orgname }}</el-tag>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="回复状态" prop="backContent" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="row.backTime ? 'success' : 'warning'"
+                size="small"
+              >
+                {{ row.backTime ? '已回复' : '未回复' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="回复内容" prop="backContent" min-width="180" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.backContent" class="reply-content">{{ row.backContent }}</span>
+              <span v-else class="no-reply">暂无回复</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="回复医生" prop="doctorName" width="100" align="center">
+            <template #default="{ row }">
+              <span v-if="row.doctorName">{{ row.doctorName }}</span>
+              <span v-else class="no-doctor">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="回复时间" prop="backTime" width="160" align="center">
+            <template #default="{ row }">
+              <span v-if="row.backTime">{{ formatDate(row.backTime) }}</span>
+              <span v-else class="no-time">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleReply(row)"
+                :disabled="!!row.backTime"
+              >
+                <el-icon><ChatDotRound /></el-icon>
+                {{ row.backTime ? '查看回复' : '回复' }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-wrapper">
+          <el-pagination
+            v-model:current-page="queryParams.pageNo"
+            v-model:page-size="queryParams.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 回复对话框 -->
+    <FeedbackReply
+      v-model:visible="replyDialogVisible"
+      :feedback-data="currentFeedback"
+      :doctor-name="doctorName"
+      @success="handleReplySuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
+import { ChatDotRound, Download, Search, RefreshLeft } from '@element-plus/icons-vue'
+import { FeedbackApi, type FeedbackVO } from '@/api/feedback'
+import FeedbackReply from './FeedbackReply.vue'
+import { getUserProfile } from '@/api/system/user/profile'
+// 响应式数据
+const loading = ref(false)
+const replyDialogVisible = ref(false)
+const messageList = ref<FeedbackVO[]>([])
+const total = ref(0)
+const selectedIds = ref<number[]>([])
+const currentFeedback = ref<FeedbackVO>({
+  id: 0,
+  content: '',
+  backContent: '',
+  userId: 0,
+  doctorName: '',
+  doctorId: 0,
+  backTime: Date.now(),
+  orgid: 0,
+  orgname: ''
+})
+const userProfile = ref<any>({})
+
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 20,
+  userId: '',
+  replyStatus: '',
+  backTimeRange: [] as string[],
+  backTime: [] as string[],
+  orgid: undefined as number | undefined
+})
+
+// 表单引用
+const queryFormRef = ref<FormInstance>()
+
+// 计算属性
+const repliedCount = computed(() => {
+  return messageList.value.filter(item => item.backTime).length
+})
+
+const unrepliedCount = computed(() => {
+  return messageList.value.filter(item => !item.backTime).length
+})
+
+// 计算医生姓名，优先使用昵称，如果没有则使用用户名
+const doctorName = computed(() => {
+  return userProfile.value?.nickname || userProfile.value?.username || '未知医生'
+})
+
+// 获取留言列表
+const getMessageList = async () => {
+  try {
+    loading.value = true
+    const params = { ...queryParams }
+    
+    // 处理回复时间范围 - 直接传递给后端的backTime字段
+    if (params.backTimeRange && params.backTimeRange.length === 2) {
+      // 如果日期格式不包含时间，则自动补充时间
+      const startDate = params.backTimeRange[0].includes(' ') 
+        ? params.backTimeRange[0] 
+        : params.backTimeRange[0] + ' 00:00:00'
+      const endDate = params.backTimeRange[1].includes(' ') 
+        ? params.backTimeRange[1] 
+        : params.backTimeRange[1] + ' 23:59:59'
+      params.backTime = [startDate, endDate]
+    } else {
+      params.backTime = []
+    }
+    params.backTimeRange = []
+
+    // 添加orgid参数
+    if (userProfile.value?.dept?.id) {
+      params.orgid = userProfile.value.dept.id
+    }
+
+    const res = await FeedbackApi.getFeedbackPage(params)
+    
+    // 更安全的数据访问 - res已经是处理过的数据
+    if (res) {
+      messageList.value = res.list || res.records || res.data || []
+      total.value = res.total || res.totalCount || 0
+    } else {
+      messageList.value = []
+      total.value = 0
+    }
+  } catch (error: any) {
+    console.error('获取留言列表失败:', error)
+    ElMessage.error('获取留言列表失败')
+    messageList.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getMessageList()
+}
+
+// 重置搜索
+const handleReset = () => {
+  queryFormRef.value?.resetFields()
+  queryParams.pageNo = 1
+  getMessageList()
+}
+
+// 导出
+const handleExport = async () => {
+  try {
+    const exportParams = { ...queryParams }
+
+    // 处理回复时间范围 - 直接传递给后端的backTime字段
+    if (exportParams.backTimeRange && exportParams.backTimeRange.length === 2) {
+      // 如果日期格式不包含时间，则自动补充时间
+      const startDate = exportParams.backTimeRange[0].includes(' ') 
+        ? exportParams.backTimeRange[0] 
+        : exportParams.backTimeRange[0] + ' 00:00:00'
+      const endDate = exportParams.backTimeRange[1].includes(' ') 
+        ? exportParams.backTimeRange[1] 
+        : exportParams.backTimeRange[1] + ' 23:59:59'
+      exportParams.backTime = [startDate, endDate]
+    } else {
+      exportParams.backTime = []
+    }
+    exportParams.backTimeRange = []
+
+    // 添加orgid参数
+    if (userProfile.value?.dept?.id) {
+      exportParams.orgid = userProfile.value.dept.id
+    }
+
+    await FeedbackApi.exportFeedback(exportParams)
+    ElMessage.success('导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败')
+  }
+}
+
+// 分页处理
+const handleSizeChange = (val: number) => {
+  queryParams.pageSize = val
+  getMessageList()
+}
+
+const handleCurrentChange = (val: number) => {
+  queryParams.pageNo = val
+  getMessageList()
+}
+
+// 选择处理
+const handleSelectionChange = (selection: FeedbackVO[]) => {
+  selectedIds.value = selection.map(item => item.id)
+}
+
+// 回复留言
+const handleReply = (row: FeedbackVO) => {
+  currentFeedback.value = { ...row }
+  replyDialogVisible.value = true
+}
+
+// 回复成功回调
+const handleReplySuccess = () => {
+  getMessageList()
+}
+
+// 格式化日期
+const formatDate = (date: Date | string | number) => {
+  if (!date) return ''
+  
+  let d: Date
+  if (typeof date === 'number') {
+    d = new Date(date)
+  } else {
+    d = new Date(date)
+  }
+  
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+  
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 页面加载时获取数据
+onMounted(async () => {
+  try {
+    // 首先获取用户信息
+    userProfile.value = await getUserProfile()
+    queryParams.orgid = userProfile.value.dept.id
+    // 然后获取留言列表
+    await getMessageList()
+  } catch (error) {
+    console.error('初始化失败:', error)
+    ElMessage.error('初始化失败')
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.msgboard-container {
+  padding: 20px;
+  background: #f5f7fa;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  color: white;
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
+
+  .header-content {
+    .page-title {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 0 6px 0;
+
+      .title-icon {
+        margin-right: 12px;
+        font-size: 28px;
+      }
+    }
+
+    .page-desc {
+      margin: 0;
+      opacity: 0.9;
+      font-size: 14px;
+    }
+  }
+}
+
+.search-section {
+  margin-bottom: 20px;
+
+  .search-card {
+    border-radius: 12px;
+    border: none;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    
+    :deep(.el-card__body) {
+      padding: 16px 20px;
+    }
+
+    .search-form {
+      margin: 0;
+      
+      :deep(.el-form-item) {
+        margin-bottom: 12px;
+        margin-right: 16px;
+      }
+      
+      :deep(.el-form-item__label) {
+        padding-bottom: 4px;
+      }
+    }
+  }
+}
+
+.message-list-section {
+  .list-card {
+    border-radius: 12px;
+    border: none;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    
+    :deep(.el-card__body) {
+      padding: 16px 20px;
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .header-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .header-stats {
+        display: flex;
+        gap: 8px;
+      }
+    }
+    
+    :deep(.el-table) {
+      .el-table__body-wrapper {
+        overflow-x: auto;
+      }
+    }
+  }
+}
+
+.message-content {
+  .content-text {
+    margin-bottom: 8px;
+    line-height: 1.5;
+    color: #303133;
+  }
+
+  .content-meta {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.reply-content {
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.no-reply {
+  color: #909399;
+  font-style: italic;
+}
+
+.no-doctor,
+.no-time {
+  color: #c0c4cc;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .msgboard-container {
+    padding: 12px;
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+  }
+
+  .search-form {
+    :deep(.el-form-item) {
+      margin-bottom: 12px;
+    }
+  }
+}
+</style>