resource-admin/src/views/music-library/project-music-sheet/module/gyt/addMusic.tsx

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 <NImage width={40} height={40} src={row.musicCover} />
        }
      },
      {
        title: '可用声部',
        key: 'subjectNames',
        render: (row: any) => {
          return <TheTooltip content={row.subjectNames} />
        }
      },
      {
        title: '曲目名称',
        key: 'name'
      },
      {
        title: '音乐人',
        key: 'composer'
      },
      {
        title: '曲目分类',
        key: 'musicCategoryName'
      },
      // {
      //   title: '谱面渲染',
      //   key: 'musicSheetType',
      //   render: (row: any) => {
      //     return (
      //       <div>
      //         {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
      //       </div>
      //     )
      //   }
      // },
      {
        title: '曲目来源',
        key: 'sourceType',
        render(row: any) {
          return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
        }
      },
      {
        title: '所属人',
        key: 'userName',
        render: (row: any) => {
          return <TheTooltip content={getOwnerName(row.musicSheetExtend, row.sourceType)} />
        }
      }
    ]

    const columns = (): any => {
      return columnsField
    }

    const stepColumns = (): DataTableColumns => {
      const field = deepClone(columnsField)
      field.splice(0, 1)
      field.push({
        title(column: any) {
          return (
            <NSpace>
              可用途径
              <NButton
                type="primary"
                size="small"
                text
                onClick={() => {
                  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
                      }
                    }
                  })
                }}
              >
                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
                    <path
                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </NIcon>
              </NButton>
            </NSpace>
          )
        },
        key: 'availableType',
        render: (row: any) => {
          return (
            <NSelect
              placeholder="请选择可用途径"
              value={row.availableType}
              options={[
                {
                  label: '学校',
                  value: 'ORG'
                },
                {
                  label: '平台',
                  value: 'PLATFORM'
                }
              ]}
              onUpdateValue={(value) => {
                row['availableType'] = value
              }}
              clearable
            />
          )
        }
      })
      // field.push({
      //   title(column: any) {
      //     return (
      //       <NSpace>
      //         曲目分类
      //         <NButton
      //           type="primary"
      //           size="small"
      //           text
      //           onClick={() => {
      //             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
      //                 }
      //               }
      //             })
      //           }}
      //         >
      //           <NIcon size={15} style="padding-left: 5px;margin-top:4px">
      //             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      //               <path d="M2 26h28v2H2z" fill="currentColor"></path>
      //               <path
      //                 d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
      //                 fill="currentColor"
      //               ></path>
      //             </svg>
      //           </NIcon>
      //         </NButton>
      //       </NSpace>
      //     )
      //   },
      //   key: 'projectMusicCategoryId',
      //   width: 200,
      //   render: (row: any) => {
      //     // })
      //     return (
      //       <NCascader
      //         valueField="id"
      //         labelField="name"
      //         children-field="children"
      //         placeholder="请选择曲目分类"
      //         value={row.projectMusicCategoryId}
      //         options={state.musicSheetCategories}
      //         onUpdateValue={(value: any) => {
      //           row.projectMusicCategoryId = value
      //         }}
      //         filterable
      //         clearable
      //       />
      //     )
      //   }
      // })
      field.push({
        title(column: any) {
          return (
            <NSpace>
              默认谱面
              <NButton
                type="primary"
                size="small"
                text
                onClick={() => {
                  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
                      }
                    }
                  })
                }}
              >
                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
                    <path
                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </NIcon>
              </NButton>
            </NSpace>
          )
        },
        key: 'scoreType',
        width: 200,
        render: (row: any) => {
          // })
          return (
            <NSelect
              placeholder="请选择默认谱面"
              value={row.scoreType}
              options={getSelectDataFromObj(scoreType)}
              onUpdateValue={(value: any) => {
                row.scoreType = value
              }}
              clearable
            />
          )
        }
      })
      field.push({
        title(column: any) {
          return (
            <NSpace>
              是否支持转谱
              <NButton
                type="primary"
                size="small"
                text
                onClick={() => {
                  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
                      }
                    }
                  })
                }}
              >
                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
                    <path
                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </NIcon>
              </NButton>
            </NSpace>
          )
        },
        key: 'isConvertibleScore',
        width: 200,
        render: (row: any) => {
          // })
          return (
            <NSelect
              value={row.isConvertibleScore}
              options={[
                {
                  label: '是',
                  value: true
                },
                {
                  label: '否',
                  value: false
                } as any
              ]}
              onUpdateValue={(value: any) => {
                row.isConvertibleScore = value
              }}
              filterable
              clearable
            />
          )
        }
      })

      field.push({
        title(column: any) {
          return (
            <NSpace>
              是否启用
              <NButton
                type="primary"
                size="small"
                text
                onClick={() => {
                  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
                      }
                    }
                  })
                }}
              >
                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
                    <path
                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </NIcon>
              </NButton>
            </NSpace>
          )
        },
        key: 'status',
        width: 200,
        render: (row: any) => {
          // })
          return (
            <NSelect
              value={row.status}
              options={[
                {
                  label: '是',
                  value: true
                },
                {
                  label: '否',
                  value: false
                } as any
              ]}
              onUpdateValue={(value: any) => {
                row.status = value
              }}
              filterable
              clearable
            />
          )
        }
      })

      field.push({
        title(column: any) {
          return (
            <NSpace>
              排序
              <NButton
                type="primary"
                size="small"
                text
                onClick={() => {
                  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
                        }
                      }
                    }
                  })
                }}
              >
                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
                    <path
                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </NIcon>
              </NButton>
            </NSpace>
          )
        },
        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 (
            <NSpace>
              <NButton
                type="primary"
                size="small"
                text
                //v-auth="musicSheet/update1602302618558099458"
                onClick={() => {
                  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 {}
                    }
                  })
                }}
              >
                移除
              </NButton>
            </NSpace>
          )
        }
      })
      return field
    }

    const checkedRowKeysRef = ref<DataTableRowKey[]>([])
    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 (
        <div class="system-menu-container">
          <NSpace vertical size="medium">
            <NSteps
              current={state.currentStep}
              // onUpdateCurrent={()=>{
              //   state.currentStep = val
              // }}
              style={'margin-bottom: 10px;margin-top: 10px'}
            >
              <NStep title="选择曲目" description=""></NStep>
              <NStep title="设置曲目信息" description=""></NStep>
            </NSteps>
          </NSpace>
          {state.currentStep === 1 && (
            <div class="system-menu-container">
              <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                // saveKey="cooleshow-edu-addMusic"
                onSetModel={(val: any) => (state.searchForm = val)}
              >
                <NFormItem label="关键词" path="keyword">
                  <NInput
                    v-model:value={state.searchForm.keyword}
                    placeholder="请输入曲目名称/编号"
                    clearable
                  />
                </NFormItem>
                {/* <NFormItem label="谱面渲染" path="musicSheetType">
                  <NSelect
                    placeholder="请选择谱面渲染"
                    v-model:value={state.searchForm.musicSheetType}
                    options={getSelectDataFromObj(musicSheetType)}
                    clearable
                  />
                </NFormItem> */}
                <NFormItem label="可用声部" path="musicSubject">
                  <NSelect
                    placeholder="请选择可用声部"
                    v-model:value={state.searchForm.subjectId}
                    options={state.subjectList}
                    clearable
                  />
                </NFormItem>
                <NFormItem label="音乐人" path="composer">
                  <NInput
                    placeholder="请选择音乐人"
                    v-model:value={state.searchForm.composer}
                    clearable
                  />
                </NFormItem>
                <NFormItem label="曲目来源" path="sourceType">
                  <NSelect
                    placeholder="请选择曲目来源"
                    v-model:value={state.searchForm.sourceType}
                    options={getSelectDataFromObj(musicSheetSourceType)}
                    onUpdateValue={async (value: any) => {
                      state.userIdData = []
                      state.searchForm.userId = null
                      if (value && value !== 'PLATFORM') {
                        await updateUserIdData(value)
                        state.userIdDisable = false
                      } else {
                        state.userIdDisable = true
                      }
                    }}
                    clearable
                  />
                </NFormItem>
                <NFormItem label="所属项目" path="applicationId">
                  <NSelect
                    placeholder="请选择所属项目"
                    v-model:value={state.searchForm.applicationId}
                    options={state.useProjectData}
                    clearable
                    onUpdateValue={async (value: any) => {
                      state.searchForm.applicationId = value
                      if (value) {
                        await updateUserIdData(state.searchForm.sourceType)
                        state.userIdDisable = !(
                          state.searchForm.sourceType && state.searchForm.sourceType !== 'PLATFORM'
                        )
                      } else {
                        state.searchForm.userId = null
                        state.userIdDisable = true
                        state.userIdData = []
                      }
                    }}
                  />
                </NFormItem>
                <NFormItem label="所属人" path="author">
                  <NSelect
                    filterable
                    placeholder="请选择所属人"
                    disabled={
                      state.userIdDisable ||
                      (!state.searchForm.applicationId && !state.searchForm.sourceType)
                    }
                    v-model:value={state.searchForm.userId}
                    options={state.userIdData}
                    clearable
                  ></NSelect>
                </NFormItem>
                <NFormItem>
                  <NSpace>
                    <NButton type="primary" onClick={onSearch}>
                      搜索
                    </NButton>
                    <NButton type="default" onClick={onBtnReset}>
                      重置
                    </NButton>
                  </NSpace>
                </NFormItem>
              </SaveForm>
              <p style={{ paddingBottom: '12px' }}>
                你选择了<span style={'color:red;padding:0 8px'}>{state.selectRowData.length}</span>
                条曲目
              </p>
              <NDataTable
                loading={state.loading}
                columns={columns()}
                data={state.dataList}
                rowKey={(row: any) => row.id}
                onUpdateCheckedRowKeys={handleCheck}
                v-model:checkedRowKeys={checkedRowKeysRef.value}
              ></NDataTable>
              <Pagination
                v-model:page={state.pagination.page}
                v-model:pageSize={state.pagination.rows}
                v-model:pageTotal={state.pagination.pageTotal}
                onList={getList}
                sync
                // saveKey="cooleshow-edu-addMusic"
              ></Pagination>
            </div>
          )}
          {state.currentStep === 2 && (
            <div class="system-menu-container" style={'margin-top: 15px;'}>
              <NDataTable
                loading={state.loading}
                columns={stepColumns()}
                data={state.selectRowData}
                rowKey={(row: any) => row.id}
                maxHeight={500}
                scrollX={2000}
              ></NDataTable>
            </div>
          )}
          <NSpace justify="end" style={'margin-top:10px'}>
            <NButton
              type="default"
              onClick={() => {
                if (state.currentStep > 1) {
                  state.currentStep = state.currentStep - 1
                } else {
                  emit('close')
                }
              }}
            >
              {state.currentStep === 1 ? '取消' : '上一步'}
            </NButton>
            <NButton
              type="primary"
              onClick={() => {
                if (state.currentStep < 2) {
                  if (state.selectRowData.length == 0) {
                    message.warning('请选择曲目')
                    return
                  }
                  state.currentStep = state.currentStep + 1
                } else {
                  onSave()
                }
              }}
              // loading={btnLoading.value}
              // disabled={btnLoading.value}
            >
              {state.currentStep === 2 ? '确定' : '下一步'}
            </NButton>
          </NSpace>
        </div>
      )
    }
  }
})