ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色管理

Browse Source
This commit is contained in:
sjl
2024-11-14 11:34:25 +08:00
parent 44e7598b68
commit 39cbe0ff35
19 changed files with 873 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/views/authority/resource/index.vue
View File

@@ -3,64 +3,41 @@
<ProTable
ref='proTable'
:columns='columns'
:data='resourceData'
@selection-change="handleSelectionChange"
type="selection"
:pagination="false"
:request-api='getFunctionList'
>
<!-- :data='userData' -->
<!-- 表格 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"
>
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除
</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>
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
<ResourcePopup :refresh-table='proTable?.getTableList' ref='resourcePopup' />
</template>
<script setup lang='tsx' name='useProTable'>
import { defineComponent,ref ,reactive} from 'vue'
import { ref ,reactive} from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { type Function } from '@/api/function/interface'
import ProTable from '@/components/ProTable/index.vue'
import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
import resourceDataList from '@/api/function/functionExample'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
import { useDictStore } from '@/stores/modules/dict'
import ResourcePopup from './components/resourcePopup.vue'
import {deleteFunction,getFunctionList} from '@/api/function/index.ts'
const dictStore = useDictStore()
let multipleSelection = ref<string[]>([]);
const resourceData = resourceDataList
const dialogFormVisible = ref(false)
const isEditMode = ref(false);
const dialogTitle = ref('新增菜单')
const dialogForm = ref<Function.ResFunction>({
id: '',
pid:'',
pids:'',
name: '',
code:'',
path:'',
icon:'',
sort:100,
type:0,
remark: '',
state:1,
children:[],
});
const resourcePopup = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
@@ -105,102 +82,26 @@
},
{ prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
])
// 打开 drawer(新增、查看、编辑)
// 打开新增对话框
const openAddDialog = () => {
dialogForm.value = {
id: '',
pid:'',
pids:'',
name: '',
code:'',
path:'',
icon:'',
sort:100,
remark: '',
state:1,
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 =()=>{
// ElMessageBox.confirm(
// `是否删除所选菜单信息？`, // 使用模板字符串来插值
// '温馨提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }
// )
// .then(() => {
// resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
// multipleSelection.value = []; // Clear selected rows
// ElMessage.success("批量删除成功");
// })
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Function.ResFunction> = {}) => {
resourcePopup.value?.open(titleType, row)
}
// 删除用户信息
const handleDelete = async (params: Function.ResFunction) => {
await useHandleData(deleteFunction, [params.id] , `删除【${params.name}】用户`)
proTable.value?.getTableList()
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteFunction, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除资源
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>