feat: 邀请入群配置迭代

project/src/components/manage/InviteIntoGroup/createData.vue

@@ -29,6 +29,35 @@
       <!-- S 使用员工 - -->
 
 
+      <!-- S 选择客户 -->
+      <div class="regulations">
+        <label><em>*</em>选择客户</label>
+        <div>
+          <div>
+            <el-radio v-model="customer_filter" :disabled="!editFlag" :label="0">全部客户</el-radio>
+            <el-radio v-model="customer_filter" :disabled="!editFlag" :label="1">筛选客户</el-radio>
+          </div>
+          <div class="screeningCustomers" v-show="customer_filter == 1">
+            <div class="screeningItem">
+              <label>快捷筛选：</label>
+              <div class="add-days-wrap">
+                <span>添加客服</span>
+                <el-input
+                  v-model.trim="add_time_later"
+                  size="mini" placeholder="请输入"
+                  maxlength="5" clearable
+                  :disabled="!editFlag"
+                  @input="onInputAddDaysLater"
+                />
+                <span>小时后</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- E 选择客户 -->
+
+
 
       <!-- 选择群聊 -->
       <div class="regulations">
@@ -98,6 +127,27 @@
       <!-- E 群管理表格 -->
 
 
+      <div class="regulations">
+        <label><em>*</em>邀请类型</label>
+        <div>
+          <el-radio v-model="invite_type" :disabled="!editFlag" :label="1">立即邀请</el-radio>
+          <el-radio v-model="invite_type" :disabled="!editFlag" :label="2">定时邀请</el-radio>
+        </div>
+      </div>
+      <div class="regulations" v-show="invite_type == 2">
+        <label><em>*</em>邀请时间点</label>
+        <div class="send-time-item">
+          <div class="timeNums-wrap">
+            <div class="timeNums" v-for="(item, idx) in invite_time_list" :key="idx">
+              <el-time-picker v-model="invite_time_list[idx]" size="mini" placeholder="请选择" value-format="HH:mm" format="HH:mm" :clearable="false" />
+              <i v-if="idx !== 0" class="el-icon-error" @click="onClickDelInviteTime(idx)" />
+            </div>
+          </div>
+          <span class="add-btn" @click="onClickAddInviteTime"><i class="el-icon-circle-plus-outline" />新增时间点</span>
+        </div>
+      </div>
+
+
       <div class="button_box">
         <button class="button" v-if="editFlag" @click="massMsg_set">确定</button>
       </div>
@@ -108,7 +158,7 @@
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
 import _lodash from 'lodash'
 import Sortable from 'sortablejs'
-import { getIntegerNumber } from '@/assets/js/common'
+import { getIntegerNumber, isJSON } from '@/assets/js/common'
 import chatGroupOptions from './chatGroupOptions.vue'
 
 export default {
@@ -127,6 +177,11 @@ export default {
         is_limit:0
       },
       deleteChart: {},
+
+      customer_filter: 0, // 筛选
+      add_time_later: '', // 快捷筛选
+      invite_type: 1, // 邀请类型
+      invite_time_list: [''], // 邀请时间点
     }
   },
   created () {
@@ -248,6 +303,19 @@ export default {
           if (res.rst.users && res.rst.users.length > 0) {
             this.is_for_all = 0
           }
+
+          // 筛选客户
+          this.customer_filter = res.rst.customer_filter || 0
+          this.add_time_later = res.rst.customer_filter ? res.rst.add_time_later : ''
+          // 邀请类型
+          this.invite_type = res.rst.invite_type || 1
+          // 邀请时间点
+          if (res.rst.invite_type == 2 && res.rst.invite_time && isJSON(res.rst.invite_time)) {
+            this.invite_time_list =  JSON.parse(res.rst.invite_time)
+          } else {
+            this.invite_time_list = ['']
+          }
+
           //群聊
           this.main_msg_data.chat_group_config = res.rst.invite_config
           this.main_msg_data.chat_group_config.forEach(item=>{
@@ -283,6 +351,11 @@ export default {
         return
       }
 
+      if (this.customer_filter == 1 && !this.add_time_later) {
+        this.$message.warning('请输入快捷筛选-添加客服时间')
+        return
+      }
+
       if (this.name == '') {
         this.$message({
           message: '请输入标题！',
@@ -298,6 +371,15 @@ export default {
         })
         return
       }
+
+      if (this.invite_type == 2) {
+        const isEmpty = this.invite_time_list.some(i => !i)
+        if (isEmpty) {
+          this.$message.warning('请完善邀请时间点')
+          return
+        }
+      }
+
       this.$loading(this.$loadingConfig)
       let params = {
         rule_id: this.rule_id ? this.rule_id : '',
@@ -305,7 +387,12 @@ export default {
         is_for_all:this.is_for_all,
         users:this.user_id_list&&this.user_id_list.length>0 ? this.user_id_list.join(',') : '',
         invite_config:JSON.stringify(this.main_msg_data.chat_group_config),
-        join_type:this.main_msg_data.join_type
+        join_type:this.main_msg_data.join_type,
+
+        customer_filter: this.customer_filter,
+        add_time_later: this.customer_filter == 1 ? this.add_time_later : '',
+        invite_type: this.invite_type,
+        invite_time: this.invite_type == 2 ? JSON.stringify(this.invite_time_list) : '',
       }
       this.$axios.post(this.URL.BASEURL + this.URL.inviteRule_add, params).then((res) => {
         var res = res.data
@@ -326,6 +413,19 @@ export default {
         this.$loading(this.$loadingConfig).close()
       });
     },
+
+    // 监听输入"快捷筛选 小时数"
+    onInputAddDaysLater(inputVal) {
+      this.add_time_later = getIntegerNumber(inputVal)
+    },
+    // 监听点击新增时间点
+    onClickAddInviteTime() {
+      this.invite_time_list.push('')
+    },
+    // 监听点击删除时间点
+    onClickDelInviteTime(idx) {
+      this.invite_time_list.splice(idx, 1)
+    },
   }
 }
 </script>
@@ -499,4 +599,59 @@ export default {
     margin-left:10px;
   }
 }
+
+.send-time-item {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .el-radio {
+    width: auto;
+    margin-right: 0;
+  }
+  .text {
+    flex-shrink: 0;
+  }
+  .el-input {
+    margin: 0 6px;
+    width: 80px;
+    font-size: 13px;
+  }
+  .timeNums-wrap {
+    .timeNums {
+      margin-top: 6px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .el-date-editor {
+        width: 120px;
+      }
+      position: relative;
+      .el-icon-error {
+        position: absolute;
+        right: 0px;
+        top: -4px;
+        color: #F56C6C;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+  .add-btn {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: #555;
+    cursor: pointer;
+    .el-icon-circle-plus-outline {
+      margin-left: 10px;
+      margin-right: 6px;
+      font-size: 16px;
+    }
+  }
+}
 </style>