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

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, musicSheetPage} from "@views/music-library/api";
import deepClone from "@/utils/deep.clone";
import {getOwnerName} from "@views/music-library/musicUtil";

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(() => {
      state.subjectList = props.subjectList
      state.musicSheetTagList = props.musicSheetTagList
      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,
          // musicSheetCategoryId: item.projectMusicCategoryId,
          applicationId: props.appId,
          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 <NImage width={40} height={40} src={row.musicCover}/>
        }
      },
      {
        title: '声部',
        key: 'subjectNames',
      },
      {
        title: '曲目名称',
        key: 'name',
      },
      {
        title: '音乐人',
        key: 'composer',
      },
      {
        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 <div>{getOwnerName(row.musicSheetExtend, row.sourceType)}</div>
        }
      },
    ]

    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",
                                   },
                                   [
                                     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
                               }
                               console.log(state.selectRowData)
                             },
                           })
                         }
                         }
                >
                  <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: 'musicTagIds',
        render: (row: any) => {
          // })
          return (
              <NSelect
                  placeholder="请选择曲目标签"
                  value={row.musicTagIds}
                  options={state.musicSheetTagList}
                  clearable
                  multiple
                  maxTagCount={1}
                  onUpdateValue={(value) => {
                    row['musicTagIds'] = value
                  }}
              />
          )
        }
      })
      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",
                                   },
                                   [
                                     h(NSelect, {
                                       onUpdateValue(v) {
                                         state.globalPaymentType = v
                                       },
                                       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
                               }
                             },
                           })
                         }
                         }
                >
                  <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: 'paymentType',
        render: (row: any) => {
          return (
              <NSelect
                  placeholder="请选择收费方式"
                  value={row.paymentType}
                  options={getSelectDataFromObj(musicSheetPaymentType)}
                  clearable
                  onUpdateValue={(value) => {
                    row['paymentType'] = value
                  }}
              />
          )
        }
      })
      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.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
                                 }
                               }
                             },
                           })
                         }
                         }
                >
                  <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: '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 (
              <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: getSelectDataFromObj(musicSheetAvailableType)
                                     }),
                                   ]
                               )
                             },
                             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={getSelectDataFromObj(musicSheetAvailableType)}
                  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(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
                               }
                             },
                           })
                         }
                         }
                >
                  <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: 'topFlag',
        render: (row: any) => {
          return (
              <NSelect
                  placeholder="请选择是否置顶"
                  value={row.topFlag}
                  options={[
                    {
                      label: '是',
                      value: true
                    },
                    {
                      label: '否',
                      value: false
                    }
                  ] as any}
                  clearable
                  onUpdateValue={(value) => {
                    row['topFlag'] = value
                  }}
              />
          )
        }
      })
      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.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
                               }
                             },
                           })
                         }
                         }
                >
                  <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: 'exquisiteFlag',
        render: (row: any) => {
          return (
              <NSelect
                  placeholder="请选择是否精品"
                  value={row.exquisiteFlag}
                  onUpdateValue={(value) => {
                    row['exquisiteFlag'] = value
                  }}
                  options={[
                    {
                      label: '是',
                      value: true
                    },
                    {
                      label: '否',
                      value: false
                    }
                  ] as any}
                  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.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
                               }
                             },
                           })
                         }
                         }
                >
                  <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',
        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 (
              <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) {
            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="sourceType">
                      <NSelect
                          placeholder="请选择曲目来源"
                          v-model:value={state.searchForm.sourceType}
                          options={getSelectDataFromObj(musicSheetSourceType)}
                          // onUpdateValue={async (value: any) => {
                          // }}
                          clearable
                      />
                    </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}
                  ></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>
      )
    }
  }
})