hz_crm_web/src/views/dataReport_manage/components/ServiceDetailsDlg.vue

<template>
  <el-dialog v-dialogDrag :visible.sync="isServiceDetailsShow" destroy-on-close width="1000px" @close="handleClose" :modal-append-to-body="false" center :title="`服务明细--${dlgForm.CompanyName}`">
    <el-table ref="updateTable" :data="tableData" style="width: 100%; margin-bottom: 20px" border height="400px">
      <el-table-column align="center" prop="Content" label="服务内容"> </el-table-column>
      <el-table-column align="center" prop="ServeTypeName" label="服务类型" width="120"> </el-table-column>
      <el-table-column align="center" prop="address" label="主题标签">
        <template slot-scope="{ row }" v-if="row.Tag">
          <el-tag style="margin: 5px" type="info" size="small" v-for="item in row.Tag.split(',')" :key="item">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="RealName" label="参与人" width="100"> </el-table-column>
      <el-table-column align="center" prop="IsKp" label="是否kp" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.IsKp == 1 ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ServeCount" label="服务量小计" width="100"> </el-table-column>
      <el-table-column align="center" prop="ViewTime" label="时间">
        <template slot="header" slot-scope="{}">
          <span>时间</span>
          <el-tooltip class="item" effect="dark" content="时间指的是：活动开始时间，一对一路演开始时间，报告阅读时间，交流反馈提交时间" placement="top-start">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </template>
        <template slot-scope="{ row }">
          <span>{{ row.ViewTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { dataMainInterface, raiInterface } from "@/api/api.js";
export default {
  props: {
    dlgForm: {
      type: Object,
      default: {},
    },
    isServiceDetailsShow: {
      type: Boolean,
      require: true,
    },
    selectForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableData: [], // 初始表格数据
      page_no: 1, // 当前页码
      pageSize: 10, // 每页显示的行数
      noMoreData: false,
    };
  },
  methods: {
    /* 滚动监听 */
    loadMoveHandler() {
      let dom = this.$refs.updateTable.bodyWrapper;
      dom.addEventListener(
        "scroll",
        _.throttle(() => {
          const scroll = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
          console.log(scroll <= 1, !this.noMoreData);
          if (scroll <= 1 && !this.noMoreData) {
            this.page_no++;
            this.loadData();
          }
        }, 500)
      );
    },

    async loadData() {
      const res = await dataMainInterface.getRaiServeBillList({
        CompanyId: this.dlgForm.CompanyId,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        TagType: this.selectForm.TagType,
        TagId: this.selectForm.TagId,
        ServeTypeId: this.selectForm.ServeTypeId,
        WhatWeek: this.selectForm.WhatWeek,
        WhatMonth: this.selectForm.WhatMonth,
      });
      if (res.Ret == 200) {
        this.tableData = this.tableData.concat(res.Data.List);
        this.noMoreData = res.Data.Paging.IsEnd;
      }
    },
    // 关闭弹框
    handleClose() {
      this.tableData = [];
      this.noMoreData = false;
      this.page_no = 1;
      this.$emit("update:isServiceDetailsShow", false);
      this.$emit("update:dlgForm", {});
    },
    // 时间的计算
    getWeekRange(offset) {
      const now = new Date();
      const startOfWeek = new Date(now);
      startOfWeek.setDate(now.getDate() - now.getDay() + 1 + offset * 7); // 设置为每周的周一
      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(startOfWeek.getDate() + 6); // 设置为每周的周日

      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        return `${month}-${day}`;
      };

      return `(${formatDate(startOfWeek)} ~ ${formatDate(endOfWeek)})`;
    },
  },
  watch: {
    isServiceDetailsShow: {
      handler(val) {
        if (val) {
          this.loadData();
          this.$nextTick(() => {
            this.loadMoveHandler();
          });
        } else {
          this.tableData = [];
        }
      },
      deep: true,
    },
  },
};
</script>

<style></style>