style: 优化组织管理样式
This commit is contained in:
xieyonghong
parent
a3cb28ed5b
commit
d3ea02c0f6
|
|
@ -23,58 +23,59 @@
|
|||
</div>
|
||||
|
||||
<div class="tree">
|
||||
<jTree
|
||||
v-if="treeData.length > 0"
|
||||
:tree-data="treeData"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
:fieldNames="{ key: 'id' }"
|
||||
>
|
||||
<template #title="{ name, data }">
|
||||
<span>{{ name }}</span>
|
||||
<span class="func-btns" @click="(e) => e.stopPropagation()">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="openDialog(data)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '新增子组织',
|
||||
}"
|
||||
@click="
|
||||
openDialog({
|
||||
...data,
|
||||
id: '',
|
||||
parentId: data.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<AIcon type="PlusCircleOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确定要删除吗`,
|
||||
onConfirm: () => delDepartment(data.id),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</span>
|
||||
</template>
|
||||
</jTree>
|
||||
<div class="loading" v-else-if="loading"><j-spin /></div>
|
||||
<j-empty v-else description="暂无数据" />
|
||||
<j-spin :spinning='loading'>
|
||||
<jTree
|
||||
v-if="treeData.length > 0"
|
||||
:tree-data="treeData"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
:fieldNames="{ key: 'id' }"
|
||||
>
|
||||
<template #title="{ name, data }">
|
||||
<span>{{ name }}</span>
|
||||
<span class="func-btns" @click="(e) => e.stopPropagation()">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="openDialog(data)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '新增子组织',
|
||||
}"
|
||||
@click="
|
||||
openDialog({
|
||||
...data,
|
||||
id: '',
|
||||
parentId: data.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<AIcon type="PlusCircleOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确定要删除吗`,
|
||||
onConfirm: () => delDepartment(data.id),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</span>
|
||||
</template>
|
||||
</jTree>
|
||||
<j-empty v-else description="暂无数据" />
|
||||
</j-spin>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<EditDepartmentDialog
|
||||
|
|
@ -227,6 +228,9 @@ function init() {
|
|||
.left-tree-container {
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.add-btn {
|
||||
margin: 24px 0;
|
||||
|
|
@ -262,10 +266,17 @@ function init() {
|
|||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
||||
.tree {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="department-container">
|
||||
<div class="department-warp">
|
||||
<div class='department-container'>
|
||||
<div class="left">
|
||||
<LeftTree @change="(id) => (departmentId = id)" />
|
||||
<LeftTree @change="(id) => (departmentId = id)" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<j-tabs v-model:activeKey="activeKey" destroyInactiveTabPane>
|
||||
<j-tab-pane key="product" tab="产品">
|
||||
<Product
|
||||
:parentId="departmentId"
|
||||
@open-device-bind="openDeviceBind"
|
||||
/>
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="device" tab="设备">
|
||||
<Device
|
||||
:parentId="departmentId"
|
||||
v-model:bindBool="bindBool"
|
||||
/>
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="user" tab="用户">
|
||||
<User :parentId="departmentId" />
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
<j-tabs v-model:activeKey="activeKey" destroyInactiveTabPane>
|
||||
<j-tab-pane key="product" tab="产品">
|
||||
<Product
|
||||
:parentId="departmentId"
|
||||
@open-device-bind="openDeviceBind"
|
||||
/>
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="device" tab="设备">
|
||||
<Device
|
||||
:parentId="departmentId"
|
||||
v-model:bindBool="bindBool"
|
||||
/>
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="user" tab="用户">
|
||||
<User :parentId="departmentId" />
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
@ -45,19 +47,25 @@ const openDeviceBind = () => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.department-container {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
.department-warp {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
.department-container {
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 300px);
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 316px);
|
||||
margin-left: 316px;
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ const handleParams = (params: any) => {
|
|||
|
||||
// 表格
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
|
||||
const table = reactive({
|
||||
_selectedRowKeys: [] as string[],
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue