feat：渠道活码-选择员工改成弹窗形式

src/views/qw/contactWay/index.vue

@@ -204,15 +204,27 @@
               <el-col :span="22">
                 <div style="background-color: #fbfbfb;padding: 15px;  border: 1px solid #e6e6e6; margin-bottom: 20px;">
                   <el-form :model="item"  label-width="80px">
-                    <el-form-item label="员工选择"  style="height: 50px;">
-                       <el-select v-model="item.userIds" remote multiple placeholder="请选择" filterable  style="width: 100%;">
-                         <el-option
-                           v-for="dict in companyUserList"
-                           :key="dict.qwUserId"
-                           :label="dict.qwUserName"
-                           :value="dict.qwUserId">
-                         </el-option>
-                       </el-select>
+                    <el-form-item label="员工选择">
+                      <div>
+                        <el-button
+                          size="medium"
+                          icon="el-icon-circle-plus-outline"
+                          plain
+                          @click="handleListUserForTimeSlot(index)">请选择使用员工
+                        </el-button>
+                      </div>
+                      <div style="margin-top: 10px;">
+                        <el-tag
+                          style="margin-left: 5px; margin-top: 5px;"
+                          size="medium"
+                          :key="user.id"
+                          v-for="user in item.userList || []"
+                          closable
+                          :disable-transitions="false"
+                          @close="handleCloseTimeSlotUser(index, user)">
+                          {{ user.qwUserName }}
+                        </el-tag>
+                      </div>
                     </el-form-item>
                     <el-form-item label="工作周期" prop="week" style="height: 50px;" >
                        <el-select v-model="item.week" remote multiple placeholder="请选择" filterable  style="width: 100%;">
@@ -256,14 +268,27 @@
            <el-link type="primary" class="el-icon-plus" :underline="false" @click='addUserTime()'>添加其他工作周期</el-link>
         </el-form-item>
         <el-form-item label=""  v-if="form.userType==1">
-         <el-select v-model="userIds" remote multiple placeholder="选择全天在线员工" filterable  style="width: 800px;" :change="userChange()">
-           <el-option
-             v-for="dict in companyUserList"
-             :label="dict.qwUserName"
-             :value="dict.qwUserId">
-           </el-option>
+          <div>
+            <el-button
+              size="medium"
+              icon="el-icon-circle-plus-outline"
+              plain
+              @click="handleListUser(form.type,form.sendType, true)">请选择使用员工
+            </el-button>
+          </div>
+          <div>
+            <el-tag
+              style="margin-left: 5px"
+              size="medium"
+              :key="user.id"
+              v-for="user in userSelectList"
+              closable
+              :disable-transitions="false"
+              @close="handleCloseGroupUser(user)">
+              {{ user.qwUserName }}
+            </el-tag>
+          </div>
 
-         </el-select>
         </el-form-item>
         <el-form-item label="员工添加上限"v-if="form.userType==1" prop="isUserLimit">
           <el-switch
@@ -595,7 +620,7 @@
           </div>
           <div v-if="fileFrom.videoId!=null">
             <el-form-item label="图文链接:"  label-width="100px" >
-              <el-tag type="warning" v-model="fileFrom.linkUrl='待生成'">选择的课程小节 即为卡片链接地址</el-tag>
+              <el-tag type="warning">选择的课程小节 即为卡片链接地址</el-tag>
             </el-form-item>
           </div>
           <div v-if="fileFrom.videoId!=null">
@@ -646,6 +671,9 @@
       </div>
     </el-dialog>
 
+    <el-dialog :title="listUser.title" :visible.sync="listUser.open" width="700px" append-to-body>
+      <qwUserList ref="QwUserList" @selectUserList="selectUserList"></qwUserList>
+    </el-dialog>
 
     </div>
         <el-drawer
@@ -667,9 +695,10 @@ import ImageUpload from '@/views/qw/material/ImageUpload.vue'
 import statisDetails from '@/views/qw/contactWay/statisDetails';
 import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
 import {courseList, videoList} from "@/api/qw/sop";
+import qwUserList from "@/views/qw/user/qwUserList.vue";
 export default {
   name: "ContactWay",
-   components: { contactWayGroup,ImageUpload,statisDetails},
+   components: {qwUserList, contactWayGroup,ImageUpload,statisDetails},
   data() {
     return {
       // 遮罩层
@@ -679,7 +708,8 @@ export default {
       exportLoading: false,
       // 选中数组
       ids: [],
-      userTimeJson:[{userIds:null,week:[1,2,3,4,5,6,7],startTime:null,endTime:null}],
+      userTimeJson:[{userIds:null,userList:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null}],
+      currentEditingTimeSlotIndex: -1, // 当前正在编辑的时间段索引
       userIds:[],
       show:{
            title:"医院详情",
@@ -829,6 +859,13 @@ export default {
       tagGroupList:[],
       tagList:[],
       tagListForm:[],
+      // 选择使用员工相关参数
+      userSelectList: [],
+      //企业微信员工
+      listUser: {
+        title: "",
+        open: false
+      },
     };
   },
   created() {
@@ -1172,7 +1209,7 @@ export default {
       });
     },
     addUserTime(){
-      this.userTimeJson.push({userIds:null,week:[1,2,3,4,5,6,7],startTime:null,endTime:null})
+      this.userTimeJson.push({userIds:null,userList:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null})
     },
     delUserTime(index){
       this.userTimeJson.splice(index,1)
@@ -1270,9 +1307,11 @@ export default {
               userTimeJson: null,
               userType: 2
             };
-              this.userTimeJson=[{userIds:null,week:[1,2,3,4,5,6,7],startTime:null,endTime:null}];
+              this.userTimeJson=[{userIds:null,userList:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null}];
+              this.currentEditingTimeSlotIndex = -1;
               this.userLimitJson=[];
               this.userIds=[];
+              this.userSelectList=[];
               this.spareUserIds=[];
               this.tagListForm=[];
               this.closeWelcomeWord=[];
@@ -1332,15 +1371,42 @@ export default {
       getContactWay(id).then(response => {
         this.form = response.data;
         this.open = true;
-        if(this.form.userTimeJson!=null){
-          this.userTimeJson=JSON.parse(this.form.userTimeJson)
-        }else{ this.userTimeJson=[{userIds:null,week:[1,2,3,4,5,6,7],startTime:null,endTime:null}]}
+
+        // 根据 userType 区分处理
+        if(this.form.userType === 2) {
+          // 自动上下线模式 - 只回显 userTimeJson
+          if(this.form.userTimeJson!=null){
+            this.userTimeJson=JSON.parse(this.form.userTimeJson)
+            // 根据 userIds回显userList
+            this.userTimeJson.forEach(timeSlot => {
+              if (!timeSlot.userList) {
+                timeSlot.userList = [];
+              }
+              if (timeSlot.userIds && Array.isArray(timeSlot.userIds)) {
+                timeSlot.userList = timeSlot.userIds.map(qwUserId => {
+                  return this.companyUserList.find(u => u.qwUserId === qwUserId);
+                }).filter(u => u); // 过滤掉 undefined
+              }
+            });
+          }else{
+            this.userTimeJson=[{userIds:null,userList:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null}]
+          }
+        } else if(this.form.userType === 1) {
+          // 全天在线模式 - 只回显 userSelectList
+          if(this.form.userIds!=null){
+            this.userIds=JSON.parse(this.form.userIds)
+            this.userSelectList = this.userIds.map(qwUserId => {
+              return this.companyUserList.find(u => u.qwUserId === qwUserId);
+            }).filter(u => u); // 过滤掉 undefined
+          }else{
+            this.userIds=[]
+            this.userSelectList=[]
+          }
+        }
+
         if(this.form.userLimitJson!=null){
           this.userLimitJson=JSON.parse(this.form.userLimitJson)
         }else{ this.userLimitJson=[]}
-        if(this.form.userIds!=null){
-          this.userIds=JSON.parse(this.form.userIds)
-        }else{ this.userIds=[]}
         if(this.form.spareUserIds!=null){
           this.spareUserIds=JSON.parse(this.form.spareUserIds)
         }else{ this.spareUserIds=[]}
@@ -1362,10 +1428,23 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.form.corpId=this.queryParams.corpId
+          if(this.form.userType === 1){
+            if(Object.keys(this.userIds).length === 0){
+              return this.$message({
+                message: '请选择客服类型-使用员工',
+                type: 'warning'
+              });
+            }
+          }
           if(this.form.userType==2){
             var jsonUserIds=[];
             for (let i = 0; i < this.userTimeJson.length; i++) {
-                if(this.userTimeJson[i].userIds==null||this.userTimeJson[i].userIds==""){
+                // 确保 userIds 与 userList 同步
+                if(this.userTimeJson[i].userList && this.userTimeJson[i].userList.length > 0){
+                  this.userTimeJson[i].userIds = this.userTimeJson[i].userList.map(u => u.qwUserId);
+                }
+
+                if(this.userTimeJson[i].userIds==null||this.userTimeJson[i].userIds=="" || this.userTimeJson[i].userIds.length==0){
                   return this.$message('人员不能为空');
                 }
                 if(this.userTimeJson[i].week==null||this.userTimeJson[i].week==""){
@@ -1379,9 +1458,7 @@ export default {
                 }
 
                 for (let j = 0; j < this.userTimeJson[i].userIds.length; j++) {
-                  console.log("!jsonUserIds.find(item=>item==this.userTimeJson[i].userIds[j])")
                   if(!jsonUserIds.find(item=>item==this.userTimeJson[i].userIds[j])){
-
                     jsonUserIds.push(this.userTimeJson[i].userIds[j]);
                   }
                 }
@@ -1392,7 +1469,12 @@ export default {
           }
           this.form.closeWelcomeWord=JSON.stringify(this.closeWelcomeWord)
           this.form.userIds=JSON.stringify(this.userIds)
-          this.form.userTimeJson=JSON.stringify(this.userTimeJson)
+          // 提交前移除 userList 字段（因为后端只需要 userIds）
+          const userTimeJsonForSubmit = this.userTimeJson.map(item => {
+            const {userList, ...rest} = item;
+            return rest;
+          });
+          this.form.userTimeJson=JSON.stringify(userTimeJsonForSubmit)
           this.form.userLimitJson=JSON.stringify(this.userLimitJson)
           this.form.spareUserIds=JSON.stringify(this.spareUserIds)
           this.form.tags=JSON.stringify(this.tagListForm)
@@ -1441,7 +1523,81 @@ export default {
           this.download(response.msg);
           this.exportLoading = false;
         }).catch(() => {});
-    }
+    },
+    //选择企微员工时
+    handleListUser(type, sendType, selectOne) {
+      setTimeout(() => {
+        this.$refs.QwUserList.getDetails(this.form.corpId, type, sendType, selectOne);
+      }, 1);
+
+      this.listUser.title = "选择企微员工"
+      this.listUser.open = true;
+
+    },
+    //企业微信员工信息子组件返回
+    selectUserList(list) {
+      this.listUser.open = false;
+      console.log("选择的员工",list)
+
+      // 判断是全天在线还是自动上下线
+      if (this.currentEditingTimeSlotIndex === -1) {
+        // 全天在线模式
+        list.forEach(obj => {
+          if (!this.userSelectList.some(item => item.id === obj.id)) {
+            this.userSelectList.push(obj);  // 存储完整对象
+            this.userIds.push(obj.qwUserId);
+          }
+        });
+      } else {
+        // 自动上下线模式 - 为特定时间段添加员工
+        const timeSlot = this.userTimeJson[this.currentEditingTimeSlotIndex];
+        if (!timeSlot.userList) {
+          this.$set(timeSlot, 'userList', []);
+        }
+        if (!timeSlot.userIds) {
+          this.$set(timeSlot, 'userIds', []);
+        }
+
+        list.forEach(obj => {
+          if (!timeSlot.userList.some(item => item.id === obj.id)) {
+            timeSlot.userList.push(obj);
+            timeSlot.userIds.push(obj.qwUserId);
+          }
+        });
+
+        // 重置索引
+        this.currentEditingTimeSlotIndex = -1;
+      }
+    },
+    // 全天在线模式 - 删除员工标签
+    handleCloseGroupUser(user) {
+      const index = this.userSelectList.findIndex(t => t.id === user.id);
+      if (index !== -1) {
+        this.userSelectList.splice(index, 1);
+        this.userIds.splice(index, 1);
+      }
+    },
+    // 自动上下线模式 - 打开员工选择弹窗
+    handleListUserForTimeSlot(timeSlotIndex) {
+      this.currentEditingTimeSlotIndex = timeSlotIndex;
+      setTimeout(() => {
+        this.$refs.QwUserList.getDetails(this.form.corpId, this.form.type, this.form.sendType, true);
+      }, 1);
+      this.listUser.title = "选择企微员工"
+      this.listUser.open = true;
+    },
+    // 自动上下线模式 - 删除时间段员工标签
+    handleCloseTimeSlotUser(timeSlotIndex, user) {
+      const timeSlot = this.userTimeJson[timeSlotIndex];
+      const userListIndex = timeSlot.userList.findIndex(t => t.id === user.id);
+      if (userListIndex !== -1) {
+        // 使用 splice 删除并强制更新
+        timeSlot.userList.splice(userListIndex, 1);
+        timeSlot.userIds.splice(userListIndex, 1);
+        // 强制更新整个 userTimeJson 数组以触发响应式更新
+        this.$set(this.userTimeJson, timeSlotIndex, {...timeSlot});
+      }
+    },
   }
 };
 </script>