feat: 智能推送 - 批量分组

project/src/assets/config/interface_api.js

@@ -384,6 +384,7 @@ var api = {
   smartPushV3_groupList: "/api/PeriodMassMsg/groupList", // 企微助手 - 智能推送V3 - 分组列表
   smartPushV3_changeGroupStatus: "/api/PeriodMassMsg/changeGroupStatus", // 企微助手 - 智能推送V3 - 分组状态
   smartPushV3_editGroup: "/api/PeriodMassMsg/editGroup", // 企微助手 - 智能推送V3 - 新建/编辑模板
+  smartPushV3_changeGroupBatch: "/api/PeriodMassMsg/changeGroupBatch", // 企微助手 - 智能推送V3 - 批量设置分组
 
   dataBoardHS_adqAccountList: "/api/provisionalStat/adqAccountList", // 花生平台 - adq账号授权列表
   dataBoardHS_wxAccountList: "/api/provisionalStat/wxAccountList", // 花生平台 - mp账号授权列表

project/src/components/smartPushV3/batchGroupDialog.vue

@@ -0,0 +1,219 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="bind-dialog"
+    :title="dialogTitle"
+    width="500px"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <div class="form-item">
+        <span class="lable required">分组</span>
+        <div>
+          <el-select v-model="form.group_id" class="select-cls" style="width:280px;" size="small" placeholder="请选择" filterable clearable @change="onChangeGroupId">
+            <el-option v-for="group in groupOptions" :key="group.group_id" :label="group.title" :value="group.group_id" />
+          </el-select>
+        </div>
+        <div class="newGroupCss" @click="onClickCreateGroup">新建分组</div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+
+    <!-- S 编辑分组弹框 -->
+    <pushGroupDialog
+      :dialogVisible="pushGroupVisible"
+      @confirm="onConfirmGroup"
+      @cancel="onCancelGroup"
+    />
+    <!-- E 编辑分组弹框 -->
+  </el-dialog>
+</template>
+
+<script>
+import pushGroupDialog from './pushGroupDialog.vue'
+
+export default {
+  name: "batchGroupDialog",
+  components: { pushGroupDialog },
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    rule_ids: {
+      type: String,
+      default: () => ''
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        group_id: '',
+      },
+      groupOptions: [],
+      pushGroupVisible: false,
+    }
+  },
+  computed: {
+    dialogTitle() {
+      return '批量设置分组'
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        this.handleGetGroupOptions()
+        // 获取表单数据
+        // this.handleGetFormData()
+      }
+    },
+  },
+  methods: {
+    async handleConfirm() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        const url = `${this.URL.BASEURL}${this.URL.smartPushV3_changeGroupBatch}`
+        const params = {
+          group_id: this.form.group_id,
+          rule_ids: this.rule_ids,
+        }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleClearFormData()
+          this.$emit('confirm')
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.handleClearFormData()
+      this.$emit('cancel')
+    },
+    // 执行表单校验
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        if (!this.form.group_id) {
+          this.$message.warning('请选择分组')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    // 获取表单数据
+    // handleGetFormData() {
+    //   this.form.title = title
+    // },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.form.group_id = ''
+    },
+
+    async handleGetGroupOptions() {
+      const params = { status: 1, page: 1, page_size: 1000 }
+      const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.smartPushV3_groupList, params)
+      if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+        this.groupOptions = res.rst.data;
+      } else if (res.errno != 4002) {
+        this.$message.warning(res.err)
+        this.groupOptions = [];
+      }
+    },
+    onChangeGroupId(groupId) {
+      this.group_id = groupId || ''
+    },
+    onClickCreateGroup() {
+      this.pushGroupVisible = true
+    },
+    onConfirmGroup() {
+      this.handleGetGroupOptions()
+      this.pushGroupVisible = false
+    },
+    onCancelGroup() {
+      this.pushGroupVisible = false
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bind-dialog {
+  .form-wrap {
+    padding: 0 10px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 60px;
+        font-weight: 500;
+        flex-shrink: 0;
+
+        &.required {
+          position: relative;
+          &::before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+    }
+    .form-tips {
+      margin: 5px 0 0 80px;
+      font-size: 13px;
+      color: #999;
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+
+.select-cls {
+  /deep/ &.el-select .el-input.is-focus .el-input__inner,
+  /deep/ &.el-select .el-input__inner:focus {
+    border-color: #DCDFE6;
+  }
+  /deep/ .el-input__suffix {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid #DCDFE6;
+    right: 0;
+    width: 30px;
+    background-color: #F1F1F1;
+    .el-input__icon {
+      color: #909399;
+    }
+  }
+}
+.newGroupCss{
+  color: #00b38a;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>

project/src/components/smartPushV3/detailList.vue

@@ -18,15 +18,18 @@
     <div class="tableInfo">
       <div>
         <div class="flex">
-          <div class="totalCustom">共有<span>{{total}}</span>条群发内容</div>
+          <div class="totalCustom">共有<span>{{total}}</span>条群发规则</div>
+          <div v-if="multipleSelection && multipleSelection.length" class="totalCustom" style="margin-left:20px;">已选择<span>{{ multipleSelection.length }}</span>条</div>
         </div>
       </div>
       <div class="flex">
+        <el-button type="primary" plain size="mini" @click="onClickBatchGroup">批量设置分组</el-button>
         <el-button type="primary" plain size="mini" @click="init(1,'export')">导出Excel</el-button>
       </div>
     </div>
     <!-- table -->
-    <el-table ref="multipleTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%">
+    <el-table ref="multipleTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="rule_id" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" reserve-selection width="55" />
       <el-table-column prop="name" label="标题" show-overflow-tooltip align="center" min-width="120" />
       <el-table-column label="创建人" align="center" min-width="120">
         <template slot-scope="scope">
@@ -77,6 +80,16 @@
         @close="detailClose"
       />
     </el-drawer>
+
+    <!-- S 批量分组 -->
+    <batchGroupDialog
+      :dialogVisible="batchGroupVisible"
+      :rule_ids="currentSelectedRules"
+      @confirm="onConfirmBatchGroup"
+      @cancel="onCancelBatchGroup"
+    />
+    <!-- E 批量分组 -->
+
   </div>
 </template>
 <script>
@@ -84,8 +97,9 @@ import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
 import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
 import createMassMsg from './createMassMsg.vue'
+import batchGroupDialog from './batchGroupDialog.vue'
 export default {
-  components: { datePicker, selfChannel, selfInputV2, createMassMsg, },
+  components: { datePicker, selfChannel, selfInputV2, createMassMsg, batchGroupDialog, },
   data () {
     return {
       massMsgFlag: false,
@@ -105,6 +119,10 @@ export default {
       keyword: '',
 
       groupName: '',
+
+      multipleSelection: [],
+      currentSelectedRules: '',
+      batchGroupVisible: false,
     }
   },
   created () {
@@ -115,17 +133,24 @@ export default {
   beforeRouteEnter(to, from, next) {
     if (from.path === '/pushRecordsV3') { // 当 from 的路由为详情页面时 => 保留筛选条件(keepAlive) => 获取列表数据
       next(vm => {
+        vm.tableData = []
         vm.init()
       });
     } else { // 初始化筛选条件 => 获取列表数据
       next((vm) => {
+        vm.tableData = []
         vm.keyword = ''
         vm.creator_id = ''
         vm.create_time_start = ''
         vm.create_time_end = ''
         vm.page = 1
         vm.resetFlag = !vm.resetFlag
-        vm.init(1)
+        vm.multipleSelection = []
+        vm.currentSelectedRules = ''
+        vm.$nextTick(() => {
+          vm.$refs.multipleTable && vm.$refs.multipleTable.clearSelection()
+          vm.init(1)
+        })
       })
     }
   },
@@ -296,7 +321,29 @@ export default {
         }
       ]
       this.$exportOrder({ excelDatas, name: `智能推送-规则列表（导出时间：${this.$getDay(0)}）` })
-    }
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    onClickBatchGroup() {
+      if (!this.multipleSelection || !this.multipleSelection.length) {
+        this.$message.warning('请选择推送规则')
+        return false
+      }
+      this.currentSelectedRules = this.multipleSelection.map(m => m.rule_id).join(',')
+      this.batchGroupVisible = true
+      console.log('this.currentSelectedRules => ', this.currentSelectedRules)
+    },
+    onConfirmBatchGroup() {
+      this.$refs.multipleTable.clearSelection();
+      this.currentSelectedRules = ''
+      this.init(1)
+      this.batchGroupVisible = false
+    },
+    onCancelBatchGroup() {
+      this.batchGroupVisible = false
+    },
   }
 }
 </script>