添加预报名

src/router/notKeepAliveList.js

@@ -4,7 +4,7 @@ export default [
   '/orderList/orderAudit', // 订单管理 订单审核
   '/business/teamCourseList', // 课表列表
   '/business/auditList', // 费用审核列表
-  '/teamBuild/forecastName', // 预报名
+  '/business/forecastName', // 预报名
   '/orderList/financeManager', // 财务管理
   '/vipClassSet/vipParameterManager', // VIP参数设置
   '/vipClassSet/branchActive', // VIP分部活动列表

src/views/teamBuild/forecastName.vue

@@ -1,46 +1,323 @@
 <template>
-    <div class="forecastName">
+    <div class="forecastName m-container">
         <h2>
           <el-page-header @back="onCancel" :content="teamName"></el-page-header>
         </h2>
 
         <p style="margin-bottom: 15px; font-size: 18px; font-weight: 400">
-          缴费截止时间：{{ new Date() | formatTimer }}
+          缴费截止时间：{{ '2020-12-12' | formatTimer }}
         </p>
 
         <div class="btnList">
-            <el-button type="primary">预报名链接</el-button>
-            <el-button type="primary">预报名时间延长</el-button>
+            <el-button type="primary" @click="codeStatus = true">预报名链接</el-button>
+            <el-button type="primary" @click="extendPaymentStatus = true">预报名时间延长</el-button>
             <el-button type="primary">开启报名</el-button>
-            <!-- <div
-                class="newBand"
-                @click="payStart"
-                v-permission="'musicGroup/openPay'"
-                v-show="status == 'APPLY'"
+        </div>
+
+        <div class="m-core">
+            <save-form
+                :inline="true"
+                @reset="onReSet"
+                @submit="search"
+                :model="searchForm"
+                ref="searchForm"
             >
-                开始缴费
-            </div> -->
+                <el-form-item>
+                    <el-input
+                        v-model.trim="searchForm.search"
+                        clearable
+                        @keyup.enter.native="search"
+                        placeholder="学生编号/姓名/手机号"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item prop="organId">
+                    <el-select
+                        class="multiple"
+                        v-model.trim="searchForm.organId"
+                        filterable
+                        clearable
+                        placeholder="学员状态"
+                    >
+                        <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>
+                    <el-select
+                        placeholder="请选择班级"
+                        v-model="searchForm.teacherId"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                        v-for="(item, index) in selects.teachers"
+                        :label="item.realName"
+                        :value="item.id"
+                        :key="index"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select
+                        placeholder="所选专业"
+                        v-model="searchForm.statusEnum"
+                        clearable
+                    >
+                        <el-option label="待处理" value="PENDING"></el-option>
+                        <el-option label="已完成" value="DONE"></el-option>
+                        <el-option label="已同意" value="AGREED"></el-option>
+                        <el-option label="已拒绝" value="DENIED"></el-option>
+                        <el-option label="已撤回" value="WITHDRAWN"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select
+                        placeholder="报名缴费"
+                        v-model="searchForm.statusEnum"
+                        clearable
+                    >
+                        <el-option label="待处理" value="PENDING"></el-option>
+                        <el-option label="已完成" value="DONE"></el-option>
+                        <el-option label="已同意" value="AGREED"></el-option>
+                        <el-option label="已拒绝" value="DENIED"></el-option>
+                        <el-option label="已撤回" value="WITHDRAWN"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select
+                        placeholder="是否激活"
+                        v-model="searchForm.statusEnum"
+                        clearable
+                    >
+                        <el-option label="待处理" value="PENDING"></el-option>
+                        <el-option label="已完成" value="DONE"></el-option>
+                        <el-option label="已同意" value="AGREED"></el-option>
+                        <el-option label="已拒绝" value="DENIED"></el-option>
+                        <el-option label="已撤回" value="WITHDRAWN"></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="organName"
+                        label="学员编号"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="teacherId"
+                        label="学员姓名"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="性别"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="联系电话"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="年级班级"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="乐团意向"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="选报声部1"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="选报声部2"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="是否服从调剂"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="realName"
+                        label="乐器准备方式"
+                    ></el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="courseScheduleId"
+                        width="150"
+                        label="操作"
+                    >
+                        <template slot-scope="scope">
+                            <el-button
+                                type="text"
+                                @click="addVisited(scope.row)"
+                                v-if="permission('teacherSalaryComplaints/complaintsDispose')"
+                                >新增回访</el-button>
+                        </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"
+            destroy-on-close
+            width="400px"
+        >
+            <el-form label-width="120px" :model="extendForm" ref="extendForm" :rules="extendRule">
+                <el-form-item label="延长预报名时间" prop="expireDate">
+                    <el-date-picker
+                        v-model.trim="extendForm.expireDate"
+                        value-format="yyyy-MM-dd"
+                        type="date"
+                        :picker-options="applyDates"
+                        placeholder="选择日期"
+                    >
+                    </el-date-picker>
+                </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" :visitDetail="visitDetail" />
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import pagination from "@/components/Pagination/index";
+import qrCode from '@/components/QrCode/index';
 import { permission } from "@/utils/directivePage";
+import visitModel from './modals/visit'
 export default {
     name: 'forecastName',
+    components: { pagination, qrCode },
     data() {
         const query = this.$route.query
         return {
-            teamName: query.name || null
+            teamName: query.name || null,
+            codeStatus: false,
+            codeUrl: null,
+            searchForm: {
+                search: null,
+                salarySettlementMonth: null,
+                statusEnum: null,
+                teacherId: null,
+                organId: null,
+            },
+            tableList: [],
+            pageInfo: {
+                // 分页规则
+                limit: 10, // 限制显示条数
+                page: 1, // 当前页
+                total: 0, // 总条数
+                page_size: [10, 20, 40, 50], // 选择限制显示条数
+            },
+            visitVisible: false,
+            visitDetail: null,
+            extendPaymentStatus: false,
+            extendForm: {
+                expireDate: null,
+            },
+            extendRule: {
+                expireDate: [
+                    { required: true, message: "请选择延长时间", trigger: "change" },
+                ],
+            },
         }
     },
+    mounted() {
+        this.codeUrl = 'http://www.baidu.com'
+    },
     methods: {
-        permission(str) {
-            return permission(str);
+        permission,
+        onReSet() {
+            this.$refs['searchForm'].resetFields()
+            this.search()
+        },
+        search() {
+            this.pageInfo.page = 1
+            this.getList()
         },
         onCancel() {
             this.$router.push({ path: "/business/teamDetail" });
         },
+        getList() {
+
+        },
+        addVisited(rows) {
+            // 新增回访
+            this.visitVisible = true
+            this.visitDetail = rows
+        },
+        onExtendPayment(formName) {
+            this.$refs[formName].validate(valid => {
+                if(valid) {
+
+                }
+            })
+        },
+        applyDates() {
+            let self = this;
+            return {
+                firstDayOfWeek: 1,
+                disabledDate(time) {
+                if (self.paymentExpireDate) {
+                    return (
+                    time.getTime() >
+                    new Date(self.paymentExpireDate.replace(/-/g, "/")).getTime()
+                    );
+                } else {
+                    return false;
+                }
+                },
+            };
+        },
     }
 }
 </script>

src/views/teamBuild/modals/visit.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <el-form
+            :model="visitForm"
+            label-width="120px"
+            label-position="right"
+            ref="visitForm"
+            :rules="visitRules"
+        >
+            <el-form-item label="学生姓名">
+                <p>{{ visitForm.studentName }}</p>
+            </el-form-item>
+            <el-form-item label="回访类型" prop="visitType">
+                <el-cascader
+                    expand-trigger="hover"
+                    clearable
+                    placeholder="请选择回访类型"
+                    :options="visitChose"
+                    @change="handleChange"
+                    style="width: 220px !important"
+                    v-model="visitForm.visitType"
+                >
+                </el-cascader>
+            </el-form-item>
+            <el-form-item label="回访日期" prop="visitTime">
+                <el-date-picker
+                    v-model.trim="visitForm.visitTime"
+                    align="right"
+                    style="width: 220px !important"
+                    type="date"
+                    placeholder="选择日期"
+                    :picker-options="pickerOptions"
+                    value-format="yyyy-MM-dd"
+                ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="学员情况" prop="overview">
+                <el-input
+                    type="textarea"
+                    v-model="visitForm.overview"
+                    style="width: 80% !important"
+                    :rows="3"
+                    maxlength="50"
+                    show-word-limit
+                ></el-input>
+            </el-form-item>
+            <el-form-item label="家长反馈" prop="feedback">
+                <el-input
+                    type="textarea"
+                    v-model="visitForm.feedback"
+                    style="width: 80% !important"
+                    :rows="3"
+                    maxlength="50"
+                    show-word-limit
+                ></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visitVisiable = false">取 消</el-button>
+            <el-button type="primary" @click="submitAddVisit">确 定</el-button>
+        </span>
+    </div>
+</template>
+
+<script>
+import { visitChose } from "@/utils/searchArray";
+export default {
+    name: 'visit',
+    data() {
+        return {
+            visitForm: {
+                musicGroupId: "",
+                overview: "",
+                purpose: "",
+                studentId: "",
+                type: "",
+                visitTime: "",
+                visitType: "",
+                feedback: "",
+                studentName: "",
+            },
+            visitChose,
+            visitRules: {
+                overview: [{ required: true, message: "请输入学生近况" }],
+                feedback: [{ required: true, message: "请输入家长反馈" }],
+                visitTime: [{ required: true, message: "请输入回访时间" }],
+                visitType: [{ required: true, message: "请选择回访类型" }],
+            },
+        }
+    },
+    async mounted() {
+        this.pickerOptions = this.beginDate(new Date());
+    },
+    methods: {
+        handleChange(val) {
+            this.visitForm.type = val[0];
+            this.visitForm.purpose = val[1];
+        },
+        beginDate(date) {
+            let self = this;
+            return {
+                firstDayOfWeek: 1,
+                disabledDate(time) {
+                    return time.getTime() >= date.getTime(); //开始时间不选时，结束时间最大值小于等于当天
+                },
+            };
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+    text-align: right;
+}
+</style>