缴费与班级调整

src/constant/index.js

@@ -49,3 +49,8 @@ export const saleType = {
   SCHOOL_BUY: '学校采购',
   OTHER: '其他',
 }
+
+export const genderType = {
+  1: '男',
+  0: '女',
+}

src/views/resetTeaming/index.vue

@@ -67,7 +67,7 @@ export default {
   name: 'resetTeaming',
   data () {
     return {
-      activeIndex: '3',
+      activeIndex: '1',
       teamid: '',
       // permissionStatus: {
       //   teamBaseInfo: true,

src/views/resetTeaming/modals/extra-class.vue

@@ -79,7 +79,7 @@
       <el-table-column
         width="60">
         <template slot-scope="scope">
-          <i v-if="scope.$index !== 0" @click="$listeners.remove(scope.$index)" class="el-icon-circle-close"></i>
+          <i v-if="form.length > 1" @click="$listeners.remove(scope.$index)" class="el-icon-circle-close"></i>
         </template>
       </el-table-column>
     </el-table>

src/views/resetTeaming/modals/payment-cycle.vue

@@ -2,6 +2,7 @@
   <el-form
     label-width="160px"
     ref="form"
+    :class="className"
     :model="form"
     label-suffix=": "
   >
@@ -51,7 +52,7 @@
 </template>
 <script>
 export default {
-  props: ['form'],
+  props: ['form', 'className'],
   data() {
     return {
 

src/views/resetTeaming/modals/user-pay-form.vue

@@ -43,7 +43,7 @@
             <template slot="title">
               <div class="collapse-title">
                 <span>缴费周期 {{index + 1}}</span>
-                <i v-if="index !== 0" class="el-icon-circle-close" @click.stop="removeCycle(index)"></i>
+                <i v-if="cycles.length > 1" class="el-icon-circle-close" @click.stop="removeCycle(index)"></i>
               </div>
             </template>
             <paymentCycle

src/views/teamDetail/components/modals/select-student.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-form :model="form" label-suffix=": " inline>
+    <el-row>
+      <el-col :span="10">
+        <el-form-item
+          label="班级名称"
+          :rules="[{required: true, message: '请输入班级名称', trigger: 'blur'}]"
+        >
+          <el-input style="width: 100%;" placeholder="请输入班级名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10" :offset="4">
+        <el-form-item label="声部" prop="sound">
+          <el-select style="width: 100%;" clearable filterable placeholder="请选择声部">
+            <el-option
+              v-for="(item, index) in soundList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-transfer
+      filterable
+      :titles="['所有学员', '已选学员']"
+      filter-placeholder="请输入学生姓名"
+      :filter-method="filterStudent"
+      v-model="value"
+      :render-content="renderFunc"
+      :data="data"
+    >
+      <template #left-footer>
+        <div class="footer line">
+          <span>姓名</span>
+          <span>性别</span>
+          <span>专业</span>
+        </div>
+      </template>
+      <template #right-footer>
+        <div class="footer line">
+          <span>姓名</span>
+          <span>性别</span>
+          <span>专业</span>
+        </div>
+      </template>
+    </el-transfer>
+  </el-form>
+</template>
+<script>
+import { genderType } from "@/constant";
+export default {
+  props: ["studentList", "soundList"],
+  computed: {
+    data() {
+      return this.studentList.map((item) => ({
+        value: item.id,
+        key: item.id,
+        name: item.name,
+        subjectName: item.subjectName,
+        gender: genderType[item.gender],
+      }));
+    },
+  },
+  data() {
+    return {
+      form: {
+        selected: [],
+        name: '',
+      },
+    };
+  },
+  methods: {
+    filterStudent(query, item) {
+      return (
+        item.name.indexOf(query) > -1 ||
+        item.subjectName.indexOf(query) > -1 ||
+        item.gender.indexOf(query) > -1
+      );
+    },
+    renderFunc(h, option) {
+      return (
+        <div class="line">
+          <span>{option.name}</span>
+          <span>{option.gender}</span>
+          <span>{option.subjectName}</span>
+        </div>
+      );
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-transfer {
+  display: flex;
+  align-items: center;
+  .el-transfer__buttons {
+    display: flex;
+    width: 110px;
+    flex-direction: column;
+    > button {
+      &:last-child {
+        margin-left: 0;
+      }
+    }
+  }
+  .el-transfer-panel {
+    width: 300px;
+  }
+}
+.footer {
+  margin-left: 35px;
+  margin-right: auto;
+  height: 40px;
+  line-height: 40px;
+}
+/deep/ .line {
+  width: 220px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/views/teamDetail/components/modals/view-student-list.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <el-table
+      :data="list"
+      style
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      tooltip-effect="dark"
+    >
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="学员编号"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="学员姓名"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="性别"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="联系电话"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="专业"
+      ></el-table-column>
+    </el-table>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="$listeners.close">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list'],
+};
+</script>

src/views/teamDetail/components/resetClass.vue

@@ -91,14 +91,14 @@
             <template slot-scope="scope">
               <div>
                 <!-- v-if="scope.row.type !='MIX'" -->
-                <el-button type="text"
+                <!-- <el-button type="text"
                            @click="resetClass(scope.row)"
-                           v-if="scope.row.type != 'MUSIC_NETWORK'">学员调整</el-button>
+                           v-if="scope.row.type != 'MUSIC_NETWORK'">学员调整</el-button> -->
                 <el-button type="text"
                            @click="classAdjustment(scope.row)">班级调整</el-button>
                 <!--<el-button type="text"
                 @click="recourse(scope.row)">重新排课</el-button>-->
-                <el-popover placement="top"
+                <!-- <el-popover placement="top"
                             width="160"
                             :ref="`popover-${scope.$index}`">
                   <p>确定删除?</p>
@@ -109,14 +109,14 @@
                     <el-button type="primary"
                                size="mini"
                                @click="removeClass(scope)">确定</el-button>
-                  </div>
+                  </div> -->
                   <!-- v-if="scope.row.type !='MIX'" -->
-                  <el-button type="text"
+                  <!-- <el-button type="text"
                              v-if="scope.row.type != 'MUSIC_NETWORK'"
                              slot="reference">删除班级</el-button>
-                </el-popover>
+                </el-popover> -->
 
-                <el-popover placement="top"
+                <!-- <el-popover placement="top"
                             width="160"
                             :ref="scope.$index">
                   <p>是否清空课表?</p>
@@ -127,11 +127,11 @@
                     <el-button type="primary"
                                size="mini"
                                @click="clearCourse(scope)">确定</el-button>
-                  </div>
+                  </div> -->
                   <!-- v-if="scope.row.type !='MIX'" -->
-                  <el-button type="text"
+                  <!-- <el-button type="text"
                              slot="reference">清空课表</el-button>
-                </el-popover>
+                </el-popover> -->
               </div>
             </template>
           </el-table-column>
@@ -151,7 +151,18 @@
       </div>
     </div>
     <!-- 学员选择 -->
-    <el-dialog title="学员选择"
+    <el-dialog
+      title="学员选择"
+      width="750px"
+      :visible.sync="studentVisible"
+    >
+      <selectStudent
+        :studentList="studentList"
+        :soundList="soundList"
+        @close="studentVisible = false"
+      />
+    </el-dialog>
+    <!-- <el-dialog title="学员选择"
                width="700px"
                :visible.sync="studentVisible"
                :modal-append-to-body="false">
@@ -190,10 +201,10 @@
             </div>
           </div>
         </div>
-        <div class="right">
+        <div class="right"> -->
           <!--  multiple
           collapse-tags v-if="isSearch"  -->
-          <el-select v-model.trim="activeChioseSound"
+          <!-- <el-select v-model.trim="activeChioseSound"
                      style="width:180px"
                      @change="searchStudent"
                      clearable
@@ -203,14 +214,14 @@
                        :key="index"
                        :label="item.name"
                        :value="item.id"></el-option>
-          </el-select>
+          </el-select> -->
           <!-- <el-button v-if="isSearch"
                      type="danger"
                      style="margin-left:20px;"
           @click="searchStudent">搜索</el-button>-->
 
           <!--   列表开始  -->
-          <div class="tableList">
+          <!-- <div class="tableList">
             <el-table tooltip-effect="dark"
                       v-if="!isNewClass"
                       style="width: 100%; margin-top:10px;"
@@ -236,9 +247,9 @@
                                width="100"
                                align="center"
                                label="学员声部"></el-table-column>
-            </el-table>
+            </el-table> -->
             <!-- 临时调整table -->
-            <el-table tooltip-effect="dark"
+            <!-- <el-table tooltip-effect="dark"
                       v-if="isNewClass"
                       style="width: 100%; margin-top:10px;"
                       :data="studentList"
@@ -269,29 +280,42 @@
       </div>
       <div slot="footer"
            class="dialog-footer">
-        <el-button @click="studentVisible = false">取 消</el-button>
+        <el-button @click="studentVisible = false">取 消</el-button> -->
         <!-- 班级学员修改 -->
-        <el-button type="primary"
+        <!-- <el-button type="primary"
                    v-if="!isNewClass"
-                   @click="addSomeStudent">确 定</el-button>
+                   @click="addSomeStudent">确 定</el-button> -->
         <!-- 临时调整或者新建班级 -->
-        <el-button type="primary"
+        <!-- <el-button type="primary"
                    v-if="isNewClass"
                    @click="setInfoMsg">确 定</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
     <!-- 老师以及课程设置 -->
     <el-dialog title="班级设置"
                width="780px"
                :visible.sync="infoVisible"
                :modal-append-to-body="false">
+      <el-alert
+        type="warning"
+        style="margin-bottom: 20px;"
+        :closable="false">
+        <template #title>
+          <div class="alert-content">
+            <span>
+              该班级剩余可排课时长：<strong>1000分钟</strong>
+            </span>
+            <strong>学员列表&gt;&gt;</strong>
+          </div>
+        </template>
+      </el-alert>
       <el-form :inline="true"
                :model="teacherForm"
                ref="teacherForm"
                :rules="teacherRules"
                label-position="right"
                label-width="100px;">
-        <el-form-item label="调整方式"
+        <!-- <el-form-item label="调整方式"
                       v-if="!isNewClass"
                       prop="isAdd">
           <el-radio v-model.trim="teacherForm.isAdd"
@@ -299,7 +323,7 @@
           <el-radio v-model.trim="teacherForm.isAdd"
                     label="renew">重新排课</el-radio>
           <el-radio v-model.trim="teacherForm.isAdd"
-                    label="onlyUpdateTeacher">修改老师
+                    label="onlyUpdateTeacher">修改老师 -->
             <!-- <el-tooltip placement="top"
                         popper-class="mTooltip">
               <div slot="content">
@@ -308,11 +332,11 @@
               <i class="el-icon-question micon el-tooltip"
                  style="font-size: 18px; color: #F56C6C"></i>
             </el-tooltip> -->
-          </el-radio>
+          <!-- </el-radio>
 
-        </el-form-item>
+        </el-form-item> -->
 
-        <br />
+        <!-- <br /> -->
         <el-form-item label="主教老师"
                       prop="coreTeacher">
           <el-select v-model.trim="teacherForm.coreTeacher"
@@ -664,6 +688,15 @@
                    @click="newClassHight">确 定</el-button>
       </div>
     </el-dialog>
+    <el-dialog
+      title="学员列表"
+      :visible.sync="studentListModalVisible"
+    >
+      <viewStudentList
+        :list="studentListModal"
+        @close="studentListModalVisible = false"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -699,9 +732,15 @@ import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
 import dayjs from 'dayjs'
 import axios from "axios";
 import { classTimeList } from "@/utils/searchArray";
+import viewStudentList from './modals/view-student-list'
+import selectStudent from './modals/select-student'
 import qs from "qs";
 export default {
   name: "tresetClass",
+  components: {
+    viewStudentList,
+    selectStudent
+  },
   data () {
     return {
       pickerOptions: {
@@ -719,6 +758,8 @@ export default {
       tableList: [],
       maxClassList: [],
       activeSingleList: [],
+      studentListModal: [],
+      studentListModalVisible: false,
       resetCourseVisible: false, // 重新排课弹窗
       resetClassVisible: false, // 班级调整弹窗
       studentVisible: false,
@@ -1795,4 +1836,15 @@ export default {
     height: 40px !important;
   }
 }
+/deep/ .el-alert__content{
+  display: block;
+  width: 100%;
+}
+.alert-content{
+  display: flex;
+  justify-content: space-between;
+  >strong{
+    cursor: pointer;
+  }
+}
 </style>

src/views/teamDetail/components/studentList.vue

@@ -239,7 +239,7 @@
                   @pagination="getList" />
     </div>
     <el-dialog title="新增学员"
-               width="680px"
+               width="700px"
                class="studentInfo"
                :visible.sync="addStudentVisible">
       <el-form :model="maskForm"
@@ -248,7 +248,12 @@
                ref="maskForm"
                :rules="maskRules"
                :inline="true">
-        <el-divider>基本信息</el-divider>
+        <el-alert
+          title="基本信息"
+          :closable="false"
+          class="alert"
+          type="info">
+        </el-alert>
         <el-form-item label="联系电话"
                       prop="phone"
                       :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
@@ -344,13 +349,6 @@
                             placeholder="选择日期"></el-date-picker>
           </el-col>
         </el-form-item>
-        <el-form-item label="课程费用"
-                      prop="courseFee">
-          <el-input v-model.trim="maskForm.courseFee"
-                    type="number"
-                    @mousewheel.native.prevent
-                    placeholder="续费金额"></el-input>
-        </el-form-item>
         <br />
         <el-form-item label="单技班">
           <el-select v-model.trim="maskForm.signClass"
@@ -416,7 +414,7 @@
           </el-select>
         </el-form-item>-->
 
-        <el-divider>首缴订单信息</el-divider>
+        <!-- <el-divider>首缴订单信息</el-divider>
         <el-form-item label="课程费用"
                       prop="temporaryCourseFee">
           <el-input type="number"
@@ -488,7 +486,40 @@
                         placeholder="输入金额"></el-input>
             </el-form-item>
           </el-col>
-        </el-form-item>
+        </el-form-item> -->
+        <el-alert
+          title="缴费周期设置"
+          :closable="false"
+          class="alert"
+          type="info">
+        </el-alert>
+        <el-collapse :value="collapse" @change="collapseChange" >
+          <el-collapse-item
+            v-for="(item, index) in cycles"
+            :key="index"
+            :name="index"
+          >
+            <template slot="title">
+              <div class="collapse-title">
+                <span>缴费周期 {{index + 1}}</span>
+                <i v-if="cycles.length > 1" class="el-icon-circle-close" @click.stop="removeCycle(index)"></i>
+              </div>
+            </template>
+            <paymentCycle
+              ref="cycles"
+              className="cycleForm"
+              :form="item"
+            />
+          </el-collapse-item>
+        </el-collapse>
+        <el-button
+          icon="el-icon-circle-plus-outline"
+          plain
+          type="info"
+          size="small"
+          style="width: 100%;margin: 20px 0;"
+          @click="addCycle"
+        >新增缴费周期</el-button>
       </el-form>
       <div slot="footer"
            class="dialog-footer">
@@ -671,7 +702,7 @@
       </span>
     </el-dialog>
   </div>
-</template> 
+</template>
 <script>
 import {
   getTeamStudentList,
@@ -700,6 +731,7 @@ import { getToken } from "@/utils/auth";
 import { permission } from "@/utils/directivePage";
 import { addVisit } from "@/views/returnVisitManager/api.js"
 import cleanDeep from 'clean-deep'
+import paymentCycle from '../../resetTeaming/modals/payment-cycle'
 export default {
   name: "tstudentList",
   data () {
@@ -775,7 +807,7 @@ export default {
         muiscnetwork: "",
         startClass: "",
         id: "",
-        courseFee: null, // 声部费用
+        // courseFee: null, // 声部费用
         temporaryCourseFee: null, // 本次课程费用
         musicGoodsIdList: null, // 乐器商品编号
         kitGroupPurchaseType: "GROUP", // 乐器购买方式
@@ -808,7 +840,7 @@ export default {
         // price: [{ required: true, message: '请输入首缴金额' },],
         startClass: [{ required: true, message: "请选择年级" }],
         id: [{ required: true, message: "请输入证件号" }],
-        courseFee: [{ required: true, message: "请输入声部费用" }],
+        // courseFee: [{ required: true, message: "请输入声部费用" }],
         temporaryCourseFee: [{ required: true, message: "请输课程费用" }],
         musicGoodsIdList: [
           { required: true, message: "请选择乐器", trigger: "change" }
@@ -841,7 +873,8 @@ export default {
         feedback: '',
         studentName: ''
       },
-
+      cycles: [{}],
+      collapse: [0],
       visitChiose,
       visitRules: {
         overview: [{ required: true, message: "请输入学生近况" }],
@@ -853,7 +886,8 @@ export default {
     };
   },
   components: {
-    pagination
+    pagination,
+    paymentCycle
   },
   created () {
     // 判断是否带缓存参数
@@ -1056,6 +1090,18 @@ export default {
         }
       });
     },
+    addCycle() {
+      this.cycles.push({})
+      this.collapse.push(this.collapse.length)
+    },
+    removeCycle(index) {
+      this.cycles[index] = null
+      this.cycles = this.cycles.filter(item => !!item)
+      this.collapse.pop()
+    },
+    collapseChange(val) {
+      this.collapse = val
+    },
     gotoSignin () {
       this.$router.push({
         path: "/business/studentSignin",
@@ -1532,4 +1578,30 @@ export default {
 .export {
   background: #14928a;
 }
-</style>
+.alert{
+  margin-bottom: 10px;
+}
+.collapse-title{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  .el-icon-circle-close{
+    font-size: 16px;
+    margin-right: 10px;
+  }
+}
+/deep/ .el-collapse-item__wrap{
+  padding-top: 20px;
+}
+.cycleForm{
+  /deep/ .el-form-item{
+    display: flex;
+    width: 100%;
+    /deep/ .el-form-item__content{
+      margin-left: 0!important;
+      flex: 1;
+    }
+  }
+}
+</style>