优化VIP课程参数

src/router/notKeepAliveList.js

@@ -4,4 +4,5 @@ export default [
   '/orderList/orderAudit',
   '/business/teamCourseList',
   // '/operateManager/HumanResources'
+  '/vipClassSet/vipParameterManager',
 ]

src/views/categroyManager/generalSettings/vipParameterManager.vue

@@ -4,26 +4,21 @@
       <div class="squrt"></div> VIP参数设置
     </h2>
     <div class="m-core">
-      <div class="listWrap">
-        <div class="left">
-          <div class="newBand" v-permission="'vipGroupCategory/add'"
-               @click="addGroupCategory">新建</div>
+      <el-row :gutter="20">
+        <el-col :span="12" :xs="24">
+          <el-button v-permission="'vipGroupCategory/add'" @click="addGroupCategory" type="primary" style="margin-bottom: 20px">新建</el-button>
           <el-table :data='leftList'
                     :header-cell-style="{background:'#EDEEF0',color:'#444'}">
             <el-table-column label="课程形式"
-                             prop="name"
-                             width="180">
+                             prop="name">
             </el-table-column>
-            <el-table-column label="班级人数"
-                             prop="studentNum"
-                             width="180">
+            <el-table-column label="班级人数(人)"
+                             prop="studentNum">
             </el-table-column>
-            <el-table-column label="课程课时"
-                             prop="singleClassMinutes"
-                             width="180">
+            <el-table-column label="课程课时(分钟)"
+                             prop="singleClassMinutes">
             </el-table-column>
-            <el-table-column label="操作"
-                             width="180">
+            <el-table-column label="操作">
               <template slot-scope="scope">
                 <div>
                   <el-button type="text" v-permission="'vipGroupCategory/update'"
@@ -44,27 +39,22 @@
                     <el-button type="text"
                                slot="reference">删除</el-button>
                   </el-popover>
-
                 </div>
               </template>
             </el-table-column>
           </el-table>
-        </div>
-        <div class="right">
-          <div class="newBand" v-permission="'vipGroupDefaultClassesCycle/add'"
-               @click="addVipTimer">新建</div>
+        </el-col>
+        <el-col :span="12" :xs="24">
+          <el-button v-permission="'vipGroupDefaultClassesCycle/add'" @click="addVipTimer" type="primary" style="margin-bottom: 20px">新建</el-button>
           <el-table :data='rightList'
                     :header-cell-style="{background:'#EDEEF0',color:'#444'}">
-            <el-table-column label="达到课时总数/次"
-                             prop="maxClassTimes"
-                             width="180">
+            <el-table-column label="达到课时总数(次)"
+                             prop="maxClassTimes">
             </el-table-column>
-            <el-table-column label="可排课时间段"
-                             prop="month"
-                             width="180">
+            <el-table-column label="可排课时间段(月)"
+                             prop="month">
             </el-table-column>
-            <el-table-column label="操作"
-                             width="180">
+            <el-table-column label="操作">
               <template slot-scope="scope">
                 <div>
                   <el-button type="text" v-permission="'vipGroupDefaultClassesCycle/update'"
@@ -90,38 +80,40 @@
               </template>
             </el-table-column>
           </el-table>
-        </div>
-      </div>
+        </el-col>
+      </el-row>
     </div>
 
     <!-- 课程类型新增弹窗 -->
-    <el-dialog title="vip课程形式"
+    <el-dialog :title="(vipStatusFrom.isAdd ? '添加' : '修改') + `VIP课程形式`"
                class="courseMask"
                width="500px"
+               @close="onVipStatusClose('vipStatus')"
                :visible.sync="vipStatus">
       <el-form :model="vipStatusFrom"
                ref='vipStatus'>
         <el-form-item label="课程形式"
                       prop='name'
+                      :rules="[{ required: true, message: '请输入课程形式', trigger: 'blur' }]"
                       :label-width="formLabelWidth">
           <el-input v-model.trim="vipStatusFrom.name"
                     autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="班级人数"
                       prop="num"
+                      :rules="[{ required: true, message: '请输入班级人数', trigger: 'blur' }]"
                       :label-width="formLabelWidth">
-          <el-input v-model.trim="vipStatusFrom.num"
+          <el-input v-model.trim="vipStatusFrom.num" type="number"
                     autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="课程课时"
-                      prop="timer"
+                      prop="dynamicTags"
+                      :rules="[{ required: true, message: '请输入课程课时', trigger: 'blur, change' }]"
                       :label-width="formLabelWidth">
-          <!-- <el-input v-model.trim="vipStatusFrom.timer" 
-                    autocomplete="off"></el-input> -->
           <el-tag :key="index"
                   effect="dark"
                   type="info"
-                  v-for="(tag, index) in dynamicTags"
+                  v-for="(tag, index) in vipStatusFrom.dynamicTags"
                   closable
                   :disable-transitions="false"
                   @close="handleClose(tag)">
@@ -147,36 +139,37 @@
       </el-form>
       <div slot="footer"
            class="dialog-footer">
-        <el-button @click="closeVipStatus">取 消</el-button>
+        <el-button @click="vipStatus = false">取 消</el-button>
         <el-button type="primary"
-                   @click="addVipStatus">确 定</el-button>
+                   @click="addVipStatus('vipStatus')">确 定</el-button>
       </div>
     </el-dialog>
 
     <!-- 周期循环新增弹窗 -->
-    <el-dialog title="vip时间段"
+    <el-dialog :title="(vipTimerFrom.isAdd ? '添加' : '修改') + 'VIP时间段'"
                width="500px"
+               @close="onVipStatusClose('timerStatus')"
                :visible.sync="timerStatus">
       <el-form :model="vipTimerFrom"
                ref='timerStatus'>
-        <el-form-item label="达到课时总数/次"
+        <el-form-item label="达到课时总数"
                       prop='count'
+                      :rules="[{required: true, message: '请输入达到课时总数', trigger: 'blur'}]"
                       :label-width="formLabelWidth">
-          <el-input v-model.trim="vipTimerFrom.count"
-                    autocomplete="off"></el-input>
+          <el-input v-model.trim="vipTimerFrom.count" type="number" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="可排课时间段/月"
+        <el-form-item label="可排课时间段"
                       prop="timer"
+                      :rules="[{required: true, message: '请输入可排课时间段', trigger: 'blur'}]"
                       :label-width="formLabelWidth">
-          <el-input v-model.trim="vipTimerFrom.timer"
-                    autocomplete="off"></el-input>
+          <el-input v-model.trim="vipTimerFrom.timer" type="number" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer"
            class="dialog-footer">
         <el-button @click="timerStatus=false">取 消</el-button>
         <el-button type="primary"
-                   @click="addTimerStatus">确 定</el-button>
+                   @click="addTimerStatus('timerStatus')">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -194,11 +187,10 @@ export default {
       vipStatusFrom: {
         name: '',
         num: '',
-        timer: [],
+        dynamicTags: [],
         isAdd: true,
         id: ''
       }, // 弹窗内容
-      statusRemovevisible: false,
       timerStatus: false, //课程时间段弹窗状态
       vipTimerFrom: {
         count: '',
@@ -217,102 +209,100 @@ export default {
   },
   methods: {
     handleClose (tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      this.vipStatusFrom.dynamicTags.splice(this.vipStatusFrom.dynamicTags.indexOf(tag), 1);
     },
-
     showInput () {
       this.inputVisible = true;
       this.$nextTick(_ => {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },
-
     handleInputConfirm () {
       let inputValue = this.inputValue;
       if (inputValue) {
-        this.dynamicTags.push(inputValue);
+        this.vipStatusFrom.dynamicTags.push(inputValue);
       }
       this.inputVisible = false;
       this.inputValue = '';
     },
-    getVipGroupCategoryList () {
+    async getVipGroupCategoryList () {
       // 获取默认左边参数
-      vipGroupCategory().then(res => {
+      await vipGroupCategory().then(res => {
         if (res.code == 200) {
           this.leftList = res.data;
         }
       })
     },
-    getDefaultClassesCycle () {
+    async getDefaultClassesCycle () {
       // 获取默认右边参数
-      getDefaultClassesCycle().then(res => {
+      await getDefaultClassesCycle().then(res => {
         this.rightList = res.data;
       })
     },
+    onVipStatusClose(formName) {
+      this.inputVisible = false
+      this.inputValue = ''
+      this.$refs[formName].resetFields()
+    },
     // 新增分类
     addGroupCategory () {
       this.vipStatus = true;
       this.vipStatusFrom.isAdd = true;
-      this.vipStatusFrom.id = '';
-      this.vipStatusFrom.name = ''
-      this.vipStatusFrom.num = ''
-      this.dynamicTags = [];
-    },
-    closeVipStatus () {
-      this.vipStatus = false;
     },
-    addVipStatus () {
+    addVipStatus (formName) {
       // 点击添加后 发送请求单独添加=> 刷新列表
       // 判断是添加还是修改
-      if (this.vipStatusFrom.isAdd) {
-        // 添加
-        if (this.vipStatusFrom.name && this.vipStatusFrom.num && this.dynamicTags.length > 0) {
-          addVipGroupCategory({
-            name: this.vipStatusFrom.name,
-            singleClassMinutes: this.dynamicTags.join(','),
-            studentNum: this.vipStatusFrom.num
-          }).then(res => {
-            if (res.code == 200) {
+      this.$refs[formName].validate(async (valid) => {
+        console.log(valid)
+        if(valid) {
+          const vipStatusFrom = this.vipStatusFrom
+          if(vipStatusFrom.isAdd) {
+            await addVipGroupCategory({
+              name: vipStatusFrom.name,
+              singleClassMinutes: vipStatusFrom.dynamicTags.join(','),
+              studentNum: vipStatusFrom.num
+            }).then(res => {
+              if (res.code == 200) {
+                this.$message.success('添加成功')
+                this.getVipGroupCategoryList();
+                this.vipStatus = false;
+              }
+            })
+          } else {
+            await resetVipGroupCategory({
+              name: vipStatusFrom.name,
+              singleClassMinutes: vipStatusFrom.dynamicTags.join(','),
+              studentNum: vipStatusFrom.num,
+              id: vipStatusFrom.id
+            }).then(res => {
+              this.$message.success('修改成功')
               this.getVipGroupCategoryList();
               this.vipStatus = false;
-            }
-          })
-        } else {
-          this.$message.error('请填写参数')
-          return
+            })
+          }
         }
-
-      } else {
-        // 修改
-        resetVipGroupCategory({
-          name: this.vipStatusFrom.name,
-          singleClassMinutes: this.dynamicTags.join(','),
-          studentNum: this.vipStatusFrom.num,
-          id: this.vipStatusFrom.id
-        }).then(res => {
-          this.getVipGroupCategoryList();
-          this.vipStatus = false;
-        })
-      }
+      })
     },
     resetGroupCategory (row) {
       // 修改课程形式
+      const vipStatusFrom = this.vipStatusFrom
       this.vipStatus = true;
-      this.vipStatusFrom.name = row.name;
-
-      this.vipStatusFrom.timer = row.singleClassMinutes.split(',');
-      this.dynamicTags = row.singleClassMinutes.split(',');
-      this.vipStatusFrom.num = row.studentNum;
-      this.vipStatusFrom.id = row.id;
-      this.vipStatusFrom.isAdd = false;
+      this.$nextTick(() => {
+        vipStatusFrom.name = row.name;
+        vipStatusFrom.timer = row.singleClassMinutes.split(',');
+        vipStatusFrom.dynamicTags = row.singleClassMinutes.split(',');
+        vipStatusFrom.num = row.studentNum;
+        vipStatusFrom.id = row.id;
+        vipStatusFrom.isAdd = false;
+      })
     },
-    removeGroupCategory (scope) {
-      // 删除 
-      removeVipGroupCategory({
+    async removeGroupCategory (scope) {
+      // 删除
+      await removeVipGroupCategory({
         id: scope.row.id
       }).then(res => {
         if (res.code == 200) {
-          // scope._self.$refs[scope.$index].doClose();
+          this.$message.success('删除成功')
           this.getVipGroupCategoryList();
         }
       })
@@ -321,41 +311,50 @@ export default {
     addVipTimer () {
       this.timerStatus = true;
       this.vipTimerFrom.isAdd = true;
-      this.vipTimerFrom.id = '';
     },
-    addTimerStatus () {
+    addTimerStatus (formName) {
       // 点击添加后 发送请求单独添加=> 刷新列表
       // 判断是添加还是修改
-      if (this.vipTimerFrom.isAdd) {
-        // 添加
-        addDefaultClassesCycle({
-          organId: null,
-          maxClassTimes: this.vipTimerFrom.count,
-          month: this.vipTimerFrom.timer,
-        }).then(res => {
-          if (res.code == 200) {
-            this.getDefaultClassesCycle();
-            this.timerStatus = false;
+      this.$refs[formName].validate(async (valid) => {
+        if(valid) {
+          const vipTimerFrom = this.vipTimerFrom
+          if (vipTimerFrom.isAdd) {
+            // 添加
+            await addDefaultClassesCycle({
+              organId: null,
+              maxClassTimes: vipTimerFrom.count,
+              month: vipTimerFrom.timer,
+            }).then(res => {
+              if (res.code == 200) {
+                this.$message.success('添加成功')
+                this.getDefaultClassesCycle();
+                this.timerStatus = false;
+              }
+            })
+          } else {
+            // 修改
+            await resetDefaultClassesCycle({
+              maxClassTimes: vipTimerFrom.count,
+              month: vipTimerFrom.timer,
+              id: vipTimerFrom.id
+            }).then(res => {
+              this.$message.success('修改成功')
+              this.getDefaultClassesCycle();
+              this.timerStatus = false;
+            })
           }
-        })
-      } else {
-        // 修改
-        resetDefaultClassesCycle({
-          maxClassTimes: this.vipTimerFrom.count,
-          month: this.vipTimerFrom.timer,
-          id: this.vipTimerFrom.id
-        }).then(res => {
-          this.getDefaultClassesCycle();
-          this.timerStatus = false;
-        })
-      }
+        }
+      })
     },
     resetTimerList (row) {
       this.timerStatus = true;
-      this.vipTimerFrom.count = row.maxClassTimes;
-      this.vipTimerFrom.timer = row.month;
-      this.vipTimerFrom.id = row.id;
-      this.vipTimerFrom.isAdd = false;
+      const vipTimerFrom = this.vipTimerFrom
+      this.$nextTick(() => {
+        vipTimerFrom.count = row.maxClassTimes;
+        vipTimerFrom.timer = row.month;
+        vipTimerFrom.id = row.id;
+        vipTimerFrom.isAdd = false;
+      })
     },
     // 删除时间管理
     removeDefaultClassesCycle (scope) {
@@ -368,20 +367,7 @@ export default {
         }
       })
     },
-  },
-  watch: {
-    vipStatus (val) {
-      if (!val) {
-        this.$refs['vipStatus'].resetFields();
-      }
-    },
-    timerStatus (val) {
-      if (!val) {
-        this.$refs['timerStatus'].resetFields();
-      }
-    }
   }
-
 }
 </script>
 <style lang="scss" scoped>