渠道活码新增员工组功能

src/api/qw/contactWay.js

@@ -69,3 +69,13 @@ export function exportContactWay(query) {
     params: query
   })
 }
+
+
+// 新增员工组
+export function addQwUserGroup(query) {
+  return request({
+    url: '/qw/user/addQwUserGroup',
+    method: 'post',
+    data: query
+  })
+}

src/api/qw/user.js

@@ -417,3 +417,22 @@ export function companyQwUserlist(params) {
     params: params
   })
 }
+
+/**
+ * 查询员工组
+ */
+export function groupList(query) {
+  return request({
+    url: '/qw/user/qwUserGrouplist',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getQwUserById(query) {
+  return request({
+    url: '/qw/user/getQwUser',
+    method: 'post',
+    data: query
+  })
+}

src/views/qw/contactWay/index.vue

@@ -107,6 +107,16 @@
               v-hasPermi="['qw:contactWay:add']"
             >同步</el-button>
           </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAddGroup"
+              v-hasPermi="['qw:contactWay:add']"
+            >新增员工组</el-button>
+          </el-col>
         </el-row>
         <div style=" height: calc(100% - 40px); overflow-y: auto;">
           <el-table v-loading="loading" :data="contactWayList" @selection-change="handleSelectionChange" border>
@@ -193,7 +203,7 @@
            <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
         <el-form-item label="客服类型" prop="userType" >
-          <el-radio-group v-model="form.userType">
+          <el-radio-group v-model="form.userType"  @change="handleUserTypeChange">
              <el-radio :key="1":label="1" >全天在线</el-radio>
              <el-radio :key="2":label="2" >自动上下线</el-radio>
              </el-radio-group>
@@ -212,6 +222,12 @@
                           plain
                           @click="handleListUserForTimeSlot(index)">请选择使用员工
                         </el-button>
+                        <el-button
+                          size="medium"
+                          icon="el-icon-circle-plus-outline"
+                          plain
+                          @click="handleUserGroup(index)">请选择员工组
+                        </el-button>
                       </div>
                       <div style="margin-top: 10px;">
                         <el-tag
@@ -275,6 +291,12 @@
               plain
               @click="handleListUser(form.type,form.sendType, true)">请选择使用员工
             </el-button>
+            <el-button
+              size="medium"
+              icon="el-icon-circle-plus-outline"
+              plain
+              @click="handleUserGroup2(form.type,form.sendType, true)">请选择员工组
+            </el-button>
           </div>
           <div>
             <el-tag
@@ -675,6 +697,49 @@
       <qwUserList ref="QwUserList" @selectUserList="selectUserList"></qwUserList>
     </el-dialog>
 
+      <el-dialog :title="groupWin.title" :visible.sync="groupWin.open" width="700px" append-to-body>
+        <group ref="groupList" @selectGroupList="selectGroupList"></group>
+      </el-dialog>
+
+      <!-- 添加员工组对话框 -->
+      <el-dialog :title="title" :visible.sync="groupOpen" width="1200px" append-to-body>
+        <el-form ref="form" :model="group" :rules="groupRules" label-width="120px">
+          <el-form-item label="员工组名称" prop="name">
+            <el-input v-model="group.groupName" placeholder="请输入员工组名称" />
+          </el-form-item>
+          <el-form-item label="" prop="userTimeJson">
+            <el-form-item label=""  >
+              <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-form-item>
+          </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitGroupForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+
     </div>
         <el-drawer
         :with-header="false"
@@ -686,7 +751,17 @@
 </template>
 
 <script>
-import { informationList,sync,listContactWay, getContactWay, delContactWay, addContactWay, updateContactWay, exportContactWay } from "@/api/qw/contactWay";
+import {
+  informationList,
+  sync,
+  listContactWay,
+  getContactWay,
+  delContactWay,
+  addContactWay,
+  updateContactWay,
+  exportContactWay,
+  addQwUserGroup
+} from '@/api/qw/contactWay'
 import {getQwAllUserList } from "@/api/company/companyUser";
 import contactWayGroup from '@/views/qw/contactWay/group';
 import {listTag, getTag, searchTags,} from "@/api/qw/tag";
@@ -696,9 +771,10 @@ 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";
+import group from '@/views/qw/user/group.vue';
 export default {
   name: "ContactWay",
-   components: {qwUserList, contactWayGroup,ImageUpload,statisDetails},
+   components: {qwUserList, contactWayGroup,ImageUpload,statisDetails,group},
   data() {
     return {
       // 遮罩层
@@ -773,6 +849,8 @@ export default {
       },
       // 是否显示弹出层
       open: false,
+      // 是否显示新增员工组弹窗
+      groupOpen: false,
       // 联系方式类型,1-单人, 2-多人字典
       typeOptions: [],
       weekOptions: [{
@@ -824,6 +902,9 @@ export default {
       // 表单参数
       form: {
 
+      },
+      group:{
+
       },
       fileFrom:{
         imagePicUrl:null,
@@ -856,6 +937,9 @@ export default {
         groupId:[{required:true,message:"不能为空",trigger:"change"}],
         userType:[{required:true,message:"不能为空",trigger:"change"}],
       },
+      groupRules: {
+        groupName:[{required:true,message:"员工组名称不能为空",trigger:"blur"}],
+      },
       tagGroupList:[],
       tagList:[],
       tagListForm:[],
@@ -866,6 +950,10 @@ export default {
         title: "",
         open: false
       },
+      groupWin: {
+        title: "",
+        open: false
+      },
     };
   },
   created() {
@@ -1269,6 +1357,7 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
+      this.groupOpen = false;
       this.reset();
     },
     // 表单重置
@@ -1317,6 +1406,7 @@ export default {
               this.tagListForm=[];
               this.closeWelcomeWord=[];
               this.welcomeJson=[{text:{content:null},attachments:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null}];
+              this.group = {};
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -1348,6 +1438,14 @@ export default {
       this.title = "添加企微活码";
       this.form.groupId=this.queryParams.groupId
     },
+    /** 新增员工组操作 */
+    handleAddGroup() {
+      this.reset();
+      this.groupOpen = true;
+      this.title = "添加员工组";
+      this.group.groupId=this.queryParams.groupId
+    },
+
     handleAvatarSuccess(res, file) {
         if(res.code==200){
           this.form.imagePicUrl=res.url;
@@ -1496,6 +1594,38 @@ export default {
         }
       });
     },
+
+    /** 员工组提交按钮 */
+    submitGroupForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if(Object.keys(this.userIds).length === 0){
+            return this.$message({
+              message: '请选择客服类型-使用员工',
+              type: 'warning'
+            });
+          }
+
+          this.group.userIds=JSON.stringify(this.userIds);
+          const nameStr = this.userSelectList
+            .map(item => item.qwUserName)
+            .join(',');
+
+          const idStr = this.userSelectList
+            .map(item => item.id)
+            .join(',');
+
+          this.group.qwUserKey = idStr;
+          this.group.qwUserName = nameStr;
+          addQwUserGroup(this.group).then(response => {
+            this.msgSuccess("新增成功");
+            this.groupOpen = false;
+            this.getList();
+          });
+        }
+      });
+    },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
@@ -1534,6 +1664,25 @@ export default {
       this.listUser.title = "选择企微员工"
       this.listUser.open = true;
 
+    },
+    handleUserGroup2(type, sendType, selectOne) {
+      setTimeout(() => {
+        this.$refs.groupList.getDetails(this.form.corpId, type, sendType, selectOne);
+      }, 1);
+
+      this.groupWin.title = "选择员工组"
+      this.groupWin.open = true;
+    },
+    //选择员工组
+    handleUserGroup(timeSlotIndex) {
+      this.currentEditingTimeSlotIndex = timeSlotIndex;
+      setTimeout(() => {
+        this.$refs.groupList.getDetails(this.form.corpId, this.form.type, this.form.sendType, true);
+      }, 1);
+
+      this.groupWin.title = "选择员工组"
+      this.groupWin.open = true;
+
     },
     //企业微信员工信息子组件返回
     selectUserList(list) {
@@ -1570,6 +1719,42 @@ export default {
         this.currentEditingTimeSlotIndex = -1;
       }
     },
+
+    selectGroupList(list){
+      console.log("选择的员工",list)
+      this.groupWin.open = false;
+
+      // 判断是全天在线还是自动上下线
+      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);
@@ -1580,6 +1765,7 @@ export default {
     },
     // 自动上下线模式 - 打开员工选择弹窗
     handleListUserForTimeSlot(timeSlotIndex) {
+      console.log("timeSlotIndex", timeSlotIndex);
       this.currentEditingTimeSlotIndex = timeSlotIndex;
       setTimeout(() => {
         this.$refs.QwUserList.getDetails(this.form.corpId, this.form.type, this.form.sendType, true);
@@ -1599,6 +1785,14 @@ export default {
         this.$set(this.userTimeJson, timeSlotIndex, {...timeSlot});
       }
     },
+
+    handleUserTypeChange(val){
+      if (val === 1) {
+
+      } else if (val === 2) {
+
+      }
+    },
   }
 };
 </script>

src/views/qw/user/group.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="app-container">
+    <el-alert v-if="type==2 && (sendType==2||sendType==4||sendType==11)"
+              title="注意事项"
+              type="warning"
+              description="只显示含有【允许使用插件】的成员"
+              :closable="false"
+              center
+              show-icon>
+    </el-alert>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" @submit.prevent="handleQuery">
+
+<!--      <el-form-item label="后台员工昵称" prop="nickName">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.nickName"-->
+<!--          placeholder="请输入后台员工昵称"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keydown.enter.native="handleQueryEnter"-->
+<!--        />-->
+<!--      </el-form-item>-->
+
+      <el-form-item>
+        <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-form>
+
+    <el-table
+      v-loading="loading"
+      :data="userList"
+      ref="userList"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="员工组名称" align="center" prop="groupName" />
+      <el-table-column label="员工名称" align="center" prop="qwUserName"/>
+    </el-table>
+
+    <div style="margin-top: 30px;display: flex;justify-content: center">
+      <el-button type="warning" icon="el-icon-search" @click="confirmSelect">确定选择</el-button>
+    </div>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="handlePaginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { listUser, groupList,getQwUserById } from "@/api/qw/user";
+
+
+export default {
+  name: "qwUserList",
+  data() {
+    return {
+      type:null,
+      sendType:null,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      selectUsers: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企微用户表格数据
+      userList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        qwUserId: null,
+        companyId: null,
+        companyUserId: null,
+        corpId: null,
+        nickName: null
+      },
+      // 表单参数
+      form: {},
+
+      // 表单校验
+      rules: {
+      },
+      // 当前选中的单行数据
+      currentRow: null,
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    // 单选行变化
+    handleCurrentChange(row) {
+      this.currentRow = row;
+
+      // 如果你后面逻辑还是用 selectUsers
+      this.selectUsers = row ? [row] : [];
+    },
+
+    getDetails(corpId,type,sendType,isRemark){
+      this.type=type;
+      this.sendType=sendType;
+      if (type!=null&&sendType!=null){
+        this.queryParams.type=type;
+        this.queryParams.sendType=sendType;
+      }
+      this.queryParams.corpId=corpId;
+      this.queryParams.isRemark=isRemark;
+      this.getList();
+    },
+    /** 查询企微用户列表 */
+    getList() {
+      this.loading = true;
+      groupList(this.queryParams).then(response => {
+        // 如果 companyUserId 为 null，移除列
+
+        this.userList = response.rows;
+        this.total =   response.total;
+        this.loading = false;
+
+      });
+    },
+    handlePaginationChange(row) {
+      this.queryParams.pageNum = row.page;
+      this.queryParams.pageSize = row.limit;
+      this.getList();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        qwUserId: null,
+        companyId: null,
+        companyUserId: null,
+        corpId: null
+      };
+      this.resetForm("form");
+    },
+    //确定选择
+    confirmSelect(){
+      if (!this.currentRow) {
+        this.$message.warning("请选择一条数据");
+        return;
+      }
+
+      const qwUserKey = {
+        qwUserKey: this.selectUsers[0].qwUserKey
+      };
+      getQwUserById(qwUserKey).then(response => {
+        console.log(response);
+
+        // 向父组件返回选中的这一条
+        this.$emit("selectGroupList", response.data);
+        this.resetSelect();
+      });
+    },
+    //重置选择
+    resetSelect(){
+      this.$refs.userList.clearSelection();
+
+      this.selectUsers=[];
+      //重置
+      this.queryParams={
+        pageNum: 1,
+        pageSize: 5,
+        qwUserId: null,
+        companyId: null,
+        companyUserId: null,
+        corpId: null,
+        nickName: null
+      },
+        this.getList();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleQueryEnter(event){
+      // 确保事件对象存在
+      if (event && event.preventDefault) {
+        event.preventDefault(); // 阻止默认提交行为
+      }
+      this.handleQuery();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+
+      // 保存当前页的选中项
+      const currentPageSelections = selection.map(item => item.id);
+
+      // 合并选中项
+      this.selectUsers = this.selectUsers.filter(item =>
+        this.userList.some(tag => tag.id === item.id) ? currentPageSelections.includes(item.id) : true
+      ).concat(selection.filter(item => !this.selectUsers.some(selected => selected.id === item.id)));
+
+      // 更新 single 和 multiple
+      this.single = this.selectUsers.length !== 1;
+      this.multiple = !this.selectUsers.length;
+
+    },
+
+  }
+};
+</script>