dy-admin-manager/src/views/teamBuild/initiationList.vue

<template>
  <div class="forecastName">
    <!-- <h2> m-container
          <el-page-header @back="onCancel" :content="teamName"></el-page-header>
        </h2> -->

    <!-- <p style="margin-bottom: 15px; font-size: 18px; font-weight: 400">
          缴费截止时间：{{ '2020-12-12' | formatTimer }}
        </p> -->

    <div class="btnList">
      <!-- <el-button type="primary" @click="codedetailStatus = true" v-if="isedit"
        >预报名详情</el-button
      > -->

      <auth :auths="['musicEnlightenmentQuestionnaire/sendParentMeetingNotice']" v-if="isedit">
        <el-button type="primary" @click="extendPaymentStatus = true"
          >启蒙课家长会通知</el-button
        >
      </auth>
      <auth :auths="['initiationList/forecastLink']" v-if="isedit">
        <el-button type="primary" @click="codeStatus = true"
          >启蒙课问卷</el-button
        >
      </auth>
      <auth :auths="['export/musicEnlightenmentQuestionnaires']">
        <el-button type="primary" @click="downloadFile"
          >启蒙课问卷导出</el-button
        >
      </auth>
      <auth :auths="['musicEnlightenmentQuestionnaire/musicEnlightenmentQuestionnaireStat']">
        <el-button type="primary" @click="subjectVisible = true"
          >启蒙课问卷统计</el-button
        >
      </auth>
    </div>

    <div class="m-core">
      <save-form
        :inline="true"
        @reset="onReSet"
        @submit="search"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="search"
            placeholder="学生编号/姓名/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="currentGradeNum">
          <!-- <el-input
          v-model.trim="searchForm.currentGrade"
          clearable
          placeholder="学员年级"
        ></el-input> -->
          <el-select
            v-model.trim="searchForm.currentGradeNum"
            filterable
            clearable
            placeholder="请选择年级"
          >
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="teacherRecommandSubjectId">
          <el-select
            clearable
            v-model="searchForm.teacherRecommandSubjectId"
            filterable
            placeholder="老师推荐声部"
          >
            <el-option
              v-for="item in subjectList"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="musicalInstrumentsLearning">
          <el-select
            clearable
            v-model="searchForm.musicalInstrumentsLearning"
            placeholder="是否正在学习某乐器"
          >
            <el-option value="true" label="是"></el-option>
            <el-option value="false" label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="seach">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column align="center" prop="userId" label="学员编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.userId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="学员姓名"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="gender" label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender ? "男" : "女" }}
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="phone" label="联系电话">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.phone }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="年级班级">
            <template slot-scope="scope">
              {{ scope.row.currentGrade }}{{ scope.row.currentClass }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="teacherRecommandSubjectId"
            label="老师推荐声部"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.teacherRecommandSubjectId==-1
                    ? scope.row.subjectName
                    : "无"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="musicalInstrumentsLearning"
            label="是否在学习某件乐器"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.musicalInstrumentsLearning ? "是" : "否" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="userName" label="目前所学乐器">
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.musicalInstrumentsLearning
                    ? scope.row.musicalInstrumentsName
                    : "否"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="报名参加管乐团家长会了解相关情况"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.joinParentMeeting ? "是" : "否" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="240px"
          >
            <template slot-scope="scope">
              <overflow-text width="200px" :text="scope.row.remark" />
            </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>
    </div>

    <!-- 预报名链接 -->
    <qr-code
      v-model="codeStatus"
      title="启蒙课问卷"
      :codeUrl="codeUrl"
      @preLook="preLook"
      :ispreLook="true"
    />
    <!-- 预报名详情 -->
    <qr-code
      v-model="codedetailStatus"
      title="预报名详情"
      :codeUrl="detailUrl"
    />
    <!-- 发送家长会通知 -->
    <el-dialog
      title="发送家长会通知"
      :visible.sync="extendPaymentStatus"
      @close="onClose('extendForm')"
      width="400px"
    >
      <el-form
        label-width="110px"
        :model="extendForm"
        ref="extendForm"
        :rules="extendRule"
      >
        <el-form-item label="家长会时间" prop="meetingDate">
          <el-date-picker
            style="width: 100% !important"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model.trim="extendForm.meetingDate"
            type="datetime"
            :picker-options="applyDates"
            placeholder="请选择家长会时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="家长会地址" prop="address">
          <el-input
            v-model="extendForm.address"
            placeholder="请输入家长会地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="短信内容" >
          <p class="msgP" v-html="sysMsgStr"></p> </el-form-item>
        <p style="color:red">确认后该短信将发送给已填写启蒙课问卷学员</p>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">取 消</el-button>
        <el-button type="primary" @click="onExtendPayment('extendForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="启蒙课统计"
      width="600px"
      destroy-on-close
      :close-on-click-modal="false"
      :visible.sync="subjectVisible"
    >
      <intention-model v-if="subjectVisible" @close="subjectVisible = false" />
    </el-dialog>
    <el-dialog
      title="预览"
      width="500px"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="preLookVisible"
    >
      <iframe
        width="100%"
        height="600px"
        :src="codeUrl + '&look=true'"
        frameborder="0"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import qrCode from "@/components/QrCode/index";
import { permission } from "@/utils/directivePage";
import { vaildStudentUrl, vaildTeachingUrl } from "@/utils/validate";
import { Export } from "@/utils/downLoadFile";
import visitModel from "@/views/withdrawal-application/modals/visit";
import intentionModel from "./modals/initiationStatistics";
import { getMusicGroupGradeList } from "@/api/buildTeam";
import {
  getSysMessageConfig,
  finishPreApply,
  sendEnlighParentMeetingNotice,
  getMusicEnlighList,
} from "./api";
export default {
  name: "forecastName",
  components: { pagination, qrCode, visitModel, intentionModel },
  props: ["isedit"],
  data() {
    const query = this.$route.query;
    return {
      codedetailStatus: false,
      teamName: query.name || null,
      codeStatus: false,
      musicGroupId: query.id,
      codeUrl:
        vaildStudentUrl() +
        "/project/forecastName/initiation.html?musicGroupId=" +
        query.id,
      detailUrl:
        vaildTeachingUrl() + "/#/preApplySubject?musicGroupId=" + query.id,
      searchForm: {
        search: null,
        currentGradeNum: null,
        subjectId: null,
        teacherRecommandSubjectId: null,
        selectionSubjectId: null,
        musicalInstrumentsLearning: null,
      },
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      visitVisible: false,
      subjectVisible: false,
      visitDetail: null,
      extendPaymentStatus: false,
      extendForm: {
        meetingDate: null,
        address: null,
      },
      extendRule: {
        meetingDate: [
          { required: true, message: "请选择家长会时间", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入家长会地址", trigger: "blur" },
        ],
      },
      gradeList: [],
      preLookVisible: false,
      sysMsg: "",
      subjectList:[]
    };
  },
 async mounted() {
  await  this.$store.dispatch("setSubjects");
this.subjectList = [...this.selects.subjects]
this.subjectList.push({id:-1,name:'无'})
    this.init();
  },
  methods: {
    async init() {
      this.teamid = this.$route.query.id;
      getMusicGroupGradeList({ musicGroupId: this.teamid }).then((res) => {
        let result = res.data;
        this.gradeListObj = res.data;
        if (res.code == 200 && result) {
          this.gradeList = [];
          for (let i in result) {
            this.gradeList.push({
              value: i,
              label: result[i],
            });
          }
        }
      });
      // 获取短信推送模板
      const rus = await getSysMessageConfig({
        type: "STUDENT_SMS_IM_MUSIC_GROUP_PARENT_MEETING_NOTICE",
      });
      this.sysMsg = rus.data.content;
      this.getList();
    },
    permission,
    onReSet() {
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/teamList" });
    },
    downloadFile() {
      let params = this.searchForm;
      Export(
        this,
        {
          url: "/api-web/export/musicEnlightenmentQuestionnaires",
          params: {
            ...params,
            musicGroupId: this.musicGroupId,
          },
          fileName: "启蒙课问卷.xls",
        },
        "是否确认导出报表？"
      );
    },
    async getList() {
      try {
        const result = await getMusicEnlighList({
          ...this.searchForm,
          musicGroupId: this.musicGroupId,
          page: this.pageInfo.page,
          rows: this.pageInfo.limit,
        });
        this.tableList = result.data.rows;
        this.pageInfo.total = result.data.total;
      } catch (error) {}
    },
    async onPaymentGroup(type) {
      try {
        this.$confirm("您是否确定开启乐团缴费?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const result = await finishPreApply({
            isCheckStudentNum: type == 1 ? false : true,
            musicGroupId: this.musicGroupId,
          });
          this.$store.dispatch("delVisitedViews", this.$route);
          this.$router.push({
            path: "/teamList",
          });
        });
      } catch (error) {}
    },
    addVisited(rows) {
      // 新增回访
      this.visitVisible = true;
      this.visitDetail = {
        musicGroupId: rows.musicGroupId,
        overview: "",
        purpose: "",
        userId: rows.userId,
        type: "",
        visitTime: "",
        visitType: "",
        feedback: "",
        realName: rows.userName,
      };
      // this.visitDetail = rows
    },
    onClose(formName) {
      this.$refs[formName].resetFields();
    },
    onExtendPayment(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            await this.$confirm("您是否确定发送家长会通知?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            });
            await sendEnlighParentMeetingNotice({
              ...this.extendForm,
              musicGroupId: this.musicGroupId,
            });
            this.$message.success("家长会通知已发送");
            this.extendPaymentStatus = false;
          } catch (error) {}
        }
      });
    },
    applyDates() {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    preLook(val) {
      this.preLookVisible = true;
    },
  },
  computed: {
    sysMsgStr() {
      let strArr = this.sysMsg.split("{}");
      if (strArr.length == 3) {
        return `${strArr[0]}<span style="color:red">"${
          this.extendForm.meetingDate ? this.extendForm.meetingDate : "--"
        }"</span>${strArr[1]}<span style="color:red">"${this.extendForm.address ? this.extendForm.address:"--"}"</span>
        ${strArr[2]}`;
      } else {
        return ``;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.msgP {
  line-height: 24px;
  margin-top: 10px;
}
</style>