09/30

声部设置开始

src/api/buildTeam.js

@@ -32,4 +32,13 @@ export function getTeacher (data) {
     method: 'get',
     data: qs.stringify(data)
   })
+}
+
+// 获取所有声部集合
+export function getSubject (data) {
+  return request({
+    url: '/web-server/subject/queryPageTree',
+    method: 'get',
+    data: qs.stringify(data)
+  })
 }

src/components/Pagination/index.vue

@@ -15,7 +15,6 @@
 
 <script>
 import { scrollTo } from '@/utils/scroll-to'
-
 export default {
   name: 'Pagination',
   props: {

src/layout/components/Navbar.vue

@@ -76,6 +76,9 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   height: 60px;
   overflow: hidden;
   position: relative;

src/store/getters.js

@@ -5,6 +5,9 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   permission_routes: state => state.permission.routes,
-  organ: state => state.user.organ
+  organ: state => state.user.organ,
+  topinfo: state => state.buildTeam.topinfo,
+  checkinfo: state => state.buildTeam.checkinfo,
+  payList: state => state.buildTeam.payList
 }
 export default getters

src/store/index.js

@@ -5,6 +5,7 @@ import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
 import permission from './modules/permission'
+import buildTeam from './modules/buildTeam'
 
 Vue.use(Vuex)
 
@@ -14,6 +15,7 @@ const store = new Vuex.Store({
     settings,
     user,
     permission,
+    buildTeam
   },
   getters
 })

src/store/modules/buildTeam.js

@@ -0,0 +1,34 @@
+const state = {
+  topinfo: {},
+  checkinfo: {},
+  payList: {}
+}
+
+const mutations = {
+  SET_TOPINFO (state, topinfo) {
+    state.topinfo = topinfo
+  },
+  SET_CHRCK (state, checkinfo) {
+    state.checkinfo = checkinfo
+  },
+  SET_PAY (state, payList) {
+    state.payList = payList
+  }
+}
+const actions = {
+  topinfo ({ commit }, topinfo) {
+    commit('SET_TOPINFO', topinfo)
+  },
+  checkinfo ({ commit }, checkinfo) {
+    commit('SET_CHRCK', checkinfo)
+  },
+  getpayInfo ({ commit }, payList) {
+    commit('SET_PAY', payList)
+  }
+}
+export default {
+
+  state,
+  mutations,
+  actions
+}

src/utils/request.js

@@ -12,8 +12,9 @@ function startLoading () {    //使用Element loading-start 方法
     background: 'rgba(0, 0, 0, 0.7)'
   })
 }
-function endLoading () {    //使用Element loading-close 方法
-  loading.close()
+function endLoading () {
+  //使用Element loading-close 方法
+  loading.close();
 }
 //那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
 //声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
@@ -24,16 +25,17 @@ function showFullScreenLoading () {
     startLoading()
   }
   needLoadingRequestCount++
+
 }
 
 function tryHideFullScreenLoading () {
-  console.log(needLoadingRequestCount);
+  if (needLoadingRequestCount <= 0) return
   needLoadingRequestCount--
-  if (needLoadingRequestCount < 0) return
-
   if (needLoadingRequestCount === 0) {
-    endLoading()
+    endLoading();
+
   }
+
 }
 
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

src/views/login/index.vue

@@ -92,7 +92,6 @@ export default {
           { required: true, trigger: "blur", validator: validatePassword }
         ]
       },
-      loading: false,
       passwordType: "password",
       redirect: undefined,
       isSaveUserInfo: true
@@ -277,7 +276,7 @@ $light_gray: #eee;
   width: 100%;
   // background-color: $bg;
   background: url("../../assets/images/base/login-bg.png") no-repeat 100% 100%;
-  // background-size: cover;
+  background-size: cover;
   overflow: hidden;
 
   .login-form {

src/views/teamBuild/components/teamBaseInfo.vue

@@ -5,8 +5,11 @@
       <!-- <div class="num">乐团编号：dywh01</div> -->
       <el-form :model="topFrom"
                :inline="true"
+               ref='topinfo'
                style="margin-left:11px;">
-        <el-form-item label="收费类型">
+        <el-form-item label="收费类型"
+                      prop="type"
+                      :rules="[{ required: true, message: '收费类型不能为空'}]">
           <el-select v-model="topFrom.type"
                      clearable>
             <el-option v-for="(item,index) in typeList"
@@ -15,7 +18,9 @@
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="所属分部">
+        <el-form-item label="所属分部"
+                      prop="section"
+                      :rules="[{ required: true, message: '所属分部不能为空'},]">
           <el-select v-model="topFrom.section"
                      clearable>
             <el-option v-for="(item,index) in sectionList"
@@ -24,7 +29,9 @@
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="合作单位">
+        <el-form-item label="合作单位"
+                      prop="school"
+                      :rules="[{ required: true, message: '合作单位不能为空'},]">
           <el-select v-model="topFrom.school"
                      clearable>
             <el-option v-for="(item,index) in cooperationList"
@@ -33,33 +40,45 @@
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="乐团名称">
+        <el-form-item label="乐团名称"
+                      prop='name'
+                      :rules="[{ required: true, message: '乐团名称不能为空'},]">
           <el-input placeholder="请输入乐团名称"
                     v-model="topFrom.name"></el-input>
         </el-form-item>
-        <el-form-item label="运营主管">
+        <el-form-item label="运营主管"
+                      prop='boss'
+                      :rules="[{ required: true, message: '运营主管不能为空'},]">
           <el-select v-model="topFrom.boss"
                      clearable>
             <el-option v-for="(item,index) in teacherList"
                        :key='index'
-                       :label="item.name"
+                       :label="item.username"
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="教务老师">
+        <el-form-item label="教务老师"
+                      prop='teacher'
+                      :rules="[{ required: true, message: '教育老师不能为空'},]">
           <el-select v-model="topFrom.teacher"
                      clearable>
-            <el-option label="哈哈哈"
-                       value="1"></el-option>
+            <el-option v-for="(item,index) in teacherList"
+                       :key='index'
+                       :label="item.username"
+                       :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="报名截止时间">
+        <el-form-item label="报名截止时间"
+                      prop='time'
+                      :rules="[{ required: true, message: '请输入报名截止时间'},]">
           <el-date-picker v-model="topFrom.time"
                           type="date"
                           placeholder="选择日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="招生年级">
+        <el-form-item label="招生年级"
+                      prop='startClass'
+                      :rules="[{ required: true, message: '请选择招生年纪'},]">
           <el-select placeholder="起始年级"
                      clearable
                      multiple
@@ -95,83 +114,129 @@
       </el-form>
       <div class="checkList">
         <div class="head noMargin">课程组成形态：</div>
-        <el-checkbox-group v-model="checkList">
-          <div class="checkRow">
-            <el-checkbox label="乐团声部训练"></el-checkbox>
-            <div class="inputWrap">
-              单价: <input type="text"
-                     placeholder="请输入">
-            </div>
+
+        <div class="checkRow">
+          <el-checkbox label="乐团声部训练"
+                       v-model="checkList.soundInfo.ischeck"></el-checkbox>
+          <div class="inputWrap">
+            单价: <input type="text"
+                   placeholder="请输入"
+                   v-model="checkList.soundInfo.value">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="乐团合奏训练"></el-checkbox>
-            <div class="inputWrap">
-              单价: <input type="text"
-                     placeholder="请输入">
-            </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="乐团合奏训练"
+                       v-model="checkList.allInfo.ischeck"></el-checkbox>
+          <div class="inputWrap">
+            单价: <input type="text"
+                   placeholder="请输入"
+                   v-model="checkList.allInfo.value">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="基础技能训练"></el-checkbox>
-            <div class="inputWrap">
-              单价: <input type="number"
-                     placeholder="请输入">
-            </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="基础技能训练"
+                       v-model="checkList.baseInfo.ischeck"></el-checkbox>
+          <div class="inputWrap">
+            单价: <input type="number"
+                   placeholder="请输入"
+                   v-model="checkList.baseInfo.value">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="假期集中训练"></el-checkbox>
-            <div class="inputWrap">
-              单价: <input type="number"
-                     placeholder="请输入">
-            </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="假期集中训练"
+                       v-model="checkList.holidayInfo.ischeck"></el-checkbox>
+          <div class="inputWrap">
+            单价: <input type="number"
+                   placeholder="请输入"
+                   v-model="checkList.holidayInfo.value">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="课程提示"
-                         class='classCheckBox'></el-checkbox>
-            <div class="textWrap">
-              <p>课程提示:</p>
-              <p>年度安排10个月共168课时,<span>100</span>/课时,原价<span>1000</span>元,现价<span>150</span>元/月(约 <span>5555</span>元/月 )</p>
-            </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="课程提示"
+                       class='classCheckBox'
+                       v-model="checkList.submit.ischeck"></el-checkbox>
+          <div class="textWrap"
+               v-if="checkList.submit.ischeck">
+            <el-input type='textarea'
+                      :rows="1"
+                      style="width:500px"
+                      value="年度安排个月共xxx课时,课时,原价xxx元,现价xxxx元/月(约 xxxx元/月 )"></el-input>
           </div>
-          <div class="head noMargin">付费方式：</div>
-          <div class="checkRow">
-            <el-checkbox label="学校"
-                         class='classCheckBox'></el-checkbox>
-            <div class="chioseList">
-              <div class="chioseItem">一次性</div>
-              <div class="chioseItem active">一学期</div>
-              <div class="chioseItem">一学年</div>
-            </div>
-            <div class="inputWrap">
-              备注: <input type="textarea"
-                     placeholder="请输入">
-            </div>
+        </div>
+        <div class="head noMargin">付费方式：</div>
+        <div class="checkRow">
+          <el-checkbox label="学校"
+                       class='classCheckBox'
+                       v-model="payList.school.ischeck"></el-checkbox>
+          <div class="chioseList">
+            <div class="chioseItem"
+                 :class="payList.school.chiose == 'ONE_OFF'?'active':''"
+                 @click="payList.school.chiose = 'ONE_OFF'">一次性</div>
+            <div class="chioseItem"
+                 :class="payList.school.chiose == 'MONTHLY'?'active':''"
+                 @click="payList.school.chiose='MONTHLY'">一个月</div>
+            <div class="chioseItem "
+                 :class="payList.school.chiose == 'TERM'?'active':''"
+                 @click="payList.school.chiose='TERM'">一学期</div>
+            <div class="chioseItem"
+                 :class="payList.school.chiose == 'YEAR'?'active':''"
+                 @click="payList.school.chiose='YEAR'">一学年</div>
+          </div>
+          <div class="inputWrap">
+            预计收费: <input type="textarea"
+                   placeholder="请输入"
+                   v-model="payList.school.price">
+          </div>
+          <div class="inputWrap">
+            备注: <input type="textarea"
+                   placeholder="请输入">
+          </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="公司"
+                       class='classCheckBox'></el-checkbox>
+          <div class="chioseList">
+            <div class="chioseItem"
+                 :class="payList.company.chiose == 'ONE_OFF'?'active':''"
+                 @click="payList.company.chiose='ONE_OFF'">一次性</div>
+            <div class="chioseItem"
+                 :class="payList.company.chiose == 'MONTHLY'?'active':''"
+                 @click="payList.company.chiose='MONTHLY'">一个月</div>
+            <div class="chioseItem "
+                 :class="payList.company.chiose == 'TERM'?'active':''"
+                 @click="payList.company.chiose='TERM'">一学期</div>
+            <div class="chioseItem"
+                 :class="payList.company.chiose == 'YEAR'?'active':''"
+                 @click="payList.company.chiose='YEAR'">一学年</div>
+          </div>
+          <div class="inputWrap">
+            预计收费: <input type="textarea"
+                   placeholder="请输入">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="公司"
-                         class='classCheckBox'></el-checkbox>
-            <div class="chioseList">
-              <div class="chioseItem">一次性</div>
-              <div class="chioseItem active">一学期</div>
-              <div class="chioseItem">一学年</div>
-            </div>
-            <div class="inputWrap">
-              备注: <input type="textarea"
-                     placeholder="请输入">
-            </div>
+          <div class="inputWrap">
+            备注: <input type="textarea"
+                   placeholder="请输入">
           </div>
-          <div class="checkRow">
-            <el-checkbox label="公司"
-                         class='classCheckBox'></el-checkbox>
-            <div class="chioseList">
-              <div class="chioseItem">一次性</div>
-              <div class="chioseItem active">周期循环</div>
-            </div>
-            <div class="inputWrap">
-              备注: <input type="textarea"
-                     placeholder="请输入">
-            </div>
+        </div>
+        <div class="checkRow">
+          <el-checkbox label="学员"
+                       class='classCheckBox'
+                       v-model="payList.student.ischeck"></el-checkbox>
+          <div class="chioseList">
+            <div class="chioseItem"
+                 :class="payList.student.chiose == 'ONE_OFF'?'active':''"
+                 @click="payList.student.chiose='ONE_OFF'">一次性</div>
+            <div class="chioseItem"
+                 :class="payList.student.chiose == 'loop'?'active':''"
+                 @click="payList.student.chiose='loop'">周期循环</div>
           </div>
-        </el-checkbox-group>
+        </div>
+      </div>
+    </div>
+    <div class="btnWrap">
+      <div class="nextBtn"
+           @click="gotoNext">
+        下一步
       </div>
     </div>
     <!-- <div class="baseRight">
@@ -222,6 +287,7 @@
 </template>
 <script>
 import { getSection, getType, getCooperation, getTeacher } from '@/api/buildTeam'
+import { scrollTo } from '@/utils/scroll-to'
 export default {
   data () {
     return {
@@ -234,12 +300,29 @@ export default {
         boss: '', // 运营主管
         time: '', // 报名截止时间
         startClass: '', // 招生年级起始
-        endClass: '' // 招生
       },
-      checkList: [], // 选中的集合
+      checkList: {
+        soundInfo: { // 声部
+          ischeck: false,
+          value: ''
+        },
+        allInfo: { // 合奏
+          ischeck: false,
+          value: ''
+        },
+        baseInfo: { // 基础
+          ischeck: false,
+          value: ''
+        },
+        holidayInfo: { // 假期
+          ischeck: false,
+          value: ''
+        },
+        submit: {
+          ischeck: false
+        }
+      }, // 选中的集合
       chioseMonth: '', // 选中的月份
-      result: {},
-      instrument: {},
       baseInfo: {},
       money: 580,
       orderInfo: {
@@ -249,7 +332,25 @@ export default {
       sectionList: [], // 分部列表
       typeList: [], // 收费类型列表
       cooperationList: [], // 教学点列表
-      teacherList: [] // 获取老师列表
+      teacherList: [], // 获取老师列表
+      payList: {
+        school: {
+          ischeck: false,
+          value: '',
+          price: '',
+          chiose: ''
+        },
+        company: {
+          ischeck: false,
+          value: '',
+          price: '',
+          chiose: ''
+        },
+        student: {
+          ischeck: true,
+          chiose: 'loop'
+        }
+      }
     }
   },
   mounted () {
@@ -275,19 +376,43 @@ export default {
     // 4.获取老师选项卡
     getTeacher({ 'rows': 1000 }).then(res => {
       if (res.code == 200) {
-        this.theacherList = res.data.rows;
+        this.teacherList = res.data.rows;
       }
     })
-  }
+  },
+  methods: {
+    gotoNext () {
+      // 1.效验数据    判断是否数据正常=> 正常放入store存储  
+      //                       不正常=>  进行效验提示
+      this.$refs['topinfo'].validate((valid, object) => {
+        if (!valid) {
+          this.$message.error('请填写建团必要参数')
+        } else {
+          // 我存三个对象
+          // 1. topform
+          // 2. checkList
+          // // 3. payList
+          this.$store.dispatch('topinfo', this.topFrom);
+          this.$store.dispatch('checkinfo', this.topFrom);
+          this.$store.dispatch('getpayInfo', this.topFrom);
+          // checkinfo getpayInfo
+          this.$emit('chioseTab', 1);
+
+        }
+      })
+    }
+  },
+  computed: {
+  },
 }
 </script>
 <style lang="scss">
 .base-container {
-  // overflow: auto;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
+  overflow: auto;
+  // display: flex;
+  // flex-direction: row;
+  // justify-content: flex-start;
+  // flex-wrap: nowrap;
   font-size: 14px;
   color: #444;
   // width: fill-available;
@@ -337,12 +462,12 @@ export default {
       }
       .textWrap {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: flex-start;
         font-size: 14px;
         color: #777;
-        padding-top: 16px;
-        line-height: 20px;
+        align-items: center;
+
         span {
           color: #f97215;
         }
@@ -391,6 +516,12 @@ export default {
       }
     }
   }
+  .btnWrap {
+    margin-top: 30px;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #606266;
+  }
   // .baseRight {
   //   width: 375px;
   //   margin-left: 25px;

src/views/teamBuild/components/teamSoundMoney.vue

@@ -1,8 +1,30 @@
 <template>
   <div class='sound-container'>
+    <p class="subTitle">按月缴费时，将在所选月份的1号的前一周提醒用户缴费操作，单次的缴费金额为当前列表「预计收费」的设置金额</p>
+    <div class="chioseWrap">
+      <p>请选择缴费月份:</p>
+      <el-checkbox-group v-model="checkList"
+                         fill="#14928A"
+                         text-color='#474747'>
+
+        <el-checkbox label="一月"></el-checkbox>
+        <el-checkbox label="二月"></el-checkbox>
+        <el-checkbox label="三月"></el-checkbox>
+        <el-checkbox label="四月"></el-checkbox>
+        <el-checkbox label="五月"></el-checkbox>
+        <el-checkbox label="六月"></el-checkbox>
+        <el-checkbox label="七月"></el-checkbox>
+        <el-checkbox label="八月"></el-checkbox>
+        <el-checkbox label="九月"></el-checkbox>
+        <el-checkbox label="十月"></el-checkbox>
+        <el-checkbox label="十一月"></el-checkbox>
+        <el-checkbox label="十二月"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+
     <div class="topMsg">
       <p>当前选择声部数(个）：20</p>
-      <p>计划招生人数(个）：80</p>
+      <p style='margin-left:30px;'>计划招生人数(个）：80</p>
     </div>
     <div class="listWrap">
       <el-table :data='tableList'
@@ -120,17 +142,36 @@
       </div>
     </div>
     <el-dialog title="声部选择"
-               :visible.sync="dialogTableVisible">
+               :visible.sync="dialogTableVisible"
+               :modal-append-to-body="false">
+      <div class="soundWrap">
+        <div class="itemList">
+          <div class="categroy"
+               v-for="(item,index) in soundList"
+               :key="index">
+            <p>{{item.name }}</p>
+            <el-checkbox-group v-model="soundList[index]">
+              <el-checkbox :label="sound.name"
+                           v-for="(sound,index) in item.subjects"
+                           :key="index"
+                           :value='sound.id'></el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
 
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
 import store from '@/store'
+import { getSubject } from '@/api/buildTeam'
 export default {
   data () {
     return {
       dialogTableVisible: true,
+      soundList: [],
+      checkList: [],
       tableList: [{
         sound: '长笛',
         jihua: '10',
@@ -164,11 +205,27 @@ export default {
 
   },
   mounted () {
-    console.log(store.getters.organ + '---');
+    // console.log(store.getters.organ + '---');
+    getSubject().then(res => {
+      console.log(res);
+      this.soundList = res.data.rows;
+      // 生成动态的checkList
+      for (let key in this.this.soundList) {
+        this.$set(this.soundList, key, [])
+      }
+    })
+    // 拿到刚才的存储的信息
+    let payfor = this.$store.getters.payList;
+    console.log(payfor);
+  },
+  watch: {
+    soundList (val) {
+      console.log(val);
+    }
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" >
 // .el-table__body tr.current-row > td {
 //   background-color: #c6cbd4 !important;
 // }
@@ -191,8 +248,22 @@ export default {
 //     font-size: 16px;
 //   }
 // }
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #606266;
+}
 .sound-container {
+  .chioseWrap {
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    padding: 0 25px;
+    p {
+      font-size: 14px;
+      margin-right: 30px;
+    }
+  }
   .topMsg {
+    padding: 0 25px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -200,6 +271,17 @@ export default {
     color: #444;
     margin-bottom: 15px;
   }
+  .subTitle {
+    width: 1203px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #fefceb;
+    padding: 0 25px;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: #474747;
+    margin-bottom: 20px;
+  }
   .floor {
     display: flex;
     flex-direction: row;
@@ -249,4 +331,35 @@ export default {
     cursor: pointer;
   }
 }
+.soundWrap {
+  width: 100%;
+  overflow: auto;
+  .itemList {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    height: 300px;
+    max-height: 300px;
+    overflow: auto;
+    .categroy {
+      width: 150px;
+      min-width: 150px;
+      .el-checkbox {
+        height: 30px;
+        line-height: 30px;
+        display: block;
+        padding-left: 20px;
+      }
+      p {
+        height: 40px;
+        line-height: 40px;
+        background-color: #edeef0;
+        margin-bottom: 15px;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>

src/views/teamBuild/index.vue

@@ -18,6 +18,7 @@
         </span>
         <span class='stepspan  stepspan2'
               @click="activeIndex=1">
+          <!--  v-if="activeIndex>=1" -->
           <div class="step2 sptep"
                :class="activeIndex >= 1?'activestep':''">
             声部费用
@@ -31,7 +32,7 @@
       <!-- 下面显示的内容 -->
       <div class="stepcontent">
         <div v-show='activeIndex==0'>
-          <teamBaseInfo />
+          <teamBaseInfo @chioseTab='chioseTab' />
         </div>
         <div v-show='activeIndex==1'>
           <teamSoundMoney />
@@ -59,16 +60,22 @@ export default {
   name: 'teamBuild',
   data () {
     return {
-      activeIndex: '1',
+      activeIndex: '0',
       stepImgs: {
         nol: require('@/assets/images/base/step-arrow-active.png'),
         active: require('@/assets/images/base/step-arrow.png')
       }
     }
-  }
+  },
+  methods: {
+    chioseTab (val) {
+      this.activeIndex = val;
+      // console.log(val)
+    }
+  },
 }
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .stepbox {
   display: flex;
   flex-direction: row;

src/views/teamBuild/teamSeting/index.vue

@@ -92,7 +92,7 @@ export default {
   }
 }
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .set-container {
   margin-left: 12px;
   .topWrap {
@@ -115,6 +115,7 @@ export default {
         position: relative;
         top: 5px;
         margin-right: 8px;
+        display: block;
       }
     }
     h2 {
@@ -202,11 +203,12 @@ export default {
         width: 17px;
         position: relative;
         top: 1px;
-        z-index: 20;
+        z-index: 30;
       }
     }
     .stepspan.stepspan2 {
       position: relative;
+      padding-right: 0;
       .sptep {
         padding-left: 12px !important;
         border-radius: 0 !important;