feat: 客户群分配

project/src/assets/config/interface_api.js

@@ -485,6 +485,9 @@ var api = {
 
   feedback_list: '/api/sys/userOpinionFeedbackList', // 客户意见反馈
 
+  groupTransfer_configList: '/api/chatGroupTransfer/configList', // 客户群分配 - 配置列表
+  groupTransfer_changeStatus: '/api/chatGroupTransfer/changeStatus', // 客户群分配 - 切换状态
+
 };
 
 export { api };

project/src/components/assembly/screen/channel.vue

@@ -274,6 +274,16 @@ export default {
         { key: 2, val: '付费' },
       ]
       this.placeholderVal = '回传类型'
+    } else if (this.type == 'groupTransfer') { // 状态
+      this.options = [
+        { key: 1, val: '待分配' },
+        { key: 2, val: '分配中' },
+        { key: 3, val: '分配完成' },
+        { key: 4, val: '无目标客户群' },
+        { key: 5, val: '分配失败' },
+        { key: 0, val: '禁用' },
+      ]
+      this.placeholderVal = '请选择'
     } else {
       this.init()
     }

project/src/components/assembly/screen/channelMultiple.vue

@@ -254,6 +254,16 @@ export default {
         { key: 2, val: '付费' },
       ]
       this.placeholderVal = '回传类型'
+    } else if (this.type == 'groupTransfer') { // 状态
+      this.options = [
+        { key: 1, val: '待分配' },
+        { key: 2, val: '分配中' },
+        { key: 3, val: '分配完成' },
+        { key: 4, val: '无目标客户群' },
+        { key: 5, val: '分配失败' },
+        { key: 0, val: '禁用' },
+      ]
+      this.placeholderVal = '请选择'
     } else {
       this.init()
     }

project/src/components/assembly/screen/channelV2.vue

@@ -517,6 +517,16 @@ export default {
           { key: 2, val: '付费' },
         ]
         this.placeholderVal = '回传类型'
+      } else if (this.type == 'groupTransfer') { // 状态
+        this.options = [
+          { key: 1, val: '待分配' },
+          { key: 2, val: '分配中' },
+          { key: 3, val: '分配完成' },
+          { key: 4, val: '无目标客户群' },
+          { key: 5, val: '分配失败' },
+          { key: 0, val: '禁用' },
+        ]
+        this.placeholderVal = '请选择'
       } else {
         this.init()
       }

project/src/components/assembly/screen/chatGroupOptions.vue

@@ -0,0 +1,453 @@
+<template>
+  <div class="common-screen-item" style="margin-top: 0">
+    <el-popover append-to-body placement="bottom" trigger="click" v-model="dialogVisible">
+      <div
+        slot="reference"
+        :style="width ? 'width:' + width : ''"
+        :class="['common-screen-self-box', 'common-input-select', chatListResult.length ? 'common-input-select-hover' : '']"
+      >
+        <div :class="['common-screen-self-con', chatListResult.length ? '' : 'common-screen-self-placeholder']">
+          <div class="common-screen-self-con-div">
+            <span v-if="chatListResult.length">{{ chatListResultName }}</span>
+            <span v-else>请选择群聊</span>
+          </div>
+        </div>
+        <div class="common-screen-self-icon"><i class="el-icon-arrow-down" /></div>
+      </div>
+
+      <div class="flex" style="padding:10px" v-loading="loading">
+        <div class="propoverItem">
+          <div class="filter-wrap">
+            <el-select v-model="owner" class="select-wrap" size="small" placeholder="全部群主" clearable @change="onChangeOwner">
+              <el-option v-for="item in ownerOptions" :key="item.user_id" :label="item.name" :value="item.user_id" />
+            </el-select>
+            <self-input :reset="reset" :hasLabel="false" label_name="群名称" width="180px" style="margin-top:0; margin-bottom:0;" @inputChange="onChangeKeyword" />
+          </div>
+          <div class="allMember">全部群聊({{ chatList && chatList.length }}):</div>
+          <div class="memberBoxBig self-scrollbar-3">
+            <div class="memberBox" v-for="(item, idx) in chatList" :key="item.chat_id">
+              <div class="meberList">
+                <div class="memberItem" @click="handleSwitchChatItem(item, idx)">
+                  <div class="flex" style="flex:1">
+                    <i class="el-icon-chat-dot-round chat-icon" />
+                    <div class="memberInfo">
+                      <div class="name">{{ item.name }}</div>
+                      <div class="other">群主：{{ item.owner_name }}</div>
+                    </div>
+                  </div>
+                  <div :class="['checkbox', item.isSelected ? 'checkbox_active' : '']">
+                    <i class="el-icon-check" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="line" />
+
+        <div class="propoverItem" style="padding-left:20px">
+          <div class="title">已选择的群聊</div>
+          <div class="choice_result_top">
+            <div class="clear" @click="handleDelAllSelectedChat">全部清空</div>
+            <div class="result_num">已选择<span>{{ chatListSelected.length }}</span>个群</div>
+          </div>
+          <div class="member_result self-scrollbar-3">
+            <div class="memberItem" v-for="(item, idx) in chatListSelected" :key="item.chat_id">
+              <div class="flex" style="flex:1">
+                <i class="el-icon-chat-dot-round chat-icon" />
+                <div class="memberInfo">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="other">群主：{{ item.owner_name }}</div>
+                </div>
+              </div>
+              <i class="el-icon-close" style="margin-left:10px" @click="handleDelSelectedChat(idx)" />
+            </div>
+          </div>
+          <div class="buttons">
+            <el-button type="primary" plain size="mini" @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" size="mini" @click="onClickConfirm">确定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import _lodash from 'lodash'
+import selfInput from '@/components/assembly/screen/input.vue'
+export default {
+  name: "chatGroupOptions",
+  components: {
+    selfInput,
+  },
+  props: {
+    width: {
+      type: String,
+      default: () => ''
+    },
+    isHasRoomId: {
+      type: Boolean,
+      default: () => false
+    },
+    isDataIdx: { // 是否开启数据索引
+      type: Boolean,
+      default: () => false
+    },
+    dataIdx: { // 当前数据索引
+      type: Number,
+      default: () => 0
+    },
+    chatListResult: { // 最终确认选择的群列表
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      reset: false,
+      loading: false,
+      dialogVisible: false, // 控制弹框显示
+      ownerOptions: [], // 群主筛选
+      owner: '', // 群主id
+      keyword: '', // 关键字
+      chatList: [], // 可选择客户群列表
+      chatListSelected: [], // 已选择的群列表
+    }
+  },
+  computed: {
+    chatListResultName() {
+      const arr = this.chatListResult.map(c => c.name)
+      return arr.join(',')
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        this.handleGetOwnerOptions()
+        this.handleGetChatList()
+      } else { // 清空搜索关键字
+        this.owner = ''
+        this.keyword = ''
+        this.reset = !this.reset
+      }
+    },
+  },
+  methods: {
+    // 获取"可选择客户群列表"
+    async handleGetChatList() {
+      try {
+        this.loading = true
+        this.chatList = []
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_chatGroupList, {
+          params: {
+            keyword: this.keyword,
+            owner: this.owner,
+            has_room_id: this.isHasRoomId ? true : false,
+          }
+        })
+        if (res && res.errno == 0) {
+          this.chatList = res.rst.map(item => ({
+            ...item,
+            name: item.name || '未设置群名',
+            isSelected: false
+          }))
+
+          // 如果父组件已有选择的结果 => 根据"最终确认选择的群列表"获取"已选列表"
+          if (this.chatListResult.length) {
+            this.handleGetChatListSelected()
+          }
+          // 根据"已选列表" => 回显"可选列表"的已选状态
+          this.handleGetIsSelectedChatStatus()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleGetOwnerOptions() {
+      try {
+        this.ownerOptions = []
+        const url = `${this.URL.BASEURL}${this.URL.chatGroup_chatGroupOwnerIndex}`
+        const params = {}
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          this.ownerOptions = Array.isArray(res.rst) ? res.rst : []
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      }
+    },
+    onChangeOwner(val) {
+      this.owner = val
+      this.handleGetChatList()
+    },
+    onChangeKeyword(val) {
+      this.keyword = val
+      this.handleGetChatList()
+    },
+    // 取消可选列表中所有的已选状态
+    handleCloseAllChatList() {
+      this.chatList.forEach(c => {
+        c.isSelected = false
+      })
+    },
+    // 根据"最终确认选择的群列表"获取"已选列表"
+    handleGetChatListSelected() {
+      this.chatListResult.forEach(item => {
+        const isFound = this.chatList.find(c => c.chat_id === item.chat_id)
+        if (isFound) {
+          const isHas = this.chatListSelected.find(c => c.chat_id === isFound.chat_id)
+          !isHas && this.chatListSelected.push(isFound)
+        }
+      })
+    },
+    // 根据"已选列表" => 回显"可选列表"的已选状态
+    handleGetIsSelectedChatStatus() {
+      this.handleCloseAllChatList()
+      this.chatListSelected.forEach(item => {
+        // 查找当前已选的索引
+        const idx = this.chatList.findIndex(chat => chat.chat_id === item.chat_id)
+        if (idx !== -1) this.chatList[idx].isSelected = true
+      })
+    },
+    // 监听点击"可选列表 - 项" => 切换已选状态
+    handleSwitchChatItem(currentChat, currentIdx) {
+      if (currentChat.isSelected) {
+        // 已选 => 取消 & 从 chatListSelected 列表中移除
+        this.chatList[currentIdx].isSelected = false
+        const delIdx = this.chatListSelected.findIndex(chat => chat.chat_id === currentChat.chat_id)
+        if (delIdx !== -1) this.chatListSelected.splice(delIdx, 1)
+      } else {
+        // 未选 => 选择 & 添加到 chatListSelected 列表
+        this.chatList[currentIdx].isSelected = true
+        this.chatListSelected = [...this.chatListSelected, currentChat]
+      }
+    },
+    // 监听点击"已选列表 - 项" => 删除 & 回显"可选列表"的已选状态
+    handleDelSelectedChat(currentDelIdx) {
+      this.chatListSelected.splice(currentDelIdx, 1)
+      this.handleGetIsSelectedChatStatus()
+    },
+    // 监听点击"全部清空" => 删除全部 & 回显"可选列表"的已选状态
+    handleDelAllSelectedChat() {
+      this.chatListSelected = []
+      this.handleGetIsSelectedChatStatus()
+    },
+    // 监听点击"确定"
+    onClickConfirm() {
+      if (!this.chatListSelected.length) {
+        this.$message.warning('请选择群聊')
+        return
+      }
+
+      if (this.isDataIdx) {
+        this.$emit('change', {
+          idx: this.dataIdx,
+          res: _lodash.cloneDeep(this.chatListSelected),
+        })
+      } else {
+        this.$emit('change', _lodash.cloneDeep(this.chatListSelected))
+      }
+
+      this.dialogVisible = false
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  padding-right: 4px;
+  .select-wrap {
+    margin-right: 4px;
+    flex: 1;
+  }
+}
+
+.propoverItem {
+  width: 300px;
+  flex: 1;
+  height: 100%;
+
+  .allMember {
+    color: #666666;
+    font-size: 14px;
+    line-height: 20px;
+    margin-top: 17px;
+  }
+
+  .title {
+    color: #383e47;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+
+  .choice_result_top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 7px 0;
+
+    .clear {
+      color: #00B38A;
+      font-size: 13px;
+      line-height: 18px;
+      cursor: pointer;
+      font-weight: bold;
+    }
+
+    .result_num {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+
+      span {
+        color: #00B38A;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .member_result {
+    height: 380px;
+    overflow-y: auto;
+    padding-right: 15px;
+    .memberItem {
+      margin: 20px 0;
+    }
+  }
+}
+
+.line {
+  width: 0.5px;
+  background: #c3cbd6;
+}
+
+.propoverItem,
+.line {
+  height: 478px;
+}
+
+.memberBoxBig {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.memberBox {
+  display: flex;
+  margin-top: 10px;
+
+  .el-icon-caret-bottom {
+    color: #46a7ff;
+    cursor: pointer;
+    margin-right: 7px;
+    margin-top: 2px;
+    transition: all 0.3s;
+    display: block;
+    height: 14px;
+  }
+
+  .meberList {
+    flex: 1;
+    margin-right: 15px;
+
+    .department {
+      i {
+        color: #46a7ff;
+      }
+
+      span {
+        color: #383e47;
+        font-size: 14px;
+        line-height: 20px;
+        margin-left: 5px;
+        font-weight: bold;
+      }
+    }
+
+    .checkbox {
+      width: 15px;
+      height: 15px;
+      border: 1px solid #979797;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      margin-left: 10px;
+
+      i {
+        color: transparent;
+      }
+
+      &.checkbox_active {
+        i {
+          color: #ffffff;
+        }
+
+        background: #00B38A;
+        border-color: #00B38A;
+      }
+    }
+  }
+}
+
+.memberItem,
+.department {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.memberItem {
+  margin: 4px 0;
+
+  .memberImg {
+    width: 38px;
+    height: 38px;
+    border-radius: 4px;
+  }
+
+  .chat-icon {
+    font-size: 26px;
+  }
+
+  .memberInfo {
+    margin-left: 7px;
+    flex: 1;
+
+    .name {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+    }
+
+    .other {
+      color: #898d92;
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}
+
+.reversalAnimation {
+  transform: rotate(-90deg);
+}
+
+.buttons {
+  text-align: right;
+  padding: 20px 0 10px;
+}
+</style>
+

project/src/components/assembly/screen/serviceSingle.vue

@@ -18,8 +18,8 @@
     <el-dialog title="" :visible.sync="visible" :close-on-click-modal="false" :show-close="false" width="400px" append-to-body center top="15vh">
       <div v-loading="loading">
         <div class="propoverItem">
-          <self-input :reset='resetFlag' :hasLabel="false" width="90%" style="margin-top:0" @inputChange='(val)=>{input_keyword = val;init("userSearch")}'></self-input>
-          <div class="allMember">全部成员({{userTotal}}):</div>
+          <self-input :reset='resetFlag' :hasLabel="false" :label_name="source == 'chatGroup' ? '群主' : '成员'" width="90%" style="margin-top:0" @inputChange='(val)=>{input_keyword = val;init("userSearch")}'  />
+          <div class="allMember">全部{{ source == 'chatGroup' ? '群主' : '成员' }}({{userTotal}}):</div>
           <div class="memberBoxBig self-scrollbar-3">
             <template v-for="(item,index) in userList">
               <div class="memberBox" :key="index + 'userList' + item.department_id">
@@ -87,7 +87,7 @@ export default {
     afferent_users: {
       type: Array
     },
-    source: {
+    source: { // 成员许可memberTransfer  客户群chatGroup
       type: String,
       default: () => ''
     },
@@ -163,7 +163,13 @@ export default {
     },
     init () {
       this.loading = true
-      this.$axios.get(this.URL.BASEURL + this.URL.userList, {
+
+      let axios_api = this.URL.userList;
+      if (this.source == 'chatGroup') {//群主
+        axios_api = this.URL.chatGroup_ownerList
+      }
+
+      this.$axios.get(this.URL.BASEURL + axios_api, {
         params: {
           user_name: this.input_keyword
         }

project/src/components/groupTransfer/configDrawer.vue

@@ -0,0 +1,341 @@
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :close-on-press-escape="false"
+    :wrapperClosable="false"
+    :withHeader="false"
+    size="800px">
+    <div class="content-wrap" v-loading="loading">
+      <div class="self_drawer_title">
+        <div class="flex">
+          {{ title }}
+        </div>
+        <div class="flex-align-center">
+          <i class="el-icon-close pointer" @click="handleCloseDrawer" />
+        </div>
+      </div>
+
+      <div class="form-wrap" v-loading="loading">
+        <div class="form-item">
+          <span class="lable required">配置标题</span>
+          <el-input placeholder="请输入配置标题" v-model.trim="form.title" clearable size="small" />
+        </div>
+
+        <div class="form-item">
+          <span class="lable required">转移类型</span>
+          <el-radio v-model="form.type" :label="1">在职迁移</el-radio>
+          <el-radio v-model="form.type" :label="2">离职迁移</el-radio>
+        </div>
+
+        <div class="form-item">
+          <span class="lable required">转移类型</span>
+          <el-radio v-model="form.filter_type" :label="1">按群聊</el-radio>
+          <el-radio v-model="form.filter_type" :label="2">按群主</el-radio>
+        </div>
+
+        <div v-show="form.filter_type == 1" class="form-item">
+          <span class="lable required">群聊</span>
+          <selfChatGroupOptions v-if="isShowService" ref="chatGroupOptionsMain" width="300px" :isHasRoomId="true" :chatListResult="form.chat_ids" @change="onChangeGlobalChatGroup" />
+        </div>
+
+        <div v-show="form.filter_type == 2" class="form-item">
+          <span class="lable required">群主</span>
+          <selfCustomerservice v-if="isShowService" source="chatGroup" title="" width="400px" placeholder="请选择群主" :reset="reset" :afferent_users="form.old_owners" @customerDefine="onChangeOldOwners" />
+        </div>
+
+        <div class="form-item">
+          <span class="lable required">新群主</span>
+          <serviceSingle v-if="isShowService" source="chatGroup" title="" width="400px" placeholder="请选择新群主" :reset="reset" :afferent_userId="form.new_owner" @customerDefine="onChangeNewOwner" />
+        </div>
+
+        <div class="form-item">
+          <span class="lable required">分配方式</span>
+          <el-radio v-model="form.transfer_type" :label="1">立即分配</el-radio>
+          <el-radio v-model="form.transfer_type" :label="2">定时分配</el-radio>
+        </div>
+
+        <div v-show="form.transfer_type == 2" class="form-item">
+          <span class="lable required">执行分配时间</span>
+          <el-date-picker v-model="form.transfer_at" type="datetime" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择执行分配时间" size="mini" />
+        </div>
+      </div>
+
+      <div class="button_box">
+        <button class="button" @click="onClickSave">保存配置</button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import selfChatGroupOptions from '@/components/assembly/screen/chatGroupOptions.vue'
+
+export default {
+  components: {
+    serviceSingle,
+    selfCustomerservice,
+    selfChatGroupOptions,
+  },
+  props: {
+    // 控制弹框是否显示
+    value: {
+      type: Boolean,
+      default: () => false
+    },
+    config_id: {
+      type: String | Number,
+      default: () => ''
+    },
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate (time) {
+          return time < Date.now() - (24*60*60*1000);
+        }
+      },
+      loading: false,
+      reset: false,
+      isShowService: true,
+      form: {
+        title: '',
+        type: 1,
+        filter_type: 1,
+        new_owner: '',
+        old_owners: [],
+        chat_ids: [],
+        transfer_type: 1,
+        transfer_at: '',
+      },
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.config_id
+    },
+    title() {
+      return this.isEdit ? `编辑客户群分配配置` : `新建客户群分配配置`
+    },
+    visible: {
+      get() {
+        return this.value
+      },
+      set(isShow) {
+        this.$emit('input', isShow)
+      },
+    },
+
+  },
+  watch: {
+    async visible(isShow) {
+      if (isShow) {
+        this.isEdit && this.handleGetDetail()
+      } else {
+        this.handleClearForm()
+      }
+    },
+  },
+  methods: {
+    handleCloseDrawer() {
+      this.visible = false
+    },
+    // 获取详情
+    async handleGetDetail() {
+      this.isShowService = false
+      await this.$nextTick()
+      // const { title, user_id, old_owners } = this.configInfo
+      // this.form.title = title
+      // this.form.new_owner = new_owner
+      // this.form.old_owners = old_owners.split(',')
+      this.isShowService = true
+    },
+    async onClickSave() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        // 提交表单
+        this.handleSubmitForm()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    handleFormValidate() {
+      const { title, new_owner, old_owners } = this.form
+      return new Promise((resolve, reject) => {
+        if (!title) {
+          this.$message.warning('请输入配置标题')
+          reject('表单校验未通过')
+        } else if (!new_owner) {
+          this.$message.warning('请选择新群主')
+          reject('表单校验未通过')
+        } else if (!old_owners || !old_owners.length) {
+          this.$message.warning('请选择群主')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    async handleSubmitForm() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.customerShare_setConfig}`
+        const params = {
+          title: this.form.title,
+          new_owner: this.form.new_owner,
+          old_owners: this.form.old_owners.join(',')
+        }
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('保存成功')
+          this.handleClearForm()
+          this.$emit('confirm', { isEdit: this.isEdit })
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '保存失败')
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleClearForm() {
+      this.reset = !this.reset
+      this.form.title = ''
+      this.form.new_owner = ''
+      this.form.old_owners = []
+      this.isShowService = false
+      await this.$nextTick()
+      this.isShowService = true
+    },
+    onChangeNewOwner(val) {
+      console.log('onChangeNewOwner => ', val)
+      this.form.new_owner = val ? val.user_id : ''
+    },
+    onChangeOldOwners(val) {
+      console.log('onChangeOldOwners => val ', val)
+      this.form.old_owners = val
+    },
+    // 监听"选择群聊"变化
+    onChangeGlobalChatGroup(selectedChat) {
+      console.log('onChangeGlobalChatGroup => selectedChat ', selectedChat)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-wrap {
+  .form-wrap {
+    padding: 30px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 40px;
+      &.flex-start {
+        align-items: flex-start;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        flex-shrink: 0;
+        width: 120px;
+        color: #333;
+        font-size: 14px;
+        line-height: 28px;
+
+        &.required {
+          position: relative;
+          &::before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .el-input {
+        width: 400px;
+        /deep/ &.is-disabled .el-input__inner {
+          background-color: #F5F7FA;
+          border-color: #DCDFE6;
+          color: #606266;
+          cursor: not-allowed;
+        }
+      }
+      .el-select {
+        width: 260px;
+      }
+      .account-wrap {
+        .account-item-wrap {
+          margin-top: 35px;
+          &:first-child {
+            margin-top: 0;
+          }
+          .corp-wrap {
+            display: flex;
+            align-items: center;
+            .user-select {
+              margin-left: 10px;
+            }
+            .icon-btn {
+              font-size: 17px;
+              cursor: pointer;
+              margin-left: 10px;
+              &.el-icon-delete {
+                color:#f56c6c;
+              }
+              &.el-icon-circle-plus-outline {
+                color: #00b38a;
+              }
+            }
+
+          }
+          .user-wrap {
+            box-sizing: border-box;
+            width: 533px;
+            background-color: rgb(247, 247, 247);
+            margin-top: 10px;
+            padding: 10px 10px 0 10px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            .user-item-wrap {
+              position: relative;
+              margin: 0 14px 10px 0;
+              .err-icon {
+                position: absolute;
+                top: -5px;
+                right: -5px;
+                color: #c1c1c1;
+                font-size: 15px;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .button_box {
+    margin: 100px 134px;
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    width: 178px;
+    height: 40px;
+    background: #00b38a;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 14px;
+    border: none;
+    margin-right: 10px;
+  }
+}
+</style>

project/src/components/groupTransfer/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div v-loading="loading" class="customerShare-wrap">
+    <div class="screenBox">
+      <div class="filter-wrap">
+        <!-- 标题 -->
+        <selfInputV2 v-model="filter.keyword" label_name="标题" placeholder="请输入" :labelWidth="true" @change="onChangeKeyword" style="width: auto;" />
+        <!-- 新群主 -->
+        <serviceSingle title="新群主" placeholder="请选择" source="chatGroup" @customerDefine="onChangeNewOwner" />
+        <!-- 状态 -->
+        <selfChannelV2 v-model="filter.status" type="groupTransfer" title="状态" :labelWidth="true" @change="onChangeStatus" />
+      </div>
+      <el-button type="primary" size="mini" @click="onClickCreateBtn">客户群分配</el-button>
+    </div>
+    <el-table :height="height" :data="list" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+      <el-table-column label="配置标题" prop="title" min-width="200" align="center" fixed="left" />
+      <el-table-column label="创建人" align="center" min-width="140">
+        <template slot-scope="{ row }">
+          <div class="customerServiceTagBox">
+            <div class="customerServiceTag"><i class="el-icon-user-solid" /> {{ row.create_user }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="转移类型" align="center" min-width="140">
+        <template slot-scope="{ row }">
+          <span>{{ row.type == 1 ? '在职迁移' : '离职迁移' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="筛选方式" align="center" min-width="140">
+        <template slot-scope="{ row }">
+          <span>{{ row.filter_type == 1 ? '按群聊' : '按群主' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="新群主" prop="new_owner_name" min-width="200" align="center" />
+      <el-table-column label="状态" align="center" min-width="120">
+        <template slot-scope="{ row }">
+          <span :class="[handleGetStatusDesc(row.status).cls]">{{ handleGetStatusDesc(row.status).label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="160" align="center" fixed="right">
+        <template slot-scope="{ row }">
+          <span v-if="row.status == 0" class="btn c-007AFF" @click="onClickStatus(row, 1)">启用</span>
+          <span v-if="row.status == 1" class="btn c-FF604D" @click="onClickStatus(row, 0)">禁用</span>
+          <span class="btn c-00b38a" @click="onClickEditBtn(row)">编辑</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="pagination.total > 0">
+      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)" />
+    </div>
+
+    <!-- S 创建配置 -->
+    <configDrawer
+      v-model="configDrawerVisible"
+      :configInfo="currentConfigInfo"
+      @confirm="onConfirmConfig"
+      @cancel="onCancelConfig"
+    />
+    <!-- E 创建配置 -->
+  </div>
+</template>
+
+<script>
+import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
+import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
+import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
+import configDrawer from './configDrawer.vue'
+const groupTransferStatusMap = new Map([
+  [0, {label: '禁用', cls: 'c-F03F5C'}],
+  [1, {label: '待分配', cls: 'c-FFB055'}],
+  [2, {label: '分配中', cls: 'c-448AFF'}],
+  [3, {label: '分配完成', cls: 'c-58BCA6'}],
+  [4, {label: '无目标客户群', cls: 'c-F03F5C'}],
+  [5, {label: '分配失败', cls: 'c-F03F5C'}],
+])
+
+export default {
+  name: 'groupTransfer',
+  components: {
+    selfInputV2,
+    selfChannelV2,
+    serviceSingle,
+    configDrawer,
+  },
+  data () {
+    return {
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        keyword: '',
+        new_owner: '',
+        status: '',
+      },
+      list: [],
+
+      configDrawerVisible: false,
+      currentConfigInfo: {},
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200
+    this.handleGetList()
+  },
+  methods: {
+    handleGetStatusDesc(status) {
+      return groupTransferStatusMap.get(Number(status)) || {}
+    },
+    // 获取列表数据
+    async handleGetList() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.groupTransfer_configList}`
+        const params = {
+          keyword: this.filter.keyword,
+          new_owner: this.filter.new_owner,
+          status: this.filter.status,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        }
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.list = res.rst.data;
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.list = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        console.log(error)
+        this.list = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false
+      }
+    },
+    onChangeKeyword(val) {
+      this.filter.keyword = val
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    onChangeNewOwner(val) {
+      console.log('val => ', val)
+      this.filter.new_owner = val ? val.user_id : ''
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    onChangeStatus(val) {
+      this.filter.status = val
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听当前页数变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.handleGetList()
+    },
+    // 监听点击切换"状态"
+    async onClickStatus({title, config_id}, actionCode) {
+      try {
+        await this.$confirm(`确定${actionCode == 1 ? '启用' : '禁用'}【${title}】?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.handleChangeStatus(config_id, actionCode)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 执行“切换状态”
+    async handleChangeStatus(config_id, actionCode) {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.groupTransfer_changeStatus}`
+        const params = {
+          config_id,
+          status: actionCode,
+        }
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleGetList()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 监听点击“新建配置”
+    onClickCreateBtn() {
+      this.currentConfigInfo = {}
+      this.configDrawerVisible = true
+    },
+    onClickEditBtn(row) {
+      if (row.status != 1) return this.$message.warning('当前状态不可编辑')
+      this.currentConfigInfo = {...row}
+      this.configDrawerVisible = true
+    },
+    onConfirmConfig({ isEdit }) {
+      this.configDrawerVisible = false
+      !isEdit && (this.pagination.page = 1)
+      this.handleGetList()
+    },
+    onCancelConfig() {
+      this.configDrawerVisible = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.customerShare-wrap {
+  /deep/ .el-switch.is-disabled .el-switch__core {
+    cursor: pointer;
+  }
+  /deep/ .el-switch.is-disabled {
+    opacity: 1;
+  }
+  .screenBox {
+    background: #fff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .filter-wrap {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .btn {
+    cursor: pointer;
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .lableBox_dad {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .lableBox {
+      font-size: 12px;
+      background-color: #f0f0f0;
+      padding: 4px 8px;
+      margin-top: 5px;
+      margin-right: 4px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -115,6 +115,7 @@ const license = () => import(/* webpackChunkName: 'license' */ '@/components/lic
 const customerWarn = () => import(/* webpackChunkName: 'customerWarn' */ '@/components/customerWarn/list.vue')
 
 const InviteIntoGroup = () => import(/* webpackChunkName: 'InviteIntoGroup' */ '@/components/manage/InviteIntoGroup/index.vue')
+const groupTransfer = () => import(/* webpackChunkName: 'groupTransfer' */ '@/components/groupTransfer/index.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -1025,6 +1026,16 @@ export var allRouter = [
           title: '安卓工具配置'
         }
       },
+      {
+        path: 'groupTransfer',
+        name: 'groupTransfer',
+        component: groupTransfer,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '客户群分配'
+        }
+      },
     ]
   }
 ]