add

frontend/src/views/family/Feedback.vue

@@ -17,41 +17,104 @@
       <el-form-item label="内容">
         <el-input v-model="form.content" type="textarea" />
       </el-form-item>
-      <el-form-item label="评分">
-        <el-input v-model="form.rating" />
+      <el-form-item label="评分" class="rate-item">
+        <el-rate v-model="form.rating" />
       </el-form-item>
       <el-button type="primary" @click="submit">提交</el-button>
     </el-form>
+    <div style="margin-top: 18px;">
+      <h4 style="margin: 0 0 8px;">我的反馈</h4>
+      <el-table :data="items" stripe>
+        <el-table-column prop="createdAt" label="时间" width="180" />
+        <el-table-column label="类型" width="120">
+          <template slot-scope="scope">
+            <el-tag :type="typeTag(scope.row.type)">{{ typeLabel(scope.row.type) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="内容" />
+        <el-table-column label="状态" width="120">
+          <template slot-scope="scope">
+            <el-tag :type="statusTag(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="reply" label="回复" />
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
-import { familyElders, familyFeedback } from "../../api";
+import { familyElders, familyFeedback, familyFeedbackList } from "../../api";
 
 export default {
   data() {
     return {
       elders: [],
-      form: { elderId: "", type: "SUGGESTION", content: "", rating: "" }
+      form: { elderId: "", type: "SUGGESTION", content: "", rating: 0 },
+      items: []
     };
   },
   async created() {
     try {
       const res = await familyElders();
       this.elders = res.data.data;
+      this.loadList();
     } catch (e) {
-      this.$message.error(e.message || "load failed");
+      this.$message.error(e.message || "加载失败");
     }
   },
   methods: {
+    typeLabel(type) {
+      if (type === "SUGGESTION") return "建议";
+      if (type === "COMPLAINT") return "投诉";
+      if (type === "PRAISE") return "表扬";
+      return type || "-";
+    },
+    typeTag(type) {
+      if (type === "SUGGESTION") return "info";
+      if (type === "COMPLAINT") return "danger";
+      if (type === "PRAISE") return "success";
+      return "info";
+    },
+    statusLabel(status) {
+      if (status === "NEW") return "新建";
+      if (status === "PROCESSING") return "处理中";
+      if (status === "CLOSED") return "已关闭";
+      return status || "-";
+    },
+    statusTag(status) {
+      if (status === "NEW") return "warning";
+      if (status === "PROCESSING") return "";
+      if (status === "CLOSED") return "success";
+      return "info";
+    },
+    async loadList() {
+      try {
+        const res = await familyFeedbackList();
+        this.items = res.data.data;
+      } catch (e) {
+        this.$message.error(e.message || "加载失败");
+      }
+    },
     async submit() {
       try {
         await familyFeedback(this.form);
-        this.$message.success("submitted");
+        this.$message.success("提交成功");
+        this.form.content = "";
+        this.form.rating = 0;
+        this.loadList();
       } catch (e) {
-        this.$message.error(e.message || "submit failed");
+        this.$message.error(e.message || "提交失败");
       }
     }
   }
 };
 </script>
+
+<style scoped>
+.rate-item ::v-deep .el-form-item__content {
+  display: flex;
+  align-items: center;
+}
+</style>
+