yos_web/src/WebsiteManagement/dataStatistics/modules/statisticalAnalysisOfMessage.vue

<template>
  <div>
    <div class="card">
      <cord-top title="留言统计明细表" @returnWhere="getList" />
      <div style="height: 20px" />
      <tableTemplate
        ref="table"
        :layout="tablecols"
        :data="list"
        :opwidth="200"
        :custom="true"
      >
        <template v-slot:customcol="scope">
          <p
            v-if="
              ['allocationstatus', 'status'].includes(scope.column.columnname)
            "
            :style="
              tool.getStatusColor(scope.column.data[scope.column.columnname])
            "
          >
            {{ $t(scope.column.data[scope.column.columnname]) }}
          </p>
          <p v-else-if="['deleted'].includes(scope.column.columnname)">
            {{
              $t(scope.column.data[scope.column.columnname] == 0 ? "否" : "是")
            }}
          </p>
          <p v-else>
            {{ $t(scope.column.data[scope.column.columnname]) }}
          </p>
        </template>
      </tableTemplate>
      <div class="pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="content.pageNumbe"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="content.pageSize"
          layout="total,sizes, prev, pager, next, jumper"
          :total="content.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import cordTop from "./header.vue";
import tableTemplate from "@/views/salesData/components/table";

export default {
  components: {
    cordTop,
    tableTemplate,
  },
  data() {
    return {
      list: [],
      tablecols: [],
      content: {
        pageSize: 10,
        pageNumbe: 1,
        total: 0,
        where: {},
        nocache: true,
        type: "近七日",
      },
    };
  },
  created() {
    this.content.siteid = JSON.parse(
      sessionStorage.getItem("active_account")
    ).siteid;
    this.getList();
    this.tablecols = this.tool.tabelCol(
      this.$route.name
    ).statisticalAnalysisOfMessage.tablecols;
  },
  methods: {
    getList(detail) {
      let content = this.content;
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
          content.where = {};
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025021108560703,
          content,
        })
        .then((res) => {
          console.log("留言统计明细表", res);
          if (res.code != 1) return;
          this.list = res.data;
          this.content.total = res.total;
          this.content.pageNumbe = res.pageNumber;
          this.content.pageSize = res.pageSize;
        });
    },
    handleSizeChange(pageSize) {
      this.content.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(pageNumbe) {
      this.content.pageNumbe = pageNumbe;
      this.getList();
    },
  },
};
</script>

<style scoped>
.card {
  width: 100%;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.pagination-box {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>