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 { musicSheetSourceType, musicSheetType } from '@/utils/constant'
import {musicSheetApplicationExtendCategoryList, musicSheetApplicationExtendSaveBatch, musicSheetPage} from '@views/music-library/api'
import deepClone from '@/utils/deep.clone'
import { getOwnerName } from '@views/music-library/musicUtil'
import TheTooltip from "@components/TheTooltip";
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
},
subjectList: [] as any,
showAdd: false,
currentStep: 1,
dataList: [],
selectRowData: [] as any, // 选择的数据列表
musicSheetCategories: [] as any,
startSortNum: null as any, // 排序起始值
projectMusicCategoryId: null as any // 曲目分类ID
})
onMounted(async () => {
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 getList()
})
const getList = async () => {
try {
state.loading = true
const { data } = await musicSheetPage({
...state.pagination,
...state.searchForm,
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.projectMusicCategoryId) {
message.error('排序号不能为空')
return
}
params.push({
...item,
musicSheetId: item.id,
musicSheetCategoryId: item.projectMusicCategoryId,
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'
},
{
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,
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)
})
}
return () => {
return (
)
}
}
})