菜单管理
This commit is contained in:
sjl
216
frontend/src/views/authority/resource/index.vue
Normal file
216
frontend/src/views/authority/resource/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class='table-box'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:data='resourceData'
|
||||
@selection-change="handleSelectionChange"
|
||||
type="selection"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增菜单</el-button>
|
||||
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length' @click="handleDelList"
|
||||
>
|
||||
批量删除菜单
|
||||
</el-button>
|
||||
</template>
|
||||
<template>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation='scope'>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click="deleteResource(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
<!-- 新增/编辑资源对话框 -->
|
||||
<ResourceDialog
|
||||
:visible="dialogFormVisible"
|
||||
:dialogTitle="dialogTitle"
|
||||
:formData="dialogForm"
|
||||
@update:visible="dialogFormVisible = $event"
|
||||
@submit="submitForm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang='tsx' name='useProTable'>
|
||||
import { defineComponent,ref ,reactive} from 'vue'
|
||||
import { type Resource } from '@/api/resource/interface'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import ResourceDialog from '@/components/ResourceDialog/index.vue'; // 导入子组件
|
||||
import {Operation, CirclePlus, Delete, EditPen, Download, Upload, View, Refresh} from '@element-plus/icons-vue'
|
||||
import resourceDataList from '@/api/resource/resourceData'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
|
||||
let multipleSelection = ref<string[]>([]);
|
||||
const resourceData = resourceDataList
|
||||
const dialogFormVisible = ref(false)
|
||||
const isEditMode = ref(false);
|
||||
const dialogTitle = ref('新增菜单')
|
||||
const dialogForm = ref<Resource.ResResourceList>({
|
||||
id: '',
|
||||
name: '',
|
||||
path: '',
|
||||
sort: 0,
|
||||
type: '',
|
||||
remark: '',
|
||||
route_Name: '',
|
||||
create_Time: '' ,
|
||||
update_Time: '' ,
|
||||
children:[],
|
||||
});
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 50 },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
width: 120,
|
||||
search: { el: 'input', tooltip: '我是搜索提示' },
|
||||
},
|
||||
{
|
||||
prop: 'path',
|
||||
label: '路径',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: '排序',
|
||||
search: {
|
||||
// 自定义 search 显示内容
|
||||
render: ({ searchParam }) => {
|
||||
return (
|
||||
<div class='flx-center'>
|
||||
<el-input vModel_trim={searchParam.minAge} placeholder='最小排序' />
|
||||
<span class='mr10 ml10'>-</span>
|
||||
<el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '资源类型',
|
||||
// 字典数据（本地数据）
|
||||
//enum: dictStore.getDictData('type'),
|
||||
search: { el: 'select', props: { filterable: true } },
|
||||
//fieldNames: { label: 'label', value: 'resourceType' },
|
||||
},
|
||||
{
|
||||
prop: 'route_Name',
|
||||
label: '路由名称',
|
||||
search: { el: 'input' },
|
||||
},
|
||||
{
|
||||
prop: 'create_Time',
|
||||
label: '创建时间',
|
||||
width: 180,
|
||||
search: {
|
||||
el: 'date-picker',
|
||||
span: 1,
|
||||
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
|
||||
defaultValue: ['2024-11-12', '2024-12-12'],}
|
||||
},
|
||||
{
|
||||
prop: 'update_Time',
|
||||
label: '更新时间',
|
||||
width: 180,
|
||||
search: {
|
||||
el: 'date-picker',
|
||||
span: 1,
|
||||
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
|
||||
defaultValue: ['2024-11-12', '2024-12-12'],}
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
|
||||
])
|
||||
// 打开 drawer(新增、查看、编辑)
|
||||
// 打开新增对话框
|
||||
const openAddDialog = () => {
|
||||
dialogForm.value = {
|
||||
id: '',
|
||||
name: '',
|
||||
path: '',
|
||||
sort: 0,
|
||||
type: '',
|
||||
remark: '',
|
||||
route_Name: '',
|
||||
create_Time: '' ,
|
||||
update_Time: '' ,
|
||||
children: [],
|
||||
};
|
||||
isEditMode.value = true;
|
||||
dialogTitle.value = '新增菜单';
|
||||
dialogFormVisible.value = true; // 打开对话框
|
||||
};
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
if (isEditMode.value) {
|
||||
const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
|
||||
if (index !== -1) {
|
||||
dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
|
||||
resourceData.value[index] = { ...dialogForm.value }; // 更新资源
|
||||
}
|
||||
} else {
|
||||
|
||||
resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
|
||||
}
|
||||
dialogFormVisible.value = false; // 关闭对话框
|
||||
};
|
||||
// 打开编辑对话框
|
||||
const openEditDialog = (resource: Resource.ResResourceList) => {
|
||||
dialogForm.value = { ...resource }; // 复制资源数据以便编辑
|
||||
isEditMode.value = true; // 设置为编辑模式
|
||||
dialogTitle.value = '编辑资源';
|
||||
dialogFormVisible.value = true; // 显示对话框
|
||||
};
|
||||
//选中
|
||||
// 处理选择变化
|
||||
const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
|
||||
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
|
||||
|
||||
};
|
||||
//批量删除
|
||||
const handleDelList =()=>{
|
||||
resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
|
||||
multipleSelection.value = []; // Clear selected rows
|
||||
ElMessage.success("批量删除成功");
|
||||
}
|
||||
// 删除资源
|
||||
const deleteResource = (params: Resource.ResResourceList) => {
|
||||
ElMessageBox.confirm(
|
||||
`是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `删除${params.name}成功!`
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
const formatDate = (timestamp: string|number|Date) => {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user