合并乐团完成

src/main.js

@@ -5,6 +5,7 @@ import dayjs from 'dayjs'
 import numeral from 'numeral'
 import lodash from 'lodash'
 import qs from 'qs'
+import { permission } from "@/utils/directivePage";
 
 import * as constant from '@/constant'
 
@@ -118,6 +119,7 @@ Vue.mixin({
         numeral,
         lodash,
         qs,
+        permission,
       }
     },
     $constant() {

src/views/teamBuild/components/merge-music.vue

@@ -3,28 +3,33 @@
     <el-button type="primary" @click="visible = true">选择乐团</el-button>
     <el-button type="primary" @click="studentsVisible = true">已合并学生</el-button>
     <empty v-if="isEmpty" desc="暂未选择乐团"/>
-    <el-collapse v-model="active" @change="val => active = val" class="items" v-else>
-      <el-collapse-item class="item" v-for="(item, key) in items" :key="key" :name="key">
+    <el-collapse v-model="active" @change="changeActive" class="items" v-else>
+      <el-collapse-item class="item" v-for="(item, key) in items" :key="key" :name="key" >
         <template #title>
           <div class="header">
-            <span>
+            <span class="title">
               <span>{{item.name}}</span>
+            </span>
+            <span style="width: 20%;">
               <span>学员人数：已选{{item.num}}人</span>
+              <i @click.stop="remove(key)" class="icon el-icon-circle-close"></i>
             </span>
-            <i @click.stop="remove(key)" class="icon el-icon-circle-close"></i>
           </div>
         </template>
         <selectItem :active="active" :id="item.id" @selected="selected"/>
       </el-collapse-item>
     </el-collapse>
-    <el-button type="info" @click="$emit('chiosetab', 1)">上一步</el-button>
-    <el-button type="primary" @click="merge">确认合并</el-button>
+    <div class="btns">
+      <el-button type="primary" @click="$emit('chiosetab', 1)">上一步</el-button>
+      <el-button type="primary" @click="merge">确认合并</el-button>
+    </div>
     <el-dialog
       title="选择乐团"
       :visible.sync="visible"
       width="700px"
     >
       <selectMusic
+        :visible="visible"
         @close="visible = false"
         @submited="submited"
       />
@@ -73,6 +78,9 @@ export default {
     // this.FetchList()
   },
   methods: {
+    changeActive(val) {
+      this.active = val
+    },
     submited(vals) {
       const data = {}
       for (const item of vals) {
@@ -158,19 +166,20 @@ export default {
   /deep/ .header{
     display: flex;
     align-items: center;
-    width: 100%;
+    width: 98%;
     justify-content: space-between;
     // margin-bottom: 10px;
     >span:first-child{
       display: flex;
       &::before{
         content: '';
-        display: block;
+        display: inline-block;
         width: 5px;
         background-color: #14928A;
         margin-right: 10px;
         border-radius: 2px;
         height: 48px;
+        position: absolute;
       }
     }
     .icon{
@@ -180,4 +189,26 @@ export default {
     }
   }
 }
+.title{
+  position: relative;
+  display: block;
+  max-width: 60%;
+  >span{
+    display: block;
+    margin-left: 20px;
+    font-weight: normal;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 48px;
+    line-height: 48px;
+    white-space: pre;
+  }
+}
+.btns{
+  margin-top: 20px;
+  text-align: right;
+}
 </style>

src/views/teamBuild/components/merged-students.vue

@@ -1,27 +1,36 @@
 <template>
   <div>
-  <el-table
-    style="width: 100%"
-    max-height="300px"
-    :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
-    :data="list"
-  >
-    <el-table-column prop="realName" align="center" label="学员姓名">
-      <template slot-scope="scope">
-        <copy-text>{{ scope.row.realName }}</copy-text>
-      </template>
-    </el-table-column>
-    <el-table-column prop="phone" align="center" label="手机号码">
-      <template slot-scope="scope">
-        <copy-text>{{ scope.row.phone }}</copy-text>
-      </template>
-    </el-table-column>
-    <el-table-column prop="subjectName" align="center" label="声部">
-      <template slot-scope="scope">
-        <copy-text>{{ scope.row.subjectName }}</copy-text>
-      </template>
-    </el-table-column>
-  </el-table>
+    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
+      <el-form-item prop="keyword">
+        <el-input v-model.trim="search.keyword" clearable placeholder="学生姓名(手机、编号)"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" native-type="submit">搜索</el-button>
+        <el-button type="danger" native-type="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      style="width: 100%"
+      max-height="300px"
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      :data="filterlist"
+    >
+      <el-table-column prop="realName" align="center" label="学员姓名">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.realName }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="phone" align="center" label="手机号码">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.phone }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="subjectName" align="center" label="声部">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.subjectName }}</copy-text>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
@@ -31,13 +40,45 @@ export default {
     return {
       id: this.$route.query.id,
       list: [],
+      filterlist: [],
       passed: [],
+      search: {
+        keyword: '',
+        hastimer: ''
+      }
     }
   },
   mounted() {
     this.FetchDetail()
   },
   methods: {
+    filter() {
+      const { keyword, hastimer } = this.search
+      this.filterlist = this.list.filter(item => {
+        const user = !keyword || (
+          ('' + item.userId).indexOf(keyword) > -1 ||
+          ('' + item.phone).indexOf(keyword) > -1 ||
+          ('' + item.realName).indexOf(keyword) > -1
+        )
+        return user
+      })
+    },
+    submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.filter()
+    },
+    reset(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.search = {
+        keyword: '',
+        hastimer: ''
+      }
+      this.filter()
+    },
     handleSelectionChange(arr) {
       const passed = [];
       for (let i in arr) {
@@ -52,6 +93,7 @@ export default {
           musicGroupId: this.id,
         })
         this.list = res.data.rows
+        this.filterlist = res.data.rows
       } catch (error) {}
     }
   }

src/views/teamBuild/components/select-item.vue

@@ -1,65 +1,106 @@
 <template>
   <div>
-  <el-table
-    style="width: 100%"
-    max-height="300px"
-    @selection-change="handleSelectionChange"
-    :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
-    :data="list"
-  >
-    <el-table-column type="selection"
-      width="50">
-    </el-table-column>
-      <el-table-column prop="id" width="100" align="center" label="乐团编号">
-        <template slot-scope="scope">
-          <copy-text>{{ scope.row.id }}</copy-text>
-        </template>
+    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
+      <el-form-item prop="keyword">
+        <el-input v-model.trim="search.keyword" clearable placeholder="学生姓名(手机、编号)"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" native-type="submit">搜索</el-button>
+        <el-button type="danger" native-type="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      style="width: 100%"
+      max-height="300px"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      :data="filterlist"
+    >
+      <el-table-column type="selection"
+        width="50">
       </el-table-column>
-      <el-table-column prop="name" align="center" label="学员姓名">
-        <template slot-scope="scope">
-          <copy-text>{{ scope.row.name }}</copy-text>
-        </template>
-      </el-table-column>
-      <el-table-column prop="parentsName" align="center" label="家长姓名">
-        <template slot-scope="scope">
-          <copy-text>{{ scope.row.parentsName }}</copy-text>
-        </template>
-      </el-table-column>
-      <el-table-column prop="parentsPhone" align="center" label="家长电话">
-        <template slot-scope="scope">
-          <copy-text>{{ scope.row.parentsPhone }}</copy-text>
-        </template>
-      </el-table-column>
-      <el-table-column prop="subjectName" align="center" label="声部">
-        <template slot-scope="scope">
-          <copy-text>{{ scope.row.subjectName }}</copy-text>
-        </template>
-      </el-table-column>
-  </el-table>
+        <el-table-column prop="id" width="100" align="center" label="乐团编号">
+          <template slot-scope="scope">
+            <copy-text>{{ scope.row.id }}</copy-text>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" align="center" label="学员姓名">
+          <template slot-scope="scope">
+            <copy-text>{{ scope.row.name }}</copy-text>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentsName" align="center" label="家长姓名">
+          <template slot-scope="scope">
+            <copy-text>{{ scope.row.parentsName }}</copy-text>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentsPhone" align="center" label="家长电话">
+          <template slot-scope="scope">
+            <copy-text>{{ scope.row.parentsPhone }}</copy-text>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subjectName" align="center" label="声部">
+          <template slot-scope="scope">
+            <copy-text>{{ scope.row.subjectName }}</copy-text>
+          </template>
+        </el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
 import { getMusicGroupStu } from '@/views/resetTeaming/api'
 export default {
-  props: ['id', 'active'],
+  props: ['id', 'active', 'name'],
   data() {
     return {
       list: [],
+      filterlist: [],
       passed: [],
+      search: {
+        keyword: '',
+        hastimer: ''
+      }
     }
   },
   watch: {
     active: {
       immediate: true,
       handler() {
-
+        if (this.active.includes(this.id) && !this.list.length) {
+          this.FetchDetail()
+        }
       }
     }
   },
-  // mounted() {
-  //   this.FetchDetail()
-  // },
   methods: {
+    filter() {
+      const { keyword, hastimer } = this.search
+      this.filterlist = this.list.filter(item => {
+        const user = !keyword || (
+          ('' + item.userId).indexOf(keyword) > -1 ||
+          ('' + item.parentsName).indexOf(keyword) > -1 ||
+          ('' + item.parentsPhone).indexOf(keyword) > -1 ||
+          ('' + item.name).indexOf(keyword) > -1
+        )
+        return user
+      })
+    },
+    submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.filter()
+    },
+    reset(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.search = {
+        keyword: '',
+        hastimer: ''
+      }
+      this.filter()
+    },
     handleSelectionChange(arr) {
       const passed = [];
       for (let i in arr) {
@@ -74,6 +115,7 @@ export default {
           musicGroupId: this.id,
         })
         this.list = res.data
+        this.filterlist = res.data
       } catch (error) {}
     }
   }

src/views/teamBuild/components/select-msic.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="container" style="width: 100%">
+    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
+      <el-form-item prop="musicGroupName">
+        <el-input v-model.trim="search.musicGroupName" clearable placeholder="乐团名称"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" native-type="submit">搜索</el-button>
+        <el-button type="danger" native-type="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       style="width: 100%"
       max-height="300px"
+      ref="table"
       @selection-change="handleSelectionChange"
       :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
       :data="tableData"
@@ -34,25 +44,71 @@
       >
       </el-table-column>
     </el-table>
+    <pagination
+      :total.sync="rules.total"
+      :page.sync="rules.page"
+      :limit.sync="rules.limit"
+      :page-sizes="rules.page_size"
+      layout="prev, pager, next"
+      style="padding: 10px"
+      @pagination="FetchList" />
     <div class="footer" slot="footer">
       <el-button @click="$emit('close')">取消</el-button>
-      <el-button @click="submit" type="primary">确认</el-button>
+      <el-button @click="submited" type="primary">确认</el-button>
     </div>
   </div>
 </template>
 <script>
+import pagination from '@/components/Pagination/index'
 import { getTeamList, getPayType } from "@/api/teamServer";
 export default {
+  props: ['visible'],
+  components: { pagination },
   data() {
     return {
       tableData: [],
       passed: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      search: {
+        musicGroupName: '',
+        hastimer: ''
+      }
     };
   },
   mounted() {
     this.FetchList()
   },
+  watch: {
+    visible() {
+      this.$refs.table.clearSelection()
+      this.passed = []
+    }
+  },
   methods: {
+    submit(evt) {
+      this.rules.page = 1;
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.FetchList()
+    },
+    reset(evt) {
+      this.rules.page = 1;
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.search = {
+        musicGroupName: '',
+        hastimer: ''
+      }
+      this.FetchList()
+    },
     checkSelectable (row) {
       return true
     },
@@ -68,11 +124,16 @@ export default {
     },
     async FetchList() {
       try {
-        const res = await getTeamList()
+        const res = await getTeamList({
+          rows: this.rules.limit,
+          page: this.rules.page,
+          ...this.search
+        })
         this.tableData = res.data.rows
+          this.rules.total = res.data.total
       } catch (error) {}
     },
-    submit() {
+    submited() {
       this.$emit('close')
       this.$emit('submited', this.passed)
     }

src/views/teamBuild/components/teamSoundSet.vue

@@ -9,23 +9,24 @@
                   @getBaseInfo="getBaseInfo"
                   @getNumber="getNumber" />
     <div class="btnWrap">
-      <div class="PrevBtn"
-           @click="goback">上一步</div>
+      <el-button type="primary" @click="goback" style="margin-right: 10px;">上一步</el-button>
       <!--  v-if="teamStatus != 'teamAudit'" -->
-      <!-- <div class="submitBtn"
+      <el-button class="submitBtn"
            v-permission="{
           child: 'musicGroup/createGroup',
           parent: '/teamBuild/soundMoney',
         }"
-           @click="submitInfo()">
-        下一步
-      </div> -->
+        v-if="!$helpers.permission('musicGroup/addMusicGroupRegs')"
+        @click="submitInfo()">
+        创建缴费
+      </el-button>
       <el-dropdown
         split-button
         v-permission="{
           child: 'musicGroup/createGroup',
           parent: '/teamBuild/soundMoney',
         }"
+        v-if="$helpers.permission('musicGroup/addMusicGroupRegs')"
         type="primary"
         @click="submitInfo()"
       >
@@ -92,6 +93,7 @@ export default {
     };
   },
   mounted () {
+    console.log(this)
     this.teamid = this.$route.query.id;
     this.teamStatus = this.$route.query.type;
   },

src/views/teamBuild/index.vue

@@ -5,42 +5,9 @@
       <el-page-header @back="goBack"
                       :content="pageName"> </el-page-header>
     </h2>
-    <div class="m-core">
-      <div class="stepbox">
-        <!--  @click="activeIndex = 0" -->
-        <span class="stepspan stepspan1">
-          <div class="step1 sptep"
-               :class="activeIndex >= 0 ? 'activestep' : ''">
-            基本信息
-          </div>
-          <img :src="activeIndex  >=  0 ? stepImgs.nol : stepImgs.active"
-               alt=""
-               class="arrow" />
-        </span>
-        <!-- @click="activeIndex = 1" -->
-        <span class="stepspan stepspan2"
-              v-if="showFlag?activeIndex>= 1:true">
-          <!--    -->
-          <div class="step2 sptep"
-               :class="activeIndex  >= 1 ? 'activestep' : ''">
-            声部设置
-          </div>
-          <img :src="activeIndex >=  1 ? stepImgs.nol : stepImgs.active"
-               alt=""
-               class="arrow" />
-        </span>
-        <!--  @click="activeIndex = 2" -->
-        <span class="stepspan stepspan3"
-              v-if="showFlag?activeIndex  >=  2:true">
-          <div class="step2 sptep"
-               :class="activeIndex  >=  2 ? 'activestep' : ''">
-            创建缴费
-          </div>
-          <img :src="activeIndex >= 2 ? stepImgs.nol : stepImgs.active"
-               alt=""
-               class="arrow" />
-        </span>
-      </div>
+    <h2>
+      <div class="squrt"></div><h3 style="font-size: 22px;">{{getIndexName(activeIndex)}}</h3>
+    </h2>
 
       <!-- 下面显示的内容 -->
       <div class="stepcontent">
@@ -127,11 +94,20 @@ export default {
       this.baseInfo = baseInfo
       this.pageName = baseInfo.musicGroup?.name
     },
+    getIndexName(index) {
+      const data = {
+        0: '基本信息',
+        1: '声部设置',
+        2: '创建缴费',
+        3: '合并乐团',
+      }
+      return data[index]
+    }
   },
   computed: {
     showFlag () {
       return (this.teamStatus == 'newTeam' || this.teamStatus == 'teamList')
-    }
+    },
   }
 };
 </script>