|
|
@@ -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 as any)?.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}>
|
