mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-08 22:57:11 +08:00
Merge branch 'dev' of https://gitee.com/continew/continew-admin-ui into dev
This commit is contained in:
秋帆
@@ -59,7 +59,7 @@
|
||||
v-permission="['system:dept:delete']"
|
||||
status="danger"
|
||||
:title="record.isSystem ? '系统内置数据不能删除' : undefined"
|
||||
:disabled="record.disabled"
|
||||
:disabled="record.isSystem"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
|
||||
67
src/views/system/user/dept/RightMenu.vue
Normal file
67
src/views/system/user/dept/RightMenu.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<a-menu class="right-menu">
|
||||
<a-menu-item @click="onClick('add')">
|
||||
<template #icon><icon-plus-circle :size="16" :stroke-width="3" /></template>
|
||||
<span>新增</span>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item v-permission="['system:dept:update']" @click="onClick('update')">
|
||||
<template #icon><icon-edit :size="16" :stroke-width="3" /></template>
|
||||
<span>修改</span>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item v-permission="['system:dept:delete']" :title="data.isSystem ? '系统内置数据不能删除' : undefined" :disabled="data.isSystem" @click="onClick('delete')">
|
||||
<template #icon><icon-delete :size="16" :stroke-width="3" /></template>
|
||||
<span>删除</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { DeptResp } from '@/apis'
|
||||
|
||||
interface Props {
|
||||
data: DeptResp
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'on-menu-item-click', mode: string, data: DeptResp): void
|
||||
}>()
|
||||
|
||||
// 点击菜单项
|
||||
const onClick = (mode: string) => {
|
||||
emit('on-menu-item-click', mode, props.data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
padding: 4px;
|
||||
|
||||
.arco-menu-item {
|
||||
height: 34px;
|
||||
|
||||
&:not(.arco-menu-selected) {
|
||||
color: $color-text-1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
width: 120px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-border-2);
|
||||
box-sizing: border-box;
|
||||
|
||||
.arrow-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
225
src/views/system/user/dept/index.vue
Normal file
225
src/views/system/user/dept/index.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="left-tree">
|
||||
<div class="left-tree__search">
|
||||
<a-input v-model="inputValue" :placeholder="props.placeholder" allow-clear>
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="left-tree__container">
|
||||
<div class="left-tree__tree">
|
||||
<a-tree
|
||||
ref="treeRef"
|
||||
:data="(treeData as unknown as TreeNodeData[])"
|
||||
:field-names="{ key: 'id' }"
|
||||
show-line
|
||||
block-node
|
||||
default-expand-all
|
||||
:selected-keys="selectedKeys"
|
||||
@select="select"
|
||||
>
|
||||
<template #title="node">
|
||||
<a-trigger
|
||||
v-model:popup-visible="node.popupVisible"
|
||||
trigger="contextMenu"
|
||||
align-point
|
||||
animation-name="slide-dynamic-origin"
|
||||
auto-fit-transform-origin
|
||||
position="bl"
|
||||
scroll-to-close
|
||||
>
|
||||
<a-tooltip v-if="node.description" :content="node.description" background-color="rgb(var(--primary-6))" position="right">
|
||||
<div @contextmenu="onContextmenu(node)">{{ node.name }}</div>
|
||||
</a-tooltip>
|
||||
<div v-else @contextmenu="onContextmenu(node)">{{ node.name }}</div>
|
||||
<template #content>
|
||||
<RightMenu
|
||||
v-if="has.hasPermOr(['system:dept:update', 'system:dept:delete'])"
|
||||
:data="node"
|
||||
@on-menu-item-click="onMenuItemClick"
|
||||
/>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DeptAddModal ref="DeptAddModalRef" @save-success="getTreeData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import type { Message, Modal, TreeInstance, TreeNodeData } from '@arco-design/web-vue'
|
||||
import { mapTree } from 'xe-utils'
|
||||
import DeptAddModal from '../../dept/DeptAddModal.vue'
|
||||
import RightMenu from './RightMenu.vue'
|
||||
import { type DeptQuery, type DeptResp, deleteDept, listDept } from '@/apis'
|
||||
import has from '@/utils/has'
|
||||
|
||||
interface Props {
|
||||
placeholder?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: '请输入关键词'
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(e: 'node-click', keys: Array<any>): void
|
||||
}>()
|
||||
// 选中节点
|
||||
const selectedKeys = ref()
|
||||
const select = (keys: Array<any>) => {
|
||||
selectedKeys.value = keys
|
||||
emit('node-click', keys)
|
||||
}
|
||||
|
||||
const queryForm = reactive<DeptQuery>({
|
||||
sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
|
||||
})
|
||||
|
||||
interface TreeItem extends DeptResp {
|
||||
popupVisible: boolean
|
||||
}
|
||||
const treeRef = ref<TreeInstance>()
|
||||
const treeData = ref<TreeItem[]>([])
|
||||
const loading = ref(false)
|
||||
// 查询树列表
|
||||
const getTreeData = async (query: DeptQuery = { ...queryForm }) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await listDept(query)
|
||||
treeData.value = mapTree(data, (i) => ({
|
||||
...i,
|
||||
popupVisible: false,
|
||||
switcherIcon: (node: any) => {
|
||||
if (!node.isLeaf) {
|
||||
if (node.expanded) {
|
||||
return <icon-down />
|
||||
} else {
|
||||
return <icon-down />
|
||||
}
|
||||
}
|
||||
return <icon-idcard />
|
||||
}
|
||||
}))
|
||||
await nextTick(() => {
|
||||
treeRef.value?.expandAll(true)
|
||||
select([data[0].id])
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 树查询
|
||||
const inputValue = ref('')
|
||||
watch(inputValue, (val) => {
|
||||
queryForm.description = val
|
||||
getTreeData()
|
||||
})
|
||||
|
||||
// 保存当前右键的节点
|
||||
const contextmenuNode = ref<TreeItem | null>(null)
|
||||
const onContextmenu = (node: TreeItem) => {
|
||||
contextmenuNode.value = node
|
||||
}
|
||||
|
||||
// 关闭右键菜单弹框
|
||||
const closeRightMenuPopup = () => {
|
||||
if (contextmenuNode.value?.popupVisible) {
|
||||
contextmenuNode.value.popupVisible = false
|
||||
}
|
||||
}
|
||||
|
||||
const DeptAddModalRef = ref<InstanceType<typeof DeptAddModal>>()
|
||||
// 右键菜单项点击
|
||||
const onMenuItemClick = (mode: string, node: DeptResp) => {
|
||||
closeRightMenuPopup()
|
||||
if (mode === 'add') {
|
||||
DeptAddModalRef.value?.onAdd(node.id)
|
||||
} else if (mode === 'update') {
|
||||
DeptAddModalRef.value?.onUpdate(node.id)
|
||||
} else if (mode === 'delete') {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: `是否确定删除 [${node.name}]？`,
|
||||
hideCancel: false,
|
||||
okButtonProps: { status: 'danger' },
|
||||
onBeforeOk: async () => {
|
||||
try {
|
||||
const res = await deleteDept(node.id)
|
||||
if (res.success) {
|
||||
Message.success('删除成功')
|
||||
getTreeData()
|
||||
}
|
||||
return res.success
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-tree-node-title-text) {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node) {
|
||||
line-height: normal;
|
||||
border-radius: var(--border-radius-medium);
|
||||
&:hover {
|
||||
background-color: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.arco-tree-node-title {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tree-node-selected) {
|
||||
background-color: rgba(var(--primary-6), 0.1);
|
||||
&:hover {
|
||||
background-color: rgba(var(--primary-6), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.left-tree {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
&__search {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-bg-1);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
&__tree {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,25 +7,34 @@
|
||||
</slot>
|
||||
</a-space>
|
||||
</a-row>
|
||||
<a-row :gutter="16" class="h-full">
|
||||
<a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
|
||||
<a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-tree ref="treeRef" :data="deptList" :selected-keys="selectedKeys" default-expand-all show-line block-node
|
||||
@select="handleSelectDept">
|
||||
</a-tree>
|
||||
<a-row align="stretch" :gutter="14" class="h-full">
|
||||
<a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
|
||||
<DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20" class="h-full">
|
||||
<GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
|
||||
:disabled-column-keys="['username']" @refresh="search">
|
||||
<a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['username']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #custom-left>
|
||||
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
|
||||
style="width: 150px" @change="search" />
|
||||
<a-select
|
||||
v-model="queryForm.status"
|
||||
:options="DisEnableStatusList"
|
||||
placeholder="请选择状态"
|
||||
allow-clear
|
||||
style="width: 150px"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</template>
|
||||
<template #custom-right>
|
||||
@@ -84,14 +93,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TreeInstance } from '@arco-design/web-vue'
|
||||
import DeptTree from './dept/index.vue'
|
||||
import UserAddModal from './UserAddModal.vue'
|
||||
import UserDetailDrawer from './UserDetailDrawer.vue'
|
||||
import UserResetPwdModal from './UserResetPwdModal.vue'
|
||||
import { type UserQuery, type UserResp, deleteUser, exportUser, listUser } from '@/apis'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
import { useDownload, useTable } from '@/hooks'
|
||||
import { useDept } from '@/hooks/app'
|
||||
import { isMobile } from '@/utils'
|
||||
import getAvatar from '@/utils/avatar'
|
||||
import has from '@/utils/has'
|
||||
@@ -100,7 +108,7 @@ import { DisEnableStatusList } from '@/constant/common'
|
||||
defineOptions({ name: 'SystemUser' })
|
||||
|
||||
const queryForm = reactive<UserQuery>({
|
||||
sort: ['createTime,desc']
|
||||
sort: ['t1.createTime,desc']
|
||||
})
|
||||
|
||||
const {
|
||||
@@ -170,25 +178,6 @@ const onExport = () => {
|
||||
useDownload(() => exportUser(queryForm))
|
||||
}
|
||||
|
||||
const treeRef = ref<TreeInstance>()
|
||||
const deptName = ref('')
|
||||
// 查询部门列表
|
||||
const { deptList, getDeptList } = useDept({
|
||||
onSuccess: () => {
|
||||
nextTick(() => {
|
||||
treeRef.value?.expandAll(true)
|
||||
queryForm.deptId = deptList.value[0]?.key as string
|
||||
search()
|
||||
})
|
||||
}
|
||||
})
|
||||
const selectedKeys = computed(() => {
|
||||
return [queryForm.deptId ? queryForm.deptId : '']
|
||||
})
|
||||
watch(deptName, (val) => {
|
||||
getDeptList(val)
|
||||
})
|
||||
|
||||
// 根据选中部门查询
|
||||
const handleSelectDept = (keys: Array<any>) => {
|
||||
queryForm.deptId = keys.length === 1 ? keys[0] : undefined
|
||||
@@ -217,10 +206,6 @@ const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
|
||||
const onResetPwd = (item: UserResp) => {
|
||||
UserResetPwdModalRef.value?.onReset(item.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDeptList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user