playlet/project/src/components/customOperate/chatGroup/createMsgDet...

<template>
  <div>
    <div class="self_drawer_title">
      <div class="flex">
        {{ title }}
      </div>
      <div class="flex-align-center">
        <i class="el-icon-close pointer" @click="$emit('close')"></i>
      </div>
    </div>
    <!-- 基础信息 -->
    <div class="modular" v-loading='loading'>
      <h3 class="bigTitle">基础信息
        <template v-if="rule_id">
          <span class="detail_status status_del" v-if="dataInfo.enable == -2">已删除</span>
          <span class="detail_status status_fail" v-if="dataInfo.enable == -1">发送失败</span>
          <span class="detail_status status_del" v-if="dataInfo.enable == 0">禁用</span>
          <span class="detail_status status_wait" v-if="dataInfo.enable == 1">待发送</span>
          <span class="detail_status status_ing" v-if="dataInfo.enable == 2">正在发送中</span>
          <span class="detail_status status_success" v-if="dataInfo.enable == 3">待客服确认</span>
          <span class="detail_status status_success" v-if="dataInfo.enable == 4">发送完成</span>
        </template>
      </h3>
      <div class="flex-start">
        <div class="dataInfoBox">
          <div class="tMar20 flex-align-center">
            <span class="lable">群发标题：</span>
            <span class="txt">{{ dataInfo.name }}</span>
          </div>
          <div class="tMar20 flex-align-center">
            <span class="lable">模式：</span>
            <span class="txt">{{ dataInfo.operate_type == 1 ? '单个企微主体' : '多个企微主体' }}</span>
          </div>
          <div class="tMar20 flex-align-center">
            <span class="lable">群发方式：</span>
            <span class="txt">{{ dataInfo.send_mode == 1 ? '按群主发送' : '按群聊发送' }}</span>
          </div>
          <div v-if="dataInfo.send_mode == 1" class="tMar20 flex-align-center">
            <span class="lable">使用群主：</span>
            <div v-if="dataInfo.sender_data && dataInfo.sender_data.length" class="btn-text" @click="onClickShowGroupOwn(dataInfo.sender_data)">查看</div>
            <div v-else class="txt">-</div>
          </div>
          <div class="tMar20 flex-start">
            <span class="lable">群发内容：</span>
            <div>
              <span class="txt">{{ dataInfo.content }}</span>
              <div class="syllable_ul" v-if="attachments && attachments.length > 0">
                <div class="fujianItem" v-for="(item, index) in attachments" :key="index">
                  <div class="left">
                    <span v-if="item.msgtype == 'image'" class="flex-align-center">【图片】：<img
                        style="width:16px;height:16px" :src="item.image.pic_url" alt=""></span>
                    <span v-if="item.msgtype == 'link'">【链接】：{{ item.link.title }}</span>
                    <span v-if="item.msgtype == 'miniprogram'">【小程序】：{{ item.miniprogram.title }}</span>
                    <span v-if="item.msgtype == 'radar'">【智能雷达】：{{ item.radar.title }}</span>
                    <span v-if="item.msgtype == 'promote'">【H5推广】：{{ item.promote.title }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="tMar20 flex-align-center">
            <span class="lable">发送对象：</span>
            <div v-if="dataInfo.chat_name && dataInfo.chat_name.length > 0" class="flexWrap">
              <div class="customerServiceTagBox" v-for="(item, index) in dataInfo.chat_name" :key="index">
                <div class="customerServiceTag"
                  :style="`background: transparent;color:${item ? '#00b38a;' : '#777'}`">
                  {{
                      item ? item : '未设置群名'
                  }}
                </div>
              </div>
            </div>
            <div v-else class="txt">-</div>
          </div> -->
          <div class="tMar20 flex-align-center">
            <span class="lable">发送类型：</span>
            <span class="txt">{{ dataInfo.send_type == 1 ? '立即发送' : dataInfo.send_type == 2 ? '定时发送' : '-' }}</span>
          </div>
          <div class="tMar20 flex-align-center">
            <span class="lable">发送时间：</span>
            <span class="txt">{{ dataInfo.send_time }}</span>
          </div>
        </div>
        <!-- 手机模拟 -->
        <phonePreview phone_width="260px" position_top="0px" style="margin-top:-30px" :content='dataInfo.content' :attachments='attachments' />
      </div>
    </div>
    <div class="splitLine" />
    <div class="modular" v-loading='loading'>
      <h3 class="bigTitle">数据详情</h3>
      <div class="flex" style="margin-top: 30px;">
        <div class="member_total">
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.send_user_success || dataInfo.send_user_success == 0 ?
                  $formatNum(dataInfo.send_user_success) : '-'
              }}
            </div>
            <div class="txt">已发送群主</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.wait_send_user || dataInfo.wait_send_user == 0 ? $formatNum(dataInfo.wait_send_user) : '-'
              }}</div>
            <div class="txt">未发送群主</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.send_user_fail || dataInfo.send_user_fail == 0 ?
                  $formatNum(dataInfo.send_user_fail) : '-'
              }}
            </div>
            <div class="txt">发送失败群主</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.send_chat_success || dataInfo.send_chat_success == 0 ?
                  $formatNum(dataInfo.send_chat_success) : '-'
              }}
            </div>
            <div class="txt">已发送群聊</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.send_chat_fail || dataInfo.send_chat_fail == 0 ? $formatNum(dataInfo.send_chat_fail) : '-'
              }}
            </div>
            <div class="txt">未发送群聊</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.success_member_count || dataInfo.success_member_count == 0 ? $formatNum(dataInfo.success_member_count) : '-'
              }}
            </div>
            <div class="txt">已触达群成员数</div>
          </div>
          <div class="splitLine_small"></div>
          <div class="member_total_item">
            <div class="num">
              {{ dataInfo.fail_member_count || dataInfo.fail_member_count == 0 ? $formatNum(dataInfo.fail_member_count) : '-'
              }}
            </div>
            <div class="txt">未触达群成员数</div>
          </div>
        </div>
      </div>
    </div>
    <div class="splitLine" />
    <div class="modular" v-loading="listLoading">
      <h3 class="bigTitle flex">客户群接收详情
        <el-button type="primary" plain size="mini" @click="init(1, 'export')">导出Excel</el-button>
      </h3>
      <div class="screenBox" style="margin-top:15px">
        <div class="flex-align-center" style="flex-wrap: wrap;">
          <!-- 搜索群聊 -->
          <self-input :labelWidth="true" label_name="群聊名称" @inputChange='(val) => { input_keyword = val; init(1) }'>
          </self-input>
          <self-customerservice source="chatGroup" title='群主'
            @customerDefine="(val) => { user_id_list = val; init(1) }">
          </self-customerservice>
          <self-channel title="送达状态" type='chat_group_status' :labelWidth="true"
            @channelDefine="(val) => { send_status = val; init(1) }"></self-channel>
        </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">
          <template slot-scope="scope">
            <div :style="`${scope.row.name ? '' : 'color:#bbb'}`">{{ scope.row.name ? scope.row.name : '未设置群名' }}</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.owner_name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="department_name" label="企微主体" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="status" min-width="80" label="消息送达状态" show-overflow-tooltip align="center">
          <template slot-scope="{ row }">
            <div>{{ handleGetStatusDesc(row.status) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="send_time" label="群聊发送时间" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column min-width="120" label="操作" align="center">
          <template slot-scope="scope">
            <div class="c-00B38A pointer table_button" @click="goDetail(scope.row)">群详情</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>
    </div>
    <el-drawer size="1200px" :visible.sync="detialFlag" :with-header="false" append-to-body>
      <qunDetail v-if="detialFlag" title="客户群详情" :chat_id='detail_chat_id' @close="detialFlag = false"></qunDetail>
    </el-drawer>

    <!-- S 查看群主 -->
    <groupOwnDialog
      :dialogVisible="groupOwnDialogVisible"
      :groupOwnList="currentGroupOwnList"
      @close="onCloseGroupOwn"
    />
    <!-- E 查看群主 -->
  </div>
</template>
<script>
import selfInput from '@/components/assembly/screen/input.vue'
import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import qunDetail from './chatGroupDetail.vue'
import phonePreview from '@/components/assembly/phonePreview.vue'
import groupOwnDialog from './components/groupOwnDialog.vue'
const statusMap = new Map([
  [1, '群主已发送'],
  [0, '群主未发送'],
  [3, '发送失败'],
])

export default {
  components: {
    selfInput,
    selfCustomerservice,
    selfChannel,
    qunDetail,
    phonePreview,
    groupOwnDialog,
  },
  props: ['title', 'rule_id', 'sysMsgCorpid'],
  data () {
    return {
      detialFlag: false,
      loading: false,
      dataInfo: {},
      attachments: [],
      input_keyword: '',
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      listLoading: false,
      tableData: [],
      user_id_list: [],
      send_status: '',
      detail_chat_id: '',

      groupOwnDialogVisible: false,
      currentGroupOwnList: [],
    }
  },
  created () {
    this.detail()
    this.init(1)
  },
  methods: {
    goDetail (data) {
      this.detail_chat_id = data.chat_id;
      this.detialFlag = true
    },
    detail () {//详情
      this.loading = true
      const params = {
        rule_id: this.rule_id
      }
      if (this.sysMsgCorpid) { params.corpid = this.sysMsgCorpid }
      this.$axios.get(this.URL.BASEURL + this.URL.chatGroupMassMsg_ruleDetail, { params }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.dataInfo = res.rst
          this.attachments = res.rst.attachments && res.rst.attachments != '' ? JSON.parse(res.rst.attachments) : [];
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    init (page, type) {
      if (type != 'export') {
        this.page = page ? page : this.page;
      } else {
        if (this.total == 0) {
          this.$message({
            message: '暂无数据可导出',
            type: "warning"
          })
          return
        }
      }
      this.listLoading = true
      const params = {
        rule_id: this.rule_id,
        page: type == 'export' ? 1 : this.page,
        page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
        chat_group_name: this.input_keyword,
        sender_list: this.user_id_list,
        status: this.send_status
      }
      if (this.sysMsgCorpid) { params.corpid = this.sysMsgCorpid }
      this.$axios.get(this.URL.BASEURL + this.URL.chatGroupMassMsg_chatGroupReceiveDetail, { params }).then((res) => {
        var res = res.data
        this.listLoading = 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.listLoading = false
      });
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    exportEvent (data) {
      let list = data;
      let tHeader = ['群名称', '群主', '群主所属部门', '客户群成员数', '消息送达状态', '群聊发送时间']
      let filterVal = ['name', 'owner_name', 'department_name', 'chat_member_count', 'self_send_status', 'send_time']
      list.forEach((item) => {
        item.self_send_status = item.send_status == 1 ? '群主已发送' : item.send_status == 2 ? '群主未发送' : item.send_status == 3 ? '发送失败' : '';
      })
      let excelDatas = [
        {
          tHeader: tHeader, // sheet表一头部
          filterVal: filterVal, // 表一的数据字段
          tableDatas: list, // 表一的整体json数据
          sheetName: ''// 表一的sheet名字
        }
      ]
      this.$exportOrder({ excelDatas, name: `（${this.dataInfo.name}）群发详情（导出时间：${this.$getDay(0)}）` })
    },

    onClickShowGroupOwn(groupOwnList) {
      if (!groupOwnList) return false
      this.currentGroupOwnList = [...groupOwnList]
      this.groupOwnDialogVisible = true
    },
    onCloseGroupOwn() {
      this.groupOwnDialogVisible = false
    },

    handleGetStatusDesc(status) {
      return statusMap.get(Number(status)) || '-'
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../create.scss";


.dataInfoBox {
  width: calc(100% - 400px);
  margin-right: 20px;

  .lable {
    display: inline-block;
    width: 70px;
    font-size: 13px;
    color: #898d92;
    text-align: right;
    margin-right: 6px;
    flex-shrink: 0;
  }

  .txt {
    font-size: 14px;
    color: #333;
    white-space: pre-wrap;
  }
}

.fujianItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  color: #757171;
  font-size: 13px;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  margin-top: 8px;

  i {
    font-size: 16px;
    cursor: pointer;
  }

  .left {
    display: flex;
    align-items: center;
  }

  .right {
    i {
      margin-left: 10px;
    }
  }
}

.modular {
  padding: 20px;

  .member_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5fffd;
    border: 1px solid rgba(0, 179, 138, 0.19);
    // width: 32%;
    flex: 1;

    .splitLine_small {
      width: 1px;
      height: 34px;
      background: #d8d8d8;
    }

    .member_total_item {
      text-align: center;
      width: 49%;
      margin: 20px 0;

      .num {
        font-size: 21px;
        font-weight: 600;
        color: #444;

        span {
          font-size: 12px;
          font-weight: initial;
        }
      }

      .txt {
        font-size: 12px;
        color: #666666;
        margin-top: 10px;
      }

      .c-009976 {
        color: #009976;
      }
    }
  }
}
.btn-text {
  font-size: 14px;
  color: #00B38A;
  font-weight: 500;
  cursor: pointer;
}
</style>