修改部门树组件
This commit is contained in:
1 parent
3dd000ced5
commit
f484b5088a
3 files changed
+85
-36
No files matched your search
@@ -190,9 +190,10 @@ defineExpose({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1);
|
||||||
z-index: 10;
|
z-index: 999;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,40 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-padding">
|
<div class="layout-padding">
|
||||||
<splitpanes>
|
<Splitpanes @resized="depTreeWidth = $event[0].size">
|
||||||
<pane size="30">
|
<pane :size="depTreeWidth" class="relative">
|
||||||
<div class="layout-padding-auto layout-padding-view">
|
<dep-tree
|
||||||
<!-- <el-scrollbar> -->
|
class="p-2"
|
||||||
<dep-tree
|
ref="depTreeRef"
|
||||||
ref="depTreeRef"
|
:placeholder="$t('common.queryDeptTip')"
|
||||||
:placeholder="$t('common.queryDeptTip')"
|
:query="deptData.queryList"
|
||||||
:query="deptData.queryList"
|
:show-expand="true"
|
||||||
:show-expand="true"
|
@node-click="handleNodeClick"
|
||||||
@node-click="handleNodeClick"
|
@treeDeepSearch="treeDeepSearch"
|
||||||
@treeDeepSearch="treeDeepSearch"
|
switch-inactive-text="当前部门"
|
||||||
switch-inactive-text="当前部门"
|
switch-active-text="当前部门及子部门"
|
||||||
switch-active-text="当前部门及子部门"
|
>
|
||||||
>
|
<!-- 没有数据权限提示 -->
|
||||||
<!-- 没有数据权限提示 -->
|
<template #default="{ node, data }">
|
||||||
<template #default="{ node, data }">
|
<el-tooltip
|
||||||
<el-tooltip
|
v-if="data.isLock"
|
||||||
v-if="data.isLock"
|
class="item"
|
||||||
class="item"
|
effect="dark"
|
||||||
effect="dark"
|
:content="$t('sysuser.noDataScopeTip')"
|
||||||
:content="$t('sysuser.noDataScopeTip')"
|
placement="right-start"
|
||||||
placement="right-start"
|
>
|
||||||
>
|
<span>
|
||||||
<span>
|
{{ node.label }}
|
||||||
{{ node.label }}
|
<SvgIcon name="ele-Lock" />
|
||||||
<SvgIcon name="ele-Lock" />
|
</span>
|
||||||
</span>
|
</el-tooltip>
|
||||||
</el-tooltip>
|
<span v-if="!data.isLock">{{ node.label }}</span>
|
||||||
<span v-if="!data.isLock">{{ node.label }}</span>
|
</template>
|
||||||
</template>
|
</dep-tree>
|
||||||
</dep-tree>
|
|
||||||
<!-- </el-scrollbar> -->
|
<div
|
||||||
|
class="pt-7 text-center w-3 h-20 absolute right-0 top-[44vh] translate-y-[-50%] overflow-hidden bg-blue-400 transition-all cursor-pointer"
|
||||||
|
style="
|
||||||
|
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
|
||||||
|
background-color: url(../../../../../public/favicon.ico);
|
||||||
|
"
|
||||||
|
@click="handleClickDepTreeDrawer(isOpen)"
|
||||||
|
>
|
||||||
|
<span class="text-white font-bold text-lg"><</span>
|
||||||
</div>
|
</div>
|
||||||
</pane>
|
</pane>
|
||||||
<pane class="ml8">
|
<pane :size="100 - depTreeWidth" class="ml8">
|
||||||
<div class="layout-padding-auto layout-padding-view">
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
<el-row v-show="showSearch">
|
<el-row v-show="showSearch">
|
||||||
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
|
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
|
||||||
@@ -209,11 +217,13 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle">
|
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle">
|
||||||
</pagination>
|
</pagination>
|
||||||
</div>
|
</div>
|
||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</Splitpanes>
|
||||||
|
|
||||||
<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
|
<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
|
||||||
<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
|
<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
|
||||||
<upload-excel
|
<upload-excel
|
||||||
@@ -250,6 +260,7 @@ const queryRef = ref()
|
|||||||
const showSearch = ref(true)
|
const showSearch = ref(true)
|
||||||
const inputPassword = ref()
|
const inputPassword = ref()
|
||||||
const depTreeRef = ref() // 树组件ref引用
|
const depTreeRef = ref() // 树组件ref引用
|
||||||
|
const depTreeWidth = ref<number>(20)
|
||||||
|
|
||||||
// 多选rows
|
// 多选rows
|
||||||
const selectObjs = ref([]) as any
|
const selectObjs = ref([]) as any
|
||||||
@@ -360,4 +371,26 @@ const changePassword = async (row: any) => {
|
|||||||
useMessage().success(t("common.optSuccessText"))
|
useMessage().success(t("common.optSuccessText"))
|
||||||
getDataList()
|
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>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.splitpanes--vertical > .splitpanes__splitter {
|
||||||
|
min-width: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.splitpanes--vertical > .splitpanes__splitter:hover {
|
||||||
|
background: #1890ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -79,7 +79,22 @@ const getSummaries = (param: SummaryMethodProps) => {
|
|||||||
sums[index] = "合计"
|
sums[index] = "合计"
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (column.property === "productPrice" || column.property === "totalPrice") {
|
if (column.property === "productCount") {
|
||||||
|
const values = data.map((item) => Number(item[column.property]))
|
||||||
|
if (!values.every((value) => Number.isNaN(value))) {
|
||||||
|
sums[index] =
|
||||||
|
values.reduce((prev, curr) => {
|
||||||
|
const value = Number(curr)
|
||||||
|
if (!Number.isNaN(value)) {
|
||||||
|
return prev + curr
|
||||||
|
} else {
|
||||||
|
return prev
|
||||||
|
}
|
||||||
|
}, 0) + "份"
|
||||||
|
} else {
|
||||||
|
sums[index] = "N/A"
|
||||||
|
}
|
||||||
|
} else if (column.property === "totalPrice") {
|
||||||
const values = data.map((item) => Number(item[column.property]))
|
const values = data.map((item) => Number(item[column.property]))
|
||||||
if (!values.every((value) => Number.isNaN(value))) {
|
if (!values.every((value) => Number.isNaN(value))) {
|
||||||
sums[index] = displayPrice(
|
sums[index] = displayPrice(
|
||||||
|
|||||||
Reference in new issue
Block a user