zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整采购入库和修改可拖拽部门树组件

Browse Source
This commit is contained in:
weiwei committed 2025-02-18 09:13:50 +08:00
1 parent f0105c0325
commit 6177e3e053
5 files changed
+368 -403
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/admin/system/user/index.vue
+31 -125
View File
@@ -1,52 +1,19 @@
<template>
<div class="layout-padding">
<Splitpanes @resize="depTreeWidth = $event[0].size">
<pane :size="depTreeWidth">
<dep-tree
class="p-2"
ref="depTreeRef"
:placeholder="$t('common.queryDeptTip')"
:query="deptData.queryList"
:show-expand="true"
@node-click="handleNodeClick"
@treeDeepSearch="treeDeepSearch"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
>
<!-- 没有数据权限提示 -->
<template #default="{ node, data }">
<el-tooltip
v-if="data.isLock"
class="item"
effect="dark"
:content="$t('sysuser.noDataScopeTip')"
placement="right-start"
>
<span>
{{ node.label }}
<SvgIcon name="ele-Lock" />
</span>
</el-tooltip>
<span v-if="!data.isLock">{{ node.label }}</span>
</template>
</dep-tree>
</pane>
<pane :size="100 - depTreeWidth" class="pl8 relative">
<div
class="w-[12px] h-[56px] absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer"
@click="handleClickDepTreeDrawer(isOpen)"
style="background-color: #e3e9ed; border-top-right-radius: 10px; border-bottom-right-radius: 10px"
>
<i class="drawer-icon">
<el-icon>
<ArrowLeftBold v-if="depTreeWidth > 0.5" />
<ArrowRightBold v-else />
</el-icon>
</i>
</div>
<div class="layout-padding-auto layout-padding-view">
<div class="layout-padding-auto layout-padding-view">
<DraggableDepTree
ref="draggableDepTreeRef"
placeholder="请输入部门名称"
:query="deptData.queryList"
:show-expand="true"
@node-click="handleNodeClick"
@treeDeepSearch="treeDeepSearch"
@treeNodeCheckChange="treeNodeCheckChange"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
:defaultTreeWidth="20"
>
<template #default>
<el-row v-show="showSearch">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-form-item label="用户" prop="userIds">
@@ -66,20 +33,12 @@
</el-form-item>
</el-form>
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
{{ $t("common.addBtn") }}
</el-button>
<el-button
plain
v-auth="'sys_user_add'"
class="ml10"
icon="upload-filled"
type="primary"
@click="excelUploadRef.show()"
>
<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
{{ $t("common.importBtn") }}
</el-button>
@@ -116,12 +75,7 @@
>
<el-table-column :selectable="handleSelectable" type="selection" width="40" />
<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
<el-table-column
:label="$t('sysuser.username')"
prop="username"
fixed="left"
show-overflow-tooltip
></el-table-column>
<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
@@ -165,7 +119,7 @@
<el-table-column
v-auths="['sys_user_edit', 'userFace_sysUserFace_view', 'sys_user_del']"
:label="$t('common.action')"
width="300"
width="200"
fixed="right"
>
<template #default="scope">
@@ -199,11 +153,7 @@
人脸管理
</el-button>
<!-- 删除用户 -->
<el-tooltip
:content="$t('sysuser.deleteDisabledTip')"
:disabled="scope.row.userId !== '1'"
placement="top"
>
<el-tooltip :content="$t('sysuser.deleteDisabledTip')" :disabled="scope.row.userId !== '1'" placement="top">
<span style="margin-left: 12px">
<el-button
icon="delete"
@@ -220,12 +170,10 @@
</template>
</el-table-column>
</el-table>
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle">
</pagination>
</div>
</pane>
</Splitpanes>
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
</template>
</DraggableDepTree>
</div>
<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
@@ -248,22 +196,19 @@ import { useMessage, useMessageBox } from "/@/hooks/message"
import { useI18n } from "vue-i18n"
import { auth } from "/@/utils/authFunction"
// 动态引入组件
const UserForm = defineAsyncComponent(() => import("./form.vue"))
const FaceManage = defineAsyncComponent(() => import("./face-manage.vue"))
const PopoverInput = defineAsyncComponent(() => import("/@/components/PopoverInput/index.vue"))
const { t } = useI18n()
// 定义变量内容
const userDialogRef = ref()
const faceManageRef = ref()
const excelUploadRef = ref()
const queryRef = ref()
const showSearch = ref(true)
const inputPassword = ref()
const depTreeRef = ref() // 树组件ref引用
const depTreeWidth = ref<number>(20) // 部门树组件宽度
const draggableDepTreeRef = ref() // 树组件ref引用
// 多选rows
const selectObjs = ref([]) as any
@@ -291,6 +236,7 @@ const deptData = reactive({
},
})
// 是否深度搜索
const treeDeepSearch = (isDeep: boolean) => {
state.queryForm.isDeepDept = isDeep
getDataList()
@@ -300,7 +246,7 @@ const treeDeepSearch = (isDeep: boolean) => {
const resetQuery = () => {
queryRef.value?.resetFields()
state.queryForm.deptId = ""
depTreeRef.value.getTreeData()
draggableDepTreeRef.value.getTreeData()
getDataList()
}
@@ -310,6 +256,12 @@ const handleNodeClick = (e: any) => {
getDataList()
}
// 树节点勾选改变
const treeNodeCheckChange = (checkedNodes: any) => {
state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
getDataList()
}
// 导出excel
const exportExcel = () => {
downBlobFile("/admin/user/export", Object.assign(state.queryForm, { ids: selectObjs }), "users.xlsx")
@@ -374,50 +326,4 @@ const changePassword = async (row: any) => {
useMessage().success(t("common.optSuccessText"))
getDataList()
}
const isOpen = ref(true)
const temp = ref()
const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
if (isDrawerOpen) {
temp.value = depTreeWidth.value
depTreeWidth.value = 0.5
} else {
depTreeWidth.value = temp.value
}
isOpen.value = !isOpen.value
}
</script>
<style>
.splitpanes--vertical > .splitpanes__splitter {
background: var(--el-color-primary);
/* min-width: 2px; */
width: 2px;
transition: all 0.3s ease;
}
.splitpanes--vertical > .splitpanes__splitter:active {
background: var(--el-color-primary);
opacity: 0.6;
}
.splitpanes--vertical > .splitpanes__splitter:hover {
background: var(--el-color-primary);
opacity: 0.6;
}
.drawer-icon {
color: #b7bdc8;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 64px;
}
.drawer-icon:hover {
opacity: 0.5;
}
/* .drawer-icon::before {
content: "<";
background: none;
box-sizing: inherit;
color: #b7bdc8;
font-size: 1em;
} */
</style>