|
@@ -10,6 +10,15 @@
|
|
@keyup.enter.native="handleQuery"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <!-- <el-form-item label="用户名字" prop="userName">
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="queryParams.userName"
|
|
|
|
+ placeholder="请输入用户名字"
|
|
|
|
+ clearable
|
|
|
|
+ size="small"
|
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item> -->
|
|
<el-form-item label="联系方式" prop="phone">
|
|
<el-form-item label="联系方式" prop="phone">
|
|
<el-input
|
|
<el-input
|
|
v-model="queryParams.phone"
|
|
v-model="queryParams.phone"
|
|
@@ -19,6 +28,7 @@
|
|
@keyup.enter.native="handleQuery"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <!-- 添加处理状态筛选 -->
|
|
<el-form-item label="处理状态" prop="isHandle">
|
|
<el-form-item label="处理状态" prop="isHandle">
|
|
<el-select
|
|
<el-select
|
|
v-model="queryParams.isHandle"
|
|
v-model="queryParams.isHandle"
|
|
@@ -31,7 +41,7 @@
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="投诉时间" prop="complaintTime">
|
|
<el-form-item label="投诉时间" prop="complaintTime">
|
|
- <el-date-picker v-model="complaintTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"></el-date-picker>
|
|
|
|
|
|
+ <el-date-picker v-model="complaintTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"></el-date-picker>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
@@ -40,6 +50,38 @@
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ plain
|
|
|
|
+ icon="el-icon-plus"
|
|
|
|
+ size="mini"
|
|
|
|
+ @click="handleAdd"
|
|
|
|
+ v-hasPermi="['his:complaint:add']"
|
|
|
|
+ >新增</el-button>
|
|
|
|
+ </el-col> -->
|
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
|
+ <el-button
|
|
|
|
+ type="success"
|
|
|
|
+ plain
|
|
|
|
+ icon="el-icon-edit"
|
|
|
|
+ size="mini"
|
|
|
|
+ :disabled="single"
|
|
|
|
+ @click="handleUpdate"
|
|
|
|
+ v-hasPermi="['his:complaint:edit']"
|
|
|
|
+ >修改</el-button>
|
|
|
|
+ </el-col> -->
|
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
|
+ <el-button
|
|
|
|
+ type="danger"
|
|
|
|
+ plain
|
|
|
|
+ icon="el-icon-delete"
|
|
|
|
+ size="mini"
|
|
|
|
+ :disabled="multiple"
|
|
|
|
+ @click="handleDelete"
|
|
|
|
+ v-hasPermi="['his:complaint:remove']"
|
|
|
|
+ >删除</el-button>
|
|
|
|
+ </el-col> -->
|
|
<el-col :span="1.5">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
<el-button
|
|
type="warning"
|
|
type="warning"
|
|
@@ -57,53 +99,21 @@
|
|
<el-table border v-loading="loading" :data="complaintList" @selection-change="handleSelectionChange">
|
|
<el-table border v-loading="loading" :data="complaintList" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column label="id" align="center" prop="id" />
|
|
<el-table-column label="id" align="center" prop="id" />
|
|
- <el-table-column label="用户" align="center" prop="nickName" />
|
|
|
|
- <el-table-column label="投诉方式" align="center" prop="complaintType" >
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <template v-for="item in complaintTypeOptions">
|
|
|
|
- <el-tag v-if="item.dictValue === scope.row.complaintType" :key="item.dictValue">
|
|
|
|
- {{ item.dictLabel }}
|
|
|
|
- </el-tag>
|
|
|
|
- </template>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="投诉类型" align="center" prop="type" >
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <dict-tag :options="typeOptions" :value="scope.row.type"/>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
|
|
+ <el-table-column label="用户" align="center" prop="userName" />
|
|
|
|
+ <!-- <el-table-column label="联系方式" align="center" prop="phone" /> -->
|
|
<el-table-column label="投诉时间" align="center" prop="createTime" />
|
|
<el-table-column label="投诉时间" align="center" prop="createTime" />
|
|
- <el-table-column
|
|
|
|
- label="是否处理"
|
|
|
|
- align="center"
|
|
|
|
- prop="isHandlePlatform"
|
|
|
|
- :render-header="renderHandleHeader"
|
|
|
|
- >
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <el-tag
|
|
|
|
- :type="scope.row.isHandlePlatform == 1 ? 'success' : 'warning'"
|
|
|
|
- disable-transitions
|
|
|
|
- >
|
|
|
|
- {{ formatHandleStatus(scope.row.isHandle) }}
|
|
|
|
- </el-tag>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column
|
|
|
|
- label="店铺是否处理"
|
|
|
|
- align="center"
|
|
|
|
- prop="isHandlePlatform"
|
|
|
|
- :render-header="renderHandleHeader"
|
|
|
|
- >
|
|
|
|
|
|
+ <!-- 修改处理状态列显示 -->
|
|
|
|
+ <el-table-column label="是否处理" align="center" prop="isHandle">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<el-tag
|
|
<el-tag
|
|
- :type="(scope.row.isHandleStore == 1)? 'success' : 'warning'"
|
|
|
|
|
|
+ :type="scope.row.isHandle == 1 ? 'success' : 'warning'"
|
|
disable-transitions
|
|
disable-transitions
|
|
>
|
|
>
|
|
{{ formatHandleStatus(scope.row.isHandle) }}
|
|
{{ formatHandleStatus(scope.row.isHandle) }}
|
|
</el-tag>
|
|
</el-tag>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column label="备注" align="center" prop="remarks" />
|
|
|
|
|
|
+ <el-table-column label="备注" align="center" prop="remarks" />
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
<el-button
|
|
@@ -113,6 +123,13 @@
|
|
v-hasPermi="['his:complaint:edit']"
|
|
v-hasPermi="['his:complaint:edit']"
|
|
@click="handleUpdate(scope.row)"
|
|
@click="handleUpdate(scope.row)"
|
|
>投诉详情</el-button>
|
|
>投诉详情</el-button>
|
|
|
|
+ <!-- <el-button
|
|
|
|
+ size="mini"
|
|
|
|
+ type="text"
|
|
|
|
+ icon="el-icon-edit"
|
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
|
+ v-hasPermi="['his:complaint:edit']"
|
|
|
|
+ >修改</el-button> -->
|
|
<el-button
|
|
<el-button
|
|
size="mini"
|
|
size="mini"
|
|
type="text"
|
|
type="text"
|
|
@@ -133,238 +150,60 @@
|
|
/>
|
|
/>
|
|
|
|
|
|
<!-- 修改用户投诉对话框 -->
|
|
<!-- 修改用户投诉对话框 -->
|
|
- <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
|
|
|
|
- <!-- 修改tab-click事件处理器名称 -->
|
|
|
|
- <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
|
|
|
|
- <!-- 投诉详情标签页 -->
|
|
|
|
- <el-tab-pane label="投诉详情" name="complaint">
|
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
|
- <el-form-item label="投诉内容" prop="name">
|
|
|
|
- <el-input v-model="form.name" :disabled="true" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="详细内容" v-if="form.content && form.content!=''">
|
|
|
|
- <el-input type="textarea" v-model="form.content" :disabled="true"/>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="联系方式" prop="phone" v-if="form.phone && form.phone!=''">
|
|
|
|
- <el-input v-model="form.phone" :disabled="true"/>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="图片" v-if="form.images && form.images!=''">
|
|
|
|
- <div v-for="(url, index) in imageUrls(form.images)" :key="index" class="image-container">
|
|
|
|
- <el-image :src="url" :preview-src-list="[url]" style="width: 100px; height: 100px;"></el-image>
|
|
|
|
- </div>
|
|
|
|
- </el-form-item>
|
|
|
|
- <!-- <el-form-item label="交易截图" v-if="form.tradeImage && form.tradeImage!=''">
|
|
|
|
- <div v-for="(url, index) in imageUrls(form.tradeImage)" :key="index" class="image-container">
|
|
|
|
- <el-image :src="url" :preview-src-list="[url]" style="width: 100px; height: 100px;"></el-image>
|
|
|
|
- </div>
|
|
|
|
- </el-form-item> -->
|
|
|
|
- <el-form-item label="用户" prop="nickName">
|
|
|
|
- <el-input v-model="form.nickName" :disabled="true"/>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="是否处理" prop="isHandle">
|
|
|
|
- <el-select v-model="form.isHandlePlatform" placeholder="请选择处理状态" :disabled="true">
|
|
|
|
- <el-option label="未处理" :value="0"></el-option>
|
|
|
|
- <el-option label="已处理" :value="1"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="备注" prop="remarks" >
|
|
|
|
- <el-input type="textarea" v-model="form.remarks" :maxlength="250" :disabled="true"/>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- </el-tab-pane>
|
|
|
|
-
|
|
|
|
- <!-- 回复详情标签页 -->
|
|
|
|
- <el-tab-pane label="回复详情" name="replies">
|
|
|
|
- <div class="reply-section">
|
|
|
|
- <!-- 添加回复表单 -->
|
|
|
|
- <el-card class="add-reply-card" shadow="never">
|
|
|
|
- <div slot="header">
|
|
|
|
- <span>添加回复</span>
|
|
|
|
- </div>
|
|
|
|
- <el-form :model="replyForm" ref="replyForm" label-width="80px">
|
|
|
|
- <el-form-item label="回复内容" prop="content" :rules="[{ required: true, message: '请输入回复内容', trigger: 'blur' }]">
|
|
|
|
- <el-input
|
|
|
|
- type="textarea"
|
|
|
|
- v-model="replyForm.content"
|
|
|
|
- placeholder="请输入回复内容"
|
|
|
|
- :rows="3"
|
|
|
|
- maxlength="500"
|
|
|
|
- show-word-limit
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- <!-- 添加图片上传功能 -->
|
|
|
|
- <el-form-item label="上传图片" prop="images">
|
|
|
|
- <!-- <div class="image-upload-container">
|
|
|
|
- <el-upload
|
|
|
|
- ref="imageUpload"
|
|
|
|
- :action="uploadUrl"
|
|
|
|
- :show-file-list="false"
|
|
|
|
- :file-list="replyImageList"
|
|
|
|
- :on-success="handleSuccess"
|
|
|
|
- :before-upload="beforeUpload"
|
|
|
|
- :limit="4"
|
|
|
|
- list-type="picture-card"
|
|
|
|
- accept="image/*"
|
|
|
|
- >
|
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
|
- 最多上传4张图片,单张图片不超过2MB
|
|
|
|
- </div>
|
|
|
|
- </el-upload>
|
|
|
|
- </div> -->
|
|
|
|
- <ImageUpload v-model="replyForm.images" type="image" :num="4" :width="150" :height="150"/>
|
|
|
|
-
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- <el-form-item>
|
|
|
|
- <el-button type="primary" size="small" @click="submitReply" :loading="replyLoading">
|
|
|
|
- <i class="el-icon-s-promotion"></i> 发送回复
|
|
|
|
- </el-button>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- </el-card>
|
|
|
|
-
|
|
|
|
- <!-- 回复列表 -->
|
|
|
|
- <el-card class="reply-list-card" shadow="never">
|
|
|
|
- <div slot="header">
|
|
|
|
- <span>回复记录 ({{ replyTotal }}条)</span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div v-loading="replyLoading" class="reply-list">
|
|
|
|
- <div v-if="replyList.length === 0" class="empty-replies">
|
|
|
|
- <el-empty description="暂无回复记录" :image-size="100"></el-empty>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div v-else>
|
|
|
|
- <div v-for="reply in replyList" :key="reply.id" class="reply-item">
|
|
|
|
- <div class="reply-header">
|
|
|
|
- <div class="reply-user">
|
|
|
|
- <el-avatar :size="32" :src="reply.avatar || '/default-avatar.png'">
|
|
|
|
- {{ reply.userName ? reply.userName.charAt(0) : 'U' }}
|
|
|
|
- </el-avatar>
|
|
|
|
- <!-- <span class="user-name">{{ reply.userName || '系统管理员' }}</span> -->
|
|
|
|
- <el-tag size="mini" :type="reply.sendType != 1 ? 'success' : 'info'">
|
|
|
|
- {{ reply.sendType === 1 ? '用户' : reply.sendType === 2 ? '系统平台':'店铺平台' }}
|
|
|
|
- </el-tag>
|
|
|
|
- </div>
|
|
|
|
- <div class="reply-time">
|
|
|
|
- {{ reply.createTime }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="reply-content">
|
|
|
|
- {{ reply.content }}
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 显示回复中的图片 -->
|
|
|
|
- <div class="reply-images" v-if="reply.images && reply.images !== ''">
|
|
|
|
- <div v-for="(url, index) in imageUrls(reply.images)" :key="index" class="reply-image-container">
|
|
|
|
- <el-image
|
|
|
|
- :src="url"
|
|
|
|
- :preview-src-list="imageUrls(reply.images)"
|
|
|
|
- style="width: 80px; height: 80px;"
|
|
|
|
- fit="cover"
|
|
|
|
- ></el-image>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="reply-actions" v-if="reply.userType === 'admin'">
|
|
|
|
- <el-button type="text" size="mini" @click="editReply(reply)">
|
|
|
|
- <i class="el-icon-edit"></i> 编辑
|
|
|
|
- </el-button>
|
|
|
|
- <el-button type="text" size="mini" @click="deleteReply(reply)" style="color: #f56c6c;">
|
|
|
|
- <i class="el-icon-delete"></i> 删除
|
|
|
|
- </el-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 回复分页 -->
|
|
|
|
- <div class="reply-pagination" v-if="replyTotal > 0">
|
|
|
|
- <el-pagination
|
|
|
|
- @size-change="handleReplySizeChange"
|
|
|
|
- @current-change="handleReplyCurrentChange"
|
|
|
|
- :current-page="replyQueryParams.pageNum"
|
|
|
|
- :page-sizes="[5, 10, 20]"
|
|
|
|
- :page-size="replyQueryParams.pageSize"
|
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
- :total="replyTotal"
|
|
|
|
- small
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </el-card>
|
|
|
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
|
+ <!-- <el-form-item label="用户id" prop="userId">
|
|
|
|
+ <el-input v-model="form.userId" placeholder="请输入用户id" />
|
|
|
|
+ </el-form-item> -->
|
|
|
|
+ <el-form-item label="投诉内容" prop="name">
|
|
|
|
+ <el-input v-model="form.name" :disabled="true" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="详细内容" v-if="form.content && form.content!=''">
|
|
|
|
+ <el-input type="textarea" v-model="form.content" :disabled="true"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="联系方式" prop="phone" v-if="form.phone && form.phone!=''">
|
|
|
|
+ <el-input v-model="form.phone" :disabled="true"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="图片" v-if="form.urls && form.urls!=''">
|
|
|
|
+ <div v-for="(url, index) in imageUrls(form.urls)" :key="index" class="image-container">
|
|
|
|
+ <el-image :src="url" :preview-src-list="[url]" style="width: 100px; height: 100px;"></el-image>
|
|
</div>
|
|
</div>
|
|
- </el-tab-pane>
|
|
|
|
- </el-tabs>
|
|
|
|
-
|
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
|
- <el-button type="primary" @click="submitForm" v-if="activeTab === 'complaint' && form.id==null">确 定</el-button>
|
|
|
|
- <el-button @click="cancel">取 消</el-button>
|
|
|
|
- </div>
|
|
|
|
- </el-dialog>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <!-- 编辑回复对话框 -->
|
|
|
|
- <el-dialog title="编辑回复" :visible.sync="editReplyVisible" width="500px" append-to-body>
|
|
|
|
- <el-form :model="editReplyForm" ref="editReplyForm" label-width="80px">
|
|
|
|
- <el-form-item label="回复内容" prop="content" :rules="[{ required: true, message: '请输入回复内容', trigger: 'blur' }]">
|
|
|
|
- <el-input
|
|
|
|
- type="textarea"
|
|
|
|
- v-model="editReplyForm.content"
|
|
|
|
- placeholder="请输入回复内容"
|
|
|
|
- :rows="4"
|
|
|
|
- maxlength="500"
|
|
|
|
- show-word-limit
|
|
|
|
- />
|
|
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="交易截图" v-if="form.tradeImage && form.tradeImage!=''">
|
|
|
|
+ <!-- <ImageUpload v-model="form.tradeImage" type="image" :num="10" :width="150" :height="150" /> -->
|
|
|
|
+ <div v-for="(url, index) in imageUrls(form.tradeImage)" :key="index" class="image-container">
|
|
|
|
+ <el-image :src="url" :preview-src-list="[url]" style="width: 100px; height: 100px;"></el-image>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="被投诉人信息" prop="account" v-if="form.account && form.account!=''">
|
|
|
|
+ <el-input v-model="form.account" :disabled="true"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <!-- 修改处理状态为下拉选择 -->
|
|
|
|
+ <el-form-item label="是否处理" prop="isHandle">
|
|
|
|
+ <el-select v-model="form.isHandle" placeholder="请选择处理状态">
|
|
|
|
+ <el-option label="未处理" :value="0"></el-option>
|
|
|
|
+ <el-option label="已处理" :value="1"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="备注" prop="remarks">
|
|
|
|
+ <el-input type="textarea" v-model="form.remarks" :maxlength="250" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
- <el-button type="primary" @click="updateReply" :loading="replyLoading">确 定</el-button>
|
|
|
|
- <el-button @click="editReplyVisible = false">取 消</el-button>
|
|
|
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { listComplaint, getComplaint, delComplaint, addComplaint, updateComplaint, exportComplaint,listMsg,addMsg } from "@/api/his/complaint";
|
|
|
|
-import ImageUpload from '@/components/ImageUpload/index';
|
|
|
|
|
|
+import { listComplaint, getComplaint, delComplaint, addComplaint, updateComplaint, exportComplaint } from "@/api/his/complaint";
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
name: "Complaint",
|
|
name: "Complaint",
|
|
- components: {
|
|
|
|
- ImageUpload
|
|
|
|
- },
|
|
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- replyImageList: [],
|
|
|
|
- uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
|
|
|
|
- complaintId:null,
|
|
|
|
- activeName:"0",
|
|
|
|
- typeOptions:[
|
|
|
|
- {
|
|
|
|
- dictValue:'0',
|
|
|
|
- dictLabel:'默认'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- dictValue:'1',
|
|
|
|
- dictLabel:'店铺'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- dictValue:'2',
|
|
|
|
- dictLabel:'商品'
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- complaintTypeOptions:[
|
|
|
|
- {
|
|
|
|
- dictValue:1,
|
|
|
|
- dictLabel:'咨询'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- dictValue:2,
|
|
|
|
- dictLabel:'投诉/举报'
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
complaintTime:null,
|
|
complaintTime:null,
|
|
// 遮罩层
|
|
// 遮罩层
|
|
loading: true,
|
|
loading: true,
|
|
@@ -386,14 +225,12 @@ export default {
|
|
title: "",
|
|
title: "",
|
|
// 是否显示弹出层
|
|
// 是否显示弹出层
|
|
open: false,
|
|
open: false,
|
|
- // 当前激活的标签页
|
|
|
|
- activeTab: 'complaint',
|
|
|
|
// 查询参数
|
|
// 查询参数
|
|
queryParams: {
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
userId: null,
|
|
userId: null,
|
|
- userName: null,
|
|
|
|
|
|
+ userName: null, // 添加用户名查询参数
|
|
templateId: null,
|
|
templateId: null,
|
|
content: null,
|
|
content: null,
|
|
phone: null,
|
|
phone: null,
|
|
@@ -411,92 +248,43 @@ export default {
|
|
templateId: [
|
|
templateId: [
|
|
{ required: true, message: "投诉模板id不能为空", trigger: "blur" }
|
|
{ required: true, message: "投诉模板id不能为空", trigger: "blur" }
|
|
],
|
|
],
|
|
- },
|
|
|
|
- // 回复相关数据
|
|
|
|
- replyList: [],
|
|
|
|
- replyTotal: 0,
|
|
|
|
- replyLoading: false,
|
|
|
|
- replyQueryParams: {
|
|
|
|
- pageNum: 1,
|
|
|
|
- pageSize: 10,
|
|
|
|
- complaintId: null
|
|
|
|
- },
|
|
|
|
- replyForm: {
|
|
|
|
- content: '',
|
|
|
|
- complaintId: null
|
|
|
|
- },
|
|
|
|
- // 编辑回复
|
|
|
|
- editReplyVisible: false,
|
|
|
|
- editReplyForm: {
|
|
|
|
- id: null,
|
|
|
|
- content: ''
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
|
|
+
|
|
methods: {
|
|
methods: {
|
|
- handleClick(tab) {
|
|
|
|
- if (tab.name === 'replies') {
|
|
|
|
- this.getReplyList();
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- renderHandleHeader(h, { column }) {
|
|
|
|
- if (column.label === '是否处理') {
|
|
|
|
- return h('div', [
|
|
|
|
- '是否处理',
|
|
|
|
- h('el-tooltip', {
|
|
|
|
- props: {
|
|
|
|
- content: '仅需要处理投诉/举报类',
|
|
|
|
- placement: 'top'
|
|
|
|
- }
|
|
|
|
- }, [
|
|
|
|
- h('i', {
|
|
|
|
- class: 'el-icon-question',
|
|
|
|
- style: 'margin-left: 5px; cursor: pointer; color: #909399;'
|
|
|
|
- })
|
|
|
|
- ])
|
|
|
|
- ]);
|
|
|
|
- } else if (column.label === '店铺是否处理') {
|
|
|
|
- return h('div', [
|
|
|
|
- '店铺是否处理',
|
|
|
|
- h('el-tooltip', {
|
|
|
|
- props: {
|
|
|
|
- content: '仅需要处理咨询类',
|
|
|
|
- placement: 'top'
|
|
|
|
- }
|
|
|
|
- }, [
|
|
|
|
- h('i', {
|
|
|
|
- class: 'el-icon-question',
|
|
|
|
- style: 'margin-left: 5px; cursor: pointer; color: #909399;'
|
|
|
|
- })
|
|
|
|
- ])
|
|
|
|
- ]);
|
|
|
|
- }
|
|
|
|
- return column.label;
|
|
|
|
- },
|
|
|
|
imageUrls(urls) {
|
|
imageUrls(urls) {
|
|
return String(urls).split(",");
|
|
return String(urls).split(",");
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 格式化处理状态显示
|
|
|
|
+ * @param {Number} status - 处理状态 0:未处理 1:已处理
|
|
|
|
+ * @returns {String} - 格式化后的状态文本
|
|
|
|
+ */
|
|
formatHandleStatus(status) {
|
|
formatHandleStatus(status) {
|
|
return status == 1 ? '已处理' : '未处理';
|
|
return status == 1 ? '已处理' : '未处理';
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 查询用户投诉列表 */
|
|
/** 查询用户投诉列表 */
|
|
getList() {
|
|
getList() {
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
|
+ console.log(this.queryParams);
|
|
listComplaint(this.queryParams).then(response => {
|
|
listComplaint(this.queryParams).then(response => {
|
|
this.complaintList = response.rows;
|
|
this.complaintList = response.rows;
|
|
this.total = response.total;
|
|
this.total = response.total;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+
|
|
// 取消按钮
|
|
// 取消按钮
|
|
cancel() {
|
|
cancel() {
|
|
this.open = false;
|
|
this.open = false;
|
|
this.reset();
|
|
this.reset();
|
|
- this.resetReplyData();
|
|
|
|
},
|
|
},
|
|
|
|
+
|
|
// 表单重置
|
|
// 表单重置
|
|
reset() {
|
|
reset() {
|
|
this.form = {
|
|
this.form = {
|
|
@@ -508,71 +296,54 @@ export default {
|
|
urls: null,
|
|
urls: null,
|
|
account: null,
|
|
account: null,
|
|
createTime: null,
|
|
createTime: null,
|
|
- isHandle: 0,
|
|
|
|
|
|
+ isHandle: 0, // 默认设置为未处理
|
|
remarks:null
|
|
remarks:null
|
|
};
|
|
};
|
|
this.resetForm("form");
|
|
this.resetForm("form");
|
|
},
|
|
},
|
|
- // 重置回复数据
|
|
|
|
- resetReplyData() {
|
|
|
|
- this.activeTab = 'complaint';
|
|
|
|
- this.replyList = [];
|
|
|
|
- this.replyTotal = 0;
|
|
|
|
- this.replyQueryParams = {
|
|
|
|
- pageNum: 1,
|
|
|
|
- pageSize: 10,
|
|
|
|
- complaintId: null
|
|
|
|
- };
|
|
|
|
- this.replyForm = {
|
|
|
|
- content: '',
|
|
|
|
- complaintId: null,
|
|
|
|
- images: '' // 重置图片字段
|
|
|
|
- };
|
|
|
|
- this.replyImageList = [];
|
|
|
|
- this.editReplyImageList = [];
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
/** 搜索按钮操作 */
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 重置按钮操作 */
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
resetQuery() {
|
|
|
|
+
|
|
this.complaintTime = null;
|
|
this.complaintTime = null;
|
|
this.queryParams.complaintsTime=null;
|
|
this.queryParams.complaintsTime=null;
|
|
this.queryParams.complainteTime=null;
|
|
this.queryParams.complainteTime=null;
|
|
|
|
+
|
|
this.resetForm("queryForm");
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
this.handleQuery();
|
|
},
|
|
},
|
|
|
|
+
|
|
// 多选框选中数据
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.id)
|
|
this.ids = selection.map(item => item.id)
|
|
this.single = selection.length !== 1
|
|
this.single = selection.length !== 1
|
|
this.multiple = !selection.length
|
|
this.multiple = !selection.length
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 新增按钮操作 */
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
handleAdd() {
|
|
this.reset();
|
|
this.reset();
|
|
this.open = true;
|
|
this.open = true;
|
|
this.title = "添加用户投诉";
|
|
this.title = "添加用户投诉";
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 修改按钮操作 */
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
this.reset();
|
|
- this.resetReplyData();
|
|
|
|
- // const id = row.id || this.ids
|
|
|
|
- const complaintId = row.id || this.complaintId
|
|
|
|
- this.complaintId = complaintId;
|
|
|
|
- getComplaint(complaintId).then(response => {
|
|
|
|
|
|
+ const id = row.id || this.ids
|
|
|
|
+ getComplaint(id).then(response => {
|
|
this.form = response.data;
|
|
this.form = response.data;
|
|
- this.replyForm.complaintId = complaintId;
|
|
|
|
- this.replyQueryParams.complaintId = complaintId;
|
|
|
|
this.open = true;
|
|
this.open = true;
|
|
this.title = "投诉详情";
|
|
this.title = "投诉详情";
|
|
- // 加载回复列表
|
|
|
|
- this.getReplyList();
|
|
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 提交按钮 */
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
this.$refs["form"].validate(valid => {
|
|
@@ -593,6 +364,7 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 删除按钮操作 */
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
handleDelete(row) {
|
|
const ids = row.id || this.ids;
|
|
const ids = row.id || this.ids;
|
|
@@ -607,6 +379,7 @@ export default {
|
|
this.msgSuccess("删除成功");
|
|
this.msgSuccess("删除成功");
|
|
}).catch(() => {});
|
|
}).catch(() => {});
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 导出按钮操作 */
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
handleExport() {
|
|
const queryParams = this.queryParams;
|
|
const queryParams = this.queryParams;
|
|
@@ -623,216 +396,16 @@ export default {
|
|
}).catch(() => {});
|
|
}).catch(() => {});
|
|
},
|
|
},
|
|
changeTime(){
|
|
changeTime(){
|
|
- if(this.complaintTime!=null){
|
|
|
|
- this.queryParams.complaintsTime=this.complaintTime[0];
|
|
|
|
- this.queryParams.complainteTime=this.complaintTime[1];
|
|
|
|
- }else{
|
|
|
|
- this.queryParams.complaintsTime=null;
|
|
|
|
- this.queryParams.complainteTime=null;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 获取回复列表
|
|
|
|
- getReplyList() {
|
|
|
|
- this.replyLoading = true;
|
|
|
|
- // 模拟API调用 - 你需要替换为实际的API
|
|
|
|
- setTimeout(() => {
|
|
|
|
- // 模拟数据
|
|
|
|
- listMsg(this.replyQueryParams).then(response => {
|
|
|
|
- this.replyList = response.rows;
|
|
|
|
- this.replyTotal = response.total;
|
|
|
|
- this.replyLoading = false;
|
|
|
|
- });
|
|
|
|
- }, 500);
|
|
|
|
- },
|
|
|
|
- // 提交回复
|
|
|
|
- submitReply() {
|
|
|
|
- this.$refs.replyForm.validate(valid => {
|
|
|
|
- if (valid) {
|
|
|
|
- this.replyLoading = true;
|
|
|
|
- // const imageUrls = this.replyImageList.map(file => file.url || file.response?.url).filter(url => url);
|
|
|
|
- // this.replyForm.images = imageUrls.join(',');
|
|
|
|
- // 模拟API调用
|
|
|
|
- setTimeout(() => {
|
|
|
|
- const newReply = {
|
|
|
|
- content: this.replyForm.content,
|
|
|
|
- complaintId:this.replyForm.complaintId,
|
|
|
|
- images: this.replyForm.images, // 包含图片数据
|
|
|
|
- sendType: 2
|
|
|
|
- };
|
|
|
|
- addMsg(newReply).then(response => {
|
|
|
|
- this.replyLoading = false;
|
|
|
|
- this.$message.success('回复发送成功');
|
|
|
|
- this.replyForm.content = '';
|
|
|
|
- this.replyForm.images = ''; // 重置图片字段
|
|
|
|
- this.replyImageList = []; // 重置图片列表
|
|
|
|
- this.getReplyList()
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- }, 500);
|
|
|
|
|
|
+ if(this.complaintTime!=null){
|
|
|
|
+ this.queryParams.complaintsTime=this.complaintTime[0];
|
|
|
|
+ this.queryParams.complainteTime=this.complaintTime[1];
|
|
|
|
+ }else{
|
|
|
|
+ this.queryParams.complaintsTime=null;
|
|
|
|
+ this.queryParams.complainteTime=null;
|
|
}
|
|
}
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 编辑回复
|
|
|
|
- editReply(reply) {
|
|
|
|
- this.editReplyForm = {
|
|
|
|
- id: reply.id,
|
|
|
|
- content: reply.content,
|
|
|
|
- images: reply.images || '' // 包含图片数据
|
|
|
|
- };
|
|
|
|
- this.editReplyImageList = reply.images ?
|
|
|
|
- reply.images.split(',').map((url, index) => ({
|
|
|
|
- uid: index,
|
|
|
|
- name: `image-${index}`,
|
|
|
|
- url: url
|
|
|
|
- })) : [];
|
|
|
|
- this.editReplyVisible = true;
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 更新回复
|
|
|
|
- updateReply() {
|
|
|
|
- this.$refs.editReplyForm.validate(valid => {
|
|
|
|
- if (valid) {
|
|
|
|
- this.replyLoading = true;
|
|
|
|
- // const imageUrls = this.editReplyImageList.map(file => file.url || file.response?.url).filter(url => url);
|
|
|
|
- // this.editReplyForm.images = imageUrls.join(',');
|
|
|
|
-
|
|
|
|
- // 模拟API调用
|
|
|
|
- setTimeout(() => {
|
|
|
|
- const index = this.replyList.findIndex(item => item.id === this.editReplyForm.id);
|
|
|
|
- if (index !== -1) {
|
|
|
|
- this.replyList[index].content = this.editReplyForm.content;
|
|
|
|
- this.replyList[index].images = this.editReplyForm.images; // 更新图片
|
|
|
|
- }
|
|
|
|
- this.editReplyVisible = false;
|
|
|
|
- this.replyLoading = false;
|
|
|
|
- this.$message.success('回复更新成功');
|
|
|
|
- }, 500);
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 删除回复
|
|
|
|
- deleteReply(reply) {
|
|
|
|
- this.$confirm('确定要删除这条回复吗?', '提示', {
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
- type: 'warning'
|
|
|
|
- }).then(() => {
|
|
|
|
- const index = this.replyList.findIndex(item => item.id === reply.id);
|
|
|
|
- if (index !== -1) {
|
|
|
|
- this.replyList.splice(index, 1);
|
|
|
|
- this.replyTotal--;
|
|
|
|
- this.$message.success('删除成功');
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 回复分页大小改变
|
|
|
|
- handleReplySizeChange(val) {
|
|
|
|
- this.replyQueryParams.pageSize = val;
|
|
|
|
- this.getReplyList();
|
|
|
|
- },
|
|
|
|
- // 回复当前页改变
|
|
|
|
- handleReplyCurrentChange(val) {
|
|
|
|
- this.replyQueryParams.pageNum = val;
|
|
|
|
- this.getReplyList();
|
|
|
|
- },
|
|
|
|
- handleSuccess(res, file) {
|
|
|
|
- if(res.code==200){
|
|
|
|
- this.form.licenseImages=res.url;
|
|
|
|
- this.$forceUpdate()
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- this.msgError(res.msg);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- beforeUpload(file) {
|
|
|
|
- const isLt1M = file.size / 1024 / 1024 < 1;
|
|
|
|
- if (!isLt1M) {
|
|
|
|
- this.$message.error('上传图片大小不能超过 1MB!');
|
|
|
|
- }
|
|
|
|
- return isLt1M;
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
}
|
|
}
|
|
};
|
|
};
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped>
|
|
|
|
-.reply-section {
|
|
|
|
- margin-top: 10px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.add-reply-card {
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-list-card {
|
|
|
|
- min-height: 400px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-list {
|
|
|
|
- min-height: 300px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.empty-replies {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 200px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-item {
|
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
- padding: 15px 0;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-item:last-child {
|
|
|
|
- border-bottom: none;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-header {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-user {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- gap: 8px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.user-name {
|
|
|
|
- font-weight: 500;
|
|
|
|
- color: #303133;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-time {
|
|
|
|
- color: #909399;
|
|
|
|
- font-size: 12px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-content {
|
|
|
|
- background-color: #f8f9fa;
|
|
|
|
- padding: 12px;
|
|
|
|
- border-radius: 6px;
|
|
|
|
- margin-bottom: 8px;
|
|
|
|
- line-height: 1.5;
|
|
|
|
- color: #606266;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-actions {
|
|
|
|
- text-align: right;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.reply-pagination {
|
|
|
|
- margin-top: 20px;
|
|
|
|
- text-align: center;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.image-container {
|
|
|
|
- display: inline-block;
|
|
|
|
- margin-right: 10px;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+</script>
|