Merge branch 'feature-筛选' into jenkins

src/views/choose-homework/music-list/index.module.less

@@ -298,3 +298,114 @@
 .notice{
   padding-left: 4PX!important;
 }
+
+.searchResult {
+  padding: 16px 13px 12px;
+  overflow: hidden;
+  border-bottom: 1px solid #f2f2f2;
+
+  .searchTitle {
+    font-size: 15px;
+    color: #333333;
+    font-weight: 600;
+    line-height: 22px;
+  }
+}
+
+.radio-group {
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 7px;
+  flex-wrap: wrap;
+
+  .radio:first-child {
+    :global {
+      .van-radio__label {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.radio {
+  :global {
+    .van-radio__icon {
+      display: none;
+    }
+
+    .van-tag--large {
+      width: 80px;
+      height: 32px;
+      font-size: 16px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .van-tag {
+      box-sizing: border-box;
+      width: 31% !important;
+    }
+
+    .van-tag--default {
+      color: #333333;
+      background: #f6f6f6;
+    }
+
+    .van-tag--primary {
+      background: #fff3f5;
+    }
+  }
+}
+
+.organ-radio {
+  :global {
+    .van-tag--large {
+      width: auto;
+      // padding: 0 2px;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      font-size: 13px;
+      &:nth-child(3n+3) {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+
+.resetting {
+  border-color: #dbdbdb !important;
+  color: #333333 !important;
+  margin-right: 15px;
+}
+
+.confirm,
+.resetting {
+  flex: 1;
+  :global {
+    .van-button__text {
+      font-size: 16px;
+    }
+  }
+}
+.btnGroup {
+  display: flex;
+  justify-content: space-around;
+  padding: 18px 13px;
+}
+
+.activeTag {
+  border: 1px solid #9FE2DE !important;
+  background: #F2FFFC !important;
+  color: #00B2A7 !important;
+}
+
+:global {
+  .van-dropdown-item--down {
+    // margin-top: 15px;
+  }
+  .van-dropdown-item__content {
+    border-radius: 0px 0px 20px 20px;
+  }
+}

src/views/choose-homework/music-list/index.tsx

@@ -12,7 +12,9 @@ import {
   Popup,
   showLoadingToast,
   closeToast,
-  showToast
+  showToast,
+  Tag,
+  Button
 } from 'vant';
 import qs from 'query-string';
 import { find } from 'lodash';
@@ -53,7 +55,8 @@ export default defineComponent({
       selectedPartIndex: 0,
       activeRow: null as any,
       liveConfig: false,
-      musicScoreList: []
+      musicScoreList: [],
+      isAllSubject: false, // 是否默认选中的全部声部
     };
   },
   created() {
@@ -62,6 +65,15 @@ export default defineComponent({
     // console.log(this.liveConfig, " this.liveConfig");
     // console.log(searchParse, "parseSearch");
   },
+  computed: {
+    showSubjectOption() {
+      if ((appState.subjectOptions && appState.subjectOptions.length === 1) || this.$route.params.id == "43") {
+        return false
+      } else {
+        return true
+      }
+    },
+  },  
   async mounted() {
     await this.initList();
   },
@@ -122,6 +134,7 @@ export default defineComponent({
         const childClass = this.musicScoreList || [];
         // console.log(childClass);
         state.levelOptions = [
+          { value: this.$route.params.id, text: "全部级别" },
           ...childClass.map((item: any) => ({
             value: item.id,
             text: item.name,
@@ -135,7 +148,7 @@ export default defineComponent({
             if (active.childs) {
               // console.log(active, "showInfo");
               state.typeOptions = [
-                { value: 0, text: '全部' },
+                { value: 0, text: '全部类型' },
                 ...active.childs.map((item: any) => ({
                   value: item.id,
                   text: item.name
@@ -170,8 +183,8 @@ export default defineComponent({
               text: item.name
             }))
         ];
-
-        if (!appState.subjectId) {
+        // 非全部声部的情况，才需要默认选中第一个声部
+        if (!appState.subjectId && !this.isAllSubject) {
           const studentSubjectIds =
             baseState.platformType === 'TEACHER'
               ? baseState.user.data.subjectId
@@ -455,7 +468,7 @@ export default defineComponent({
             border={false}
             isFixed={false}
             backIconColor="white"></OHeader>
-          {state.typeOptions ||
+          {/* {state.typeOptions ||
           (state.levelOptions && state.levelOptions.length > 0) ? (
             <DropdownMenu activeColor="#01C1B5">
               {state.levelOptions && state.levelOptions.length > 0 ? (
@@ -496,7 +509,7 @@ export default defineComponent({
                 />
               ) : null}
             </DropdownMenu>
-          ) : null}
+          ) : null} */}
           <Search
             class={[styles.search]}
             placeholder="请输入搜索关键词"
@@ -512,24 +525,204 @@ export default defineComponent({
                 <img class={styles.iconSearch} src={iconSearch} />
               ),
               label: () => {
-                return (
-                  <DropdownMenu
-                    activeColor="#01C1B5"
-                    onClick={(evt: MouseEvent) => {
-                      evt.preventDefault();
-                    }}>
-                    <DropdownItem
-                      class={styles.searchSelect}
-                      get-container="#app"
-                      modelValue={appState.subjectId}
-                      options={appState.subjectOptions}
-                      onChange={(val: any) => {
-                        appState.subjectId = val;
-                        this.onSearch();
-                      }}
-                    />
-                  </DropdownMenu>
-                );
+                if ((this.showSubjectOption && appState.subjectOptions && appState.subjectOptions.length > 2) || state.levelOptions?.length>1 || state.typeOptions?.length>1) {
+                  return (
+                    <DropdownMenu
+                      activeColor="#01C1B5"
+                      onClick={(evt: MouseEvent) => {
+                        evt.preventDefault();
+                      }}>
+                      {/* <DropdownItem
+                        class={styles.searchSelect}
+                        get-container="#app"
+                        modelValue={appState.subjectId}
+                        options={appState.subjectOptions}
+                        onChange={(val: any) => {
+                          appState.subjectId = val;
+                          this.onSearch();
+                        }}
+                      /> */}
+                      <DropdownItem
+                        teleport="body"
+                        title="筛选"
+                        ref="dropItem"
+                      >
+                        <div
+                          class={styles.searchResult}
+                          style={{
+                            maxHeight: '45vh',
+                            overflowY: 'auto'
+                          }}
+                        >
+                          {this.showSubjectOption && appState.subjectOptions && appState.subjectOptions.length > 2 && (
+                              <>
+                                <div class={styles.searchTitle}>
+                                  声部
+                                </div>
+                                <div
+                                  class={[
+                                    styles['radio-group'],
+                                    styles.radio,
+                                    styles['organ-radio']
+                                  ]}
+                                >
+                                  {appState.subjectOptions.map((subject: any) => {
+                                    const isActive =
+                                      subject.value === appState.subjectId
+                                    const type = isActive
+                                      ? 'primary'
+                                      : 'default'
+                                    return (
+                                      <Tag
+                                        size="large"
+                                        plain={isActive}
+                                        type={type}
+                                        round
+                                        class={isActive && styles.activeTag}
+                                        onClick={() => {
+                                          appState.subjectId = subject.value
+                                        }}
+                                      >
+                                        {subject.text}
+                                      </Tag>
+                                    )
+                                  })}
+                                </div>
+                              </>
+                            )}
+                          {state.levelOptions &&
+                            state.levelOptions
+                              .length > 1 && (
+                              <>
+                                <div class={styles.searchTitle}>
+                                  级别
+                                </div>
+                                <div
+                                  class={[
+                                    styles['radio-group'],
+                                    styles.radio,
+                                    styles['organ-radio']
+                                  ]}
+                                >
+                                  {state.levelOptions.map((subject: any) => {
+                                    const isActive =
+                                      subject.value === state.levelId
+                                    const type = isActive
+                                      ? 'primary'
+                                      : 'default'
+                                    return (
+                                      <Tag
+                                        size="large"
+                                        plain={isActive}
+                                        type={type}
+                                        round
+                                        class={isActive && styles.activeTag}
+                                        onClick={() => {
+                                          state.levelId = subject.value
+                                          state.typeId = 0;
+                                          const active = find(state.levelOptions, { value: subject.value });
+                                          if (active) {
+                                            if (active.childs && active.childs.length) {
+                                              state.typeOptions = [
+                                                { value: 0, text: "全部类型" },
+                                                ...active.childs.map((item: any) => ({
+                                                  value: item.id,
+                                                  text: item.name,
+                                                })),
+                                              ];
+                                            } else {
+                                              state.typeOptions = null;
+                                            }
+                                          }                                     
+                                        }}
+                                      >
+                                        {subject.text}
+                                      </Tag>
+                                    )
+                                  })}
+                                </div>
+                              </>
+                            )}
+                          {state.typeOptions &&
+                            state.typeOptions
+                              .length > 1 && (
+                              <>
+                                <div class={styles.searchTitle}>
+                                  类型
+                                </div>
+                                <div
+                                  class={[
+                                    styles['radio-group'],
+                                    styles.radio,
+                                    styles['organ-radio']
+                                  ]}
+                                >
+                                  {state.typeOptions.map((subject: any) => {
+                                    const isActive =
+                                      subject.value === state.typeId
+                                    const type = isActive
+                                      ? 'primary'
+                                      : 'default'
+                                    return (
+                                      <Tag
+                                        size="large"
+                                        plain={isActive}
+                                        type={type}
+                                        round
+                                        class={isActive && styles.activeTag}
+                                        onClick={() => {
+                                          state.typeId = subject.value
+                                        }}
+                                      >
+                                        {subject.text}
+                                      </Tag>
+                                    )
+                                  })}
+                                </div>
+                              </>
+                            )}
+                        </div>
+
+                        <div class={[styles.btnGroup]}>
+                          <Button
+                            class={styles.resetting}
+                            type="primary"
+                            plain
+                            round
+                            onClick={() => {
+                              if (this.showSubjectOption) {
+                                appState.subjectId = 0;
+                              }
+                              state.levelId = this.$route.params.id;
+                              state.typeId = 0;
+                              state.typeOptions = null;
+                            }}
+                          >
+                            重置
+                          </Button>
+
+                          <Button
+                            class={styles.confirm}
+                            type="primary"
+                            color="rgba(1, 193, 181, 1)"
+                            round
+                            block
+                            onClick={() => {
+                              this.$refs.dropItem.toggle();
+                              // 如果手动选的全部声部，查询的时候不需要默认选中第一个声部
+                              this.isAllSubject = appState.subjectId === 0 ? true : false;
+                              this.onSearch();
+                            }}
+                          >
+                            确定
+                          </Button>
+                        </div>
+                      </DropdownItem>                       
+                    </DropdownMenu>
+                  );                  
+                } else {
+                  return null;
+                }
               },
               action: () => (
                 <span class={styles.search_btn} onClick={this.onSearch}>