用户和菜单页面修改

ui/dasadmin/src/api/backend/index.ts

@@ -144,3 +144,13 @@ export function menuTree(params: object = {}) {
         data: params,
     })
 }
+
+// 修改密码
+export function userChangePassword(params: object = {}) {
+    return createAxios({
+        url: 'api/auth/changePassword',
+        method: 'POST',
+        data: params,
+    })
+}
+

ui/dasadmin/src/views/backend/auth/menuManagement/index.vue

@@ -1,8 +1,11 @@
 <template>
-    <div style="width: 98%; margin-left: 25px">
+    <div class="ba-input-item-wrapper">
-        <el-row :gutter="20">
+        <el-container class="defaultContainer">
-            <el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
+            <el-aside class="defaultAside">
-                <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
+                <!-- <el-header class="treeHeader"> -->
+                <!-- <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" /> -->
+                <!-- </el-header> -->
+                <el-main class="treeMain">
                     <el-tree
                         style="max-width: 600px; margin-top: 2.2%; font-size: 16px"
                         :data="menuData"
@@ -12,26 +15,26 @@
                         lazy
                         @node-click="handleNodeClick"
                     />
-            </el-col>
+                </el-main>
-            <el-col :span="18" style="padding: 2.2% 1.4%">
+            </el-aside>
-                <el-container>
+            <el-container class="defaultMainContainer">
-                    <el-header style="display: flex; justify-content: space-between">
+                <el-header class="defaultHeader">
-                        <div>
+                    <div class="searchPart">
-                            <el-input v-model="input2" size="large" placeholder="请输入菜单名称 " style="width: 220px; margin-right: 10px" />
+                        <el-input v-model="input2" class="searchInput"></el-input>
-                            <el-button type="primary" size="large" :icon="Search" @click="clickQuery">查询</el-button>
+                        <el-button @click="clickQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
                     </div>
-                        <el-button type="primary" size="large" :icon="CirclePlusFilled" @click="fromAdd">新增</el-button>
+                    <el-button type="primary" :icon="Plus" class="defaultBtn" @click="fromAdd">新增</el-button>
                 </el-header>
-                    <el-main>
+                <el-main class="defaultMain">
-                        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ color: '#333333', background: '#EFF0F1' }">
+                    <el-table :data="tableData" class="tablePart">
-                            <el-table-column prop="menuName" label="菜单名称" width="180" />
+                        <el-table-column prop="menuName" label="菜单名称" />
-                            <el-table-column prop="funParam" label="菜单路径" width="180" />
+                        <el-table-column prop="funParam" label="菜单路径" />
-                            <el-table-column prop="menuOrder" label="菜单排序" width="180" />
+                        <el-table-column prop="menuOrder" label="菜单排序" />
-                            <el-table-column prop="menuIcon" label="图标" width="180" />
+                        <el-table-column prop="menuIcon" label="图标" />
                         <!-- <el-table-column prop="name" label="状态" width="180">
                                 <el-switch v-model="switchValue" />
                             </el-table-column> -->
-                            <el-table-column label="操作" width="180">
+                        <el-table-column label="操作">
                             <template #default="scope">
                                 <span style="color: #0064aa; cursor: pointer" @click="menuEdit(scope)">编辑</span>
                                 |
@@ -40,22 +43,7 @@
                         </el-table-column>
                     </el-table>
                 </el-main>
-                    <!-- <el-footer>
-                        <div style="display: flex; justify-content: right">
-                            <el-pagination
-                                v-model:current-page="currentPage4"
-                                v-model:page-size="pageSize4"
-                                :page-sizes="[5, 10, 15, 400]"
-                                layout="total, sizes, prev, pager, next, jumper"
-                                :total="400"
-                                @size-change="handleSizeChange"
-                                @current-change="handleCurrentChange"
-                            />
-                        </div>
-                    </el-footer> -->
             </el-container>
-            </el-col>
-        </el-row>
             <!-- 编辑弹框 -->
             <el-dialog v-model="visible" title="编辑菜单" width="500" :before-close="handleClose">
                 <el-form
@@ -166,12 +154,13 @@
                     </div>
                 </template>
             </el-dialog>
+        </el-container>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Search, CirclePlusFilled, Setting } from '@element-plus/icons-vue'
+import { Search, CirclePlusFilled, Plus } from '@element-plus/icons-vue'
 import { useAdminInfo } from '/@/stores/adminInfo'
 import { menusQuery, menusUpdate, menuDelete, menuAdd, menusTree, allPermissionQuery } from '/@/api/backend'
 import { ElMessage, ElMessageBox, FormRules } from 'element-plus'
@@ -184,8 +173,7 @@ console.log(adminInfo, 'adminInfo')
 // 树查询
 const menuData = ref()
 const fromParameter = {
-    parentMenuId: adminInfo.orgid,
+    parentMenuId: '',
-    recursive: true,
 }
 interface menusTree {
     rows?: any[]
@@ -224,7 +212,6 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
     }
     const fromParameter = {
         parentMenuId: node.data.id,
-        recursive: false,
     }
     menusTree(fromParameter)
         .then((res: any) => {
@@ -235,10 +222,9 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
         })
 }
 // 菜单查询
-const input1 = ref('')
 const switchValue = ref(true)
 interface Tree {
-    authorityId: number
+    authorityId: string
     funParam: string
     funType: number
     id: number
@@ -255,7 +241,6 @@ const handleNodeClick = (data: Tree) => {
     fromDataId.value = data.id
     const queryData = {
         parentMenuId: data.id,
-        recursive: false,
     }
     console.log(queryData, 'queryData')
 
@@ -408,7 +393,6 @@ const onSubmit = () => {
                     })
                     const queryData2 = {
                         parentMenuId: fromDataId.value,
-                        recursive: false,
                     }
                     queryMenuMethod(queryData2)
                     RyMenusTreeQuery(fromParameter)
@@ -469,7 +453,6 @@ const dialogVisibleDelete1 = (done: () => void) => {
             }, 1000)
             const queryData2 = {
                 parentMenuId: fromDataId.value,
-                recursive: false,
             }
             queryMenuMethod(queryData2)
             RyMenusTreeQuery(fromParameter)
@@ -533,7 +516,6 @@ const addOnSubmit = () => {
                     })
                     const queryData = {
                         parentMenuId: fromDataId.value,
-                        recursive: false,
                     }
                     console.log(queryData, 666)
 
@@ -591,4 +573,80 @@ const handleCurrentChange = (val: number) => {
 .el-input-group__append {
     cursor: pointer;
 }
+@mixin searchInput($value) {
+    margin-right: $value;
+    width: 220px;
+    height: 40px;
+}
+$defaultHeaderHeight: 60px;
+$defaultMainHeight: calc(100% - 60px);
+$paginationHeight: 32px;
+.ba-input-item-wrapper {
+    width: 100%;
+    height: 100%;
+    // background-color: #fff;
+    .defaultContainer {
+        height: 100%;
+        .defaultAside {
+            width: 260px;
+            height: 100%;
+            border-right: 1px solid #eaebed;
+            .treeHeader {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: $defaultHeaderHeight;
+                .searchInput {
+                    @include searchInput(0);
+                }
+            }
+            .treeMain {
+                height: $defaultMainHeight;
+                .treePart {
+                    height: 100%;
+                }
+            }
+        }
+        .defaultMainContainer {
+            height: 100%;
+            .defaultHeader {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: $defaultHeaderHeight;
+                .searchPart {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .defaultBtn {
+                    width: 88px;
+                    height: 40px;
+                }
+                .searchInput {
+                    @include searchInput(10px);
+                }
+            }
+            .defaultMain {
+                height: $defaultMainHeight;
+                .tablePart {
+                    height: calc(100% - $paginationHeight);
+                }
+                .tableOperate {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 </style>

ui/dasadmin/src/views/backend/auth/userManagement/index.vue

@@ -1,9 +1,12 @@
 <template>
     <!-- 用户 -->
-    <div style="margin-left: 25px">
+    <div class="ba-user-container">
-        <el-row :gutter="20">
+        <el-container class="defaultContainer">
-            <el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
+            <el-aside class="defaultAside">
-                <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
+                <!-- <el-header class="treeHeader"> -->
+                <!-- <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" /> -->
+                <!-- </el-header> -->
+                <el-main class="treeMain">
                     <el-tree
                         style="max-width: 600px; margin-top: 2.2%"
                         :data="userData"
@@ -13,28 +16,22 @@
                         lazy
                         @node-click="handleNodeClick"
                     />
-            </el-col>
+                </el-main>
-            <el-col :span="18" style="padding: 2.2% 1.4%">
+            </el-aside>
-                <el-container>
+            <el-container class="defaultMainContainer">
-                    <el-header style="display: flex; justify-content: space-between">
+                <el-header class="defaultHeader">
-                        <div>
+                    <div class="searchPart">
-                            <el-input v-model="input2" size="large" placeholder="根据账户中文名查询" style="width: 220px; margin-right: 10px" />
+                        <el-input v-model="input2" class="searchInput" placeholder="根据账户中文名查询"></el-input>
-                            <el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
+                        <el-button @click="userFromQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
                     </div>
-                        <el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
+                    <el-button size="large" type="primary" :icon="CirclePlusFilled" class="defaultBtn" @click="addUserFromData">新增</el-button>
                 </el-header>
-                    <el-main>
+                <el-main class="defaultMain">
-                        <el-table
+                    <el-table ref="multipleTableRef" :data="tableData" class="tablePart">
-                            ref="multipleTableRef"
+                        <el-table-column type="selection" />
-                            :data="tableData"
+                        <el-table-column property="account" label="账户名称" />
-                            style="width: 100%"
-                            :header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
-                            @selection-change="handleSelectionChange"
-                        >
-                            <el-table-column type="selection" width="180" />
-                            <el-table-column property="account" label="账户名称" width="200" />
 
-                            <el-table-column property="userName" label="账户中文名" width="200" />
+                        <el-table-column property="userName" label="账户中文名" />
                         <!-- <el-table-column property="address" label="是否禁用" /> -->
                         <!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
                         <el-table-column property="address" label="操作">
@@ -49,23 +46,21 @@
                             </template>
                         </el-table-column>
                     </el-table>
-                    </el-main>
-                    <el-footer>
                     <div style="display: flex; justify-content: right">
                         <el-pagination
-                                v-model:current-page="currentPage4"
+                            v-model:current-page="currentPage"
-                                v-model:page-size="pageSize4"
+                            v-model:page-size="currentPageSize"
-                                :page-sizes="[10, 15]"
+                            :total="pageTotal"
-                                layout="total, sizes, prev, pager, next, jumper"
+                            :page-sizes="pagePagination"
-                                :total="paginationTotal"
+                            background
+                            :pager-count="7"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
-                            />
+                            layout="prev, pager, next, jumper,sizes,total"
+                        ></el-pagination>
                     </div>
-                    </el-footer>
+                </el-main>
             </el-container>
-            </el-col>
-        </el-row>
             <!-- 用户新增页面 -->
             <el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
                 <el-form
@@ -100,6 +95,14 @@
                             <el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
                         </el-select>
                     </el-form-item>
+
+                    <avatar @selectAvatar="selectAddName">
+                        <template #randerData>
+                            <el-form-item label="头像选择:" prop="profilePicture">
+                                <el-input v-model="formUserAdd.profilePicture" placeholder="" clearable></el-input>
+                            </el-form-item>
+                        </template>
+                    </avatar>
                 </el-form>
                 <template #footer>
                     <div class="dialog-footer">
@@ -122,8 +125,11 @@
                         <el-input v-model="formUserUpData.account" placeholder="" clearable />
                     </el-form-item>
 
-                <el-form-item label="账户密码:" prop="password">
+                    <el-form-item label="账户密码:">
-                    <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
+                        <el-space>
+                            <!-- <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable /> -->
+                            <el-button @click="showPwd">重置密码</el-button>
+                        </el-space>
                     </el-form-item>
                     <el-form-item label="职员名称:" prop="userName">
                         <el-input v-model="formUserUpData.userName" placeholder="" clearable />
@@ -142,6 +148,13 @@
                             <el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
                         </el-select>
                     </el-form-item>
+                    <avatar @selectAvatar="selectUpdataName">
+                        <template #randerData>
+                            <el-form-item label="头像选择:" prop="profilePicture">
+                                <el-input v-model="formUserUpData.profilePicture" placeholder="" clearable></el-input>
+                            </el-form-item>
+                        </template>
+                    </avatar>
                 </el-form>
                 <template #footer>
                     <div class="dialog-footer">
@@ -160,19 +173,46 @@
                     </div>
                 </template>
             </el-dialog>
+            <!-- 修改密码弹框 -->
+            <el-dialog v-model="passWordDialog" title="修改密码" width="500" :before-close="handleClosePassWord">
+                <el-form
+                    ref="ChangePasswordFrom"
+                    :inline="true"
+                    label-width="auto"
+                    :model="passWordProp"
+                    :rules="passWordRules"
+                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
+                >
+                    <!-- <el-form-item label="旧密码:" prop="account">
+                        <el-input v-model="passWordProp.oldPassWord" placeholder="请输入旧密码" clearable />
+                    </el-form-item> -->
+                    <el-form-item label="新密码:" prop="newPassword">
+                        <el-input v-model="passWordProp.newPassword" type="password" show-password placeholder="请输入新密码" clearable />
+                    </el-form-item>
+                    <el-form-item label="新密码确认:" prop="repeatPassword">
+                        <el-input v-model="passWordProp.repeatPassword" type="password" show-password placeholder="请再次输入新密码" clearable />
+                    </el-form-item>
+                </el-form>
+
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="passWordUpdata">保存修改</el-button>
+                        <el-button type="primary" @click="passWordDialog = false"> 取消 </el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </el-container>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
-import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery } from '/@/api/backend'
+import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery, userChangePassword } from '/@/api/backend'
 import { ElTable, ElMessage, FormRules } from 'element-plus'
-import { useAdminInfo } from '/@/stores/adminInfo'
 import type Node from 'element-plus/es/components/tree/src/model/node'
+import Avatar from '/@/views/backend/userInfo/avatar.vue'
 
-const adminInfo = useAdminInfo()
-const input1 = ref('')
 const input2 = ref('')
 interface Tree {
     label: string
@@ -182,8 +222,7 @@ interface Tree {
 
 // 用户左边树
 const treeQuery = reactive({
-    parentOrgId: adminInfo.orgid,
+    parentOrgId: '',
-    recursive: true,
 })
 
 const userData = ref()
@@ -205,6 +244,8 @@ onMounted(() => {
 const formQuery = reactive({
     orgId: '',
     recursive: false,
+    pageSize: 10,
+    pageNum: 1,
 })
 
 const treeId = ref()
@@ -214,6 +255,7 @@ const handleNodeClick = (data: Tree) => {
 
     treeId.value = data.id
     formQuery.orgId = data.id
+    console.log(formQuery, 444444444)
     RyUserQuery(formQuery)
 }
 
@@ -224,7 +266,6 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
 
     const treeQuery = reactive({
         parentOrgId: node.data.id,
-        recursive: false,
     })
 
     userList(treeQuery)
@@ -253,7 +294,7 @@ const RyUserQuery = (data: any) => {
         if (res.code == 200) {
             console.log(res, 'res111')
             tableData.value = res.rows
-            paginationTotal.value = res.total
+            pageTotal.value = res.total
         } else {
             ElMessage.error({
                 message: res.msg,
@@ -280,6 +321,8 @@ const handleSelectionChange = (val: User[]) => {
 const formQuery1 = reactive({
     userName: '',
     orgId: '',
+    pageSize: 10,
+    pageNum: 1,
 })
 const userFromQuery = () => {
     formQuery1.userName = input2.value
@@ -298,7 +341,7 @@ interface RuleUser {
     email: string
     phone: string
     orgId: string
-    roleList: number[]
+    roleList: string[]
 }
 const formUserAdd = reactive({
     account: '',
@@ -308,6 +351,7 @@ const formUserAdd = reactive({
     phone: '',
     orgId: '',
     roleList: [],
+    profilePicture: '',
 })
 const rules = reactive<FormRules<RuleUser>>({
     account: [
@@ -317,23 +361,16 @@ const rules = reactive<FormRules<RuleUser>>({
             trigger: 'blur',
         },
     ],
-    password: [
-        {
-            required: true,
-            message: '用户密码不能为空',
-            trigger: 'blur',
-        },
-    ],
 })
 const addUserFromData = () => {
     visibleParam.value = true
     formUserAdd.account = ''
-    formUserAdd.password = ''
     formUserAdd.userName = ''
     formUserAdd.email = ''
     formUserAdd.phone = ''
     formUserAdd.orgId = ''
     formUserAdd.roleList = []
+    formUserAdd.profilePicture = ''
 }
 
 const handleCloseParam = (data: any) => {
@@ -367,18 +404,31 @@ const addOnSubmit = () => {
 // 页面修改
 const visibleParamUpData = ref(false)
 
-const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '', roleList: [] })
+const formUserUpData = reactive({
+    id: '',
+    account: '',
+    userName: '',
+    email: '',
+    phone: '',
+    orgId: '',
+    roleList: [],
+    profilePicture: '',
+})
 const viewUsers = (data: any) => {
-    console.log(data, '页面修改数据')
+    console.log(data, '页面修改数据1') 
+    formRef.value?.resetFields()
     visibleParamUpData.value = true
     formUserUpData.id = data.row.id
     formUserUpData.account = data.row.account
-    formUserUpData.password = data.row.password
     formUserUpData.userName = data.row.userName
     formUserUpData.email = data.row.email
     formUserUpData.phone = data.row.phone
     formUserUpData.orgId = data.row.orgId
-    formUserUpData.roleList = data.row.roleList
+    formUserUpData.roleList = data.row.roleList.map((item: any) => {
+        return item.id
+    })
+    formUserUpData.profilePicture = data.row.profilePicture
+   
 }
 const upDataOnSubmit = () => {
     formRef.value.validate((valid: any) => {
@@ -388,7 +438,9 @@ const upDataOnSubmit = () => {
             userUpdate(formUserUpData).then((res) => {
                 if (res.code == 200) {
                     console.log(res, '修改成功')
-
+                    // ElMessage({
+                    //     message: res.msg,
+                    // })
                     RyUserQuery(formQuery)
                 } else {
                     ElMessage.error({
@@ -457,16 +509,104 @@ const allPermission = () => {
     })
 }
 
+//修改密码弹框
+const passWordDialog = ref(false)
+const passWordProp = reactive({
+    newPassword: '',
+    repeatPassword: '',
+})
+
+const passWordRules = {
+    newPassword: [
+        {
+            validator: (rule: any, value: any, callback: any) => {
+                if (value === '') {
+                    callback(new Error('密码不能为空'))
+                } else if (value && passWordProp.repeatPassword && value !== passWordProp.repeatPassword) {
+                    callback(new Error('两次输入的密码不匹配'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur',
+            required: true,
+        },
+    ],
+    repeatPassword: [
+        {
+            validator: (rule: any, value: any, callback: any) => {
+                if (value === '') {
+                    callback(new Error('密码不能为空'))
+                } else if (value && passWordProp.newPassword && value !== passWordProp.newPassword) {
+                    callback(new Error('两次输入的密码不匹配'))
+                } else {
+                    callback()
+                }
+            },
+            required: true,
+            trigger: 'blur',
+        },
+    ],
+}
+const handleClosePassWord = () => {
+    passWordDialog.value = false
+}
+
+const showPwd = () => {
+    passWordDialog.value = true
+}
+const ChangePasswordFrom = ref()
+const changePassWordData = reactive({
+    id: formUserUpData.id,
+    oldPassword: passWordProp.newPassword,
+})
+const passWordUpdata = () => {
+    ChangePasswordFrom.value.validate((valid: any) => {
+        if (valid) {
+            userChangePassword(changePassWordData)
+                .then((res) => {
+                    if (res.code == 200) {
+                        ElMessage.success('修改成功')
+                        passWordDialog.value = false
+                    } else {
+                        ElMessage.error(res.msg)
+                    }
+                })
+                .catch(() => {
+                    ElMessage.error('修改失败')
+                })
+        }
+    })
+}
+
+// 新增页面头像接受
+const selectAddName = (data: string) => {
+    formUserAdd.profilePicture = data
+}
+
+// 修改页面头像接受
+const selectUpdataName = (data: string) => {
+    formUserUpData.profilePicture = data
+}
 // 分页
-const currentPage4 = ref(0)
+const pagePagination = [5, 10, 20, 30]
-const pageSize4 = ref(10)
+const currentPage = ref(1)
-const paginationTotal = ref(0)
+const currentPageSize = ref(pagePagination[0])
 const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
+    formQuery.pageSize = val
+    RyUserQuery(formQuery)
 }
 const handleCurrentChange = (val: number) => {
-    console.log(`current page: ${val}`)
+    formQuery.pageNum = val
+    RyUserQuery(formQuery)
 }
+const pageTotal = ref(0)
+const originData = ref()
+const tableData1 = computed(() => {
+    const start = (currentPage.value - 1) * currentPageSize.value
+    const end = start + currentPageSize.value
+    return originData.value?.slice(start, end)
+})
 </script>
 
 <style scoped lang="scss">
@@ -482,4 +622,80 @@ const handleCurrentChange = (val: number) => {
     // border-radius: 4px;
     background-color: #fff;
 }
+@mixin searchInput($value) {
+    margin-right: $value;
+    width: 220px;
+    height: 40px;
+}
+$defaultHeaderHeight: 60px;
+$defaultMainHeight: calc(100% - 60px);
+$paginationHeight: 32px;
+.ba-user-container {
+    width: 100%;
+    height: 100%;
+    // background-color: #fff;
+    .defaultContainer {
+        height: 100%;
+        .defaultAside {
+            width: 260px;
+            height: 100%;
+            border-right: 1px solid #eaebed;
+            .treeHeader {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: $defaultHeaderHeight;
+                .searchInput {
+                    @include searchInput(0);
+                }
+            }
+            .treeMain {
+                height: $defaultMainHeight;
+                .treePart {
+                    height: 100%;
+                }
+            }
+        }
+        .defaultMainContainer {
+            height: 100%;
+            .defaultHeader {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: $defaultHeaderHeight;
+                .searchPart {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .defaultBtn {
+                    width: 88px;
+                    height: 40px;
+                }
+                .searchInput {
+                    @include searchInput(10px);
+                }
+            }
+            .defaultMain {
+                height: $defaultMainHeight;
+                .tablePart {
+                    height: calc(100% - $paginationHeight);
+                }
+                .tableOperate {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 </style>