hz_crm_web/src/views/custom_manage/contacts/wholeOrganization.vue

<template>
  <div class="container-whole-organization">
    <el-card>
      <div class="introduce">注：机构的互动详情，是截止至昨天24点的数据，非当前实时数据</div>
      <div class="department-tabs">
        <span :class="['item', activeTypeName == item.value && 'active']" v-for="item in typeList" :key="item.value" @click="typeHandleClick(item)">{{ item.label }}</span>
      </div>
      <div class="tabs">
        <span :class="['item', activeName == item.Source && 'active']" v-for="item in list" :key="item.Source" @click="handleTabsClick(item)">{{ item.PermissionName }} ({{ item.TotalNum }})</span>
      </div>
      <div class="son-box">
        <div style="display: flex; align-items: center" v-if="activeName == 2">
          <el-checkbox-group v-model="checkActiveList" @change="dataChangeHandler">
            <el-checkbox :label="item.key" v-for="item in screenList" :key="item.key">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group style="margin-left: 25px" v-model="checkMeetingList" @change="dataChangeHandler">
            <el-checkbox :label="item.key" v-for="item in meetingList" :key="item.key">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <el-tooltip class="tooltip-item" effect="dark" content="线上活动设置预约外呼/会议提醒/预约纪要，线下活动报名/预约纪要，但实际未参会的活动" placement="top-start">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </div>
        <div class="dataReport-top" v-if="showSelectBox">
          <template>
            <date-picker
              v-model="filterObj.date"
              type="date"
              range
              value-type="format"
              :placeholder="activeName == 2 ? '活动时间' : '阅读时间'"
              :editable="false"
              @change="dateChange"
              style="width: 200px; margin-right: 20px"
            />
          </template>
          <el-cascader
            v-model="sales"
            placeholder="所属销售"
            style="width: 200px; margin-right: 20px"
            :options="salesArr"
            :props="defaultSalesProps"
            :show-all-levels="false"
            collapse-tags
            clearable
            filterable
            @change="handleSearchActivity"
          >
          </el-cascader>
          <el-input placeholder="手机号/邮箱/姓名/公司名" v-model="searchVal" style="width: 220px; margin-right: 20px" @input="handleSearchActivity" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-input v-if="activeName == 2" placeholder="活动名称" v-model="activityName" style="width: 200px" @input="handleSearchActivity" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <a :href="exportExcel" download>
            <button class="button-sty act">下载EXCEL</button>
          </a>
        </div>
      </div>
      <template v-if="activeName != 4">
        <el-table style="margin-top: 20px" :data="tableData" v-loading="tableLoading" element-loading-text="数据加载中..." border>
          <el-table-column v-for="item in tableColumsList" :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
            <template slot-scope="{ row }">
              <span v-if="item.key !== 'LabelKeyWord'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
              <div v-else>
                <template v-if="row.LabelKeyWord">
                  <el-tag style="margin: 5px" type="info" size="small" v-for="tag in row.LabelKeyWord.split(',')" :key="tag">{{ tag }}</el-tag>
                </template>
              </div>
            </template>
          </el-table-column>
          <div slot="empty" style="padding: 20px 0">
            <img src="~@/assets/img/data_m/table_no.png" alt="" style="display: block; width: 135px; height: 90px; margin: 0 auto" />
            <span>暂无数据</span>
          </div>
        </el-table>
        <el-col :span="24" class="toolbar">
          <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
        </el-col>
      </template>
      <template v-else>
        <template v-if="publicHaveMoveCompany">
          <div v-for="item in chartList" :key="item.UserId">
            <template v-if="item.ListChart">
              <ChartItem :chartData="item" :companyName="item.CompanyName" :activeTypeName="activeTypeName" />
            </template>
          </div>
          <el-col :span="24" class="toolbar">
            <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleChartChange" />
          </el-col>
        </template>
        <template v-else>
          <img src="~@/assets/img/data_m/table_no.png" alt="" style="display: block; width: 135px; height: 90px; margin: 30px auto" />
          <p class="chart-no-data">暂无收藏的图表</p>
        </template>
      </template>
    </el-card>
    <special-research-dlg :specialDetailId="specialDetailId" :dialogVisibleActivity.sync="dialogVisibleActivity" :dialogTitle="dialogTitle" :tabsActive="1" />
  </div>
</template>

<script>
import { wholeOrganizationTableColums, screenList, meetingList } from "./compontents/contactsColums";
import { customInterence, equityContacts } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import ChartItem from "./compontents/chartItem.vue";
import SpecialResearchDlg from "../../rai_manage/components/special/specialResearchDlg.vue";
import { mutualMixin } from "./mixins/mutualAssistance";
var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { mPage, ChartItem, SpecialResearchDlg },
  props: {},
  data() {
    return {
      activityName: "",
      publicHaveMoveCompany: true,
    };
  },
  mixins: [mutualMixin],
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/cygx/user/companyList/export/interaction";
      let token = localStorage.getItem("auth") || "";
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      let paramStr = "";
      let params = {
        Source: this.activeName,
        IsMeeting: this.checkMeetingList.join(","),
        MeetType: this.checkActiveList.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        KeyWord: this.searchVal,
        ActivityName: this.activityName,
        AdminId: salesArr.join(","),
        ClassType: this.activeTypeName,
      };
      for (let key in params) {
        paramStr = `${paramStr}&${key}=${params[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.tableColums = wholeOrganizationTableColums(1);
    this.getCygxMutualList();
    this.getSale();
  },
  methods: {
    // 类型的点击事件
    typeHandleClick(item) {
      if (this.activeTypeName == item.value) return;
      this.activeTypeName = item.value;
      this.activeName = 1;
      this.tableColums = wholeOrganizationTableColums(this.activeName);
      this.getCygxMutualList();
    },
    //获取基础数据
    async getCygxMutualList() {
      const res = await equityContacts.getUserTableCompanyList({ ClassType: this.activeTypeName });
      if (res.Ret === 200) {
        this.list = res.Data.List || [];
        this.userForm = res.Data;
        this.getTableData();
      }
    },
    //一级的点击事件
    handleTabsClick(item) {
      if (this.activeName != item.Source) {
        this.activeName = item.Source;
        this.tableColums = wholeOrganizationTableColums(this.activeName);
      }
      this.checkActiveList = [1, 2]; //活动的方式
      this.checkMeetingList = [1, 2]; //是否到会
      this.filterObj = {
        month: "",
        date: [],
      };
      this.searchVal = "";
      this.activityName = "";
      this.end_date = "";
      this.start_date = "";
      this.sales = [];
      this.page_no = 1;
      if (this.activeName !== 4) {
        this.getTableData();
      } else {
        this.getChartData();
      }
    },
    //获取表格数据
    async getTableData() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      this.tableLoading = true;
      const res = await equityContacts.getUserCompanyList({
        Source: this.activeName,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        IsMeeting: this.checkMeetingList.join(","),
        MeetType: this.checkActiveList.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        KeyWord: this.searchVal,
        ActivityName: this.activityName,
        AdminId: salesArr.join(","),
        ClassType: this.activeTypeName,
      });
      if (res.Ret === 200) {
        this.total = res.Data.Paging.Totals;
        this.tableLoading = false;
        this.tableData = res.Data.List || [];
      }
    },
    //获取图表
    async getChartData() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      const res = await equityContacts.getUserCompanyList({
        Source: this.activeName,
        CurrentIndex: this.page_no,
        IdentityType: 2,
        KeyWord: this.searchVal,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        AdminId: salesArr.join(","),
        ClassType: this.activeTypeName,
      });
      if (res.Ret === 200) {
        this.chartList = res.Data.List || [];
        console.log(this.chartList);
        this.publicHaveMove = res.Data ? this.page_no < res.Data.Paging.Pages : false;
        this.publicHaveMoveCompany = res.Data.List.length > 0;
        this.total = res.Data.Paging.Totals;
      }
    },
    handleChartChange(page) {
      this.chartList = [];
      this.page_no = page;
      this.getChartData();
    },
    handleSearchActivity() {
      this.page_no = 1;
      if (this.activeName !== 4) {
        this.getTableData();
      } else {
        this.chartList = [];
        this.getChartData();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container-whole-organization {
  .introduce {
    font-size: 14px;
    color: #999999;
  }
  @import "./compontents/details.scss";
}
</style>
<style>
.el-tabs__nav-wrap::after {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>