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="['forecastName/forecastLink']" v-if="isedit">
        <el-button type="primary" @click="codeStatus = true"
          >预报名链接</el-button
        >
      </auth>

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

      <auth :auths="['musicGroup/sendParentMeetingNotice']" v-if="isedit">
        <el-button type="primary" @click="extendPaymentStatus = 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>
      <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>
    </div>

    <div class="m-core">
      <save-form
        :inline="true"
        @reset="onReSet"
        @submit="search"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item prop="name">
          <el-input
            v-model.trim="searchForm.name"
            clearable
            @keyup.enter.native="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="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="subjectFirstName"
            label="选报声部1"
          >
            <template slot-scope="scope">
              {{
                scope.row.subjectFirstName ? scope.row.subjectFirstName : null
              }}
              {{
                !scope.row.subjectFirstName && scope.row.subjectFirst == 999
                  ? "听从老师安排"
                  : 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
              }}
            </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
          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" />
    <!-- 预报名详情 -->
     <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>
      <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="visitVisible"
    >
      <visit-model
        v-if="visitVisible"
        @close="visitVisible = false"
        :detail="visitDetail"
        @submited="getList"
      />
    </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>
  </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/intention";
import {
  queryPreApplyList,
  finishPreApply,
  sendParentMeetingNotice,
} 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/index.html?musicGroupId=" +
        query.id,
      detailUrl:vaildTeachingUrl()+'/#/preApplySubject?musicGroupId='+query.id,
      searchForm: {
        name: null,
        subjectId: 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" },
        ],
      },
    };
  },
  mounted() {
    this.$store.dispatch("setSubjects");
    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 {
        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 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();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>
</style>