feat: 客户群群发 - 选择群聊

project/src/components/customOperate/chatGroup/components/chatGroupOptions.vue

         <div class="common-screen-self-icon"><i class="el-icon-arrow-down" /></div>
       </div>
 
+      <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:0 4px 0 0;" @inputChange="onChangeKeyword" />
+        <el-date-picker v-model="times" type="datetimerange" range-separator="至" start-placeholder="创建时间" end-placeholder="创建时间" :picker-options="pickerOptions" :defaultTime="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" size="small" class="time-wrap" @change="onChangeTimes" />
+      </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 class="all-wrap">
+            <div class="allMember">全部群聊({{ chatList && chatList.length }})</div>
+            <div :class="['checkbox', !chatList.length ? 'disabled' : '', isSelectedAll ? 'checkbox_active' : '']" @click="onClickSelectAll">
+              <i class="el-icon-check" />
+            </div>
           </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="memberInfo">
                       <div class="name">{{ item.name }}</div>
                       <div class="other">群主：{{ item.owner_name }}</div>
+                      <div class="other">创建时间：{{ item.create_time }}</div>
                     </div>
                   </div>
                   <div :class="['checkbox', item.isSelected ? 'checkbox_active' : '']">
                 <div class="memberInfo">
                   <div class="name">{{ item.name }}</div>
                   <div class="other">群主：{{ item.owner_name }}</div>
+                  <div class="other">创建时间：{{ item.create_time }}</div>
                 </div>
               </div>
               <i class="el-icon-close" style="margin-left:10px" @click="handleDelSelectedChat(idx)" />
   },
   data() {
     return {
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近7天',
+          onClick: (picker) => {
+            const start = `${this.$moment().subtract(6, 'days').format('YYYY-MM-DD')} 00:00:00`
+            const end = `${this.$moment().format('YYYY-MM-DD')} 23:59:59`
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近30天',
+          onClick: (picker) => {
+            const start = `${this.$moment().subtract(29, 'days').format('YYYY-MM-DD')} 00:00:00`
+            const end = `${this.$moment().format('YYYY-MM-DD')} 23:59:59`
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近90天',
+          onClick: (picker) => {
+            const start = `${this.$moment().subtract(89, 'days').format('YYYY-MM-DD')} 00:00:00`
+            const end = `${this.$moment().format('YYYY-MM-DD')} 23:59:59`
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
       reset: false,
       loading: false,
       dialogVisible: false, // 控制弹框显示
       ownerOptions: [], // 群主筛选
       owner: '', // 群主id
       keyword: '', // 关键字
+      times: [],
       chatList: [], // 可选择客户群列表
       chatListSelected: [], // 已选择的群列表
     }
       const arr = this.chatListResult.map(c => c.name)
       return arr.join(',')
     },
+    isSelectedAll() { // 是否选择全部群聊
+      // 左右长度相等
+      const isSameLength = this.chatListSelected.length && (this.chatListSelected.length === this.chatList.length)
+      // 左边全部已勾选
+      const isSameChat = this.chatList.every(c => c.isSelected)
+      return isSameLength && isSameChat
+    },
   },
   watch: {
     dialogVisible(isShow) {
       } else { // 清空搜索关键字
         this.owner = ''
         this.keyword = ''
+        this.times = []
         this.reset = !this.reset
       }
     },
       try {
         this.loading = true
         this.chatList = []
-        const params = { keyword: this.keyword, owner: this.owner }
+        const params = {
+          keyword: this.keyword,
+          owner: this.owner,
+          start_time: this.times && this.times.length ? this.times[0] : '',
+          end_time: this.times && this.times.length ? this.times[1] : '',
+        }
         if (this.isOnJobUser) {
           params.is_active = 1
         }
       this.owner = val
       this.handleGetChatList()
     },
+    onChangeTimes(val) {
+      this.times = val && val.length ? [...val] : []
+      this.handleGetChatList()
+    },
     onChangeKeyword(val) {
       this.keyword = val
       this.handleGetChatList()
       this.$emit('change', _lodash.cloneDeep(this.chatListSelected))
       this.dialogVisible = false
     },
+
+    onClickSelectAll() {
+      console.log('this.isSelectedAll => ', this.isSelectedAll)
+      if (!this.chatList || !this.chatList.length) return false
+      if (this.isSelectedAll) { // 当前是全选状态 => 执行清空逻辑
+        this.handleDelAllSelectedChat()
+      } else { // 当前是非全选状态 => 选择全部群聊
+        this.chatList.forEach(c => {
+          c.isSelected = true
+        })
+        this.chatListSelected = [...this.chatList]
+      }
+    },
   },
 };
 </script>
   padding-right: 4px;
   .select-wrap {
     margin-right: 4px;
-    flex: 1;
+    width: 180px;
+  }
+  /deep/ .time-wrap {
+    width: 350px;
+    &.el-date-editor .el-range-input {
+      width: 50%;
+    }
   }
 }
 
   flex: 1;
   height: 100%;
 
-  .allMember {
-    color: #666666;
-    font-size: 14px;
-    line-height: 20px;
-    margin-top: 17px;
+  .all-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 19px;
+    padding-bottom: 6px;
+    margin-top: 3px;
+    .allMember {
+      color: #666;
+      font-size: 14px;
+    }
   }
 
   .title {
 .memberBox {
   display: flex;
   margin-top: 10px;
+  &:first-child {
+    margin-top: 0;
+  }
 
   .el-icon-caret-bottom {
     color: #46a7ff;
         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;
-      }
-    }
   }
 }
 
   text-align: right;
   padding: 20px 0 10px;
 }
+
+.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;
+  cursor: pointer;
+
+  i {
+    color: transparent;
+  }
+
+  &.checkbox_active {
+    i {
+      color: #ffffff;
+    }
+
+    background: #00b38a;
+    border-color: #00b38a;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
 </style>