dy-admin-manager/src/views/smallCourseConsumption/components/statisticsList.vue

<template>
  <div class="vipClass">
    <save-form :inline="true" class="searchForm" ref="searchForm" @submit="getList" @reset="reset"
      save-key="smallCourseConsumption-actualList" :model.sync="searchForm">
      <el-form-item prop="organId">
        <el-select class="multiple" filterable v-model.trim="searchForm.organId" multiple collapse-tags clearable
          placeholder="请选择分部">
          <el-option v-for="(item, index) in selects.branchs" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
      <el-date-picker
            v-model.trim="searchForm.timer"
            style="width: 400px"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="danger">搜索</el-button>
        <el-button native-type="reset" type="primary">重置</el-button>
      </el-form-item>
    </save-form>
    <ExportChiose
          v-permission="'export/EXPORT_COURSE_CONSUMER_SUM'"
          style="margin-bottom: 20px;margin-right:10px;"
          name="课耗统计导出"
          ExportEnum="EXPORT_COURSE_CONSUMER_SUM"
          :exportData="onExport"
          fileName="课耗统计导出"
          errorMsg="请选择时间"
          :isDownList="true"
        />
    <div class="tableWrap">
      <el-table :data="tableList" :header-cell-style="{ background: '#EDEEF0', color: '#444' }">
        <el-table-column align="center" prop="organName" label="所属分部">
          <template slot-scope="scope">
            <copy-text>{{
                scope.row.organName
            }}</copy-text>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="normalNum" label="在读人数">
          <template slot-scope="scope">
            <p>
              {{
                  scope.row.normalNum
              }}人
            </p>

          </template>
        </el-table-column>
        <el-table-column align="center" prop="normalNum" label="应有课耗">
          <template slot-scope="scope">
            <p>
              {{
                  scope.row.courseConsumerNum
              }}节
            </p>

          </template>
        </el-table-column>
        <el-table-column align="center" prop="normalNum" label="实际课耗">
          <template slot-scope="scope">
            <p>
              {{
                  scope.row.courseSum
              }}节
            </p>

          </template>
        </el-table-column>
        <el-table-column align="center" prop="normalNum" label="课耗达标率">
          <template slot-scope="scope">
            <p>
              {{
                  scope.row.courseConsumerRate
              }}%
            </p>

          </template>
        </el-table-column>
        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="大于等于5节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num5
              }}人
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="4节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num4
              }}人
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="3节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num3
              }}人
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="2节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num2
              }}人
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="1节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num1
              }}人
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="0节">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.num0
              }}人
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="studentBasicInfo.subjectName" label="达标占比">
          <template slot-scope="scope">
          <p>
              {{
                  scope.row.standRate
              }}%
            </p>
          </template>
        </el-table-column>


        <!-- <el-table-column align="center" width="180px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="lookDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <preDetail ref='preDetailRef'/>
      <!-- <pagination
        sync
        save-key="smallCourseConsumption-actualList"
        :total.sync="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      /> -->
    </div>
  </div>
</template>

<script>
import { getCourseConsumerSum } from '../api'
import pagination from "@/components/Pagination/index";
import dayjs from 'dayjs'
import preDetail from '../modals/preDetail.vue'
import ExportChiose from "@/components/Export-chiose";
import { getTimes } from "@/utils";
export default {
  name: "actualList",
  components: {
    pagination,
    preDetail,
    ExportChiose
  },
  provide() {
    return {
      organId: () => this.searchForm.organId.join(","),
      isSearch: () => this.isSearch,
    };
  },

  data() {
    return {

      searchForm: {
        organId: [],
        timer:[dayjs(new Date().setDate(1)).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')]
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
    };
  },
  async mounted() {
    this.$store.dispatch("setBranchs");
    this.getList()
  },
  methods: {
    __init() { },

    reset() {
      this.searchForm.organId = [];
      this.searchForm.timer=[dayjs(new Date().setDate(1)).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')]
      this.pageInfo.page = 1;
      this.getList();
    },
    async getList() {
      try {
        const { timer, ...rest } = this.searchForm;
        let obj = {
          ...rest,
          organId: this.searchForm.organId.join(","),
          ...getTimes(timer, ["startDate", "endDate"]),
          // rows: this.rues.limit,
          // page: this.rulles.page,
        }
        const res = await getCourseConsumerSum(obj)
        this.tableList = res.data;
      } catch (e) {
        console.log(e)
      }
    },
    lookDetail(row){
      this.$refs.preDetailRef.openDialog(row,this.searchForm.timer)
    }
  },
  computed:{
    onExport(){
      const { timer, ...rest } = this.searchForm;
        let obj = {
          organId: this.searchForm.organId.join(","),
          ...getTimes(timer, ["startDate", "endDate"]),
          // rows: this.rues.limit,
          // page: this.rulles.page,
        }
      return obj
    }
  }
};
</script>

<style lang="scss" scoped>
.rows {
  >div {
    margin-bottom: 20px;
  }
}

::v-deep .el-card__body .statistic {
  margin-bottom: 15px;
  padding: 0;
}

.statistic {
  .statistic-content>span {
    font-size: 22px !important;

    &:first-child {
      font-size: 14px !important;
    }
  }
}
</style>