import { defineComponent, h, onMounted, reactive, ref } from 'vue'
import SaveForm from '@components/save-form'
import {
DataTableColumns,
DataTableRowKey,
NButton,
NCascader,
NDataTable,
NFormItem,
NIcon,
NImage,
NInput,
NInputNumber,
NSelect,
NSpace,
NStep,
NSteps,
useDialog,
useMessage
} from 'naive-ui'
import Pagination from '@components/pagination'
import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
import {
appKey,
musicSheetAvailableType,
musicSheetSourceType,
musicSheetType,
scoreType
} from '@/utils/constant'
import {
musicSheetApplicationExtendCategoryList,
musicSheetApplicationExtendSaveBatch,
musicSheetApplicationOwnerList,
musicSheetPage
} from '@views/music-library/api'
import deepClone from '@/utils/deep.clone'
import { getOwnerName } from '@views/music-library/musicUtil'
import TheTooltip from '@components/TheTooltip'
import { sysApplicationPage } from '@views/menu-manage/api'
export default defineComponent({
name: 'gyt-addMusic',
props: {
appId: {
type: String,
required: true
},
subjectList: {
type: Array,
default: () => []
},
musicSheetCategories: {
type: Array,
default: () => []
}
},
emits: ['close', 'getList'],
setup(props, { slots, attrs, emit }) {
const dialogs = useDialog()
const message = useMessage()
const state = reactive({
loading: false,
pagination: {
page: 1,
rows: 5,
pageTotal: 0
},
stepPagination: {
page: 1,
rows: 5,
pageTotal: 0
},
searchForm: {
keyword: null,
// musicSheetType: null,
subjectId: null,
sourceType: null,
composer: null,
userId: null,
applicationId: null
},
subjectList: [] as any,
showAdd: false,
currentStep: 1,
dataList: [],
selectRowData: [] as any, // 选择的数据列表
musicSheetCategories: [] as any,
startSortNum: null as any, // 排序起始值
// projectMusicCategoryId: null as any, // 曲目分类ID
isConvertibleScore: null as any, //是否支持转简谱
status: false, // 是否启用
scoreType: null as any, //默认谱面
useProjectData: [] as any, // 适用项目行数据
userIdDisable: true,
userIdData: [] as any,
globalAvailableType: null as any
})
onMounted(async () => {
state.searchForm.keyword = null
// state.searchForm.musicSheetType = null
state.searchForm.subjectId = null
state.searchForm.sourceType = null
state.searchForm.composer = null
state.searchForm.userId = null
state.searchForm.applicationId = null
state.loading = true
state.subjectList = props.subjectList
// state.musicSheetCategories = props.musicSheetCategories
//加载曲目分类列表
try {
const { data } = await musicSheetApplicationExtendCategoryList({
applicationIds: props.appId,
enable: true
})
if (data && data.length > 0) {
state.musicSheetCategories = data[0].musicSheetCategories
}
} catch {}
await initUseAppList()
await getList()
})
const initUseAppList = async () => {
try {
const appKeys = Object.keys(appKey)
const { data } = await sysApplicationPage({ page: 1, rows: 999 })
const tempList = data.rows || []
state.useProjectData = []
const filter = tempList.filter((next: any) => {
return appKeys.includes(next.appKey)
})
filter.forEach((item: any) => {
state.useProjectData.push({
...item,
label: item.appName,
value: item.id
})
})
} catch {}
}
const getList = async () => {
try {
state.loading = true
const search = {
...state.searchForm,
userId:
state.searchForm.sourceType && state.searchForm.sourceType == 'PERSON'
? state.searchForm.userId
: null,
organizationRoleId:
state.searchForm.sourceType && state.searchForm.sourceType == 'ORG'
? state.searchForm.userId
: null
}
const { data } = await musicSheetPage({
...state.pagination,
...search,
addAppId: props.appId
})
state.pagination.pageTotal = Number(data.total)
state.dataList = data.rows || []
} catch {}
state.loading = false
}
const saveForm = ref()
const onSearch = () => {
checkedRowKeysRef.value = []
saveForm.value?.submit()
}
const onBtnReset = () => {
saveForm.value?.reset()
}
const onSubmit = () => {
state.pagination.page = 1
getList()
}
const updateUserIdData = async (sourceType: any) => {
if (!state.searchForm.applicationId) {
return
}
state.userIdData = []
state.searchForm.userId = null
if (sourceType && sourceType !== 'PLATFORM') {
const { data } = await musicSheetApplicationOwnerList({
page: 1,
rows: 9999,
sourceType: sourceType,
applicationId: state.searchForm.applicationId
})
const temp = data.rows || []
temp.forEach((next: any) => {
state.userIdData.push({
...next,
label: sourceType === 'PERSON' ? next.userName : next.organizationRole,
value: sourceType === 'PERSON' ? next.userId : next.organizationRoleId
})
})
}
}
const onSave = async () => {
if (state.selectRowData.length == 0) {
message.error('未选择曲目')
return
}
const params = [] as any[]
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
if (!item.availableType) {
message.error('可用途径不能为空')
return
}
// if (!item.projectMusicCategoryId) {
// message.error('曲目分类不能为空')
// return
// }
if (item.scoreType == null) {
message.error('默认谱面不能为空')
return
}
if (item.isConvertibleScore == null) {
message.error('是否支持转谱不能为空')
return
}
if (item.status == null) {
message.error('是否启用不能为空')
return
}
params.push({
...item,
musicSheetId: item.id,
// musicSheetCategoryId: item.projectMusicCategoryId,
availableType: item.availableType,
applicationId: props.appId,
id: null
})
}
const res = (await musicSheetApplicationExtendSaveBatch(params)) as any
if (res && res.code == '200') {
message.success(`添加成功`)
emit('getList')
emit('close')
}
}
const columnsField = [
{
type: 'selection'
},
{
title: '曲目编号',
key: 'id'
},
{
title: '封面图',
key: 'titleImg',
render(row: any) {
return
}
},
{
title: '可用声部',
key: 'subjectNames',
render: (row: any) => {
return
}
},
{
title: '曲目名称',
key: 'name'
},
{
title: '音乐人',
key: 'composer'
},
{
title: '曲目分类',
key: 'musicCategoryName'
},
// {
// title: '谱面渲染',
// key: 'musicSheetType',
// render: (row: any) => {
// return (
//
// {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
//
// )
// }
// },
{
title: '曲目来源',
key: 'sourceType',
render(row: any) {
return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
}
},
{
title: '所属人',
key: 'userName',
render: (row: any) => {
return
}
}
]
const columns = (): any => {
return columnsField
}
const stepColumns = (): DataTableColumns => {
const field = deepClone(columnsField)
field.splice(0, 1)
field.push({
title(column: any) {
return (
可用途径
{
dialogs.create({
title: '请选择可用途径',
showIcon: false,
content: () => {
return h(
'div',
{
class: 'flex flex-col justify-center items-center text-14px'
},
[
// icon
h(NSelect, {
onUpdateValue(v) {
state.globalAvailableType = v
},
clearable: true,
options: [
{
label: '学校',
value: 'ORG'
},
{
label: '平台',
value: 'PLATFORM'
}
]
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.availableType = state.globalAvailableType
}
}
})
}}
>
)
},
key: 'availableType',
render: (row: any) => {
return (
{
row['availableType'] = value
}}
clearable
/>
)
}
})
// field.push({
// title(column: any) {
// return (
//
// 曲目分类
// {
// dialogs.create({
// title: '请选择曲目分类',
// showIcon: false,
// content: () => {
// return h(
// 'div',
// {
// class: 'flex flex-col justify-center items-center text-14px'
// },
// [
// // icon
// h(NCascader, {
// onUpdateValue(v) {
// state.projectMusicCategoryId = v
// },
// valueField: 'id',
// labelField: 'name',
// childrenField: 'children',
// placeholderField: '请选择曲目分类',
// filterable: true,
// options: state.musicSheetCategories
// })
// ]
// )
// },
// positiveText: '确定',
// negativeText: '取消',
// onPositiveClick: () => {
// for (let i = 0; i < state.selectRowData.length; i++) {
// const item = state.selectRowData[i]
// item.projectMusicCategoryId = state.projectMusicCategoryId
// }
// }
// })
// }}
// >
//
//
//
//
//
// )
// },
// key: 'projectMusicCategoryId',
// width: 200,
// render: (row: any) => {
// // })
// return (
// {
// row.projectMusicCategoryId = value
// }}
// filterable
// clearable
// />
// )
// }
// })
field.push({
title(column: any) {
return (
默认谱面
{
dialogs.create({
title: '请选择默认谱面',
showIcon: false,
content: () => {
return h(
'div',
{
class: 'flex flex-col justify-center items-center text-14px'
},
[
// icon
h(NSelect, {
onUpdateValue(v) {
state.scoreType = v
},
options: getSelectDataFromObj(scoreType)
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.scoreType = state.scoreType
}
}
})
}}
>
)
},
key: 'scoreType',
width: 200,
render: (row: any) => {
// })
return (
{
row.scoreType = value
}}
clearable
/>
)
}
})
field.push({
title(column: any) {
return (
是否支持转谱
{
dialogs.create({
title: '是否支持转谱',
showIcon: false,
content: () => {
return h(
'div',
{
class: 'flex flex-col justify-center items-center text-14px'
},
[
// icon
h(NSelect, {
onUpdateValue(v) {
state.isConvertibleScore = v
},
options: [
{
label: '是',
value: true
},
{
label: '否',
value: false
}
] as any
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.isConvertibleScore = state.isConvertibleScore
}
}
})
}}
>
)
},
key: 'isConvertibleScore',
width: 200,
render: (row: any) => {
// })
return (
{
row.isConvertibleScore = value
}}
filterable
clearable
/>
)
}
})
field.push({
title(column: any) {
return (
是否启用
{
dialogs.create({
title: '是否启用',
showIcon: false,
content: () => {
return h(
'div',
{
class: 'flex flex-col justify-center items-center text-14px'
},
[
// icon
h(NSelect, {
onUpdateValue(v) {
state.status = v
},
options: [
{
label: '是',
value: true
},
{
label: '否',
value: false
}
] as any
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.status = state.status
}
}
})
}}
>
)
},
key: 'status',
width: 200,
render: (row: any) => {
// })
return (
{
row.status = value
}}
filterable
clearable
/>
)
}
})
field.push({
title(column: any) {
return (
排序
{
dialogs.create({
title: '请输入排序起始值',
showIcon: false,
content: () => {
return h(
'div',
{
class: 'flex flex-col justify-center items-center text-14px'
},
[
// icon
h(NInputNumber, {
onUpdateValue(v) {
state.startSortNum = v
},
min: 0,
max: 9999
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
if (state.startSortNum) {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.sortNo = state.startSortNum + i
}
}
}
})
}}
>
)
},
key: 'sortNo',
width: 150,
render: (row: any) => {
return h(NInputNumber, {
value: row.sortNo,
min: 0,
max: 9999,
onUpdateValue(value: any) {
row.sortNo = value
}
})
}
})
field.push({
title: '操作',
key: 'operation',
fixed: 'right',
render(row: any) {
return (
{
dialogs.warning({
title: '提示',
content: `是否删除该数据？`,
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
try {
const index = state.selectRowData.findIndex((item: any) => {
if (item.id == row.id) {
return true
}
})
if (index > -1) {
state.selectRowData.splice(index, 1)
}
const index1 = checkedRowKeysRef.value.findIndex((item: any) => {
if (item == row.id) {
return true
}
})
if (index1 > -1) {
checkedRowKeysRef.value.splice(index, 1)
}
} catch {}
}
})
}}
>
移除
)
}
})
return field
}
const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys: DataTableRowKey[]) => {
checkedRowKeysRef.value = rowKeys
// 添加行更新值
state.dataList.forEach((next: any) => {
if (checkedRowKeysRef.value.includes(next.id)) {
const find = state.selectRowData.find((row: any) => {
return row.id === next.id
})
if (!find) {
next.status = false
state.selectRowData.push(next)
}
}
})
// 去掉行更新值
state.selectRowData = state.selectRowData.filter((next: any) => {
return checkedRowKeysRef.value.includes(next.id)
})
}
return () => {
return (
)
}
}
})