修改机构

src/api/org/index.ts

@@ -48,5 +48,10 @@ export const OrgApi = {
   // 查询上级机构
   getParentOrgList: async () => {
     return await request.get({ url: `/system/org/parent-org-list` })
+  },
+
+  // 查询机构列表
+  getOrgList: async () => {
+    return await request.get({ url: `/system/org/list` })
   }
 }

src/api/system/user/index.ts

@@ -4,6 +4,8 @@ export interface UserVO {
   id: number
   username: string
   nickname: string
+  orgId: number
+  orgName: string
   deptId: number
   postIds: string[]
   email: string

src/views/system/user/OrgList.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="orgName" class="mb-20px" clearable placeholder="请输入机构名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-scrollbar height="400px">
+      <div class="org-list">
+        <div
+          v-for="org in filteredOrgList"
+          :key="org.id"
+          class="org-item"
+          :class="{ 'org-item-active': currentOrgId === org.id }"
+          @click="handleOrgClick(org)"
+        >
+          <div class="org-item-content">
+            <Icon icon="ep:office-building" class="org-icon" />
+            <span class="org-name" :title="org.orgName">{{ org.orgName }}</span>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { OrgApi, type OrgVO } from '@/api/org'
+
+defineOptions({ name: 'SystemUserOrgList' })
+
+const orgName = ref('')
+const orgList = ref<OrgVO[]>([]) // 机构列表
+const currentOrgId = ref<number | undefined>()
+
+/** 获得机构列表 */
+const getList = async () => {
+  try {
+    const res = await OrgApi.getOrgList()
+    orgList.value = res || []
+  } catch (error) {
+    console.error('获取机构列表失败:', error)
+    orgList.value = []
+  }
+}
+
+/** 过滤机构列表 */
+const filteredOrgList = computed(() => {
+  if (!orgName.value) {
+    return orgList.value
+  }
+  return orgList.value.filter((org) => org.orgName.includes(orgName.value))
+})
+
+/** 处理机构被点击 */
+const handleOrgClick = (org: OrgVO) => {
+  // 如果点击的是当前选中的机构，则取消选中
+  if (currentOrgId.value === org.id) {
+    currentOrgId.value = undefined
+    emits('org-click', undefined)
+  } else {
+    // 选中新的机构
+    currentOrgId.value = org.id
+    emits('org-click', org)
+  }
+}
+
+const emits = defineEmits<{
+  'org-click': [org: OrgVO | undefined]
+}>()
+
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.org-list {
+  .org-item {
+    padding: 8px 12px;
+    margin-bottom: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-9);
+      border-color: var(--el-color-primary-light-7);
+    }
+
+    &.org-item-active {
+      background-color: var(--el-color-primary-light-8);
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
+    }
+
+    .org-item-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .org-icon {
+        font-size: 16px;
+        color: var(--el-color-info);
+      }
+
+      .org-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+      }
+    }
+
+    &.org-item-active .org-icon {
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>

src/views/system/user/UserForm.vue

@@ -13,7 +13,7 @@
             <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <!-- <el-col :span="12">
           <el-form-item label="归属部门" prop="deptId">
             <el-tree-select
               v-model="formData.deptId"
@@ -24,6 +24,18 @@
               placeholder="请选择归属部门"
             />
           </el-form-item>
+        </el-col> -->
+        <el-col :span="12">
+          <el-form-item label="所属机构" prop="name">
+            <el-select v-model="formData.orgId" placeholder="请选择所属机构">
+              <el-option
+                v-for="item in orgList"
+                :key="item.id"
+                :label="item.orgName"
+                :value="item.orgId"
+              />
+            </el-select>
+          </el-form-item>
         </el-col>
       </el-row>
       <el-row>
@@ -68,7 +80,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <!-- <el-col :span="12">
           <el-form-item label="岗位">
             <el-select v-model="formData.postIds" multiple placeholder="请选择">
               <el-option
@@ -79,7 +91,7 @@
               />
             </el-select>
           </el-form-item>
-        </el-col>
+        </el-col> -->
       </el-row>
       <el-row>
         <el-col :span="24">
@@ -103,6 +115,7 @@ import * as PostApi from '@/api/system/post'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
 import { FormRules } from 'element-plus'
+import { OrgApi, OrgVO } from '@/api/org'
 
 defineOptions({ name: 'SystemUserForm' })
 
@@ -116,6 +129,8 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   nickname: '',
   deptId: '',
+  orgId: '',
+  orgName: '',
   mobile: '',
   email: '',
   id: undefined,
@@ -149,6 +164,22 @@ const formRules = reactive<FormRules>({
 const formRef = ref() // 表单 Ref
 const deptList = ref<Tree[]>([]) // 树形结构
 const postList = ref([] as PostApi.PostVO[]) // 岗位列表
+const orgList = ref([] as OrgVO[]) // 机构列表
+
+// 监听机构选择变化，自动设置orgName
+watch(
+  () => formData.value.orgId,
+  (newOrgId) => {
+    if (newOrgId) {
+      const selectedOrg = orgList.value.find((org) => org.orgId === Number(newOrgId))
+      if (selectedOrg) {
+        formData.value.orgName = selectedOrg.orgName
+      }
+    } else {
+      formData.value.orgName = ''
+    }
+  }
+)
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -169,6 +200,9 @@ const open = async (type: string, id?: number) => {
   deptList.value = handleTree(await DeptApi.getSimpleDeptList())
   // 加载岗位列表
   postList.value = await PostApi.getSimplePostList()
+  // 加载机构列表
+  const orgResponse = await OrgApi.getOrgList()
+  orgList.value = Array.isArray(orgResponse) ? orgResponse : orgResponse.list || []
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -182,12 +216,18 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as UserApi.UserVO
+    // 确保orgId为数字类型
+    const submitData = {
+      ...formData.value,
+      orgId: formData.value.orgId ? Number(formData.value.orgId) : undefined
+    }
+    const data = submitData as unknown as UserApi.UserVO
     if (formType.value === 'create') {
       await UserApi.createUser(data)
       message.success(t('common.createSuccess'))
     } else {
       await UserApi.updateUser(data)
+      console.log(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -203,6 +243,8 @@ const resetForm = () => {
   formData.value = {
     nickname: '',
     deptId: '',
+    orgId: '',
+    orgName: '',
     mobile: '',
     email: '',
     id: undefined,

src/views/system/user/index.vue

@@ -4,10 +4,10 @@
   <doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
 
   <el-row :gutter="20">
-    <!-- 左侧部门树 -->
+    <!-- 左侧机构列表 -->
     <el-col :span="4" :xs="24">
       <ContentWrap class="h-1/1">
-        <DeptTree @node-click="handleDeptNodeClick" />
+        <OrgList @org-click="handleOrgNodeClick" />
       </ContentWrap>
     </el-col>
     <el-col :span="20" :xs="24">
@@ -119,12 +119,19 @@
             prop="nickname"
             :show-overflow-tooltip="true"
           />
-          <el-table-column
+          <!-- <el-table-column
             label="部门"
             align="center"
             key="deptName"
             prop="deptName"
             :show-overflow-tooltip="true"
+          /> -->
+          <el-table-column
+            label="所属机构"
+            align="center"
+            key="orgName"
+            prop="orgName"
+            :show-overflow-tooltip="true"
           />
           <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
           <el-table-column label="状态" key="status">
@@ -219,7 +226,7 @@ import * as UserApi from '@/api/system/user'
 import UserForm from './UserForm.vue'
 import UserImportForm from './UserImportForm.vue'
 import UserAssignRoleForm from './UserAssignRoleForm.vue'
-import DeptTree from './DeptTree.vue'
+import OrgList from './OrgList.vue'
 
 defineOptions({ name: 'SystemUser' })
 
@@ -236,7 +243,9 @@ const queryParams = reactive({
   mobile: undefined,
   status: undefined,
   deptId: undefined,
-  createTime: []
+  createTime: [],
+  orgId: undefined,
+  orgName: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 
@@ -264,15 +273,17 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 处理部门被点击 */
-const handleDeptNodeClick = async (row: any) => {
-  if (row === undefined) {
-    queryParams.deptId = undefined
-    await getList()
+/** 处理机构被点击 */
+const handleOrgNodeClick = async (org: any) => {
+  if (org === undefined) {
+    queryParams.orgId = undefined
+    queryParams.orgName = undefined
   } else {
-    queryParams.deptId = row.id
-    await getList()
+    queryParams.orgId = org.orgId || org.id // 尝试两个字段
+    queryParams.orgName = org.orgName
   }
+  queryParams.pageNo = 1 // 重置到第一页
+  await getList()
 }
 
 /** 添加/修改操作 */