playlet/project/src/components/customOperate/employee_bul...

<template>
  <div v-loading="loading">
    <div class="screenBox" style="align-items: center;padding-right:16px">
      <div class="flex-align-center" style="flex:1">
        <!-- 所属客服 -->
        <!-- <self-customerservice title='选择员工' :reset='resetFlag' @customerDefine="(val)=>{user_id_list=val;init(1)}"></self-customerservice> -->
        <!-- 添加时间 -->
        <date-picker title='发送时间' :reset='resetFlag' @changeTime="changeTime"></date-picker>
        <!-- 创建人 -->
        <self-channel title="创建人" type='circleCreate' :labelWidth="true" @channelDefine="(val)=>{circleCreate_val = val;init(1)}"></self-channel>
      </div>
      <el-button type="primary" size="mini" @click="createdMassMsg">新建群发</el-button>
    </div>
    <div class="tableInfo">
      <div>
        <div class="flex">
          <div class="totalCustom">共有<span>{{total}}</span>条群发内容</div>
        </div>
      </div>
      <div class="flex">
        <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-column prop="name" label="群发标题" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="消息类型" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.send_type == 1 ? '立即发送':scope.row.send_type == 2?'定时发送':''}}</div>
        </template>
      </el-table-column>

      <el-table-column label="创建人" align="center">
        <template slot-scope="scope">
          <div class="customerServiceTagBox">
            <div class="customerServiceTag"><i class="el-icon-user-solid"></i> {{ scope.row.creator }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="send_time" min-width="120" label="发送时间" show-overflow-tooltip align="center">
        <template #header>
          <div :class="['flex-align-jus-center','pointer',sort_field=='send_time'?'sortFieldStyle':'']" @click="sortFieldEvent('send_time')">
            发送时间
            <i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <div :class="sort_field=='send_time'?'sortFieldStyle':''">{{scope.row.send_time}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="120" show-overflow-tooltip align="center">
        <template #header>
          <div :class="['flex-align-jus-center','pointer',sort_field=='created_at'?'sortFieldStyle':'']" @click="sortFieldEvent('created_at')">
            创建时间
            <i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <div :class="sort_field=='created_at'?'sortFieldStyle':''">
            {{scope.row.created_at}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="estimated_user" label="预计送达人数" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="send_success" label="送达客户数" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="send_fail" label="" show-overflow-tooltip align="center">
        <template slot="header">
          <div>失败客户数</div>
        </template>
      </el-table-column>
      <el-table-column label="发送状态" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.enable==-2" class="c-F03F5C">已删除</span>
          <span v-if="scope.row.enable==-1" class="c-666">发送失败</span>
          <span v-if="scope.row.enable==0" class="c-F03F5C">禁用</span>
          <span v-if="scope.row.enable==1" class="c-FFB055">待发送</span>
          <span v-if="scope.row.enable==2" class="c-448AFF">正在发送中</span>
          <span v-if="scope.row.enable==3" class="c-58BCA6">发送完成</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="操作" align="center">
        <template slot-scope="scope">
          <div class="flex" style="justify-content:center">
            <el-popconfirm :disabled="scope.row.enable==1||scope.row.enable==2?false:true" @confirm="remind_send(scope.row)" :title="'猎羽将提醒未发送的客户发送消息，是否确认提醒 ?'">
              <div slot="reference" class="table_button" v-if="scope.row.enable==1||scope.row.enable==2" :class="scope.row.enable==1||scope.row.enable==2?'c-00B38A pointer':'pointer-drop c-999'">提醒</div>
            </el-popconfirm>
            <div :class="['pointer','table_button',scope.row.enable == 1 ? 'c-FF604D' :'c-007AFF']" v-if="scope.row.enable == 1 || scope.row.enable == 0" @click="welcomeMsg_del(scope.row)">
              {{scope.row.enable == 1 ? '禁用' : scope.row.enable == 0 ? '启用':''}}
            </div>
            <div class="c-00B38A pointer table_button" @click="goDetail(scope.row)">详情</div>
            <el-popconfirm @confirm="copyDetail(scope.row)" :title="`确定复制【${scope.row.name}】群发消息？`">
              <div slot="reference" class="c-00B38A pointer table_button">复制</div>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
    <el-drawer size="1200px" :visible.sync="massMsgFlag" :with-header="false">
      <createMassMsg ref="createMassMsg" v-if="massMsgFlag" :is_copy='is_copy' :title="detail_rule_id?'群发详情':'新建群发'" :rule_id='detail_rule_id' @close="detailClose"></createMassMsg>
    </el-drawer>
    <el-drawer size="1200px" :visible.sync="detialFlag" :with-header="false">
      <massMsgDetail v-if="detialFlag" title="群发详情" :rule_id='detail_rule_id' @close="detailClose"></massMsgDetail>
    </el-drawer>
  </div>
</template>
<script>
// import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import datePicker from '@/components/assembly/screen/datePicker.vue'
import createMassMsg from './createMassMsg.vue'
import massMsgDetail from './massMsgDetail/index.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import { pageFromType } from '@/assets/js/staticTypes'
export default {
  components: { datePicker, createMassMsg, massMsgDetail, selfChannel },
  data () {
    return {
      detialFlag: false,
      massMsgFlag: false,
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      pageOptionValue: 2,
      tableData: [],
      user_id_list: [],//客服user_id列表
      add_date_start: '',//添加日期 起始
      add_date_end: '',//添加日期 截止
      resetFlag: false,//重置
      height: '',
      detail_rule_id: '',
      is_copy: false,
      sort_field: 'send_time',
      circleCreate_val: '',
    }
  },
  created () {
    this.height = document.documentElement.clientHeight - 260 > 400 ? document.documentElement.clientHeight - 260 : 400
    this.init(1)
  },
  mounted() {
    this.handleAutoCreateMsg() // 判断页面跳转来源 => 执行自动创建推广链接
  },
  methods: {
    // 执行自动创建推广链接
    async handleAutoCreateMsg() {
      const { from, miniProAppId, miniProPath, miniProDesc, miniProCover, h5Path, h5Desc, h5Cover } = this.$route.query
      if (from && from === pageFromType.PLAYLET_LINK_MINIAPP) { // 页面来自"企微助手 - 剧集管理 - 创建群发(创建小程序链接)"
        try {
          // 执行新建群发 && 把 miniProAppId、miniProPath 回显到"群发内容 => 附件 => 小程序"
          this.createdMassMsg()
          await this.$nextTick()
          // 获取 createMassMsg 组件
          const comp_createMassMsg = this.$refs.createMassMsg
          // 获取 editCon 组件
          const comp_editCon = comp_createMassMsg.$refs.editCon
          if (comp_editCon) {
            // 显示添加附件 => 小程序
            comp_editCon.fileEvent('miniprogram')
            // 回显 "appId"、"路径"、"标题"、"封面"
            comp_editCon.miniprogram.appid = decodeURIComponent(miniProAppId)
            comp_editCon.miniprogram.page = decodeURIComponent(miniProPath)
            comp_editCon.miniprogram.title = decodeURIComponent(miniProDesc)
            comp_editCon.miniprogram.pic_url = decodeURIComponent(miniProCover)
          }
        } catch (error) {
          console.log('error => ', error)
        }
      } else if (from && from === pageFromType.PLAYLET_LINK_H5) { // 页面来自"企微助手 - 剧集管理 - 创建群发(创建H5推广链接)"
        try {
          // 执行新建群发 && 把 h5Path 回显到"群发内容 => 附件 => H5推广"
          this.createdMassMsg()
          await this.$nextTick()
          // 获取 createMassMsg 组件
          const comp_createMassMsg = this.$refs.createMassMsg
          // 获取 editCon 组件
          const comp_editCon = comp_createMassMsg.$refs.editCon
          if (comp_editCon) {
            // 显示添加附件 => H5推广
            comp_editCon.fileEvent('linkExtend')
            // 回显 "链接地址"、"链接标题"、"图文封面"
            comp_editCon.linkExtend.jump_url = decodeURIComponent(h5Path)
            comp_editCon.linkExtend.title = decodeURIComponent(h5Desc)
            comp_editCon.linkExtend.picurl = decodeURIComponent(h5Cover)
          }
        } catch (error) {
          console.log('error => ', error)
        }
      }
    },
    sortFieldEvent (type) {
      if (type == this.sort_field) return;
      this.sort_field = type;
      this.init(1)
    },
    detailClose (val) {
      if (val == 'update') {//编辑
        this.init(this.page)
      } else if (val == 'update_new') {//复制或者新建
        this.sort_field = 'created_at'
        this.init(1)
        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
      }
      this.massMsgFlag = false
      this.detialFlag = false
    },
    createdMassMsg () {
      this.detail_rule_id = '';
      this.massMsgFlag = true
    },
    remind_send (data) {//提醒发送
      this.$loading(this.$loadingConfig);
      this.$axios.get(this.URL.BASEURL + this.URL.massMsg_noticeUser, {
        params: {
          rule_id: data.rule_id,
        }
      }).then((res) => {
        var res = res.data;
        this.$loading(this.$loadingConfig).close();
        if (res && res.errno == 0) {
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.err,
            type: 'warning'
          })
        }
      }).catch(() => {
        this.$loading(this.$loadingConfig).close();
      })
    },
    goDetail (data) {
      this.detail_rule_id = data.rule_id;
      this.is_copy = false;
      if (data.enable == 1) {//待发送
        this.massMsgFlag = true
      } else {
        this.detialFlag = true
      }
    },
    copyDetail (data) {//复制
      this.massMsgFlag = true;
      this.is_copy = true
      this.detail_rule_id = data.rule_id;
    },
    welcomeMsg_del (item) {
      if (item.enable != 1 && item.enable != 0) {
        return
      }
      this.$confirm(`确定${item.enable == 1 ? '禁用' : '启用'}【${item.name}】?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$loading(this.$loadingConfig);
        this.$axios.get(this.URL.BASEURL + this.URL.massMsg_updateStatus, {
          params: {
            rule_id: item.rule_id,
            status: item.enable == 1 ? 0 : 1
          }
        }).then((res) => {
          var res = res.data;
          this.$loading(this.$loadingConfig).close();
          if (res && res.errno == 0) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            })
            this.init(1)
          } else {
            this.$message({
              message: res.err,
              type: 'warning'
            })
          }
        }).catch(() => {
          this.$loading(this.$loadingConfig).close();
        })
      }).catch(() => {
      })
    },
    changeTime (time) {//筛选时间变化
      if (!time || time && time.length == 0) {
        this.add_date_start = '';
        this.add_date_end = '';
      } else {
        this.add_date_start = time[0]
        this.add_date_end = time[1]
      }
      this.init(1)
    },
    init (page, type) {
      if (type != 'export') {
        this.page = page ? page : this.page;
      } else {
        if (this.total == 0) {
          this.$message({
            message: '暂无数据可导出',
            type: "warning"
          })
          return
        }
      }
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.massMsg_lists, {
        params: {
          creator_id: this.user_id_list,
          send_time_start: this.add_date_start ? this.add_date_start + ' 00:00:00' : '',
          send_time_end: this.add_date_end ? this.$day_format(this.$date_compatible(this.add_date_end + ' 24:00:00')) : '',
          page: type == 'export' ? 1 : this.page,
          page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
          sort_column: this.sort_field,
          creator_id: this.circleCreate_val,
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          if (type == 'export') {
            this.exportEvent(res.rst.data)
          } else {
            this.tableData = res.rst.data;
            this.total = res.rst.pageInfo.total;
            this.pages = res.rst.pageInfo.pages;
          }
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    exportEvent (data) {
      let list = data;
      let tHeader = ['企业ID', '群发标题', '发送类型', '发送时间', '消息文本内容', '附件信息', '发送状态', '消息内容总数', '创建人', '消息送达数', '消息发送失败数', '总发送数']
      let filterVal = ['corpid', 'name', 'send_type_name', 'send_time', 'content', 'attachments', 'enable_name', 'msg_count', 'creator', 'send_success', 'send_fail', 'send_total']
      list.forEach((item) => {
        item.send_type_name = item.send_type == 1 ? '立即发送' : item.send_type == 2 ? '定时发送' : '';
        item.enable_name = item.enable == -2 ? '已删除' : item.enable == -1 ? '发送失败' : item.enable == 1 ? '待发送' : item.enable == 2 ? '正在发送中' : item.enable == 3 ? '发送完成' : ''
      })
      let excelDatas = [
        {
          tHeader: tHeader, // sheet表一头部
          filterVal: filterVal, // 表一的数据字段
          tableDatas: list, // 表一的整体json数据
          sheetName: ''// 表一的sheet名字
        }
      ]
      this.$exportOrder({ excelDatas, name: `员工群发消息（导出时间：${this.$getDay(0)}）` })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/style/list.scss";
.tableInfo {
  height: 50px;
}
.table_button {
  margin: 0 4px;
  min-width: 26px;
}
</style>