music-sheet-kt.tsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. import { defineComponent, onMounted, reactive, ref } from 'vue'
  2. import SaveForm from '@components/save-form'
  3. import {
  4. DataTableRowKey,
  5. NButton,
  6. NCascader,
  7. NDataTable,
  8. NDatePicker,
  9. NDescriptions,
  10. NDescriptionsItem,
  11. NFormItem,
  12. NImage,
  13. NInput,
  14. NModal,
  15. NSelect,
  16. NSpace,
  17. NTag,
  18. useDialog,
  19. useMessage
  20. } from 'naive-ui'
  21. import Pagination from '@components/pagination'
  22. import TheTooltip from '@components/TheTooltip'
  23. import AddMusic from '@views/music-library/project-music-sheet/module/kt/addMusic'
  24. import UpdateMusic from '@views/music-library/project-music-sheet/module/kt/updateMusic'
  25. import {
  26. musicSheetApplicationExtendCategoryList,
  27. musicSheetApplicationExtendStatus,
  28. musicSheetApplicationOwnerList,
  29. musicSheetPageByApplication
  30. } from '@views/music-library/api'
  31. import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
  32. import { musicSheetAudioType, musicSheetSourceType, musicSheetType } from '@/utils/constant'
  33. import { sysApplicationPage } from '@views/menu-manage/api'
  34. import { musicSheetApplicationExtendSubjectList } from '@views/system-manage/api'
  35. import { filterTimes } from '@/utils/dateUtil'
  36. import deepClone from '@/utils/deep.clone'
  37. import { getOwnerName } from '@views/music-library/musicUtil'
  38. export default defineComponent({
  39. name: 'project-music-sheet-KT',
  40. props: {
  41. appKey: {
  42. type: String,
  43. default: 'KT'
  44. }
  45. },
  46. setup(props) {
  47. const dialog = useDialog()
  48. const message = useMessage()
  49. const state = reactive({
  50. loading: false,
  51. appId: null as any,
  52. pagination: {
  53. page: 1,
  54. rows: 10,
  55. pageTotal: 0
  56. },
  57. searchForm: {
  58. keyword: null,
  59. musicSheetType: null, //曲目类型(SINGLE:单曲 CONCERT:合奏)
  60. subjectId: null, //声部ID
  61. subjectIds: null, //曲目声部ID集合
  62. musicCategoryIds: null, //曲目分类ID
  63. status: null, //曲目状态(0:停用,1:启用)
  64. sourceType: null, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人)
  65. paymentType: null, //收费类型(FREE:免费;VIP:会员;CHARGE:单曲收费)
  66. userId: null, //所属人
  67. musicCategoryId: null, //曲目分类ID
  68. times: null, // 上传时间
  69. // startTime: null, //上传时间(年月日)
  70. // endTime: null, //上传时间(年月日)
  71. audioType: null, //音频类型(HOMEMODE: 自制 COMMON: 普通)
  72. exquisiteFlag: null, //精品标志
  73. topFlag: null, //是否置顶(0:否;1:是)
  74. availableType: null, //可用途径 ORG 机构 PLATFORM 平台
  75. appAuditFlag: null, //是否审核版本
  76. detailFlag: null //是否查询详情
  77. },
  78. subjectList: [],
  79. dataList: [] as any[],
  80. musicSheetCategories: [],
  81. showAddDialog: false,
  82. showEditDialog: false,
  83. userIdDisable: true,
  84. userIdData: [] as any,
  85. updateRow: {} as any, // 修改选择的行
  86. applicationId: null //应用ID
  87. })
  88. onMounted(async () => {
  89. state.loading = true
  90. // 加载声部
  91. try {
  92. // 获取应用APP信息
  93. const appRes = await sysApplicationPage({ page: 1, rows: 1, appKey: props.appKey })
  94. const appTempList = appRes.data.rows || []
  95. if (!appTempList || appTempList.length == 0) {
  96. state.loading = false
  97. message.error('加载项目信息失败')
  98. return
  99. }
  100. state.appId = appTempList[0].id
  101. state.applicationId = appTempList[0].id
  102. const { data } = await musicSheetApplicationExtendSubjectList({
  103. applicationId: state.applicationId
  104. })
  105. const tempList = data || []
  106. tempList.forEach((item: any) => {
  107. item.label = item.subjectName
  108. item.value = item.subjectId
  109. })
  110. state.subjectList = tempList
  111. //加载曲目分类列表
  112. const categoryRes = await musicSheetApplicationExtendCategoryList({
  113. applicationIds: state.appId
  114. })
  115. if (categoryRes.data && categoryRes.data.length > 0) {
  116. state.musicSheetCategories = categoryRes.data[0].musicSheetCategories
  117. }
  118. } catch {}
  119. // 加载表格数据
  120. getList()
  121. })
  122. const saveForm = ref()
  123. const onSearch = () => {
  124. saveForm.value?.submit()
  125. }
  126. const onBtnReset = () => {
  127. saveForm.value?.reset()
  128. }
  129. const onSubmit = () => {
  130. state.pagination.page = 1
  131. getList()
  132. }
  133. const checkedRowKeysRef = ref<DataTableRowKey[]>([])
  134. const handleCheck = (rowKeys: DataTableRowKey[]) => {
  135. checkedRowKeysRef.value = rowKeys
  136. }
  137. const getList = async () => {
  138. state.loading = true
  139. try {
  140. const sourceType = state.searchForm.sourceType
  141. let userId = state.searchForm.userId
  142. let organizationRoleId = null
  143. if (sourceType && sourceType === 'ORG') {
  144. organizationRoleId = deepClone(userId)
  145. userId = null
  146. }
  147. const { data } = await musicSheetPageByApplication({
  148. ...state.pagination,
  149. ...state.searchForm,
  150. userId: userId,
  151. organizationRoleId: organizationRoleId,
  152. ...filterTimes(state.searchForm.times, ['startTime', 'endTime']),
  153. applicationId: state.applicationId
  154. })
  155. state.pagination.pageTotal = Number(data.total)
  156. state.dataList = data.rows || []
  157. } catch {}
  158. state.loading = false
  159. }
  160. const onChangeStatus = (row: any) => {
  161. const statusStr = row.status ? '停用' : '启用'
  162. dialog.warning({
  163. title: '提示',
  164. content: `是否${statusStr}?`,
  165. positiveText: '确定',
  166. negativeText: '取消',
  167. onPositiveClick: async () => {
  168. try {
  169. await musicSheetApplicationExtendStatus({
  170. ids: row.applicationExtendId,
  171. status: !row.status
  172. })
  173. getList()
  174. message.success(`${statusStr}成功`)
  175. } catch {}
  176. }
  177. })
  178. }
  179. const onBatchChangeStatus = (status: boolean) => {
  180. const length = checkedRowKeysRef.value.length
  181. if (length == 0) {
  182. message.warning('未选择数据')
  183. }
  184. const statusStr = !status ? '停用' : '启用'
  185. dialog.warning({
  186. title: '提示',
  187. content: `是否${statusStr}` + length + `条数据?`,
  188. positiveText: '确定',
  189. negativeText: '取消',
  190. onPositiveClick: async () => {
  191. try {
  192. await musicSheetApplicationExtendStatus({
  193. ids: checkedRowKeysRef.value.join(','),
  194. status: status
  195. })
  196. getList()
  197. message.success(`${statusStr}成功`)
  198. } catch {}
  199. }
  200. })
  201. }
  202. const columns = (): any => {
  203. return [
  204. {
  205. type: 'selection'
  206. },
  207. {
  208. title: '曲目信息',
  209. key: 'id',
  210. render: (row: any) => (
  211. <>
  212. <NDescriptions labelPlacement="left" column={1}>
  213. <NDescriptionsItem label="曲目名称">
  214. <TheTooltip content={row.name} />{' '}
  215. </NDescriptionsItem>
  216. <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
  217. </NDescriptions>
  218. </>
  219. )
  220. },
  221. {
  222. title: '曲目来源',
  223. key: 'musicSheetCategoriesName',
  224. render: (row: any) => (
  225. <>
  226. <NDescriptions labelPlacement="left" column={1}>
  227. <NDescriptionsItem label="曲目来源">
  228. {getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))}
  229. </NDescriptionsItem>
  230. <NDescriptionsItem label="所属人">
  231. {getOwnerName(row.musicSheetExtend, row.sourceType)}
  232. </NDescriptionsItem>
  233. </NDescriptions>
  234. </>
  235. )
  236. },
  237. {
  238. title: '封面图',
  239. key: 'musicCover',
  240. render(row: any): JSX.Element {
  241. return <NImage width={60} height={60} src={row.musicCover} />
  242. }
  243. },
  244. {
  245. title: '曲目类型',
  246. key: 'musicSheetType',
  247. render: (row: any) => {
  248. return (
  249. <div>
  250. {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
  251. </div>
  252. )
  253. }
  254. },
  255. {
  256. title: '伴奏类型',
  257. key: 'audioType',
  258. render: (row: any) => {
  259. return (
  260. <div>
  261. {getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}
  262. </div>
  263. )
  264. }
  265. },
  266. {
  267. title: '可用声部',
  268. key: 'subjectNames'
  269. },
  270. {
  271. title: '乐谱教材',
  272. key: 'musicSheetCategoryName'
  273. },
  274. // {
  275. // title: '可用途径',
  276. // key: 'availableType',
  277. // render: (row: any) => {
  278. // return <div>{getMapValueByKey(row.availableType, new Map(Object.entries(musicSheetAvailableType)))}</div>
  279. // }
  280. // },
  281. // {
  282. // title: '收费方式',
  283. // key: 'paymentType',
  284. // render: (row: any) => {
  285. // return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
  286. // }
  287. // },
  288. {
  289. title: '上传人',
  290. minWidth: '150px',
  291. key: 'composer',
  292. render(row: any) {
  293. return (
  294. <NDescriptions labelPlacement="left" column={1}>
  295. <NDescriptionsItem label="上传人">{row.createByName}</NDescriptionsItem>
  296. <NDescriptionsItem label="上传时间">{row.createTime}</NDescriptionsItem>
  297. </NDescriptions>
  298. )
  299. }
  300. },
  301. {
  302. title: '状态',
  303. key: 'status',
  304. render(row: any) {
  305. return (
  306. <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
  307. )
  308. }
  309. },
  310. {
  311. title: '操作',
  312. key: 'operation',
  313. fixed: 'right',
  314. render(row: any) {
  315. return (
  316. <NSpace>
  317. <NButton
  318. type="primary"
  319. size="small"
  320. text
  321. //v-auth="musicSheet/status1612431726029942786"
  322. onClick={() => onChangeStatus(row)}
  323. >
  324. {row.status ? '停用' : '启用'}
  325. </NButton>
  326. <NButton
  327. type="primary"
  328. size="small"
  329. text
  330. //v-auth="musicSheet/update1602302618558099458"
  331. onClick={() => {
  332. state.showEditDialog = true
  333. state.updateRow = row
  334. }}
  335. >
  336. 修改
  337. </NButton>
  338. </NSpace>
  339. )
  340. }
  341. }
  342. ]
  343. }
  344. return () => {
  345. return (
  346. <div class="system-menu-container">
  347. <SaveForm
  348. ref={saveForm}
  349. model={state.searchForm}
  350. onSubmit={onSubmit}
  351. saveKey="music-sheet-kt"
  352. onSetModel={(val: any) => (state.searchForm = val)}
  353. >
  354. <NFormItem label="关键词" path="keyword">
  355. <NInput
  356. placeholder="请输入曲目名称/编号"
  357. v-model:value={state.searchForm.keyword}
  358. clearable
  359. />
  360. </NFormItem>
  361. <NFormItem label="曲目来源" path="sourceType">
  362. <NSelect
  363. placeholder="请选择曲目来源"
  364. v-model:value={state.searchForm.sourceType}
  365. options={getSelectDataFromObj(musicSheetSourceType)}
  366. onUpdateValue={async (value: any) => {
  367. state.userIdData = []
  368. state.searchForm.userId = null
  369. if (value && value !== 'PLATFORM') {
  370. const { data } = await musicSheetApplicationOwnerList({
  371. page: 1,
  372. rows: 9999,
  373. sourceType: value,
  374. applicationId: state.appId
  375. })
  376. const temp = data.rows || []
  377. temp.forEach((next: any) => {
  378. state.userIdData.push({
  379. ...next,
  380. label: value === 'PERSON' ? next.userName : next.organizationRole,
  381. value: value === 'PERSON' ? next.userId : next.organizationRoleId
  382. })
  383. })
  384. state.userIdDisable = false
  385. } else {
  386. state.userIdDisable = true
  387. }
  388. }}
  389. clearable
  390. />
  391. </NFormItem>
  392. <NFormItem label="所属人" path="userId">
  393. <NSelect
  394. filterable={true}
  395. placeholder="请选择所属人"
  396. disabled={state.userIdDisable}
  397. v-model:value={state.searchForm.userId}
  398. options={state.userIdData}
  399. clearable
  400. ></NSelect>
  401. </NFormItem>
  402. <NFormItem label="曲目类型" path="subjectType">
  403. <NSelect
  404. placeholder="请选择曲目类型"
  405. v-model:value={state.searchForm.musicSheetType}
  406. options={getSelectDataFromObj(musicSheetType)}
  407. clearable
  408. />
  409. </NFormItem>
  410. <NFormItem label="伴奏类型" path="audioType">
  411. <NSelect
  412. placeholder="请选择伴奏类型"
  413. v-model:value={state.searchForm.audioType}
  414. options={getSelectDataFromObj(musicSheetAudioType)}
  415. clearable
  416. />
  417. </NFormItem>
  418. <NFormItem label="可用声部" path="subjectId">
  419. <NSelect
  420. placeholder="请选择可用声部"
  421. v-model:value={state.searchForm.subjectId}
  422. options={state.subjectList}
  423. clearable
  424. />
  425. </NFormItem>
  426. <NFormItem label="乐谱教材" path="musicCategoryId">
  427. <NCascader
  428. valueField="id"
  429. labelField="name"
  430. children-field="children"
  431. placeholder="请选择乐谱教材"
  432. v-model:value={state.searchForm.musicCategoryId}
  433. options={state.musicSheetCategories}
  434. clearable
  435. />
  436. </NFormItem>
  437. {/*<NFormItem*/}
  438. {/* label="可用途径"*/}
  439. {/* path="availableType"*/}
  440. {/*>*/}
  441. {/* <NSelect*/}
  442. {/* placeholder="请选择可用途径"*/}
  443. {/* v-model:value={state.searchForm.availableType}*/}
  444. {/* options={getSelectDataFromObj(musicSheetAvailableType)}*/}
  445. {/* clearable*/}
  446. {/* >*/}
  447. {/* </NSelect>*/}
  448. {/*</NFormItem>*/}
  449. <NFormItem label="状态" path="status">
  450. <NSelect
  451. v-model:value={state.searchForm.status}
  452. placeholder="请选择状态"
  453. options={
  454. [
  455. {
  456. label: '启用',
  457. value: true
  458. },
  459. {
  460. label: '停用',
  461. value: false
  462. }
  463. ] as any
  464. }
  465. clearable
  466. />
  467. </NFormItem>
  468. <NFormItem label="上传时间" path="authorFrom">
  469. <NDatePicker
  470. v-model:value={state.searchForm.times}
  471. type="daterange"
  472. clearable
  473. value-format="yyyy.MM.dd"
  474. startPlaceholder="开始时间"
  475. endPlaceholder="结束时间"
  476. />
  477. </NFormItem>
  478. <NFormItem>
  479. <NSpace>
  480. <NButton type="primary" onClick={onSearch}>
  481. 搜索
  482. </NButton>
  483. <NButton type="default" onClick={onBtnReset}>
  484. 重置
  485. </NButton>
  486. </NSpace>
  487. </NFormItem>
  488. </SaveForm>
  489. <div class={['section-container']}>
  490. <NSpace style={{ paddingBottom: '12px' }}>
  491. <NButton
  492. type="primary"
  493. //v-auth="musicSheet/save1602302550719426561"
  494. onClick={() => {
  495. state.showAddDialog = true
  496. }}
  497. >
  498. 添加曲目
  499. </NButton>
  500. <NButton
  501. disabled={checkedRowKeysRef.value.length == 0}
  502. //v-auth="musicSheet/save1602302550719426561"
  503. onClick={() => {
  504. onBatchChangeStatus(false)
  505. }}
  506. >
  507. 批量停用
  508. </NButton>
  509. <NButton
  510. disabled={checkedRowKeysRef.value.length == 0}
  511. //v-auth="musicSheet/save1602302550719426561"
  512. onClick={() => {
  513. onBatchChangeStatus(true)
  514. }}
  515. >
  516. 批量启用
  517. </NButton>
  518. </NSpace>
  519. <NDataTable
  520. loading={state.loading}
  521. columns={columns()}
  522. data={state.dataList}
  523. rowKey={(row: any) => row.applicationExtendId}
  524. onUpdateCheckedRowKeys={handleCheck}
  525. scrollX={'2100'}
  526. ></NDataTable>
  527. <Pagination
  528. v-model:page={state.pagination.page}
  529. v-model:pageSize={state.pagination.rows}
  530. v-model:pageTotal={state.pagination.pageTotal}
  531. onList={getList}
  532. sync
  533. saveKey="music-sheet-kt"
  534. ></Pagination>
  535. </div>
  536. <NModal
  537. v-model:show={state.showAddDialog}
  538. preset="dialog"
  539. showIcon={false}
  540. title={'添加曲目'}
  541. style={{ width: '1200px' }}
  542. >
  543. <AddMusic
  544. onClose={() => (state.showAddDialog = false)}
  545. onGetList={() => {
  546. state.pagination.page = 1
  547. getList()
  548. }}
  549. subjectList={state.subjectList}
  550. appId={state.appId}
  551. musicSheetCategories={state.musicSheetCategories}
  552. />
  553. </NModal>
  554. <NModal
  555. v-model:show={state.showEditDialog}
  556. preset="dialog"
  557. showIcon={false}
  558. title={'修改曲目'}
  559. style={{ width: '500px' }}
  560. >
  561. <UpdateMusic
  562. onClose={() => (state.showEditDialog = false)}
  563. onGetList={() => {
  564. state.pagination.page = 1
  565. getList()
  566. }}
  567. rowData={state.updateRow}
  568. appId={state.appId}
  569. musicSheetCategories={state.musicSheetCategories}
  570. />
  571. </NModal>
  572. </div>
  573. )
  574. }
  575. }
  576. })