<template>
|
<div>
|
<el-row class="sub-title" justify="space-between">
|
<div>信访投诉记录</div>
|
<el-button-group>
|
<el-button type="primary" @click="handleAdd">
|
<el-icon><Plus /></el-icon>
|
<span>新增投诉记录</span>
|
</el-button>
|
<el-button type="success" @click="dialogImportVisible = true">
|
<el-icon><Upload /></el-icon>
|
<span>导入记录</span>
|
</el-button>
|
</el-button-group>
|
</el-row>
|
|
<!-- 表格展示 -->
|
<el-table :data="laintList" style="width: 100%" :show-overflow-tooltip="true">
|
<el-table-column prop="reason" label="投诉原因" />
|
<el-table-column prop="demand" label="投诉诉求" />
|
<el-table-column prop="laintTime" label="投诉时间" width="180" />
|
<el-table-column prop="source" label="投诉来源" width="150" />
|
<el-table-column prop="department" label="处理部门" width="150" />
|
<el-table-column prop="result" label="投诉结果" width="150" />
|
<el-table-column label="操作" width="150" fixed="right">
|
<template #default="scope">
|
<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
|
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 空状态 -->
|
<div v-if="laintList.length === 0" class="empty-state">
|
<el-empty description="暂无信访投诉记录" />
|
</div>
|
|
<!-- 新增/编辑对话框 -->
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
<el-form-item label="投诉原因" prop="reason">
|
<el-input v-model="form.reason" placeholder="请输入投诉原因" type="textarea" rows="3" />
|
</el-form-item>
|
<el-form-item label="投诉诉求" prop="demand">
|
<el-input v-model="form.demand" placeholder="请输入投诉诉求" type="textarea" rows="3" />
|
</el-form-item>
|
<el-form-item label="投诉时间" prop="laintTime">
|
<el-date-picker
|
v-model="form.laintTime"
|
type="date"
|
placeholder="请选择投诉时间"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="投诉来源" prop="source">
|
<el-input v-model="form.source" placeholder="请输入投诉来源" />
|
</el-form-item>
|
<el-form-item label="处理部门" prop="department">
|
<el-input v-model="form.department" placeholder="请输入处理部门" />
|
</el-form-item>
|
<el-form-item label="投诉结果" prop="result">
|
<el-input v-model="form.result" placeholder="请输入投诉结果" type="textarea" rows="2" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- Excel导入对话框 -->
|
<el-dialog v-model="dialogImportVisible" title="导入投诉记录" width="50%">
|
<el-upload
|
class="upload-demo"
|
action="#"
|
:auto-upload="false"
|
:on-change="handleFileChange"
|
:show-file-list="false"
|
accept=".xlsx,.xls"
|
>
|
<el-button type="primary">选择Excel文件</el-button>
|
<template #tip>
|
<div class="el-upload__tip">请上传.xlsx或.xls格式的文件</div>
|
</template>
|
</el-upload>
|
<div v-if="uploadedFile" class="uploaded-file">
|
<el-icon><Document /></el-icon>
|
<span>{{ uploadedFile.name }}</span>
|
<el-button type="text" @click="uploadedFile = null">移除</el-button>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogImportVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleImport" :loading="importLoading">导入</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { Plus, Upload, Document } from '@element-plus/icons-vue'
|
|
// 表单数据
|
const form = reactive({
|
reason: '',
|
demand: '',
|
laintTime: '',
|
source: '',
|
department: '',
|
result: '',
|
})
|
|
// 验证规则
|
const rules = reactive({
|
reason: [{ required: true, message: '请输入投诉原因', trigger: 'blur' }],
|
demand: [{ required: true, message: '请输入投诉诉求', trigger: 'blur' }],
|
laintTime: [{ required: true, message: '请输入投诉时间', trigger: 'blur' }],
|
source: [{ required: true, message: '请输入投诉来源', trigger: 'blur' }],
|
department: [{ required: true, message: '请输入处理部门', trigger: 'blur' }],
|
result: [{ required: true, message: '请输入投诉结果', trigger: 'blur' }],
|
})
|
|
// 状态
|
const dialogVisible = ref(false)
|
const dialogImportVisible = ref(false)
|
const dialogTitle = ref('新增信访投诉')
|
const formRef = ref(null)
|
const laintList = ref([])
|
const currentRow = ref(null)
|
const uploadedFile = ref(null)
|
const importLoading = ref(false)
|
|
// 模拟数据
|
onMounted(() => {
|
// 这里可以从API获取数据
|
// 暂时使用模拟数据
|
laintList.value = [
|
{
|
id: 1,
|
reason: '油烟扰民',
|
demand: '要求安装油烟净化设备',
|
laintTime: '2026-01-10',
|
source: '市民热线',
|
department: '环保局',
|
result: '已责令安装油烟净化设备',
|
},
|
{
|
id: 2,
|
reason: '噪音污染',
|
demand: '要求降低设备噪音',
|
laintTime: '2026-02-15',
|
source: '信访办',
|
department: '环保局',
|
result: '已要求整改噪音问题',
|
},
|
]
|
})
|
|
// 新增
|
function handleAdd() {
|
form.reason = ''
|
form.demand = ''
|
form.laintTime = ''
|
form.source = ''
|
form.department = ''
|
form.result = ''
|
dialogTitle.value = '新增信访投诉'
|
currentRow.value = null
|
dialogVisible.value = true
|
}
|
|
// 编辑
|
function handleEdit(row) {
|
currentRow.value = row
|
form.reason = row.reason
|
form.demand = row.demand
|
form.laintTime = row.laintTime
|
form.source = row.source
|
form.department = row.department
|
form.result = row.result
|
dialogTitle.value = '修改信访投诉'
|
dialogVisible.value = true
|
}
|
|
// 删除
|
function handleDelete(row) {
|
ElMessage.confirm('确定要删除这条记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
const index = laintList.value.findIndex((item) => item.id === row.id)
|
if (index !== -1) {
|
laintList.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
}
|
})
|
.catch(() => {
|
// 取消删除
|
})
|
}
|
|
// 提交
|
function handleSubmit() {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
if (currentRow.value) {
|
// 修改
|
const index = laintList.value.findIndex((item) => item.id === currentRow.value.id)
|
if (index !== -1) {
|
laintList.value[index] = {
|
...currentRow.value,
|
...form,
|
}
|
ElMessage.success('修改成功')
|
}
|
} else {
|
// 新增
|
const newItem = {
|
id: Date.now(),
|
...form,
|
}
|
laintList.value.push(newItem)
|
ElMessage.success('新增成功')
|
}
|
dialogVisible.value = false
|
}
|
})
|
}
|
|
// 处理文件选择
|
function handleFileChange(file) {
|
uploadedFile.value = file.raw
|
}
|
|
// 处理Excel导入
|
function handleImport() {
|
if (!uploadedFile.value) {
|
ElMessage.warning('请选择要导入的Excel文件')
|
return
|
}
|
|
importLoading.value = true
|
|
// 这里可以添加实际的Excel解析和导入逻辑
|
// 暂时模拟导入过程
|
setTimeout(() => {
|
// 模拟导入数据
|
const importedData = [
|
{
|
id: Date.now() + 1,
|
reason: '废气排放超标',
|
demand: '要求达标排放',
|
laintTime: '2026-03-01',
|
source: '环保热线',
|
department: '环保局',
|
result: '已要求整改',
|
},
|
{
|
id: Date.now() + 2,
|
reason: '异味扰民',
|
demand: '消除异味',
|
laintTime: '2026-03-10',
|
source: '市民投诉',
|
department: '环保局',
|
result: '已现场检查',
|
},
|
]
|
|
// 添加到列表
|
laintList.value.push(...importedData)
|
|
ElMessage.success('导入成功，共导入2条记录')
|
dialogImportVisible.value = false
|
uploadedFile.value = null
|
importLoading.value = false
|
}, 1500)
|
}
|
</script>
|
|
<style scoped>
|
.empty-state {
|
padding: 40px 0;
|
text-align: center;
|
}
|
.sub-title {
|
margin-bottom: 20px;
|
}
|
.uploaded-file {
|
margin-top: 20px;
|
padding: 10px;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
}
|
.uploaded-file span {
|
margin-left: 10px;
|
flex: 1;
|
}
|
.uploaded-file .el-button {
|
margin-left: 10px;
|
}
|
</style>
|
