dy-admin-manager/src/views/smallStudentManager/components/tableList.vue

<template>
  <div class="tableList">
    <save-form
      :inline="true"
      class="searchForm"
      @submit="onSearch"
      @reset="onReSet"
      ref="searchForm"
      :model.sync="searchForm"
    >
      <el-form-item prop="search">
        <el-input
          clearable
          placeholder="学生姓名/编号"
           @keyup.enter.native="
              (e) => {
                e.target.blur();
                $refs.searchForm.save();
                onSearch();
              }
            "
          v-model.trim="searchForm.search"
        ></el-input>
      </el-form-item>

      <el-form-item prop="studentStatus">
        <el-select
          class="multiple"
          filterable
          v-model.trim="searchForm.studentStatus"
          clearable
          placeholder="请选择学员状态"
        >
          <el-option label="在读" value="NORMAL"></el-option>
          <el-option label="沉睡" value="SLEEPY"></el-option>
          <el-option label="流失" value="LOST"></el-option>
          <el-option label="暂停" value="PAUSE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="feedbackType">
        <el-select
          class="multiple"
          filterable
          v-model.trim="searchForm.feedbackType"
          clearable
          placeholder="请选择回访状态"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in feedbackTypeList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="latelyCourseConsumer">
        <el-input
          clearable
          placeholder="近30天课耗"
          v-model.trim="searchForm.latelyCourseConsumer"
        ></el-input>
      </el-form-item>
      <el-form-item prop="visitNum">
        <el-input
          clearable
          placeholder="回访次数"
          v-model.trim="searchForm.visitNum"
        ></el-input>
      </el-form-item>
      <el-form-item prop="teacherId">
        <remote-search :commit="'setTeachers'" v-model="searchForm.teacherId"    :isForzenWithQueryCondition="true"/>
      </el-form-item>
      <el-form-item prop="musicDirectorId">
        <remote-search
          :commit="'setEducations'"
          v-model="searchForm.musicDirectorId"
        />
      </el-form-item>
      <el-form-item prop="courseConsumerError">
        <el-select
          class="multiple"
          filterable
          v-model.trim="searchForm.courseConsumerError"
          clearable
          placeholder="请选择课耗是否异常"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="wornFlag">
        <el-select
          class="multiple"
          filterable
          v-model.trim="searchForm.wornFlag"
          clearable
          placeholder="请选择是否预警"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="subCourseMinNum">
        <el-input-number
          class="number-input"
          :controls="false"
          :precision="0"
          :min="0"
          v-model="searchForm.subCourseMinNum"
          placeholder="请输入剩余课时最小数"
        ></el-input-number>
      </el-form-item>
      <el-form-item prop="subCourseMaxNum">
        <el-input-number
          class="number-input"
          :controls="false"
          :precision="0"
          v-model="searchForm.subCourseMaxNum"
          :min="searchForm.subCourseMinNum"
          placeholder="请输入剩余课时最大数"
        ></el-input-number>
      </el-form-item>
      <el-form-item prop="timer">
        <el-date-picker
          v-model.trim="searchForm.timer"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="第一次课开始时间"
          end-placeholder="第一次课结束时间"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          key="visiList1"
          v-model.trim="searchForm.lastTimer"
          style="width: 420px"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="最后回访开始日期"
          end-placeholder="最后回访结束日期"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
        >
        </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-button
          type="primary"
          v-if="tableList.length > 0"
          v-permission="
            'studentStatistics/exportStudentSmallClassStatisticsSum'
          "
          @click="smallStudentExport"
          >导出</el-button
        >
      </el-form-item>
    </save-form>

    <div class="tableWrap">
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              class="demo-table-expand"
              :inline="true"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="指导老师信息">
                    <div
                      class="schoolWrap"
                      style="color: var(--color-primary); cursor: pointer"
                      v-if="props.row.teacherId"
                      @click="gototeacher(props.row.teacherId)"
                    >
                      <span>{{ props.row.teacherName }}</span>
                      <span>({{ props.row.teacherId }})</span>
                    </div>
                  </el-form-item></el-col
                >
                <el-col :span="6">
                  <el-form-item label="乐团主管">
                    <div class="schoolWrap" v-if="props.row.musicDirectorId">
                      <span>{{ props.row.musicDirectorName }}</span>
                      <span>({{ props.row.musicDirectorId }})</span>
                    </div>
                  </el-form-item></el-col
                >
                <el-col :span="6">
                  <el-form-item label="声部课老师">
                    <div class="schoolWrap">
                      <overflow-text
                        width="100%"
                        :text="props.row.studentBasicInfo.subjectTeacherName"
                      ></overflow-text>
                    </div> </el-form-item
                ></el-col>
                <el-col :span="6">
                  <el-form-item label="年级">
                    <div class="schoolWrap">
                      <overflow-text
                        width="100%"
                        :text="props.row.studentBasicInfo.grade"
                      ></overflow-text>
                    </div> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="近30天课耗">
                    <div class="schoolWrap">
                      <span>{{ props.row.latelyCourseConsumer }}</span>
                    </div>
                  </el-form-item></el-col
                >
                <el-col :span="6">
                  <el-form-item label="回访次数">
                    <div class="schoolWrap">
                      <span>{{ props.row.visitNum }}</span>
                    </div>
                  </el-form-item></el-col
                >
                <el-col :span="6">
                  <el-form-item label="回访状态">
                    <div class="schoolWrap">
                      {{ props.row.lastVisitStatus | feedbackTypeFilter }}
                    </div>
                  </el-form-item></el-col
                >
                <el-col :span="6">
                  <el-form-item label="回访日期">
                    <div class="schoolWrap" v-if="props.row.lastVisitTime">
                      {{ props.row.lastVisitTime | dayjsFormat }}
                    </div>
                  </el-form-item></el-col
                >
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="第一次课时间">
                    <div class="schoolWrap">
                      <overflow-text
                        width="100%"
                        :text="props.row.firstCourseTime"
                      ></overflow-text>
                    </div> </el-form-item
                ></el-col>
                <el-col :span="6">
                  <el-form-item label="最近上课时间">
                    <div class="schoolWrap">
                      <overflow-text
                        width="100%"
                        :text="props.row.lastCourseTime"
                      ></overflow-text>
                    </div> </el-form-item
                ></el-col>
                <el-col :span="6">
                  <el-form-item label="原因">
                    <div class="schoolWrap">
                      <overflow-text
                        width="100%"
                        :text="props.row.visitReason"
                      ></overflow-text>
                    </div> </el-form-item
                ></el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="organName" label="所属分部">
          <template slot-scope="scope">
            <copy-text>{{
              scope.row.studentBasicInfo && scope.row.studentBasicInfo.organName
            }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="userId"
          label="学员信息"
          width="140px"
        >
          <template slot-scope="scope">
            <div
              style="color: var(--color-primary); cursor: pointer"
              v-if="scope.row.studentBasicInfo"
              @click="gotoStudent(scope.row.studentBasicInfo.userId)"
            >
              {{
                scope.row.studentBasicInfo &&
                scope.row.studentBasicInfo.userName
              }}<br />
              {{
                scope.row.studentBasicInfo && scope.row.studentBasicInfo.userId
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="studentBasicInfo.phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="studentBasicInfo.subjectName"
          label="声部"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="studentBasicInfo.cooperationOrganName"
          label="学校"
        >
        </el-table-column>
        <el-table-column align="center" prop="organName" label="学员状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.studentBasicInfo.studentStatus }}
              <!-- <p
                v-if="
                  (scope.row.noScheduleNum || scope.row.subCourseNum) &&
                  (scope.row.latelyYearCourseConsumer ||
                    !scope.row.overCourseNum)
                "
              >
                在读
              </p>
              <p
                v-if="
                  scope.row.overCourseNum &&
                  (scope.row.subCourseNum || scope.row.noScheduleNum) &&
                  !scope.row.latelyYearCourseConsumer
                "
              >
                沉睡
              </p>
              <p
                v-if="
                  scope.row.overCourseNum &&
                  !scope.row.noScheduleNum &&
                  !scope.row.subCourseNum
                "
              >
                流失
              </p>
                 <p
                v-if="
                  scope.row.studentBasicInfo.courseBalance &&
                  !scope.row.noScheduleNum &&
                  !scope.row.subCourseNum
                "
              >
                暂停
              </p> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="noScheduleNum" label="未排课时">
          <template slot-scope="scope">
            {{ scope.row.noScheduleNum }}节
          </template>
        </el-table-column>
        <el-table-column align="center" prop="totalCourseNum" label="总课时">
          <template slot-scope="scope">
            {{ parseInt(scope.row.totalCourseNum+scope.row.noScheduleNum)  }}节
          </template>
        </el-table-column>
        <el-table-column align="center" prop="overCourseNum" label="已完成课时">
          <template slot-scope="scope">
            {{ scope.row.overCourseNum }}节
          </template>
        </el-table-column>
        <el-table-column align="center" prop="subCourseNum" label="剩余课时">
          <template slot-scope="scope">
            {{ scope.row.subTotalCourse }}节
          </template>
        </el-table-column>
        <el-table-column align="center" prop="preCourseFee" label="预收金额">
          <template slot-scope="scope">
            {{ scope.row.preCourseFee | moneyFormat }}元
          </template>
        </el-table-column>
        <el-table-column align="center" width="180px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="recordVisit(scope.row)"
              >回访记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        sync
        :total.sync="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog
      title="回访记录"
      width="1000px"
      v-if="visitVisiable"
      :close-on-click-modal="false"
      :visible.sync="visitVisiable"
    >
      <visiList
        :studentId="activeRow.userId"
        :studentName="activeRow.studentBasicInfo.userName"
        :groupType="groupType"
        @getList="getList"
      />
    </el-dialog>
    <div v-show="isSearchs"></div>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { queryPage } from "../api";
import { feedbackTypeList } from "@/utils/searchArray";
import { getTimes } from "@/utils";
import { Export } from "@/utils/downLoadFile";
import cleanDeep from "clean-deep";
import visiList from "./visiList.vue";
import qs from "qs";
export default {
  name: "tableList",
  props: ["groupType"],
  inject: ["organId", "isSearch"],
  components: {
    pagination,
    visiList,
  },
  data() {
    return {
      searchForm: {
        search: "",
        studentStatus: "",
        feedbackType: "",
        latelyCourseConsumer: "",
        visitNum: "",
        teacherId: "",
        musicDirectorId: "",
        courseConsumerError: "",
        timer: [],
        lastTimer: [],
      },
      tableList: [],
      feedbackTypeList,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      visitVisiable: false,
      activeRow: null,
      flag: false,
    };
  },
  async mounted() {
    this.$store.dispatch("setBranchs");
    this.$store.dispatch("setTeachers");
    await this.getList();
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm.timer = [];
      this.searchForm.lastTimer = [];
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
    async getList() {
      const { timer, lastTimer, ...rest } = this.searchForm;
      try {
        let obj = {
          groupType: this.groupType,
          ...rest,
          ...getTimes(timer, ["firstCourseStartTime", "firstCourseEndTime"]),
          ...getTimes(lastTimer, ["lastVisitStartTime", "lastVisitEndTime"]),
          rows: this.pageInfo.limit,
          page: this.pageInfo.page,
          organId: this.organIds,
        };
        let res = await queryPage({
          ...obj,
        });
        this.tableList = res.data.rows || [];
        this.pageInfo.total = res.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    gotoStudent(search) {
      this.$router.push({
        name: "studentList",
        params: { search: search },
      });
    },
    gototeacher(search) {
      this.$router.push({
        name: "teacherList",
        params: { search: search },
      });
    },
    recordVisit(row) {
      this.activeRow = row;
      this.visitVisiable = true;
    },
    smallStudentExport() {

      const { timer, ...rest } = this.searchForm;
      let str = "";
      if (this.groupType === "PRACTICE") {
        str = "网管课";
      } else if (this.groupType === "VIP") {
        str = "VIP课";
      } else {
        str = "乐理课";
      }
      Export(
        this,
        {
          url: "/api-web/studentStatistics/exportStudentSmallClassStatisticsSum",
          fileName: `${str}学员管理.xls`,
          method: "post",
          params: qs.stringify(
            cleanDeep({
              groupType: this.groupType,
              ...rest,
              ...getTimes(timer, [
                "firstCourseStartTime",
                "firstCourseEndTime",
              ]),
              rows: this.pageInfo.limit,
              page: this.pageInfo.page,
              organId: this.organIds,
            })
          ),
        },
        `您确定导出${str}学员管理?`
      );
    },
  },

  computed: {
    organIds() {
      return this.organId();
    },
    isSearchs: {
      get() {
        let flag = this.isSearch();
        if (this.flag != flag) {
          this.onSearch();
        }
        this.flag = flag;

        return flag;
      },
    },
  },
};
</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;
    }
  }
}
.number-input {
  width: 180px !important;
  ::v-deep  .el-input__inner {
    text-align: left;
  }
}
</style>