修改小程序，前端，官网跳转路径
This commit is contained in:
@@ -77,7 +77,7 @@
|
||||
<template #title>
|
||||
<span>无纸化防疫</span>
|
||||
</template>
|
||||
<a-menu-item key="paperless/epidemic"><span>防疫首页</span></a-menu-item>
|
||||
<!-- <a-menu-item key="paperless/epidemic"><span>防疫首页</span></a-menu-item> -->
|
||||
<a-menu-item key="paperless/epidemic/epidemic-agency"><span>防疫机构管理</span></a-menu-item>
|
||||
<a-menu-item key="paperless/epidemic/epidemic-record"><span>防疫记录</span></a-menu-item>
|
||||
<a-menu-item key="paperless/epidemic/vaccine-management"><span>疫苗管理</span></a-menu-item>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import axios from 'axios'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
// 创建axios实例
|
||||
const instance = axios.create({
|
||||
@@ -41,26 +40,26 @@ instance.interceptors.response.use(
|
||||
// 未授权，清除token并跳转到登录页面
|
||||
localStorage.removeItem('token')
|
||||
window.location.href = '/login'
|
||||
message.error('登录已过期，请重新登录')
|
||||
console.error('登录已过期，请重新登录')
|
||||
break
|
||||
case 403:
|
||||
message.error('没有权限执行此操作')
|
||||
console.error('没有权限执行此操作')
|
||||
break
|
||||
case 404:
|
||||
message.error('请求的资源不存在')
|
||||
console.error('请求的资源不存在')
|
||||
break
|
||||
case 500:
|
||||
message.error('服务器内部错误')
|
||||
console.error('服务器内部错误')
|
||||
break
|
||||
default:
|
||||
message.error(error.response.data.message || '请求失败')
|
||||
console.error(error.response.data.message || '请求失败')
|
||||
}
|
||||
} else if (error.request) {
|
||||
// 请求发出但没有收到响应
|
||||
message.error('网络错误，请检查网络连接')
|
||||
console.error('网络错误，请检查网络连接')
|
||||
} else {
|
||||
// 请求配置出错
|
||||
message.error('请求配置错误')
|
||||
console.error('请求配置错误')
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
@@ -321,6 +320,40 @@ const api = {
|
||||
// 删除智能主机
|
||||
delete: (id) => instance.delete(`/smart-host/${id}`)
|
||||
}
|
||||
},
|
||||
|
||||
// 屠宰场管理相关API
|
||||
slaughter: {
|
||||
// 获取屠宰场列表
|
||||
getList: (params) => instance.get('/slaughter/slaughterhouses', { params }),
|
||||
// 获取单个屠宰场详情
|
||||
getDetail: (id) => instance.get(`/slaughter/slaughterhouses/${id}`),
|
||||
// 创建屠宰场
|
||||
create: (data) => instance.post('/slaughter/slaughterhouses', data),
|
||||
// 更新屠宰场
|
||||
update: (id, data) => instance.put(`/slaughter/slaughterhouses/${id}`, data),
|
||||
// 删除屠宰场
|
||||
delete: (id) => instance.delete(`/slaughter/slaughterhouses/${id}`),
|
||||
// 切换屠宰场状态
|
||||
toggleStatus: (id) => instance.patch(`/slaughter/slaughterhouses/${id}/status`)
|
||||
},
|
||||
|
||||
// 无害化登记管理相关API
|
||||
harmlessRegistration: {
|
||||
getList: (params) => instance.get('/harmless/list', { params }),
|
||||
getDetail: (id) => instance.get(`/harmless/detail/${id}`),
|
||||
create: (data) => instance.post('/harmless/create', data),
|
||||
update: (id, data) => instance.put(`/harmless/update/${id}`, data),
|
||||
delete: (id) => instance.delete(`/harmless/delete/${id}`)
|
||||
},
|
||||
|
||||
// 无害化场所管理相关API
|
||||
harmlessPlace: {
|
||||
getList: (params) => instance.get('/harmless-place/list', { params }),
|
||||
getDetail: (id) => instance.get(`/harmless-place/detail/${id}`),
|
||||
create: (data) => instance.post('/harmless-place/create', data),
|
||||
update: (id, data) => instance.put(`/harmless-place/update/${id}`, data),
|
||||
delete: (id) => instance.delete(`/harmless-place/delete/${id}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -365,63 +365,63 @@ const stockForm = reactive({
|
||||
const materialsData = ref([])
|
||||
|
||||
// 获取物资列表
|
||||
const fetchMaterials = async () => {
|
||||
try {
|
||||
const params = {
|
||||
keyword: searchKeyword.value,
|
||||
category: categoryFilter.value,
|
||||
status: statusFilter.value,
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
const response = await api.warehouse.getList(params)
|
||||
// 根据后端实际返回的数据结构进行调整
|
||||
materialsData.value = response.data || []
|
||||
pagination.total = response.total || 0
|
||||
} catch (error) {
|
||||
console.error('获取物资列表失败:', error)
|
||||
// 如果获取失败，提供一些模拟数据以便页面可以正常显示
|
||||
materialsData.value = [
|
||||
{
|
||||
id: '1',
|
||||
code: 'M001',
|
||||
name: '玉米饲料',
|
||||
category: 'feed',
|
||||
unit: '吨',
|
||||
stockQuantity: 150,
|
||||
warningQuantity: 50,
|
||||
status: 'normal',
|
||||
supplier: '希望饲料厂',
|
||||
updateTime: '2024-04-07 10:15:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
code: 'M002',
|
||||
name: '牛瘟疫苗',
|
||||
category: 'medicine',
|
||||
unit: '盒',
|
||||
stockQuantity: 20,
|
||||
warningQuantity: 10,
|
||||
status: 'low',
|
||||
supplier: '生物制药公司',
|
||||
updateTime: '2024-04-05 14:30:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
code: 'M003',
|
||||
name: '兽用注射器',
|
||||
category: 'equipment',
|
||||
unit: '个',
|
||||
stockQuantity: 0,
|
||||
warningQuantity: 50,
|
||||
status: 'out',
|
||||
supplier: '医疗器械公司',
|
||||
updateTime: '2024-04-01 09:45:00'
|
||||
}
|
||||
]
|
||||
pagination.total = materialsData.value.length
|
||||
}
|
||||
}
|
||||
// const fetchMaterials = async () => {
|
||||
// try {
|
||||
// const params = {
|
||||
// keyword: searchKeyword.value,
|
||||
// category: categoryFilter.value,
|
||||
// status: statusFilter.value,
|
||||
// page: pagination.current,
|
||||
// pageSize: pagination.pageSize
|
||||
// }
|
||||
// const response = await api.warehouse.getList(params)
|
||||
// // 根据后端实际返回的数据结构进行调整
|
||||
// materialsData.value = response.data || []
|
||||
// pagination.total = response.total || 0
|
||||
// } catch (error) {
|
||||
// console.error('获取物资列表失败:', error)
|
||||
// // 如果获取失败，提供一些模拟数据以便页面可以正常显示
|
||||
// materialsData.value = [
|
||||
// {
|
||||
// id: '1',
|
||||
// code: 'M001',
|
||||
// name: '玉米饲料',
|
||||
// category: 'feed',
|
||||
// unit: '吨',
|
||||
// stockQuantity: 150,
|
||||
// warningQuantity: 50,
|
||||
// status: 'normal',
|
||||
// supplier: '希望饲料厂',
|
||||
// updateTime: '2024-04-07 10:15:00'
|
||||
// },
|
||||
// {
|
||||
// id: '2',
|
||||
// code: 'M002',
|
||||
// name: '牛瘟疫苗',
|
||||
// category: 'medicine',
|
||||
// unit: '盒',
|
||||
// stockQuantity: 20,
|
||||
// warningQuantity: 10,
|
||||
// status: 'low',
|
||||
// supplier: '生物制药公司',
|
||||
// updateTime: '2024-04-05 14:30:00'
|
||||
// },
|
||||
// {
|
||||
// id: '3',
|
||||
// code: 'M003',
|
||||
// name: '兽用注射器',
|
||||
// category: 'equipment',
|
||||
// unit: '个',
|
||||
// stockQuantity: 0,
|
||||
// warningQuantity: 50,
|
||||
// status: 'out',
|
||||
// supplier: '医疗器械公司',
|
||||
// updateTime: '2024-04-01 09:45:00'
|
||||
// }
|
||||
// ]
|
||||
// pagination.total = materialsData.value.length
|
||||
// }
|
||||
// }
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>防疫机构管理</h1>
|
||||
<div class="epidemic-agency-container">
|
||||
<div class="header">
|
||||
<h1>防疫机构管理</h1>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和操作栏 -->
|
||||
<a-card style="margin-bottom: 16px;">
|
||||
<div class="filter-section">
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
|
||||
<a-input v-model:value="searchKeyword" placeholder="输入机构名称或编号" style="width: 250px;">
|
||||
<template #prefix>
|
||||
@@ -36,10 +38,10 @@
|
||||
<span class="iconfont icon-tianjia"></span> 新增机构
|
||||
</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 机构列表 -->
|
||||
<a-card>
|
||||
<div class="table-card">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="agenciesData"
|
||||
@@ -47,6 +49,7 @@
|
||||
row-key="id"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange }"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 操作列 -->
|
||||
<template #bodyCell:action="{ record }">
|
||||
@@ -57,14 +60,15 @@
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑机构模态框 -->
|
||||
<a-modal
|
||||
v-model:open="isAddEditModalOpen"
|
||||
:title="isEdit ? '编辑防疫机构' : '新增防疫机构'"
|
||||
:footer="null"
|
||||
width={600}
|
||||
width="600px"
|
||||
class="custom-modal"
|
||||
>
|
||||
<a-form
|
||||
:model="currentAgency"
|
||||
@@ -108,6 +112,10 @@
|
||||
<a-input.TextArea v-model:value="currentAgency.address" placeholder="请输入机构地址" rows={3} />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="防疫范围" name="epidemicScope" :rules="[{ required: true, message: '请输入防疫范围' }]">
|
||||
<a-input.TextArea v-model:value="currentAgency.epidemicScope" placeholder="请输入防疫范围" rows={3} />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="备注" name="remarks">
|
||||
<a-input.TextArea v-model:value="currentAgency.remarks" placeholder="请输入备注信息" rows={2} />
|
||||
</a-form-item>
|
||||
@@ -124,6 +132,7 @@
|
||||
v-model:open="isViewModalOpen"
|
||||
title="查看防疫机构详情"
|
||||
:footer="null"
|
||||
class="custom-modal"
|
||||
>
|
||||
<div v-if="viewAgency">
|
||||
<div style="margin-bottom: 16px;">
|
||||
@@ -154,6 +163,10 @@
|
||||
<span style="font-weight: bold; width: 120px; display: inline-block;">地址：</span>
|
||||
<span>{{ viewAgency.address }}</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 16px;">
|
||||
<span style="font-weight: bold; width: 120px; display: inline-block;">防疫范围：</span>
|
||||
<span>{{ viewAgency.epidemicScope }}</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 16px;">
|
||||
<span style="font-weight: bold; width: 120px; display: inline-block;">成立时间：</span>
|
||||
<span>{{ viewAgency.establishmentDate }}</span>
|
||||
@@ -173,6 +186,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
// 搜索条件
|
||||
const searchKeyword = ref('')
|
||||
@@ -212,6 +226,7 @@ const currentAgency = reactive({
|
||||
manager: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
epidemicScope: '',
|
||||
remarks: ''
|
||||
})
|
||||
|
||||
@@ -219,68 +234,7 @@ const currentAgency = reactive({
|
||||
const viewAgency = ref(null)
|
||||
|
||||
// 机构列表数据
|
||||
const agenciesData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '省动物防疫中心',
|
||||
code: 'EP001',
|
||||
type: 'center',
|
||||
level: 'provincial',
|
||||
manager: '张三',
|
||||
phone: '13800138001',
|
||||
address: '北京市朝阳区农展馆南路5号',
|
||||
establishmentDate: '2005-06-15',
|
||||
remarks: '省级防疫管理机构'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '市动物防疫站',
|
||||
code: 'EP002',
|
||||
type: 'station',
|
||||
level: 'municipal',
|
||||
manager: '李四',
|
||||
phone: '13800138002',
|
||||
address: '北京市海淀区中关村南大街12号',
|
||||
establishmentDate: '2008-09-20',
|
||||
remarks: '市级防疫执行机构'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '县动物防疫站',
|
||||
code: 'EP003',
|
||||
type: 'station',
|
||||
level: 'county',
|
||||
manager: '王五',
|
||||
phone: '13800138003',
|
||||
address: '北京市顺义区府前中街5号',
|
||||
establishmentDate: '2010-03-10',
|
||||
remarks: '县级防疫执行机构'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '乡镇动物防疫诊疗所',
|
||||
code: 'EP004',
|
||||
type: 'clinic',
|
||||
level: 'township',
|
||||
manager: '赵六',
|
||||
phone: '13800138004',
|
||||
address: '北京市昌平区小汤山镇政府路28号',
|
||||
establishmentDate: '2012-05-18',
|
||||
remarks: '乡镇级防疫服务机构'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '区级动物防疫中心',
|
||||
code: 'EP005',
|
||||
type: 'center',
|
||||
level: 'county',
|
||||
manager: '孙七',
|
||||
phone: '13800138005',
|
||||
address: '北京市通州区运河东大街55号',
|
||||
establishmentDate: '2009-11-25',
|
||||
remarks: '区级防疫管理机构'
|
||||
}
|
||||
])
|
||||
const agenciesData = ref([])
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
@@ -322,6 +276,18 @@ const columns = [
|
||||
key: 'phone',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '防疫范围',
|
||||
dataIndex: 'epidemicScope',
|
||||
key: 'epidemicScope',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '成立时间',
|
||||
dataIndex: 'establishmentDate',
|
||||
@@ -357,11 +323,32 @@ const getLevelText = (level) => {
|
||||
return levelMap[level] || level
|
||||
}
|
||||
|
||||
// 获取机构列表数据
|
||||
const getAgenciesList = async () => {
|
||||
try {
|
||||
const response = await api.epidemic.agencies.getList({
|
||||
keyword: searchKeyword.value,
|
||||
type: typeFilter.value,
|
||||
level: levelFilter.value,
|
||||
page: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize
|
||||
})
|
||||
if (response.success) {
|
||||
agenciesData.value = response.data.list
|
||||
pagination.value.total = response.data.total
|
||||
} else {
|
||||
message.error(response.message || '获取机构列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取机构列表失败:', error)
|
||||
message.error('获取机构列表失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
// 这里应该调用API进行搜索，现在使用模拟数据
|
||||
message.success('搜索成功')
|
||||
getAgenciesList()
|
||||
}
|
||||
|
||||
// 处理重置
|
||||
@@ -370,7 +357,13 @@ const handleReset = () => {
|
||||
typeFilter.value = ''
|
||||
levelFilter.value = ''
|
||||
pagination.value.current = 1
|
||||
// 这里应该重置搜索条件并重新加载数据
|
||||
getAgenciesList()
|
||||
}
|
||||
|
||||
// 处理表格分页变化
|
||||
const handleTableChange = (paginationChange) => {
|
||||
pagination.value = paginationChange
|
||||
getAgenciesList()
|
||||
}
|
||||
|
||||
// 处理新增
|
||||
@@ -394,44 +387,64 @@ const handleEdit = (record) => {
|
||||
}
|
||||
|
||||
// 处理查看
|
||||
const handleView = (record) => {
|
||||
viewAgency.value = record
|
||||
isViewModalOpen.value = true
|
||||
const handleView = async (record) => {
|
||||
try {
|
||||
const response = await api.epidemic.agencies.getDetail(record.id)
|
||||
if (response.success) {
|
||||
viewAgency.value = response.data
|
||||
isViewModalOpen.value = true
|
||||
} else {
|
||||
message.error(response.message || '获取机构详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取机构详情失败:', error)
|
||||
message.error('获取机构详情失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (id) => {
|
||||
const handleDelete = async (id) => {
|
||||
// 显示确认对话框
|
||||
if (confirm('确定要删除该防疫机构吗？')) {
|
||||
// 这里应该调用API进行删除，现在使用模拟数据
|
||||
const index = agenciesData.value.findIndex(item => item.id === id)
|
||||
if (index !== -1) {
|
||||
agenciesData.value.splice(index, 1)
|
||||
message.success('删除成功')
|
||||
try {
|
||||
const response = await api.epidemic.agencies.delete(id)
|
||||
if (response.success) {
|
||||
message.success('删除成功')
|
||||
getAgenciesList()
|
||||
} else {
|
||||
message.error(response.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除机构失败:', error)
|
||||
message.error('删除机构失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理保存
|
||||
const handleSave = () => {
|
||||
const handleSave = async () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.validate().then(() => {
|
||||
// 这里应该调用API进行保存，现在使用模拟数据
|
||||
if (isEdit.value) {
|
||||
// 编辑现有记录
|
||||
const index = agenciesData.value.findIndex(item => item.id === currentAgency.id)
|
||||
if (index !== -1) {
|
||||
agenciesData.value[index] = { ...currentAgency }
|
||||
formRef.value.validate().then(async () => {
|
||||
try {
|
||||
let response
|
||||
if (isEdit.value) {
|
||||
// 编辑现有记录
|
||||
response = await api.epidemic.agencies.update(currentAgency.id, currentAgency)
|
||||
} else {
|
||||
// 新增记录
|
||||
response = await api.epidemic.agencies.create(currentAgency)
|
||||
}
|
||||
} else {
|
||||
// 新增记录
|
||||
const newAgency = { ...currentAgency }
|
||||
newAgency.id = String(Date.now())
|
||||
newAgency.establishmentDate = new Date().toISOString().split('T')[0]
|
||||
agenciesData.value.unshift(newAgency)
|
||||
if (response.success) {
|
||||
isAddEditModalOpen.value = false
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||
getAgenciesList()
|
||||
} else {
|
||||
message.error(response.message || (isEdit.value ? '编辑失败' : '新增失败'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(isEdit.value ? '编辑机构失败:' : '新增机构失败:', error)
|
||||
message.error(isEdit.value ? '编辑机构失败，请稍后重试' : '新增机构失败，请稍后重试')
|
||||
}
|
||||
isAddEditModalOpen.value = false
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||
}).catch(() => {
|
||||
message.error('请检查表单数据')
|
||||
})
|
||||
@@ -440,16 +453,99 @@ const handleSave = () => {
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
// 初始化分页总数
|
||||
pagination.value.total = agenciesData.value.length
|
||||
getAgenciesList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
/* 容器样式 */
|
||||
.epidemic-agency-container {
|
||||
padding: 24px;
|
||||
/* background-color: #f0f2f5; */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 过滤器和搜索区域样式 */
|
||||
.filter-section {
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* 表格卡片样式 */
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
.custom-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-table .ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.custom-table .ant-table-tbody > tr:hover > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 表格单元格样式 */
|
||||
.table-cell {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* 操作按钮组样式 */
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 弹窗样式优化 */
|
||||
.custom-modal .ant-modal-header {
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.custom-modal .ant-modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.custom-modal .ant-modal-footer {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
.custom-form .ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.custom-form .ant-form-item-label {
|
||||
font-weight: 500;
|
||||
color: #595959;
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@
|
||||
placeholder="搜索屠宰场名称"
|
||||
style="width: 300px; margin-left: 16px;"
|
||||
@search="handleSearch"
|
||||
v-model:value="searchKeyword"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -20,13 +21,21 @@
|
||||
:columns="columns"
|
||||
:data-source="slaughterhouses"
|
||||
row-key="id"
|
||||
pagination
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #column:action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
|
||||
<a-button type="link" @click="handleDetail(record.id)">详情</a-button>
|
||||
<a-popconfirm
|
||||
title="确定要删除该屠宰场吗？"
|
||||
@confirm="handleDelete(record.id)"
|
||||
>
|
||||
<a-button type="link" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button type="link" @click="handleDetail(record)">详情</a-button>
|
||||
<a-button type="link" @click="handleToggleStatus(record)">{{ record.status === '正常' ? '暂停' : '启用' }}</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #column:status="{ text }">
|
||||
@@ -36,47 +45,155 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单 -->
|
||||
<a-modal
|
||||
v-model:open="isModalOpen"
|
||||
title="屠宰场信息"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form-model
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-model-item label="屠宰场名称" prop="name">
|
||||
<a-input v-model="formData.name" placeholder="请输入屠宰场名称" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="地址" prop="address">
|
||||
<a-input v-model="formData.address" placeholder="请输入地址" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="联系人" prop="contactPerson">
|
||||
<a-input v-model="formData.contactPerson" placeholder="请输入联系人" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="联系电话" prop="contactPhone">
|
||||
<a-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="许可证号" prop="licenseNumber">
|
||||
<a-input v-model="formData.licenseNumber" placeholder="请输入许可证号" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="状态" prop="status">
|
||||
<a-select v-model="formData.status">
|
||||
<a-select-option value="正常">正常</a-select-option>
|
||||
<a-select-option value="暂停营业">暂停营业</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="isDetailModalOpen"
|
||||
title="屠宰场详情"
|
||||
@cancel="handleDetailCancel"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">屠宰场名称：</span>
|
||||
<span class="detail-value">{{ detailData.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">地址：</span>
|
||||
<span class="detail-value">{{ detailData.address }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">联系人：</span>
|
||||
<span class="detail-value">{{ detailData.contactPerson }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">联系电话：</span>
|
||||
<span class="detail-value">{{ detailData.contactPhone }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">许可证号：</span>
|
||||
<span class="detail-value">{{ detailData.licenseNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">状态：</span>
|
||||
<span class="detail-value"><a-tag :color="detailData.status === '正常' ? 'green' : 'red'">
|
||||
{{ detailData.status }}
|
||||
</a-tag></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">创建时间：</span>
|
||||
<span class="detail-value">{{ detailData.createTime }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">更新时间：</span>
|
||||
<span class="detail-value">{{ detailData.updateTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// 模拟数据
|
||||
const slaughterhouses = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '东方屠宰场',
|
||||
address: '北京市朝阳区东方路123号',
|
||||
contactPerson: '张三',
|
||||
contactPhone: '13800138001',
|
||||
licenseNumber: 'SL20230001',
|
||||
status: '正常',
|
||||
createTime: '2023-01-15'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '南方屠宰场',
|
||||
address: '北京市海淀区南大街45号',
|
||||
contactPerson: '李四',
|
||||
contactPhone: '13900139002',
|
||||
licenseNumber: 'SL20230002',
|
||||
status: '正常',
|
||||
createTime: '2023-02-20'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '北方屠宰场',
|
||||
address: '北京市西城区北大街67号',
|
||||
contactPerson: '王五',
|
||||
contactPhone: '13700137003',
|
||||
licenseNumber: 'SL20230003',
|
||||
status: '暂停营业',
|
||||
createTime: '2023-03-10'
|
||||
}
|
||||
])
|
||||
// 数据列表
|
||||
const slaughterhouses = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
})
|
||||
|
||||
// 模态框状态
|
||||
const isModalOpen = ref(false)
|
||||
const isDetailModalOpen = ref(false)
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref(null)
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
address: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
licenseNumber: '',
|
||||
status: '正常'
|
||||
})
|
||||
|
||||
// 详情数据
|
||||
const detailData = reactive({})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入屠宰场名称', trigger: 'blur' }
|
||||
],
|
||||
address: [
|
||||
{ required: true, message: '请输入地址', trigger: 'blur' }
|
||||
],
|
||||
contactPerson: [
|
||||
{ required: true, message: '请输入联系人', trigger: 'blur' }
|
||||
],
|
||||
contactPhone: [
|
||||
{ required: true, message: '请输入联系电话', trigger: 'blur' }
|
||||
],
|
||||
licenseNumber: [
|
||||
{ required: true, message: '请输入许可证号', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
@@ -109,7 +226,7 @@ export default {
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
slots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
@@ -119,48 +236,191 @@ export default {
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
// 获取屠宰场列表
|
||||
const fetchSlaughterhouses = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value
|
||||
}
|
||||
const response = await api.slaughter.getList(params)
|
||||
if (response && response.data) {
|
||||
slaughterhouses.value = response.data.list || []
|
||||
pagination.total = response.data.total || 0
|
||||
} else {
|
||||
slaughterhouses.value = []
|
||||
pagination.total = 0
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取屠宰场列表失败')
|
||||
console.error('获取屠宰场列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (value) => {
|
||||
console.log('搜索:', value)
|
||||
// 实际项目中这里应该调用API进行搜索
|
||||
const handleSearch = async () => {
|
||||
pagination.current = 1
|
||||
await fetchSlaughterhouses()
|
||||
}
|
||||
|
||||
// 处理表格变化
|
||||
const handleTableChange = async (paginationConfig) => {
|
||||
Object.assign(pagination, paginationConfig)
|
||||
await fetchSlaughterhouses()
|
||||
}
|
||||
|
||||
// 处理新增
|
||||
const handleAdd = () => {
|
||||
console.log('新增屠宰场')
|
||||
// 实际项目中这里应该打开新增表单
|
||||
// 重置表单
|
||||
Object.assign(formData, {
|
||||
id: '',
|
||||
name: '',
|
||||
address: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
licenseNumber: '',
|
||||
status: '正常'
|
||||
})
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (record) => {
|
||||
console.log('编辑屠宰场:', record)
|
||||
// 实际项目中这里应该打开编辑表单
|
||||
const handleEdit = async (record) => {
|
||||
try {
|
||||
const response = await api.slaughter.getDetail(record.id)
|
||||
if (response && response.data) {
|
||||
Object.assign(formData, response.data)
|
||||
isModalOpen.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取屠宰场详情失败')
|
||||
console.error('获取屠宰场详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (id) => {
|
||||
console.log('删除屠宰场:', id)
|
||||
// 实际项目中这里应该弹出确认框并调用API删除
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
const response = await api.slaughter.delete(id)
|
||||
if (response && response.code === 200) {
|
||||
message.success('删除成功')
|
||||
await fetchSlaughterhouses()
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
console.error('删除失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理查看详情
|
||||
const handleDetail = (id) => {
|
||||
console.log('查看屠宰场详情:', id)
|
||||
// 实际项目中这里应该打开详情页面
|
||||
const handleDetail = async (record) => {
|
||||
try {
|
||||
const response = await api.slaughter.getDetail(record.id)
|
||||
if (response && response.data) {
|
||||
Object.assign(detailData, response.data)
|
||||
isDetailModalOpen.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取屠宰场详情失败')
|
||||
console.error('获取屠宰场详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理切换状态
|
||||
const handleToggleStatus = async (record) => {
|
||||
try {
|
||||
const response = await api.slaughter.toggleStatus(record.id)
|
||||
if (response && response.code === 200) {
|
||||
message.success('状态切换成功')
|
||||
await fetchSlaughterhouses()
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('状态切换失败')
|
||||
console.error('状态切换失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const handleOk = async () => {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
let response
|
||||
if (formData.id) {
|
||||
// 更新
|
||||
response = await api.slaughter.update(formData.id, formData)
|
||||
} else {
|
||||
// 新增
|
||||
response = await api.slaughter.create(formData)
|
||||
}
|
||||
if (response && response.code === 200) {
|
||||
message.success(formData.id ? '更新成功' : '新增成功')
|
||||
isModalOpen.value = false
|
||||
await fetchSlaughterhouses()
|
||||
}
|
||||
} catch (error) {
|
||||
if (error && error.errors && error.errors.length > 0) {
|
||||
message.error(error.errors[0].message)
|
||||
} else if (error && error.message) {
|
||||
message.error(error.message)
|
||||
} else {
|
||||
message.error(formData.id ? '更新失败' : '新增失败')
|
||||
}
|
||||
console.error(formData.id ? '更新失败:' : '新增失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消表单
|
||||
const handleCancel = () => {
|
||||
isModalOpen.value = false
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
// 取消详情
|
||||
const handleDetailCancel = () => {
|
||||
isDetailModalOpen.value = false
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(async () => {
|
||||
await fetchSlaughterhouses()
|
||||
})
|
||||
|
||||
return {
|
||||
slaughterhouses,
|
||||
loading,
|
||||
searchKeyword,
|
||||
pagination,
|
||||
isModalOpen,
|
||||
isDetailModalOpen,
|
||||
formRef,
|
||||
formData,
|
||||
detailData,
|
||||
formRules,
|
||||
columns,
|
||||
handleSearch,
|
||||
handleTableChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleDetail
|
||||
handleDetail,
|
||||
handleToggleStatus,
|
||||
handleOk,
|
||||
handleCancel,
|
||||
handleDetailCancel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,10 @@
|
||||
<div class="toolbar">
|
||||
<a-button type="primary" @click="handleAdd">新增无害化场所</a-button>
|
||||
<a-input-search
|
||||
placeholder="搜索场所名称"
|
||||
placeholder="搜索场所名称或许可证号"
|
||||
style="width: 300px; margin-left: 16px;"
|
||||
@search="handleSearch"
|
||||
v-model:value="searchKeyword"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -20,63 +21,157 @@
|
||||
:columns="columns"
|
||||
:data-source="harmlessPlaces"
|
||||
row-key="id"
|
||||
pagination
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #column:action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
|
||||
<a-button type="link" @click="handleDetail(record.id)">详情</a-button>
|
||||
<a-popconfirm
|
||||
title="确定要删除该无害化场所吗？"
|
||||
@confirm="handleDelete(record.id)"
|
||||
>
|
||||
<a-button type="link" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button type="link" @click="handleDetail(record)">详情</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #column:status="{ text }">
|
||||
<a-tag :color="text === '正常' ? 'green' : 'red'">
|
||||
<a-tag :color="getStatusColor(text)">
|
||||
{{ text }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单 -->
|
||||
<a-modal
|
||||
v-model:open="isModalOpen"
|
||||
title="无害化场所信息"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form-model
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-model-item label="场所名称" prop="name">
|
||||
<a-input v-model="formData.name" placeholder="请输入场所名称" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="地址" prop="address">
|
||||
<a-input v-model="formData.address" placeholder="请输入地址" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="联系人" prop="contactPerson">
|
||||
<a-input v-model="formData.contactPerson" placeholder="请输入联系人" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="联系电话" prop="contactPhone">
|
||||
<a-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="许可证号" prop="licenseNumber">
|
||||
<a-input v-model="formData.licenseNumber" placeholder="请输入许可证号" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="状态" prop="status">
|
||||
<a-select v-model="formData.status">
|
||||
<a-select-option value="正常">正常</a-select-option>
|
||||
<a-select-option value="维护中">维护中</a-select-option>
|
||||
<a-select-option value="停用">停用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="isDetailModalOpen"
|
||||
title="无害化场所详情"
|
||||
@cancel="handleDetailCancel"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">场所名称：</span>
|
||||
<span class="detail-value">{{ detailData.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">地址：</span>
|
||||
<span class="detail-value">{{ detailData.address }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">联系人：</span>
|
||||
<span class="detail-value">{{ detailData.contactPerson }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">联系电话：</span>
|
||||
<span class="detail-value">{{ detailData.contactPhone }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">许可证号：</span>
|
||||
<span class="detail-value">{{ detailData.licenseNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">状态：</span>
|
||||
<span class="detail-value">{{ detailData.status }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">创建时间：</span>
|
||||
<span class="detail-value">{{ detailData.createTime }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">更新时间：</span>
|
||||
<span class="detail-value">{{ detailData.updateTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||
import api from '@/utils/api'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// 模拟数据
|
||||
const harmlessPlaces = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '北京无害化处理中心',
|
||||
address: '北京市顺义区无害化路88号',
|
||||
contactPerson: '赵六',
|
||||
contactPhone: '13600136001',
|
||||
licenseNumber: 'HP20230001',
|
||||
status: '正常',
|
||||
createTime: '2023-01-20'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '天津无害化处理站',
|
||||
address: '天津市滨海新区处理路56号',
|
||||
contactPerson: '钱七',
|
||||
contactPhone: '13500135002',
|
||||
licenseNumber: 'HP20230002',
|
||||
status: '正常',
|
||||
createTime: '2023-02-25'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '河北无害化处理厂',
|
||||
address: '河北省廊坊市大厂县处理路34号',
|
||||
contactPerson: '孙八',
|
||||
contactPhone: '13400134003',
|
||||
licenseNumber: 'HP20230003',
|
||||
status: '维护中',
|
||||
createTime: '2023-03-15'
|
||||
}
|
||||
])
|
||||
// 响应式数据
|
||||
const harmlessPlaces = ref([])
|
||||
const loading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 模态框状态
|
||||
const isModalOpen = ref(false)
|
||||
const isDetailModalOpen = ref(false)
|
||||
const editingId = ref('')
|
||||
|
||||
// 表单引用和数据
|
||||
const formRef = ref()
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
address: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
licenseNumber: '',
|
||||
status: '正常'
|
||||
})
|
||||
|
||||
// 详情数据
|
||||
const detailData = reactive({})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入场所名称', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||||
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
|
||||
licenseNumber: [{ required: true, message: '请输入许可证号', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
@@ -123,44 +218,200 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
// 获取状态对应的颜色
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
'正常': 'green',
|
||||
'维护中': 'orange',
|
||||
'停用': 'red'
|
||||
}
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 获取无害化场所列表
|
||||
const fetchHarmlessPlaces = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value
|
||||
}
|
||||
const res = await api.harmlessPlace.getList(params)
|
||||
if (res.code === 200) {
|
||||
harmlessPlaces.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
} else {
|
||||
message.error(res.message || '获取无害化场所列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取无害化场所列表失败:', error)
|
||||
message.error('获取无害化场所列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (value) => {
|
||||
console.log('搜索:', value)
|
||||
// 实际项目中这里应该调用API进行搜索
|
||||
const handleSearch = async (value) => {
|
||||
searchKeyword.value = value || ''
|
||||
pagination.current = 1
|
||||
await fetchHarmlessPlaces()
|
||||
}
|
||||
|
||||
// 处理表格分页变化
|
||||
const handleTableChange = async (pagination) => {
|
||||
Object.assign(pagination, pagination)
|
||||
await fetchHarmlessPlaces()
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
address: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
licenseNumber: '',
|
||||
status: '正常'
|
||||
})
|
||||
editingId.value = ''
|
||||
}
|
||||
|
||||
// 处理新增
|
||||
const handleAdd = () => {
|
||||
console.log('新增无害化场所')
|
||||
// 实际项目中这里应该打开新增表单
|
||||
resetForm()
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (record) => {
|
||||
console.log('编辑无害化场所:', record)
|
||||
// 实际项目中这里应该打开编辑表单
|
||||
const handleEdit = async (record) => {
|
||||
resetForm()
|
||||
editingId.value = record.id
|
||||
|
||||
// 填充表单数据
|
||||
Object.assign(formData, {
|
||||
name: record.name,
|
||||
address: record.address,
|
||||
contactPerson: record.contactPerson,
|
||||
contactPhone: record.contactPhone,
|
||||
licenseNumber: record.licenseNumber,
|
||||
status: record.status
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (id) => {
|
||||
console.log('删除无害化场所:', id)
|
||||
// 实际项目中这里应该弹出确认框并调用API删除
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await api.harmlessPlace.delete(id)
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
await fetchHarmlessPlaces()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除无害化场所失败:', error)
|
||||
message.error('删除失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理查看详情
|
||||
const handleDetail = (id) => {
|
||||
console.log('查看无害化场所详情:', id)
|
||||
// 实际项目中这里应该打开详情页面
|
||||
const handleDetail = async (record) => {
|
||||
try {
|
||||
const res = await api.harmlessPlace.getDetail(record.id)
|
||||
if (res.code === 200) {
|
||||
Object.assign(detailData, res.data)
|
||||
isDetailModalOpen.value = true
|
||||
} else {
|
||||
message.error(res.message || '获取详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取无害化场所详情失败:', error)
|
||||
message.error('获取详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
if (!formRef.value) return
|
||||
|
||||
await formRef.value.validate()
|
||||
|
||||
loading.value = true
|
||||
let res
|
||||
|
||||
if (editingId.value) {
|
||||
// 更新
|
||||
res = await api.harmlessPlace.update(editingId.value, formData)
|
||||
} else {
|
||||
// 新增
|
||||
res = await api.harmlessPlace.create(formData)
|
||||
}
|
||||
|
||||
if (res.code === 200) {
|
||||
message.success(editingId.value ? '更新成功' : '创建成功')
|
||||
isModalOpen.value = false
|
||||
await fetchHarmlessPlaces()
|
||||
} else {
|
||||
message.error(res.message || (editingId.value ? '更新失败' : '创建失败'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(editingId.value ? '更新无害化场所失败' : '创建无害化场所失败', error)
|
||||
message.error(editingId.value ? '更新失败' : '创建失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
isModalOpen.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 处理详情弹窗取消
|
||||
const handleDetailCancel = () => {
|
||||
isDetailModalOpen.value = false
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
fetchHarmlessPlaces()
|
||||
})
|
||||
|
||||
return {
|
||||
harmlessPlaces,
|
||||
loading,
|
||||
searchKeyword,
|
||||
pagination,
|
||||
isModalOpen,
|
||||
isDetailModalOpen,
|
||||
formRef,
|
||||
formData,
|
||||
detailData,
|
||||
formRules,
|
||||
columns,
|
||||
getStatusColor,
|
||||
handleSearch,
|
||||
handleTableChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleDetail
|
||||
handleDetail,
|
||||
handleOk,
|
||||
handleCancel,
|
||||
handleDetailCancel
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -186,4 +437,24 @@ export default {
|
||||
padding: 24px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
</style>
|
||||
@@ -11,11 +11,13 @@
|
||||
<a-range-picker
|
||||
style="width: 300px; margin-left: 16px;"
|
||||
@change="handleDateChange"
|
||||
v-model:value="dateRange"
|
||||
/>
|
||||
<a-input-search
|
||||
placeholder="搜索登记编号"
|
||||
style="width: 300px; margin-left: 16px;"
|
||||
@search="handleSearch"
|
||||
v-model:value="searchKeyword"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -24,13 +26,20 @@
|
||||
:columns="columns"
|
||||
:data-source="harmlessRegistrations"
|
||||
row-key="id"
|
||||
pagination
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #column:action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
|
||||
<a-button type="link" @click="handleDetail(record.id)">详情</a-button>
|
||||
<a-popconfirm
|
||||
title="确定要删除该无害化登记吗？"
|
||||
@confirm="handleDelete(record.id)"
|
||||
>
|
||||
<a-button type="link" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button type="link" @click="handleDetail(record)">详情</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #column:status="{ text }">
|
||||
@@ -40,56 +49,194 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单 -->
|
||||
<a-modal
|
||||
v-model:open="isModalOpen"
|
||||
title="无害化登记信息"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form-model
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-model-item label="登记编号" prop="registrationNumber">
|
||||
<a-input v-model="formData.registrationNumber" placeholder="请输入登记编号" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="动物类型" prop="animalType">
|
||||
<a-input v-model="formData.animalType" placeholder="请输入动物类型" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="数量" prop="quantity">
|
||||
<a-input-number v-model="formData.quantity" placeholder="请输入数量" min="1" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="原因" prop="reason">
|
||||
<a-input v-model="formData.reason" placeholder="请输入原因" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="处理方式" prop="processingMethod">
|
||||
<a-input v-model="formData.processingMethod" placeholder="请输入处理方式" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="处理场所" prop="processingPlace">
|
||||
<a-input v-model="formData.processingPlace" placeholder="请输入处理场所" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="处理日期" prop="processingDate">
|
||||
<a-date-picker v-model="formData.processingDate" placeholder="请选择处理日期" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="登记人" prop="registrant">
|
||||
<a-input v-model="formData.registrant" placeholder="请输入登记人" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="状态" prop="status">
|
||||
<a-select v-model="formData.status">
|
||||
<a-select-option value="待处理">待处理</a-select-option>
|
||||
<a-select-option value="处理中">处理中</a-select-option>
|
||||
<a-select-option value="已完成">已完成</a-select-option>
|
||||
<a-select-option value="已取消">已取消</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="isDetailModalOpen"
|
||||
title="无害化登记详情"
|
||||
@cancel="handleDetailCancel"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">登记编号：</span>
|
||||
<span class="detail-value">{{ detailData.registrationNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">动物类型：</span>
|
||||
<span class="detail-value">{{ detailData.animalType }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">数量：</span>
|
||||
<span class="detail-value">{{ detailData.quantity }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">原因：</span>
|
||||
<span class="detail-value">{{ detailData.reason }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">处理方式：</span>
|
||||
<span class="detail-value">{{ detailData.processingMethod }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">处理场所：</span>
|
||||
<span class="detail-value">{{ detailData.processingPlace }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">处理日期：</span>
|
||||
<span class="detail-value">{{ detailData.processingDate }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">登记人：</span>
|
||||
<span class="detail-value">{{ detailData.registrant }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">状态：</span>
|
||||
<span class="detail-value"><a-tag :color="getStatusColor(detailData.status)">
|
||||
{{ detailData.status }}
|
||||
</a-tag></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">创建时间：</span>
|
||||
<span class="detail-value">{{ detailData.createTime }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">更新时间：</span>
|
||||
<span class="detail-value">{{ detailData.updateTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// 模拟数据
|
||||
const harmlessRegistrations = ref([
|
||||
{
|
||||
id: '1',
|
||||
registrationNumber: 'HR20230501',
|
||||
animalType: '牛',
|
||||
quantity: 10,
|
||||
reason: '病死',
|
||||
processingMethod: '焚烧',
|
||||
processingPlace: '北京无害化处理中心',
|
||||
processingDate: '2023-05-10',
|
||||
registrant: '刘九',
|
||||
status: '已完成',
|
||||
createTime: '2023-05-09'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
registrationNumber: 'HR20230502',
|
||||
animalType: '牛',
|
||||
quantity: 5,
|
||||
reason: '事故死亡',
|
||||
processingMethod: '深埋',
|
||||
processingPlace: '天津无害化处理站',
|
||||
processingDate: '2023-05-15',
|
||||
registrant: '周十',
|
||||
status: '处理中',
|
||||
createTime: '2023-05-14'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
registrationNumber: 'HR20230503',
|
||||
animalType: '牛',
|
||||
quantity: 3,
|
||||
reason: '检疫不合格',
|
||||
processingMethod: '焚烧',
|
||||
processingPlace: '河北无害化处理厂',
|
||||
processingDate: '2023-05-20',
|
||||
registrant: '吴十一',
|
||||
status: '待处理',
|
||||
createTime: '2023-05-18'
|
||||
}
|
||||
])
|
||||
// 数据列表
|
||||
const harmlessRegistrations = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref([])
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
})
|
||||
|
||||
// 模态框状态
|
||||
const isModalOpen = ref(false)
|
||||
const isDetailModalOpen = ref(false)
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref(null)
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
registrationNumber: '',
|
||||
animalType: '',
|
||||
quantity: 1,
|
||||
reason: '',
|
||||
processingMethod: '',
|
||||
processingPlace: '',
|
||||
processingDate: null,
|
||||
registrant: '',
|
||||
status: '待处理'
|
||||
})
|
||||
|
||||
// 详情数据
|
||||
const detailData = reactive({})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
registrationNumber: [
|
||||
{ required: true, message: '请输入登记编号', trigger: 'blur' }
|
||||
],
|
||||
animalType: [
|
||||
{ required: true, message: '请输入动物类型', trigger: 'blur' }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: '请输入数量', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '数量必须大于0', trigger: 'blur' }
|
||||
],
|
||||
reason: [
|
||||
{ required: true, message: '请输入原因', trigger: 'blur' }
|
||||
],
|
||||
processingMethod: [
|
||||
{ required: true, message: '请输入处理方式', trigger: 'blur' }
|
||||
],
|
||||
processingPlace: [
|
||||
{ required: true, message: '请输入处理场所', trigger: 'blur' }
|
||||
],
|
||||
processingDate: [
|
||||
{ required: true, message: '请选择处理日期', trigger: 'change' }
|
||||
],
|
||||
registrant: [
|
||||
{ required: true, message: '请输入登记人', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
@@ -137,7 +284,7 @@ export default {
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
slots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
@@ -147,7 +294,7 @@ export default {
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
@@ -162,52 +309,198 @@ export default {
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 获取无害化登记列表
|
||||
const fetchHarmlessRegistrations = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value,
|
||||
startDate: dateRange.value[0] ? dateRange.value[0].format('YYYY-MM-DD') : '',
|
||||
endDate: dateRange.value[1] ? dateRange.value[1].format('YYYY-MM-DD') : ''
|
||||
}
|
||||
const response = await api.harmlessRegistration.getList(params)
|
||||
if (response && response.data) {
|
||||
harmlessRegistrations.value = response.data.list || []
|
||||
pagination.total = response.data.total || 0
|
||||
} else {
|
||||
harmlessRegistrations.value = []
|
||||
pagination.total = 0
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取无害化登记列表失败')
|
||||
console.error('获取无害化登记列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (value) => {
|
||||
console.log('搜索:', value)
|
||||
// 实际项目中这里应该调用API进行搜索
|
||||
const handleSearch = async () => {
|
||||
pagination.current = 1
|
||||
await fetchHarmlessRegistrations()
|
||||
}
|
||||
|
||||
// 处理日期范围变化
|
||||
const handleDateChange = (dates, dateStrings) => {
|
||||
console.log('日期范围:', dates, dateStrings)
|
||||
// 实际项目中这里应该根据日期范围筛选数据
|
||||
const handleDateChange = async (dates) => {
|
||||
dateRange.value = dates
|
||||
pagination.current = 1
|
||||
await fetchHarmlessRegistrations()
|
||||
}
|
||||
|
||||
// 处理表格变化
|
||||
const handleTableChange = async (paginationConfig) => {
|
||||
Object.assign(pagination, paginationConfig)
|
||||
await fetchHarmlessRegistrations()
|
||||
}
|
||||
|
||||
// 处理新增
|
||||
const handleAdd = () => {
|
||||
console.log('新增无害化登记')
|
||||
// 实际项目中这里应该打开新增表单
|
||||
// 重置表单
|
||||
Object.assign(formData, {
|
||||
id: '',
|
||||
registrationNumber: '',
|
||||
animalType: '',
|
||||
quantity: 1,
|
||||
reason: '',
|
||||
processingMethod: '',
|
||||
processingPlace: '',
|
||||
processingDate: null,
|
||||
registrant: '',
|
||||
status: '待处理'
|
||||
})
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (record) => {
|
||||
console.log('编辑无害化登记:', record)
|
||||
// 实际项目中这里应该打开编辑表单
|
||||
const handleEdit = async (record) => {
|
||||
try {
|
||||
const response = await api.harmlessRegistration.getDetail(record.id)
|
||||
if (response && response.data) {
|
||||
// 转换日期格式
|
||||
const data = { ...response.data }
|
||||
if (data.processingDate) {
|
||||
data.processingDate = new Date(data.processingDate)
|
||||
}
|
||||
Object.assign(formData, data)
|
||||
isModalOpen.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取无害化登记详情失败')
|
||||
console.error('获取无害化登记详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (id) => {
|
||||
console.log('删除无害化登记:', id)
|
||||
// 实际项目中这里应该弹出确认框并调用API删除
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
const response = await api.harmlessRegistration.delete(id)
|
||||
if (response && response.code === 200) {
|
||||
message.success('删除成功')
|
||||
await fetchHarmlessRegistrations()
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
console.error('删除失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理查看详情
|
||||
const handleDetail = (id) => {
|
||||
console.log('查看无害化登记详情:', id)
|
||||
// 实际项目中这里应该打开详情页面
|
||||
const handleDetail = async (record) => {
|
||||
try {
|
||||
const response = await api.harmlessRegistration.getDetail(record.id)
|
||||
if (response && response.data) {
|
||||
Object.assign(detailData, response.data)
|
||||
isDetailModalOpen.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取无害化登记详情失败')
|
||||
console.error('获取无害化登记详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
const handleOk = async () => {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
// 格式化日期
|
||||
const submitData = { ...formData }
|
||||
if (submitData.processingDate) {
|
||||
submitData.processingDate = submitData.processingDate.format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
let response
|
||||
if (submitData.id) {
|
||||
// 更新
|
||||
response = await api.harmlessRegistration.update(submitData.id, submitData)
|
||||
} else {
|
||||
// 新增
|
||||
response = await api.harmlessRegistration.create(submitData)
|
||||
}
|
||||
if (response && response.code === 200) {
|
||||
message.success(submitData.id ? '更新成功' : '新增成功')
|
||||
isModalOpen.value = false
|
||||
await fetchHarmlessRegistrations()
|
||||
}
|
||||
} catch (error) {
|
||||
if (error && error.errors && error.errors.length > 0) {
|
||||
message.error(error.errors[0].message)
|
||||
} else if (error && error.message) {
|
||||
message.error(error.message)
|
||||
} else {
|
||||
message.error(formData.id ? '更新失败' : '新增失败')
|
||||
}
|
||||
console.error(formData.id ? '更新失败:' : '新增失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消表单
|
||||
const handleCancel = () => {
|
||||
isModalOpen.value = false
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
// 取消详情
|
||||
const handleDetailCancel = () => {
|
||||
isDetailModalOpen.value = false
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(async () => {
|
||||
await fetchHarmlessRegistrations()
|
||||
})
|
||||
|
||||
return {
|
||||
harmlessRegistrations,
|
||||
loading,
|
||||
searchKeyword,
|
||||
dateRange,
|
||||
pagination,
|
||||
isModalOpen,
|
||||
isDetailModalOpen,
|
||||
formRef,
|
||||
formData,
|
||||
detailData,
|
||||
formRules,
|
||||
columns,
|
||||
getStatusColor,
|
||||
handleSearch,
|
||||
handleDateChange,
|
||||
handleTableChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleDetail
|
||||
handleDetail,
|
||||
handleOk,
|
||||
handleCancel,
|
||||
handleDetailCancel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -240,7 +240,7 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
// 状态相关
|
||||
状态相关
|
||||
const getStatusColor = (status) => {
|
||||
const statusMap = {
|
||||
active: 'green',
|
||||
|
||||
Reference in New Issue
Block a user