121 lines
3.6 KiB
Vue
121 lines
3.6 KiB
Vue
<template>
|
|
<div class="page-card">
|
|
<h3>服务反馈</h3>
|
|
<el-form :model="form" label-width="120px">
|
|
<el-form-item label="亲人">
|
|
<el-select v-model="form.elderId" placeholder="选择亲人">
|
|
<el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-select v-model="form.type">
|
|
<el-option label="建议" value="SUGGESTION" />
|
|
<el-option label="投诉" value="COMPLAINT" />
|
|
<el-option label="表扬" value="PRAISE" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="内容">
|
|
<el-input v-model="form.content" type="textarea" />
|
|
</el-form-item>
|
|
<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, familyFeedbackList } from "../../api";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
elders: [],
|
|
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 || "加载失败");
|
|
}
|
|
},
|
|
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("提交成功");
|
|
this.form.content = "";
|
|
this.form.rating = 0;
|
|
this.loadList();
|
|
} catch (e) {
|
|
this.$message.error(e.message || "提交失败");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.rate-item ::v-deep .el-form-item__content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|