dy-admin-manager/src/views/teamBuild/forecastName.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">
      <auth
        :auths="['musicGroup/sendParentMeetingNotice']"
        v-if="isedit || $route.query.team_status == 'DRAFT'"
      >
        <el-button type="primary" @click="extendPaymentStatus = true"
          >预报名家长会通知</el-button
        >
      </auth>
      <auth :auths="['forecastName/forecastLink']" v-if="isedit">
        <el-button type="primary" @click="codeStatus = true"
          >预报名问卷</el-button
        >
      </auth>
      <auth :auths="['studentRegistration/preRegisterExport']">
        <el-button type="primary" @click="downloadFile"
          >预报名信息导出</el-button
        >
      </auth>
      <auth :auths="['studentRegistration/queryPreApplySubjectList']">
        <el-button type="primary" @click="subjectVisible = true"
          >意向统计</el-button
        >
      </auth>

      <auth :auths="['musicGroup/finishPreApply']">
        <el-button type="primary" @click="onPaymentGroup" v-if="isedit"
          >乐团缴费</el-button
        >
      </auth>
      <auth :auths="['musicGroup/finishPreApply/item']" v-if="isedit">
        <el-button type="primary" @click="onPaymentGroup(1)"
          >特色乐团缴费</el-button
        >
      </auth>
      <el-button type="primary" @click="codedetailStatus = true" v-if="isedit"
        >预报名H5统计</el-button
      >
    </div>

    <div class="m-core">
      <save-form
        :inline="true"
        @reset="onReSet"
        @submit="search"
        :model="searchForm"
        save-key="/forecastName"
        ref="searchForm"
      >
        <el-form-item prop="name">
          <el-input
            v-model.trim="searchForm.name"
            clearable
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="学生编号/姓名/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isAllowAdjust">
          <el-select
            v-model.trim="searchForm.isAllowAdjust"
            clearable
            placeholder="是否允许调剂"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="teacherRecommandSubjectId">
          <el-select
            clearable
            v-model="searchForm.teacherRecommandSubjectId"
            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="selectionSubjectId">
          <el-select
            clearable
            v-model="searchForm.selectionSubjectId"
            placeholder="选报声部"
          >
            <el-option
              v-for="item in selects.subjects"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="subjectId">
          <el-select
            clearable
            v-model="searchForm.subjectId"
            placeholder="所选专业"
          >
            <el-option
              v-for="item in selects.subjects"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- kitPurchaseMethod -->
        <el-form-item prop="kitPurchaseMethod">
          <el-select
            v-model.trim="searchForm.kitPurchaseMethod"
            clearable
            placeholder="乐器准备方式"
          >
            <el-option label="团购" value="GROUP"></el-option>
            <el-option label="自备" value="OWNED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cloudTeacherMethod">
          <el-select
            v-model.trim="searchForm.cloudTeacherMethod"
            clearable
            placeholder="系统意向"
          >
            <el-option label="团购" value="GROUP"></el-option>
            <el-option label="自备" value="OWNED"></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">
              {{
                scope.row.teacherRecommandSubjectId
                  ? scope.row.teacherRecommandSubjectName
                  : null
              }}
              {{
                !scope.row.teacherRecommandSubjectName &&
                scope.row.teacherRecommandSubjectId == 999
                  ? "听从老师安排"
                  : null
              }}
              {{
                scope.row.teacherRecommandSubjectId == -1 &&
                !scope.row.teacherRecommandSubjectName
                  ? "无"
                  : null
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="selectionSubjectId"
            label="选报声部"
          >
            <template slot-scope="scope">
              {{
                scope.row.selectionSubjectId
                  ? scope.row.selectionSubjectName
                  : null
              }}
              {{
                !scope.row.selectionSubjectName &&
                scope.row.selectionSubjectId == 999
                  ? "听从老师安排"
                  : null
              }}
              {{
                !scope.row.selectionSubjectId && !scope.row.selectionSubjectName
                  ? "无"
                  : null
              }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="subjectFirstName"
            label="选报声部1"
          >
            <template slot-scope="scope">
              {{
                scope.row.subjectFirstName ? scope.row.subjectFirstName : null
              }}
              {{
                !scope.row.subjectFirstName && scope.row.subjectFirst == 999
                  ? "听从老师安排"
                  : null
              }}
              {{
                !scope.row.subjectFirstName && !scope.row.subjectFirst
                  ? "无"
                  : null
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectSecondName"
            label="选报声部2"
          >
            <template slot-scope="scope">
              {{
                scope.row.subjectSecondName ? scope.row.subjectSecondName : null
              }}
              {{
                !scope.row.subjectSecondName && scope.row.subjectSecond == 999
                  ? "听从老师安排"
                  : null
              }}
              {{
                !scope.row.subjectSecondName && !scope.row.subjectSecond
                  ? "无"
                  : null
              }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="isAllowAdjust"
            label="是否服从调剂"
          >
            <template slot-scope="scope">
              {{ scope.row.isAllowAdjust ? "是" : "否" }}
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="乐器准备方式">
            <template slot-scope="scope">
              {{ scope.row.kitPurchaseMethod | instrumentType }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="系统意向">
            <template slot-scope="scope">
              {{ scope.row.cloudTeacherMethod | instrumentType }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="courseScheduleId"
            width="150"
            label="操作"
            v-if="isedit"
          >
            <!-- :router="['/business/forecastName']" -->
            <template slot-scope="scope">
              <auth :auths="['visit/add/teamForecastName']">
                <el-button type="text" @click="addVisited(scope.row)"
                  >新增回访</el-button
                >
              </auth>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          save-key="/forecastName"
          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="预报名H5统计"
      :codeUrl="detailUrl"
    />
    <!-- 发送家长会通知 -->
    <el-dialog
      title="预报名家长会通知"
      :visible.sync="extendPaymentStatus"
      @close="onClose('extendForm')"
      width="400px"
    >
      <parentsMeeting
        v-if="extendPaymentStatus"
        ref="extendForm"
        :extendForm="extendForm"
        :sysMsgStr="sysMsgStr"
        :msg="'确认后该短信将发送给已填写预报名问卷的学员'"
      />
      <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="760px"
      v-if="visitVisible"
      :close-on-click-modal="false"
      :visible.sync="visitVisible"
    >
      <visit-model
        v-if="visitVisible"
        @close="visitVisible = false"
        :detail="visitDetail"
        @submited="getList"
      />
    </el-dialog>

    <!-- 回访记录 -->
    <el-dialog
      title="意向统计"
      width="600px"
      :close-on-click-modal="false"
      :visible.sync="subjectVisible"
      v-if="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 { getMusicGroupAddr } from "../teamDetail/api";
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/intention";
import parentsMeeting from "./modals/parentsMeeting";
import {
  queryPreApplyList,
  finishPreApply,
  sendParentMeetingNotice,
  getSysMessageConfig
} from "./api";
export default {
  name: "forecastName",
  components: {
    pagination,
    qrCode,
    visitModel,
    intentionModel,
    parentsMeeting
  },
  props: ["isedit"],
  data() {
    const query = this.$route.query;
    return {
      codedetailStatus: false,
      teamName: query.name || null,
      codeStatus: false,
      musicGroupId: query.id,
      codeUrl:
        vaildStudentUrl() +
        "/project/forecastName/index.html?musicGroupId=" +
        query.id,
      searchForm: {
        name: null,
        subjectId: null,
        teacherRecommandSubjectId: null,
        selectionSubjectId: null,
        isAllowAdjust: null,
        cloudTeacherMethod: null,
        kitPurchaseMethod: 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" }
        ]
      },
      preLookVisible: false,
      sysMsg: "",
      subjectList: [],
      tenantId: null
    };
  },
  async mounted() {
    this.tenantId = this.$helpers.tenantId;
    await this.$store.dispatch("setSubjects");
    // 获取短信推送模板
    this.subjectList = [...this.selects.subjects];
    this.subjectList.push({ id: -1, name: "无" });
    const rus = await getSysMessageConfig({
      type: "STUDENT_SMS_IM_MUSIC_GROUP_PARENT_MEETING_NOTICE"
    });
    this.sysMsg = rus.data?.content || "";
    this.getList();
  },
  methods: {
    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/studentRegistration/preRegisterExport",
          params: {
            ...params,
            musicGroupId: this.musicGroupId
          },
          fileName: "预报名列表.xls"
        },
        "是否确认导出报表？"
      );
    },
    async getList() {
      try {
        const result = await queryPreApplyList({
          ...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 {
        const { data } = await getMusicGroupAddr({
          musicGroupId: this.musicGroupId,
          page: 1,
          rows: 10
        });
        console.log(data, "data");
        if (Array.isArray(data.rows) && data.rows.length > 0) {
          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"
            });
          });
        } else {
          this.$confirm("请先设置开团商品收货地址?", "提示", {
            confirmButtonText: "去设置",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            this.$listeners.changeActive("10");
          });
        }
      } 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.extendForm = {
        meetingDate: null,
        address: null
      };
      //  this.$refs[formName].$refs[formName].resetFields();
    },
    onExtendPayment(formName) {
      // console.log(formName)
      // console.log(this.$refs)
      // return
      this.$refs[formName].$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await this.$confirm("您是否确定发送家长会通知?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            });
            await sendParentMeetingNotice({
              ...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 ``;
      }
    },
    detailUrl() {
      return (
        vaildTeachingUrl() +
        "/#/preApplySubject?musicGroupId=" +
        this.$route.query.id +
        "&tenantId=" +
        this.tenantId
      );
    }
  }
};
</script>

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