dy-admin-manager/src/views/childrensDay/dayList.vue

<!--  -->
<template>
  <div class="">
    <div class="m-core">

      <save-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="onReSet"
      >
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
            @change="changeOrgan"
          >
            <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 prop="cooperationId">
          <el-select
            v-model.trim="searchForm.cooperationId"
            :disabled="!searchForm.organId"
            filterable
            clearable
            placeholder="请选择合作单位"
            @change="changeCooper"
          >
            <el-option
              v-for="(item, index) in cooperationList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="musicGroupId">
          <el-select
            v-model.trim="searchForm.musicGroupId"
            clearable
            filterable
            placeholder="请选择乐团"
            :disabled="!searchForm.cooperationId"
          >
            <el-option
              v-for="(item, index) in musicList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="btnList">
        <el-button type="primary" @click="onCreateQRCode('placeholder')"
          >预报名链接</el-button
        >
        <el-button type="primary" @click="onCreateQRCode('music')"
          >器乐考级报名链接</el-button
        >
        <el-button type="primary" @click="onCreateQRCode('vip')"
          >VIP课程链接</el-button
        >
        <el-button type="primary" @click="onCreateQRCode('theory')"
          >乐理考级链接</el-button
        >
        <el-button type="primary" @click="onCreateQRCode('musicOut')" style="background-color: #f97215; border: 1px solid #f97215"
          >对外器乐考级报名链接</el-button
        >
        <el-button type="primary" @click="onCreateQRCode('theoryOut')" style="background-color: #f97215; border: 1px solid #f97215"
          >对外乐理考级链接</el-button
        >
        <el-button
          type="primary"
          @click="sendMsg"
          v-permission="'childrenReserve/sendMsg'"
          >发送短信及推送</el-button
        >
        <el-button
          type="primary"
          v-permission="'export/statisticsDetail'"
          @click="exportChildren"
          >导出</el-button
        >
      </div>
      <statistic :col="4" class="statistic" :cols="0">
        <statistic-item>
          <span>器乐考级人次</span>
          <span><count-to :endVal="statInfo.instrumentalMusicNum" /></span>
        </statistic-item>
        <statistic-item>
          <span>乐理考级人次</span>
          <span><count-to :endVal="statInfo.musicTheoryNum" /></span>
        </statistic-item>
        <statistic-item>
          <span>乐理课购买人数</span>
          <span><count-to :endVal="statInfo.buyMusicTheoryNum" /></span>
        </statistic-item>
        <statistic-item>
          <span>乐理课成交金额(元)</span>
          <span
            ><count-to :endVal="statInfo.buyMusicTheoryAmount" :decimals="2"
          /></span>
        </statistic-item>
        <statistic-item>
          <span>1v1VIP课购买人数</span>
          <span><count-to :endVal="statInfo.buyVip1Num" /></span>
        </statistic-item>
        <statistic-item>
          <span>1v1VIP课成交金额(元)</span>
          <span
            ><count-to :endVal="statInfo.buyVip1Amount" :decimals="2"
          /></span>
        </statistic-item>
        <statistic-item>
          <span>1v2VIP课购买人数</span>
          <span><count-to :endVal="statInfo.buyVip2Num" /></span>
        </statistic-item>
        <statistic-item>
          <span>1v2VIP课成交金额(元)</span>
          <span
            ><count-to :endVal="statInfo.buyVip2Amount" :decimals="2"
          /></span>
        </statistic-item>
      </statistic>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            v-permission="'childrenReserve/sendMsg'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="分部"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="cooperationOrganName"
            label="合作单位"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="musicGroupName"
            label="乐团名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="normalNum"
            label="在读人数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="reserveNum"
            label="预约人数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="noReserveNum"
            label="未预约人数"
            width="120px"
          >
                 <template slot="header" slot-scope="scope">
              <p style="position: relative">
                未预约人数
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">
                    未通过预报名链接直接报名考级的学员数量
                  </div>
                  <!-- <img :src="imageIcon"
                       class="micon el-tooltip"
                       style="width:8px height:8px"
                       alt /> -->
                  <i
                    class="el-icon-question"
                    style="font-size: 18px; color: #f56c6c"
                  ></i>
                </el-tooltip>
              </p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="instrumentalMusicNum"
            label="器乐考级人次"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="musicTheoryNum"
            label="乐理考级人次"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="buyVip1Num"
            label="1v1VIP课购买人数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="buyVip1Amount"
            label="1v1VIP课成交金额"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.buyVip1Amount | moneyFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="buyVip2Num"
            label="1v2VIP课购买人数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="buyVip2Amount"
            label="1v2VIP课成交金额"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.buyVip2Amount | moneyFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="buyMusicTheoryNum"
            label="乐理课购买人数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="buyMusicTheoryAmount"
            label="乐理课成交金额"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.buyMusicTheoryAmount | moneyFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="gotoDetail(scope.row)"
                  >详情</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <qr-code v-model="codeStatus" :title="codeTitle" :codeUrl="qrCodeUrl" />
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import qs from "qs";
import pagination from "@/components/Pagination/index";
import qrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from "@/utils/validate";
import { Export } from "@/utils/downLoadFile";
import load from "@/utils/loading";
import { queryByOrganId, getSchool, getMusicGroup } from "@/api/systemManage";
import { getMusicGroupGradeList, sendMsgList } from "./api";
import countTo from "vue-count-to";
const baseStatusInfo = {
  buyMusicTheoryAmount: 0,
  buyMusicTheoryNum: 0,
  buyVip1Amount: 0,
  buyVip1Num: 0,
  buyVip2Amount: 0,
  buyVip2Num: 0,
  cooperationOrganId: 0,
  cooperationOrganName: "",
  instrumentalMusicNum: 0,
  musicGroupId: "",
  musicGroupName: "",
  musicTheoryNum: 0,
  noReserveNum: 0,
  normalNum: 0,
  organId: 0,
  organName: "",
  reserveNum: 0,
  totalAmount: 0,
};
export default {
  components: { pagination, "count-to": countTo, qrCode },

  data() {
    return {
      searchForm: {
        search: null,
        organId: null,
        cooperationId: null,
        musicGroupId: null,
      },
      codeStatus: false,
      codeTitle: null,
      qrCodeUrl: null,
      tableList: [],
      cooperationList: [],
      musicList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      statInfo: {
        ...baseStatusInfo,
      },
      chioseList: [],
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取分部
    this.$store.dispatch("setBranchs");
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    async getList() {
      try {
        const res = await getMusicGroupGradeList({
          page: this.rules.page,
          rows: this.rules.limit,
          ...this.searchForm,
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
        if (res?.data?.statInfo) {
          this.statInfo = { ...res.data.statInfo };
        } else {
          this.statInfo = { ...baseStatusInfo };
        }
      } catch (e) {}
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.rules = {
        ...this.rules,
        page: 1,
      };
      this.$refs.searchForm.resetFields();
      this.search();
    },
    onCreateQRCode(status) {
      if (status == "placeholder") {
        this.codeTitle = "预报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenSeat";
      }
      if (status == "theory") {
        this.codeTitle = "乐理考级链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenPayment?dHlwZT0y";
      }

      if (status == "music") {
        this.codeTitle = "器乐考级报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenPayment?dHlwZT0x";
      }
      if (status == "vip") {
        this.codeTitle = "VIP课程链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenPayment";
      }
      if (status == "musicOut") {
        this.codeTitle = "对外器乐考级报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenOut";
      }
      if (status == "theoryOut") {
        this.codeTitle = "对外乐理考级链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/childrenOut?dHlwZT0y";
      }
      this.codeStatus = true;
    },
    changeOrgan(val) {
      this.searchForm.cooperationId = null;
      this.searchForm.musicGroupId = null;
    },
    changeCooper(val) {
      this.searchForm.musicGroupId = null;
    },
    handleSelectionChange(val) {
      this.chioseList = val;
    },
    gotoDetail(row) {
      // query:{'musicGroupId':}
      this.$router.push({
        path: "/business/childrensdayDetail",
        query: {
          musicGroupId: row.musicGroupId,
          musicGroupName: row.musicGroupName,
          cooperationOrganId: row.cooperationOrganId,
          organId: row.organId,
        },
      });
    },
    exportChildren() {
      Export(
        this,
        {
          url: "/api-web/export/statisticsDetail",
          fileName: "21暑期考级.xls",
          method: "post",
          params: qs.stringify({ ...this.searchForm }),
        },
        "您确定导出21暑期考级?"
      );
    },
    async sendMsg() {
      if (this.chioseList.length < 1) {
        this.$message.error("请至少选择一个乐团");
        return;
      }

      this.$confirm("确定发送短信和推送", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let arr = this.chioseList.map((item) => {
          return {
            musicGroupId: item.musicGroupId,
            organId: item.organId,
          };
        });
        try {
          const res = await sendMsgList(arr);
          this.$message.success("发送成功");
          this.getList();
        } catch {}
      });
    },
  },
  watch: {
    "searchForm.organId"(val) {
      if (val) {
        queryByOrganId({ organId: val }).then((res) => {
          if (res.code == 200) {
            this.cooperationList = res.data;
          }
        });
      }
    },
    "searchForm.cooperationId"(val) {
      if (val) {
        getMusicGroup({ cooperationId: val }).then((res) => {
          this.musicList = res.data;
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.statistic {
  .statistic-content > span {
    font-size: 22px !important;
    &:first-child {
      font-size: 14px !important;
      // color: rgba(0, 0, 0, 0.85);
      // font-weight: bold;
    }
  }
}
    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .el-button+.el-button {
    margin-left: 0px;
}
      & > .el-button {
        margin-right: 15px;
        margin-top: 10px;
      }
    }
</style>