角色页面中增加了新增与删除角色时调用后端的过程;对显示效果进行了微调

This commit is contained in:
GYYM
2024-10-24 13:24:54 +08:00
parent 3af786876e
commit 3c11b85ce3
7 changed files with 54 additions and 27 deletions

View File

@@ -20,7 +20,7 @@ export const getRoleList = (params: Role.ReqRoleParams) => {
// 新增角色
export const addRole = (params: { id: string }) => {
return http.post(`${rePrefix}/role/add`, params)
return http.post(`/RoleList_Add`, params)
}
// 批量添加角色
@@ -35,7 +35,7 @@ export const editRole = (params: { id: string }) => {
// 删除角色
export const deleteRole = (params: { id: string[] }) => {
return http.post(`${rePrefix}/role/delete`, params)
return http.post(`/RoleList_Del`, params)
}
// 切换角色状态

View File

@@ -3,13 +3,13 @@
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
<div>
<el-form :model="data">
<el-form-item label="角色类型名称" :label-width="100">
<el-input v-model="data.rolename" placeholder="请输入类型名称" autocomplete="off" />
<el-form-item label="名称" :label-width="100">
<el-input v-model="data.rolename" placeholder="请输入名称" autocomplete="off" />
</el-form-item>
<el-form-item label="角色类型编码" :label-width="100">
<el-input v-model="data.id" placeholder="请输入角色类型编码" autocomplete="off" />
<el-form-item label="编码" :label-width="100">
<el-input v-model="data.id" placeholder="请输入编码" autocomplete="off" />
</el-form-item>
<el-form-item label="角色类型状态" :label-width="100">
<el-form-item label="状态" :label-width="100">
<el-switch
v-model=value
inline-prompt
@@ -18,15 +18,15 @@
inactive-text="禁用"
/>
</el-form-item>
<el-form-item label="角色类型备注" :label-width="100">
<el-input v-model="data.describe" placeholder="请输入备注" autocomplete="off" />
<el-form-item label="备注" :label-width="100">
<el-input v-model="data.describe" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleCancel">
<el-button type="primary" @click="handleOK">
保存
</el-button>
</div>
@@ -38,8 +38,11 @@
<script lang="ts" setup>
import { ref,computed } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
import {
addRole,
} from '@/api/role/role'
const {dialogVisible,title,data} = defineProps<{
const {dialogVisible,title,data,updataList} = defineProps<{
dialogVisible:boolean;
title:string;
data:{
@@ -48,10 +51,15 @@
status:number;
describe:string;
}
updataList:Function
}>();
const value = computed({
get: () => data.status === 1,
get: () => {
if(title === '新增角色')
return true
data.status === 1
},
set: (value: boolean) => data.status = value ? 1 : 0
})
@@ -63,4 +71,14 @@
emit('update:visible',false)
}
const handleOK = () => {
addRole(data).then(res => {
if(res.code === "200")
ElMessage.success(res.message)
updataList()
})
emit('update:visible',false)
}
</script>

View File

@@ -8,11 +8,11 @@
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增角色')">新增角色</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出角色数据</el-button>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增角色')">新增</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除角色
批量删除
</el-button>
</template>
<!-- 表格操作 -->
@@ -28,6 +28,7 @@
:dialogVisible = roleUnitVisible
:title = roleUnitTitle
:data = roleUnitData
:updataList = "updataList"
@update:visible="roleUnitVisible = $event"
/>
<permissionUnit
@@ -81,6 +82,8 @@
//const roleData = roleDataList
const roleData = ref<Role.ResRoleList[]>([])
function updataList() {
getRoleList({
id: '',
rolename: '',
@@ -91,8 +94,13 @@
}).then(res => {
if(res.code == '200') {
roleData.value = res.data.list
console.log(11111);
}
})
}
updataList()
// ProTable 实例
const proTable = ref<ProTableInstance>()
@@ -166,6 +174,7 @@
const deleteAccount = async (params: Role.ResRoleList) => {
await useHandleData(deleteRole, { id: [params.id] }, `删除【${params.rolename}】角色`)
proTable.value?.getTableList()
updataList()
}
// 批量删除角色信息

View File

@@ -7,11 +7,11 @@
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增用户')">新增用户</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增用户')">新增</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除角色
批量删除
</el-button>
</template>
<!-- 表格操作 -->

View File

@@ -8,10 +8,10 @@
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增设备</el-button>
<el-button type='primary' :icon='Download' plain >导出设备数据</el-button>
<el-button type='primary' :icon='CirclePlus' >新增</el-button>
<el-button type='primary' :icon='Download' plain >导出数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除设备
批量删除
</el-button>
</template>
<!-- 表格操作 -->

View File

@@ -8,10 +8,10 @@
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增检测脚本</el-button>
<el-button type='primary' :icon='Download' plain >导出脚本数据</el-button>
<el-button type='primary' :icon='CirclePlus' >新增</el-button>
<el-button type='primary' :icon='Download' plain >导出数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除脚本
批量删除
</el-button>
</template>
<!-- 表格操作 -->

View File

@@ -8,10 +8,10 @@
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增检测源</el-button>
<el-button type='primary' :icon='Download' plain >导出检测源数据</el-button>
<el-button type='primary' :icon='CirclePlus' >新增</el-button>
<el-button type='primary' :icon='Download' plain >导出数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除检测源
批量删除
</el-button>
</template>
<!-- 表格操作 -->