新增学员缴费周期修改

src/views/teamDetail/components/modals/create-user-pay.vue

@@ -73,13 +73,42 @@
     />
     <el-alert title="缴费设置" :closable="false" class="alert" type="info">
     </el-alert>
-    <paymentCycle
+    <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"
+          :form="item"
+          :isUserType="true"
+          :isCommon="false"
+          :isDisabled="true"
+        />
+      </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>
+    <!-- <paymentCycle
       ref="cycle"
       :isUserType="true"
       :form.sync="cycle"
       :isCommon="false"
       :isDisabled="true"
-    />
+    /> -->
     <div slot="footer" class="dialog-footer">
       <el-button @click="$listeners.close">取 消</el-button>
       <el-button type="primary" @click="submit">确认</el-button>
@@ -111,6 +140,8 @@ export default {
       },
       cycle: {},
       eclass: [],
+      collapse: [0],
+      cycles: [{}],
       organizationCourseUnitPriceSettingsByType: {},
     }
   },
@@ -153,10 +184,15 @@ export default {
       for (const item of this.eclass) {
         money += item.courseCurrentPrice;
       }
-      if (!money) {
-        this.$set(this.cycle, "paymentAmount", undefined);
-      } else {
-        this.$set(this.cycle, "paymentAmount", money);
+      if (this.cycles.length) {
+        const floorMoney = Math.floor(money / this.cycles.length)
+        const remainder = money % this.cycles.length
+        this.cycles = this.cycles.map((item, index) => {
+          return {
+            ...item,
+            paymentAmount: (index === 0 ? floorMoney + remainder : floorMoney)
+          }
+        })
       }
 
       return money;
@@ -205,10 +241,24 @@ export default {
     },
     getForms() {
       const { $refs: refs } = this;
-      return [refs.eclass, refs.cycle]
+      return [refs.eclass, refs.cycle, ...refs.cycles]
         .filter((item) => !!item)
         .map((item) => item.$refs.form);
     },
+    addCycle () {
+      this.cycles.push({});
+      this.collapse.push(this.collapse.length);
+      this.syncAllMoney()
+    },
+    removeCycle (index) {
+      this.cycles[index] = null;
+      this.cycles = this.cycles.filter((item) => !!item);
+      this.collapse.pop();
+      this.syncAllMoney()
+    },
+    collapseChange (val) {
+      this.collapse = val;
+    },
     async submit() {
       const forms = this.getForms();
       const valided = [];
@@ -220,19 +270,23 @@ export default {
         });
       }
       if (forms.length === valided.length) {
-        const { paymentDate, paymentValid, ...rest} = this.cycle
         const data = {
           attribute1: this.ids,
-          ...rest,
+          cycles: [...this.cycles.map(item => {
+            const { paymentDate, paymentValid, ...other } = item
+            return {
+              ...other,
+              ...getTimes(paymentDate, ["startPaymentDate", "deadlinePaymentDate"]),
+              ...getTimes(paymentValid, [
+                "paymentValidStartDate",
+                "paymentValidEndDate",
+              ]),
+            }
+          })],
           musicGroupId: this.musicGroupId,
           paymentType: 'ADD_STUDENT',
           studentIds: this.createdUserId,
           musicGroupPaymentCalenderCourseSettingsList: this.eclass,
-          ...getTimes(paymentDate, ["startPaymentDate", "deadlinePaymentDate"]),
-          ...getTimes(paymentValid, [
-            "paymentValidStartDate",
-            "paymentValidEndDate",
-          ]),
         }
         try {
           await musicGroupPaymentCalenderAdd(data)
@@ -256,4 +310,17 @@ export default {
 .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;
+}
 </style>