-企微客户管理增加(精确搜索）

-企微标签增加(精确搜索）
-今正总后台新增客户群菜单
-今正总后台新增离职继承
-今正总后台新增在职转接
-今正总后台新增通话记录

src/api/qw/groupChat.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询客户群详情列表
+export function listGroupChat(query) {
+  return request({
+    url: '/qw/groupChat/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listGroupChatDeptList(query) {
+  return request({
+    url: '/qw/groupChat/deptList',
+    method: 'get',
+    params: query
+  })
+}
+export function listGroupChatMyList(query) {
+  return request({
+    url: '/qw/groupChat/myList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询客户群详情详细
+export function getGroupChat(chatId) {
+  return request({
+    url: '/qw/groupChat/' + chatId,
+    method: 'get'
+  })
+}
+export function allList(corpId) {
+  return request({
+    url: '/qw/groupChat/allList/' + corpId,
+    method: 'get'
+  })
+}
+// 同步客户群详情
+export function cogradientGroupChat(corpId) {
+  return request({
+    url: '/qw/groupChat/cogradientGroupChat/'+corpId,
+    method: 'get',
+  })
+}
+
+export function cogradientMyGroupChat(corpId) {
+  return request({
+    url: '/qw/groupChat/cogradientMyGroupChat/'+corpId,
+    method: 'get',
+  })
+}
+
+
+
+export function listAll(qwUserIds, corpId, sopId) {
+  return request({
+    url: '/qw/groupChat/listAll',
+    method: 'get',
+    params:{qwUserIds, corpId, sopId}
+  })
+}

src/api/qw/group_chat_user.js

@@ -0,0 +1,74 @@
+import request from '@/utils/request'
+
+// 查询客户群成员列列表
+export function listGroup_chat_user(query) {
+  return request({
+    url: '/qw/group_chat_user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+//获取日星月的入群退群统计
+export function getDataWeekMonthCount(query) {
+  return request({
+    url: '/qw/group_chat_user/getDataWeekMonthCount',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询客户群成员列详细
+export function getGroup_chat_user(id) {
+  return request({
+    url: '/qw/group_chat_user/' + id,
+    method: 'get'
+  })
+}
+
+// 新增客户群成员列
+export function addGroup_chat_user(data) {
+  return request({
+    url: '/qw/group_chat_user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改客户群成员列
+export function updateGroup_chat_user(data) {
+  return request({
+    url: '/qw/group_chat_user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除客户群成员列
+export function delGroup_chat_user(id) {
+  return request({
+    url: '/qw/group_chat_user/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出客户群成员列
+export function exportGroup_chat_user(query) {
+  return request({
+    url: '/qw/group_chat_user/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 同步客户群详情
+export function cogradientGroupChatUser(data) {
+  return request({
+    url: '/qw/group_chat_user/cogradientGroupChatUser',
+    method: 'put',
+    data:data
+  })
+}
+
+

src/views/qw/externalContactTransfer/index.vue

@@ -0,0 +1,626 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
+
+<!--      <el-form-item label="外部联系人账号" prop="externalUserId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.externalUserId"-->
+<!--          placeholder="外部联系人账号"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="企微公司" prop="corpId">
+            <el-select v-model="queryParams.corpId" placeholder="企微公司"  size="small" @change="updateCorpId()">
+              <el-option
+                v-for="dict in myQwCompanyList"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              />
+            </el-select>
+      </el-form-item>
+      <el-form-item label="客户名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入客户名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="所属员工" prop="qwUserName">
+        <el-input
+          v-model="queryParams.qwUserName"
+          placeholder="请输入所属员工名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户类别" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择用户类别" clearable size="small">
+          <el-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户等级" prop="level">
+        <el-select v-model="queryParams.level" placeholder="客户等级" clearable size="small">
+          <el-option
+            v-for="dict in ratingType"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别" prop="gender">
+        <el-input
+          v-model="queryParams.gender"
+          placeholder="请输入性别"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="转接状态" prop="addWay">
+        <el-select v-model="queryParams.transferStatus" placeholder="转接状态" clearable size="small">
+          <el-option
+            v-for="dict in transferStatusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签" prop="tagIds">
+        <el-select v-model="selectTags" remote multiple placeholder="请选择" filterable  style="width: 100%;">
+          <el-option
+            v-for="dict in tagList"
+            :label="dict.name"
+            :value="dict.tagId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="queryParams.remark"
+          placeholder="请输入备注"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+<!--      <el-form-item label="添加时间" prop="createTime">
+        <el-date-picker clearable size="small"
+                        v-model="queryParams.createTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择添加时间">
+        </el-date-picker>
+      </el-form-item>-->
+      <el-form-item label="添加时间" prop="createTime">
+        <el-date-picker
+          style="width:225.4px"
+          clearable size="small"
+          v-model="dateRange"
+          type="daterange"
+          @change="changeTime"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </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-row :gutter="10" class="mb8">
+   <!--   <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['qw:externalContact:add']"
+        >同步</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['qw:externalContact:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="handleTransfer"
+          v-hasPermi="['qw:externalContact:transfer']"
+        >分配客户</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="externalContactList" @selection-change="handleSelectionChange" border>
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column label="所属员工" align="center" prop="qwUserName" width="120px"/>
+      <el-table-column label="员工部门" align="center" prop="departmentName" width="120px"/>
+<!--      <el-table-column label="外部联系人账号" align="center" prop="externalUserId" width="120px"/>-->
+      <el-table-column label="客户名称" align="center" prop="name" />
+      <el-table-column label="头像" align="center" prop="avatar" width="100px">
+        <template slot-scope="scope">
+          <el-popover
+            placement="right"
+            title=""
+            trigger="hover">
+            <img slot="reference" :src="scope.row.avatar" width="60px">
+            <img :src="scope.row.avatar" style="max-width: 200px;">
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户类别" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="typeOptions" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" align="center" prop="gender">
+        <template slot-scope="scope">
+          <dict-tag :options="genderOptions" :value="scope.row.gender"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="描述信息" align="center" prop="description" />
+      <el-table-column label="标签" align="center" prop="tagIds" width="300px">
+        <template slot-scope="scope">
+          <div class="tag-container">
+            <div class="tag-list">
+              <div v-for="i in JSON.parse(scope.row.tagIds)" :key="i" style="display: inline;">
+              <el-tag type="success" v-for="ii in tagList" :key="ii.id" style="margin: 3px;" v-if="ii.tagId==i">{{ii.name}}</el-tag>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="客户等级" align="center" prop="level" width="120px" >
+        <template slot-scope="scope">
+          <dict-tag :options="ratingType" :value="scope.row.level"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="添加时间" align="center" prop="createTime" width="100px"/>
+      <el-table-column label="状态" align="center" prop="status" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="转接状态" align="center" prop="transferStatus" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="transferStatusOptions" :value="scope.row.transferStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业id" align="center" prop="corpId" />
+      <el-table-column label="备注电话号码" align="center" prop="remarkMobiles" width="150px">
+        <template slot-scope="scope">
+          <span v-for="i in JSON.parse(scope.row.remarkMobiles)" :key="i">{{i}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注企业名称" align="center" prop="remarkCorpName" />
+      <el-table-column label="来源" align="center" prop="addWay" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="addWayOptions" :value="scope.row.addWay"/>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['qw:externalContact:edit']"
+          >修改</el-button>
+
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改企业微信客户对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <div style="background-color: rgb(239, 250, 255); margin: 10px;padding: 15px;">
+          <div>可将选中的客户转接给其他员工，进行后续服务</div>
+          <div>注意:90天内客户只能被转接一次，一个客户最多只能被转接两次</div>
+        </div>
+
+        <el-form-item label="接替员工" prop="userId">
+<!--          <el-button type="success" v-if="this.nickName">{{ nickName }}</el-button>-->
+          <el-input style="width: 150px" disabled>
+            <template slot="prefix">
+              <el-button
+                plain
+                size="small"
+                type="success"
+                v-if="this.nickName">
+                {{ nickName }}
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="清除标签" prop="needClearTag">
+          <el-radio v-model="form.needClearTag" :label="0">不清除</el-radio>
+          <el-radio v-model="form.needClearTag" :label="1">清除</el-radio>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            <span v-if="form.needClearTag === 0">不清除标签：客户转接后会保留原标签，不会被清除。</span>
+            <span v-else>清除标签：客户转接后原标签不会保留，仅会存在自动添加的标签。</span>
+          </div>
+        </el-form-item>
+		<el-form-item label="消息内容" prop="content">
+		  <el-input v-model="form.content" placeholder="请输入内容" />
+      <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+        <i class="el-icon-info"></i>
+        自定义转接的时候发给客户的消息内容（选填）ps:不填则是官方默认话术
+      </div>
+		</el-form-item>
+
+        <el-card>
+          <qwUserSelectOne ref="qwUserSelectOne" @selectUser="selectUser"></qwUserSelectOne>
+        </el-card>
+
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { transfer,listExternalContact, getExternalContact, delExternalContact, addExternalContact, updateExternalContact, exportExternalContact } from "@/api/qw/externalContact";
+import { listTag, getTag, delTag, addTag, updateTag, exportTag } from "@/api/qw/tag";
+import { qwUserList,getMyQwCompanyListAll } from "@/api/qw/user";
+import qwUserSelectOne from '@/views/qw/user/qwUserSelectOne.vue'
+
+export default {
+  name: "ExternalContact",
+  components: { qwUserSelectOne },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      myQwCompanyList:[],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企业微信客户表格数据
+      externalContactList: [],
+      dateRange: null,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      filter: false,
+      // 用户类别字典
+      typeOptions: [],
+      ratingType: [],
+      selectTags:[],
+      // 性别字典
+      genderOptions: [],
+      // 来源字典
+      addWayOptions: [],
+      nickName:null,
+      qwUserList:[],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        remark:null,
+        gender: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        status:0,
+        transferStatus:null
+      },
+      // 表单参数
+      form: {
+        needClearTag: 0
+      },
+      tagList:[],
+      transferStatusOptions:[],
+      statusOptions:[],
+      // 表单校验
+      rules: {
+        userId: [{ required: true, message: '请选择接替员工', trigger: 'blur' }],
+      }
+    };
+  },
+  created() {
+    getMyQwCompanyListAll().then(response => {
+            this.myQwCompanyList = response.data;
+            if(this.myQwCompanyList!=null){
+              this.queryParams.corpId=this.myQwCompanyList[0].dictValue;
+              listTag({corpId:this.queryParams.corpId}).then(response => {
+                this.tagList = response.rows;
+              });
+              qwUserList(this.queryParams.corpId).then(response => {
+                this.qwUserList = response.rows;
+              });
+
+              this.getList();
+            }
+    });
+
+    this.getDicts("sys_qw_externalContact_type").then(response => {
+      this.typeOptions = response.data;
+    });
+    this.getDicts("sys_user_sex").then(response => {
+      this.genderOptions = response.data;
+    });
+    this.getDicts("sys_qw_externalContact_addWay").then(response => {
+      this.addWayOptions = response.data;
+    });
+    this.getDicts("sys_qw_sop_rating_type").then(response => {
+      this.ratingType = response.data;
+    });
+
+
+    this.getDicts("sys_qw_external_contact_status").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("sys_qw_transfer_status").then(response => {
+      this.transferStatusOptions = response.data;
+    });
+
+  },
+  methods: {
+    updateCorpId(){
+      listTag({corpId:this.queryParams.corpId}).then(response => {
+        this.tagList = response.rows;
+      });
+      qwUserList(this.queryParams.corpId).then(response => {
+        this.qwUserList = response.rows;
+      });
+      this.getList();
+     },
+    /** 查询企业微信客户列表 */
+    getList() {
+      this.loading = true;
+      listExternalContact(this.queryParams).then(response => {
+        this.externalContactList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    changeTime(){
+      if(this.dateRange!=null){
+        this.queryParams.sTime=this.dateRange[0];
+        this.queryParams.eTime=this.dateRange[1];
+      }else{
+        this.queryParams.sTime=null;
+        this.queryParams.eTime=null;
+      }
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        userId: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        gender: null,
+        remark: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        needClearTag: 0
+      };
+      this.resetForm("form");
+    },
+
+    selectUser(row){
+      this.form.userId=row.id
+	  console.log(row)
+      this.nickName=row.qwUserName
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.tagIds=this.selectTags.join(',')
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.selectTags=[];
+      this.dateRange=null;
+      this.changeTime();
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+     addExternalContact(this.form).then(response => {
+       this.msgSuccess("同步成功");
+       this.getList();
+     });
+
+    },
+
+    handleTransfer(row) {
+      this.reset();
+      if(this.ids==null||this.ids==""){
+        return  this.$message('请选择需要分配的客户');
+      }
+      setTimeout(() => {
+                    this.$refs.qwUserSelectOne.getDetails(this.queryParams.corpId);
+       }, 1);
+      this.open = true;
+      this.filter = false;
+      this.title = "分配客户";
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+
+
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if(obj.tagIds == "" && obj.tagIds.length == 0){
+          obj.tagIds = null;
+        }
+        if(obj.tagIds !== null && obj.tagIds !== undefined){
+          obj.tagIds = obj.tagIds.split(",");
+        }
+        if (valid) {
+            var form={
+              ids:this.ids,
+              addType: 0,
+              filter: this.filter,
+              param: obj,
+              userId:this.form.userId,
+              corpId:this.queryParams.corpId,
+			        content:this.form.content,
+              needClearTag: this.form.needClearTag
+            }
+            transfer(form).then(response => {
+              this.msgSuccess(response.msg);
+              this.open = false;
+              this.getList();
+            });
+
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除企业微信客户编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delExternalContact(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有企业微信客户数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportExternalContact(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
+<style  scoped>
+.tag-container {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 1px;
+  border: 1px solid #ebeef5;
+  border-radius: 1px;
+  background-color: #fafafa;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.scroll-hint {
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+  padding: 1px 0;
+}
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 10px;
+}
+.title {
+  text-align: center;
+  color: #303133;
+  margin-bottom: 30px;
+}
+.demo-table {
+  width: 100%;
+  margin-bottom: 30px;
+}
+.instructions {
+  background-color: #f5f7fa;
+  padding: 15px;
+  border-radius: 1px;
+  margin-bottom: 20px;
+}
+</style>

src/views/qw/externalContactUnassigned/index.vue

@@ -0,0 +1,581 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
+      <el-form-item label="企微公司" prop="corpId">
+                      <el-select v-model="queryParams.corpId" placeholder="企微公司"  size="small" @change="updateCorpId()">
+                        <el-option
+                          v-for="dict in myQwCompanyList"
+                          :key="dict.dictValue"
+                          :label="dict.dictLabel"
+                          :value="dict.dictValue"
+                        />
+                      </el-select>
+      </el-form-item>
+
+      <el-form-item label="原所属员工" prop="qwUserName">
+              <el-select @change="handleSelectChange" v-model="queryParams.qwUserName" remote filterable clearable reserve-keyword
+                         placeholder="请输入原所属员工名称" :remote-method="qwUserMethod">
+                <el-option
+                  v-for="item in qwUserNameList"
+                  :key="item.id"
+                  :label="item.qwUserName"
+                  :value="item.qwUserName">
+                  <span style="float: left">{{ item.qwUserName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+      <el-form-item label="客户名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入客户名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="用户类别" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择用户类别" clearable size="small">
+          <el-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别" prop="gender">
+        <el-input
+          v-model="queryParams.gender"
+          placeholder="请输入性别"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="转接状态" prop="addWay">
+        <el-select v-model="queryParams.transferStatus" placeholder="转接状态" clearable size="small">
+          <el-option
+            v-for="dict in transferStatusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['qw:externalContact:add']"
+        >同步</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['qw:externalContact:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="handleTransfer"
+          v-hasPermi="['qw:externalContact:transfer']"
+        >分配客户</el-button>
+      </el-col>
+       <el-col :span="1.5">
+        <el-button v-if="isQwUserISNull"
+          type="primary"
+          plain
+          size="mini"
+          @click="handleTransferAll"
+          v-hasPermi="['qw:externalContact:transfer']"
+        >分配此员工所有客户</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="externalContactList" @selection-change="handleSelectionChange" border>
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column label="原所属员工" align="center" prop="qwUserName" width="120px"/>
+      <el-table-column label="原员工部门" align="center" prop="departmentName" width="120px"/>
+      <el-table-column label="外部联系人账号" align="center" prop="externalUserId" width="120px"/>
+      <el-table-column label="客户名称" align="center" prop="name" />
+      <el-table-column label="头像" align="center" prop="avatar" width="120px">
+        <template slot-scope="scope">
+          <el-popover
+            placement="right"
+            title=""
+            trigger="hover">
+            <img slot="reference" :src="scope.row.avatar" width="100px">
+            <img :src="scope.row.avatar" style="max-width: 150px;">
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户类别" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="typeOptions" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" align="center" prop="gender">
+        <template slot-scope="scope">
+          <dict-tag :options="genderOptions" :value="scope.row.gender"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="描述信息" align="center" prop="description" />
+      <el-table-column label="标签" align="center" prop="tagIds" width="150px">
+        <template slot-scope="scope">
+          <div class="tag-container">
+            <div class="tag-list">
+              <div v-for="i in JSON.parse(scope.row.tagIds)" :key="i" style="display: inline;">
+                <el-tag type="success" v-for="ii in tagList" :key="ii.id" style="margin: 3px;" v-if="ii.tagId==i">{{ii.name}}</el-tag>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注电话号码" align="center" prop="remarkMobiles" width="150px">
+        <template slot-scope="scope">
+          <span v-for="i in JSON.parse(scope.row.remarkMobiles)" :key="i">{{i}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注企业名称" align="center" prop="remarkCorpName" />
+      <el-table-column label="来源" align="center" prop="addWay" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="addWayOptions" :value="scope.row.addWay"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="转接状态" align="center" prop="transferStatus" width="100px">
+        <template slot-scope="scope">
+          <dict-tag :options="transferStatusOptions" :value="scope.row.transferStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="企业id" align="center" prop="corpId" />
+
+      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['qw:externalContact:edit']"
+          >修改</el-button>
+
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-sizes="[10,100, 200, 300, 500]"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改企业微信客户对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px"  append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="height: 100%">
+        <div style="background-color: rgb(239, 250, 255); margin: 10px;padding: 15px;">
+          <div>原跟进成员离职时间不能超过1年且离职前一年内至少登录过一次企业微信</div>
+          <div>接替成员最近一年内至少登陆过一次企业微信。</div>
+        </div>
+        <el-form-item label="接替员工:" prop="userId">
+
+          <el-input style="width: 150px" disabled>
+            <template slot="prefix">
+              <el-button
+                plain
+                size="small"
+                type="success"
+                v-if="this.nickName">
+                {{ nickName }}
+              </el-button>
+            </template>
+          </el-input>
+
+
+        </el-form-item>
+        <el-form-item label="清除标签" prop="needClearTag">
+          <el-radio v-model="form.needClearTag" :label="0">不清除</el-radio>
+          <el-radio v-model="form.needClearTag" :label="1">清除</el-radio>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            <span v-if="form.needClearTag === 0">不清除标签：客户转接后会保留原标签，不会被清除。</span>
+            <span v-else>清除标签：客户转接后原标签不会保留，仅会存在自动添加的标签。</span>
+          </div>
+        </el-form-item>
+        <el-card>
+        <qwUserSelectOne ref="qwUserSelectOne" @selectUser="selectUser"></qwUserSelectOne>
+        </el-card>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addUnassigned,resignedTransfer,listExternalContact, getExternalContact, delExternalContact, addExternalContact, updateExternalContact, exportExternalContact } from "@/api/qw/externalContact";
+import { listTag, getTag, delTag, addTag, updateTag, exportTag } from "@/api/qw/tag";
+import { qwUserList,userList } from "@/api/qw/user";
+import qwUserSelectOne from "@/views/qw/user/qwUserSelectOne.vue";
+import { getMyQwUserList,getMyQwCompanyListAll } from "@/api/qw/user";
+
+export default {
+  name: "ExternalContact",
+  components:{qwUserSelectOne},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企业微信客户表格数据
+      externalContactList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 用户类别字典
+      typeOptions: [],
+      myQwCompanyList:[],
+      genderOptions: [],
+      // 来源字典
+      addWayOptions: [],
+      qwUserList:[],
+      isQwUserISNull:false,
+      qwUserName:null,
+      type:'0',
+       qwUserNameList:[],
+      qwUserNameParam:{
+        qwUserName:null
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        qwUserName: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        gender: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        status:1,
+        transferStatus:null
+      },
+      nickName:null,
+      // 表单参数
+      form: {
+        needClearTag: 0
+      },
+      tagList:[],
+      transferStatusOptions:[],
+      statusOptions:[],
+      // 表单校验
+      rules: {
+        userId:[   { required: true, message: "接替员工不能为空", trigger: "blur" }]
+
+      }
+    };
+  },
+  created() {
+    getMyQwCompanyListAll().then(response => {
+            this.myQwCompanyList = response.data;
+            if(this.myQwCompanyList!=null){
+              this.queryParams.corpId=this.myQwCompanyList[0].dictValue
+              listTag({corpId:this.queryParams.corpId}).then(response => {
+                this.tagList = response.rows;
+              });
+              this.getList();
+            }
+    });
+    this.getDicts("sys_qw_externalContact_type").then(response => {
+      this.typeOptions = response.data;
+    });
+    this.getDicts("sys_sex").then(response => {
+      this.genderOptions = response.data;
+    });
+    this.getDicts("sys_qw_externalContact_addWay").then(response => {
+      this.addWayOptions = response.data;
+    });
+
+    this.getDicts("sys_qw_external_contact_status").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("sys_qw_transfer_status").then(response => {
+      this.transferStatusOptions = response.data;
+    });
+    // qwUserList().then(response => {
+    //   this.qwUserList = response.rows;
+    // });
+
+  },
+  methods: {
+     qwUserMethod(query) {
+      if (query !== '') {
+        this.qwUserNameParam.qwUserName = query;
+        userList(this.qwUserNameParam).then(response => {
+          this.qwUserNameList = response.rows;
+        });
+      }
+    },
+     handleSelectChange(value) {
+    console.log('选中的值:', value);
+    if(value == ''){
+      this.qwUserNameList=null
+    this.isQwUserISNull = false;
+    }else{
+    this.isQwUserISNull = true;
+    }
+  },
+    updateCorpId(){
+      listTag({corpId:this.queryParams.corpId}).then(response => {
+        this.tagList = response.rows;
+      });
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      listExternalContact(this.queryParams).then(response => {
+        this.externalContactList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        userId: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        gender: null,
+        remark: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        needClearTag: 0
+      };
+      this.resetForm("form");
+    },
+
+    selectUser(row){
+      this.form.userId=row.id
+      // console.log("row",row)
+      this.nickName=row.nickName || row.qwUserName
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.qwUserNameList=null
+       this.isQwUserISNull = false;
+      this.resetForm("queryForm");
+      this.queryParams.corpId= this.myQwCompanyList[0].dictValue
+      this.queryParams.transferStatus = null;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.form.corpId=this.queryParams.corpId;
+     addUnassigned(this.form).then(response => {
+       this.msgSuccess("同步成功");
+       this.getList();
+     });
+
+    },
+
+    handleTransfer(row) {
+      this.reset();
+      this.type = '0'
+      if(this.ids==null||this.ids==""){
+        return  this.$message('请选择需要分配的客户');
+      }
+      setTimeout(() => {
+              this.$refs.qwUserSelectOne.getDetails(this.queryParams.corpId);
+      }, 1);
+      this.open = true;
+      this.title = "分配客户";
+
+    },
+
+
+     handleTransferAll(row) {
+      this.reset();
+     this.qwUserName=this.queryParams.qwUserName;
+       this.type="1";
+      setTimeout(() => {
+                    this.$refs.qwUserSelectOne.getDetails(this.queryParams.corpId);
+       }, 1);
+      this.open = true;
+      this.title = "分配该员工所有客户";
+
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.nickName=null;
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            var form={
+              qwUserName:this.qwUserName,
+              type:this.type,
+              ids:this.ids,
+              userId:this.form.userId,
+              corpId:this.queryParams.corpId,
+              needClearTag: this.form.needClearTag
+            }
+            resignedTransfer(form).then(response => {
+              this.msgSuccess(response.msg);
+              this.open = false;
+              this.getList();
+            });
+
+        }
+      });
+      this.qwUserName=null;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除企业微信客户编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delExternalContact(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有企业微信客户数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportExternalContact(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
+<style scoped>
+
+.tag-container {
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 1px;
+  border: 1px solid #ebeef5;
+  border-radius: 1px;
+  background-color: #fafafa;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.scroll-hint {
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+  padding: 1px 0;
+}
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 10px;
+}
+.title {
+  text-align: center;
+  color: #303133;
+  margin-bottom: 30px;
+}
+.demo-table {
+  width: 100%;
+  margin-bottom: 30px;
+}
+.instructions {
+  background-color: #f5f7fa;
+  padding: 15px;
+  border-radius: 1px;
+  margin-bottom: 20px;
+}
+</style>

src/views/qw/groupChat/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="3" :xs="24">
+        <div class="head-container">
+          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <!--群聊数据-->
+      <el-col :span="21" :xs="24">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+      <el-form-item label="企微公司" prop="corpId">
+          <el-select v-model="queryParams.corpId" placeholder="企微公司" size="small" @change="updateCorpId()">
+            <el-option
+              v-for="dict in myQwCompanyList"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+      </el-form-item>
+      <el-form-item label="群名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入群名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="群主(后台)" prop="ownerName">
+        <el-input
+          v-model="queryParams.ownerName"
+          placeholder="请输入群主名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="群主(企微)" prop="qwName">
+        <el-input
+          v-model="queryParams.qwName"
+          placeholder="请输入群主名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="群公告" prop="notice">
+        <el-input
+          v-model="queryParams.notice"
+          placeholder="请输入群公告"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="群跟进状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择客户群跟进状态" clearable size="small">
+          <el-option label="请选择状态"
+                     v-for="dict in groupChatStatusOptions"
+                      :label="dict.dictLabel"
+                      :key="dict.dictValue"
+                      :value="dict.dictValue"/>
+        </el-select>
+      </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-button type="warning" icon="el-icon-magic-stick" size="mini" @click="getCogradientGroupChat">同步客户群</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="groupChatList" border>
+      <el-table-column label="群名" align="center" prop="name" >
+        <template slot-scope="scope">
+          <i class="el-icon-s-comment"></i>
+          {{scope.row.name}}
+        </template>
+      </el-table-column>
+      <el-table-column label="群主(后台)" align="center" prop="ownerName" />
+      <el-table-column label="群主(企微)" align="center" prop="qwName" />
+      <el-table-column label="群公告" align="center" prop="notice" />
+      <el-table-column label="群跟进状态" align="center" prop="status" >
+        <template slot-scope="scope">
+          <span v-for="(item,index) in groupChatStatusOptions" v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="群人数" align="center" prop="groupSizeByChartUser"></el-table-column>
+      <el-table-column label="当日入群数" align="center" prop="todayJoinByChartUser"></el-table-column>
+      <el-table-column label="群创建时间" align="center" prop="createTime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-notebook-2"
+            @click="hangdleDitels(scope.row)"
+          >详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-drawer :title="title" :visible.sync="open" width="100%" size="85%">
+      <group_chat_user ref="GroupChatUser" :rowDetailFrom="this.form"></group_chat_user>
+    </el-drawer>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  listGroupChat,
+  getGroupChat,
+  cogradientGroupChat
+} from '@/api/qw/groupChat'
+import Group_chat_user from '@/views/qw/groupChatUser/groupChatUser'
+import { getMyQwUserList,getMyQwCompanyListAll } from "@/api/qw/user";
+import { treeselect } from "@/api/company/companyDept";
+
+export default {
+  name: "GroupChat",
+  components: { Group_chat_user },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      myQwCompanyList:[],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 客户群详情表格数据
+      groupChatList: [],
+      //客户群跟进状态
+      groupChatStatusOptions:[],
+      // 部门树选项
+      deptOptions: "",
+      // 部门名称
+      deptName: "",
+      // 部门树props
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        owner: null,
+        ownerName: null,
+        qwName: null,
+        notice: null,
+        memberVersion: null,
+        status: null,
+        companyId: null,
+        corpId: null,
+        deptId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    this.getTreeselect();
+    getMyQwCompanyListAll().then(response => {
+            this.myQwCompanyList = response.data;
+            if(this.myQwCompanyList!=null){
+              this.queryParams.corpId=this.myQwCompanyList[0].dictValue
+              this.getList();
+            }
+     });
+    //群跟进状态字典
+    this.getDicts("sys_qw_groupChat_status").then(response => {
+      this.groupChatStatusOptions = response.data;
+    });
+  },
+  methods: {
+
+     updateCorpId(){
+         this.getList();
+      },
+
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.queryParams.companyId = data.companyId;
+      this.getList();
+    },
+
+    /** 查询客户群列表 */
+    getList() {
+      this.loading = true;
+      listGroupChat(this.queryParams).then(response => {
+        this.groupChatList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    //同步客户群（暂用）
+    getCogradientGroupChat(){
+      this.loading = true;
+      cogradientGroupChat(this.queryParams.corpId).then(response=>{
+        if (response.code == 200) {
+          this.msgSuccess("同步成功");
+          this.getList();
+        } else {
+          this.msgError(response.msg);
+        }
+        this.loading = false;
+      })
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        chatId: null,
+        id: null,
+        name: null,
+        owner: null,
+        notice: null,
+        memberVersion: null,
+        status: "0",
+        companyId: null,
+        corpId: null,
+        createTime: null,
+        updateTime: null,
+        quitScene:null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    //详情
+    hangdleDitels(row){
+
+      this.reset();
+      this.open = true;
+      this.title = "客户群详情";
+      this.form=row;
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.corpId= this.myQwCompanyList[0].dictValue
+      this.handleQuery();
+    },
+
+  }
+};
+</script>

src/views/qw/groupChatUser/groupChatUser.vue

@@ -0,0 +1,504 @@
+<template>
+  <el-card style="background-color: rgb(240 242 245)">
+  <div class="app-container">
+    <div style="display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; width: 100%; padding: 0 20px;">
+      <div style="background-color: #34bfa3; width: calc(25% - 40px); height: 130px; margin: 0 20px 20px;">
+        <div class="topBlockStyle">
+          <span>今日新增成员数</span>
+        </div>
+        <div class="topBlockStyle">
+          <span>{{this.rowDetailFrom.todayJoinByChartUser}}</span>
+        </div>
+      </div>
+      <div style="background-color: lightsalmon; width: calc(25% - 40px); height: 130px; margin: 0 20px 20px;">
+        <div class="topBlockStyle">
+          <span>今日退群成员数</span>
+        </div>
+        <div class="topBlockStyle">
+          <span>{{this.rowDetailFrom.todayOutByChartUser}}</span>
+        </div>
+      </div>
+      <div style="background-color: #ed5565; width: calc(25% - 40px); height: 130px; margin: 0 20px 20px;">
+        <div class="topBlockStyle">
+          <span>当前群成员总数</span>
+        </div>
+        <div class="topBlockStyle">
+          <span>{{this.rowDetailFrom.groupSizeByChartUser}}</span>
+        </div>
+      </div>
+      <div style="background-color: #7171C6; width: calc(25% - 40px); height: 130px; margin: 0 20px 20px;">
+        <div class="topBlockStyle">
+          <span>累计退群成员数</span>
+        </div>
+        <div class="topBlockStyle">
+          <span>{{this.rowDetailFrom.allOutGroup}}</span>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin: 20px">
+      <el-radio-group v-model="queryParams.countType" @input="changeLineType">
+        <el-radio-button :label="item.dictValue" v-for="item in groupChatUserDayType" style="padding-left:20px"  >{{item.dictLabel}}</el-radio-button>
+      </el-radio-group>
+      <div v-if="queryParams.countType==1" style="margin:20px 0px">
+        <el-date-picker
+          v-model="hospitalOrderScreenCharge"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          :default-time="['00:00:00', '23:59:59']"
+          @change="changeLine">
+        </el-date-picker>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+    <div id="lineChart" style="width: 100%;height: 500px"/>
+
+  </div >
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
+
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入想查询名字"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="是否退群" prop="isOut">
+        <el-select v-model="queryParams.isOut" placeholder="请选择群员状态">
+          <el-option v-for="item in groupChatUserIsOutType"
+                     :key="item.dictValue"
+                     :label="item.dictLabel"
+                     :value="item.dictValue">
+
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style="float: right">
+        <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-button type="warning" icon="el-icon-magic-stick" size="mini" @click="getCogradientGroupChat">同步此客户群</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="group_chat_userList">
+      <el-table-column label="客户群ID" align="center" prop="chatId" />
+      <el-table-column label="群成员账号" align="center" prop="userId" />
+      <el-table-column label="成员类型" align="center" prop="type" >
+        <template slot-scope="scope">
+          <span v-for="(item,index) in  groupChatUserType" v-if="scope.row.type==item.dictValue">{{item.dictLabel}}</span>
+        </template>
+      </el-table-column>
+      <!--      <el-table-column label="外部联系人在微信开放平台的唯一身份标识" align="center" prop="unionid" />-->
+      <el-table-column label="入群时间" align="center" prop="joinTime" width="180"/>
+      <el-table-column label="入群方式" align="center" prop="joinScene">
+        <template slot-scope="scope">
+          <span v-for="(item,index) in groupChatUserScene" v-if="scope.row.joinScene==item.dictValue">{{item.dictLabel}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="邀请者" align="center" prop="invitorName" />
+      <!--      <el-table-column label="客户在群里的昵称" align="center" prop="groupNickname" />-->
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="是否退群" align="center" prop="isOut" >
+        <template slot-scope="scope">
+          <dict-tag :options="groupChatUserIsOutType" :value="scope.row.isOut"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="退群时间" align="center" prop="outTime" />
+      <el-table-column label="退群方式" align="center" prop="quitScene" >
+        <template slot-scope="scope">
+          <dict-tag :options="groupChatUserQuitSceneType" :value="scope.row.quitScene"/>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+  </div>
+  </el-card>
+</template>
+
+<script>
+import {
+  listGroup_chat_user,
+  getGroup_chat_user,
+  delGroup_chat_user,
+  addGroup_chat_user,
+  updateGroup_chat_user,
+  getDataWeekMonthCount,
+  cogradientGroupChatUser
+} from '@/api/qw/group_chat_user'
+import echarts from 'echarts'
+import { cogradientGroupChat } from '@/api/qw/groupChat'
+
+export default {
+  name: "Group_chat_user",
+  components:{},
+
+  props:{
+    rowDetailFrom:{},
+  },
+
+  watch:{
+    rowDetailFrom:{
+      handler(newVal){
+        // 当formData变化时重新查询
+        this.getList(newVal);
+        this.lineChart(newVal);
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      //折线图
+      toDay:[],
+      dailyJoinCount:[],
+      dailyOutCount:[],
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 客户群成员列表格数据
+      group_chat_userList: [],
+      //成员类型
+      groupChatUserType:[],
+      //是否退群
+      groupChatUserIsOutType:[],
+
+      //入群方式
+      groupChatUserScene:[],
+
+      //退群方式
+      groupChatUserQuitSceneType:[],
+
+      //日期查询类型
+      groupChatUserDayType:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        chatId: null,
+        userId: null,
+        type: null,
+        unionid: null,
+        joinTime: null,
+        joinScene: null,
+        invitor: null,
+        invitorUserid: null,
+        groupNickname: null,
+        name: null,
+        companyId: null,
+        corpId: null,
+        isAdmin: null,
+        beginTime:null,
+        endTime:null,
+        countType:null,
+        isOut:null,
+        quitScene:null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      //日期快捷选择
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近三天',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+              picker.$emit('pick', [start, end]);
+            }
+          },{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+      },
+
+      //日期选择
+      hospitalOrderScreenCharge:[],
+    };
+  },
+  created() {
+    this.getList(this.rowDetailFrom)
+    this.lineChart(this.rowDetailFrom)
+    //成员类型字典
+    this.getDicts("sys_qw_groupChat_user_type").then(response => {
+      this.groupChatUserType = response.data;
+    });
+
+    //入群方式字典
+    this.getDicts("sys_qw_groupChat_user_scene").then(response => {
+      this.groupChatUserScene = response.data;
+    });
+    this.getDicts("sys_qw_groupChat_user_day_type").then(response => {
+      this.groupChatUserDayType = response.data;
+    });
+
+    //是否退群
+    this.getDicts("sys_qw_groupCharUser_isOut").then(response => {
+      this.groupChatUserIsOutType = response.data;
+    });
+
+    //是否退群
+    this.getDicts("sys_qw_groupChar_quitScene").then(response => {
+      this.groupChatUserQuitSceneType = response.data;
+    });
+
+  },
+
+
+  methods: {
+    /** 查询客户群详细信息 */
+
+    getList:function(newVal) {
+
+      if (newVal && typeof newVal === 'object') {
+        this.queryParams.chatId = newVal.chatId || this.rowDetailFrom.chatId;
+      } else {
+        this.queryParams.chatId = this.rowDetailFrom.chatId;
+      }
+
+      this.loading = true
+      listGroup_chat_user(this.queryParams).then(response => {
+        this.group_chat_userList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+
+    },
+    //折线图初始化
+    lineChart:function(newVal){
+      this.resetLineChart();
+      this.queryParams.chatId=newVal.chatId;
+      //默认按星期
+      this.queryParams.countType=2
+      getDataWeekMonthCount(this.queryParams).then(response=>{
+        for (const  key in response.data){
+          this.toDay.push(response.data[key]["toDay"])
+          this.dailyJoinCount.push(response.data[key]["dailyJoinCount"])
+          this.dailyOutCount.push(response.data[key]["dailyOutCount"])
+        }
+        setTimeout(() => {
+          this.initEchart();
+        }, 100);
+      })
+
+    },
+
+    initEchart(){
+      const option = {
+        title: {
+          text: '时间段内新增成员，退群成员表'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['入群人员数', '退群成员数']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.toDay
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '入群人员数',
+            type: 'line',
+            stack: 'Total',
+            data: this.dailyJoinCount
+          },
+          {
+            name: '退群成员数',
+            type: 'line',
+            stack: 'Total',
+            data: this.dailyOutCount
+          },
+        ]
+      }
+      const lineChart = echarts.init(document.getElementById('lineChart'))
+      lineChart.setOption(option,true);
+    },
+
+    //折线图
+    changeLine(){
+      this.resetLineChart();
+
+      if (this.hospitalOrderScreenCharge!=null) {
+        this.queryParams.beginTime=this.hospitalOrderScreenCharge[0]
+        this.queryParams.endTime=this.hospitalOrderScreenCharge[1]
+        getDataWeekMonthCount(this.queryParams).then(response=>{
+          for (const  key in response.data){
+            this.toDay.push(response.data[key]["toDay"])
+            this.dailyJoinCount.push(response.data[key]["dailyJoinCount"])
+            this.dailyOutCount.push(response.data[key]["dailyOutCount"])
+          }
+          setTimeout(() => {
+            this.initEchart();
+          }, 100);
+        })
+      }
+    },
+    changeLineType(){
+      this.resetLineChart();
+      if (this.queryParams.countType==2){
+        this.queryParams.countType=2
+        getDataWeekMonthCount(this.queryParams).then(response=>{
+          for (const  key in response.data){
+            this.toDay.push(response.data[key]["toDay"])
+            this.dailyJoinCount.push(response.data[key]["dailyJoinCount"])
+            this.dailyOutCount.push(response.data[key]["dailyOutCount"])
+          }
+          setTimeout(() => {
+            this.initEchart();
+          }, 100);
+        })
+      }
+      if (this.queryParams.countType==3){
+        this.queryParams.countType=3
+        getDataWeekMonthCount(this.queryParams).then(response=>{
+          for (const  key in response.data){
+            this.toDay.push(response.data[key]["toDay"])
+            this.dailyJoinCount.push(response.data[key]["dailyJoinCount"])
+            this.dailyOutCount.push(response.data[key]["dailyOutCount"])
+          }
+          setTimeout(() => {
+            this.initEchart();
+          }, 100);
+        })
+      }
+    },
+
+    //同步某个客户群（暂用）
+    getCogradientGroupChat(){
+      this.loading = true;
+      cogradientGroupChatUser(this.rowDetailFrom).then(response=>{
+        if (response.code == 200) {
+          this.msgSuccess("同步成功");
+          this.getList();
+        } else {
+          this.msgError(response.msg);
+        }
+        this.loading = false;
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        chatId: null,
+        userId: null,
+        type: null,
+        unionid: null,
+        joinTime: null,
+        joinScene: null,
+        invitor: null,
+        invitorUserid: null,
+        groupNickname: null,
+        name: null,
+        companyId: null,
+        corpId: null,
+        isAdmin: null
+      };
+      this.resetForm("form");
+    },
+
+    //折线图重置
+    resetLineChart(){
+      this.toDay=[];
+      this.dailyJoinCount=[];
+      this.dailyOutCount=[];
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+  }
+};
+</script>
+<style>
+  .topBlockStyle{
+    margin: 30px;
+    color: white;
+    font-size: 20px
+  }
+</style>

src/views/qw/user/qwUserSelectOne.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="员工昵称" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="请输入员工昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </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">
+        <el-table-column label="企微员工账号" align="center" prop="qwUserId" />
+		    <el-table-column label="员工昵称" align="center" prop="qwUserName" />
+        <el-table-column label="员工部门" align="center" prop="departmentName" />
+        <el-table-column label="员工昵称" align="center" prop="nickName"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleSelectionChange(scope.row)"
+          >选择此人</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="handlePaginationChange"
+    />
+
+        <div style="margin-top: 30px;display: flex;justify-content: center;gap: 12px">
+      <el-button plain @click="handleClear">不选（清空发送人）</el-button>
+      <el-button type="warning" icon="el-icon-check" @click="confirmSelect">确定选择</el-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { listUser } from "@/api/qw/user";
+
+
+export default {
+  name: "qwUserSelectOne",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      selectUsers: null,
+      // 非单个禁用
+      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: {
+      }
+    };
+  },
+  created() {
+
+
+
+  },
+  methods: {
+    /** 查询企微用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then(response => {
+        // 如果 companyUserId 为 null，移除列
+        this.userList = response.rows.filter(column => column.companyUserId !=null);
+        this.total = response.total;
+        this.loading = false;
+
+      });
+    },
+
+    getDetails(corpId){
+      this.queryParams.corpId=corpId;
+      this.getList()
+    },
+    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(){
+      this.$emit("selectUserList",this.selectUsers);
+      this.resetSelect();
+    },
+    //重置选择
+    resetSelect(){
+      //重置
+      this.queryParams={
+        pageNum: 1,
+        pageSize: 10,
+        qwUserId: null,
+        companyId: null,
+        companyUserId: null,
+        corpId: null,
+        nickName: null
+      },
+        this.getList();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    // 选中数据
+    handleSelectionChange(selection) {
+      this.$emit("selectUser",selection);
+    },
+    // 用户点击“不选”
+    handleClear() {
+      this.$emit("selectUser",{});   // 传空对象，表示清空
+    },
+  }
+};
+</script>