0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
JiangQiming 2023-02-16 18:05:23 +08:00
parent 7bf810065f eb2e68e0ea
commit 646e586119
9 changed files with 339 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/PermissionButton/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<template v-if="isPermission"> <template v-if="isPermission">
<template v-if="popConfirm"> <template v-if="popConfirm">
<a-popconfirm v-bind="popConfirm" @confirm="conform" :disabled="!isPermission || props.disabled"> <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
<a-tooltip v-if="tooltip" v-bind="tooltip"> <a-tooltip v-if="tooltip" v-bind="tooltip">
<slot v-if="noButton"></slot> <slot v-if="noButton"></slot>
<a-button v-else v-bind="_buttonProps" :disabled="_isPermission" > <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" >
@ -106,9 +106,9 @@ const _isPermission = computed(() =>
: true : true
) )
const conform = (e: MouseEvent) => { // const conform = (e: MouseEvent) => {
props.popConfirm?.onConfirm?.(e) // props.popConfirm?.onConfirm?.(e)
} // }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

84
src/views/system/Department/components/LeftTree.vue
View File

@ -10,9 +10,17 @@
<search-outlined /> <search-outlined />
</template> </template>
</a-input> </a-input>
<a-button type="primary" @click="openDialog()" class="add-btn"> <div class="add-btn">
新增 <PermissionButton
</a-button> type="primary"
class="add-btn"
:uhasPermission="`${permission}:add`"
@click="openDialog()"
>
新增
</PermissionButton>
</div>
<a-tree <a-tree
:tree-data="treeData" :tree-data="treeData"
v-model:selected-keys="selectedKeys" v-model:selected-keys="selectedKeys"
@ -22,13 +30,13 @@
<template #title="{ name, data }"> <template #title="{ name, data }">
<span>{{ name }}</span> <span>{{ name }}</span>
<span class="func-btns" @click="(e) => e.stopPropagation()"> <span class="func-btns" @click="(e) => e.stopPropagation()">
<a-tooltip> <!-- <a-tooltip>
<template #title>编辑</template> <template #title>编辑</template>
<a-button style="padding: 0" type="link"> <a-button style="padding: 0" type="link">
<edit-outlined @click="openDialog(data)" /> <edit-outlined @click="openDialog(data)" />
</a-button> </a-button>
</a-tooltip> </a-tooltip> -->
<a-tooltip> <!-- <a-tooltip>
<template #title>新增子组织</template> <template #title>新增子组织</template>
<a-button style="padding: 0" type="link"> <a-button style="padding: 0" type="link">
<plus-circle-outlined <plus-circle-outlined
@ -42,9 +50,9 @@
" "
/> />
</a-button> </a-button>
</a-tooltip> </a-tooltip> -->
<a-popconfirm <!-- <a-popconfirm
title="确认删除" title="确认删除"
ok-text="确定" ok-text="确定"
cancel-text="取消" cancel-text="取消"
@ -56,7 +64,45 @@
<delete-outlined /> <delete-outlined />
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</a-popconfirm> </a-popconfirm> -->
<PermissionButton
:uhasPermission="`${permission}:update`"
type="link"
:tooltip="{
title: '新增子组织',
}"
@click="openDialog(data)"
>
<AIcon type="EditOutlined" />
</PermissionButton>
<PermissionButton
:uhasPermission="`${permission}:add`"
type="link"
:tooltip="{
title: '新增子组织',
}"
@click="
openDialog({
...data,
id: '',
parentId: data.id,
})
"
>
<AIcon type="PlusCircleOutlined" />
</PermissionButton>
<PermissionButton
type="link"
:uhasPermission="`${permission}:delete`"
:tooltip="{ title: '删除' }"
:popConfirm="{
title: `确定要删除吗`,
onConfirm: () => delDepartment(data.id),
}"
>
<AIcon type="DeleteOutlined" />
</PermissionButton>
</span> </span>
</template> </template>
</a-tree> </a-tree>
@ -71,19 +117,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PermissionButton from '@/components/PermissionButton/index.vue';
import { getTreeData_api, delDepartment_api } from '@/api/system/department'; import { getTreeData_api, delDepartment_api } from '@/api/system/department';
import { debounce, cloneDeep, omit } from 'lodash-es'; import { debounce, cloneDeep, omit } from 'lodash-es';
import { ArrayToTree } from '@/utils/utils'; import { ArrayToTree } from '@/utils/utils';
import EditDepartmentDialog from './EditDepartmentDialog.vue'; import EditDepartmentDialog from './EditDepartmentDialog.vue';
import { import { SearchOutlined } from '@ant-design/icons-vue';
SearchOutlined,
EditOutlined,
PlusCircleOutlined,
DeleteOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/Department';
const save = useRoute().query.save; const save = useRoute().query.save;
const emits = defineEmits(['change']); const emits = defineEmits(['change']);
const searchValue = ref(''); // 搜索内容 const searchValue = ref(''); // 搜索内容
@ -195,7 +239,10 @@ function init() {
.add-btn { .add-btn {
margin: 24px 0; margin: 24px 0;
width: 100%;
:deep(.ant-btn-primary) {
width: 100%;
}
} }
:deep(.ant-tree-treenode) { :deep(.ant-tree-treenode) {
@ -210,8 +257,9 @@ function init() {
.func-btns { .func-btns {
display: none; display: none;
font-size: 14px; font-size: 14px;
.ant-btn { .ant-btn-link {
height: 22px; padding: 0 4px;
height: 24px;
} }
} }
&:hover { &:hover {

75
src/views/system/Department/device/index.vue
View File

@ -14,29 +14,38 @@
> >
<template #headerTitle> <template #headerTitle>
<a-space> <a-space>
<a-button type="primary" @click="table.clickAdd"> <PermissionButton
<plus-outlined />资产分配 :uhasPermission="`${permission}:assert`"
</a-button> type="primary"
@click="table.clickAdd"
>
<AIcon type="PlusOutlined" />资产分配
</PermissionButton>
<a-dropdown trigger="hover"> <a-dropdown trigger="hover">
<a-button>批量操作</a-button> <a-button>批量操作</a-button>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item> <a-menu-item>
<a-popconfirm <PermissionButton
title="是否批量解除绑定" :uhasPermission="`${permission}:bind`"
ok-text="确定" :popConfirm="{
cancel-text="取消" title: `是否批量解除绑定`,
@confirm="table.clickUnBind()" onConfirm: () =>
table.clickUnBind(),
}"
> >
<a-button> <AIcon
<DisconnectOutlined /> 批量解绑 type="DisconnectOutlined"
</a-button> />批量解绑
</a-popconfirm> </PermissionButton>
</a-menu-item> </a-menu-item>
<a-menu-item> <a-menu-item>
<a-button @click="table.clickEdit()"> <PermissionButton
<EditOutlined /> 批量编辑 :uhasPermission="`${permission}:assert`"
</a-button> @click="table.clickEdit()"
>
<AIcon type="EditOutlined" />批量编辑
</PermissionButton>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
@ -102,21 +111,22 @@
</a-row> </a-row>
</template> </template>
<template #actions> <template #actions>
<a-button <PermissionButton
:uhasPermission="`${permission}:assert`"
@click="table.clickEdit(slotProps)" @click="table.clickEdit(slotProps)"
style="margin-right: 10px"
> >
<AIcon type="EditOutlined" /> <AIcon type="EditOutlined" />
</a-button> </PermissionButton>
<a-popconfirm
title="是否解除绑定" <PermissionButton
ok-text="确定" :uhasPermission="`${permission}:bind`"
cancel-text="取消" :popConfirm="{
@confirm="table.clickUnBind(slotProps)" title: `是否解除绑定`,
><a-button> onConfirm: () => table.clickUnBind(slotProps),
<AIcon type="DisconnectOutlined" /> }"
</a-button> >
</a-popconfirm> <AIcon type="DisconnectOutlined" />
</PermissionButton>
</template> </template>
</CardBox> </CardBox>
</template> </template>
@ -143,11 +153,8 @@
</template> </template>
<script setup lang="ts" name="device"> <script setup lang="ts" name="device">
import { import PermissionButton from '@/components/PermissionButton/index.vue';
PlusOutlined,
EditOutlined,
DisconnectOutlined,
} from '@ant-design/icons-vue';
import AddDeviceOrProductDialog from '../components/AddDeviceOrProductDialog.vue'; import AddDeviceOrProductDialog from '../components/AddDeviceOrProductDialog.vue';
import EditPermissionDialog from '../components/EditPermissionDialog.vue'; import EditPermissionDialog from '../components/EditPermissionDialog.vue';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
@ -163,6 +170,8 @@ import { intersection } from 'lodash-es';
import { dictType } from '../typing.d.ts'; import { dictType } from '../typing.d.ts';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/Department';
const emits = defineEmits(['update:bindBool']); const emits = defineEmits(['update:bindBool']);
const props = defineProps<{ const props = defineProps<{
parentId: string; parentId: string;
@ -453,7 +462,7 @@ nextTick(() => {
} }
} }
.card-tools { .card-tools {
.ant-btn { span {
color: #252525; color: #252525;
} }
} }

5
src/views/system/Department/index.vue
View File

@ -55,8 +55,9 @@ const openDeviceBind = () => {
flex-basis: 300px; flex-basis: 300px;
} }
.right { .right {
flex: 1 1 auto; width: calc(100% - 300px);
.ant-tabs-nav {
.ant-tabs-nav-wrap {
padding-left: 24px; padding-left: 24px;
} }
} }

94
src/views/system/Department/product/index.vue
View File

@ -14,29 +14,38 @@
> >
<template #headerTitle> <template #headerTitle>
<a-space> <a-space>
<a-button type="primary" @click="table.clickAdd"> <PermissionButton
<plus-outlined />资产分配 :uhasPermission="`${permission}:assert`"
</a-button> type="primary"
@click="table.clickAdd"
>
<AIcon type="PlusOutlined" />资产分配
</PermissionButton>
<a-dropdown trigger="hover"> <a-dropdown trigger="hover">
<a-button>批量操作</a-button> <a-button>批量操作</a-button>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item> <a-menu-item>
<a-popconfirm <PermissionButton
title="是否批量解除绑定" :uhasPermission="`${permission}:bind`"
ok-text="确定" :popConfirm="{
cancel-text="取消" title: `是否批量解除绑定`,
@confirm="table.clickUnBind()" onConfirm: () =>
table.clickUnBind(),
}"
> >
<a-button> <AIcon
<DisconnectOutlined /> 批量解绑 type="DisconnectOutlined"
</a-button> />批量解绑
</a-popconfirm> </PermissionButton>
</a-menu-item> </a-menu-item>
<a-menu-item> <a-menu-item>
<a-button @click="table.clickEdit()"> <PermissionButton
<EditOutlined /> 批量编辑 :uhasPermission="`${permission}:assert`"
</a-button> @click="()=>table.clickEdit()"
>
<AIcon type="EditOutlined" />批量编辑
</PermissionButton>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
@ -102,21 +111,22 @@
</a-row> </a-row>
</template> </template>
<template #actions> <template #actions>
<a-button <PermissionButton
@click="table.clickEdit(slotProps)" :uhasPermission="`${permission}:assert`"
style="margin-right: 10px" @click="() => table.clickEdit(slotProps)"
> >
<AIcon type="EditOutlined" /> <AIcon type="EditOutlined" />
</a-button> </PermissionButton>
<a-popconfirm
title="是否解除绑定" <PermissionButton
ok-text="确定" :uhasPermission="`${permission}:bind`"
cancel-text="取消" :popConfirm="{
@confirm="table.clickUnBind(slotProps)" title: `是否解除绑定`,
><a-button> onConfirm: () => table.clickUnBind(slotProps),
<AIcon type="DisconnectOutlined" /> }"
</a-button> >
</a-popconfirm> <AIcon type="DisconnectOutlined" />
</PermissionButton>
</template> </template>
</CardBox> </CardBox>
</template> </template>
@ -138,17 +148,17 @@
asset-type="product" asset-type="product"
@confirm="table.refresh" @confirm="table.refresh"
/> />
<NextDialog ref="nextDialogRef" @confirm="emits('openDeviceBind')" /> <NextDialog
ref="nextDialogRef"
@confirm="emits('openDeviceBind')"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts" name="product"> <script setup lang="ts" name="product">
import { import PermissionButton from '@/components/PermissionButton/index.vue';
PlusOutlined,
EditOutlined,
DisconnectOutlined,
} from '@ant-design/icons-vue';
import AddDeviceOrProductDialog from '../components/AddDeviceOrProductDialog.vue'; import AddDeviceOrProductDialog from '../components/AddDeviceOrProductDialog.vue';
import EditPermissionDialog from '../components/EditPermissionDialog.vue'; import EditPermissionDialog from '../components/EditPermissionDialog.vue';
import NextDialog from '../components/NextDialog.vue'; import NextDialog from '../components/NextDialog.vue';
@ -164,7 +174,9 @@ import { intersection } from 'lodash-es';
import { dictType } from '../typing.d.ts'; import { dictType } from '../typing.d.ts';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const emits = defineEmits(['openDeviceBind']) const permission = 'system/Department';
const emits = defineEmits(['openDeviceBind']);
const props = defineProps<{ const props = defineProps<{
parentId: string; parentId: string;
}>(); }>();
@ -363,6 +375,8 @@ const table = {
} }
}, },
clickAdd: () => { clickAdd: () => {
console.log(222)
console.log(addDialogRef.value)
addDialogRef.value && addDialogRef.value.openDialog(); addDialogRef.value && addDialogRef.value.openDialog();
}, },
clickEdit: (row?: any) => { clickEdit: (row?: any) => {
@ -405,10 +419,10 @@ const table = {
tableRef.value.reload(); tableRef.value.reload();
}); });
}, },
addConfirm: ()=>{ addConfirm: () => {
table.refresh() table.refresh();
nextDialogRef.value && nextDialogRef.value.openDialog() nextDialogRef.value && nextDialogRef.value.openDialog();
} },
}; };
const addDialogRef = ref(); const addDialogRef = ref();
@ -428,7 +442,7 @@ table.init();
} }
} }
.card-tools { .card-tools {
.ant-btn { span {
color: #252525; color: #252525;
} }
} }

46
src/views/system/Department/user/index.vue
View File

@ -15,23 +15,24 @@
model="TABLE" model="TABLE"
> >
<template #headerTitle> <template #headerTitle>
<a-button <PermissionButton
type="primary" type="primary"
:uhasPermission="`${permission}:bind-user`"
@click="table.openDialog" @click="table.openDialog"
style="margin-right: 10px" style="margin-right: 15px;"
> >
<AIcon type="PlusOutlined" />绑定用户 <AIcon type="PlusOutlined" />绑定用户
</a-button> </PermissionButton>
<a-popconfirm <div style="display: inline-block;width: 12px;height: 1px;"></div>
title="是否解除绑定" <PermissionButton
ok-text="确定" :uhasPermission="`${permission}:bind`"
cancel-text="取消" :popConfirm="{
@confirm="table.unBind()" title: `是否解除绑定`,
onConfirm: () => table.unBind(),
}"
> >
<a-button <AIcon type="DisconnectOutlined" />批量解绑
><AIcon type="DisconnectOutlined" />批量解绑</a-button </PermissionButton>
>
</a-popconfirm>
</template> </template>
<template #status="slotProps"> <template #status="slotProps">
<BadgeStatus <BadgeStatus
@ -45,16 +46,16 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-popconfirm <PermissionButton
title="是否解除绑定" type="link"
ok-text="确定" :uhasPermission="`${permission}:bind`"
cancel-text="取消" :popConfirm="{
@confirm="table.unBind(slotProps)" title: `是否解除绑定`,
onConfirm: () => table.unBind(slotProps),
}"
> >
<a-button style="padding: 0" type="link"> <AIcon type="DisconnectOutlined" />
<AIcon type="DisconnectOutlined" /> </PermissionButton>
</a-button>
</a-popconfirm>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -70,10 +71,13 @@
</template> </template>
<script setup lang="ts" name="user"> <script setup lang="ts" name="user">
import PermissionButton from '@/components/PermissionButton/index.vue';
import AddBindUserDialog from './components/addBindUserDialog.vue'; import AddBindUserDialog from './components/addBindUserDialog.vue';
import { getBindUserList_api, unBindUser_api } from '@/api/system/department'; import { getBindUserList_api, unBindUser_api } from '@/api/system/department';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/Department';
const addDialogRef = ref(); const addDialogRef = ref();
const props = defineProps<{ const props = defineProps<{

71
src/views/system/Role/index.vue
View File

@ -10,36 +10,38 @@
:params="query.params" :params="query.params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="table.clickAdd" <PermissionButton
><plus-outlined />新增</a-button type="primary"
:uhasPermission="`${permission}:add`"
@click="table.clickAdd"
> >
<AIcon type="PlusOutlined" />新增
</PermissionButton>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip> <PermissionButton
<template #title>编辑</template> :uhasPermission="`${permission}:update`"
<a-button type="link"
style="padding: 0" :tooltip="{
type="link" title: '编辑',
@click="table.clickEdit(slotProps)" }"
> @click="table.clickEdit(slotProps)"
<edit-outlined />
</a-button>
</a-tooltip>
<a-popconfirm
title="确定要删除吗？"
ok-text="确定"
cancel-text="取消"
@confirm="table.clickDel(slotProps)"
> >
<a-tooltip> <AIcon type="EditOutlined" />
<template #title>删除</template> </PermissionButton>
<a-button style="padding: 0" type="link"> <PermissionButton
<delete-outlined /> type="link"
</a-button> :uhasPermission="`${permission}:delete`"
</a-tooltip> :tooltip="{ title: '删除' }"
</a-popconfirm> :popConfirm="{
title: `确定要删除吗`,
onConfirm: () => table.clickDel(slotProps),
}"
>
<AIcon type="DeleteOutlined" />
</PermissionButton>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -51,14 +53,13 @@
</template> </template>
<script setup lang="ts" name="Role"> <script setup lang="ts" name="Role">
import { import PermissionButton from '@/components/PermissionButton/index.vue';
EditOutlined,
DeleteOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import AddDialog from './components/AddDialog.vue'; import AddDialog from './components/AddDialog.vue';
import { getRoleList_api, delRole_api } from '@/api/system/role'; import { getRoleList_api, delRole_api } from '@/api/system/role';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/Role';
const addDialogRef = ref(); // 新增弹窗实例 const addDialogRef = ref(); // 新增弹窗实例
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -143,4 +144,14 @@ nextTick(() => {
}); });
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.role-container {
:deep(.ant-table-cell) {
.ant-btn-link {
padding: 0;
}
}
}
</style>

34
src/views/system/User/components/EditUserDialog.vue
View File

@ -100,6 +100,7 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<!-- 还差页面权限 -->
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <a-col :span="12">
<a-form-item name="roleIdList" label="角色" class="flex"> <a-form-item name="roleIdList" label="角色" class="flex">
@ -110,11 +111,14 @@
placeholder="请选择角色" placeholder="请选择角色"
:options="form.roleOptions" :options="form.roleOptions"
></a-select> ></a-select>
<span
class="add-item" <PermissionButton
: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 +136,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 +190,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 +206,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({
@ -339,7 +347,7 @@ const form = reactive({
return; return;
} }
console.log(params); console.log(params);
api(params).then(() => { api(params).then(() => {
message.success('操作成功'); message.success('操作成功');
cb && cb(); cb && cb();
@ -407,7 +415,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;

93
src/views/system/User/index.vue
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>