feat 项目负责人加载

src/views/admin/project/components/project-form.vue

@@ -32,7 +32,7 @@
 
       <!-- 右侧：项目人员列表 -->
       <div class="right-panel">
-        <h4 class="panel-title">项目人员列表</h4>
+        <h4 class="panel-title">人员列表</h4>
         <div class="user-actions">
           <el-button type="primary" size="default" @click="handleAddUser">添加人员</el-button>
         </div>
@@ -43,7 +43,11 @@
           border
           max-height="500"
         >
-          <el-table-column prop="userName" label="用户名称" min-width="120" />
+          <el-table-column label="用户名称" min-width="120">
+            <template #default="{ row }">
+              <span>{{ row.userName || getUserName(row.userId) }}</span>
+            </template>
+          </el-table-column>
           <el-table-column label="审核权限" width="180">
             <template #default="{ row }">
               <div class="permission-grid">
@@ -109,7 +113,7 @@
 </template>
 
 <script setup lang="ts" name="admin/project/form">
-import { ref, reactive, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, defineAsyncComponent, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ProjectApi } from '/@/api/admin/ProjectApi'
@@ -173,7 +177,21 @@ const state = reactive({
 
 const rules = reactive<FormRules>({
   projectNo: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
-  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
+  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
+  principalIds: [
+    { 
+      required: true, 
+      message: '请选择责任人', 
+      trigger: 'change',
+      validator: (rule: any, value: any, callback: any) => {
+        if (!Array.isArray(value) || value.length === 0) {
+          callback(new Error('请选择责任人'))
+        } else {
+          callback()
+        }
+      }
+    }
+  ]
 })
 
 /** 获取负责人列表 */
@@ -187,13 +205,17 @@ const getPrincipalOptions = async () => {
 
     state.principalOptions = res.data?.list?.map((item: any) => ({
       id: item.id,
-      name: item.userName
+      name: item.name
     })) || []
   } catch (error) {
     console.error('获取用户列表失败:', error)
   }
 }
 
+const getUserName = (userId: number) => {
+  return state.principalOptions.find((a) => a.id === userId)?.name || ''
+}
+
 const open = async (id?: number) => {
   // 先打开弹窗，避免loading遮罩造成的刷新感
   dialogVisible.value = true
@@ -205,35 +227,44 @@ const open = async (id?: number) => {
       const res = await new ProjectApi().get({ id }, { loading: false })
       if (res?.success && res.data) {
         const formData = res.data as any
-        form.principalIds = Array.isArray(res.data.projectPrincipals)
-          ? res.data.projectPrincipals.map((item: any) => item.userId)
-          : []
-
-        // TODO 负责人多选控件不能加载问题
-        console.log("form.principalIds", form.principalIds)
-
-        form.projectUsers = Array.isArray(formData.projectUsers) ? formData.projectUsers : []
-        form.projectUsers.forEach((item: any) => {
-          item.userName = state.principalOptions.find((a) => a.id === item.userId)?.name || ''
-        })
+        
+        // 处理责任人数据
+        let principalIds: number[] = []
+        if (Array.isArray(res.data.projectPrincipals)) {
+          principalIds = res.data.projectPrincipals.map((item: any) => item.userId).filter((id: any) => typeof id === 'number')
+        }
+        
+        // 处理项目用户数据
+        let projectUsers = []
+        if (Array.isArray(formData.projectUsers)) {
+          projectUsers = formData.projectUsers
+        }
 
+        // 重新赋值整个表单对象，避免响应式问题
         Object.assign(form, {
           id: formData.id,
           projectNo: formData.projectNo || '',
           projectName: formData.projectName || '',
-          principalIds: formData.projectPrincipalIds || [],
-          projectUsers: formData.projectUsers || [],
+          principalIds: [...principalIds], // 使用展开运算符创建新数组
+          projectUsers: [...projectUsers], // 使用展开运算符创建新数组
           status: formData.status !== undefined ? formData.status : true
         })
+        
+        console.log('编辑数据加载:', {
+          principalIds: form.principalIds,
+          projectUsers: form.projectUsers
+        })
       }
     } catch (error) {
       console.error('获取项目详情失败:', error)
+      ElMessage.error('获取项目详情失败')
     } finally {
       state.sureLoading = false
     }
   } else {
     // 新增模式，直接重置表单
     Object.assign(form, {
+      id: undefined,
       projectNo: '',
       projectName: '',
       principalIds: [],
@@ -241,6 +272,8 @@ const open = async (id?: number) => {
       status: true
     })
   }
+
+  // 确保选项数据已加载
   if (state.principalOptions.length === 0) {
     await getPrincipalOptions()
   }
@@ -329,6 +362,16 @@ const handleRemoveUser = (index: number) => {
   form.projectUsers.splice(index, 1)
 }
 
+// 监听 principalIds 变化，用于调试
+watch(() => form.principalIds, (newVal, oldVal) => {
+  console.log('principalIds 变化:', {
+    新值: newVal,
+    旧值: oldVal,
+    类型: Array.isArray(newVal) ? 'Array' : typeof newVal,
+    长度: Array.isArray(newVal) ? newVal.length : 'N/A'
+  })
+}, { deep: true })
+
 onMounted(async () => {
   // 组件挂载时就加载选项数据，避免弹窗打开时的延迟
   await Promise.all([