resource-admin/src/views/music-library/music-sheet/component/music-list.tsx

import SaveForm from '@/components/save-form'
import Pagination from '@/components/pagination'
import {
  DataTableRowKey,
  NButton,
  NCascader,
  NDataTable,
  NDescriptions,
  NDescriptionsItem,
  NDropdown,
  NFormItem,
  NIcon,
  NImage,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTag,
  NTooltip,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import {
  musicSheetApplicationOwnerList,
  musicSheetPage,
  musicSheetRemove,
  musicSheetImg,
  musicSheetStatusList,
  musicTagPage,
  musicSheetCategoriesQueryTree
} from '../../api'
import MusicOperation from '../modal/music-operationV2'
import { subjectPage } from '@/views/system-manage/api'
import MusicPreView from '../modal/musicPreView'
import UseProject from '@views/music-library/music-sheet/modal/use-project'
import { getMapValueByKey } from '@/utils/filters'
import { appKey, musicSheetSourceType } from '@/utils/constant'
import { getSelectDataFromObj } from '@/utils/objectUtil'
import { sysApplicationPage } from '@views/menu-manage/api'
import { getOwnerName, copyText } from '@views/music-library/musicUtil'
import styles from './music-list.module.less'
import MusicCreateImg from '../modal/music-create-img'
import TheTooltip from '@components/TheTooltip'
import { HelpCircleOutline } from '@vicons/ionicons5'
import { musicalInstrumentPage } from '@views/system-manage/subject-manage/api'
import MusiceBeatTime from '../modal/musiceBeatTime'

export default defineComponent({
  name: 'music-list',
  props: ['searchId', 'musicCategoryId'],
  setup(props, { emit }) {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        isScoreRender: null,
        subjectId: null, //声部ID
        sourceType: null, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人
        composer: null, //作曲人/音乐人
        userId: null, //所属人
        applicationId: null, //所属人项目ID
        useAppId: [] as any, //适用项目ID
        status: null, //曲目状态（0：停用，1：启用）
        appAuditFlag: null, //是否审核版本
        categoriesId: null, //是否审核版本
        musicCategoryId: null, //曲目分类
        musicalInstrumentId: null, // 乐器ID
        dataCorrect: null, // 数据修复
        generateFirst: null, // 妙级课需要针对生成节拍器音频
        generateMetronomeAudio: null // 是否生成节拍器音频
      },
      dataList: [] as any,
      subjectList: [] as any,
      instrumentList: [] as any,
      tagList: [] as any,
      visiableMusic: false,
      musicOperation: 'add',
      musicData: {} as any,
      musicSheetCategories: [] as any,
      musicPreview: false,
      musicPreviewScoreType: 'staff', // 预览谱面类型
      musicScore: null as any,
      showUseProject: false, // 适用项目
      useProjectData: [] as any, // 适用项目行数据
      showUseProjectId: null as any, // 适用项目行数据
      detailReadonly: false, // 新增、修改、详情是否可编辑
      userIdDisable: true, // 所属人
      userIdData: [] as any, // 所属人数据列表
      productOpen: false,
      beatTimeOpen: false,
      productItem: {} as any
    })

    const columns = (): any => {
      return [
        {
          type: 'selection'
        },
        {
          title: '曲目名称',
          minWidth: '200px',
          key: 'id',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="名称">
                  <TheTooltip content={row.name} />
                </NDescriptionsItem>
                <NDescriptionsItem label="编号">
                  <div
                    onDblclick={() => {
                      copyText(message, row.id)
                    }}
                  >
                    <TheTooltip content={row.id} />
                  </div>
                </NDescriptionsItem>
              </NDescriptions>
            )
          }
        },
        {
          title: '封面图',
          key: 'titleImg',
          render(row: any): JSX.Element {
            return <NImage width={60} height={60} src={row.musicCover} />
          }
        },
        {
          title: '曲目信息',
          minWidth: '200px',
          key: 'composer',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="音乐人">{row.composer}</NDescriptionsItem>
                <NDescriptionsItem label="总谱渲染">
                  {row.isScoreRender ? '支持' : '不支持'}
                </NDescriptionsItem>
                <NDescriptionsItem label="分类">
                  <TheTooltip content={row.musicCategoryName} />
                </NDescriptionsItem>
                <NDescriptionsItem label="可用声部">
                  <TheTooltip content={row.subjectNames} />
                </NDescriptionsItem>
                {/*<NDescriptionsItem label="可用乐器">*/}
                {/*  <TheTooltip content={row.musicalInstrumentNames} />*/}
                {/*</NDescriptionsItem>*/}
              </NDescriptions>
            )
          }
        },
        {
          title: '作者属性',
          minWidth: '250px',
          key: 'sourceType',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="属性">
                  {getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))}
                </NDescriptionsItem>
                <NDescriptionsItem label="所属人">
                  {getOwnerName(row.musicSheetExtend, row.sourceType)}
                </NDescriptionsItem>
              </NDescriptions>
            )
          }
        },
        {
          title: '适用项目',
          key: 'projectName',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="musicSheetApplicationExtend/save1752901206883221506"
                  onClick={() => {
                    state.showUseProject = true
                    state.showUseProjectId = row.id
                  }}
                >
                  <TheTooltip
                    content={
                      row.musicSheetExtend && row.musicSheetExtend.useApplicationNames
                        ? row.musicSheetExtend.useApplicationNames
                        : ''
                    }
                  />
                  <NIcon size={15} style="padding-left: 9px">
                    <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>
            )
          }
        },
        {
          title: '更新信息',
          minWidth: '250px',
          key: 'updateBy',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="更新人">{row.updateByName}</NDescriptionsItem>
                <NDescriptionsItem label="更新时间">{row.updateTime}</NDescriptionsItem>
              </NDescriptions>
            )
          }
        },
        {
          title: '审核版本',
          minWidth: '100px',
          key: 'appAuditFlag',
          render(row: any) {
            return <div>{row.appAuditFlag ? '是' : '否'}</div>
          }
        },
        {
          title: '状态',
          minWidth: '50px',
          key: 'status',
          render(row: any) {
            return (
              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
            )
          }
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: '300px',
          render(row: any) {
            return (
              <NSpace>
                <NDropdown
                  trigger="hover"
                  options={[
                    { label: '五线谱', key: 'staff' },
                    { label: '首调', key: 'firstTone' },
                    { label: '固定调', key: 'fixedTone' }
                  ]}
                  onSelect={(key: string) => {
                    state.musicPreview = true
                    state.musicScore = row
                    state.musicPreviewScoreType = key
                  }}
                >
                  <NButton
                    type="primary"
                    size="small"
                    text
                    onClick={(e: Event) => e.stopPropagation()}
                  >
                    预览
                  </NButton>
                </NDropdown>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="musicSheet/detail1751241103201271810"
                  onClick={() => {
                    state.visiableMusic = true
                    state.musicOperation = 'preview'
                    state.musicData = row
                    state.detailReadonly = true
                  }}
                >
                  查看
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  disabled={row.playMode === 'MIDI'}
                  v-auth="musicSheet/save1751241178962984962"
                  onClick={() => {
                    state.visiableMusic = true
                    state.musicOperation = 'edit'
                    state.musicData = row
                    state.detailReadonly = true
                  }}
                >
                  修改
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="musicSheet/statusList1751241653309407234"
                  onClick={() => onChangeStatus(row)}
                >
                  {row.status ? '停用' : '启用'}
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="musicSheet/img1751240591299051522"
                  onClick={() => {
                    state.productOpen = true
                    state.productItem = row
                    // handleAutoProduct(row)
                  }}
                >
                  生成图片
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="musicSheet/addMix1819259767120539649"
                  onClick={() => {
                    state.productItem = row
                    state.beatTimeOpen = true
                  }}
                >
                  生成节拍器音频
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  disabled={!!row.status}
                  onClick={() => onRmove(row)}
                  v-auth="musicSheet/remove1753457445635645442"
                >
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const checkedRowKeysRef = ref<DataTableRowKey[]>([])
    const handleCheck = (rowKeys: DataTableRowKey[]) => {
      checkedRowKeysRef.value = rowKeys
    }

    const onChangeStatus = (row: any) => {
      const statusStr = row.status ? '停用' : '启用'
      dialog.warning({
        title: '提示',
        content: `是否${statusStr}？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await musicSheetStatusList({
              ids: new Array(row.id),
              status: !row.status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {}
        }
      })
    }

    const onBatchChangeStatus = (status: boolean) => {
      const length = checkedRowKeysRef.value.length
      if (length == 0) {
        message.warning('未选择数据')
      }
      const statusStr = !status ? '停用' : '启用'
      dialog.warning({
        title: '提示',
        content: `是否${statusStr}` + length + `条数据？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await musicSheetStatusList({
              ids: checkedRowKeysRef.value,
              status: status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {}
        }
      })
    }

    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 onRmove = (row: any): void => {
      dialog.warning({
        title: '提示',
        content: `删除"${row.name}"，是否继续？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await musicSheetRemove({ id: row.id })
            getList()
            message.success('删除成功')
          } catch {}
        }
      })
    }

    const getList = async () => {
      try {
        state.loading = true
        const sourceType = state.searchForm.sourceType
        const userId = state.searchForm.userId
        let search = {
          ...state.searchForm,
          useAppId: state.searchForm.useAppId
            ? state.searchForm.useAppId.join(',')
            : state.searchForm.useAppId
        } as any
        if (sourceType) {
          if (sourceType == 'ORG') {
            search.organizationRoleId = userId
            search.userId = null
          }
        }
        const opt = { ...state.pagination, ...search }
        opt.generateFirst && (opt.musicCategoryId = "100061")
        const { data } = await musicSheetPage(opt)
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {}
      state.loading = false
    }

    // 获取标签
    const getTagList = async () => {
      try {
        const { data } = await musicTagPage({ page: 1, rows: 999 })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.name
          item.value = item.id
        })
        state.tagList = tempList
      } catch {}
    }

    // 获取分类
    const getMusicSheetCategorieList = async () => {
      try {
        const { data } = await musicSheetCategoriesQueryTree({})
        // state.musicSheetCategories = filterPointCategory(data, 'musicSheetCategoriesList')
        state.musicSheetCategories = data || []
        clearEmptyMusicCategory(state.musicSheetCategories)
      } catch (e) {}
    }

    const clearEmptyMusicCategory = (data: any) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].musicSheetCategoriesList.length < 1) {
          data[i].musicSheetCategoriesList = null
        } else {
          clearEmptyMusicCategory(data[i].musicSheetCategoriesList)
        }
      }
    }

    // 获取声部
    const initSubjectList = async () => {
      try {
        const { data } = await subjectPage({ page: 1, rows: 999 })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.name
          item.value = item.id + ''
        })
        state.subjectList = tempList
      } catch {}
    }

    const initInstrumentList = async () => {
      try {
        const { data } = await musicalInstrumentPage({ page: 1, rows: 999 })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.name
          item.value = item.id + ''
        })
        state.instrumentList = tempList
      } catch {}
    }

    // app列表
    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 saveForm = ref()
    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }
    watch(
      () => props.searchId,
      (val) => {
        console.log(val, 'searchId')
      }
    )
    const onSearch = () => {
      checkedRowKeysRef.value = []
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    onMounted(async () => {
      state.loading = true
      // getTagList()
      if (props.searchId) {
        state.searchForm.categoriesId = props.searchId || null
      }
      if (props.musicCategoryId) {
        state.searchForm.musicCategoryId = props.musicCategoryId || null
      }

      initSubjectList()
      initInstrumentList()
      initUseAppList()
      getMusicSheetCategorieList()
      getList()
    })

    return () => (
      <div class="system-menu-container">
        <SaveForm
          ref={saveForm}
          model={state.searchForm}
          onSubmit={onSubmit}
          saveKey="music-list"
          onSetModel={(val: any) => (state.searchForm = val)}
        >
          <NFormItem label="关键词" path="keyword">
            <NInput
              placeholder="曲目编号/名称"
              v-model:value={state.searchForm.keyword}
              clearable
            />
          </NFormItem>
          <NFormItem label="总谱渲染" path="isScoreRender">
            <NSelect
              placeholder="请选择总谱渲染"
              v-model:value={state.searchForm.isScoreRender}
              options={
                [
                  {
                    label: '支持',
                    value: true
                  },
                  {
                    label: '不支持',
                    value: false
                  }
                ] as any
              }
              clearable
            />
          </NFormItem>
          <NFormItem label="曲目分类" path="musicCategoryId">
            <NCascader
              valueField="id"
              labelField="name"
              children-field="musicSheetCategoriesList"
              placeholder="请选择曲目分类"
              v-model:value={state.searchForm.musicCategoryId}
              options={state.musicSheetCategories}
              clearable
            />
          </NFormItem>
          <NFormItem label="可用声部" path="musicSubject">
            <NSelect
              placeholder="请选择可用声部"
              v-model:value={state.searchForm.subjectId}
              options={state.subjectList}
              filterable
              clearable
            />
          </NFormItem>
          <NFormItem label="可用乐器" path="musicalInstrumentId">
            <NSelect
              placeholder="请选择可用乐器"
              v-model:value={state.searchForm.musicalInstrumentId}
              options={state.instrumentList}
              filterable
              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 = !state.searchForm.applicationId
                } 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="userId">
            {{
              label: () => (
                <div>
                  所属人
                  {/*<NTooltip style={"padding-left: 10px"}>*/}
                  {/*  {{*/}
                  {/*    default: () => '请选择作者属性和项目再选择所属人',*/}
                  {/*    trigger: () => (*/}
                  {/*        <span>*/}
                  {/*             <NIcon size="20">*/}
                  {/*                 <HelpCircleOutline/>*/}
                  {/*             </NIcon>*/}
                  {/*       </span>*/}
                  {/*    )*/}
                  {/*  }}*/}
                  {/*</NTooltip>*/}
                </div>
              ),
              default: () => (
                <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 label="适用项目" path="useAppId">
            <NSelect
              placeholder="请选择适用项目"
              v-model:value={state.searchForm.useAppId}
              options={state.useProjectData}
              multiple
              maxTagCount={1}
            />
          </NFormItem>
          <NFormItem label="状态" path="status">
            <NSelect
              v-model={[state.searchForm.status, 'value']}
              placeholder="请选择状态"
              clearable
              options={
                [
                  {
                    label: '启用',
                    value: true
                  },
                  {
                    label: '停用',
                    value: false
                  }
                ] as any
              }
            />
          </NFormItem>
          <NFormItem label="审核版本" path="appAuditFlag">
            <NSelect
              v-model={[state.searchForm.appAuditFlag, 'value']}
              placeholder="请选择审核版本"
              clearable
              options={
                [
                  {
                    label: '是',
                    value: 1
                  },
                  {
                    label: '否',
                    value: 0
                  }
                ] as any
              }
            />
          </NFormItem>
          <NFormItem label="数据修复" path="dataCorrect">
            <NSelect
              v-model={[state.searchForm.dataCorrect, 'value']}
              placeholder="请选择数据修复"
              clearable
              options={
                [
                  {
                    label: '是',
                    value: true
                  },
                  {
                    label: '否',
                    value: false
                  }
                ] as any
              }
            />
          </NFormItem>
          <NFormItem label="生成节拍器音频" path="generateMetronomeAudio">
            <NSelect
              v-model={[state.searchForm.generateMetronomeAudio, 'value']}
              placeholder="请选择是否生成节拍器音频"
              clearable
              options={
                [
                  {
                    label: '已生成',
                    value: true
                  },
                  {
                    label: '未生成',
                    value: false
                  }
                ] as any
              }
            />
          </NFormItem>
          <NFormItem label="妙极客节拍器" path="generateFirst">
            <NSelect
              v-model={[state.searchForm.generateFirst, 'value']}
              placeholder="请选择妙极客节拍器"
              clearable
              options={
                [
                  {
                    label: '是',
                    value: true
                  },
                  {
                    label: '否',
                    value: false
                  }
                ] as any
              }
            />
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>
        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="primary"
              v-auth="musicSheet/save1751241178962984962"
              onClick={() => {
                state.visiableMusic = true
                state.musicOperation = 'add'
                state.musicData = {}
                state.detailReadonly = true
              }}
            >
              新增曲目
            </NButton>
            <NButton
              disabled={checkedRowKeysRef.value.length == 0}
              v-auth="musicSheet/statusList1751241653309407234"
              onClick={() => {
                onBatchChangeStatus(false)
              }}
            >
              批量停用
            </NButton>
            <NButton
              disabled={checkedRowKeysRef.value.length == 0}
              v-auth="musicSheet/statusList1751241653309407234"
              onClick={() => {
                onBatchChangeStatus(true)
              }}
            >
              批量启用
            </NButton>
          </NSpace>

          <NDataTable
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
            rowKey={(row: any) => row.id}
            v-model:checkedRowKeys={checkedRowKeysRef.value}
            scrollX={'1200'}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="music-list"
          ></Pagination>
        </div>
        <NModal
          v-model:show={state.visiableMusic}
          preset="dialog"
          showIcon={false}
          maskClosable={false}
          title={() => {
            if (state.musicOperation === 'add') {
              return '添加曲目'
            } else if (state.musicOperation === 'preview') {
              return '曲目详情'
            }
            return '修改曲目'
          }}
          style={{ width: '980px' }}
        >
          <MusicOperation
            type={state.musicOperation}
            data={state.musicData}
            subjectList={state.subjectList}
            // musicSheetCategories={state.musicSheetCategories}
            // tagList={state.tagList}
            onClose={() => (state.visiableMusic = false)}
            onGetList={getList}
          />
        </NModal>
        <NModal
          blockScroll={true}
          v-model:show={state.musicPreview}
          preset="dialog"
          showIcon={false}
          title={'曲目预览'}
          style={{ width: 'auto' }}
        >
          <MusicPreView
            item={state.musicScore}
            isMove={1}
            scoreType={state.musicPreviewScoreType}
          />
        </NModal>

        <NModal
          blockScroll={true}
          v-model:show={state.showUseProject}
          preset="dialog"
          showIcon={false}
          title={'适用项目'}
          style={{ width: '500px' }}
        >
          <UseProject
            id={state.showUseProjectId}
            useProject={state.useProjectData}
            onClose={() => (state.showUseProject = false)}
            onGetList={getList}
          />
        </NModal>

        <NModal
          class={styles.productModal}
          title="自动生成曲谱图片"
          v-model:show={state.productOpen}
          preset="dialog"
          closeOnEsc={false}
          maskClosable={false}
          showIcon={false}
        >
          <MusicCreateImg
            xmlFileUrl={state.productItem.xmlFileUrl}
            onClose={() => (state.productOpen = false)}
            onConfirm={async (item: any) => {
              try {
                await musicSheetImg({
                  ...item,
                  id: state.productItem.id
                })
              } catch {}
            }}
          />
        </NModal>
        {state.beatTimeOpen && (
          <MusiceBeatTime
            id={state.productItem.id}
            onClose={() => {
              state.beatTimeOpen = false
            }}
          ></MusiceBeatTime>
        )}
      </div>
    )
  }
})