index.tsx 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
  2. import { defineComponent, onMounted, reactive, watch } from 'vue';
  3. import styles from './index.module.less';
  4. import CardType from '@/components/card-type';
  5. import SearchGroup from './search-group';
  6. import TheEmpty from '/src/components/TheEmpty';
  7. import { useDebounceFn, useThrottleFn, useResizeObserver } from '@vueuse/core';
  8. import { usePrepareStore } from '/src/store/modules/prepareLessons';
  9. import { musicSheetPage } from '../../../api';
  10. import CardPreview from '/src/components/card-preview';
  11. import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
  12. const formatType = (type: string) => {
  13. if (type === 'shareResources') {
  14. return 2;
  15. } else if (type === 'myResources') {
  16. return 3;
  17. } else if (type === 'myCollect') {
  18. return 4;
  19. }
  20. };
  21. export default defineComponent({
  22. name: 'select-music',
  23. props: {
  24. type: {
  25. type: String,
  26. default: ''
  27. },
  28. from: {
  29. type: String,
  30. default: ''
  31. }
  32. },
  33. emits: ['add'],
  34. setup(props, { emit }) {
  35. const prepareStore = usePrepareStore();
  36. const state = reactive({
  37. searchHeight: '0px',
  38. loading: false,
  39. finshed: false, // 是否加载完
  40. pagination: {
  41. page: 1,
  42. rows: 20
  43. },
  44. searchGroup: {
  45. name: '',
  46. type: 'MUSIC', //
  47. musicSheetCategoriesId: '',
  48. musicalInstrumentId: '',
  49. sourceType: formatType(props.type),
  50. status: 1,
  51. versionFlag: false,
  52. subjectId: null
  53. },
  54. tableList: [] as any,
  55. show: false,
  56. item: {} as any,
  57. isShowAddDisabled: !prepareStore.getIsEditTrain
  58. });
  59. const className = 'musicSearchGroup' + +new Date();
  60. const getList = async () => {
  61. try {
  62. if (state.pagination.page === 1) {
  63. state.loading = true;
  64. }
  65. const { data } = await materialQueryPage({
  66. ...state.searchGroup,
  67. ...state.pagination
  68. });
  69. state.loading = false;
  70. if (data.current === 1 && state.tableList.length > 0) return;
  71. const tempRows = data.rows || [];
  72. const temp: any = [];
  73. tempRows.forEach((row: any) => {
  74. const index = prepareStore.getTrainList.findIndex(
  75. (course: any) => course.musicId === row.id
  76. );
  77. temp.push({
  78. id: row.id,
  79. coverImg: row.coverImg || row.musicSvg,
  80. type: 'MUSIC',
  81. title: row.name,
  82. isCollect: !!row.favoriteFlag,
  83. isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
  84. refFlag: row.refFlag,
  85. content: row.id,
  86. xmlFileUrl: row.xmlFileUrl,
  87. exist: index !== -1 ? true : false // 是否存在
  88. });
  89. });
  90. state.tableList.push(...temp);
  91. state.finshed = data.pages <= data.current ? true : false;
  92. } catch {
  93. state.loading = false;
  94. }
  95. };
  96. watch(
  97. () => prepareStore.trainList,
  98. () => {
  99. state.tableList.forEach((item: any) => {
  100. const index = prepareStore.getTrainList.findIndex(
  101. (course: any) => course.musicId === item.id
  102. );
  103. item.exist = index !== -1 ? true : false; // 是否存在
  104. });
  105. },
  106. {
  107. deep: true,
  108. immediate: true
  109. }
  110. );
  111. const throttledFnSearch = useDebounceFn(item => {
  112. state.pagination.page = 1;
  113. state.tableList = [];
  114. state.searchGroup = Object.assign(state.searchGroup, item);
  115. getList();
  116. }, 500);
  117. const throttledFn = useThrottleFn(() => {
  118. state.pagination.page = state.pagination.page + 1;
  119. getList();
  120. }, 500);
  121. // 收藏
  122. const onCollect = async (item: any) => {
  123. try {
  124. await favorite({
  125. materialId: item.id,
  126. favoriteFlag: item.isCollect ? 0 : 1,
  127. type: item.type
  128. });
  129. item.isCollect = !item.isCollect;
  130. } catch {
  131. //
  132. }
  133. };
  134. onMounted(() => {
  135. useResizeObserver(
  136. document.querySelector('.' + className) as HTMLElement,
  137. (entries: any) => {
  138. const entry = entries[0];
  139. const { height } = entry.contentRect;
  140. state.searchHeight = height + 'px';
  141. }
  142. );
  143. if (props.type === 'homework') {
  144. state.isShowAddDisabled = false;
  145. }
  146. getList();
  147. });
  148. return () => (
  149. <div class={styles.selectMusic}>
  150. <div class={className}>
  151. <SearchGroup
  152. type={props.type}
  153. onSearch={(item: any) => throttledFnSearch(item)}
  154. />
  155. </div>
  156. <NScrollbar
  157. class={styles.listContainer}
  158. style={{
  159. 'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
  160. }}
  161. onScroll={(e: any) => {
  162. const clientHeight = e.target?.clientHeight;
  163. const scrollTop = e.target?.scrollTop;
  164. const scrollHeight = e.target?.scrollHeight;
  165. // 是否到底,是否加载完
  166. if (
  167. clientHeight + scrollTop + 20 >= scrollHeight &&
  168. !state.finshed &&
  169. !state.loading
  170. ) {
  171. throttledFn();
  172. }
  173. }}>
  174. <NSpin show={state.loading} size={'small'}>
  175. <div
  176. style={{
  177. 'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
  178. }}
  179. class={[
  180. styles.listSection,
  181. !state.loading && state.tableList.length <= 0
  182. ? styles.emptySection
  183. : ''
  184. ]}>
  185. {state.tableList.length > 0 && (
  186. <div class={styles.list}>
  187. {state.tableList.map((item: any) => (
  188. <CardType
  189. isShowAdd
  190. isShowCollect
  191. item={item}
  192. // isShowAddDisabled={state.isShowAddDisabled}
  193. onAdd={() => emit('add', item)}
  194. disabledMouseHover={false}
  195. onClick={() => {
  196. if (item.type === 'IMG') return;
  197. state.show = true;
  198. state.item = item;
  199. }}
  200. onCollect={(item: any) => onCollect(item)}
  201. />
  202. ))}
  203. </div>
  204. )}
  205. {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
  206. </div>
  207. </NSpin>
  208. </NScrollbar>
  209. {/* 弹窗查看 */}
  210. <CardPreview
  211. from={props.from}
  212. v-model:show={state.show}
  213. item={state.item}
  214. />
  215. </div>
  216. );
  217. }
  218. });