feat: 客户群详情 - 新增筛选

project/src/assets/js/staticTypes.js

@@ -237,3 +237,8 @@ export const msgType = [
   { key: 4, val: '客户朋友圈消息' },
 ]
 
+export const groupUserStatus = [
+  { key: 1, val: '正常' },
+  { key: 2, val: '退群' },
+]
+

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

@@ -59,6 +59,7 @@ import {
   groupTransfer,
   msgSendStatus,
   msgType,
+  groupUserStatus,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -226,6 +227,9 @@ export default {
     } else if (this.type == 'msgType') { // 消息提醒-消息类型
       this.options = [...msgType]
       this.placeholderVal = '消息类型'
+    } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
+      this.options = [...groupUserStatus]
+      this.placeholderVal = '客户状态'
     } else {
       this.init()
     }

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

@@ -44,6 +44,7 @@ import {
   groupTransfer,
   msgSendStatus,
   msgType,
+  groupUserStatus,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -206,6 +207,9 @@ export default {
     } else if (this.type == 'msgType') { // 消息提醒-消息类型
       this.options = [...msgType]
       this.placeholderVal = '消息类型'
+    } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
+      this.options = [...groupUserStatus]
+      this.placeholderVal = '客户状态'
     } else {
       this.init()
     }

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

@@ -45,6 +45,7 @@ import {
   groupTransfer,
   msgSendStatus,
   msgType,
+  groupUserStatus,
 } from '@/assets/js/staticTypes'
 export default {
   props: {
@@ -469,6 +470,9 @@ export default {
       } else if (this.type == 'msgType') { // 消息提醒-消息类型
         this.options = [...msgType]
         this.placeholderVal = '消息类型'
+      } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
+        this.options = [...groupUserStatus]
+        this.placeholderVal = '客户状态'
       } else {
         this.init()
       }

project/src/components/customManage/manage.vue

@@ -23,7 +23,7 @@
       <!-- 充值时间 -->
       <date-picker :reset='resetFlag' title="充值时间" @changeTime="onChangePayTime" />
       <!-- 流失时间 -->
-      <date-picker :reset='resetFlag' title="流失时间" timeFlag :defaultTime="['00:00:00', '23:59:59']" @changeTime="onChangeLossTime" />
+      <date-picker :reset='resetFlag' title="流失时间" timeFlag :pickerOptions="{}" :defaultTime="['00:00:00', '23:59:59']" @changeTime="onChangeLossTime" />
       <div class="reset" @click="resetEvent">重置</div>
     </div>
     <div class="tableInfo">

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

@@ -62,6 +62,16 @@
       <h3 class="bigTitle flex">群成员列表
         <el-button type="primary" plain size="mini" @click="init(1, 'export')">导出Excel</el-button>
       </h3>
+      <div class="screenBox">
+        <div class="flex-align-center" style="flex-wrap: wrap;">
+          <!-- 群成员 -->
+          <selfInputV2 v-model="keyword" label_name="群成员" placeholder="请输入" @change="onChangeKeyword" />
+          <!-- 成员状态 -->
+          <selfChannelV2 v-model="status" title="成员状态" type="groupUserStatus" @change="onChangeStatus" />
+          <!-- 入群时间 -->
+          <datePicker title="入群时间" timeFlag :pickerOptions="{}" :defaultTime="['00:00:00', '23:59:59']" @changeTime="onChangeJoinTime" />
+        </div>
+      </div>
       <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:15px;"
         :header-cell-style="() => { return { backgroundColor: '#f9f9f9 !important' } }">
         <el-table-column prop="name" label="群成员" show-overflow-tooltip align="center">
@@ -89,6 +99,13 @@
             <div v-if="scope.row.join_scene == 3">通过扫描群二维码入群</div>
           </template>
         </el-table-column>
+        <el-table-column prop="status" label="客户状态" width="110" align="center">
+          <template slot-scope="{ row }">
+            <span v-if="row.status == 1" class="c-00B38A">正常</span>
+            <span v-else-if="row.status == 2" class="c-F03F5C">退群</span>
+            <span v-else> - </span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
             <div class="c-00B38A pointer table_button" @click="detailEvent(scope.row)" v-if="scope.row.avatar">客户详情
@@ -120,22 +137,33 @@
 <script>
 import userDetail from '@/components/manage/userDetail/index.vue'
 import detial from '@/components/detials/index.vue'
+import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
+import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+
 export default {
   props: ['title', 'chat_id'],
-  components: { detial, userDetail },
+  components: {
+    detial,
+    userDetail,
+    selfInputV2,
+    selfChannelV2,
+    datePicker,
+  },
   data () {
     return {
       loading: false,
       dataInfo: {},
-      input_keyword: '',
       page: 1,
       pages: 0,
       total: 0,
       page_size: 20,
+      keyword: '',
+      status: '',
+      join_time_start: '',
+      join_time_end: '',
       listLoading: false,
       tableData: [],
-      user_id_list: [],
-      send_status: '',
       drawerSize: '60%',
       userDetailFlag: false,
       detialDrawer: false,
@@ -207,6 +235,10 @@ export default {
       this.$axios.get(this.URL.BASEURL + this.URL.chatGroup_memberList, {
         params: {
           chat_id: this.chat_id,
+          keyword: this.keyword,
+          status: this.status,
+          join_time_start: this.join_time_start,
+          join_time_end: this.join_time_end,
           page: type == 'export' ? 1 : this.page,
           page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
         }
@@ -236,11 +268,12 @@ export default {
     },
     exportEvent (data) {
       let list = data;
-      let tHeader = ['群成员', '成员类型', '在群里的昵称', '入群时间', '入群方式']
-      let filterVal = ['name', 'self_type', 'group_nickname', 'join_time', 'self_join_scene']
+      let tHeader = ['群成员', '成员类型', '在群里的昵称', '入群时间', '入群方式', '客户状态']
+      let filterVal = ['name', 'self_type', 'group_nickname', 'join_time', 'self_join_scene', 'status_desc']
       list.forEach((item) => {
         item.self_type = item.type == 1 ? '企业成员' : item.type == 2 ? '外部联系人' : '';
         item.self_join_scene = item.join_scene == 1 ? '由群成员邀请入群（直接邀请入群）' : item.join_scene == 2 ? '由群成员邀请入群（通过邀请链接入群）' : item.join_scene == 3 ? '通过扫描群二维码入群' : '';
+        item.status_desc = item.status == 1 ? '正常' : (item.status == 2 ? '退群' : '')
       })
       let excelDatas = [
         {
@@ -251,13 +284,37 @@ export default {
         }
       ]
       this.$exportOrder({ excelDatas, name: `客户群详情（导出时间：${this.$getDay(0)}）` })
-    }
+    },
+
+    onChangeKeyword(val) {
+      this.keyword = val
+      this.init(1)
+    },
+    onChangeStatus(val) {
+      this.status = val
+      this.init(1)
+    },
+    onChangeJoinTime(time) {
+      if (!time || time && time.length == 0) {
+        this.join_time_start = '';
+        this.join_time_end = '';
+      } else {
+        this.join_time_start = time[0]
+        this.join_time_end = time[1]
+      }
+      this.init(1)
+    },
   }
 }
 </script>
 <style lang="scss" scoped>
 @import "../create.scss";
 @import "@/style/list.scss";
+.screenBox {
+  .common-screen-item {
+    width: auto;
+  }
+}
 
 .modular {
   padding: 20px;