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

style: 优化组织管理样式

This commit is contained in:
xieyonghong 2023-03-30 11:08:26 +08:00
parent a3cb28ed5b
commit d3ea02c0f6
3 changed files with 105 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,58 +23,59 @@
</div> </div>
<div class="tree"> <div class="tree">
<jTree <j-spin :spinning='loading'>
v-if="treeData.length > 0" <jTree
:tree-data="treeData" v-if="treeData.length > 0"
v-model:selected-keys="selectedKeys" :tree-data="treeData"
v-model:expandedKeys="expandedKeys" v-model:selected-keys="selectedKeys"
:fieldNames="{ key: 'id' }" v-model:expandedKeys="expandedKeys"
> :fieldNames="{ key: 'id' }"
<template #title="{ name, data }"> >
<span>{{ name }}</span> <template #title="{ name, data }">
<span class="func-btns" @click="(e) => e.stopPropagation()"> <span>{{ name }}</span>
<PermissionButton <span class="func-btns" @click="(e) => e.stopPropagation()">
:hasPermission="`${permission}:update`" <PermissionButton
type="link" :hasPermission="`${permission}:update`"
:tooltip="{ type="link"
title: '编辑', :tooltip="{
}" title: '编辑',
@click="openDialog(data)" }"
> @click="openDialog(data)"
<AIcon type="EditOutlined" /> >
</PermissionButton> <AIcon type="EditOutlined" />
<PermissionButton </PermissionButton>
:hasPermission="`${permission}:add`" <PermissionButton
type="link" :hasPermission="`${permission}:add`"
:tooltip="{ type="link"
title: '新增子组织', :tooltip="{
}" title: '新增子组织',
@click=" }"
openDialog({ @click="
...data, openDialog({
id: '', ...data,
parentId: data.id, id: '',
}) parentId: data.id,
" })
> "
<AIcon type="PlusCircleOutlined" /> >
</PermissionButton> <AIcon type="PlusCircleOutlined" />
<PermissionButton </PermissionButton>
type="link" <PermissionButton
:hasPermission="`${permission}:delete`" type="link"
:tooltip="{ title: '删除' }" :hasPermission="`${permission}:delete`"
:popConfirm="{ :tooltip="{ title: '删除' }"
title: `确定要删除吗`, :popConfirm="{
onConfirm: () => delDepartment(data.id), title: `确定要删除吗`,
}" onConfirm: () => delDepartment(data.id),
> }"
<AIcon type="DeleteOutlined" /> >
</PermissionButton> <AIcon type="DeleteOutlined" />
</span> </PermissionButton>
</template> </span>
</jTree> </template>
<div class="loading" v-else-if="loading"><j-spin /></div> </jTree>
<j-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</j-spin>
</div> </div>
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
<EditDepartmentDialog <EditDepartmentDialog
@ -227,6 +228,9 @@ function init() {
.left-tree-container { .left-tree-container {
padding-right: 24px; padding-right: 24px;
border-right: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;
display: flex;
height: 100%;
flex-direction: column;
.add-btn { .add-btn {
margin: 24px 0; margin: 24px 0;
@ -262,10 +266,17 @@ function init() {
} }
} }
.loading {
.tree {
overflow-y: auto;
overflow-x: hidden;
.loading {
display: flex; display: flex;
width: 100%;
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
}
} }
} }
</style> </style>

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

@ -1,28 +1,30 @@
<template> <template>
<page-container> <page-container>
<div class="department-container"> <div class="department-warp">
<div class='department-container'>
<div class="left"> <div class="left">
<LeftTree @change="(id) => (departmentId = id)" /> <LeftTree @change="(id) => (departmentId = id)" />
</div> </div>
<div class="right"> <div class="right">
<j-tabs v-model:activeKey="activeKey" destroyInactiveTabPane> <j-tabs v-model:activeKey="activeKey" destroyInactiveTabPane>
<j-tab-pane key="product" tab="产品"> <j-tab-pane key="product" tab="产品">
<Product <Product
:parentId="departmentId" :parentId="departmentId"
@open-device-bind="openDeviceBind" @open-device-bind="openDeviceBind"
/> />
</j-tab-pane> </j-tab-pane>
<j-tab-pane key="device" tab="设备"> <j-tab-pane key="device" tab="设备">
<Device <Device
:parentId="departmentId" :parentId="departmentId"
v-model:bindBool="bindBool" v-model:bindBool="bindBool"
/> />
</j-tab-pane> </j-tab-pane>
<j-tab-pane key="user" tab="用户"> <j-tab-pane key="user" tab="用户">
<User :parentId="departmentId" /> <User :parentId="departmentId" />
</j-tab-pane> </j-tab-pane>
</j-tabs> </j-tabs>
</div> </div>
</div>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -45,19 +47,25 @@ const openDeviceBind = () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.department-container { .department-warp {
display: flex; background-color: #fff;
background-color: #fff; padding: 24px;
padding: 24px; .department-container {
position: relative;
.left { .left {
flex-basis: 300px; position: absolute;
} height: 100%;
.right { width: 300px;
width: calc(100% - 300px); }
:deep(.ant-tabs-nav-wrap) {
padding-left: 24px; .right {
} width: calc(100% - 316px);
} margin-left: 316px;
:deep(.ant-tabs-nav-wrap) {
padding-left: 24px;
}
}
}
} }
</style> </style>

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

@ -155,6 +155,7 @@ const handleParams = (params: any) => {
// 表格 // 表格
const tableRef = ref<Record<string, any>>({}); // 表格实例 const tableRef = ref<Record<string, any>>({}); // 表格实例
const table = reactive({ const table = reactive({
_selectedRowKeys: [] as string[], _selectedRowKeys: [] as string[],