<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="punishmentList" style="width: 100%">
|
<el-table-column prop="name" label="处罚事项" width="180" />
|
<el-table-column prop="punishTime" label="处罚时间" width="180" />
|
<el-table-column prop="reason" label="处罚理由" />
|
<el-table-column prop="result" label="处罚结果" width="180" />
|
<el-table-column prop="department" label="处罚部门" width="180" />
|
<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="punishmentList.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="name">
|
<el-input v-model="form.name" placeholder="请输入行政处罚名称" />
|
</el-form-item>
|
<el-form-item label="处罚时间" prop="punishTime">
|
<el-date-picker
|
v-model="form.punishTime"
|
type="date"
|
placeholder="请选择处罚时间"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<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="result">
|
<el-input v-model="form.result" placeholder="请输入处罚结果" />
|
</el-form-item>
|
<el-form-item label="处罚部门" prop="department">
|
<el-input v-model="form.department" placeholder="请输入处罚部门" />
|
</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, ElMessageBox } from 'element-plus'
|
import { Plus, Upload, Document } from '@element-plus/icons-vue'
|
|
// 表单数据
|
const form = reactive({
|
name: '',
|
punishTime: '',
|
reason: '',
|
result: '',
|
department: '',
|
})
|
|
// 验证规则
|
const rules = reactive({
|
name: [{ required: true, message: '请输入行政处罚名称', trigger: 'blur' }],
|
punishTime: [{ required: true, message: '请输入处罚时间', trigger: 'blur' }],
|
reason: [{ required: true, message: '请输入处罚理由', trigger: 'blur' }],
|
result: [{ required: true, message: '请输入处罚结果', trigger: 'blur' }],
|
department: [{ required: true, message: '请输入处罚部门', trigger: 'blur' }],
|
})
|
|
// 状态
|
const dialogVisible = ref(false)
|
const dialogImportVisible = ref(false)
|
const dialogTitle = ref('新增行政处罚')
|
const formRef = ref(null)
|
const punishmentList = ref([])
|
const currentRow = ref(null)
|
const uploadedFile = ref(null)
|
const importLoading = ref(false)
|
|
// 模拟数据
|
onMounted(() => {
|
// 这里可以从API获取数据
|
// 暂时使用模拟数据
|
punishmentList.value = [
|
{
|
id: 1,
|
name: '违规排放废气',
|
punishTime: '2026-01-15',
|
reason: '未按规定处理废气，超标排放',
|
result: '罚款5000元',
|
department: '环保局',
|
},
|
{
|
id: 2,
|
name: '未安装油烟净化设备',
|
punishTime: '2026-02-20',
|
reason: '餐厅未安装油烟净化设备',
|
result: '责令限期整改',
|
department: '环保局',
|
},
|
]
|
})
|
|
// 新增
|
function handleAdd() {
|
form.name = ''
|
form.punishTime = ''
|
form.reason = ''
|
form.result = ''
|
form.department = ''
|
dialogTitle.value = '新增行政处罚'
|
currentRow.value = null
|
dialogVisible.value = true
|
}
|
|
// 编辑
|
function handleEdit(row) {
|
currentRow.value = row
|
form.name = row.name
|
form.punishTime = row.punishTime
|
form.reason = row.reason
|
form.result = row.result
|
form.department = row.department
|
dialogTitle.value = '修改行政处罚'
|
dialogVisible.value = true
|
}
|
|
// 删除
|
function handleDelete(row) {
|
ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
const index = punishmentList.value.findIndex((item) => item.id === row.id)
|
if (index !== -1) {
|
punishmentList.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
}
|
})
|
.catch(() => {
|
// 取消删除
|
})
|
}
|
|
// 提交
|
function handleSubmit() {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
if (currentRow.value) {
|
// 修改
|
const index = punishmentList.value.findIndex((item) => item.id === currentRow.value.id)
|
if (index !== -1) {
|
punishmentList.value[index] = {
|
...currentRow.value,
|
...form,
|
}
|
ElMessage.success('修改成功')
|
}
|
} else {
|
// 新增
|
const newItem = {
|
id: Date.now(),
|
...form,
|
}
|
punishmentList.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,
|
name: '未按规定排放污水',
|
punishTime: '2026-03-05',
|
reason: '未按规定处理污水，超标排放',
|
result: '罚款8000元',
|
department: '环保局',
|
},
|
{
|
id: Date.now() + 2,
|
name: '违规倾倒固废',
|
punishTime: '2026-03-12',
|
reason: '违规倾倒固体废物',
|
result: '罚款10000元',
|
department: '环保局',
|
},
|
]
|
|
// 添加到列表
|
punishmentList.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>
|
