优化获客链接管理页面展示逻辑

src/api/qw/acquisitionAssistant.js

@@ -40,13 +40,13 @@ export function qwUserCompanyList(data) {
 
 /**
  * 批量获取企微用户详情
- * @param {Array} qwUserIds 企微用户ID列表
+ * @param {Array} qwUserTableIds 企微用户主键ID列表
  */
-export function getQwUserListByIds(qwUserIds) {
+export function getQwUserListByIds(qwUserTableIds) {
   return request({
-    url: '/qw/acquisitionAssistant/qwUserListByIds',
+    url: '/qw/acquisitionAssistant/getQwUserListByIds',
     method: 'post',
-    data: qwUserIds
+    data: qwUserTableIds
   })
 }
 

src/views/qw/acquisitionAssistant/index.vue

@@ -181,16 +181,6 @@
           </div>
         </el-form-item>
 
-<!--        <el-form-item label="是否标记来源" prop="markSource">-->
-<!--          <el-radio-group v-model="form.markSource">-->
-<!--            <el-radio :label="true">标记来源</el-radio>    &lt;!&ndash; true 表示标记来源 &ndash;&gt;-->
-<!--            <el-radio :label="false">不标记来源</el-radio>  &lt;!&ndash; false 表示不标记来源 &ndash;&gt;-->
-<!--          </el-radio-group>-->
-<!--          <div class="el-form-item__tips" style="color: #909399; font-size: 12px; margin-top: 5px;">-->
-<!--            注意：标记来源功能仅对「营销获客」应用生效-->
-<!--          </div>-->
-<!--        </el-form-item>-->
-
         <el-form-item label="优先分配类型" prop="priorityType">
           <el-radio-group v-model="form.priorityType">
             <el-radio :label="0">不启用</el-radio>
@@ -200,9 +190,9 @@
         </el-form-item>
 
         <!-- 关联成员选择器（企微用户） -->
-        <el-form-item label="关联成员" prop="userListParam">
+        <el-form-item label="关联成员" prop="selectedUserIds">
           <el-select
-            v-model="form.userListParam"
+            v-model="form.selectedUserIds"
             multiple
             filterable
             remote
@@ -215,18 +205,19 @@
             style="width: 100%"
             @visible-change="handleSelectVisible"
             @focus="loadUsersByCorp"
+            @change="handleUserSelectionChange"
           >
             <el-option
               v-for="item in qwUserOptions"
-              :key="`${item.qwUserId}_${item.corpId}`"
+              :key="item.id"
               :label="`${item.qwUserName} (${item.qwUserId})`"
-              :value="item.qwUserId"
+              :value="item.id"
             >
               <span style="float: left">{{ item.qwUserName }}</span>
               <span style="float: right; color: #8492a6; font-size: 13px">{{ item.qwUserId }}</span>
               <div style="clear: both;"></div>
               <div style="font-size: 12px; color: #999;" v-if="item.department">
-                部门ID：{{ item.department }}
+                部门：{{ item.departmentName || item.department }} | 本地ID：{{ item.id }}
               </div>
             </el-option>
 
@@ -248,13 +239,33 @@
             当前主体：{{ getCorpName(queryParams.corpId) }}
           </div>
 
-          <!-- 已选数量提示 -->
-          <div v-if="form.userListParam && form.userListParam.length" class="el-form-item__tips" style="color: #909399; font-size: 12px; margin-top: 5px;">
-            已选择 {{ form.userListParam.length }} 名成员（最多可选500人）
+          <!-- 已选信息展示 -->
+          <div v-if="form.selectedUserIds && form.selectedUserIds.length" class="el-form-item__tips" style="color: #909399; font-size: 12px; margin-top: 5px;">
+            <div>已选择 {{ form.selectedUserIds.length }} 名成员</div>
+<!--            <div>企微用户ID: {{ form.userListParam ? form.userListParam.join(', ') : '-' }}</div>-->
+<!--            <div>本地数据库ID: {{ form.qwUserTableIdList ? form.qwUserTableIdList.join(', ') : '-' }}</div>-->
             <el-button type="text" @click="clearSelectedUsers" size="mini">清空</el-button>
           </div>
         </el-form-item>
 
+        <!-- 部门选择（如果有部门选择组件） -->
+        <el-form-item label="关联部门" prop="departmentListParam" v-if="showDepartment">
+          <el-select
+            v-model="form.departmentListParam"
+            multiple
+            filterable
+            placeholder="请选择部门"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in departmentOptions"
+              :key="item.id"
+              :label="item.departmentName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" maxlength="200" />
         </el-form-item>
@@ -283,24 +294,13 @@
           </span>
         </el-form-item>
 
-<!--        <el-form-item label="是否标记来源">-->
-<!--          <el-tag :type="detailData.markSource === true ? 'success' : 'info'">-->
-<!--            {{ detailData.markSource === true ? '标记来源' : '不标记来源' }}-->
-<!--          </el-tag>-->
-<!--          <span style="margin-left: 8px; color: #909399; font-size: 12px;">-->
-<!--            (markSource = {{ detailData.markSource }})-->
-<!--          </span>-->
-<!--        </el-form-item>-->
         <el-form-item label="优先分配类型">
           <span v-if="detailData.priorityType === 0">不启用</span>
           <span v-else-if="detailData.priorityType === 1">全企业范围内优先分配给有好友关系的</span>
           <span v-else-if="detailData.priorityType === 2">指定范围内优先分配有好友关系的</span>
         </el-form-item>
         <el-form-item label="关联成员">
-          <span v-if="detailData.userListParam && detailData.userListParam.length">
-            {{ formatSelectedUsers(detailData.userListParam) }}
-          </span>
-          <span v-else>-</span>
+          <span>{{ formatDetailMembers(detailData.qwUserTableIdList) }}</span>
         </el-form-item>
         <el-form-item label="优先分配成员" v-if="detailData.priorityType === 2">
           {{ detailData.priorityUserListParam ? detailData.priorityUserListParam.join(', ') : '-' }}
@@ -409,6 +409,8 @@ export default {
       qwLoading: false,
       userLoading: false,
       loadingMore: false,
+      // 添加部门选择器显示控制
+      showDepartment: false,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -446,7 +448,29 @@ export default {
         corpId: '' // 全局主体ID，所有需要corpId的接口都会用到
       },
       // 表单参数
-      form: {},
+      form: {
+        // 基础信息
+        linkName: '',
+        skipVerify: true,
+        priorityType: 0,
+        remark: '',
+        corpId: '',
+        id: null,
+
+        // 关联成员相关（三套数据，各有用处）
+        userListParam: [],           // 企微用户ID数组 (用于前端显示和回显)
+        departmentListParam: [],     // 部门ID数组
+        qwUserTableIdList: [],       // 本地数据库ID数组 (需要传给后端保存)
+        userList: '',                // 完整的JSON字符串 (可能包含userList+departmentList)
+
+        // 优先分配相关
+        priorityUserListParam: [],   // 优先分配的企微用户ID数组
+        priorityDepartmentListParam: [], // 优先分配的部门ID数组
+        priorityUserList: '',        // 优先分配的JSON字符串
+
+        // 选中的ID（用于el-select绑定）
+        selectedUserIds: []          // 与qwUserTableIdList同步，用于前端选择框显示
+      },
       // 表单校验
       rules: {
         linkName: [
@@ -463,7 +487,7 @@ export default {
       userPageSize: 20,
       userTotal: 0,
       hasMoreUsers: true,
-      initialLoaded: false
+      initialLoaded: false,
     }
   },
   computed: {
@@ -487,6 +511,38 @@ export default {
     })
   },
   methods: {
+    /** 处理用户选择变化 - 同步更新所有相关字段 */
+    handleUserSelectionChange(selectedIds) {
+
+      // 1. 更新 qwUserTableIdList（需要传给后端的本地ID）
+      this.form.qwUserTableIdList = [...selectedIds]
+
+      // 2. 根据选中的本地ID，找到对应的企微用户ID，更新 userListParam
+      const qwUserIds = []
+      selectedIds.forEach(id => {
+        const user = this.qwUserOptions.find(u => u.id === id)
+        if (user) {
+          qwUserIds.push(user.qwUserId)
+        }
+      })
+      this.form.userListParam = qwUserIds
+
+      // 3. 构建完整的 userList JSON（包含用户ID和部门ID）
+      const userListData = {
+        userList: qwUserIds,                    // 企微用户ID列表
+        departmentList: this.form.departmentListParam || [], // 部门ID列表
+        userIds: selectedIds,                    // 本地数据库ID列表
+        updateTime: new Date().getTime()
+      }
+      this.form.userList = JSON.stringify(userListData)
+
+      console.log('更新后的数据:', {
+        qwUserTableIdList: this.form.qwUserTableIdList,
+        userListParam: this.form.userListParam,
+        departmentListParam: this.form.departmentListParam,
+        userList: this.form.userList
+      })
+    },
     /** 检查是否已选择主体 */
     checkCorpId() {
       if (!this.queryParams.corpId) {
@@ -523,7 +579,6 @@ export default {
         this.corpOptions.forEach(item => {
           this.corpMap.set(item.corpId, item.corpName)
         })
-        console.log('获取到的主体列表:', this.corpOptions)
       })
     },
 
@@ -566,7 +621,6 @@ export default {
       if (!this.checkCorpId()) return
 
       const corpId = this.queryParams.corpId
-      console.log('loadUsersByCorp: 开始加载主体用户', corpId)
 
       // 重置分页和数据
       this.userPage = 1
@@ -603,10 +657,7 @@ export default {
         corpId: this.queryParams.corpId
       }
 
-      console.log('搜索用户参数:', params)
-
       getQwUserList(params).then(response => {
-        console.log('API返回原始数据:', response)
 
         let newUsers = []
         if (response.data && Array.isArray(response.data)) {
@@ -617,6 +668,15 @@ export default {
           newUsers = response
         }
 
+        // 处理返回的用户数据，确保包含id字段
+        newUsers = newUsers.map(user => ({
+          ...user,
+          // 确保有唯一标识
+          uniqueKey: `${user.qwUserId}_${user.corpId}`,
+          // 确保有id字段（本地数据库ID）
+          id: user.id || user.userId || null
+        }))
+
         if (this.userPage === 1) {
           this.qwUserOptions = newUsers
         } else {
@@ -643,8 +703,6 @@ export default {
           this.initialLoaded = true
         }
 
-        console.log('更新后的qwUserOptions长度:', this.qwUserOptions.length)
-
         this.userLoading = false
         this.loadingMore = false
       }).catch(error => {
@@ -674,7 +732,17 @@ export default {
 
     /** 清空已选用户 */
     clearSelectedUsers() {
+      this.form.selectedUserIds = []
+      this.form.qwUserTableIdList = []
       this.form.userListParam = []
+      //部门列表可能不需要清空，根据业务需求决定
+      // this.form.departmentListParam = []
+      this.form.userList = JSON.stringify({
+        userList: [],
+        departmentList: this.form.departmentListParam || [],
+        userIds: [],
+        updateTime: new Date().getTime()
+      })
     },
 
     /** 加载已选中用户的详细信息 */
@@ -694,22 +762,40 @@ export default {
         })
       })
     },
+    /** 格式化详情页面的成员显示（不显示部门） */
+    formatDetailMembers(localIds) {
+      if (!localIds || !localIds.length) return '-'
+
+      const memberNames = []
+      localIds.forEach(id => {
+        // 通过本地数据库ID查找用户
+        const user = this.qwUserOptions.find(u => u.id === id)
+        if (user) {
+          // 显示用户名和企微ID，不显示部门
+          memberNames.push(`${user.qwUserName}[${user.qwUserId}]`)
+        } else {
+          // 如果找不到，显示原始ID
+          memberNames.push(`ID:${id}`)
+        }
+      })
 
-    /** 格式化已选中的用户显示 */
+      return memberNames.join(', ')
+    },
+    /** 格式化已选中的用户显示 - 通过ID查询用户信息 */
     formatSelectedUsers(userIds) {
       if (!userIds || !userIds.length) return '-'
 
       const selectedNames = []
       userIds.forEach(id => {
-        const users = this.qwUserOptions.filter(opt => opt.qwUserId === id)
+        const users = this.qwUserOptions.filter(opt => opt.id === id)
         if (users.length > 0) {
           users.forEach(u => {
             const deptInfo = u.department ? `(部门:${u.department})` : ''
-            const corpInfo = this.getCorpName(u.corpId)
-            selectedNames.push(`${u.qwUserName}${deptInfo} - ${corpInfo}`)
+            const qwIdInfo = u.qwUserId ? `[${u.qwUserId}]` : ''
+            selectedNames.push(`${u.qwUserName}${qwIdInfo}${deptInfo}`)
           })
         } else {
-          selectedNames.push(id)
+          selectedNames.push(`ID:${id}`)
         }
       })
       return selectedNames.join(', ')
@@ -765,39 +851,152 @@ export default {
 
       // 先查询详情
       getDetailByLinkId(row.linkId).then(response => {
-        this.form = response.data
-        // 解析JSON字段
-        if (this.form.userList) {
-          this.form.userListParam = JSON.parse(this.form.userList)
+        const data = response.data
+
+        // 基础信息赋值
+        this.form.id = data.id
+        this.form.linkName = data.linkName
+        //将字符串的"true"/"false"转换为布尔值
+        this.form.skipVerify = data.skipVerify === true || data.skipVerify === 'true'
+        this.form.priorityType = data.priorityType
+        this.form.remark = data.remark
+        this.form.corpId = data.corpId
+
+        // ========== 关联成员相关字段回显 ==========
+
+        // 1. 处理 qwUserTableIdList（本地数据库ID）
+        if (data.qwUserTableIdList) {
+          if (typeof data.qwUserTableIdList === 'string') {
+            try {
+              // 处理类似 "[28462]" 的字符串
+              const parsed = JSON.parse(data.qwUserTableIdList)
+              this.form.qwUserTableIdList = Array.isArray(parsed) ? parsed : [parsed]
+            } catch (e) {
+              // 如果不是标准JSON格式，尝试按逗号分割
+              this.form.qwUserTableIdList = data.qwUserTableIdList
+                .replace(/[\[\]"]/g, '')  // 去除方括号和引号
+                .split(',')
+                .filter(id => id.trim())
+                .map(id => parseInt(id.trim()))
+            }
+          } else if (Array.isArray(data.qwUserTableIdList)) {
+            this.form.qwUserTableIdList = data.qwUserTableIdList
+          }
+        }
+
+        // 2. 处理 userListParam（企微用户ID）- 从 userList 字段获取
+        if (data.userList) {
+          if (typeof data.userList === 'string') {
+            try {
+              // 处理类似 "[\"TongKe\"]" 的字符串
+              const parsed = JSON.parse(data.userList)
+              this.form.userListParam = Array.isArray(parsed) ? parsed : [parsed]
+            } catch (e) {
+              // 如果不是标准JSON格式，尝试按逗号分割
+              this.form.userListParam = data.userList
+                .replace(/[\[\]"]/g, '')  // 去除方括号和引号
+                .split(',')
+                .filter(id => id.trim())
+            }
+          } else if (Array.isArray(data.userList)) {
+            this.form.userListParam = data.userList
+          }
+        }
+
+        // 3. 处理 departmentListParam（部门ID）
+        if (data.departmentList) {
+          if (typeof data.departmentList === 'string') {
+            try {
+              const parsed = JSON.parse(data.departmentList)
+              this.form.departmentListParam = Array.isArray(parsed) ? parsed : []
+            } catch (e) {
+              this.form.departmentListParam = []
+            }
+          } else if (Array.isArray(data.departmentList)) {
+            this.form.departmentListParam = data.departmentList
+          }
         }
-        if (this.form.priorityUserList) {
-          this.form.priorityUserListParam = JSON.parse(this.form.priorityUserList)
+
+        // ========== 优先分配相关字段回显 ==========
+
+        // 4. 处理 priorityUserListParam（优先分配的企微用户ID）
+        if (data.priorityUserList) {
+          if (typeof data.priorityUserList === 'string') {
+            try {
+              const parsed = JSON.parse(data.priorityUserList)
+              this.form.priorityUserListParam = Array.isArray(parsed) ? parsed : []
+            } catch (e) {
+              this.form.priorityUserListParam = []
+            }
+          } else if (Array.isArray(data.priorityUserList)) {
+            this.form.priorityUserListParam = data.priorityUserList
+          }
         }
 
+        // 5. 设置 selectedUserIds 用于前端显示（与 qwUserTableIdList 同步）
+        this.form.selectedUserIds = [...(this.form.qwUserTableIdList || [])]
+
+        console.log('回显完成:', {
+          selectedUserIds: this.form.selectedUserIds,
+          qwUserTableIdList: this.form.qwUserTableIdList,
+          userListParam: this.form.userListParam,
+          departmentListParam: this.form.departmentListParam,
+          priorityUserListParam: this.form.priorityUserListParam
+        })
+
         // 加载该主体的用户
         this.loadUsersByCorp()
 
-        // 如果有已选用户，加载他们的详细信息
-        if (this.form.userListParam && this.form.userListParam.length > 0) {
-          this.loadSelectedUsers(this.form.userListParam)
+        // 如果有已选用户，加载他们的详细信息用于显示
+        if (this.form.selectedUserIds && this.form.selectedUserIds.length > 0) {
+          this.loadSelectedUsers(this.form.selectedUserIds)
         }
 
         this.open = true
         this.title = '修改获客链接'
+      }).catch(error => {
+        console.error('获取详情失败:', error)
+        this.msgError('获取详情失败')
       })
     },
 
     /** 详情按钮操作 */
     handleDetail(row) {
       getDetailByLinkId(row.linkId).then(response => {
-        this.detailData = response.data
-        // 解析JSON字段
-        if (this.detailData.userList) {
-          this.detailData.userListParam = JSON.parse(this.detailData.userList)
+        const data = response.data
+        this.detailData = { ...data }
+
+        // 解析qwUserTableIdList
+        if (data.qwUserTableIdList) {
+          if (typeof data.qwUserTableIdList === 'string') {
+            try {
+              this.detailData.qwUserTableIdList = JSON.parse(data.qwUserTableIdList)
+            } catch (e) {
+              this.detailData.qwUserTableIdList = []
+            }
+          } else {
+            this.detailData.qwUserTableIdList = data.qwUserTableIdList || []
+          }
         }
-        if (this.detailData.priorityUserList) {
-          this.detailData.priorityUserListParam = JSON.parse(this.detailData.priorityUserList)
+
+        // 解析userList
+        if (data.userList) {
+          try {
+            this.detailData.userListObj = JSON.parse(data.userList)
+          } catch (e) {
+            this.detailData.userListObj = {}
+          }
         }
+
+        // 解析priorityUserList
+        if (data.priorityUserList) {
+          try {
+            this.detailData.priorityUserListParam = JSON.parse(data.priorityUserList)
+          } catch (e) {
+            this.detailData.priorityUserListParam = []
+          }
+        }
+
         this.detailOpen = true
       })
     },
@@ -809,25 +1008,57 @@ export default {
       this.$refs['form'].validate(valid => {
         if (valid) {
           // 验证关联成员是否超过500
-          if (this.form.userListParam && this.form.userListParam.length > 500) {
+          if (this.form.selectedUserIds && this.form.selectedUserIds.length > 500) {
             this.msgError('关联成员最多只能选择500人')
             return
           }
 
-          // 设置当前选中的主体ID
-          this.form.corpId = this.queryParams.corpId
+          // 构建提交的数据
+          const submitData = {
+            // 基础信息
+            id: this.form.id,
+            linkName: this.form.linkName,
+            skipVerify: this.form.skipVerify, // 布尔值，提交时保持布尔类型
+            priorityType: this.form.priorityType,
+            remark: this.form.remark,
+            corpId: this.queryParams.corpId,
+
+            // ========== 关联成员相关 ==========
+            // 本地数据库ID列表 - 转换为JSON字符串
+            qwUserTableIdList: JSON.stringify(this.form.selectedUserIds || []),
+
+            // 企微用户ID列表 - 转换为JSON字符串，与后端期望的格式一致
+            userList: JSON.stringify(this.form.userListParam || []),
+
+            // 部门ID列表
+            departmentList: JSON.stringify(this.form.departmentListParam || []),
+
+            // ========== 优先分配相关 ==========
+            priorityUserList: JSON.stringify(this.form.priorityUserListParam || []),
+
+            // 保持与其他字段的兼容性，如果后端还期望这些字段
+            userListParam: this.form.userListParam || [],
+            departmentListParam: this.form.departmentListParam || [],
+            priorityUserListParam: this.form.priorityUserListParam || []
+          }
+
+          console.log('提交的数据:', submitData)
 
           if (this.form.id) {
-            updateAssistant(this.form).then(response => {
+            updateAssistant(submitData).then(response => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
             })
           } else {
-            addAssistant(this.form).then(response => {
+            addAssistant(submitData).then(response => {
               this.msgSuccess('新增成功')
               this.open = false
               this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
             })
           }
         }
@@ -886,7 +1117,6 @@ export default {
 
       this.qwLoading = true
       getQwList(this.qwLimit, this.qwCursor, this.queryParams.corpId).then(response => {
-        console.log('企微原始数据响应:', response)
 
         if (response.code === 200) {
           const data = response.data || {}
@@ -965,15 +1195,29 @@ export default {
     /** 表单重置 */
     reset() {
       this.form = {
+        // 基础信息
         linkName: '',
-        skipVerify: true,  //对应"无需验证"（官方默认）
-        // markSource: true,   //对应"标记来源"（官方默认）
+        skipVerify: true,
         priorityType: 0,
-        userListParam: [],
-        priorityUserListParam: [],
         remark: '',
-        corpId: this.queryParams.corpId
+        corpId: this.queryParams.corpId,
+        id: null,
+
+        // 关联成员相关
+        userListParam: [],           // 企微用户ID
+        departmentListParam: [],     // 部门ID
+        qwUserTableIdList: [],       // 本地数据库ID
+        userList: '{"userList":[],"departmentList":[],"userIds":[]}', // 完整JSON
+
+        // 优先分配相关
+        priorityUserListParam: [],   // 优先分配的企微用户ID
+        priorityDepartmentListParam: [], // 优先分配的部门ID
+        priorityUserList: '[]',      // 优先分配JSON
+
+        // 选中的ID（用于el-select绑定）
+        selectedUserIds: []
       }
+
       this.searchKeyword = ''
       this.userPage = 1
       this.hasMoreUsers = true