|
|
@@ -1,16 +1,26 @@
|
|
|
import {defineComponent, onMounted, reactive, ref} from "vue";
|
|
|
import SaveForm from "@components/save-form";
|
|
|
-import {NButton, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NImage, NInput, NModal, NSelect, NSpace} from "naive-ui";
|
|
|
+import {DataTableRowKey, NButton, NCascader, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage} from "naive-ui";
|
|
|
import Pagination from "@components/pagination";
|
|
|
import TheTooltip from "@components/TheTooltip";
|
|
|
-import AddMusic from "@views/music-library/project-music-sheet/module/jmedu/addMusic";
|
|
|
+import AddMusic from "@views/music-library/project-music-sheet/module/cooleshow-edu/addMusic";
|
|
|
+import {musicSheetApplicationExtendCategoryList, musicSheetApplicationOwnerList, musicSheetPageByApplication, musicSheetStatusList} from "@views/music-library/api";
|
|
|
+import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
|
|
|
+import {musicSheetAudioType, musicSheetAvailableType, musicSheetPaymentType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
|
|
|
+import {sysApplicationPage} from "@views/menu-manage/api";
|
|
|
+import {subjectPage} from "@views/system-manage/api";
|
|
|
+import {filterTimes} from "@/utils/dateUtil";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'project-music-sheet-jmedu',
|
|
|
|
|
|
setup() {
|
|
|
+ const dialog = useDialog()
|
|
|
+ const message = useMessage()
|
|
|
const state = reactive({
|
|
|
loading: false,
|
|
|
+ appKey: 'KT',
|
|
|
+ appId: null as any,
|
|
|
pagination: {
|
|
|
page: 1,
|
|
|
rows: 10,
|
|
|
@@ -18,15 +28,76 @@ export default defineComponent({
|
|
|
},
|
|
|
searchForm: {
|
|
|
keyword: null,
|
|
|
- subjectType: null,
|
|
|
- musicSubject: null,
|
|
|
- status: null
|
|
|
+ applicationId: null, //应用ID
|
|
|
+ musicSheetType: null, //曲目类型(SINGLE:单曲 CONCERT:合奏)
|
|
|
+ subjectId: null, //声部ID
|
|
|
+ subjectIds: null, //曲目声部ID集合
|
|
|
+ musicCategoryIds: null, //曲目分类ID
|
|
|
+ status: null, //曲目状态（0：停用，1：启用）
|
|
|
+ sourceType: null, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人)
|
|
|
+ paymentType: null, //收费类型(FREE:免费;VIP:会员;CHARGE:单曲收费)
|
|
|
+ userId: null, //所属人
|
|
|
+ musicCategoryId: null, //曲目分类ID
|
|
|
+ times: null, // 上传时间
|
|
|
+ // startTime: null, //上传时间（年月日）
|
|
|
+ // endTime: null, //上传时间（年月日）
|
|
|
+ audioType: null, //音频类型(HOMEMODE: 自制 COMMON: 普通)
|
|
|
+ exquisiteFlag: null, //精品标志
|
|
|
+ topFlag: null, //是否置顶(0:否;1:是)
|
|
|
+ availableType: null, //可用途径 ORG 机构 PLATFORM 平台
|
|
|
+ appAuditFlag: null, //是否审核版本
|
|
|
+ detailFlag: null, //是否查询详情
|
|
|
},
|
|
|
subjectList: [],
|
|
|
- showAdd: false
|
|
|
+ showAdd: false,
|
|
|
+ dataList: [] as any[],
|
|
|
+ musicSheetCategories: [],
|
|
|
+ showAddDialog: false,
|
|
|
+ showEditDialog: false,
|
|
|
+ userIdDisable: true,
|
|
|
+ userIdData: [] as any,
|
|
|
})
|
|
|
|
|
|
- onMounted(() => {
|
|
|
+ onMounted(async () => {
|
|
|
+
|
|
|
+ // 获取应用APP信息
|
|
|
+ {
|
|
|
+ const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: state.appKey})
|
|
|
+ const tempList = data.rows || []
|
|
|
+ if (!tempList || tempList.length == 0) {
|
|
|
+ message.error("加载项目信息失败");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ state.appId = tempList[0].id
|
|
|
+ state.searchForm.applicationId = tempList[0].id
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载声部
|
|
|
+ {
|
|
|
+ try {
|
|
|
+ const {data} = await subjectPage({page: 1, rows: 999})
|
|
|
+ const tempList = data.rows || []
|
|
|
+ tempList.forEach((item: any) => {
|
|
|
+ item.label = item.name
|
|
|
+ item.value = item.id + ''
|
|
|
+ })
|
|
|
+ state.subjectList = tempList
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //加载曲目分类列表
|
|
|
+ {
|
|
|
+ const {data} = await musicSheetApplicationExtendCategoryList({applicationIds: state.appId})
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ state.musicSheetCategories = data[0].musicSheetCategories
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载表格数据
|
|
|
+ {
|
|
|
+ getList()
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const saveForm = ref()
|
|
|
@@ -39,19 +110,90 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
const onSubmit = () => {
|
|
|
+ state.pagination.page = 1
|
|
|
+ getList()
|
|
|
+ }
|
|
|
|
|
|
+ const checkedRowKeysRef = ref<DataTableRowKey[]>([])
|
|
|
+ const handleCheck = (rowKeys: DataTableRowKey[]) => {
|
|
|
+ checkedRowKeysRef.value = rowKeys
|
|
|
+ }
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+ try {
|
|
|
+ state.loading = true
|
|
|
+ const {data} = await musicSheetPageByApplication({
|
|
|
+ ...state.pagination,
|
|
|
+ ...state.searchForm,
|
|
|
+ ...filterTimes(state.searchForm.times, ['startTime', 'endTime']),
|
|
|
+ })
|
|
|
+ state.pagination.pageTotal = Number(data.total)
|
|
|
+ state.dataList = data.rows || []
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const onChangeStatus = (row: any) => {
|
|
|
+ const statusStr = row.status ? '停用' : '启用'
|
|
|
+ dialog.warning({
|
|
|
+ title: '警告',
|
|
|
+ content: `是否${statusStr}？`,
|
|
|
+ positiveText: '确定',
|
|
|
+ negativeText: '取消',
|
|
|
+ onPositiveClick: async () => {
|
|
|
+ try {
|
|
|
+ await musicSheetStatusList({
|
|
|
+ ids: new Array(row.id),
|
|
|
+ status: !row.status
|
|
|
+ })
|
|
|
+ getList()
|
|
|
+ message.success(`${statusStr}成功`)
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const onBatchChangeStatus = (status: boolean) => {
|
|
|
+ const length = checkedRowKeysRef.value.length;
|
|
|
+ if (length == 0) {
|
|
|
+ message.warning("未选择数据")
|
|
|
+ }
|
|
|
+ const statusStr = !status ? '停用' : '启用'
|
|
|
+ dialog.warning({
|
|
|
+ title: '警告',
|
|
|
+ content: `是否${statusStr}` + length + `条数据？`,
|
|
|
+ positiveText: '确定',
|
|
|
+ negativeText: '取消',
|
|
|
+ onPositiveClick: async () => {
|
|
|
+ try {
|
|
|
+ await musicSheetStatusList({
|
|
|
+ ids: checkedRowKeysRef.value,
|
|
|
+ status: status
|
|
|
+ })
|
|
|
+ getList()
|
|
|
+ message.success(`${statusStr}成功`)
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const columns = (): any => {
|
|
|
return [
|
|
|
{
|
|
|
+ type: 'selection'
|
|
|
+ },
|
|
|
+ {
|
|
|
title: '曲目信息',
|
|
|
key: 'id',
|
|
|
render: (row: any) => (
|
|
|
<>
|
|
|
<NDescriptions labelPlacement="left" column={1}>
|
|
|
<NDescriptionsItem label="曲目名称">
|
|
|
- <TheTooltip content={row.musicSheetName}/>{' '}
|
|
|
+ <TheTooltip content={row.name}/>{' '}
|
|
|
</NDescriptionsItem>
|
|
|
<NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
|
|
|
</NDescriptions>
|
|
|
@@ -59,55 +201,57 @@ export default defineComponent({
|
|
|
)
|
|
|
},
|
|
|
{
|
|
|
- title: '封面图',
|
|
|
- key: 'titleImg',
|
|
|
- render(row: any) {
|
|
|
- return <NImage width={60} height={60} src={row.titleImg}/>
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
title: '曲目来源',
|
|
|
key: 'musicSheetCategoriesName',
|
|
|
render: (row: any) => (
|
|
|
<>
|
|
|
<NDescriptions labelPlacement="left" column={1}>
|
|
|
<NDescriptionsItem label="曲目来源">
|
|
|
- <TheTooltip content={row.musicSheetCategoriesName}/>{' '}
|
|
|
- </NDescriptionsItem>
|
|
|
- <NDescriptionsItem label="所属人">
|
|
|
- {row.accompanimentType === 'HOMEMODE' ? '自制伴奏' : '普通伴奏'}
|
|
|
+ {getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))}
|
|
|
</NDescriptionsItem>
|
|
|
+ <NDescriptionsItem label="所属人">{row.userName}</NDescriptionsItem>
|
|
|
</NDescriptions>
|
|
|
</>
|
|
|
)
|
|
|
},
|
|
|
{
|
|
|
title: '曲目类型',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'musicSheetType',
|
|
|
+ render: (row: any) => {
|
|
|
+ return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
title: '可用声部',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'subjectIdNames'
|
|
|
},
|
|
|
{
|
|
|
title: '分类',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'musicSheetCategoryName'
|
|
|
},
|
|
|
{
|
|
|
title: '是否收费',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'paymentType',
|
|
|
+ render: (row: any) => {
|
|
|
+ return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
title: '上传人',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'userId'
|
|
|
},
|
|
|
{
|
|
|
title: '上传时间',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'createTime'
|
|
|
},
|
|
|
{
|
|
|
title: '状态',
|
|
|
- key: 'musicSheetCategoriesName'
|
|
|
+ key: 'status',
|
|
|
+ render(row: any) {
|
|
|
+ return (
|
|
|
+ <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
|
|
|
+ )
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
@@ -121,7 +265,7 @@ export default defineComponent({
|
|
|
size="small"
|
|
|
text
|
|
|
//v-auth="musicSheet/status1612431726029942786"
|
|
|
- // onClick={() => onChangeStatus(row)}
|
|
|
+ onClick={() => onChangeStatus(row)}
|
|
|
>
|
|
|
{row.status ? '停用' : '启用'}
|
|
|
</NButton>
|
|
|
@@ -131,9 +275,7 @@ export default defineComponent({
|
|
|
text
|
|
|
//v-auth="musicSheet/update1602302618558099458"
|
|
|
onClick={() => {
|
|
|
- // state.visiableMusic = true
|
|
|
- // state.musicOperation = 'edit'
|
|
|
- // state.musicData = row
|
|
|
+ state.showEditDialog = true
|
|
|
}}
|
|
|
>
|
|
|
修改
|
|
|
@@ -152,54 +294,89 @@ export default defineComponent({
|
|
|
ref={saveForm}
|
|
|
model={state.searchForm}
|
|
|
onSubmit={onSubmit}
|
|
|
- saveKey="music-list"
|
|
|
+ saveKey="cooleshow-edu"
|
|
|
onSetModel={(val: any) => (state.searchForm = val)}
|
|
|
>
|
|
|
|
|
|
<NFormItem label="关键词" path="keyword">
|
|
|
<NInput
|
|
|
- placeholder="曲目名称/编号"
|
|
|
+ placeholder="请输入曲目名称/编号"
|
|
|
v-model:value={state.searchForm.keyword}
|
|
|
clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
-
|
|
|
+ <NFormItem label="分类" path="musicCategoryId">
|
|
|
+ <NCascader
|
|
|
+ valueField="id"
|
|
|
+ labelField="name"
|
|
|
+ children-field="children"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ v-model:value={state.searchForm.musicCategoryId}
|
|
|
+ options={state.musicSheetCategories}
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem
|
|
|
+ label="可用途径"
|
|
|
+ path="availableType"
|
|
|
+ >
|
|
|
+ <NSelect
|
|
|
+ placeholder="请选择可用途径"
|
|
|
+ v-model:value={state.searchForm.availableType}
|
|
|
+ options={getSelectDataFromObj(musicSheetAvailableType)}
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </NSelect>
|
|
|
+ </NFormItem>
|
|
|
<NFormItem label="曲目类型" path="subjectType">
|
|
|
<NSelect
|
|
|
placeholder="请选择曲目类型"
|
|
|
- v-model:value={state.searchForm.subjectType}
|
|
|
- options={
|
|
|
- [
|
|
|
- {
|
|
|
- label: '独奏',
|
|
|
- value: '1'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '合奏',
|
|
|
- value: '2'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ v-model:value={state.searchForm.musicSheetType}
|
|
|
+ options={getSelectDataFromObj(musicSheetType)}
|
|
|
clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
- <NFormItem label="伴奏类型" path="musicSubject">
|
|
|
+ <NFormItem label="曲目来源" path="sourceType">
|
|
|
<NSelect
|
|
|
+ placeholder="请选择曲目来源"
|
|
|
+ v-model:value={state.searchForm.sourceType}
|
|
|
+ options={getSelectDataFromObj(musicSheetSourceType)}
|
|
|
+ onUpdateValue={async (value: any) => {
|
|
|
+ console.log(value)
|
|
|
+ state.userIdData = []
|
|
|
+ state.searchForm.userId = null
|
|
|
+ if (value) {
|
|
|
+ const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
|
|
|
+ const temp = data.rows || []
|
|
|
+ temp.forEach((next: any) => {
|
|
|
+ state.userIdData.push({
|
|
|
+ ...next,
|
|
|
+ label: next.userName,
|
|
|
+ value: next.userId
|
|
|
+ })
|
|
|
+ })
|
|
|
+ state.userIdDisable = false
|
|
|
+ } else {
|
|
|
+ state.userIdDisable = true
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
- <NFormItem label="声部" path="musicSubject">
|
|
|
+ <NFormItem label="所属人" path="userId">
|
|
|
<NSelect
|
|
|
- placeholder="请选择声部"
|
|
|
- v-model:value={state.searchForm.musicSubject}
|
|
|
- options={state.subjectList}
|
|
|
+ placeholder="请选择所属人"
|
|
|
+ disabled={state.userIdDisable}
|
|
|
+ v-model:value={state.searchForm.userId}
|
|
|
+ options={state.userIdData}
|
|
|
clearable
|
|
|
- />
|
|
|
+ >
|
|
|
+ </NSelect>
|
|
|
</NFormItem>
|
|
|
<NFormItem label="状态" path="status">
|
|
|
<NSelect
|
|
|
- v-model={[state.searchForm.status, 'value']}
|
|
|
+ v-model:value={state.searchForm.status}
|
|
|
placeholder="请选择状态"
|
|
|
- clearable
|
|
|
options={
|
|
|
[
|
|
|
{
|
|
|
@@ -212,61 +389,28 @@ export default defineComponent({
|
|
|
}
|
|
|
] as any
|
|
|
}
|
|
|
+ clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
- <NFormItem label="曲目来源" path="authorFrom">
|
|
|
+ <NFormItem label="声部" path="subjectId">
|
|
|
<NSelect
|
|
|
- placeholder="请选择曲目来源"
|
|
|
- // v-model:value={state.searchForm.authorFrom}
|
|
|
- options={
|
|
|
- [
|
|
|
- {
|
|
|
- label: '平台',
|
|
|
- value: 'PLATFORM'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '机构',
|
|
|
- value: 'TENANT'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '个人',
|
|
|
- value: 'SELF'
|
|
|
- }
|
|
|
- ] as any
|
|
|
- }
|
|
|
+ placeholder="请选择声部"
|
|
|
+ v-model:value={state.searchForm.subjectId}
|
|
|
+ options={state.subjectList}
|
|
|
clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
-
|
|
|
- <NFormItem label="曲目类型" path="authorFrom">
|
|
|
+ <NFormItem label="伴奏类型" path="audioType">
|
|
|
<NSelect
|
|
|
- placeholder="请选择收费类型"
|
|
|
- // v-model:value={state.searchForm.authorFrom}
|
|
|
- options={
|
|
|
- [
|
|
|
- {
|
|
|
- label: '独奏',
|
|
|
- value: 'PLATFORM'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '合奏',
|
|
|
- value: 'TENANT'
|
|
|
- }
|
|
|
- ] as any
|
|
|
- }
|
|
|
+ placeholder="请选择伴奏类型"
|
|
|
+ v-model:value={state.searchForm.audioType}
|
|
|
+ options={getSelectDataFromObj(musicSheetAudioType)}
|
|
|
clearable
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
-
|
|
|
- <NFormItem label="所属人" path="authorFrom">
|
|
|
- <NInput></NInput>
|
|
|
- </NFormItem>
|
|
|
- <NFormItem label="曲目分类" path="authorFrom">
|
|
|
- <NSelect></NSelect>
|
|
|
- </NFormItem>
|
|
|
<NFormItem label="上传时间" path="authorFrom">
|
|
|
<NDatePicker
|
|
|
- // v-model:value={state.searchForm.times}
|
|
|
+ v-model:value={state.searchForm.times}
|
|
|
type="daterange"
|
|
|
clearable
|
|
|
value-format="yyyy.MM.dd"
|
|
|
@@ -298,19 +442,19 @@ export default defineComponent({
|
|
|
新增
|
|
|
</NButton>
|
|
|
<NButton
|
|
|
+ disabled={checkedRowKeysRef.value.length == 0}
|
|
|
//v-auth="musicSheet/save1602302550719426561"
|
|
|
onClick={() => {
|
|
|
- // state.musicOperation = 'unable'
|
|
|
- // state.musicData = {}
|
|
|
+ onBatchChangeStatus(false)
|
|
|
}}
|
|
|
>
|
|
|
批量禁用
|
|
|
</NButton>
|
|
|
<NButton
|
|
|
+ disabled={checkedRowKeysRef.value.length == 0}
|
|
|
//v-auth="musicSheet/save1602302550719426561"
|
|
|
onClick={() => {
|
|
|
- // state.musicOperation = 'enable'
|
|
|
- // state.musicData = {}
|
|
|
+ onBatchChangeStatus(true)
|
|
|
}}
|
|
|
>
|
|
|
批量启用
|
|
|
@@ -320,16 +464,18 @@ export default defineComponent({
|
|
|
<NDataTable
|
|
|
loading={state.loading}
|
|
|
columns={columns()}
|
|
|
- // data={state.dataList}
|
|
|
+ data={state.dataList}
|
|
|
+ rowKey={(row: any) => row.id}
|
|
|
+ onUpdateCheckedRowKeys={handleCheck}
|
|
|
></NDataTable>
|
|
|
|
|
|
<Pagination
|
|
|
v-model:page={state.pagination.page}
|
|
|
v-model:pageSize={state.pagination.rows}
|
|
|
v-model:pageTotal={state.pagination.pageTotal}
|
|
|
- // onList={getList}
|
|
|
+ onList={getList}
|
|
|
sync
|
|
|
- saveKey="music-list"
|
|
|
+ saveKey="cooleshow-edu"
|
|
|
></Pagination>
|
|
|
</div>
|
|
|
|
|
|
@@ -338,9 +484,13 @@ export default defineComponent({
|
|
|
preset="dialog"
|
|
|
showIcon={false}
|
|
|
title={'添加曲目'}
|
|
|
- style={{width: '1200px',height: '800px'}}
|
|
|
+ style={{width: '1200px'}}
|
|
|
>
|
|
|
- <AddMusic/>
|
|
|
+ <AddMusic
|
|
|
+ subjectList={state.subjectList}
|
|
|
+ appId={state.appId}
|
|
|
+ musicSheetCategories={state.musicSheetCategories}
|
|
|
+ />
|
|
|
</NModal>
|
|
|
</div>
|
|
|
)
|
yuanliang