Merge branch 'ol_12_30' into online

src/views/teamDetail/components/modals/course-time-detail.vue

@@ -1,66 +1,83 @@
 <template>
-  <el-table
-    :data="list"
-    :header-cell-style="{background:'#EDEEF0',color:'#444'}"
-  >
-    <!-- <el-table-column
-      prop="type"
-      label="课程类型"
-      align="center"
+  <div>
+    <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 prop="hastimer">
+        <el-select v-model.trim="search.hastimer" clearable placeholder="是否存在剩余时长">
+          <el-option label="是" value="1"></el-option>
+          <el-option label="否" value="0"></el-option>
+        </el-select>
+      </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
+      :data="filterlist"
+      :header-cell-style="{background:'#EDEEF0',color:'#444'}"
     >
-      <template slot-scope="scope">
-        {{courseType[scope.row.type]}}
-      </template>
-    </el-table-column> -->
-    <el-table-column
-      prop="userId"
-      label="学生编号"
-      width="120"
-      align="center"
-    >
-      <template slot-scope="scope">
-        <copy-text>{{scope.row.userId}}</copy-text>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop="username"
-      label="学生姓名"
-      width="120"
-      align="center"
-     >
-      <template slot-scope="scope">
-        <copy-text>{{scope.row.username}}</copy-text>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop="phone"
-      label="学生手机号"
-      width="140"
-      align="center"
-     >
-      <template slot-scope="scope">
-        <copy-text>{{scope.row.phone}}</copy-text>
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="课程时长"
-    >
-      <template slot-scope="scope">
-        <el-tag
-          style="margin-right: 5px;margin-bottom: 5px;"
-          v-for="item in scope.row.mapDtos"
-          :key="item.key"
-          type="info"
-          size="small"
-        >{{courseType[item.key]}}: {{item.value}}分钟</el-tag>
-      </template>
-    </el-table-column>
-    <!-- <el-table-column
-      prop="time"
-      label="剩余时长(分)"
-      align="center"
-    /> -->
-  </el-table>
+      <!-- <el-table-column
+        prop="type"
+        label="课程类型"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{courseType[scope.row.type]}}
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        prop="userId"
+        label="学生编号"
+        width="120"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <copy-text>{{scope.row.userId}}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="username"
+        label="学生姓名"
+        width="120"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <copy-text>{{scope.row.username}}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="phone"
+        label="学生手机号"
+        width="140"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <copy-text>{{scope.row.phone}}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="课程时长"
+      >
+        <template slot-scope="scope">
+          <el-tag
+            style="margin-right: 5px;margin-bottom: 5px;"
+            v-for="item in scope.row.mapDtos"
+            :key="item.key"
+            type="info"
+            size="small"
+          >{{courseType[item.key]}}: {{item.value}}分钟</el-tag>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        prop="time"
+        label="剩余时长(分)"
+        align="center"
+      /> -->
+    </el-table>
+  </div>
 </template>
 
 <script>
@@ -72,7 +89,12 @@ export default {
     return {
       courseType,
       list: [],
-      extra: []
+      filterlist: [],
+      extra: [],
+      search: {
+        keyword: '',
+        hastimer: ''
+      }
     }
   },
   mounted() {
@@ -86,12 +108,41 @@ export default {
       }
       return data
     },
+    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.username).indexOf(keyword) > -1
+        )
+        const couse = !hastimer || (hastimer == '1' && item.mapDtos.filter(dto => dto.value > 0).length)
+        return user && couse
+      })
+    },
+    submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.filter()
+    },
+    reset(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.search = {
+        keyword: '',
+        hastimer: ''
+      }
+      this.filter()
+    },
     async FetchDetail() {
       try {
         const res = await queryStudentSubTotalCourseTimes({
           musicGroupId: this.$route.query.id,
         })
         this.list = res.data
+        this.filter()
         if (res.data[0]) {
           this.extra = res.data[0].mapDtos
         }