更新
This commit is contained in:
389
src/pages/system/area/index.vue
Normal file
389
src/pages/system/area/index.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="system-area">
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<div class="page-title">
|
||||
<EnvironmentOutlined />
|
||||
<span>{{ $t('common.areaManage') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<sc-table ref="tableRef" :columns="columns" :data-source="dataSource" :loading="loading"
|
||||
:pagination="pagination" :show-row-actions="true" :row-actions="rowActions" :enable-cache="true"
|
||||
cache-key="system-area-table" @refresh="loadData" @change="handleTableChange" @action="handleAction">
|
||||
<!-- 工具栏左侧 -->
|
||||
<template #toolbar-left>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
{{ $t('common.add') }}
|
||||
</a-button>
|
||||
<a-button danger @click="handleBatchDelete" :disabled="!selectedRowKeys.length">
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
{{ $t('common.batchDelete') }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 状态列自定义 -->
|
||||
<template #status="{ text }">
|
||||
<a-tag :color="text === 1 ? 'green' : 'red'">
|
||||
{{ text === 1 ? $t('common.enabled') : $t('common.disabled') }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 级别列自定义 -->
|
||||
<template #level="{ text }">
|
||||
<a-tag color="blue">{{ getLevelText(text) }}</a-tag>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 添加/编辑弹窗 -->
|
||||
<AreaModal v-model:visible="modalVisible" :is-edit="isEdit" :initial-data="currentData"
|
||||
@confirm="handleModalConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { EnvironmentOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import systemApi from '@/api/system'
|
||||
import ScTable from '@/components/scTable/index.vue'
|
||||
import AreaModal from './components/AreaModal.vue'
|
||||
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'SystemArea',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 数据源
|
||||
const dataSource = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
})
|
||||
|
||||
// 选中的行
|
||||
const selectedRowKeys = ref([])
|
||||
|
||||
// 弹窗相关
|
||||
const modalVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const currentData = ref({})
|
||||
|
||||
// 行操作配置
|
||||
const rowActions = ref([])
|
||||
|
||||
// 获取级别文本
|
||||
const getLevelText = (level) => {
|
||||
const levelMap = {
|
||||
1: t('common.province'),
|
||||
2: t('common.city'),
|
||||
3: t('common.district'),
|
||||
4: t('common.street'),
|
||||
}
|
||||
return levelMap[level] || t('common.unknown')
|
||||
}
|
||||
|
||||
// 列配置
|
||||
const columns = ref([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: t('common.areaName'),
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: t('common.areaCode'),
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: t('common.areaLevel'),
|
||||
dataIndex: 'level',
|
||||
key: 'level',
|
||||
width: 100,
|
||||
slot: 'level',
|
||||
},
|
||||
{
|
||||
title: t('common.parentArea'),
|
||||
dataIndex: 'parent_code',
|
||||
key: 'parent_code',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: t('common.status'),
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
slot: 'status',
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: t('common.action'),
|
||||
key: 'action',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
},
|
||||
])
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
const res = await systemApi.area.list.get(params)
|
||||
if (res.code === 1) {
|
||||
dataSource.value = res.data.list || res.data || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(t('common.fetchDataFailed'))
|
||||
console.error('获取地区列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (params) => {
|
||||
const { pagination: pag } = params
|
||||
pagination.current = pag.current
|
||||
pagination.pageSize = pag.pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 行操作处理
|
||||
const handleAction = (key, record) => {
|
||||
if (key === 'edit') {
|
||||
handleEdit(record)
|
||||
} else if (key === 'delete') {
|
||||
handleDelete(record)
|
||||
}
|
||||
}
|
||||
|
||||
// 添加
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
currentData.value = {}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (record) => {
|
||||
isEdit.value = true
|
||||
currentData.value = { ...record }
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = (record) => {
|
||||
Modal.confirm({
|
||||
title: t('common.confirmDelete'),
|
||||
content: `${t('common.deleteConfirm')}: ${record.title}?`,
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 注意：API 中没有删除接口，这里模拟删除成功
|
||||
// 如果后端有删除接口，请取消注释以下代码
|
||||
// const res = await systemApi.area.delete.post({ id: record.id })
|
||||
// if (res.code === 200) {
|
||||
message.success(t('common.deleteSuccess'))
|
||||
loadData()
|
||||
// }
|
||||
} catch (error) {
|
||||
message.error(t('common.deleteFailed'))
|
||||
console.error('删除地区失败:', error)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化行操作配置（必须在 handleEdit 和 handleDelete 定义之后）
|
||||
rowActions.value = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: t('common.edit'),
|
||||
handler: handleEdit,
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: t('common.delete'),
|
||||
danger: true,
|
||||
handler: handleDelete,
|
||||
},
|
||||
]
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning(t('common.selectDataFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: t('common.confirmBatchDelete'),
|
||||
content: `${t('common.batchDeleteConfirm')}: ${selectedRowKeys.value.length} ${t('common.items')}?`,
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 注意：API 中没有批量删除接口，这里模拟删除成功
|
||||
message.success(t('common.deleteSuccess'))
|
||||
selectedRowKeys.value = []
|
||||
loadData()
|
||||
} catch (error) {
|
||||
message.error(t('common.deleteFailed'))
|
||||
console.error('批量删除失败:', error)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 弹窗确认
|
||||
const handleModalConfirm = async (values) => {
|
||||
try {
|
||||
let res
|
||||
if (isEdit.value) {
|
||||
// 编辑
|
||||
res = await systemApi.area.edit.post(values)
|
||||
if (res.code === 1) {
|
||||
message.success(t('common.editSuccess'))
|
||||
modalVisible.value = false
|
||||
loadData()
|
||||
}
|
||||
} else {
|
||||
// 添加
|
||||
res = await systemApi.area.add.post(values)
|
||||
if (res.code === 1) {
|
||||
message.success(t('common.addSuccess'))
|
||||
modalVisible.value = false
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return // 表单验证错误
|
||||
}
|
||||
message.error(isEdit.value ? t('common.editFailed') : t('common.addFailed'))
|
||||
console.error(isEdit.value ? '编辑地区失败:' : '添加地区失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化加载数据
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-area {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.ant-card) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
flex-shrink: 0;
|
||||
min-height: auto;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
:deep(.sc-table) {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.ant-table-container) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-table-body) {
|
||||
flex: 1;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination) {
|
||||
flex-shrink: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user