获取表单数据、搜索框数据过滤、修改当前状态

<template>
  <div>
    <!-- 内容统计 -->
    <div class="container" v-if="tabIndex === 0">
      <span style="dispaly:inline-block; margin-right:20px"> 平台 </span>
      <!-- 搜索框 -->
      
      <el-select
        v-model="AppName"
        filterable
        clearable
        class="width188 mb16"
        size="medium"
        placeholder="请选择平台"
        @change="selectOnchange"
      >
        <el-option
          v-for="(item, index) in AppList"
          :key="index"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <el-button
        size="medium"
        class="ml16 p10"
        icon="el-icon-search"
        type="primary"
        @click="seachaccount()"
      >
        搜索
      </el-button> -->
      <!-- 表单 -->
      <el-table
        :data="list"
        height="calc(100vh - 270px )"
        stripe
        border
        style="width: 100%"
        ref="multipleTable"
      >
        <el-table-column prop="rn" label="序号" width="180"> </el-table-column>
        <el-table-column prop="AppName" label="平台" width="180">
        </el-table-column>
        <el-table-column prop="Account" label="平台账号" width="180">
        </el-table-column>
        <el-table-column prop="Accountface" label="封面" width="180">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.Accountface"
              style="width: 40px; height: 40px; cursor: pointer"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="Title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="Count1" label="浏览量" width="180">
        </el-table-column>
        <el-table-column prop="CreateTime" label="发布时间" width="180">
        </el-table-column>
        <el-table-column
          prop="Type"
          :formatter="formatType"
          label="类型"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="Extend1" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              @click="onShow(scope.row)"
              size="small"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 40, 60, 80, 100]"
        :page-size.sync="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Statistic",
  props: {
    tabIndex: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      list: [], //表单
      AppName: "",
      AppList: [], //平台名称
      total: 0, //总数
      rows: 10, //每页10条数据
      page: 1, //当前页
    };
  },

  mounted() {
    // 下拉框数据
    this.getplatformList();
    // 内容统计
    this.getVWsfarticleList();

    
  },

  methods: {
    selectOnchange() {
      this.getVWsfarticleList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.rows = val;
      this.getVWsfarticleList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getVWsfarticleList();
    },
    // 下拉框数据
    getplatformList() {
      let data = {
        strWhere: "",
      };
      this.$api.getplatformList(data).then((res) => {
        // console.log(res);
        this.AppList = res.data;
      });
      // console.log("点击");
    },

    // 搜索
    // seachaccount() {
    //   console.log("submit!");
    //   this.getVWsfarticleList();
    // },

    // 类型转换
    formatType(row) {
      return row.Type === "1" ? "图文" : row.Type === "2" ? "视频" : "";
    },

    // 查看
    onShow(val) {
      // console.log(val);
      this.$emit("chakan", val);
    },

    // 获取内容统计数据
    getVWsfarticleList() {
      let data = {
        wheres: "", //条件
        pagination: 1, //是否分页 1是分页
        page: this.page, //当前的页数
        rows: this.rows, //行数
      };
      
      if (this.AppName != "") {
        data.wheres = "extend4=" + this.AppName;
      }
      this.$api.getVWsfarticleList(data).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].CreateTime = this.getNowFormatDate(
            res.data[i].CreateTime
          );
        }
        this.list = res.data;
        this.total = res.total;
        
      });

      // table滚动到行头
      this.$nextTick(() => {
        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
      });
    },

    // 时间转换
    getNowFormatDate(value) {
      var CurrentDate = "";
      var Year = value.getFullYear();
      var Month = value.getMonth() + 1;
      var Day = value.getDate();
      var Hours = value.getHours();
      var Minutes = value.getMinutes();
      var MonthVal = Month >= 10 ? Month : "0" + Month;
      var DayVal = Day >= 10 ? Day : "0" + Day;
      var HoursVal = Hours >= 10 ? Hours : "0" + Hours;
      var MinutesVal = Minutes >= 10 ? Minutes : "0" + Minutes;
      CurrentDate =
        Year +
        "-" +
        MonthVal +
        "-" +
        DayVal +
        " " +
        HoursVal +
        ":" +
        MinutesVal +
        ":00";
      return CurrentDate;
    },
  },
};
</script>

<style>
</style>