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, musicSheetSourceType, musicSheetType} 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: 'kt-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 btnLoading = ref(false)
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
useProjectData: [] as any, // 适用项目行数据
userIdDisable: true,
userIdData: [] 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
})
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 = () => {
saveForm.value?.submit()
}
const onBtnReset = () => {
saveForm.value?.reset()
}
const onSubmit = () => {
state.pagination.page = 1
getList()
}
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.projectMusicCategoryId) {
message.error('乐谱教材不能为空')
return
}
if (!item.sortNo) {
item.sortNo = 0
}
params.push({
...item,
musicSheetId: item.id,
musicSheetCategoryId: item.projectMusicCategoryId,
applicationId: props.appId,
id: null
})
}
btnLoading.value = true
try {
const res = (await musicSheetApplicationExtendSaveBatch(params)) as any
if (res && res.code == '200') {
message.success(`添加成功`)
emit('getList')
emit('close')
}
} catch (err) {}
btnLoading.value = false
}
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: '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(NCascader, {
onUpdateValue(v) {
state.projectMusicCategoryId = v
},
valueField: 'id',
labelField: 'name',
childrenField: 'children',
placeholderField: '请选择乐谱教材',
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',
fixed: 'right',
width: 200,
render: (row: any) => {
// })
return (
{
row.projectMusicCategoryId = 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(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',
fixed: 'right',
width: 150,
render: (row: any) => {
return h(NInputNumber, {
value: row.sortNo,
min: 0,
max: 9999,
defaultValue: 0,
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) {
state.selectRowData.push(next)
}
}
})
// 去掉行更新值
state.selectRowData = state.selectRowData.filter((next: any) => {
return checkedRowKeysRef.value.includes(next.id)
})
}
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
})
})
}
}
return () => {
return (
)
}
}
})