diff --git a/src/api/system/newdept.js b/src/api/system/newdept.js
new file mode 100644
index 00000000..08adf9e8
--- /dev/null
+++ b/src/api/system/newdept.js
@@ -0,0 +1,95 @@
+import request from '@/utils/request'
+
+// 获取机构树形列表
+export function listOrgTree(query) {
+  return request({
+    url: '/system/newDept/org/treeList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取机构树（用于部门管理左侧）
+export function listOrgTreeSimple() {
+  return request({
+    url: '/system/newDept/org/tree',
+    method: 'get'
+  })
+}
+
+// 根据机构获取部门列表
+export function listDeptByOrg(orgId, query) {
+  return request({
+    url: `/system/newDept/dept/list/${orgId}`,
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增机构
+export function addOrg(data) {
+  return request({
+    url: '/system/newDept/org',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改机构
+export function updateOrg(data) {
+  return request({
+    url: '/system/newDept/org',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除机构
+export function deleteOrg(orgId) {
+  return request({
+    url: `/system/newDept/org/${orgId}`,
+    method: 'delete'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/newDept/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/newDept/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function deleteDept(deptId) {
+  return request({
+    url: `/system/newDept/dept/${deptId}`,
+    method: 'delete'
+  })
+}
+
+// 导入机构
+export function importOrg() {
+  return request({
+    url: '/system/newDept/org/import',
+    method: 'post'
+  })
+}
+
+// 导入部门
+export function importDept() {
+  return request({
+    url: '/system/newDept/dept/import',
+    method: 'post'
+  })
+}
diff --git a/src/views/system/dept/index - 副本.vue b/src/views/system/dept/index - 副本.vue
new file mode 100644
index 00000000..c1732b98
--- /dev/null
+++ b/src/views/system/dept/index - 副本.vue	
@@ -0,0 +1,527 @@
+<template>
+    <div class="app-container">
+        <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+        >
+          <el-card class="search-box">
+            <el-row style="height: 32px;">
+            <el-form-item label="部门名称" prop="deptName">
+                <el-input
+                    v-model="queryParams.deptName"
+                    placeholder="请输入部门名称"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+                <el-select
+                    v-model="queryParams.status"
+                    placeholder="部门状态"
+                    clearable
+                >
+                    <el-option
+                        v-for="dict in dict.type.sys_normal_disable"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item style="float: right">
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >查询</el-button
+                >
+                <el-button
+
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
+            </el-form-item>
+            </el-row>
+          </el-card>
+        </el-form>
+
+      <el-card class="content-box">
+        <el-row :gutter="10" class="mb8">
+          <div class="action-bar">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAdd"
+                    v-hasPermi="['system:dept:add']"
+                    >新增
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="info"
+                    plain
+                    icon="el-icon-sort"
+                    size="mini"
+                    @click="toggleExpandAll"
+                    >展开/折叠
+                </el-button>
+            </el-col>
+            <right-toolbar
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+            ></right-toolbar>
+          </div>
+        </el-row>
+
+        <el-table
+            v-if="refreshTable"
+            v-loading="loading"
+            :data="deptList"
+            row-key="deptId"
+            :default-expand-all="isExpandAll"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            height="546"
+        >
+            <el-table-column
+                prop="deptName"
+                label="部门名称"
+                min-width="260"
+            ></el-table-column>
+            <el-table-column
+                prop="orderNum"
+                label="排序"
+                min-width="200"
+            ></el-table-column>
+            <el-table-column prop="status" label="状态" min-width="100">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.sys_normal_disable"
+                        :value="scope.row.status"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="创建时间"
+                align="center"
+                prop="createTime"
+                min-width="200"
+            >
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                align="center"
+                min-width="200"
+                class-name="small-padding fixed-width"
+            >
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdate(scope.row)"
+                        v-hasPermi="['system:dept:edit']"
+                        >修改
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-plus"
+                        @click="handleAdd(scope.row)"
+                        v-hasPermi="['system:dept:add']"
+                        >新增
+                    </el-button>
+                    <el-button
+                        v-if="scope.row.parentId != 0"
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(scope.row)"
+                        v-hasPermi="['system:dept:remove']"
+                        >删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 添加或修改部门对话框 -->
+        <el-dialog
+            :title="title"
+            :visible.sync="open"
+            width="600px"
+            append-to-body
+        >
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-row>
+                    <el-col :span="24" v-if="form.parentId !== 0">
+                        <el-form-item label="上级部门" prop="parentId">
+                            <treeselect
+                                v-model="form.parentId"
+                                :options="deptOptions"
+                                :normalizer="normalizer"
+                                placeholder="选择上级部门"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="部门名称" prop="deptName">
+                            <el-input
+                                v-model="form.deptName"
+                                placeholder="请输入部门名称"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="显示排序" prop="orderNum">
+                            <el-input-number
+                                v-model="form.orderNum"
+                                controls-position="right"
+                                :min="0"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="负责人" prop="leader">
+                            <el-input
+                                v-model="form.leader"
+                                placeholder="请输入负责人"
+                                maxlength="20"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="联系电话" prop="phone">
+                            <el-input
+                                v-model="form.phone"
+                                placeholder="请输入联系电话"
+                                maxlength="11"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="邮箱" prop="email">
+                            <el-input
+                                v-model="form.email"
+                                placeholder="请输入邮箱"
+                                maxlength="50"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="部门状态">
+                            <el-radio-group v-model="form.status">
+                                <el-radio
+                                    v-for="dict in dict.type.sys_normal_disable"
+                                    :key="dict.value"
+                                    :label="dict.value"
+                                    >{{ dict.label }}
+                                </el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div v-if="config.addAddress || false">
+                    <el-row>
+                        <el-col :span="8">
+                            <el-form-item label="省" prop="province">
+                                <el-input
+                                    v-model="form.province"
+                                    placeholder="请输入省份"
+                                    maxlength="50"
+                                />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="市" prop="city">
+                                <el-input
+                                    v-model="form.city"
+                                    placeholder="请输入市"
+                                    maxlength="50"
+                                />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="县" prop="district">
+                                <el-input
+                                    v-model="form.district"
+                                    placeholder="请输入县"
+                                    maxlength="50"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-form-item label="详细地址" prop="address">
+                            <el-input
+                                v-model="form.address"
+                                type="textarea"
+                                maxlength="200"
+                                show-word-limit
+                                placeholder="请输入详细地址"
+                            />
+                        </el-form-item>
+                    </el-row>
+                </div>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+      </el-card>
+    </div>
+</template>
+
+<script>
+import {
+    listDept,
+    getDept,
+    delDept,
+    addDept,
+    updateDept,
+    listDeptExcludeChild,
+} from '@/api/system/dept'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+    name: 'Dept',
+    computed: {
+        config() {
+            return JSON.parse(localStorage.getItem('systemConfig')) // 获取 JSON 对象
+        },
+    },
+    dicts: ['sys_normal_disable'],
+    components: { Treeselect },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 表格树数据
+            deptList: [],
+            // 部门树选项
+            deptOptions: [],
+            // 弹出层标题
+            title: '',
+            // 是否显示弹出层
+            open: false,
+            // 是否展开，默认全部展开
+            isExpandAll: true,
+            // 重新渲染表格状态
+            refreshTable: true,
+            // 查询参数
+            queryParams: {
+                deptName: undefined,
+                status: undefined,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                parentId: [
+                    {
+                        required: true,
+                        message: '上级部门不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                deptName: [
+                    {
+                        required: true,
+                        message: '部门名称不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                orderNum: [
+                    {
+                        required: true,
+                        message: '显示排序不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                email: [
+                    {
+                        type: 'email',
+                        message: '请输入正确的邮箱地址',
+                        trigger: ['blur', 'change'],
+                    },
+                ],
+                phone: [
+                    {
+                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+                        message: '请输入正确的手机号码',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        /** 查询部门列表 */
+        getList() {
+            this.loading = true
+            listDept(this.queryParams).then((response) => {
+                this.deptList = this.handleTree(response.data, 'deptId')
+                this.loading = false
+            })
+        },
+        /** 转换部门数据结构 */
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children
+            }
+            return {
+                id: node.deptId,
+                label: node.deptName,
+                children: node.children,
+            }
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false
+            this.reset()
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                deptId: undefined,
+                parentId: undefined,
+                deptName: undefined,
+                orderNum: undefined,
+                leader: undefined,
+                phone: undefined,
+                email: undefined,
+                status: '0',
+            }
+            this.resetForm('form')
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.getList()
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm')
+            this.handleQuery()
+        },
+        /** 新增按钮操作 */
+        handleAdd(row) {
+            this.reset()
+            if (row != undefined) {
+                this.form.parentId = row.deptId
+            }
+            this.open = true
+            this.title = '添加部门'
+            listDept().then((response) => {
+                this.deptOptions = this.handleTree(response.data, 'deptId')
+            })
+        },
+        /** 展开/折叠操作 */
+        toggleExpandAll() {
+            this.refreshTable = false
+            this.isExpandAll = !this.isExpandAll
+            this.$nextTick(() => {
+                this.refreshTable = true
+            })
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset()
+            getDept(row.deptId).then((response) => {
+                this.form = response.data
+                this.open = true
+                this.title = '修改部门'
+            })
+            listDeptExcludeChild(row.deptId).then((response) => {
+                this.deptOptions = this.handleTree(response.data, 'deptId')
+            })
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    if (this.form.deptId != undefined) {
+                        updateDept(this.form).then((response) => {
+                            this.$modal.msgSuccess('修改成功')
+                            this.open = false
+                            this.getList()
+                        })
+                    } else {
+                        addDept(this.form).then((response) => {
+                            this.$modal.msgSuccess('新增成功')
+                            this.open = false
+                            this.getList()
+                        })
+                    }
+                }
+            })
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            this.$modal
+                .confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
+                .then(function () {
+                    return delDept(row.deptId)
+                })
+                .then(() => {
+                    this.getList()
+                    this.$modal.msgSuccess('删除成功')
+                })
+                .catch(() => {})
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+/* 新增：统一的操作栏容器样式，用于将所有按钮和工具栏放在右侧 */
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; /* 关键：整体内容靠右对齐 */
+  gap: 10px; /* 统一设置内部元素的间距 */
+  width: 100%;
+
+}
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  padding: 0;
+
+  ::v-deep .el-card__body {
+    padding: 20px !important;
+  }
+}
+
+.table-container {
+  flex: 1;
+  overflow: hidden;
+  margin-bottom: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index c1732b98..3a936bd6 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,527 +1,904 @@
 <template>
     <div class="app-container">
-        <el-form
-            :model="queryParams"
-            ref="queryForm"
-            size="small"
-            :inline="true"
-            v-show="showSearch"
-        >
-          <el-card class="search-box">
-            <el-row style="height: 32px;">
-            <el-form-item label="部门名称" prop="deptName">
+      <!-- 标签页 -->
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <el-tab-pane label="机构" name="org">
+          <!-- 机构管理页面 -->
+          <div class="org-container">
+            <!-- 查询表单 -->
+            <el-form :model="orgQueryParams" ref="orgQueryForm" size="small" :inline="true" label-width="90px" class="query-form">
+              <el-form-item label="机构名称" prop="orgName">
                 <el-input
-                    v-model="queryParams.deptName"
-                    placeholder="请输入部门名称"
-                    clearable
-                    @keyup.enter.native="handleQuery"
-                />
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-                <el-select
-                    v-model="queryParams.status"
-                    placeholder="部门状态"
-                    clearable
-                >
-                    <el-option
-                        v-for="dict in dict.type.sys_normal_disable"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                    />
-                </el-select>
-            </el-form-item>
-            <el-form-item style="float: right">
-                <el-button
-                    type="primary"
-                    icon="el-icon-search"
-                    size="mini"
-                    @click="handleQuery"
-                    >查询</el-button
-                >
-                <el-button
-
-                    icon="el-icon-refresh"
-                    size="mini"
-                    @click="resetQuery"
-                    >重置</el-button
-                >
-            </el-form-item>
-            </el-row>
-          </el-card>
-        </el-form>
-
-      <el-card class="content-box">
-        <el-row :gutter="10" class="mb8">
-          <div class="action-bar">
-            <el-col :span="1.5">
-                <el-button
-                    type="primary"
-                    plain
-                    icon="el-icon-plus"
-                    size="mini"
-                    @click="handleAdd"
-                    v-hasPermi="['system:dept:add']"
-                    >新增
-                </el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button
-                    type="info"
-                    plain
-                    icon="el-icon-sort"
-                    size="mini"
-                    @click="toggleExpandAll"
-                    >展开/折叠
-                </el-button>
-            </el-col>
-            <right-toolbar
-                :showSearch.sync="showSearch"
-                @queryTable="getList"
-            ></right-toolbar>
-          </div>
-        </el-row>
-
-        <el-table
-            v-if="refreshTable"
-            v-loading="loading"
-            :data="deptList"
-            row-key="deptId"
-            :default-expand-all="isExpandAll"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            height="546"
-        >
-            <el-table-column
-                prop="deptName"
-                label="部门名称"
-                min-width="260"
-            ></el-table-column>
-            <el-table-column
-                prop="orderNum"
-                label="排序"
-                min-width="200"
-            ></el-table-column>
-            <el-table-column prop="status" label="状态" min-width="100">
-                <template slot-scope="scope">
-                    <dict-tag
-                        :options="dict.type.sys_normal_disable"
-                        :value="scope.row.status"
-                    />
-                </template>
-            </el-table-column>
-            <el-table-column
-                label="创建时间"
-                align="center"
-                prop="createTime"
-                min-width="200"
-            >
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column
-                label="操作"
-                align="center"
-                min-width="200"
-                class-name="small-padding fixed-width"
-            >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-edit"
-                        @click="handleUpdate(scope.row)"
-                        v-hasPermi="['system:dept:edit']"
-                        >修改
-                    </el-button>
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-plus"
-                        @click="handleAdd(scope.row)"
-                        v-hasPermi="['system:dept:add']"
-                        >新增
-                    </el-button>
-                    <el-button
-                        v-if="scope.row.parentId != 0"
-                        size="mini"
-                        type="text"
-                        icon="el-icon-delete"
-                        @click="handleDelete(scope.row)"
-                        v-hasPermi="['system:dept:remove']"
-                        >删除
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <!-- 添加或修改部门对话框 -->
-        <el-dialog
-            :title="title"
-            :visible.sync="open"
-            width="600px"
-            append-to-body
-        >
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-                <el-row>
-                    <el-col :span="24" v-if="form.parentId !== 0">
-                        <el-form-item label="上级部门" prop="parentId">
-                            <treeselect
-                                v-model="form.parentId"
-                                :options="deptOptions"
-                                :normalizer="normalizer"
-                                placeholder="选择上级部门"
-                            />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="部门名称" prop="deptName">
-                            <el-input
-                                v-model="form.deptName"
-                                placeholder="请输入部门名称"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="显示排序" prop="orderNum">
-                            <el-input-number
-                                v-model="form.orderNum"
-                                controls-position="right"
-                                :min="0"
-                            />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="负责人" prop="leader">
-                            <el-input
-                                v-model="form.leader"
-                                placeholder="请输入负责人"
-                                maxlength="20"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="联系电话" prop="phone">
-                            <el-input
-                                v-model="form.phone"
-                                placeholder="请输入联系电话"
-                                maxlength="11"
-                            />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="邮箱" prop="email">
-                            <el-input
-                                v-model="form.email"
-                                placeholder="请输入邮箱"
-                                maxlength="50"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="部门状态">
-                            <el-radio-group v-model="form.status">
-                                <el-radio
-                                    v-for="dict in dict.type.sys_normal_disable"
-                                    :key="dict.value"
-                                    :label="dict.value"
-                                    >{{ dict.label }}
-                                </el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <div v-if="config.addAddress || false">
-                    <el-row>
-                        <el-col :span="8">
-                            <el-form-item label="省" prop="province">
-                                <el-input
-                                    v-model="form.province"
-                                    placeholder="请输入省份"
-                                    maxlength="50"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="市" prop="city">
-                                <el-input
-                                    v-model="form.city"
-                                    placeholder="请输入市"
-                                    maxlength="50"
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="县" prop="district">
-                                <el-input
-                                    v-model="form.district"
-                                    placeholder="请输入县"
-                                    maxlength="50"
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-form-item label="详细地址" prop="address">
-                            <el-input
-                                v-model="form.address"
-                                type="textarea"
-                                maxlength="200"
-                                show-word-limit
-                                placeholder="请输入详细地址"
-                            />
-                        </el-form-item>
-                    </el-row>
-                </div>
+                  v-model="orgQueryParams.orgName"
+                  placeholder="请输入"
+                  clearable
+                  style="width: 200px">
+                  <i slot="suffix" class="el-input__icon el-icon-edit"></i>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="主管理员" prop="mainAdmin">
+                <el-input
+                  v-model="orgQueryParams.mainAdmin"
+                  placeholder="请输入"
+                  clearable
+                  style="width: 200px">
+                  <i slot="suffix" class="el-input__icon el-icon-edit"></i>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" size="mini" @click="handleOrgQuery">查询</el-button>
+                <el-button size="mini" @click="resetOrgQuery">重置</el-button>
+              </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">确 定</el-button>
-                <el-button @click="cancel">取 消</el-button>
-            </div>
-        </el-dialog>
-      </el-card>
-    </div>
-</template>
 
-<script>
-import {
-    listDept,
-    getDept,
-    delDept,
+            <!-- 操作按钮 -->
+            <div class="action-buttons">
+             <!-- <el-button type="primary" size="mini" @click="handleOrgAdd">新增</el-button>
+              <el-button type="warning" size="mini" @click="handleOrgImport">导入</el-button>
+              <el-button type="danger" size="mini" @click="handleOrgDelete">删除</el-button> -->
+            </div>
+
+            <!-- 机构树形表格 -->
+            <el-table
+              v-loading="orgLoading"
+              :data="orgTreeData"
+              row-key="id"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              border
+              style="width: 100%">
+              <el-table-column type="index" width="50" align="center">
+                <template slot-scope="scope">
+                  <i class="el-icon-menu" style="cursor: move;"></i>
+                </template>
+              </el-table-column>
+              <el-table-column prop="orgName" label="机构名称" min-width="200"  show-overflow-tooltip></el-table-column>
+              <el-table-column prop="level" label="级别" width="120" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.level === '一级机构'" type="warning" size="small">一级机构</el-tag>
+                  <el-tag v-else-if="scope.row.level === '二级机构'" type="success" size="small">二级机构</el-tag>
+                  <el-tag v-else-if="scope.row.level === '三级机构'" type="info" size="small">三级机构</el-tag>
+                  <span v-else>{{ scope.row.level }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="mainAdmin" label="主管理员" width="150" align="center" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="subAdmin" label="子管理员" min-width="200" align="center" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="personCount" label="人数" width="100" align="center"></el-table-column>
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="scope.row.level !== '三级机构'"
+                    type="text"
+                    size="small"
+                    @click="handleAddSubOrg(scope.row)">添加下级机构</el-button>
+                  <el-button type="text" size="small" @click="handleOrgEdit(scope.row)">编辑</el-button>
+                  <el-button type="text" size="small" style="color: #f56c6c;" @click="handleOrgDeleteRow(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="部门" name="dept">
+          <!-- 部门管理页面 -->
+          <div class="dept-container">
+            <div class="dept-layout">
+              <!-- 左侧机构树 -->
+              <div class="org-tree-panel">
+                <div class="tree-search">
+                  <el-input
+                    v-model="orgTreeFilterText"
+                    placeholder="输入机构名称搜索"
+                    prefix-icon="el-icon-search"
+                    size="small"
+                    clearable>
+                  </el-input>
+                </div>
+                <div class="tree-content">
+                  <el-tree
+                    ref="orgTree"
+                    :data="orgTreeList"
+                    :props="{ children: 'children', label: 'orgName' }"
+                    :filter-node-method="filterNode"
+                    node-key="id"
+                    :default-expanded-keys="defaultExpandedKeys"
+                    :highlight-current="true"
+                    @node-click="handleOrgNodeClick">
+                  </el-tree>
+                </div>
+              </div>
+
+              <!-- 右侧部门管理 -->
+              <div class="dept-content-panel">
+                <!-- 查询表单 -->
+                <el-form :model="deptQueryParams" ref="deptQueryForm" size="small" :inline="true" label-width="90px" class="query-form">
+                  <el-form-item label="部门名称" prop="deptName">
+                    <el-input
+                      v-model="deptQueryParams.deptName"
+                      placeholder="请输入"
+                      clearable
+                      style="width: 200px">
+                      <i slot="suffix" class="el-input__icon el-icon-edit"></i>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button size="mini" @click="resetDeptQuery">重置</el-button>
+                    <el-button type="primary" size="mini" @click="handleDeptQuery">查询</el-button>
+                  </el-form-item>
+                </el-form>
+
+                <!-- 当前选中机构和操作按钮 -->
+                <div class="dept-header">
+                  <div class="current-org">{{ currentSelectedOrg || '请选择机构' }}</div>
+                  <div class="action-buttons">
+                   <el-button type="primary" size="mini" @click="handleDeptAdd">新增</el-button>
+                     <!-- <el-button type="warning" size="mini" @click="handleDeptImport">导入</el-button>
+                    <el-button type="danger" size="mini" @click="handleDeptDelete">删除</el-button> -->
+                  </div>
+                </div>
+
+                <!-- 部门树形表格 -->
+                <el-table
+                  v-loading="deptLoading"
+                  :data="deptTableData"
+                  row-key="id"
+                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+                  border
+                  style="width: 100%">
+                  <el-table-column type="index" width="50" align="center">
+                    <template slot-scope="scope">
+                      <i class="el-icon-menu" style="cursor: move;"></i>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="orgName" label="部门名称" min-width="200"  show-overflow-tooltip></el-table-column>
+                  <el-table-column label="操作" width="200" align="center" fixed="right">
+                    <template slot-scope="scope">
+                      <el-button
+                        v-if="!isDeptSecondLevel(scope.row)"
+                        type="text"
+                        size="small"
+                        @click="handleAddSubDept(scope.row)">添加下级</el-button>
+                      <el-button type="text" size="small" style="color: #9c27b0;" @click="handleDeptEdit(scope.row)">编辑</el-button>
+                      <el-button type="text" size="small" style="color: #f56c6c;" @click="handleDeptDeleteRow(scope.row)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 机构新增/编辑对话框 -->
+      <el-dialog
+        :title="orgDialogTitle"
+        :visible.sync="orgDialogVisible"
+        width="600px"
+        @close="resetOrgForm">
+        <el-form ref="orgForm" :model="orgForm" :rules="orgRules" label-width="100px">
+          <el-form-item label="机构名称" prop="orgName">
+            <el-input v-model="orgForm.orgName" placeholder="请输入机构名称" maxlength="50"></el-input>
+          </el-form-item>
+
+          <el-form-item v-if="orgForm.parentId" label="父级机构">
+            <el-input :value="orgForm.parentName" disabled></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="orgDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitOrgForm">确 定</el-button>
+        </div>
+      </el-dialog>
+
+      <!-- 部门新增/编辑对话框 -->
+      <el-dialog
+        :title="deptDialogTitle"
+        :visible.sync="deptDialogVisible"
+        width="600px"
+        @close="resetDeptForm">
+        <el-form ref="deptForm" :model="deptForm" :rules="deptRules" label-width="100px">
+          <el-form-item label="部门名称" prop="orgName">
+            <el-input v-model="deptForm.orgName" placeholder="请输入部门名称" maxlength="50"></el-input>
+          </el-form-item>
+          <el-form-item v-if="deptForm.parentId" label="父级部门">
+            <el-input :value="deptForm.parentName" disabled></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="deptDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitDeptForm">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+
+  <script>
+  import {
+    listOrgTree,
+    listOrgTreeSimple,
+    listDeptByOrg,
+    addOrg,
+    updateOrg,
+    deleteOrg,
     addDept,
     updateDept,
-    listDeptExcludeChild,
-} from '@/api/system/dept'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+    deleteDept,
+    importOrg,
+    importDept
+  } from '@/api/system/newdept';
 
-export default {
-    name: 'Dept',
-    computed: {
-        config() {
-            return JSON.parse(localStorage.getItem('systemConfig')) // 获取 JSON 对象
-        },
-    },
-    dicts: ['sys_normal_disable'],
-    components: { Treeselect },
+  export default {
+    name: "OrgDeptManagement",
     data() {
-        return {
-            // 遮罩层
-            loading: true,
-            // 显示搜索条件
-            showSearch: true,
-            // 表格树数据
-            deptList: [],
-            // 部门树选项
-            deptOptions: [],
-            // 弹出层标题
-            title: '',
-            // 是否显示弹出层
-            open: false,
-            // 是否展开，默认全部展开
-            isExpandAll: true,
-            // 重新渲染表格状态
-            refreshTable: true,
-            // 查询参数
-            queryParams: {
-                deptName: undefined,
-                status: undefined,
-            },
-            // 表单参数
-            form: {},
-            // 表单校验
-            rules: {
-                parentId: [
-                    {
-                        required: true,
-                        message: '上级部门不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                deptName: [
-                    {
-                        required: true,
-                        message: '部门名称不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                orderNum: [
-                    {
-                        required: true,
-                        message: '显示排序不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                email: [
-                    {
-                        type: 'email',
-                        message: '请输入正确的邮箱地址',
-                        trigger: ['blur', 'change'],
-                    },
-                ],
-                phone: [
-                    {
-                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-                        message: '请输入正确的手机号码',
-                        trigger: 'blur',
-                    },
-                ],
-            },
+      return {
+        // 当前激活的标签页
+        activeTab: 'org',
+
+        // ========== 机构管理相关 ==========
+        orgLoading: false,
+        orgQueryParams: {
+          orgName: null,
+          mainAdmin: null,
+          subAdmin: null
+        },
+        orgTreeData: [],
+
+        // ========== 部门管理相关 ==========
+        orgTreeFilterText: '',
+        orgTreeList: [],
+        defaultExpandedKeys: [],
+        currentSelectedOrg: null,
+        currentSelectedOrgId: null,
+        deptLoading: false,
+        deptQueryParams: {
+          deptName: null,
+          mainAdmin: null,
+          subAdmin: null
+        },
+        deptTableData: [],
+
+        // ========== 机构对话框相关 ==========
+        orgDialogVisible: false,
+        orgDialogTitle: '新增机构',
+        orgForm: {
+          id: null,
+          orgName: '',
+          mainAdmin: '',
+          parentId: null,
+          parentName: '',
+          level:''
+        },
+        orgRules: {
+          orgName: [
+            { required: true, message: '请输入机构名称', trigger: 'blur' }
+          ]
+        },
+
+        // ========== 部门对话框相关 ==========
+        deptDialogVisible: false,
+        deptDialogTitle: '新增部门',
+        deptForm: {
+          id: null,
+          orgName: '',
+          parentId: null,
+          parentName: '',
+          orgId: null
+        },
+        deptRules: {
+          orgName: [
+            { required: true, message: '请输入部门名称', trigger: 'blur' }
+          ]
         }
+      };
     },
-    created() {
-        this.getList()
+    watch: {
+      orgTreeFilterText(val) {
+        this.$refs.orgTree.filter(val);
+      }
     },
     methods: {
-        /** 查询部门列表 */
-        getList() {
-            this.loading = true
-            listDept(this.queryParams).then((response) => {
-                this.deptList = this.handleTree(response.data, 'deptId')
-                this.loading = false
-            })
-        },
-        /** 转换部门数据结构 */
-        normalizer(node) {
-            if (node.children && !node.children.length) {
-                delete node.children
+      // ========== 标签页切换 ==========
+      handleTabClick(tab) {
+        if (tab.name === 'org') {
+          // 切换到机构管理
+          this.getOrgList();
+        } else if (tab.name === 'dept') {
+          // 切换到部门管理
+          this.getOrgTree();
+          if (this.currentSelectedOrgId) {
+            this.getDeptList();
+          }
+        }
+      },
+
+      // ========== 机构管理相关方法 ==========
+      // 切换展开/收起
+      toggleExpand(row) {
+        row.expanded = !row.expanded;
+        this.$forceUpdate();
+      },
+
+      // 机构查询
+      handleOrgQuery() {
+        this.getOrgList();
+      },
+
+      // 重置机构查询
+      resetOrgQuery() {
+        this.orgQueryParams = {
+          orgName: null,
+          mainAdmin: null,
+          subAdmin: null
+        };
+        this.getOrgList();
+      },
+
+      // 获取机构列表
+      getOrgList() {
+        this.orgLoading = true;
+        listOrgTree(this.orgQueryParams).then(response => {
+          // 若依框架返回格式：{ code: 200, msg: "操作成功", data: [...] }
+          this.orgTreeData = response.data || [];
+          // 为树形数据添加展开状态
+          this.processOrgTreeData(this.orgTreeData);
+          this.orgLoading = false;
+        }).catch(() => {
+          this.orgLoading = false;
+        });
+      },
+
+      // 处理机构树形数据，添加展开状态
+      processOrgTreeData(data) {
+        if (Array.isArray(data)) {
+          data.forEach(item => {
+            item.expanded = item.expanded !== false; // 默认展开
+            if (item.children && item.children.length > 0) {
+              this.processOrgTreeData(item.children);
             }
-            return {
-                id: node.deptId,
-                label: node.deptName,
-                children: node.children,
+          });
+        }
+      },
+
+      // 新增机构
+      handleOrgAdd() {
+        this.orgDialogTitle = '新增机构';
+        this.orgForm = {
+          id: null,
+          orgName: '',
+          mainAdmin: '',
+          parentId: null,
+          parentName: ''
+        };
+        this.orgDialogVisible = true;
+      },
+
+      // 导入机构
+      handleOrgImport() {
+        this.$modal.msgInfo('导入机构功能');
+        // TODO: 打开导入对话框，调用 importOrg API
+      },
+
+      // 删除机构（批量）
+      handleOrgDelete() {
+        this.$modal.confirm('是否确认删除选中的机构？').then(() => {
+          // TODO: 获取选中的机构ID列表，调用批量删除API
+          this.$modal.msgSuccess('删除成功');
+          this.getOrgList();
+        }).catch(() => {});
+      },
+
+      // 添加下级机构
+      handleAddSubOrg(row) {
+        // 三级机构不能添加下级
+        if (row.level === '三级机构') {
+          this.$message.warning('三级机构不能添加下级机构');
+          return;
+        }
+        this.orgDialogTitle = '添加下级机构';
+        this.orgForm = {
+          id: null,
+          orgName: '',
+          mainAdmin: '',
+          parentId: row.id || row.orgId,
+          parentName: row.orgName,
+          level: row.level
+        };
+        this.orgDialogVisible = true;
+      },
+
+      // 编辑机构
+      handleOrgEdit(row) {
+        this.orgDialogTitle = '编辑机构';
+        this.orgForm = {
+          id: row.id || row.orgId,
+          orgName: row.orgName || '',
+          mainAdmin: row.mainAdmin || '',
+          parentId: row.parentId,
+          parentName: ''
+        };
+        // 如果有父级，查找父级名称
+        if (this.orgForm.parentId) {
+          const parentOrg = this.findOrgById(this.orgTreeData, this.orgForm.parentId);
+          if (parentOrg) {
+            this.orgForm.parentName = parentOrg.orgName;
+          }
+        }
+        this.orgDialogVisible = true;
+      },
+
+      // 查找机构（递归）
+      findOrgById(data, id) {
+        for (let item of data) {
+          if ((item.id || item.orgId) === id) {
+            return item;
+          }
+          if (item.children && item.children.length > 0) {
+            const found = this.findOrgById(item.children, id);
+            if (found) return found;
+          }
+        }
+        return null;
+      },
+
+      // 提交机构表单
+      submitOrgForm() {
+        this.$refs.orgForm.validate(valid => {
+          if (valid) {
+            const formData = {
+              orgName: this.orgForm.orgName,
+              level: this.orgForm.level,
+              mainAdmin: this.orgForm.mainAdmin,
+              parentId: this.orgForm.parentId || null
+            };
+
+            if (this.orgForm.id) {
+              // 编辑
+              formData.id = this.orgForm.id;
+              updateOrg(formData).then(() => {
+                this.$modal.msgSuccess('修改成功');
+                this.orgDialogVisible = false;
+                this.getOrgList();
+              }).catch(() => {});
+            } else {
+              // 新增
+              addOrg(formData).then(() => {
+                this.$modal.msgSuccess('新增成功');
+                this.orgDialogVisible = false;
+                this.getOrgList();
+              }).catch(() => {});
             }
-        },
-        // 取消按钮
-        cancel() {
-            this.open = false
-            this.reset()
-        },
-        // 表单重置
-        reset() {
-            this.form = {
-                deptId: undefined,
-                parentId: undefined,
-                deptName: undefined,
-                orderNum: undefined,
-                leader: undefined,
-                phone: undefined,
-                email: undefined,
-                status: '0',
+          }
+        });
+      },
+
+      // 重置机构表单
+      resetOrgForm() {
+        this.$refs.orgForm && this.$refs.orgForm.resetFields();
+        this.orgForm = {
+          id: null,
+          orgName: '',
+          mainAdmin: '',
+          parentId: null,
+          parentName: ''
+        };
+      },
+
+      // 删除机构（单行）
+      handleOrgDeleteRow(row) {
+        this.$modal.confirm('是否确认删除机构"' + row.orgName + '"？').then(() => {
+          deleteOrg(row.id || row.orgId).then(() => {
+            this.$modal.msgSuccess('删除成功');
+            this.getOrgList();
+          }).catch(() => {});
+        }).catch(() => {});
+      },
+
+      // ========== 部门管理相关方法 ==========
+      // 树节点过滤
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.orgName.indexOf(value) !== -1;
+      },
+
+      // 机构树节点点击
+      handleOrgNodeClick(data) {
+        this.currentSelectedOrg = data.orgName;
+        this.currentSelectedOrgId = data.id || data.orgId;
+        this.getDeptList();
+      },
+
+      // 获取机构树（用于部门管理左侧）
+      getOrgTree() {
+        listOrgTreeSimple().then(response => {
+          // 若依框架返回格式：{ code: 200, msg: "操作成功", data: [...] }
+          this.orgTreeList = response.data || [];
+          // 设置默认展开的节点（展开第一级）
+          if (this.orgTreeList.length > 0) {
+            this.defaultExpandedKeys = this.getFirstLevelKeys(this.orgTreeList);
+            // 如果还没有选中机构，默认选中第一个
+            if (!this.currentSelectedOrgId && this.orgTreeList.length > 0) {
+              const firstNode = this.findFirstLeafNode(this.orgTreeList);
+              if (firstNode) {
+                this.currentSelectedOrg = firstNode.orgName;
+                this.currentSelectedOrgId = firstNode.id || firstNode.orgId;
+                this.getDeptList();
+              }
             }
-            this.resetForm('form')
-        },
-        /** 搜索按钮操作 */
-        handleQuery() {
-            this.getList()
-        },
-        /** 重置按钮操作 */
-        resetQuery() {
-            this.resetForm('queryForm')
-            this.handleQuery()
-        },
-        /** 新增按钮操作 */
-        handleAdd(row) {
-            this.reset()
-            if (row != undefined) {
-                this.form.parentId = row.deptId
+          }
+        }).catch(() => {});
+      },
+
+      // 获取第一级节点的key
+      getFirstLevelKeys(data) {
+        const keys = [];
+        if (Array.isArray(data)) {
+          data.forEach(item => {
+            keys.push(item.id || item.orgId);
+          });
+        }
+        return keys;
+      },
+
+      // 查找第一个叶子节点
+      findFirstLeafNode(data) {
+        if (Array.isArray(data) && data.length > 0) {
+          for (let item of data) {
+            if (!item.children || item.children.length === 0) {
+              return item;
+            } else {
+              const leaf = this.findFirstLeafNode(item.children);
+              if (leaf) return leaf;
             }
-            this.open = true
-            this.title = '添加部门'
-            listDept().then((response) => {
-                this.deptOptions = this.handleTree(response.data, 'deptId')
-            })
-        },
-        /** 展开/折叠操作 */
-        toggleExpandAll() {
-            this.refreshTable = false
-            this.isExpandAll = !this.isExpandAll
-            this.$nextTick(() => {
-                this.refreshTable = true
-            })
-        },
-        /** 修改按钮操作 */
-        handleUpdate(row) {
-            this.reset()
-            getDept(row.deptId).then((response) => {
-                this.form = response.data
-                this.open = true
-                this.title = '修改部门'
-            })
-            listDeptExcludeChild(row.deptId).then((response) => {
-                this.deptOptions = this.handleTree(response.data, 'deptId')
-            })
-        },
-        /** 提交按钮 */
-        submitForm: function () {
-            this.$refs['form'].validate((valid) => {
-                if (valid) {
-                    if (this.form.deptId != undefined) {
-                        updateDept(this.form).then((response) => {
-                            this.$modal.msgSuccess('修改成功')
-                            this.open = false
-                            this.getList()
-                        })
-                    } else {
-                        addDept(this.form).then((response) => {
-                            this.$modal.msgSuccess('新增成功')
-                            this.open = false
-                            this.getList()
-                        })
-                    }
-                }
-            })
-        },
-        /** 删除按钮操作 */
-        handleDelete(row) {
-            this.$modal
-                .confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
-                .then(function () {
-                    return delDept(row.deptId)
-                })
-                .then(() => {
-                    this.getList()
-                    this.$modal.msgSuccess('删除成功')
-                })
-                .catch(() => {})
-        },
+          }
+        }
+        return null;
+      },
+
+      // 部门查询
+      handleDeptQuery() {
+        this.getDeptList();
+      },
+
+      // 重置部门查询
+      resetDeptQuery() {
+        this.deptQueryParams = {
+          deptName: null,
+          mainAdmin: null,
+          subAdmin: null
+        };
+        this.getDeptList();
+      },
+
+      // 获取部门列表（树形结构）
+      getDeptList() {
+        if (!this.currentSelectedOrgId) {
+          this.$message.warning('请先选择机构');
+          return;
+        }
+        this.deptLoading = true;
+        const queryParams = {
+          ...this.deptQueryParams
+        };
+        listDeptByOrg(this.currentSelectedOrgId, queryParams).then(response => {
+          // 若依框架返回格式：{ code: 200, msg: "操作成功", data: [...] }
+          this.deptTableData = response.data || response.rows || [];
+          // 处理树形数据，添加展开状态和层级信息
+          this.processDeptTreeData(this.deptTableData, 1);
+          this.deptLoading = false;
+        }).catch(() => {
+          this.deptLoading = false;
+        });
+      },
+
+      // 处理部门树形数据，添加展开状态和层级信息
+      processDeptTreeData(data, level = 1) {
+        if (Array.isArray(data)) {
+          data.forEach(item => {
+            item.expanded = item.expanded !== false; // 默认展开
+            item.deptLevel = level; // 设置部门层级
+            if (item.children && item.children.length > 0) {
+              this.processDeptTreeData(item.children, level + 1);
+            }
+          });
+        }
+      },
+
+      // 判断是否为二级部门
+      isDeptSecondLevel(row) {
+        return row.deptLevel === 2;
+      },
+
+      // 新增部门
+      handleDeptAdd() {
+        if (!this.currentSelectedOrgId) {
+          this.$message.warning('请先选择机构，然后再新增部门');
+          return;
+        }
+        this.deptDialogTitle = '新增部门';
+        this.deptForm = {
+          id: null,
+          orgName: '',
+          parentId: null,
+          parentName: '',
+          orgId: this.currentSelectedOrgId
+        };
+        this.deptDialogVisible = true;
+      },
+
+      // 导入部门
+      handleDeptImport() {
+        if (!this.currentSelectedOrgId) {
+          this.$message.warning('请先选择机构');
+          return;
+        }
+        this.$modal.msgInfo('导入部门功能');
+        // TODO: 打开导入对话框，调用 importDept API
+      },
+
+      // 删除部门（批量）
+      handleDeptDelete() {
+        this.$modal.confirm('是否确认删除选中的部门？').then(() => {
+          // TODO: 获取选中的部门ID列表，调用批量删除API
+          this.$modal.msgSuccess('删除成功');
+          this.getDeptList();
+        }).catch(() => {});
+      },
+
+      // 添加下级部门
+      handleAddSubDept(row) {
+        // 二级部门不能添加下级
+        if (this.isDeptSecondLevel(row)) {
+          this.$message.warning('二级部门不能添加下级部门');
+          return;
+        }
+        if (!this.currentSelectedOrgId) {
+          this.$message.warning('请先选择机构');
+          return;
+        }
+        this.deptDialogTitle = '添加下级部门';
+        this.deptForm = {
+          id: null,
+          orgName: '',
+          parentId: row.id || row.orgId,
+          parentName: row.orgName || row.deptName || row.name,
+          orgId: this.currentSelectedOrgId
+        };
+        this.deptDialogVisible = true;
+      },
+
+      // 编辑部门
+      handleDeptEdit(row) {
+        if (!this.currentSelectedOrgId) {
+          this.$message.warning('请先选择机构');
+          return;
+        }
+        this.deptDialogTitle = '编辑部门';
+        this.deptForm = {
+          id: row.id || row.orgId,
+          orgName: row.orgName || row.deptName || row.name || '',
+          parentId: row.parentId,
+          parentName: '',
+          orgId: this.currentSelectedOrgId
+        };
+        // 如果有父级，查找父级名称
+        if (this.deptForm.parentId) {
+          const parentDept = this.findDeptById(this.deptTableData, this.deptForm.parentId);
+          if (parentDept) {
+            this.deptForm.parentName = parentDept.orgName || parentDept.deptName || parentDept.name;
+          }
+        }
+        this.deptDialogVisible = true;
+      },
+
+      // 查找部门（递归）
+      findDeptById(data, id) {
+        for (let item of data) {
+          if ((item.id || item.orgId) === id) {
+            return item;
+          }
+          if (item.children && item.children.length > 0) {
+            const found = this.findDeptById(item.children, id);
+            if (found) return found;
+          }
+        }
+        return null;
+      },
+
+      // 提交部门表单
+      submitDeptForm() {
+        this.$refs.deptForm.validate(valid => {
+          if (valid) {
+            const formData = {
+              orgName: this.deptForm.orgName,
+              parentId: this.deptForm.parentId || null,
+              orgId: this.deptForm.orgId
+            };
+
+            if (this.deptForm.id) {
+              // 编辑
+              formData.id = this.deptForm.id;
+              updateDept(formData).then(() => {
+                this.$modal.msgSuccess('修改成功');
+                this.deptDialogVisible = false;
+                this.getDeptList();
+              }).catch(() => {});
+            } else {
+              // 新增
+              addDept(formData).then(() => {
+                this.$modal.msgSuccess('新增成功');
+                this.deptDialogVisible = false;
+                this.getDeptList();
+              }).catch(() => {});
+            }
+          }
+        });
+      },
+
+      // 重置部门表单
+      resetDeptForm() {
+        this.$refs.deptForm && this.$refs.deptForm.resetFields();
+        this.deptForm = {
+          id: null,
+          orgName: '',
+          parentId: null,
+          parentName: '',
+          orgId: this.currentSelectedOrgId
+        };
+      },
+
+      // 删除部门（单行）
+      handleDeptDeleteRow(row) {
+        const deptName = row.orgName || row.deptName || row.name;
+        this.$modal.confirm('是否确认删除部门"' + deptName + '"？').then(() => {
+          deleteDept(row.id || row.orgId).then(() => {
+            this.$modal.msgSuccess('删除成功');
+            this.getDeptList();
+          }).catch(() => {});
+        }).catch(() => {});
+      }
     },
-}
-</script>
+    mounted() {
+      // 初始化数据
+      this.getOrgList();
+      // 如果默认是部门标签页，也需要加载机构树
+      if (this.activeTab === 'dept') {
+        this.getOrgTree();
+      }
+    }
+  };
+  </script>
 
-<style lang="scss" scoped>
-/* 新增：统一的操作栏容器样式，用于将所有按钮和工具栏放在右侧 */
-.action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end; /* 关键：整体内容靠右对齐 */
-  gap: 10px; /* 统一设置内部元素的间距 */
-  width: 100%;
-
-}
-
-.search-box {
-  margin-bottom: 20px;
-  border-radius: 8px;
-  padding: 0;
-
-  ::v-deep .el-card__body {
-    padding: 20px !important;
+  <style scoped lang="scss">
+  .app-container {
+    padding: 20px;
+    background: #f0f2f5;
+    min-height: calc(100vh - 84px);
   }
-}
 
-.table-container {
-  flex: 1;
-  overflow: hidden;
-  margin-bottom: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-</style>
+  // ========== 机构管理样式 ==========
+  .org-container {
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+  }
+
+  // ========== 部门管理样式 ==========
+  .dept-container {
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+  }
+
+  .dept-layout {
+    display: flex;
+    gap: 20px;
+    height: calc(100vh - 200px);
+  }
+
+  .org-tree-panel {
+    width: 300px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tree-search {
+    padding: 10px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  .tree-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+  }
+
+  .dept-content-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dept-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 10px 0;
+  }
+
+  .current-org {
+    font-size: 16px;
+    font-weight: bold;
+    color: #303133;
+  }
+
+  // ========== 通用样式 ==========
+  .query-form {
+    margin-bottom: 15px;
+    padding: 15px;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+
+  .action-buttons {
+    margin-bottom: 15px;
+
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+
+  // 表格样式调整
+  ::v-deep .el-table {
+    .el-table__row {
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+
+  // 树节点选中样式
+  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+
+  // 标签页样式
+  ::v-deep .el-tabs {
+    .el-tabs__header {
+      margin-bottom: 20px;
+      background: #fff;
+      padding: 0 20px;
+      border-radius: 4px 4px 0 0;
+    }
+
+    .el-tabs__item {
+      height: 50px;
+      line-height: 50px;
+      font-size: 14px;
+
+      &.is-active {
+        color: #409eff;
+        font-weight: bold;
+      }
+    }
+
+    .el-tabs__active-bar {
+      background-color: #409eff;
+    }
+  }
+
+  // 输入框图标样式
+  ::v-deep .el-input__suffix {
+    .el-icon-edit {
+      color: #909399;
+      cursor: pointer;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  </style>