<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="投诉标题" prop="title">
<el-input
v-model="queryParams
.title"
placeholder="请输入投诉标题"
clearable
@keyup
.enter
.native="handleQuery"
/>
</el-form-item>
<el-form-item label="投诉类型" prop="complaintType">
<el-select v-model="queryParams
.complaintType" placeholder="请选择投诉类型" clearable>
<el-option
v-for="dict in dict
.type
.incorrupt_complaint_type"
:key="dict
.value"
:label="dict
.label"
:value="dict
.value"
/>
</el-select>
</el-form-item>
<el-form-item label="
处理状态" prop="processingStatus">
<el-select v-model="queryParams
.processingStatus" placeholder="请选择
处理状态" clearable>
<el-option
v-for="dict in dict
.type
.incorrupt_complaint_status"
:key="dict
.value"
:label="dict
.label"
:value="dict
.value"
/>
</el-select>
</el-form-item>
<el-form-item label="投诉时间" prop="complaintTime">
<el-date-picker clearable
v-model="queryParams
.complaintTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择投诉时间">
</el-date-picker>
</el-form-item>
<el-form-item label="转为案例" prop="complaintExample">
<el-select v-model="queryParams
.complaintExample" placeholder="请选择转为案例" clearable>
<el-option
v-for="dict in dict
.type
.incorrupt_case_type"
:key="dict
.value"
:label="dict
.label"
:value="dict
.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="['incorruptible:ComplaintTs: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="['incorruptible:ComplaintTs: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="['incorruptible:ComplaintTs:remove']"
>删除</el-button>
</el-col>
<el-col :span="1
.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['incorruptible:ComplaintTs:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch
.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 投诉记录列表板块 -->
<el-table v-loading="loading" :data="ComplaintTsList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="投诉ID" align="center" prop="complaintId" />
<el-table-column label="投诉标题" align="center" prop="title" />
<el-table-column label="投诉类型" align="center" prop="complaintType">
<template slot-scope="scope">
<dict-tag :options="dict
.type
.incorrupt_complaint_type" :value="scope
.row
.complaintType"/>
</template>
</el-table-column>
<el-table-column label="被投诉人姓名" align="center" prop="bcomplaintName" />
<el-table-column label="被投诉人公司" align="center" prop="bcomplaintCompany" />
<el-table-column label="被投诉人部门" align="center" prop="bcomplaintDept" />
<el-table-column label="
处理状态" align="center" prop="processingStatus">
<template slot-scope="scope">
<dict-tag :options="dict
.type
.incorrupt_complaint_status" :value="scope
.row
.processingStatus"/>
</template>
</el-table-column>
<el-table-column label="投诉时间" align="center" prop="complaintTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope
.row
.complaintTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<!-- 修改转为案例为单选框 -->
<el-table-column label="转为案例" align="center" prop="complaintExample">
<template slot-scope="scope">
<el-radio-group
v-model="scope
.row
.complaintExample"
@change="handleCaseChange(scope
.row)"
:disabled="isProcessing(scope
.row
.processingStatus)"
size="mini"
>
<el-radio :label="dict
.type
.incorrupt_case_type[0]
.value">是</el-radio>
<el-radio :label="dict
.type
.incorrupt_case_type[1]
.value">否</el-radio>
</el-radio-group>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope
.row)"
v-hasPermi="['incorruptible:ComplaintTs:view']"
>详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page
.sync="queryParams
.pageNum"
:limit
.sync="queryParams
.pageSize"
@pagination="getList"
/>
<!-- 添加或修改投诉记录汇总对话框 -->
<el-dialog :title="title" :visible
.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="投诉标题" prop="title">
<el-input v-model="form
.title" placeholder="请输入投诉标题" />
</el-form-item>
<el-form-item label="投诉类型" prop="complaintType">
<el-select v-model="form
.complaintType" placeholder="请选择投诉类型">
<el-option
v-for="dict in dict
.type
.incorrupt_complaint_type"
:key="dict
.value"
:label="dict
.label"
:value="dict
.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="被投诉人姓名" prop="bcomplaintName">
<el-input v-model="form
.bcomplaintName" placeholder="请输入被投诉人姓名" />
</el-form-item>
<el-form-item label="被投诉人公司" prop="bcomplaintCompany">
<el-input v-model="form
.bcomplaintCompany" placeholder="请输入被投诉人公司" />
</el-form-item>
<el-form-item label="被投诉人部门" prop="bcomplaintDept">
<el-input v-model="form
.bcomplaintDept" placeholder="请输入被投诉人部门" />
</el-form-item>
<el-form-item label="投诉内容" prop="bcomplaintContent">
<el-input v-model="form
.bcomplaintContent" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="
处理状态" prop="processingStatus">
<el-radio-group v-model="form
.processingStatus">
<el-radio
v-for="dict in dict
.type
.incorrupt_complaint_status"
:key="dict
.value"
:label="dict
.value"
>{{dict
.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="投诉时间" prop="complaintTime">
<el-date-picker clearable
v-model="form
.complaintTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择投诉时间">
</el-date-picker>
</el-form-item>
<el-form-item label="附件" prop="fileUrl">
<file-upload v-model="form
.fileUrl"/>
</el-form-item>
<el-form-item label="
处理结果" prop="complaintResult">
<el-input v-model="form
.complaintResult" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="转为案例" prop="complaintExample">
<el-radio-group v-model="form
.complaintExample">
<el-radio
v-for="dict in dict
.type
.incorrupt_case_type"
:key="dict
.value"
:label="dict
.value"
>{{dict
.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="投诉人" prop="complaintPerson">
<el-input v-model="form
.complaintPerson" placeholder="请输入投诉人" />
</el-form-item>
<el-form-item label="投诉人电话" prop="phoneNumber">
<el-input v-model="form
.phoneNumber" placeholder="请输入投诉人电话" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form
.email" placeholder="请输入邮箱" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listComplaintTs, getComplaintTs, delComplaintTs, addComplaintTs, updateComplaintTs } from "@/api/incorruptible/ComplaintTs"
export default {
name: "ComplaintTs",
watch: {
'$route': {
handler(to, from) {
// 首次进入
页面时，from 为 undefined，需先判断
if (from && from
.name === 'ComplaintDetail') {
// 当从详情页返回时刷新列表
this
.getList();
}
//
处理刷新参数
if (to
.query
.refresh === 'true') {
this
.getList();
// 清除刷新标记
this
.$router
.replace({ query: {} });
}
},
immediate: true // 立即执行
}
},
dicts: ['incorrupt_complaint_type', 'incorrupt_complaint_status', 'incorrupt_case_type'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 投诉记录汇总表格数据
ComplaintTsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
title: null,
complaintType: null,
processingStatus: null,
complaintTime: null,
complaintExample: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
}
},
created() {
this
.getList()
},
methods: {
/** 查询投诉记录汇总列表 */
getList() {
this
.loading = true
listComplaintTs(this
.queryParams)
.then(response => {
this
.ComplaintTsList = response
.rows
this
.total = response
.total
this
.loading = false
})
},
// 取消按钮
cancel() {
this
.open = false
this
.reset()
},
// 表单重置
reset() {
this
.form = {
complaintId: null,
title: null,
complaintType: null,
bcomplaintName: null,
bcomplaintCompany: null,
bcomplaintDept: null,
bcomplaintContent: null,
processingStatus: null,
complaintTime: null,
fileUrl: null,
complaintResult: null,
complaintExample: null,
complaintPerson: null,
phoneNumber: null,
email: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
}
this
.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this
.queryParams
.pageNum = 1
this
.getList()
},
/** 重置按钮操作 */
resetQuery() {
this
.resetForm("queryForm")
this
.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this
.ids = selection
.map(item => item
.complaintId)
this
.single = selection
.length!==1
this
.multiple = !selection
.length
},
/**
新增按钮操作 */
handleAdd() {
this
.reset()
this
.open = true
this
.title = "添加投诉记录汇总"
},
/** 修改按钮操作 */
handleUpdate(row) {
this
.reset()
const complaintId = row
.complaintId || this
.ids
getComplaintTs(complaintId)
.then(response => {
this
.form = response
.data
this
.open = true
this
.title = "修改投诉记录汇总"
})
},
/** 详情按钮操作 - 跳转到详情
页面 */
handleDetail(row) {
// 跳转到ComplainTsFrom
.vue页面，传递投诉ID参数
this
.$router
.push({
name: 'ComplaintDetail', // 确保路由配置中有此名称的路由
params: { complaintId: row
.complaintId }
})
},
/** 提交按钮 */
submitForm() {
this
.$refs["form"]
.validate(valid => {
if (valid) {
const action = this
.form
.complaintId ? updateComplaintTs : addComplaintTs;
action(this
.form)
.then(response => {
this
.$modal
.msgSuccess(this
.form
.complaintId ? "修改成功" : "
新增成功");
this
.open = false;
this
.getList(); // 提交成功后刷新列表
})
.catch(error => {
console
.error('提交失败:', error);
this
.$modal
.msgError('操作失败，请重试');
});
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const complaintIds = row
.complaintId || this
.ids
this
.$modal
.confirm('是否确认删除投诉记录汇总编号为"' + complaintIds + '"的数据项？')
.then(function() {
return delComplaintTs(complaintIds)
})
.then(() => {
this
.getList()
this
.$modal
.msgSuccess("删除成功")
})
.catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this
.download('incorruptible/ComplaintTs/export', {
...this
.queryParams
}, `ComplaintTs_${new Date()
.getTime()}
.xlsx`)
},
/**
处理转为案例的状态变更 */
handleCaseChange(row) {
// 保存原始值，用于更新失败时恢复
const originalValue = row
.complaintExample;
// 显示加载状态
this
.loading = true;
// 调用更新接口
updateComplaintTs({
complaintId: row
.complaintId,
complaintExample: row
.complaintExample
})
.then(response => {
this
.$modal
.msgSuccess("更新成功");
this
.getList(); // 刷新列表
})
.catch(error => {
console
.error('更新转为案例状态失败:', error);
this
.$modal
.msgError('更新失败，请重试');
// 恢复原始值
row
.complaintExample = originalValue;
this
.loading = false;
});
},
/** 判断是否处于特定
处理状态，用于控制是否可编辑 */
isProcessing(status) {
// 如果需要在某些状态下禁止修改，可以在这里添加判断逻辑
// 例如：return status === '2'; //
处理中状态不可修改
return false; // 所有状态都可修改
}
}
}
</script>
为什么点击详情跳转的
页面一片空白
扫一扫
3857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
