feat: 邀请入群配置 - 持续任务

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

@@ -8,13 +8,12 @@
         <i class="el-icon-close pointer" @click="$emit('close')" />
       </div>
     </div>
-    <div v-if="!loading" class="bg-ffffff" style="padding: 15px 30px;">
+
+    <div v-if="!loading" class="bg-ffffff content-wrap" style="padding: 15px 30px;">
       <div class="regulations">
         <label><em>*</em>标题</label>
         <el-input placeholder="配置标题" :disabled="!editFlag" style="width:300px" v-model.trim="name" clearable size="small" />
       </div>
-
-
       <!-- S 使用员工 - 单个企微主体 模式 -->
       <div class="regulations">
         <label><em>*</em>客服:</label>
@@ -27,8 +26,6 @@
         </div>
       </div>
       <!-- S 使用员工 - -->
-
-
       <!-- S 选择客户 -->
       <div class="regulations">
         <label><em>*</em>选择客户</label>
@@ -64,11 +61,47 @@
                 <datePicker title="" width="355px" :disabled="!editFlag" :timeFlag="true" :afferent_time="add_times" :pickerOptions="{}" @changeTime="changeTime" :defaultTime="['00:00:00', '23:59:59']" />
               </div>
             </div>
+            <div class="screeningItem">
+              <label>性别：</label>
+              <el-checkbox-group class="checkboxGroup" v-model="gender" :disabled="!editFlag">
+                <el-checkbox label="1">男性</el-checkbox>
+                <el-checkbox label="2">女性</el-checkbox>
+                <el-checkbox label="0">未知性别</el-checkbox>
+              </el-checkbox-group>
+            </div>
+            <div class="screeningItem">
+              <label>付费情况：</label>
+              <screenPay title="" width="355px" :disabled="!editFlag" @payChange="payChange" :afferent_obj='payInfo' style="margin:0" />
+            </div>
+            <div class="screeningItem">
+              <label>标签：</label>
+              <enterpriseTag title="" width="355px" :disabled="!editFlag" :afferent_obj='afferent_tag_obj' @tagDefine="tagDefine" style="margin:0" />
+            </div>
           </div>
         </div>
       </div>
       <!-- E 选择客户 -->
 
+      <!-- S 持续邀请入群 -->
+      <div class="regulations" style="align-items: center">
+        <label>持续邀请入群:</label>
+        <div class="limitBox">
+          <el-switch
+            v-model="continuously_attract_groups"
+            active-color="#00B38A"
+            inactive-color="#ddd"
+            :active-value="1"
+            :inactive-value="0"
+            :disabled="!editFlag"
+          />
+        </div>
+        <p style="font-size:13px;line-height:30px;color:#f9a527;margin-left:10px">*持续邀请入群任务仅可新增不可编辑</p>
+      </div>
+      <div v-show="continuously_attract_groups == 1" class="regulations">
+        <label><em>*</em>单次创建群聊上限</label>
+        <el-input placeholder="请输入创建群聊数量上限" :disabled="!editFlag" style="width:300px" v-model.trim="upper_limit" clearable size="small" @input="onInputUpperLimit" />
+      </div>
+      <!-- E 持续邀请入群 -->
 
       <!-- 群聊类型 -->
       <div class="regulations" style="margin-top: 20px;">
@@ -145,7 +178,7 @@
       </div>
       <!-- E 群管理表格 -->
 
-      <!-- 群公告 announcement -->
+      <!-- S 群公告 -->
       <div class="regulations">
         <label>群公告</label>
         <div class="flex">
@@ -161,6 +194,7 @@
           />
         </div>
       </div>
+      <!-- E 群公告 -->
 
       <div class="regulations">
         <label><em>*</em>邀请类型</label>
@@ -187,24 +221,39 @@
       <div class="button_box">
         <button class="button" v-if="editFlag" @click="massMsg_set">确定</button>
       </div>
+
+      <div v-if="false" class="disabled-wrap" @click.stop="onClickDisabled" />
     </div>
   </div>
 </template>
 <script>
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import chatGroupOptions from './chatGroupOptions.vue'
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import screenPay from '@/components/assembly/screen/pay.vue'
+import enterpriseTag from '@/components/assembly/screen/enterpriseTag.vue'
 import _lodash from 'lodash'
 import Sortable from 'sortablejs'
 import { getIntegerNumber, getNot0IntegerNumber, isJSON } from '@/assets/js/common'
-import chatGroupOptions from './chatGroupOptions.vue'
-import datePicker from '@/components/assembly/screen/datePicker.vue'
 
 export default {
   components: {
     selfCustomerservice,
     chatGroupOptions,
     datePicker,
+    screenPay,
+    enterpriseTag,
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => '详情'
+    },
+    rule_id: {
+      type: String | Number,
+      default: () => ''
+    },
   },
-  props: ['title', 'rule_id'],
   data () {
     return {
       loading: true,
@@ -222,17 +271,34 @@ export default {
       deleteChart: {},
 
       customer_filter: 0, // 筛选
+      gender: [],
+      payInfo: {},
+      afferent_tag_obj: {
+        tag_id_list: [],
+        tag: 1
+      },
+      tag_info: {},//标签
+
+      continuously_attract_groups: 0, // 持续邀请客户入群
+      upper_limit: '', // 单次创建群聊数量上限
+
       add_time_later: '', // 快捷筛选
       invite_type: 1, // 邀请类型
       invite_time_list: [''], // 邀请时间点
 
       filter_type: 1, // 筛选用户方式 1客户添加N小时后拉群 2按指定添加起止时间筛选
       add_times: [],
+
     }
   },
+  computed: {
+    isEdit() {
+      return !!this.rule_id
+    },
+  },
   created () {
     this.$nextTick(()=>{
-      if (this.rule_id) {//详情
+      if (this.isEdit) {//详情
         this.detail()
       } else {
         this.loading = false;
@@ -345,6 +411,7 @@ export default {
 
           //标题
           this.name = res.rst.title;
+
           //群公告
           this.announcement = res.rst.announcement;
           //客服
@@ -355,6 +422,22 @@ export default {
 
           // 筛选客户
           this.customer_filter = res.rst.customer_filter || 0
+          this.gender = res.rst.gender ? res.rst.gender.split(',') : [];
+          this.payInfo = {
+            pay_status: res.rst.pay_status,
+            pay_num_min: res.rst.pay_num_min,
+            pay_num_max: res.rst.pay_num_max,
+          }
+          this.afferent_tag_obj = {
+            tag_id_list: res.rst.tag_list ? res.rst.tag_list.split(',') : [],
+            tag: res.rst.tag_screen_type
+          }
+          this.tag_info = {
+            ..._lodash.cloneDeep(this.afferent_tag_obj),
+            tag_type: this.afferent_tag_obj.tag
+          }
+
+
           this.filter_type = res.rst.filter_type || 1
           this.add_time_later = (res.rst.customer_filter && res.rst.filter_type == 1) ? res.rst.add_time_later : ''
           this.add_times = (res.rst.customer_filter && res.rst.filter_type == 2) ? [res.rst.add_time_st || '', res.rst.add_time_et || ''] : []
@@ -367,6 +450,9 @@ export default {
             this.invite_time_list = ['']
           }
 
+          this.continuously_attract_groups = res.rst.continuously_attract_groups;
+          this.upper_limit = res.rst.continuously_attract_groups == 1 ? res.rst.upper_limit : ''
+
           //群聊
           this.main_msg_data.chat_group_config = res.rst.invite_config
           this.main_msg_data.chat_group_config.forEach(item=>{
@@ -416,6 +502,12 @@ export default {
         return
       }
 
+      if (this.continuously_attract_groups == 1 && !this.upper_limit) {
+        this.$message.warning('请输入单次创建群聊上限(不能为0)')
+        return
+      }
+
+
       if (!this.main_msg_data.owner_type) {
         this.$message.warning('请选择群聊类型')
         return
@@ -448,8 +540,9 @@ export default {
 
       this.$loading(this.$loadingConfig)
       let params = {
-        rule_id: this.rule_id ? this.rule_id : '',
         title: this.name,
+        continuously_attract_groups: this.continuously_attract_groups,
+        upper_limit: this.continuously_attract_groups == 1 ? this.upper_limit : 0,
         announcement: this.announcement,
         is_for_all:this.is_for_all,
         users:this.user_id_list&&this.user_id_list.length>0 ? this.user_id_list.join(',') : '',
@@ -458,6 +551,12 @@ export default {
         join_type:this.main_msg_data.join_type,
         customer_filter: this.customer_filter,
         // S 自定义筛选参数
+        gender: this.gender && this.gender.length ? this.gender.join(',') : '',
+        pay_status: this.payInfo.pay_status || this.payInfo.pay_status == 0 ? this.payInfo.pay_status : '',
+        pay_num_min: this.payInfo.pay_num_min || this.payInfo.pay_num_min == 0 ? this.payInfo.pay_num_min : '',
+        pay_num_max: this.payInfo.pay_num_max || this.payInfo.pay_num_max == 0 ? this.payInfo.pay_num_max : '',
+        tag_screen_type: this.tag_info && this.tag_info.tag_type ? this.tag_info.tag_type : 0,
+        tag_list: this.tag_info && this.tag_info.tag_id_list ? this.tag_info.tag_id_list.join(',') : '',
         filter_type: this.customer_filter == 1 ? this.filter_type : '',
         add_time_later: (this.customer_filter == 1 && this.filter_type == 1) ? this.add_time_later : '',
         add_time_st: (this.customer_filter == 1 && this.filter_type == 2) ? this.add_times[0] : '',
@@ -466,11 +565,16 @@ export default {
         invite_type: this.invite_type,
         invite_time: this.invite_type == 2 ? JSON.stringify(this.invite_time_list) : '',
       }
+
+      if (this.isEdit) {
+        params.rule_id = this.rule_id
+      }
+
       this.$axios.post(this.URL.BASEURL + this.URL.inviteRule_add, params).then((res) => {
         var res = res.data
         this.$loading(this.$loadingConfig).close()
         if (res && res.errno == 0) {
-          if (!this.rule_id) {//复制或者新建
+          if (!this.isEdit) {//复制或者新建
             this.$emit('close', 'update_new')
           } else {//编辑
             this.$emit('close', 'update')
@@ -506,6 +610,43 @@ export default {
         this.add_times = time;
       }
     },
+
+    payChange (data) {//付费情况变化
+      this.payInfo = {
+        pay_status: data.radio,
+        pay_num_min: data.minValue,
+        pay_num_max: data.maxValue,
+      }
+    },
+    tagDefine (data) {//标签选择回调
+      if (data.tag == 1 || data.tag == 2) {
+        if (data.tag_id_list && data.tag_id_list.length != 0) {
+          this.tag_info = {
+            tag_id_list: data.tag_id_list,
+            tag_type: data.tag
+          }
+        } else {
+          this.tag_info = {
+            tag_id_list: [],
+            tag_type: 0
+          }
+        }
+      } else {
+        this.tag_info = {
+          tag_id_list: [],
+          tag_type: data.tag
+        }
+      }
+    },
+
+    onInputUpperLimit(inputVal) {
+      // this.upper_limit = getIntegerNumber(inputVal)
+      this.upper_limit = getNot0IntegerNumber(inputVal)
+    },
+
+    onClickDisabled() {
+      return false
+    },
   }
 }
 </script>
@@ -737,4 +878,21 @@ export default {
 .ml-80 {
   margin-left: 80px;
 }
+.createMassMsg .regulations label {
+  width: 125px;
+}
+
+.content-wrap {
+  position: relative;
+  .disabled-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    cursor: not-allowed;
+    z-index: 999;
+  }
+}
 </style>