hz_crm_web/src/views/research_manage/shareRecord.vue

<template>
  <div class="container share-record-container">
    <el-card>
      <div class="share-record-top">
        <div>
          <el-date-picker
            v-model="selectTime"
            style="width: 260px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleListChange"
          >
          </el-date-picker>
          <el-cascader
            v-model="sales"
            placeholder="请选择分享人"
            style="width: 200px; margin: 0 20px"
            :options="salesArr"
            :props="defaultSalesProps"
            :show-all-levels="false"
            collapse-tags
            clearable
            filterable
            @change="handleListChange"
          >
          </el-cascader>
          <el-select v-model="actionVal" placeholder="用户行为" @change="handleListChange" clearable>
            <el-option v-for="item in actionOptions" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </div>
        <div>
          <el-input placeholder="请输入姓名/手机号" v-model="keyword" style="width: 300px" @input="handleListChange" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </el-card>

    <el-card style="margin-top: 20px">
      <el-table ref="userTable" :data="tableData" border>
        <el-table-column prop="Action" label="用户行为" align="center" width="150"> </el-table-column>
        <el-table-column prop="CreateTime" label="行为时间" align="center" width="180"> </el-table-column>
        <el-table-column prop="RegisterPlatformText" label="分享平台" align="center" width="150"> </el-table-column>
        <el-table-column prop="RealName" label="姓名" align="center" width="130"> </el-table-column>
        <el-table-column prop="Mobile" label="手机号" align="center" width="150"> </el-table-column>
        <el-table-column prop="CompanyName" label="公司名称" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.CompanyId == 1">{{ row.CompanyName }}</span>
            <span class="editsty" @click="customDetail(row)" v-else>{{ row.CompanyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ShareName" label="分享人" align="center" width="100"> </el-table-column>
        <el-table-column prop="SourceTitle" label="内容标题" align="center">
          <template slot-scope="{ row }">
            <span class="editsty" @click="titleDetail(row)">{{ row.SourceTitle }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { customInterence, raiInterface } from "@/api/api.js";
import mPage from "@/components/mPage.vue";

export default {
  name: "",
  components: { mPage },
  props: {},
  data() {
    return {
      total: 0, //条数
      pageSize: 10, //每页显示几条
      page_no: 1,
      keyword: "",
      sales: [],
      salesArr: [], //销售
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      selectTime: [],
      tableData: [],
      actionVal: "",
      actionOptions: ["注册", "查看专栏", "查看报告", "查看活动", "查看音视频"],
    };
  },
  computed: {},
  watch: {}, 
  created() {},
  mounted() {
    this.getSale();
    this.getDataList();
  },
  methods: {
    /* 获取销售 */
    getSale() {
      customInterence.getSalesRaiData().then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    /* 筛选了重新变动 */
    handleListChange() {
      this.page_no = 1;
      this.getDataList();
    },
    handleCurrentChange(page) {
      this.page_no = page;
      this.getDataList();
    },
    /* 查看客户详情 */
    customDetail(row) {
      if (row.CompanyId == 1) return;
      const { href } = this.$router.resolve({
        path: "/customDetail",
        query: {
          id: row.CompanyId,
        },
      });
      window.open(href, "_blank");
    },
    /* 查看报告/活动标题详情 */
    titleDetail(row) {
      window.open(row.HttpUrl, "_blank");
    },
    /* 获取数据 */
    async getDataList() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }

      const res = await raiInterface.getShareRecordList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        AdminId: salesArr.join(","),
        KeyWord: this.keyword,
        StartDate: this.selectTime && this.selectTime[0] ? this.selectTime[0] : "",
        EndDate: this.selectTime && this.selectTime[1] ? this.selectTime[1] : "",
        Action: this.actionVal,
      });
      if (res.Ret === 200) {
        this.tableData = res.Data.List || [];
        this.total = res.Data.Paging.Totals;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.share-record-container {
  .share-record-top {
    display: flex;
    justify-content: space-between;
  }
}
</style>