酷乐秀添加曲目

src/utils/constant.ts

@@ -271,6 +271,7 @@ export const musicSheetPaymentType = {
 export const musicSheetAvailableType = {
   ORG: '机构',
   PLATFORM: '平台',
+  PERSON: '个人',
 } as any
 
 // 曲目音频类型

src/views/music-library/project-music-sheet/module/gym/addMusic.tsx

@@ -475,6 +475,9 @@ export default defineComponent({
                       </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()}

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

@@ -475,6 +475,9 @@ export default defineComponent({
                       </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()}

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

@@ -1,34 +1,87 @@
-import {defineComponent, onMounted, reactive, ref} from "vue";
+import {defineComponent, h, onMounted, reactive, ref} from "vue";
 import SaveForm from "@components/save-form";
-import {NButton, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NImage, NInput, NModal, NSelect, NSpace, NStep, NSteps} from "naive-ui";
+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 TheTooltip from "@components/TheTooltip";
+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";
 
 export default defineComponent({
-  name: 'project-music-sheet-mec',
+  name: 'klx-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: 10,
+        rows: 5,
+        pageTotal: 0
+      },
+      stepPagination: {
+        page: 1,
+        rows: 5,
         pageTotal: 0
       },
       searchForm: {
         keyword: null,
-        subjectType: null,
-        musicSubject: null,
-        status: null
+        musicSheetType: null,
+        subjectId: null,
+        sourceType: null,
       },
-      subjectList: [],
+      subjectList: [] as any,
       showAdd: false,
       currentStep: 1,
-      dataList: []
+      dataList: [],
+      selectRowData: [] as any,// 选择的数据列表
+      musicSheetCategories: [] 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.musicSheetCategories = props.musicSheetCategories
+      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 = () => {
@@ -39,108 +92,707 @@ export default defineComponent({
     }
 
     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;
+          return;
+        }
+        if (!item.musicPrice) {
+          message.error('收费价格不能为空')
+          return;
+        }
+        if (!item.availableType) {
+          message.error('可用途径不能为空')
+          return;
+        }
+        if (!item.topFlag) {
+          message.error('是否置顶不能为空')
+          return;
+        }
+        if (!item.exquisiteFlag) {
+          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>{row.musicSheetExtend?.userName ? row.musicSheetExtend?.userName : ''}</div>
+        }
+      },
+    ]
+
     const columns = (): any => {
-      return [
-        {
-          title: '曲目信息',
-          key: 'id',
-          render: (row: any) => (
-              <>
-                <NDescriptions labelPlacement="left" column={1}>
-                  <NDescriptionsItem label="曲目名称">
-                    <TheTooltip content={row.musicSheetName}/>{' '}
-                  </NDescriptionsItem>
-                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
-                </NDescriptions>
-              </>
+      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: []
+                                     }),
+                                   ]
+                               )
+                             },
+                             positiveText: "确定",
+                             negativeText: '取消',
+                             onPositiveClick: () => {
+                               for (let i = 0; i < state.selectRowData.length; i++) {
+                                 const item = state.selectRowData[i];
+                                 item.musicTagIds = state.globalMusicTagIds
+                               }
+                             },
+                           })
+                         }
+                         }
+                >
+                  <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>
           )
+
         },
-        {
-          title: '封面图',
-          key: 'titleImg',
-          render(row: any) {
-            return <NImage width={60} height={60} src={row.titleImg}/>
-          }
-        },
-        {
-          title: '声部',
-          key: 'titleImg',
+        key: 'musicTagIds',
+        render: (row: any) => {
+          // })
+          return (
+              <NSelect
+                  placeholder="请选择曲目标签"
+                  value={row.musicTagIds}
+                  options={[]}
+                  clearable
+                  maxTagCount={2}
+              />
+          )
+        }
+      })
+      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>
+          )
+
         },
-        {
-          title: '曲目名称',
-          key: 'titleImg',
+        key: 'paymentType',
+        render: (row: any) => {
+          return (
+              <NSelect
+                  placeholder="请选择收费方式"
+                  value={row.paymentType}
+                  options={getSelectDataFromObj(musicSheetPaymentType)}
+                  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.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>
+          )
+
         },
-        {
-          title: '音乐人',
-          key: 'titleImg',
+        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>
+          )
+
         },
-        {
-          title: '曲目类型',
-          key: 'titleImg',
+        key: 'availableType',
+        render: (row: any) => {
+          return (
+              <NSelect
+                  placeholder="请选择可用途径"
+                  value={row.availableType}
+                  options={getSelectDataFromObj(musicSheetAvailableType)}
+                  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: 1
+                                         },
+                                         {
+                                           label: '否',
+                                           value: 0
+                                         }
+                                       ]
+                                     }),
+                                   ]
+                               )
+                             },
+                             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>
+          )
+
         },
-        {
-          title: '作者属性',
-          key: 'titleImg',
+        key: 'topFlag',
+        render: (row: any) => {
+          return (
+              <NSelect
+                  placeholder="请选择是否置顶"
+                  value={row.topFlag}
+                  options={[
+                    {
+                      label: '是',
+                      value: 1
+                    },
+                    {
+                      label: '否',
+                      value: 0
+                    }
+                  ]}
+                  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.globalExquisiteFlag = v
+                                       },
+                                       options: [
+                                         {
+                                           label: '是',
+                                           value: 1
+                                         },
+                                         {
+                                           label: '否',
+                                           value: 0
+                                         }
+                                       ]
+                                     }),
+                                   ]
+                               )
+                             },
+                             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>
+          )
+
         },
-        {
-          title: '所属人',
-          key: 'titleImg',
+        key: 'exquisiteFlag',
+        render: (row: any) => {
+          return (
+              <NSelect
+                  placeholder="请选择是否精品"
+                  value={row.exquisiteFlag}
+                  options={[
+                    {
+                      label: '是',
+                      value: 1
+                    },
+                    {
+                      label: '否',
+                      value: 0
+                    }
+                  ]}
+                  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>
+          )
+
         },
-        {
-          title: '操作',
-          key: 'operation',
-          fixed: 'right',
-          render(row: any) {
-            return (
-                <NSpace>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      //v-auth="musicSheet/status1612431726029942786"
-                      // onClick={() => onChangeStatus(row)}
-                  >
-                    {row.status ? '停用' : '启用'}
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      //v-auth="musicSheet/update1602302618558099458"
-                      onClick={() => {
-                        // state.visiableMusic = true
-                        // state.musicOperation = 'edit'
-                        // state.musicData = row
-                      }}
-                  >
-                    修改
-                  </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 updateCurrent = (val: any) => {
-      state.currentStep = val
+    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={updateCurrent} style={"margin-bottom: 20px;"}>
-                <NStep
-                    title="选择分类"
-                    description=""
-                >
-                </NStep>
+              <NSteps
+                  current={state.currentStep}
+                  // onUpdateCurrent={()=>{
+                  //   state.currentStep = val
+                  // }}
+                  style={"margin-bottom: 10px;margin-top: 10px"}
+              >
                 <NStep
-                    title="选择分类下曲目"
+                    title="选择曲目"
                     description=""
                 >
                 </NStep>
@@ -152,26 +804,46 @@ export default defineComponent({
               </NSteps>
             </NSpace>
             {state.currentStep === 1 && (
-                <SaveForm>
-                  <NFormItem label="关键词" path="keyword">
-                    <NSelect></NSelect>
-                  </NFormItem>
-                </SaveForm>
-            )}
-            {state.currentStep === 2 && (
                 <div class="system-menu-container">
-                  <SaveForm>
+                  <SaveForm
+                      ref={saveForm}
+                      model={state.searchForm}
+                      onSubmit={onSubmit}
+                      // saveKey="cooleshow-edu-addMusic"
+                      onSetModel={(val: any) => (state.searchForm = val)}
+                  >
                     <NFormItem label="关键词" path="keyword">
-                      <NSelect></NSelect>
+                      <NInput
+                          v-model:value={state.searchForm.keyword}
+                          placeholder="请输入曲目名称/编号"
+                          clearable
+                      />
                     </NFormItem>
-                    <NFormItem label="曲目类型" path="keyword">
-                      <NSelect></NSelect>
+                    <NFormItem label="曲目类型" path="musicSheetType">
+                      <NSelect
+                          placeholder="请选择曲目类型"
+                          v-model:value={state.searchForm.musicSheetType}
+                          options={getSelectDataFromObj(musicSheetType)}
+                          clearable
+                      />
                     </NFormItem>
-                    <NFormItem label="声部" path="keyword">
-                      <NSelect></NSelect>
+                    <NFormItem label="声部" path="musicSubject">
+                      <NSelect
+                          placeholder="请选择声部"
+                          v-model:value={state.searchForm.subjectId}
+                          options={state.subjectList}
+                          clearable
+                      />
                     </NFormItem>
-                    <NFormItem label="曲目来源" path="keyword">
-                      <NSelect></NSelect>
+                    <NFormItem label="曲目来源" path="sourceType">
+                      <NSelect
+                          placeholder="请选择曲目来源"
+                          v-model:value={state.searchForm.sourceType}
+                          options={getSelectDataFromObj(musicSheetSourceType)}
+                          // onUpdateValue={async (value: any) => {
+                          // }}
+                          clearable
+                      />
                     </NFormItem>
                     <NFormItem>
                       <NSpace>
@@ -184,31 +856,39 @@ export default defineComponent({
                       </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}
+                      onList={getList}
                       sync
-                      saveKey="music-list"
+                      // saveKey="cooleshow-edu-addMusic"
                   ></Pagination>
                 </div>
             )}
-            {state.currentStep === 3 && (
+            {state.currentStep === 2 && (
                 <div class="system-menu-container" style={"margin-top: 15px;"}>
                   <NDataTable
                       loading={state.loading}
-                      columns={columns()}
-                      data={state.dataList}
+                      columns={stepColumns()}
+                      data={state.selectRowData}
+                      rowKey={(row: any) => row.id}
+                      maxHeight={500}
+                      scrollX={2000}
                   ></NDataTable>
                 </div>
             )}
-            <NSpace justify="end">
+            <NSpace justify="end" style={"margin-top:10px"}>
               <NButton type="default" onClick={() => {
                 if (state.currentStep > 1) {
                   state.currentStep = state.currentStep - 1;
@@ -221,16 +901,20 @@ export default defineComponent({
               <NButton
                   type="primary"
                   onClick={() => {
-                    if (state.currentStep < 3) {
+                    if (state.currentStep < 2) {
+                      if (state.selectRowData.length == 0) {
+                        message.warning("请选择曲目")
+                        return
+                      }
                       state.currentStep = state.currentStep + 1;
                     } else {
-                      onSubmit()
+                      onSave()
                     }
                   }}
                   // loading={btnLoading.value}
                   // disabled={btnLoading.value}
               >
-                {state.currentStep === 3 ? '确定' : '下一步'}
+                {state.currentStep === 2 ? '确定' : '下一步'}
               </NButton>
             </NSpace>
           </div>

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

@@ -1,26 +1,9 @@
 import {defineComponent, onMounted, reactive, ref} from "vue";
 import SaveForm from "@components/save-form";
-import {
-  DataTableRowKey,
-  NButton,
-  NCascader,
-  NDataTable,
-  NDatePicker,
-  NDescriptions,
-  NDescriptionsItem,
-  NFormItem,
-  NImage,
-  NInput,
-  NModal,
-  NSelect,
-  NSpace,
-  NTag,
-  useDialog,
-  useMessage
-} from "naive-ui";
+import {DataTableRowKey, NButton, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NImage, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage} from "naive-ui";
 import Pagination from "@components/pagination";
 import TheTooltip from "@components/TheTooltip";
-import AddMusic from "@views/music-library/project-music-sheet/module/gym/addMusic";
+import AddMusic from "@views/music-library/project-music-sheet/module/klx/addMusic";
 import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
 import {musicSheetAudioType, musicSheetAvailableType, musicSheetPaymentType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
 import {musicSheetApplicationExtendCategoryList, musicSheetApplicationOwnerList, musicSheetPageByApplication, musicSheetStatusList} from "@views/music-library/api";
@@ -77,7 +60,7 @@ export default defineComponent({
       userIdDisable: true,
       userIdData: [] as any,
       updateRow: {} as any, // 修改选择的行
-      musicTagList:[] as any,//曲目标签
+      musicTagList: [] as any,//曲目标签
     })
 
     onMounted(async () => {
@@ -275,14 +258,14 @@ export default defineComponent({
           title: '是否置顶',
           key: 'topFlag',
           render: (row: any) => {
-            return <div>{row.topFlag?'是':'否'}</div>
+            return <div>{row.topFlag ? '是' : '否'}</div>
           }
         },
         {
           title: '是否精品',
           key: 'exquisiteFlag',
           render: (row: any) => {
-            return <div>{row.topFlag?'是':'否'}</div>
+            return <div>{row.topFlag ? '是' : '否'}</div>
           }
         },
         {
@@ -560,10 +543,7 @@ export default defineComponent({
             >
               <AddMusic
                   onClose={() => (state.showAddDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
+                  onGetList={onSubmit}
                   subjectList={state.subjectList}
                   appId={state.appId}
                   musicSheetCategories={state.musicSheetCategories}

src/views/music-library/project-music-sheet/module/kt/addMusic.tsx

@@ -475,6 +475,9 @@ export default defineComponent({
                       </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()}