受理、备注完成

src/api/complaintMgr.js

@@ -33,6 +33,26 @@ export function getXiang(row) {
 	});
 };
 
+// 确认受理
+export function Complainacceptance(row) {
+	let query = '?id=' + row.id + '&remark=' + row.remark
+	
+	return request({
+		url: '/mhotel/Complainacceptance.action' + query,
+		method: 'get'
+	});
+};
+
+// 更新备注
+export function ComplainupdateRemarkById(row) {
+	let query = '?id=' + row.id + '&remark=' + row.remark
+	
+	return request({
+		url: '/mhotel/ComplainupdateRemarkById.action' + query,
+		method: 'get'
+	});
+};
+
 // 下载
 export function downloadExcel(forData) {
 	let data = ''

src/views/complaintMgr/index.vue

@@ -39,6 +39,7 @@
 									<span v-if="scope.row.status == 1" style="color: #F9273F;">待处理</span>
 									<span v-else-if="scope.row.status == 2" style="color: #ccc;">处理中</span>
 									<span v-else-if="scope.row.status == 3" style="color: #56AA2E;">处理完成</span>
+									<span v-else style="color: #ccc;">未知状态</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="投诉单号" align="center" width="180">
@@ -90,7 +91,7 @@
 							<el-table-column fixed="right" label="操作" width="120">
 								<template slot-scope="scope">
 									<el-button @click="handleClickRemarks(scope.row)" type="text" size="small">受理</el-button>
-									<el-button @click="handleClickAcceptance(scope.row)" type="text" size="small">备注</el-button>
+									<el-button @click="handleRemarks(scope.row)" type="text" size="small">备注</el-button>
 								</template>
 							</el-table-column>
 						</el-table>
@@ -104,11 +105,12 @@
 			</el-col>
 		</el-row>
 		<!-- 投诉详情 -->
-		<el-dialog title="投诉详情" custom-class="acceptance-class" :visible.sync="dialogComplaintVisible" :close-on-click-modal="true"
-			:close-on-press-escape="false" @close="complaint_close">
-			<p v-if="complaint.status == 1"><label class="lbl-cls">投诉状态:</label><span style="color: #F9273F;">处理中</span></p>
-			<p v-else-if="complaint.status == 2"><label class="lbl-cls">投诉状态:</label><span style="color: #56AA2E;">处理完成</span></p>
-			<p v-else><label class="lbl-cls">投诉状态:</label><span style="color: #ccc;">已删除</span></p>
+		<el-dialog title="投诉详情" custom-class="acceptance-class" :visible.sync="dialogComplaintVisible" :close-on-click-modal="false"
+			:close-on-press-escape="false" @close="dialogComplaintVisible = false">
+			<p v-if="complaint.status == 1"><label class="lbl-cls">投诉状态:</label><span style="color: #F9273F;">待处理</span></p>
+			<p v-else-if="complaint.status == 2"><label class="lbl-cls">投诉状态:</label><span style="color: #56AA2E;">处理中</span></p>
+			<p v-else-if="complaint.status == 3"><label class="lbl-cls">投诉状态:</label><span style="color: #56AA2E;">处理完成</span></p>
+			<p v-else><label class="lbl-cls">投诉状态:</label><span style="color: #ccc;">未知状态</span></p>
 			<p><label class="lbl-cls">投诉单号:</label> {{ complaint.id }}</p>
 			<p><label class="lbl-cls">民宿:</label> {{ complaint.hotelName }}</p>
 			<p><label class="lbl-cls">民宿电话:</label> {{ complaint.hotelPhone }}</p>
@@ -121,10 +123,12 @@
 				<div class="show-imgs">
 					<div><label class="lbl-cls">图片:</label></div>
 					<div class="imgs">
-						<viewer style="display: flex;">
-							<div v-for="(image, index) in complaint.fileInfos" :key="index">
-								<img :src="image.url" v-if="!image.url.endsWith('.mp4')" style="margin: 0 2px; border-radius: 5px;" alt="" height="80px"
-									width="80px" />
+						<viewer :images="complaint.fileInfos">
+							<div style="display: flex;">
+								<div v-for="(image, index) in complaint.fileInfos" :key="index">
+									<img :src="image.url" v-if="!image.url.endsWith('.mp4')" style="margin: 0 2px; border-radius: 5px; cursor: pointer;" alt=""
+										height="80px" width="80px" />
+								</div>
 							</div>
 						</viewer>
 					</div>
@@ -136,7 +140,8 @@
 				</p>
 				<p style="display: flex; justify-content: flex-end;">
 					<el-button class="cancel-btn" @click="dialogComplaintVisible = false">取 消</el-button>
-					<el-button type="primary" class="confirm-btn" @click="handleRemarks">确定受理</el-button>
+					<el-button v-if="complaint.status != 3" type="primary" class="confirm-btn" @click="handleClickAcceptance">确定受理</el-button>
+					<el-button v-else type="primary" class="confirm-btn-disabled" @click="handleClickAcceptance" disabled>确定受理</el-button>
 				</p>
 			</div>
 		</el-dialog>
@@ -149,7 +154,7 @@
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button class="cancel-btn" @click="dialogRemarksFormVisible = false">取 消</el-button>
-				<el-button type="primary" class="confirm-btn" @click="handleRemarks">确 定</el-button>
+				<el-button type="primary" class="confirm-btn" @click="handleRemarksClick">确 定</el-button>
 			</div>
 		</el-dialog>
 	</div>
@@ -159,8 +164,13 @@
 	import {
 		getTableData,
 		getXiang,
-		downloadExcel
+		downloadExcel,
+		Complainacceptance,
+		ComplainupdateRemarkById
 	} from '@/api/complaintMgr'
+	import {
+		isEmpty
+	} from '@/js/common';
 
 	export default {
 		data() {
@@ -211,14 +221,14 @@
 					order_num: '',
 					status: '',
 					bookingId: '',
-					hoteName: '',
+					hotelName: '',
 					hotelPhone: '',
-					complainantPhone: '',
 					complainPhone: '',
 					title: '',
 					content: '',
 					fileInfos: [],
-					createDate: ''
+					createDate: '',
+					remark: ''
 				},
 				dialogComplaintVisible: false,
 				dialogRemarksFormVisible: false, // 添加备注
@@ -229,9 +239,9 @@
 			}
 		},
 		filters: {
-		  truncateDate(value) {
-		    return value.substring(0, value.length - 2);
-		  }
+			truncateDate(value) {
+				return value.substring(0, value.length - 2);
+			}
 		},
 		created() {
 			// 检测权限
@@ -248,43 +258,93 @@
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
+			// 添加备注
+			handleRemarksClick() {
+				if (isEmpty(this.formRemarks.remark)) {
+					this.$message.error('请输入【备注】内容')
+					return
+				}
+
+				var query = {
+					id: this.formRemarks.id,
+					remark: this.formRemarks.remark
+				}
+
+				ComplainupdateRemarkById(query).then((res) => {
+					// console.log(res.data);
+					if (res.code === 200) {
+						this.get_table_data('search')
+						this.dialogRemarksFormVisible = false;
+						this.$message.warning('备注完成！')
+					} else {
+						this.$message.warning('备注失败！')
+					}
+				}).catch((err) => {
+					this.$message.error(err.message)
+				});
+			},
 			/**
-			 * 添加备注
+			 * 显示添加备注对话框
 			 */
-			handleRemarks() {
-				console.log(this.formRemarks);
+			handleRemarks(row) {
+				// console.log(row);
+				this.formRemarks.id = row.id;
+				this.formRemarks.remark = row.remark;
+
+				this.dialogRemarksFormVisible = true;
 			},
 			/**
 			 * 受理
 			 * @param {Object} row
 			 */
-			handleClickAcceptance(row) {
-				// console.log(row);
-				this.formRemarks.id = row.id;
-				this.dialogRemarksFormVisible = true;
+			handleClickAcceptance() {
+				// console.log(this.complaint);
+				var query = {
+					id: this.complaint.id,
+					remark: this.complaint.remark
+				}
+				
+				Complainacceptance(query).then((res) => {
+					// console.log(res.data);
+					if (res.code === 200) {
+						this.get_table_data('search')
+						this.dialogComplaintVisible = false
+						this.$message.warning('受理完成！')
+					} else {
+						this.$message.warning('受理失败！')
+					}
+				}).catch((err) => {
+					this.$message.error(err.message)
+				});
 			},
-			// 点击查看备注，弹出投诉详情对话框
+			// 点击受理，弹出投诉详情对话框
 			handleClickRemarks(row) {
-				// console.log(row);				
-				this.dialogComplaintVisible = true
+				// console.log(row);
+				this.$set(this.complaint, 'id', row.id);
+				this.$set(this.complaint, 'order_num', row.order_num);
+				this.$set(this.complaint, 'status', row.status);
+				this.$set(this.complaint, 'bookingId', row.bookingId);
+				this.$set(this.complaint, 'hotelName', row.hotelName);
+				this.$set(this.complaint, 'hotelPhone', row.hotelPhone);
+				this.$set(this.complaint, 'complainPhone', row.complainPhone);
+				this.$set(this.complaint, 'title', row.title);
+				this.$set(this.complaint, 'content', row.content);
+				this.$set(this.complaint, 'createDate', row.createDate);
+				this.$set(this.complaint, 'remark', row.remark);
 
 				getXiang(row).then((res) => {
 					// console.log(res.data);
 					if (res.code === 200) {
-						this.complaint = res.data
-						this.$set(this.complaint, 'order_num', row.order_num);
+						this.$set(this.complaint, 'fileInfos', res.data.fileInfos);
 					} else {
 						this.complaint = []
 						this.$message.warning('没有符合条件的数据！')
 					}
 				}).catch((err) => {
-					// console.log(err);
 					this.$message.error(err.message)
 				});
-			},
-			// 关闭投诉详情对话框
-			complaint_close() {
-				this.dialogComplaintVisible = false
+
+				this.dialogComplaintVisible = true
 			},
 			/**
 			 * 获取消费记录,表格数据
@@ -315,7 +375,6 @@
 						that.$message.warning('没有符合条件的数据！')
 					}
 				}).catch((err) => {
-					// console.log(err);
 					that.$message.error(err.message)
 				});
 				that.loading = false;
@@ -359,7 +418,6 @@
 						that.$message.warning(res.message)
 					}
 				}).catch((err) => {
-					// console.log(err);
 					that.$message.error(err.message)
 				});
 			},
@@ -686,4 +744,12 @@
 		border-radius: 5px !important;
 		margin-left: 28px !important;
 	}
+	
+	.confirm-btn-disabled {
+		border: none !important;
+		background: rgba(9, 101, 98, 1) !important;
+		color: #9c9c9c !important;
+		border-radius: 5px !important;
+		margin-left: 28px !important;
+	}
 </style>