import { defineComponent, h, onMounted, reactive, ref } from 'vue'
import SaveForm from '@components/save-form'
import {
DataTableColumns,
DataTableRowKey,
NButton,
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 {
musicSheetAvailableType,
musicSheetPaymentType,
musicSheetSourceType,
musicSheetType
} from '@/utils/constant'
import {musicSheetApplicationExtendSaveBatch, musicSheetApplicationExtendTagList, 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: 'klx-addMusic',
props: {
appId: {
type: String,
required: true
},
subjectList: {
type: Array,
default: () => []
},
musicSheetTagList: {
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,
musicSheetTagList: [] as any,
globalMusicTagIds: [] as any, //曲目标签
globalPaymentType: null as any, //收费方式
globalMusicPrice: null as any, //曲目价格
globalAvailableType: null as any, //可用途径
globalTopFlag: null as any, //是否置顶
globalExquisiteFlag: null as any, //精品乐谱
globalStartSortNum: null as any // 排序起始值
})
onMounted(async () => {
state.loading = true
state.subjectList = props.subjectList
// state.musicSheetTagList = props.musicSheetTagList
// 加载曲目标签
try {
const {data} = await musicSheetApplicationExtendTagList({applicationId: props.appId})
if (data && data.length > 0) {
data.forEach((item: any) => {
state.musicSheetTagList.push({
...item,
label: item.name,
value: item.id
})
})
}
} catch (err) {
}
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.musicTagIds || item.musicTagIds.length == 0) {
message.error('曲目标签不能为空')
return
}
if (!item.paymentType) {
message.error('收费方式不能为空')
return
}
if (item.paymentType === 'FREE') {
item.musicPrice = 0
} else {
if (!item.musicPrice) {
message.error('曲目价格不能为空')
return
}
}
if (!item.availableType) {
message.error('可用途径不能为空')
return
}
if (typeof item.topFlag !== 'boolean') {
message.error('是否置顶不能为空')
return
}
if (typeof item.exquisiteFlag !== 'boolean') {
message.error('是否精品不能为空')
return
}
if (!item.sortNo) {
message.error('排序号不能为空')
return
}
params.push({
...item,
musicSheetId: item.id,
applicationId: props.appId,
paymentType: item.paymentType.join(','),
musicTagIds: item.musicTagIds.join(','),
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'
},
[
h(NSelect, {
onUpdateValue(v) {
state.globalMusicTagIds = v
},
multiple: true,
clearable: true,
options: state.musicSheetTagList
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.musicTagIds = state.globalMusicTagIds
}
}
})
}}
>
)
},
key: 'musicTagIds',
render: (row: any) => {
// })
return (
{
row['musicTagIds'] = value
}}
/>
)
}
})
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'
},
[
h(NSelect, {
value: state.globalPaymentType,
onUpdateValue(v) {
state.globalPaymentType = v
const free = 'FREE'
if (state.globalPaymentType[state.globalPaymentType.length - 1] == free) {
state.globalPaymentType = [free]
return
}
if (state.globalPaymentType.length > 1 && state.globalPaymentType.includes(free)) {
state.globalPaymentType.splice(state.globalPaymentType.indexOf(free), 1)
}
},
multiple: true,
clearable: true,
options: getSelectDataFromObj(musicSheetPaymentType)
}
)
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.paymentType = state.globalPaymentType
}
}
})
}}
>
)
},
key: 'paymentType',
width:'180px',
render: (row: any) => {
return (
{
row.paymentType = value
const free = 'FREE'
if(row.paymentType[row.paymentType.length - 1] == free) {
row.paymentType = [free]
return
}
if (row.paymentType.length > 1 && row.paymentType.includes(free)) {
row.paymentType.splice(row.paymentType.indexOf(free), 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(NInputNumber, {
onUpdateValue(v) {
state.globalMusicPrice = v
},
min: 0,
max: 9999
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
if (state.globalMusicPrice) {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.musicPrice = state.globalMusicPrice
}
}
}
})
}}
>
)
},
key: 'musicPrice',
render: (row: any) => {
return h(NInputNumber, {
value: row.musicPrice,
min: 0,
max: 9999,
onUpdateValue(value: any) {
row['musicPrice'] = value
}
})
}
})
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: getSelectDataFromObj(musicSheetAvailableType)
})
]
)
},
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(NSelect, {
onUpdateValue(v) {
state.globalTopFlag = 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.topFlag = state.globalTopFlag
}
}
})
}}
>
)
},
key: 'topFlag',
render: (row: any) => {
return (
{
row['topFlag'] = value
}}
/>
)
}
})
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.globalExquisiteFlag = 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.exquisiteFlag = state.globalExquisiteFlag
}
}
})
}}
>
)
},
key: 'exquisiteFlag',
render: (row: any) => {
return (
{
row['exquisiteFlag'] = value
}}
options={
[
{
label: '是',
value: true
},
{
label: '否',
value: false
}
] as any
}
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.globalStartSortNum = v
},
min: 0,
max: 9999
})
]
)
},
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
for (let i = 0; i < state.selectRowData.length; i++) {
const item = state.selectRowData[i]
item.sortNo = state.globalStartSortNum + 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 (
)
}
}
})