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

<template>
  <div class="container-mutualList">
    <el-card>
      <div>
        <span class="intro">{{ userForm.UserName }}-{{ userForm.Mobile }}-{{ userForm.ComapnyName }}</span>
        <span class="organization-details" @click="goWholeDetail">机构互动详情>></span>
      </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" v-if="showSelectBox || activeName == 15">
        <div style="display: flex; align-items: center" v-if="activeName === 2 && showSelectBox">
          <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">
          <date-picker
            v-model="filterObj.date"
            type="date"
            range
            value-type="format"
            :placeholder="activeName === 2 ? '活动时间' : activeName === 15 ? '路演时间' : '阅读时间'"
            :editable="false"
            @change="dateChange"
            style="width: 200px; margin-right: 20px"
          />
          <template v-if="showSelectBox">
            <button :class="['button-sty', { act: filterObj.month === item.label }]" v-for="item in monthLabel" @click="toggleMonth(item.label)" :key="item.label">
              {{ item.label }}
            </button>
          </template>
          <el-input v-if="activeName === 2 && showSelectBox" placeholder="活动名称" v-model="searchVal" style="width: 200px" @input="handleSearch" 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="chartList.length > 0">
          <div style="margin-top: 20px" class="chart-list" ref="listChartPage" @scroll="loadMorePublicChart">
            <div class="chart-item" v-for="item in chartList" :key="item.ChartId" @click="chartDetial(item)">
              <img class="item-img" :src="item.BodyHtml" />
              <p class="text_twoLine title-chart">{{ item.Title }}</p>
              <div class="chart-tag">
                <template v-if="item.CtagNamePc">
                  <span class="tag-item" v-for="val in item.CtagNamePc.split(',')" :key="val">{{ val }}</span>
                </template>
              </div>
              <p class="tiem">收藏时间:{{ item.CreateTime }}</p>
            </div>
          </div>
        </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 /> -->
    <special-research-dlg :specialDetailId="specialDetailId" :dialogVisibleActivity.sync="dialogVisibleActivity" :dialogTitle="dialogTitle" :tabsActive="1" />
  </div>
</template>

<script>
import { customInterence, equityContacts } from "@/api/api.js";
import { tableColums, screenList, meetingList } from "./compontents/contactsColums";
import mPage from "@/components/mPage.vue";
import { mutualMixin } from "./mixins/mutualAssistance";
import SpecialResearchDlg from "../../rai_manage/components/special/specialResearchDlg.vue";
var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { mPage, SpecialResearchDlg },
  props: {},
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/cygx/user/interaction/detail";
      let token = localStorage.getItem("auth") || "";
      let paramStr = "";
      let params = {
        UserId: Number(this.$route.query.id),
        Source: this.activeName,
        IsMeeting: this.checkMeetingList.join(","),
        MeetType: this.checkActiveList.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        KeyWord: this.searchVal,
        ClassType: this.activeTypeName,
        IsExport:true
      };
      for (let key in params) {
        paramStr = `${paramStr}&${key}=${params[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  data() {
    return {};
  },
  mixins: [mutualMixin],
  created() {},
  mounted() {
    this.tableColums = tableColums(1);
    this.getCygxMutualList();
  },
  methods: {
    // 类型的点击事件
    typeHandleClick(item) {
      if (this.activeTypeName == item.value) return;
      this.activeTypeName = item.value;
      this.activeName = 1;
      this.tableColums = tableColums(this.activeName);
      this.getCygxMutualList();
    },
    //获取基础数据
    async getCygxMutualList() {
      const res = await equityContacts.getCygxMutualList({
        UserId: Number(this.$route.query.id),
        ClassType: this.activeTypeName,
      });
      if (res.Ret === 200) {
        this.list = res.Data.List || [];
        this.userForm = res.Data;
        this.getTableData();
      }
    },
    //获取表格数据
    async getTableData() {
      this.tableLoading = true;
      const res = await equityContacts.getCygxMutualDetail({
        UserId: Number(this.$route.query.id),
        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,
        ClassType: this.activeTypeName,
        KeyWord: this.searchVal,
      });
      if (res.Ret === 200) {
        this.total = res.Data.Paging.Totals;
        this.tableLoading = false;
        this.tableData = res.Data.List || [];
      }
    },
    async getChartData() {
      const res = await equityContacts.getCygxMutualDetail({
        UserId: Number(this.$route.query.id),
        Source: this.activeName,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        ClassType: this.activeTypeName,
      });
      if (res.Ret === 200) {
        this.publicHaveMove = res.Data ? this.page_no < res.Data.Paging.Pages : false;
        this.chartList = res.Data ? (this.page_no === 1 ? res.Data.List : [...this.chartList, ...res.Data.List]) : [];
      }
    },
    //一级的点击事件
    handleTabsClick(item) {
      if (this.activeName != item.Source) {
        this.activeName = item.Source;
        this.tableColums = tableColums(this.activeName);
      }
      this.checkActiveList = [1, 2]; //活动的方式
      this.checkMeetingList = [1, 2]; //是否到会
      this.filterObj = {
        month: "",
        date: [],
      };
      this.end_date = "";
      this.start_date = "";
      this.searchVal = "";
      this.chartList = [];
      this.page_no = 1;
      if (this.activeName !== 4) {
        this.getTableData();
      } else {
        this.getChartData();
      }
    },
    chartDetial(item) {
      window.open(item.HttpUrl, "_blank");
    },
    // 机构互助详情
    goWholeDetail() {
      const { href } = this.$router.resolve({
        path: "/organizationList",
        query: {
          id: this.$route.query.id,
          CompanyId: this.$route.query.CompanyId,
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>
<style scoped lang="scss">
.container-mutualList {
  .intro {
    display: inline-block;
    padding: 10px 20px;
    color: #2d8cf0;
    background: #e8f3ff;
    border-radius: 4px;
  }
  @import "./compontents/details.scss";
  .organization-details {
    display: inline-block;
    margin-left: 20px;
    cursor: pointer;
    font-size: 14px;
    color: #3385ff;
  }
}
</style>
<style>
.el-tabs__nav-wrap::after {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>