update: 用户管理添加按钮权限

This commit is contained in:
easy 2023-02-16 14:47:40 +08:00
parent b3459c4f97
commit d7754789bf
2 changed files with 102 additions and 23 deletions

View File

@ -110,11 +110,13 @@
placeholder="请选择角色" placeholder="请选择角色"
:options="form.roleOptions" :options="form.roleOptions"
></a-select> ></a-select>
<span <PermissionButton
class="add-item" :uhasPermission="`${rolePermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')" @click="form.clickAddItem('roleIdList', 'Role')"
><AIcon type="PlusOutlined" class="add-item"
/></span> >
<AIcon type="PlusOutlined" />
</PermissionButton>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
@ -132,13 +134,13 @@
{{ name }} {{ name }}
</template> </template>
</a-tree-select> </a-tree-select>
<span <PermissionButton
:uhasPermission="`${deptPermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')"
class="add-item" class="add-item"
@click=" >
form.clickAddItem('orgIdList', 'Department') <AIcon type="PlusOutlined" />
" </PermissionButton>
><AIcon type="PlusOutlined"
/></span>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -186,7 +188,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { FormInstance, message, TreeProps } from 'ant-design-vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import { FormInstance, message } from 'ant-design-vue';
// import Progress from './Progress.vue'; // import Progress from './Progress.vue';
import { import {
validateField_api, validateField_api,
@ -201,6 +204,9 @@ import { Rule } from 'ant-design-vue/es/form';
import { DefaultOptionType } from 'ant-design-vue/es/vc-tree-select/TreeSelect'; import { DefaultOptionType } from 'ant-design-vue/es/vc-tree-select/TreeSelect';
import { AxiosResponse } from 'axios'; import { AxiosResponse } from 'axios';
const deptPermission = 'system/Department';
const rolePermission = 'system/Role';
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm']);
// //
const dialog = reactive({ const dialog = reactive({
@ -407,7 +413,7 @@ type optionType = {
.ant-select { .ant-select {
flex: 1; flex: 1;
} }
.add-item { .ant-btn {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 1px solid #1d39c4; border: 1px solid #1d39c4;

View File

@ -11,12 +11,19 @@
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
> >
<template #headerTitle> <template #headerTitle>
<a-button <!-- <a-button
type="primary" type="primary"
@click="table.openDialog('add')" @click="table.openDialog('add')"
style="margin-right: 10px" style="margin-right: 10px"
><AIcon type="PlusOutlined" />新增</a-button ><AIcon type="PlusOutlined" />新增</a-button
> -->
<PermissionButton
:uhasPermission="`${permission}:add`"
type="primary"
@click="table.openDialog('add')"
> >
<AIcon type="PlusOutlined" />新增
</PermissionButton>
</template> </template>
<template #type="slotProps"> <template #type="slotProps">
{{ slotProps.type.name }} {{ slotProps.type.name }}
@ -33,7 +40,7 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip> <!-- <a-tooltip>
<template #title>编辑</template> <template #title>编辑</template>
<a-button <a-button
style="padding: 0" style="padding: 0"
@ -42,9 +49,8 @@
> >
<AIcon type="EditOutlined" /> <AIcon type="EditOutlined" />
</a-button> </a-button>
</a-tooltip> </a-tooltip> -->
<!-- <a-popconfirm
<a-popconfirm
:title="`确定${slotProps.status ? '禁用' : '启用'}吗?`" :title="`确定${slotProps.status ? '禁用' : '启用'}吗?`"
ok-text="确定" ok-text="确定"
cancel-text="取消" cancel-text="取消"
@ -59,8 +65,8 @@
<play-circle-outlined v-else /> <play-circle-outlined v-else />
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</a-popconfirm> </a-popconfirm> -->
<a-tooltip> <!-- <a-tooltip>
<template #title>重置密码</template> <template #title>重置密码</template>
<a-button <a-button
style="padding: 0" style="padding: 0"
@ -69,8 +75,8 @@
> >
<AIcon type="icon-zhongzhimima" /> <AIcon type="icon-zhongzhimima" />
</a-button> </a-button>
</a-tooltip> </a-tooltip> -->
<a-popconfirm <!-- <a-popconfirm
title="确认删除" title="确认删除"
ok-text="确定" ok-text="确定"
cancel-text="取消" cancel-text="取消"
@ -89,7 +95,60 @@
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</a-popconfirm> </a-popconfirm> -->
<PermissionButton
:uhasPermission="`${permission}:update`"
type="link"
:tooltip="{
title: '编辑',
}"
@click="table.openDialog('edit')"
>
<AIcon type="EditOutlined" />
</PermissionButton>
<PermissionButton
:uhasPermission="`${permission}:action`"
type="link"
:tooltip="{
title: `${slotProps.status ? '禁用' : '启用'}`,
}"
:popConfirm="{
title: `确定${
slotProps.status ? '禁用' : '启用'
}`,
onConfirm: () => table.changeStatus(slotProps),
}"
>
<stop-outlined v-if="slotProps.status" />
<play-circle-outlined v-else />
</PermissionButton>
<PermissionButton
:uhasPermission="`${permission}:update`"
type="link"
:tooltip="{
title: '重置密码',
}"
@click="table.openDialog('reset', slotProps)"
>
<AIcon type="icon-zhongzhimima" />
</PermissionButton>
<PermissionButton
type="link"
:uhasPermission="`${permission}:delete`"
:tooltip="{
title: slotProps.status
? '请先禁用,再删除'
: '删除',
}"
:popConfirm="{
title: `确认删除`,
onConfirm: () => table.clickDel(slotProps),
}"
:disabled="slotProps.status"
>
<AIcon type="DeleteOutlined" />
</PermissionButton>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -101,6 +160,7 @@
</template> </template>
<script setup lang="ts" name="UserMange"> <script setup lang="ts" name="UserMange">
import PermissionButton from '@/components/PermissionButton/index.vue';
import EditUserDialog from './components/EditUserDialog.vue'; import EditUserDialog from './components/EditUserDialog.vue';
import { import {
getUserType_api, getUserType_api,
@ -110,6 +170,9 @@ import {
} from '@/api/system/user'; } from '@/api/system/user';
import { StopOutlined, PlayCircleOutlined } from '@ant-design/icons-vue'; import { StopOutlined, PlayCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/User';
const query = { const query = {
columns: [ columns: [
{ {
@ -292,5 +355,15 @@ type modalType = '' | 'add' | 'edit' | 'reset';
<style lang="less" scoped> <style lang="less" scoped>
.user-container { .user-container {
padding: 24px; padding: 24px;
:deep(.ant-table-tbody) {
.ant-table-cell {
.ant-space-item {
.ant-btn-link {
padding: 0;
}
}
}
}
} }
</style> </style>