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" v-if="isedit">
            <auth :auths="['forecastName/forecastLink']">
              <el-button type="primary" @click="codeStatus = true">预报名链接</el-button>
            </auth>
            <!-- <auth>
              <el-button type="primary" @click="extendPaymentStatus = true">预报名时间延长</el-button>
            </auth> -->
            <auth :auths="['musicGroup/sendParentMeetingNotice']">
              <el-button type="primary" @click="extendPaymentStatus = true">家长会通知</el-button>
            </auth>
            <auth :auths="['musicGroup/finishPreApply']">
              <el-button type="primary" @click="onPaymentGroup">乐团缴费</el-button>
            </auth>
            <auth :auths="['musicGroup/finishPreApply/item']">
              <el-button type="primary" @click="onPaymentGroup(1)">特色乐团缴费</el-button>
            </auth>
        </div>

        <div class="m-core">
            <save-form
                :inline="true"
                @reset="onReSet"
                @submit="search"
                :model="searchForm"
                ref="searchForm"
            >
                <el-form-item>
                    <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>
                    <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>
                <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"
                        prop="kitPurchaseMethod"
                        label="乐器准备方式"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.kitPurchaseMethod == 'GROUP' ? '参与团购' : '自行准备' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="courseScheduleId"
                        width="150"
                        label="操作"
                         v-if="isedit"
                    >
                        <template slot-scope="scope">
                            <auth :auths="['visit/add']" :router="['/business/forecastName']">
                                <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" />
        <!-- 发送家长会通知 -->
        <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>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import qrCode from '@/components/QrCode/index';
import { permission } from "@/utils/directivePage";
import { vaildStudentUrl } from '@/utils/validate'
import visitModel from '@/views/withdrawal-application/modals/visit'
import { queryPreApplyList, finishPreApply, sendParentMeetingNotice } from './api'
export default {
    name: 'forecastName',
    components: { pagination, qrCode, visitModel },
    props:['isedit'],
    data() {
        const query = this.$route.query
        return {
            teamName: query.name || null,
            codeStatus: false,
            musicGroupId: query.id,
            codeUrl: vaildStudentUrl() + '/project/forecastName/index.html?musicGroupId=' + query.id,
            searchForm: {
                name: null,
                subjectId: null,
                isAllowAdjust: null,
            },
            tableList: [],
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 40, 50], // 选择限制显示条数
            },
            visitVisible: false,
            visitDetail: null,
            extendPaymentStatus: false,
            extendForm: {
                meetingDate: null,
                address: null,
            },
            extendRule: {
                meetingDate: [
                    { required: true, message: "请选择家长会时间", trigger: "change" },
                ],
                address: [{ required: true, message: "请输入家长会地址", trigger: 'blur' }]
            },
        }
    },
    async mounted() {
        await 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: "/business/teamDetail" });
        },
        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: '/business/teamDetail'
                    })
                })

            } 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>