添加生成图片

src/api/system/user.ts

@@ -35,23 +35,12 @@ export function login(params: object) {
 }
 
 /**
- * @description: 用户修改密码
- */
-export function changePassword(params: any, uid: any) {
-  return request({
-    url: `/user/u${uid}/changepw`,
-    method: 'POST',
-    params
-  })
-}
-
-/**
  * @description: 用户登出
  */
-export function logout(params: any) {
+export function api_logout(params: any) {
   return request({
-    url: '/login/logout',
-    method: 'POST',
+    url: '/cbs-app/user/logout',
+    method: 'get',
     params
   })
 }

src/layout/components/Header/UpdatePassword.vue

@@ -1,95 +1,105 @@
 <template>
-  <n-modal
-    v-model:show="visiablePassword"
-    style="width: 500px"
-    preset="dialog"
-    :showIcon="false"
-    title="修改密码"
-  >
-    <!-- model={forms} ref={formsRef} label-placement="left" label-width="100" -->
-    <n-form
-      :model="forms"
-      ref="formsRef"
-      label-placement="left"
-      label-width="auto"
-      style="padding-top: 12px"
+  <div>
+    <n-modal
+      v-model:show="visiablePassword"
+      style="width: 500px"
+      preset="dialog"
+      :showIcon="false"
+      title="修改密码"
     >
-      <n-form-item label="手机号" path="phone">
-        <n-input v-model:value="forms.phone" placeholder="请输入手机号" disabled />
-      </n-form-item>
-      <n-form-item
-        label="新密码"
-        path="newPasswordFirst"
-        :rule="[
-          {
-            required: true,
-            message: '请选择输入新密码'
-          },
-          {
-            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
-            message: '密码为6-20位数字和字母组合',
-            trigger: 'blur'
-          }
-        ]"
+      <!-- model={forms} ref={formsRef} label-placement="left" label-width="100" -->
+      <n-form
+        :model="forms"
+        ref="formsRef"
+        label-placement="left"
+        label-width="auto"
+        style="padding-top: 12px"
       >
-        <n-input
-          v-model:value="forms.newPasswordFirst"
-          type="password"
-          show-password-on="click"
-          placeholder="请选择输入新密码"
-          autocomplete="off"
-        />
-      </n-form-item>
-      <n-form-item
-        label="再次输入"
-        path="newPasswordSecond"
-        :rule="[
-          {
-            validator: validatePass2,
-            trigger: 'blur',
-            required: true
-          }
-        ]"
-      >
-        <n-input
-          v-model:value="forms.newPasswordSecond"
-          type="password"
-          show-password-on="click"
-          placeholder="请再次输入密码"
-          autocomplete="off"
-        />
-      </n-form-item>
-      <n-form-item
-        label="验证码"
-        path="authCode"
-        :rule="[
-          {
-            required: true,
-            message: '请选择输入验证码'
-          }
-        ]"
-      >
-        <n-input-group>
-          <n-input v-model:value="forms.authCode" placeholder="请选择输入验证码" />
-          <n-button type="primary" v-if="!active" @click="onSendCode" :loading="codeLoading">
-            获取验证码
-          </n-button>
-          <n-button type="default" v-else disabled>
-            <n-countdown
-              :render="renderCountdown"
-              :duration="50 * 1000"
-              :active="active"
-              @finish="() => (active = false)"
-            />
-          </n-button>
-        </n-input-group>
-      </n-form-item>
-      <n-space justify="end">
-        <n-button type="default" @click="visiablePassword = false">取消</n-button>
-        <n-button type="primary" :loading="btnLoading" @click="onSubmit">保存</n-button>
-      </n-space>
-    </n-form>
-  </n-modal>
+        <n-form-item label="手机号" path="phone">
+          <n-input v-model:value="forms.phone" placeholder="请输入手机号" disabled />
+        </n-form-item>
+        <n-form-item
+          label="新密码"
+          path="newPasswordFirst"
+          :rule="[
+            {
+              required: true,
+              message: '请选择输入新密码'
+            },
+            {
+              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
+              message: '密码为6-20位数字和字母组合',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <n-input
+            v-model:value="forms.newPasswordFirst"
+            type="password"
+            show-password-on="click"
+            placeholder="请选择输入新密码"
+            autocomplete="off"
+          />
+        </n-form-item>
+        <n-form-item
+          label="再次输入"
+          path="newPasswordSecond"
+          :rule="[
+            {
+              validator: validatePass2,
+              trigger: 'blur',
+              required: true
+            }
+          ]"
+        >
+          <n-input
+            v-model:value="forms.newPasswordSecond"
+            type="password"
+            show-password-on="click"
+            placeholder="请再次输入密码"
+            autocomplete="off"
+          />
+        </n-form-item>
+        <n-form-item
+          label="验证码"
+          path="authCode"
+          :rule="[
+            {
+              required: true,
+              message: '请选择输入验证码'
+            }
+          ]"
+        >
+          <n-input-group>
+            <n-input v-model:value="forms.authCode" placeholder="请选择输入验证码" />
+            <n-button type="primary" v-if="!active" @click="onSendCode" :loading="codeLoading">
+              获取验证码
+            </n-button>
+            <n-button type="default" v-else disabled>
+              <n-countdown
+                :render="renderCountdown"
+                :duration="50 * 1000"
+                :active="active"
+                @finish="() => (active = false)"
+              />
+            </n-button>
+          </n-input-group>
+        </n-form-item>
+        <n-space justify="end">
+          <n-button type="default" @click="visiablePassword = false">取消</n-button>
+          <n-button type="primary" :loading="btnLoading" @click="onSubmit">保存</n-button>
+        </n-space>
+      </n-form>
+    </n-modal>
+    <n-modal v-model:show="showSmsClass" style="">
+      <SmsLogin
+        :phone="forms.phone"
+        type="PASSWORD"
+        @close="() => (showSmsClass = false)"
+        @sendCode="() => (active = true)"
+      />
+    </n-modal>
+  </div>
 </template>
 
 <script lang="ts">
@@ -99,9 +109,13 @@ import { useUserStore } from '@/store/modules/user'
 import { userUpdateInfo, sendSms, updatePassword } from '@/api/system/user'
 import { TABS_ROUTES } from '@/store/mutation-types'
 import { useRoute, useRouter } from 'vue-router'
+import SmsLogin from '../smsLogin'
 
 export default defineComponent({
   emits: ['updateInfo'],
+  components: {
+    SmsLogin
+  },
   setup(props, { emit }) {
     const userStore = useUserStore()
     const message = useMessage()
@@ -112,6 +126,7 @@ export default defineComponent({
     const state = reactive({
       visiablePassword: false,
       btnLoading: false,
+      showSmsClass: false,
       codeLoading: false,
       forms: {
         phone: null,
@@ -155,6 +170,7 @@ export default defineComponent({
         state.codeLoading = false
         state.active = true
         message.success('发送成功')
+        // state.showSmsClass = true
       } catch (e) {
         state.codeLoading = false
       }

src/layout/components/smsLogin/api.ts

@@ -0,0 +1,24 @@
+import request from '@/utils/request/index'
+
+/**
+ * 发送验证码
+ */
+export const sendSmsVerify = (params: any) => {
+  return request({
+    url: '/edu-app/open/sendSmsVerify',
+    method: 'post',
+    requestType: 'form',
+    data: params
+  } as any)
+}
+
+/**
+ * @description: 图片验证码
+ */
+export const sendImgCode = (params: object) => {
+  return request({
+    url: '/edu-app/open/sendImgCode',
+    method: 'get',
+    params
+  } as any)
+}

src/layout/components/smsLogin/index.module.less

@@ -0,0 +1,70 @@
+.downMove {
+  width: 413px;
+  background: #FFFFFF;
+  border-radius: 16px !important;
+  position: relative;
+  padding: 0 30px 35px;
+
+  .downMoveBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 413px;
+    height: 101px;
+  }
+
+  .closeAble {
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 18px;
+    right: 20px;
+    z-index: 100;
+  }
+
+  h2 {
+    margin-top: 24px;
+    height: 33px;
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 33px;
+    text-align: center;
+    margin-bottom: 15px;
+    position: relative;
+    z-index: 99;
+  }
+
+  .smsForm {
+    padding-top: 20px;
+  }
+
+
+  .smsImg {
+    width: 100%;
+    height: 44px;
+    cursor: pointer;
+  }
+
+  .imgChange {
+    cursor: pointer;
+    display: block;
+    text-align: center;
+    font-size: 12Px;
+    color: #198CFE;
+    line-height: 17px;
+  }
+
+  .btnGroup {
+    border-top: 1px solid #F2F2F2;
+    padding-top: 25px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    width: 150px;
+    // height: 44px;
+  }
+}

src/layout/components/smsLogin/index.tsx

@@ -0,0 +1,123 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import styles from './index.module.less'
+import smsTop from './sms-top.png'
+import closeAble from './closeAble.png'
+import { NButton, NForm, NFormItem, NGi, NGrid, NImage, NInput, NSpace } from 'naive-ui'
+import { sendImgCode, sendSmsVerify } from './api'
+
+export default defineComponent({
+  name: 'sendSms',
+  props: {
+    phone: {
+      type: String,
+      default: ''
+    },
+    clientId: {
+      type: String,
+      default: 'cooleshow-teacher'
+    },
+    type: {
+      type: String,
+      default: 'LOGIN'
+    }
+  },
+  emits: ['close', 'sendCode'],
+  setup(props, { emit }) {
+    const state = reactive({
+      identifyingCode: null as any,
+      code: null as any
+    })
+    const formRef = ref()
+
+    const getSendImgCode = async () => {
+      const { data } = await sendImgCode({ phone: props.phone })
+      state.identifyingCode = data
+    }
+
+    const onSubmit = async () => {
+      formRef.value.validate(async (errors: any) => {
+        if (errors) return
+
+        try {
+          await sendSmsVerify({
+            code: state.code,
+            clientId: props.clientId,
+            type: props.type,
+            mobile: props.phone
+          })
+
+          emit('close')
+          emit('sendCode')
+        } catch {
+          state.code = ''
+          setTimeout(() => {
+            getSendImgCode()
+          }, 500)
+        }
+      })
+    }
+
+    onMounted(() => {
+      getSendImgCode()
+    })
+    return () => (
+      <div class={styles.downMove}>
+        <img src={smsTop} class={styles.downMoveBg} alt="" />
+        <img
+          src={closeAble}
+          class={styles.closeAble}
+          onClick={() => {
+            emit('close')
+          }}
+          alt=""
+        />
+        <h2>请输入图形验证码</h2>
+
+        <NForm class={styles.smsForm} ref={formRef} model={state}>
+          <NGrid xGap={12}>
+            <NGi span={15}>
+              <NFormItem
+                showLabel={false}
+                path="code"
+                rule={[
+                  {
+                    required: true,
+                    message: '请输入图形验证码',
+                    trigger: ['blur', 'input']
+                  }
+                ]}
+              >
+                <NInput placeholder="图形验证码" v-model:value={state.code} size="large" />
+              </NFormItem>
+            </NGi>
+            <NGi span={9}>
+              <div onClick={getSendImgCode}>
+                <NImage class={styles.smsImg} lazy previewDisabled src={state.identifyingCode} />
+              </div>
+
+              <span class={styles.imgChange} onClick={getSendImgCode}>
+                看不清？换一换
+              </span>
+            </NGi>
+          </NGrid>
+        </NForm>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton
+            class={[styles.btn, styles.cancelBtn]}
+            round
+            type="default"
+            onClick={() => {
+              emit('close')
+            }}
+          >
+            取消
+          </NButton>
+          <NButton class={[styles.btn, styles.submitBtn]} onClick={onSubmit} round type="primary">
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    )
+  }
+})

src/store/modules/user.ts

@@ -3,7 +3,7 @@ import { store } from '@/store'
 import { ACCESS_TOKEN, CURRENT_USER, IM_TOKEN } from '@/store/mutation-types'
 import { ResultEnum } from '@/enums/httpEnum'
 
-import { getUserInfo, login } from '@/api/system/user'
+import { getUserInfo, login, api_logout } from '@/api/system/user'
 import { storage } from '@/utils/storage'
 
 export interface IUserState {
@@ -101,6 +101,24 @@ export const useUserStore = defineStore({
 
     // 登出
     async logout() {
+      // try {
+      //   const response = (await login(userInfo)) as any
+      //   const { data, code } = response
+      //   if (code === ResultEnum.SUCCESS) {
+      //     const ex = 7 * 24 * 60 * 60 * 1000
+      //     storage.set(ACCESS_TOKEN, data.token_type + ' ' + data.access_token, ex)
+      //     storage.set(CURRENT_USER, data, ex)
+      //     this.setToken(data.token_type + ' ' + data.access_token)
+      //     this.setImToken(data.imToken)
+      //     this.setUserInfo(data)
+      //   }
+      //   return Promise.resolve(response)
+      // } catch (e) {
+      //   return Promise.reject(e)
+      // }
+      try {
+        await api_logout({})
+      } catch {}
       this.setPermissions([])
       this.setUserInfo('')
       storage.remove(ACCESS_TOKEN)

src/views/music-library/api.ts

@@ -79,6 +79,17 @@ export const musicSheetSave = (params: object) => {
 }
 
 /**
+ * @description: 乐谱保存生成图片
+ */
+export const musicSheetImg = (params: object) => {
+  return request({
+    url: '/cbs-app/musicSheet/img',
+    method: 'post',
+    data: params
+  } as any)
+}
+
+/**
  * @description: 乐谱删除
  */
 export const musicSheetRemove = (params: object) => {
@@ -101,7 +112,6 @@ export const musicSheetDetail = (params?: any) => {
   } as any)
 }
 
-
 /**
  * @description: 乐谱-启用-停用
  */
@@ -125,10 +135,8 @@ export const musicSheetPageByApplication = (params?: any) => {
   } as any)
 }
 
-
 //---
 
-
 /**
  * @description: 曲谱分类
  * @param params
@@ -181,7 +189,7 @@ export const musicSheetCategoriesUpdate = (params: object) => {
 export const musicSheetCategoriesRemove = (id: object) => {
   return request({
     url: '/cbs-app/musicSheetCategories/remove?id=' + id,
-    method: 'post',
+    method: 'post'
   } as any)
 }
 
@@ -197,7 +205,6 @@ export const musicSheetCategoriesDetail = (params?: any) => {
   } as any)
 }
 
-
 /**
  *  @description: 曲谱分类详情
  * @param params
@@ -222,7 +229,6 @@ export const musicSheetApplicationOwnerList = (params?: any) => {
   } as any)
 }
 
-
 /**
  *  @description: 适用项目保存
  * @param params
@@ -294,7 +300,6 @@ export const musicSheetApplicationExtendUpdate = (params?: any) => {
   } as any)
 }
 
-
 /**
  *  @description: 曲目标签列表
  * @param params
@@ -324,6 +329,6 @@ export const musicSheetApplicationExtendStatus = (params?: any) => {
 export const musicSheetApplicationApplicationInfo = (musicSheetId?: any) => {
   return request({
     url: '/cbs-app/musicSheetApplicationExtend/applicationInfo/' + musicSheetId,
-    method: 'post',
+    method: 'post'
   } as any)
 }

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

@@ -20,7 +20,7 @@ import {
   musicSheetApplicationOwnerList,
   musicSheetPage,
   musicSheetRemove,
-  musicSheetSave,
+  musicSheetImg,
   musicSheetStatusList,
   musicTagPage
 } from '../../api'
@@ -35,6 +35,7 @@ import { sysApplicationPage } from '@views/menu-manage/api'
 import { getOwnerName } from '@views/music-library/musicUtil'
 import styles from './music-list.module.less'
 import { api_uploadFile } from '@/plugins/uploadFile'
+import MusicCreateImg from '../modal/music-create-img'
 
 export default defineComponent({
   name: 'music-list',
@@ -77,8 +78,7 @@ export default defineComponent({
       userIdDisable: true, // 所属人
       userIdData: [] as any, // 所属人数据列表
       productOpen: false,
-      isAutoSave: false,
-      productIfameSrc: ''
+      productItem: {} as any
     })
 
     const columns = (): any => {
@@ -256,7 +256,16 @@ export default defineComponent({
                 >
                   {row.status ? '停用' : '启用'}
                 </NButton>
-                <NButton type="primary" size="small" text onClick={() => handleAutoProduct(row)}>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.productOpen = true
+                    state.productItem = row
+                    // handleAutoProduct(row)
+                  }}
+                >
                   生成图片
                 </NButton>
                 <NButton
@@ -467,100 +476,8 @@ export default defineComponent({
       initUseAppList()
       getList()
       // getMusicSheetCategorieList()
-
-      window.addEventListener('message', handleProductResult)
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('message', handleProductResult)
     })
 
-    /** 自动生成图片 */
-    const forms = reactive({
-      id: '',
-      xmlFileUrl: '',
-      musicImg: '', // 五线谱图片
-      musicSvg: '', //首调图片
-      musicJianSvg: '' // 简谱固定调
-    })
-    const handleAutoProduct = (row: any) => {
-      if (!row.xmlFileUrl) {
-        message.error('请先上传XML')
-        return
-      }
-      forms.xmlFileUrl = row.xmlFileUrl
-      forms.id = row.id
-      const apiUrls = {
-        dev: 'https://dev.kt.colexiu.com',
-        test: 'https://test.lexiaoya.cn',
-        online: 'https://kt.colexiu.com'
-      }
-
-      const environment = location.origin.includes('//dev')
-        ? 'dev'
-        : location.origin.includes('//test')
-        ? 'test'
-        : location.origin.includes('//online')
-        ? 'online'
-        : 'dev'
-      const apiUrl = apiUrls[environment]
-      const prefix = /(localhost|192)/.test(location.host) ? 'https://dev.kt.colexiu.com' : apiUrl
-      state.productIfameSrc =
-        prefix + `/instrument/#/product-img?xmlUrl=${forms.xmlFileUrl}&isCreateImg=true&isCbs=true`
-      console.log(state.productIfameSrc, '12')
-      state.productOpen = true
-    }
-    const handleProductResult = (res: MessageEvent) => {
-      const data = res.data
-      if (data?.api === 'webApi_renderSvg') {
-        let imgs: any = []
-        try {
-          imgs = JSON.parse(data.product)
-        } catch (error) {
-          console.log('🚀 ~ error:', error)
-        }
-        imgs = imgs.filter((item: any) => item.base64)
-        if (imgs.length === 3) {
-          message.success('生成成功')
-          handleUploadImg(imgs)
-        } else {
-          message.error('生成失败')
-        }
-        console.log('🚀 ~ 上传之前', [...imgs])
-      }
-    }
-    const handleUploadImg = async (imgs: any[]) => {
-      for (let i = 0; i < imgs.length; i++) {
-        const file = dataURLtoFile(imgs[i].base64, `${Date.now()}p${i}.png`)
-        imgs[i].url = await api_uploadFile(file, () => {})
-      }
-      forms.musicImg = imgs[0]?.url || ''
-      forms.musicSvg = imgs[1]?.url || ''
-      forms.musicJianSvg = imgs[2]?.url || ''
-      state.productOpen = false
-      imgs = []
-      // onSubmit()
-      console.log(forms, '12')
-      // 保存
-      try {
-        await musicSheetSave({ ...forms })
-      } catch {
-        //
-      }
-      state.isAutoSave = false
-    }
-    /** base64转file */
-    const dataURLtoFile = (dataurl: string, filename: string) => {
-      let arr = dataurl.split(',') || [],
-        mime = arr[0].match(/:(.*?);/)?.[1],
-        bstr = atob(arr[1]),
-        n = bstr.length,
-        u8arr = new Uint8Array(n)
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n)
-      }
-      return new File([u8arr], filename, { type: mime })
-    }
     return () => (
       <div class="system-menu-container">
         <SaveForm
@@ -813,12 +730,19 @@ export default defineComponent({
           closeOnEsc={false}
           maskClosable={false}
           showIcon={false}
-          onClose={() => {
-            console.log('关闭')
-            state.isAutoSave = false
-          }}
         >
-          <iframe class={styles.productIframe} src={state.productIfameSrc}></iframe>
+          <MusicCreateImg
+            xmlFileUrl={state.productItem.xmlFileUrl}
+            onClose={() => (state.productOpen = false)}
+            onConfirm={async (item: any) => {
+              try {
+                await musicSheetImg({
+                  ...item,
+                  id: state.productItem.id
+                })
+              } catch {}
+            }}
+          />
         </NModal>
       </div>
     )

src/views/music-library/music-sheet/component/music-sheet-categories-list.tsx

@@ -1,7 +1,15 @@
-import {DataTableColumn, NButton, NDataTable, NModal, NSpace, useDialog, useMessage} from 'naive-ui'
-import {defineComponent, onMounted, reactive} from 'vue'
-import {musicSheetCategoriesQueryTree, musicSheetCategoriesRemove} from "@views/music-library/api";
-import SaveCategroyDialog from "@views/music-library/music-sheet/modal/save-categroy-dialog";
+import {
+  DataTableColumn,
+  NButton,
+  NDataTable,
+  NModal,
+  NSpace,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { defineComponent, onMounted, reactive } from 'vue'
+import { musicSheetCategoriesQueryTree, musicSheetCategoriesRemove } from '@views/music-library/api'
+import SaveCategroyDialog from '@views/music-library/music-sheet/modal/save-categroy-dialog'
 
 type RowData = {
   id: string
@@ -20,12 +28,12 @@ export default defineComponent({
       loading: false,
       pagination: {
         page: 1,
-        rows: 10,
+        rows: 10
       },
       dataList: [] as any,
       showSaveDialog: false,
       saveMode: 'add',
-      saveRowData: null as any,
+      saveRowData: null as any
     })
 
     const dialog = useDialog()
@@ -36,12 +44,11 @@ export default defineComponent({
         state.loading = true
         const body = {
           page: state.pagination.page,
-          rows: state.pagination.rows,
+          rows: state.pagination.rows
         }
-        const {data} = await musicSheetCategoriesQueryTree(body)
+        const { data } = await musicSheetCategoriesQueryTree(body)
         state.dataList = data || []
-      } catch (e) {
-      }
+      } catch (e) {}
       state.loading = false
     }
 
@@ -78,43 +85,43 @@ export default defineComponent({
           fixed: 'right',
           render(row: any) {
             return (
-                <NSpace>
-                  <NButton
-                      //v-auth="musicSheetCategories/switching1608067671668359169"
-                      type="error"
-                      size="small"
-                      text
-                      onClick={() => onRemove(row)}
-                  >
-                    删除
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      onClick={() => {
-                        state.saveRowData = row
-                        state.saveMode = 'edit'
-                        state.showSaveDialog = true
-                      }}
-                      //v-auth="musicSheetCategories/update1608067835686617090"
-                  >
-                    修改
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      onClick={() => {
-                        state.saveRowData = row
-                        state.showSaveDialog = true
-                        state.saveMode = 'add'
-                      }}
-                      //v-auth="musicSheetCategories/save1608067543331045378"
-                  >
-                    添加子分类
-                  </NButton>
-                </NSpace>
+              <NSpace>
+                <NButton
+                  //v-auth="musicSheetCategories/switching1608067671668359169"
+                  type="error"
+                  size="small"
+                  text
+                  onClick={() => onRemove(row)}
+                >
+                  删除
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.saveRowData = row
+                    state.saveMode = 'edit'
+                    state.showSaveDialog = true
+                  }}
+                  //v-auth="musicSheetCategories/update1608067835686617090"
+                >
+                  修改
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.saveRowData = row
+                    state.showSaveDialog = true
+                    state.saveMode = 'add'
+                  }}
+                  //v-auth="musicSheetCategories/save1608067543331045378"
+                >
+                  添加子分类
+                </NButton>
+              </NSpace>
             )
           }
         }
@@ -143,52 +150,52 @@ export default defineComponent({
       })
     }
     return () => (
-        <div class="system-menu-container">
-          <div class={['section-container']}>
-            <NSpace style={{paddingBottom: '12px'}}>
-              <NButton
-                  type="primary"
-                  //v-auth="musicSheetCategories/save1608067543331045378"
-                  onClick={() => {
-                    state.saveMode = 'add'
-                    state.showSaveDialog = true
-                    state.saveRowData = null
-                  }}
-              >
-                新增分类
-              </NButton>
-            </NSpace>
+      <div class="system-menu-container">
+        <div class={['section-container']}>
+          <NSpace style={{ paddingBottom: '12px' }}>
+            <NButton
+              type="primary"
+              //v-auth="musicSheetCategories/save1608067543331045378"
+              onClick={() => {
+                state.saveMode = 'add'
+                state.showSaveDialog = true
+                state.saveRowData = null
+              }}
+            >
+              新增分类
+            </NButton>
+          </NSpace>
 
-            <NDataTable
-                // scrollX={1000}
-                loading={state.loading}
-                columns={columns()}
-                data={state.dataList}
-                rowKey={(row: any) => row.id}
-                childrenKey="musicSheetCategoriesList"
-            ></NDataTable>
-          </div>
-          <NModal
-              v-model:show={state.showSaveDialog}
-              preset="dialog"
-              showIcon={false}
-              title={state.saveRowData ? '修改分类' : '新增分类'}
-              style={{width: '550px'}}
-          >
-            <SaveCategroyDialog
-                onGetList={() => {
-                  state.showSaveDialog = false
-                  getList()
-                }}
-                onClose={() => {
-                  state.showSaveDialog = false
-                }}
-                list={state.dataList}
-                saveMode={state.saveMode}
-                actvieRow={state.saveRowData}
-            ></SaveCategroyDialog>
-          </NModal>
+          <NDataTable
+            // scrollX={1000}
+            loading={state.loading}
+            columns={columns()}
+            data={state.dataList}
+            rowKey={(row: any) => row.id}
+            childrenKey="musicSheetCategoriesList"
+          ></NDataTable>
         </div>
+        <NModal
+          v-model:show={state.showSaveDialog}
+          preset="dialog"
+          showIcon={false}
+          title={state.saveRowData ? '修改分类' : '新增分类'}
+          style={{ width: '400px' }}
+        >
+          <SaveCategroyDialog
+            onGetList={() => {
+              state.showSaveDialog = false
+              getList()
+            }}
+            onClose={() => {
+              state.showSaveDialog = false
+            }}
+            list={state.dataList}
+            saveMode={state.saveMode}
+            actvieRow={state.saveRowData}
+          ></SaveCategroyDialog>
+        </NModal>
+      </div>
     )
   }
 })

src/views/music-library/music-sheet/modal/index.module.less

@@ -13,8 +13,26 @@
   }
 }
 
-.formContainer{
+.formContainer {
   max-height: 80vh;
   overflow-y: auto;
   padding: 0 10px;
+}
+
+.productModal {
+  width: auto !important;
+  height: auto !important;
+  max-width: initial !important;
+
+  :global {
+    .n-dialog .n-dialog__content {
+      height: 100%;
+    }
+  }
+}
+
+.productIframe {
+  width: 1000px;
+  height: 80vh;
+  border: none;
 }

src/views/music-library/music-sheet/modal/music-create-img.tsx

@@ -0,0 +1,107 @@
+import { defineComponent, onMounted, onUnmounted, reactive } from 'vue'
+import styles from './index.module.less'
+import { api_uploadFile } from '@/plugins/uploadFile'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  name: 'music-create-img',
+  props: {
+    xmlFileUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const message = useMessage()
+    const state = reactive({
+      productOpen: false,
+      productIfameSrc: ''
+    })
+    /** 自动生成图片 */
+    const forms = reactive({
+      musicImg: '', // 五线谱图片
+      musicSvg: '', //首调图片
+      musicJianSvg: '' // 简谱固定调
+    })
+    const handleAutoProduct = () => {
+      if (!props.xmlFileUrl) {
+        message.error('请先上传XML')
+        return
+      }
+      const apiUrls = {
+        dev: 'https://dev.kt.colexiu.com',
+        test: 'https://test.lexiaoya.cn',
+        online: 'https://kt.colexiu.com'
+      }
+
+      const environment = location.origin.includes('//dev')
+        ? 'dev'
+        : location.origin.includes('//test')
+        ? 'test'
+        : location.origin.includes('//online')
+        ? 'online'
+        : 'dev'
+      const apiUrl = apiUrls[environment]
+      const prefix = /(localhost|192)/.test(location.host) ? 'https://dev.kt.colexiu.com' : apiUrl
+      state.productIfameSrc =
+        prefix + `/instrument/#/product-img?xmlUrl=${props.xmlFileUrl}&isCreateImg=true&isCbs=true`
+      // state.productOpen = true
+    }
+    const handleProductResult = (res: MessageEvent) => {
+      const data = res.data
+      if (data?.api === 'webApi_renderSvg') {
+        let imgs: any = []
+        try {
+          imgs = JSON.parse(data.product)
+        } catch (error) {
+          console.log('🚀 ~ error:', error)
+        }
+        imgs = imgs.filter((item: any) => item.base64)
+        if (imgs.length === 3) {
+          message.success('生成成功')
+          handleUploadImg(imgs)
+        } else {
+          message.error('生成失败')
+        }
+        // console.log('🚀 ~ 上传之前', [...imgs])
+      }
+    }
+    const handleUploadImg = async (imgs: any[]) => {
+      for (let i = 0; i < imgs.length; i++) {
+        const file = dataURLtoFile(imgs[i].base64, `${Date.now()}p${i}.png`)
+        imgs[i].url = await api_uploadFile(file, () => {})
+      }
+      forms.musicImg = imgs[0]?.url || ''
+      forms.musicSvg = imgs[1]?.url || ''
+      forms.musicJianSvg = imgs[2]?.url || ''
+      // state.productOpen = false
+      imgs = []
+
+      emit('close')
+      emit('confirm', forms)
+    }
+    /** base64转file */
+    const dataURLtoFile = (dataurl: string, filename: string) => {
+      let arr = dataurl.split(',') || [],
+        mime = arr[0].match(/:(.*?);/)?.[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], filename, { type: mime })
+    }
+
+    onMounted(() => {
+      handleAutoProduct()
+      window.addEventListener('message', handleProductResult)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('message', handleProductResult)
+    })
+    return () => <iframe class={styles.productIframe} src={state.productIfameSrc}></iframe>
+  }
+})

src/views/music-library/music-sheet/modal/music-operation.tsx

@@ -1,4 +1,4 @@
-import type {SelectOption} from 'naive-ui'
+import type { SelectOption } from 'naive-ui'
 import {
   NAlert,
   NButton,
@@ -16,22 +16,25 @@ import {
   NRadioGroup,
   NSelect,
   NSpace,
+  NSpin,
   useDialog,
   useMessage
 } from 'naive-ui'
-import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
-import {musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave} from '../../api'
+import { defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
+import { musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave } from '../../api'
 import UploadFile from '@/components/upload-file'
 import styles from './index.module.less'
 import deepClone from '@/utils/deep.clone'
 import axios from 'axios'
-import {appKey, clientType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {musicalInstrumentPage} from "@views/system-manage/subject-manage/api";
-import {subjectPage} from "@views/system-manage/api";
-import MusicSheetOwnerDialog from "@views/music-library/music-sheet/modal/musicSheetOwnerDialog";
-import {sysApplicationPage} from "@views/menu-manage/api";
-import {filterPointCategory} from "@views/teaching-manage/unit-test";
+import { appKey, clientType, musicSheetSourceType, musicSheetType } from '@/utils/constant'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { musicalInstrumentPage } from '@views/system-manage/subject-manage/api'
+import { subjectPage } from '@views/system-manage/api'
+import MusicSheetOwnerDialog from '@views/music-library/music-sheet/modal/musicSheetOwnerDialog'
+import { sysApplicationPage } from '@views/menu-manage/api'
+import { filterPointCategory } from '@views/teaching-manage/unit-test'
+import { api_uploadFile } from '@/plugins/uploadFile'
+import MusicCreateImg from './music-create-img'
 
 /**
  * 获取指定元素下一个Note元素
@@ -59,7 +62,7 @@ export const onlyVisible = (xml: any, partIndex: any) => {
   if (!xml) return ''
   const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
   const partList =
-      xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
+    xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
   const parts = xmlParse.getElementsByTagName('part')
   const visiblePartInfo = partList[partIndex]
   if (visiblePartInfo) {
@@ -157,8 +160,8 @@ export function getGradualLengthByXml(xml: string) {
       const measureNotes = Array.from(measure.querySelectorAll('note'))
 
       const noteInMeasureIndex = Array.from(measure.childNodes)
-          .filter((item: any) => item.nodeName === 'note')
-          .findIndex((item) => item === note)
+        .filter((item: any) => item.nodeName === 'note')
+        .findIndex((item) => item === note)
 
       let allDuration = 0
       let leftDuration = 0
@@ -212,9 +215,9 @@ export function getGradualLengthByXml(xml: string) {
       return textContent && ks.includes(textContent)
     })
     if (
-        ele.type === 'metronome' ||
-        (ele.type === 'words' && (textContent.startsWith('a tempo') || isKeyWork)) ||
-        isLastNoteAndNotClosed
+      ele.type === 'metronome' ||
+      (ele.type === 'words' && (textContent.startsWith('a tempo') || isKeyWork)) ||
+      isLastNoteAndNotClosed
     ) {
       const indexOf = gradualNotes.findIndex((item) => item.length === 1)
       if (indexOf > -1 && ele.index > gradualNotes[indexOf]?.[0].start) {
@@ -253,8 +256,7 @@ export default defineComponent({
     },
     data: {
       type: Object as PropType<any>,
-      default: () => {
-      }
+      default: () => {}
     },
     tagList: {
       type: Array as PropType<Array<SelectOption>>,
@@ -263,7 +265,7 @@ export default defineComponent({
     subjectList: {
       type: Array as PropType<Array<SelectOption>>,
       default: () => []
-    },
+    }
     // musicSheetCategories: {
     //   type: Array as PropType<Array<SelectOption>>,
     //   default: () => []
@@ -271,7 +273,7 @@ export default defineComponent({
   },
   emits: ['close', 'getList'],
 
-  setup(props, {slots, attrs, emit}) {
+  setup(props, { slots, attrs, emit }) {
     const forms = reactive({
       graduals: {} as any, // 渐变速度
       playMode: 'MP3', // 播放类型
@@ -297,20 +299,23 @@ export default defineComponent({
       appAuditFlag: 0, // 是否审核版本
       midiFileUrl: null, // 伴奏文件 MIDI文件(保留字段)
       subjectIds: [] as any, // 可用声部
-      musicalInstrumentIdList: [] as any,  //可用乐器
-      musicCategoryId: null,  //曲目分类
-      musicSheetAccompanimentList: [] as any,  //曲目伴奏
+      musicalInstrumentIdList: [] as any, //可用乐器
+      musicCategoryId: null, //曲目分类
+      musicSheetAccompanimentList: [] as any, //曲目伴奏
       audioType: 'HOMEMODE', // 伴奏类型
       isPlayBeat: true, // 是否播放节拍器
       isUseSystemBeat: true, // 是否使用系统节拍器(0:否;1:是)
       repeatedBeats: false, // 是否重复节拍时长
       evaluationStandard: 'FREQUENCY', // 评分标准 节奏 AMPLITUDE 音准 FREQUENCY 分贝 DECIBELS
       multiTracksSelection: [] as any, // 声轨
-      musicSheetExtend: {} as any,//所属人信息
+      musicSheetExtend: {} as any, //所属人信息
+      musicImg: '', // 五线谱图片
+      musicSvg: '', //首调图片
+      musicJianSvg: '' // 简谱固定调
     })
     const state = reactive({
       loading: false,
-      previewMode: false,//是否是预览模式
+      previewMode: false, //是否是预览模式
       tagList: [...props.tagList] as any, // 标签列表
       xmlFirstSpeed: null as any, // 第一个音轨速度
       partListNames: [] as any, // 所有音轨声部列表
@@ -323,8 +328,13 @@ export default defineComponent({
       showMusicSheetOwnerDialog: false, //所属人弹框
       // musicSheetOwnerData: {}, //所属人信息
       multiTracks: null,
-      appData: [],// 应用列表
-      ownerName: null as any,// 所属人名称描述
+      appData: [], // 应用列表
+      ownerName: null as any, // 所属人名称描述
+
+      productOpen: false, // 是否打开自动生成图片
+      productItem: {} as any,
+      productIfameSrc: '',
+      isAutoSave: false // 是否自动保存
     })
     const gradualData = reactive({
       list: [] as any[],
@@ -342,6 +352,11 @@ export default defineComponent({
         if (error) {
           return
         }
+        if (!state.isAutoSave) {
+          state.isAutoSave = true
+          state.productOpen = true
+          return
+        }
         try {
           //extConfigJson: {"repeatedBeats":0,"gradualTimes":{"75":"02:38:60","77":"02:43:39"}}
           const obj = {
@@ -349,10 +364,13 @@ export default defineComponent({
             musicTag: '-1',
             multiTracksSelection: forms.multiTracksSelection.join(','),
             musicSheetSoundList: forms.musicSheetSoundList.filter((next: any) => {
-              return !!next.audioFileUrl && forms.multiTracksSelection.includes(next.track);
+              return !!next.audioFileUrl && forms.multiTracksSelection.includes(next.track)
             }),
             musicalInstrumentIds: forms.musicalInstrumentIdList.join(','),
-            extConfigJson: JSON.stringify({repeatedBeats: forms.repeatedBeats ? 1 : 0, gradualTimes: forms.graduals}),
+            extConfigJson: JSON.stringify({
+              repeatedBeats: forms.repeatedBeats ? 1 : 0,
+              gradualTimes: forms.graduals
+            }),
             subjectIds: forms.subjectIds.join(',')
           }
           if (forms.audioType == 'MIDI') {
@@ -363,7 +381,7 @@ export default defineComponent({
             await musicSheetSave(obj)
             message.success('添加成功')
           } else if (props.type === 'edit') {
-            await musicSheetSave({...obj, id: props.data.id})
+            await musicSheetSave({ ...obj, id: props.data.id })
             message.success('修改成功')
           }
           emit('getList')
@@ -383,21 +401,24 @@ export default defineComponent({
       xmlRead.onload = (res) => {
         try {
           gradualData.list = getGradualLengthByXml(res?.target?.result as any).filter(
-              (item: any) => item.length === 2
+            (item: any) => item.length === 2
           )
-        } catch (error) {
-        }
+        } catch (error) {}
         state.partListNames = getPartListNames(res?.target?.result as any) as any
         // 这里是如果没有当前音轨就重新写
         for (let j = 0; j < state.partListNames.length; j++) {
           if (!forms.musicSheetSoundList[j]) {
-            forms.musicSheetSoundList.push({audioFileUrl: null, track: null})
+            forms.musicSheetSoundList.push({ audioFileUrl: null, track: null })
           }
           forms.musicSheetSoundList[j].track = state.partListNames[j].value
         }
 
         // 循环添加所在音轨的原音
-        for (let index = forms.musicSheetSoundList.length; index < state.partListNames.length; index++) {
+        for (
+          let index = forms.musicSheetSoundList.length;
+          index < state.partListNames.length;
+          index++
+        ) {
           const part = state.partListNames[index].value
           const sysData = {
             ...forms.musicSheetSoundList[0],
@@ -410,10 +431,8 @@ export default defineComponent({
         }
 
         if (forms.musicSheetSoundList.length == 0) {
-          forms.musicSheetSoundList.push({audioFileUrl: '', track: ''})
+          forms.musicSheetSoundList.push({ audioFileUrl: '', track: '' })
         }
-
-
       }
       xmlRead.readAsText(file)
     }
@@ -423,7 +442,7 @@ export default defineComponent({
       if (!xml) return []
       const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
       const partList =
-          xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
+        xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
       const partListNames = Array.from(partList).map((item) => {
         const part = item.getElementsByTagName('part-name')?.[0].textContent || ''
         return {
@@ -447,39 +466,43 @@ export default defineComponent({
       }
 
       // 乐器
-      const instrumentCodeList: any = [];
-      const instrumentEle = xmlParse.getElementsByTagName('virtual-instrument');
+      const instrumentCodeList: any = []
+      const instrumentEle = xmlParse.getElementsByTagName('virtual-instrument')
       for (let index = 0; index < instrumentEle.length; index++) {
         const note = instrumentEle[index]
-        const instrumentCode = note.getElementsByTagName('virtual-name')?.[0]?.textContent || '';
+        const instrumentCode = note.getElementsByTagName('virtual-name')?.[0]?.textContent || ''
         if (instrumentCode && !instrumentCodeList.includes(instrumentCode)) {
-          instrumentCodeList.push(instrumentCode);
+          instrumentCodeList.push(instrumentCode)
         }
       }
-      const codeIdMap = new Map<string, string>();
+      const codeIdMap = new Map<string, string>()
       state.instrumentData.forEach((data: any) => {
-        codeIdMap.set(data.code, data.id + '');
+        codeIdMap.set(data.code, data.id + '')
       })
-      forms.musicalInstrumentIdList = [];
+      forms.musicalInstrumentIdList = []
       instrumentCodeList.forEach((code: string) => {
         if (codeIdMap.has(code)) {
-          forms.musicalInstrumentIdList.push(codeIdMap.get(code));
+          forms.musicalInstrumentIdList.push(codeIdMap.get(code))
         }
       })
 
       // 声部
       if (forms.musicalInstrumentIdList.length > 0) {
-        showBackSubject(forms.musicalInstrumentIdList);
+        showBackSubject(forms.musicalInstrumentIdList)
       }
       return partListNames
     }
 
     // 判断选择的音轨是否在选中
     const initPartsListStatus = (track: string): any => {
-      const _names = state.partListNames.filter((n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON')
+      const _names = state.partListNames.filter(
+        (n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON'
+      )
       const partListNames = deepClone(_names) || []
       partListNames.forEach((item: any) => {
-        const index = forms.musicSheetSoundList.findIndex((ground: any) => item.value == ground.track)
+        const index = forms.musicSheetSoundList.findIndex(
+          (ground: any) => item.value == ground.track
+        )
         if (index > -1 && track != item.value) {
           item.disabled = true
         } else {
@@ -492,13 +515,16 @@ export default defineComponent({
     // 反显声部
     const showBackSubject = async (musicalInstrumentIdList: []) => {
       try {
-        const {data} = await subjectPage({page: 1, rows: 999, musicalInstrumentIdList: musicalInstrumentIdList})
+        const { data } = await subjectPage({
+          page: 1,
+          rows: 999,
+          musicalInstrumentIdList: musicalInstrumentIdList
+        })
         const tempList = data.rows || []
         tempList.forEach((item: any) => {
           forms.subjectIds.push(item.id + '')
         })
-      } catch {
-      }
+      } catch {}
     }
 
     // 添加原音
@@ -524,7 +550,7 @@ export default defineComponent({
 
     const checkMultiTracks = (value: string) => {
       if (!value) {
-        return;
+        return
       }
       if (value === 'all') {
         forms.multiTracksSelection = []
@@ -533,7 +559,7 @@ export default defineComponent({
         })
       } else if (value === 'invert') {
         state.partListNames.forEach((next: any) => {
-          const indexOf = forms.multiTracksSelection.indexOf(next.value);
+          const indexOf = forms.multiTracksSelection.indexOf(next.value)
           if (indexOf > -1) {
             forms.multiTracksSelection.splice(indexOf, 1)
           } else {
@@ -545,26 +571,27 @@ export default defineComponent({
       }
     }
 
-    const setOwnerName = (() => {
+    const setOwnerName = () => {
       if (forms.sourceType == 'PLATFORM') {
         state.ownerName = ''
-        return;
+        return
       }
       if (!forms.musicSheetExtend || !forms.sourceType || !forms.musicSheetExtend?.userId) {
-        return;
+        return
       }
-      const appId = forms.musicSheetExtend.applicationId;
+      const appId = forms.musicSheetExtend.applicationId
       const app = state.appData.filter((next: any) => {
         return next.id == appId
-      }) as any;
+      }) as any
       if (app.length > 0) {
         state.ownerName = app[0].appName
       }
       if (forms.sourceType == 'ORG') {
         state.ownerName += '-' + forms.musicSheetExtend.organizationRole
-
       } else if (forms.sourceType == 'PERSON') {
-        state.ownerName += '-' + getMapValueByKey(forms.musicSheetExtend.clientType, new Map(Object.entries(clientType)))
+        state.ownerName +=
+          '-' +
+          getMapValueByKey(forms.musicSheetExtend.clientType, new Map(Object.entries(clientType)))
         if (forms.musicSheetExtend.userName) {
           state.ownerName += '-' + forms.musicSheetExtend.userName
         }
@@ -572,7 +599,7 @@ export default defineComponent({
           state.ownerName += '(' + forms.musicSheetExtend.phone + ')'
         }
       }
-    })
+    }
 
     onMounted(async () => {
       state.loading = true
@@ -585,7 +612,7 @@ export default defineComponent({
           return
         }
         try {
-          const {data} = await musicalInstrumentPage({page: 1, rows: 999})
+          const { data } = await musicalInstrumentPage({ page: 1, rows: 999 })
           const tempList = data.rows || []
           state.instrumentData = tempList
           tempList.forEach((item: any) => {
@@ -594,8 +621,7 @@ export default defineComponent({
             item.disabled = !item.enableFlag
           })
           state.instrumentList = tempList
-        } catch {
-        }
+        } catch {}
       }
       state.subjectList = deepClone(props.subjectList)
       state.subjectList.forEach((subject: any) => {
@@ -604,13 +630,13 @@ export default defineComponent({
 
       // 初始化应用
       {
-        const appKeys = Object.keys(appKey);
+        const appKeys = Object.keys(appKey)
 
-        const {data} = await sysApplicationPage({page: 1, rows: 999, parentId: 0})
+        const { data } = await sysApplicationPage({ page: 1, rows: 999, parentId: 0 })
         const tempList = data.rows || []
         const filter = tempList.filter((next: any) => {
           return appKeys.includes(next.appKey)
-        });
+        })
         filter.forEach((item: any) => {
           item.label = item.appName
           item.value = item.id
@@ -621,20 +647,19 @@ export default defineComponent({
       // 获取分类信息
       {
         try {
-          const {data} = await musicSheetCategoriesQueryTree({enable: true})
+          const { data } = await musicSheetCategoriesQueryTree({ enable: true })
           state.musicSheetCategories = filterPointCategory(data, 'musicSheetCategoriesList')
-        } catch (e) {
-        }
+        } catch (e) {}
       }
 
       if (props.type === 'edit' || props.type === 'preview') {
         const detail = props.data
         try {
-          const {data} = await musicSheetDetail({id: detail.id})
+          const { data } = await musicSheetDetail({ id: detail.id })
           forms.audioType = data.audioType
           forms.musicSheetAccompanimentList = data.musicSheetAccompanimentList
           data.musicSheetAccompanimentList?.forEach((next: any) => {
-            state.musicSheetAccompanimentUrlList.push(next.audioFileUrl);
+            state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
           })
           forms.playMode = data.playMode
           forms.xmlFileUrl = data.xmlFileUrl
@@ -653,7 +678,7 @@ export default defineComponent({
           forms.status = data.status
           forms.musicCategoryId = data.musicCategoryId
 
-          forms.musicSheetType = data.musicSheetType || "SINGLE"
+          forms.musicSheetType = data.musicSheetType || 'SINGLE'
           forms.evaluationStandard = data.evaluationStandard
           forms.musicalInstrumentIdList = data.musicalInstrumentIds.split(',') || []
 
@@ -671,13 +696,12 @@ export default defineComponent({
           try {
             const extConfigJson = data.extConfigJson ? JSON.parse(data.extConfigJson) : {}
             forms.graduals = extConfigJson.gradualTimes || {}
-          } catch (error) {
-          }
+          } catch (error) {}
           setOwnerName()
           axios.get(data.xmlFileUrl).then((res: any) => {
             if (res?.data) {
               gradualData.list = getGradualLengthByXml(res?.data as any).filter(
-                  (item: any) => item.length === 2
+                (item: any) => item.length === 2
               )
               // state.partListNames = getPartListNames(res?.data as any) as any
               //
@@ -689,9 +713,7 @@ export default defineComponent({
               // })
             }
           })
-
-        } catch (error) {
-        }
+        } catch (error) {}
       } else {
         // 新增只能使用启用状态的数据
         state.subjectList = state.subjectList.filter((next: any) => {
@@ -702,664 +724,723 @@ export default defineComponent({
         })
       }
       state.loading = false
-
     })
 
     return () => (
-        <div style="background: #fff; padding-top: 12px">
+      <div style="background: #fff; padding-top: 12px">
+        <NSpin show={state.loading}>
           <NForm
-              class={styles.formContainer}
-              model={forms}
-              ref={formsRef}
-              label-placement="left"
-              label-width="130"
-              disabled={state.previewMode}
+            class={styles.formContainer}
+            model={forms}
+            ref={formsRef}
+            label-placement="left"
+            label-width="130"
+            disabled={state.previewMode}
           >
-            <NAlert showIcon={false} style={{marginBottom: "12px"}}>曲目信息</NAlert>
+            <NAlert showIcon={false} style={{ marginBottom: '12px' }}>
+              曲目信息
+            </NAlert>
             <NGrid cols={2}>
               <NFormItemGi
-                  label="曲目名称"
-                  path="name"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请输入曲目名称'
-                    }
-                  ]}
+                label="曲目名称"
+                path="name"
+                rule={[
+                  {
+                    required: true,
+                    message: '请输入曲目名称'
+                  }
+                ]}
               >
                 <NInput
-                    v-model:value={forms.name}
-                    placeholder="请输入曲目名称"
-                    maxlength={25}
-                    showCount
+                  v-model:value={forms.name}
+                  placeholder="请输入曲目名称"
+                  maxlength={25}
+                  showCount
                 />
               </NFormItemGi>
               <NFormItemGi
-                  label="音乐人"
-                  path="composer"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请输入音乐人'
-                    }
-                  ]}
+                label="音乐人"
+                path="composer"
+                rule={[
+                  {
+                    required: true,
+                    message: '请输入音乐人'
+                  }
+                ]}
               >
-                <NInput v-model:value={forms.composer}
-                        placeholder="请输入音乐人名称"
-                        showCount
-                        maxlength={14}
+                <NInput
+                  v-model:value={forms.composer}
+                  placeholder="请输入音乐人名称"
+                  showCount
+                  maxlength={14}
                 />
               </NFormItemGi>
             </NGrid>
             <NGrid cols={2}>
               <NFormItemGi label="曲目描述" path="remark">
                 <NInput
-                    placeholder="请输入曲目描述"
-                    type="textarea"
-                    rows={4}
-                    showCount
-                    maxlength={200}
-                    v-model:value={forms.remark}
+                  placeholder="请输入曲目描述"
+                  type="textarea"
+                  rows={4}
+                  showCount
+                  maxlength={200}
+                  v-model:value={forms.remark}
                 />
               </NFormItemGi>
-              <NFormItemGi label="曲目封面" path="musicCover"
-                           rule={[
-                             {
-                               required: true,
-                               message: "请上传曲目封面"
-                             }
-                           ]}>
+              <NFormItemGi
+                label="曲目封面"
+                path="musicCover"
+                rule={[
+                  {
+                    required: true,
+                    message: '请上传曲目封面'
+                  }
+                ]}
+              >
                 <UploadFile
-                    desc={'封面图'}
-                    disabled={state.previewMode}
-                    accept=".jpg,.jpeg,.png"
-                    tips="请上传大小1M以内的JPG、PNG图片"
-                    size={1}
-                    v-model:fileList={forms.musicCover}
-                    cropper
-                    bucketName="cbs"
-                    options={{
-                      autoCrop: true, //是否默认生成截图框
-                      enlarge: 2, //  图片放大倍数
-                      autoCropWidth: 200, //默框高度
-                      fixedBox: true, //是否固定截图框大认生成截图框宽度
-                      autoCropHeight: 200, //默认生成截图小 不允许改变
-                      previewsCircle: false, //预览图是否是原圆形
-                      title: '曲目封面'
-                    }}
+                  desc={'封面图'}
+                  disabled={state.previewMode}
+                  accept=".jpg,.jpeg,.png"
+                  tips="请上传大小1M以内的JPG、PNG图片"
+                  size={1}
+                  v-model:fileList={forms.musicCover}
+                  cropper
+                  bucketName="cbs"
+                  options={{
+                    autoCrop: true, //是否默认生成截图框
+                    enlarge: 2, //  图片放大倍数
+                    autoCropWidth: 200, //默框高度
+                    fixedBox: true, //是否固定截图框大认生成截图框宽度
+                    autoCropHeight: 200, //默认生成截图小 不允许改变
+                    previewsCircle: false, //预览图是否是原圆形
+                    title: '曲目封面'
+                  }}
                 />
               </NFormItemGi>
             </NGrid>
             <NGrid cols={2}>
               <NFormItemGi
-                  label="曲目类型"
-                  path="musicSheetType"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请选择曲目类型'
-                    }
-                  ]}
+                label="曲目类型"
+                path="musicSheetType"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择曲目类型'
+                  }
+                ]}
               >
                 <NSelect
-                    placeholder="请选择曲目类型"
-                    v-model:value={forms.musicSheetType}
-                    options={getSelectDataFromObj(musicSheetType)}
+                  placeholder="请选择曲目类型"
+                  v-model:value={forms.musicSheetType}
+                  options={getSelectDataFromObj(musicSheetType)}
                 />
               </NFormItemGi>
 
               <NFormItemGi
-                  label="作者属性"
-                  path="sourceType"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请选择作者属性'
-                    }
-                  ]}
+                label="作者属性"
+                path="sourceType"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择作者属性'
+                  }
+                ]}
               >
                 <NSelect
-                    v-model:value={forms.sourceType}
-                    options={getSelectDataFromObj(musicSheetSourceType)}
-                    placeholder="请选择作者属性"
-                    onUpdateValue={() => {
-                      // 发送变化，清理选择的所属人信息
-                      forms.musicSheetExtend = {}
-                      state.ownerName = null
-                      // forms.musicSheetExtend.userId = null
-                      // forms.musicSheetExtend.userName = null
-                      // forms.musicSheetExtend.applicationId = null
-                      // forms.musicSheetExtend.organizationRoleId = null
-                    }}
+                  v-model:value={forms.sourceType}
+                  options={getSelectDataFromObj(musicSheetSourceType)}
+                  placeholder="请选择作者属性"
+                  onUpdateValue={() => {
+                    // 发送变化，清理选择的所属人信息
+                    forms.musicSheetExtend = {}
+                    state.ownerName = null
+                    // forms.musicSheetExtend.userId = null
+                    // forms.musicSheetExtend.userName = null
+                    // forms.musicSheetExtend.applicationId = null
+                    // forms.musicSheetExtend.organizationRoleId = null
+                  }}
                 />
               </NFormItemGi>
-
             </NGrid>
             <NGrid cols={2}>
               {forms.sourceType === 'PERSON' && (
-                  <NFormItemGi
-                      label="所属人"
-                      path="musicSheetExtend.userId"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择曲目所属人'
-                        }
-                      ]}
+                <NFormItemGi
+                  label="所属人"
+                  path="musicSheetExtend.userId"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择曲目所属人'
+                    }
+                  ]}
+                >
+                  <NButton
+                    disabled={state.previewMode || !forms.sourceType}
+                    type="primary"
+                    size="small"
+                    text
+                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
+                    onClick={() => {
+                      state.showMusicSheetOwnerDialog = true
+                    }}
                   >
-                    <NButton
-                        disabled={state.previewMode || !forms.sourceType}
-                        type="primary"
-                        size="small"
-                        text
-                        //v-auth="orchestraSubsidyStandard/update1597887579789053953"
-                        onClick={() => {
-                          state.showMusicSheetOwnerDialog = true
-                        }}
-                    >
-                      {state.ownerName ? state.ownerName : '请选择所属人'}
-                    </NButton>
-                  </NFormItemGi>)}
+                    {state.ownerName ? state.ownerName : '请选择所属人'}
+                  </NButton>
+                </NFormItemGi>
+              )}
               {forms.sourceType === 'ORG' && (
-                  <NFormItemGi
-                      label="所属人"
-                      path="musicSheetExtend.organizationRoleId"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择曲目所属机构'
-                        }
-                      ]}
+                <NFormItemGi
+                  label="所属人"
+                  path="musicSheetExtend.organizationRoleId"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择曲目所属机构'
+                    }
+                  ]}
+                >
+                  <NButton
+                    disabled={state.previewMode || !forms.sourceType}
+                    type="primary"
+                    size="small"
+                    text
+                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
+                    onClick={() => {
+                      state.showMusicSheetOwnerDialog = true
+                    }}
                   >
-                    <NButton
-                        disabled={state.previewMode || !forms.sourceType}
-                        type="primary"
-                        size="small"
-                        text
-                        //v-auth="orchestraSubsidyStandard/update1597887579789053953"
-                        onClick={() => {
-                          state.showMusicSheetOwnerDialog = true
-                        }}
-                    >
-                      {state.ownerName ? state.ownerName : '请选择所属机构'}
-                    </NButton>
-                  </NFormItemGi>)}
-              <NFormItemGi label="速度" path="playSpeed"
-                           rule={[
-                             {
-                               required: false,
-                               message: '请输入速度'
-                             }
-                           ]}
+                    {state.ownerName ? state.ownerName : '请选择所属机构'}
+                  </NButton>
+                </NFormItemGi>
+              )}
+              <NFormItemGi
+                label="速度"
+                path="playSpeed"
+                rule={[
+                  {
+                    required: false,
+                    message: '请输入速度'
+                  }
+                ]}
               >
                 <NInputNumber
-                    placeholder="请输入速度"
-                    v-model:value={forms.playSpeed}
-                    style="width:100%"
+                  placeholder="请输入速度"
+                  v-model:value={forms.playSpeed}
+                  style="width:100%"
                 />
               </NFormItemGi>
             </NGrid>
             <NGrid cols={2}>
-              <NFormItemGi label="审核版本" path="appAuditFlag"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择曲目所属人'
-                             }
-                           ]}
+              <NFormItemGi
+                label="审核版本"
+                path="appAuditFlag"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择曲目所属人'
+                  }
+                ]}
               >
                 <NSelect
-                    options={
-                      [
-                        {
-                          label: '是',
-                          value: 1
-                        },
-                        {
-                          label: '否',
-                          value: 0
-                        }
-                      ] as any
-                    }
-                    v-model:value={forms.appAuditFlag}
+                  options={
+                    [
+                      {
+                        label: '是',
+                        value: 1
+                      },
+                      {
+                        label: '否',
+                        value: 0
+                      }
+                    ] as any
+                  }
+                  v-model:value={forms.appAuditFlag}
                 />
               </NFormItemGi>
-              <NFormItemGi label="曲目分类" path="musicCategoryId"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择曲目分类'
-                             }
-                           ]}
+              <NFormItemGi
+                label="曲目分类"
+                path="musicCategoryId"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择曲目分类'
+                  }
+                ]}
               >
                 <NCascader
-                    valueField="id"
-                    labelField="name"
-                    children-field="musicSheetCategoriesList"
-                    placeholder="请选择分类"
-                    v-model:value={forms.musicCategoryId}
-                    options={state.musicSheetCategories}
-                    clearable
+                  valueField="id"
+                  labelField="name"
+                  children-field="musicSheetCategoriesList"
+                  placeholder="请选择分类"
+                  v-model:value={forms.musicCategoryId}
+                  options={state.musicSheetCategories}
+                  clearable
                 />
               </NFormItemGi>
             </NGrid>
             <NGrid cols={2}>
-              <NFormItemGi label="重复节拍时长" path="repeatedBeats"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择是否重复节拍时长'
-                             }
-                           ]}
+              <NFormItemGi
+                label="重复节拍时长"
+                path="repeatedBeats"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择是否重复节拍时长'
+                  }
+                ]}
               >
-                <NRadioGroup
-                    v-model:value={forms.repeatedBeats}
-                >
+                <NRadioGroup v-model:value={forms.repeatedBeats}>
                   <NRadio value={true}>是</NRadio>
                   <NRadio value={false}>否</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
               <NFormItemGi
-                  label="评分标准"
-                  path="evaluationStandard"
-                  rule={[
-                    {
-                      required: true
-                    }
-                  ]}
+                label="评分标准"
+                path="evaluationStandard"
+                rule={[
+                  {
+                    required: true
+                  }
+                ]}
               >
-                <NRadioGroup
-                    v-model:value={forms.evaluationStandard}
-                >
+                <NRadioGroup v-model:value={forms.evaluationStandard}>
                   <NRadio value={'FREQUENCY'}>标准评测</NRadio>
                   <NRadio value={'AMPLITUDE'}>打击乐(振幅)</NRadio>
                   <NRadio value={'DECIBELS'}>节奏(分贝)</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
             </NGrid>
-            <NAlert showIcon={false} style={{marginBottom: "12px"}}>曲目上传</NAlert>
+            <NAlert showIcon={false} style={{ marginBottom: '12px' }}>
+              曲目上传
+            </NAlert>
             <NGrid cols={2}>
-              <NFormItemGi label="播放模式" path="playMode"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择播放模式'
-                             }
-                           ]}
+              <NFormItemGi
+                label="播放模式"
+                path="playMode"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择播放模式'
+                  }
+                ]}
               >
                 <NRadioGroup
-                    v-model:value={forms.playMode}
-                    onUpdateValue={(value: string | number | boolean) => {
-                      if (value === 'MP3') {
-                        forms.playMode = 'MP3'
-                      } else {
-                        forms.playMode = 'MIDI'
-                      }
-                    }}
+                  v-model:value={forms.playMode}
+                  onUpdateValue={(value: string | number | boolean) => {
+                    if (value === 'MP3') {
+                      forms.playMode = 'MP3'
+                    } else {
+                      forms.playMode = 'MIDI'
+                    }
+                  }}
                 >
                   <NRadio value="MP3">MP3</NRadio>
                   <NRadio value="MIDI">MID</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
               {forms.playMode === 'MP3' && (
-                  <NFormItemGi
-                      label="伴奏类型"
-                      path="audioType"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择伴奏类型'
-                        }
-                      ]}
-                  >
-                    <NRadioGroup
-                        v-model:value={forms.audioType}
-                    >
-                      <NRadio value={'HOMEMODE'}>自制伴奏</NRadio>
-                      <NRadio value={'COMMON'}>普通伴奏</NRadio>
-                    </NRadioGroup>
-                  </NFormItemGi>
+                <NFormItemGi
+                  label="伴奏类型"
+                  path="audioType"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择伴奏类型'
+                    }
+                  ]}
+                >
+                  <NRadioGroup v-model:value={forms.audioType}>
+                    <NRadio value={'HOMEMODE'}>自制伴奏</NRadio>
+                    <NRadio value={'COMMON'}>普通伴奏</NRadio>
+                  </NRadioGroup>
+                </NFormItemGi>
               )}
             </NGrid>
             <NGrid cols={2}>
               {forms.playMode === 'MP3' && (
-                  <NFormItemGi
-                      label="上传伴奏"
-                      path="musicSheetAccompanimentList"
-                      rule={[
-                        {
-                          required: false,
-                          message: '请选择上传.mp3'
-                        }
-                      ]}
-                  >
-                    <UploadFile
-                        disabled={state.previewMode}
-                        size={10}
-                        v-model:imageList={state.musicSheetAccompanimentUrlList}
-                        tips="仅支持上传.mp3格式文件"
-                        listType="image"
-                        accept=".mp3"
-                        bucketName="cloud-coach"
-                        text="点击上传伴奏文件"
-                        max={10}
-                        desc={'上传伴奏文件'}
-                        onUpload:success={(file) => {
-                          state.musicSheetAccompanimentUrls = [state.musicSheetAccompanimentUrls, file.url].filter(Boolean).join(',')
-                          state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls?.split(',').filter(Boolean)
-                          forms.musicSheetAccompanimentList = []
-                          for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
-                            forms.musicSheetAccompanimentList.push({
-                              audioFileUrl: state.musicSheetAccompanimentUrlList[i],
-                              sortNumber: i + 1
-                            })
-                          }
-                        }}
-                        onRemove={() => {
-                          state.musicSheetAccompanimentUrlList = []
-                          state.musicSheetAccompanimentUrls = ''
-                        }}
-                        // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
-                        multiple={true}
-                    />
-                  </NFormItemGi>
+                <NFormItemGi
+                  label="上传伴奏"
+                  path="musicSheetAccompanimentList"
+                  rule={[
+                    {
+                      required: false,
+                      message: '请选择上传.mp3'
+                    }
+                  ]}
+                >
+                  <UploadFile
+                    disabled={state.previewMode}
+                    size={10}
+                    v-model:imageList={state.musicSheetAccompanimentUrlList}
+                    tips="仅支持上传.mp3格式文件"
+                    listType="image"
+                    accept=".mp3"
+                    bucketName="cloud-coach"
+                    text="点击上传伴奏文件"
+                    max={10}
+                    desc={'上传伴奏文件'}
+                    onUpload:success={(file) => {
+                      state.musicSheetAccompanimentUrls = [
+                        state.musicSheetAccompanimentUrls,
+                        file.url
+                      ]
+                        .filter(Boolean)
+                        .join(',')
+                      state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls
+                        ?.split(',')
+                        .filter(Boolean)
+                      forms.musicSheetAccompanimentList = []
+                      for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
+                        forms.musicSheetAccompanimentList.push({
+                          audioFileUrl: state.musicSheetAccompanimentUrlList[i],
+                          sortNumber: i + 1
+                        })
+                      }
+                    }}
+                    onRemove={() => {
+                      state.musicSheetAccompanimentUrlList = []
+                      state.musicSheetAccompanimentUrls = ''
+                    }}
+                    // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
+                    multiple={true}
+                  />
+                </NFormItemGi>
               )}
               {forms.playMode === 'MIDI' && (
-                  <NFormItemGi
-                      label="上传MID"
-                      path="midiFileUrl"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择上传.MID格式文件'
-                        }
-                      ]}
-                  >
-                    <UploadFile
-                        desc={'MIDI文件'}
-                        disabled={state.previewMode}
-                        size={10}
-                        v-model:fileList={forms.midiFileUrl}
-                        tips="仅支持上传.MID格式文件"
-                        listType="image"
-                        accept=".mid"
-                        bucketName="cloud-coach"
-                        text="点击上传MID文件"
-                        // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
-                    />
-                  </NFormItemGi>
-              )}
-              <NFormItemGi
-                  label="上传XML"
-                  path="xmlFileUrl"
+                <NFormItemGi
+                  label="上传MID"
+                  path="midiFileUrl"
                   rule={[
                     {
                       required: true,
-                      message: '请选择上传XML'
+                      message: '请选择上传.MID格式文件'
                     }
                   ]}
-              >
-                <UploadFile
-                    desc={'XML文件'}
+                >
+                  <UploadFile
+                    desc={'MIDI文件'}
                     disabled={state.previewMode}
                     size={10}
-                    v-model:fileList={forms.xmlFileUrl}
-                    tips="仅支持上传.xml/.mxml格式文件"
+                    v-model:fileList={forms.midiFileUrl}
+                    tips="仅支持上传.MID格式文件"
                     listType="image"
-                    accept=".xml,.mxml"
+                    accept=".mid"
                     bucketName="cloud-coach"
-                    text="点击上传XML文件"
-                    onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
-                    onRemove={() => {
-                      forms.multiTracksSelection = []
-                      state.partListNames = []
-                      forms.musicSheetSoundList = []
-                      forms.musicalInstrumentIdList = []
-                      forms.subjectIds = []
-                    }}
+                    text="点击上传MID文件"
+                    // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
+                  />
+                </NFormItemGi>
+              )}
+              <NFormItemGi
+                label="上传XML"
+                path="xmlFileUrl"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择上传XML',
+                    trigger: ['change', 'input']
+                  }
+                ]}
+              >
+                <UploadFile
+                  desc={'XML文件'}
+                  disabled={state.previewMode}
+                  size={10}
+                  key={'xmlFileUrl'}
+                  v-model:fileList={forms.xmlFileUrl}
+                  tips="仅支持上传.xml/.mxml格式文件"
+                  listType="image"
+                  accept=".xml,.mxml"
+                  bucketName="cloud-coach"
+                  text="点击上传XML文件"
+                  onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
+                  onRemove={() => {
+                    forms.multiTracksSelection = []
+                    state.partListNames = []
+                    forms.musicSheetSoundList = []
+                    forms.musicalInstrumentIdList = []
+                    forms.subjectIds = []
+                  }}
                 />
               </NFormItemGi>
-
             </NGrid>
 
             <NGrid cols={2}>
-              <NFormItemGi label="可用声部" path="subjectIds"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择可用声部'
-                             }
-                           ]}
+              <NFormItemGi
+                label="可用声部"
+                path="subjectIds"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择可用声部',
+                    trigger: 'change',
+                    type: 'array'
+                  }
+                ]}
               >
                 <NSelect
-                    v-model:value={forms.subjectIds}
-                    options={state.subjectList}
-                    multiple
-                    filterable
-                    clearable
-                    placeholder="请选择可用声部"
-                    maxTagCount={2}
+                  v-model:value={forms.subjectIds}
+                  options={state.subjectList}
+                  multiple
+                  filterable
+                  clearable
+                  placeholder="请选择可用声部"
+                  maxTagCount={2}
                 />
               </NFormItemGi>
-              <NFormItemGi label="可用乐器" path="musicalInstrumentIdList"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择可用乐器'
-                             }
-                           ]}
+              <NFormItemGi
+                label="可用乐器"
+                path="musicalInstrumentIdList"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择可用乐器'
+                  }
+                ]}
               >
                 <NSelect
-                    placeholder="请选择可用乐器"
-                    options={state.instrumentList}
-                    v-model:value={forms.musicalInstrumentIdList}
-                    clearable
-                    multiple
-                    maxTagCount={2}
+                  placeholder="请选择可用乐器"
+                  options={state.instrumentList}
+                  v-model:value={forms.musicalInstrumentIdList}
+                  clearable
+                  multiple
+                  maxTagCount={2}
                 />
               </NFormItemGi>
             </NGrid>
 
-            {(forms.musicSheetType) && (
-                <NGrid cols={1}>
-                  <NFormItemGi
-                      label={`${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`}
-                      path="multiTracksSelection"
-                      rule={[
-                        {
-                          required: true,
-                          message: `请选择${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`
-                        }
-                      ]}
-                  >
-                    <NGrid style="padding-top: 4px;">
-                      <NGi span={24}>
-                        <NRadioGroup
-                            v-model:value={state.multiTracks}
-                            onUpdateValue={(value) => {
-                              checkMultiTracks(value)
-                            }}
-                        >
-                          <NRadio value={'all'}>全选</NRadio>
-                          <NRadio value={'allUncheck'}>重置</NRadio>
-                          <NRadio value={'invert'}>反选</NRadio>
-                        </NRadioGroup>
-                      </NGi>
-                      <NGi span={24} style={"margin-top:5px"}><NFormItemGi
-                          label=''
-                          path="multiTracksSelection"
-                          rule={[
-                            {
-                              required: false,
-                            }
-                          ]}
+            {forms.musicSheetType && (
+              <NGrid cols={1}>
+                <NFormItemGi
+                  label={`${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`}
+                  path="multiTracksSelection"
+                  rule={[
+                    {
+                      required: true,
+                      message: `请选择${
+                        forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'
+                      }`
+                    }
+                  ]}
+                >
+                  <NGrid style="padding-top: 4px;">
+                    <NGi span={24}>
+                      <NRadioGroup
+                        v-model:value={state.multiTracks}
+                        onUpdateValue={(value) => {
+                          checkMultiTracks(value)
+                        }}
                       >
-                        <NCheckboxGroup
-                            v-model:value={forms.multiTracksSelection}
-                        >
-                          <NGrid yGap={2} cols={4}
-                          >
+                        <NRadio value={'all'}>全选</NRadio>
+                        <NRadio value={'allUncheck'}>重置</NRadio>
+                        <NRadio value={'invert'}>反选</NRadio>
+                      </NRadioGroup>
+                    </NGi>
+                    <NGi span={24} style={'margin-top:5px'}>
+                      <NFormItemGi
+                        label=""
+                        path="multiTracksSelection"
+                        rule={[
+                          {
+                            required: false
+                          }
+                        ]}
+                      >
+                        <NCheckboxGroup v-model:value={forms.multiTracksSelection}>
+                          <NGrid yGap={2} cols={4}>
                             {state.partListNames.map((item: any) => (
-                                <NGi>
-                                  <NCheckbox value={item.value} label={item.label}/>
-                                </NGi>
+                              <NGi>
+                                <NCheckbox value={item.value} label={item.label} />
+                              </NGi>
                             ))}
                           </NGrid>
                         </NCheckboxGroup>
-                      </NFormItemGi></NGi>
-                    </NGrid>
-                  </NFormItemGi>
-                </NGrid>
-            )
-            }
+                      </NFormItemGi>
+                    </NGi>
+                  </NGrid>
+                </NFormItemGi>
+              </NGrid>
+            )}
             <NGrid cols={2}>
-              <NFormItemGi label="是否播放节拍器" path="isPlayBeat"
-                           rule={[
-                             {
-                               required: true,
-                               message: '请选择是否播放节拍器'
-                             }
-                           ]}
+              <NFormItemGi
+                label="是否播放节拍器"
+                path="isPlayBeat"
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择是否播放节拍器'
+                  }
+                ]}
               >
-                <NRadioGroup
-                    v-model:value={forms.isPlayBeat}
-                >
+                <NRadioGroup v-model:value={forms.isPlayBeat}>
                   <NRadio value={true}>是</NRadio>
                   <NRadio value={false}>否</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
               {forms.isPlayBeat && (
-                  <NFormItemGi label="播放方式" path="audioType"
-                               rule={[
-                                 {
-                                   required: true,
-                                   message: '请选择播放方式'
-                                 }
-                               ]}
-                  >
-                    <NRadioGroup
-                        v-model:value={forms.isUseSystemBeat}
-                    >
-                      <NRadio value={true}>系统节拍器</NRadio>
-                      <NRadio value={false}>MP3节拍器</NRadio>
-                    </NRadioGroup>
-                  </NFormItemGi>
+                <NFormItemGi
+                  label="播放方式"
+                  path="audioType"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择播放方式'
+                    }
+                  ]}
+                >
+                  <NRadioGroup v-model:value={forms.isUseSystemBeat}>
+                    <NRadio value={true}>系统节拍器</NRadio>
+                    <NRadio value={false}>MP3节拍器</NRadio>
+                  </NRadioGroup>
+                </NFormItemGi>
               )}
             </NGrid>
             {/* 只有播放类型为mp3时才会有原音 */}
             {forms.playMode === 'MP3' && forms.musicSheetSoundList.length > 0 && (
-                <>
-                  {forms.musicSheetSoundList.map((item: any, index: number) => (
-                      <>
-                        {item.track?.toLocaleUpperCase?.() != 'COMMON' && forms.multiTracksSelection.indexOf(item.track) > -1 &&
-                            <NGrid class={styles.audioSection}
-                                // v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
+              <>
+                {forms.musicSheetSoundList.map((item: any, index: number) => (
+                  <>
+                    {item.track?.toLocaleUpperCase?.() != 'COMMON' &&
+                      forms.multiTracksSelection.indexOf(item.track) > -1 && (
+                        <NGrid
+                          class={styles.audioSection}
+                          // v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
+                        >
+                          <NFormItemGi
+                            span={12}
+                            label="原音"
+                            path={`musicSheetSoundList[${index}].audioFileUrl`}
+                            rule={[
+                              {
+                                // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
+                                required: true,
+                                message: `请上传${
+                                  item.track ? item.track + '的' : '第' + (index + 1) + '个'
+                                }原音`
+                              }
+                            ]}
+                          >
+                            <UploadFile
+                              desc={'原音文件'}
+                              disabled={state.previewMode}
+                              size={10}
+                              v-model:fileList={item.audioFileUrl}
+                              tips="仅支持上传.mp3格式文件"
+                              listType="image"
+                              accept=".mp3"
+                              bucketName="cloud-coach"
+                            />
+                          </NFormItemGi>
+                          {state.partListNames.length > 1 && (
+                            <NFormItemGi
+                              span={12}
+                              label="所属轨道"
+                              path={`musicSheetSoundList[${index}].track`}
+                              rule={[
+                                {
+                                  required: true,
+                                  message: '请选择所属轨道'
+                                }
+                              ]}
                             >
-                                <NFormItemGi
-                                    span={12}
-                                    label="原音"
-                                    path={`musicSheetSoundList[${index}].audioFileUrl`}
-                                    rule={[
-                                      {
-                                        // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
-                                        required: true,
-                                        message: `请上传${
-                                            item.track ? item.track + '的' : '第' + (index + 1) + '个'
-                                        }原音`
-                                      }
-                                    ]}
-                                >
-                                    <UploadFile
-                                        desc={'原音文件'}
-                                        disabled={state.previewMode}
-                                        size={10}
-                                        v-model:fileList={item.audioFileUrl}
-                                        tips="仅支持上传.mp3格式文件"
-                                        listType="image"
-                                        accept=".mp3"
-                                        bucketName="cloud-coach"
-                                    />
-                                </NFormItemGi>
-                              {state.partListNames.length > 1 && (
-                                  <NFormItemGi
-                                      span={12}
-                                      label="所属轨道"
-                                      path={`musicSheetSoundList[${index}].track`}
-                                      rule={[
-                                        {
-                                          required: true,
-                                          message: '请选择所属轨道'
-                                        }
-                                      ]}
-                                  >
-                                    <NSelect
-                                        placeholder="请选择所属轨道"
-                                        v-model:value={item.track}
-                                        options={initPartsListStatus(item.track)}
-                                    />
-                                  </NFormItemGi>
-                              )}
-                            </NGrid>}
-                      </>
-                  ))}
+                              <NSelect
+                                placeholder="请选择所属轨道"
+                                v-model:value={item.track}
+                                options={initPartsListStatus(item.track)}
+                              />
+                            </NFormItemGi>
+                          )}
+                        </NGrid>
+                      )}
+                  </>
+                ))}
 
-                  <NButton
-                      type="primary"
-                      dashed
-                      block
-                      disabled={state.partListNames.length <= forms.musicSheetSoundList.length}
-                      style={{
-                        marginBottom: '24px'
-                      }}
-                      onClick={createSys}
-                  >
-                    添加原音
-                  </NButton>
-                </>
+                <NButton
+                  type="primary"
+                  dashed
+                  block
+                  disabled={state.partListNames.length <= forms.musicSheetSoundList.length}
+                  style={{
+                    marginBottom: '24px'
+                  }}
+                  onClick={createSys}
+                >
+                  添加原音
+                </NButton>
+              </>
             )}
           </NForm>
+        </NSpin>
+        {props.type !== 'preview' && (
+          <NSpace justify="end" style="padding-top:12px">
+            <NButton type="default" onClick={() => emit('close')}>
+              取消
+            </NButton>
+            <NButton
+              type="primary"
+              onClick={() => onSubmit()}
+              loading={btnLoading.value}
+              disabled={btnLoading.value}
+            >
+              确认
+            </NButton>
+          </NSpace>
+        )}
 
-          {props.type !== 'preview' &&
-              (
-                  <NSpace justify="end" style="padding-top:12px">
-                    <NButton type="default" onClick={() => emit('close')}>
-                      取消
-                    </NButton>
-                    <NButton
-                        type="primary"
-                        onClick={() => onSubmit()}
-                        loading={btnLoading.value}
-                        disabled={btnLoading.value}
-                    >
-                      确认
-                    </NButton>
-                  </NSpace>
-              )}
+        <NModal
+          v-model:show={state.showMusicSheetOwnerDialog}
+          preset="dialog"
+          showIcon={false}
+          maskClosable={false}
+          title="所属人"
+          style={{ width: '800px' }}
+        >
+          <MusicSheetOwnerDialog
+            musicSheetExtend={forms.musicSheetExtend}
+            sourceType={forms.sourceType}
+            appData={state.appData}
+            onClose={() => {
+              state.showMusicSheetOwnerDialog = false
+            }}
+            onChoseMusicSheetOwnerData={(musicSheetOwnerData) => {
+              forms.musicSheetExtend = {
+                ...musicSheetOwnerData
+              }
+              setOwnerName()
+            }}
+          />
+        </NModal>
 
-          <NModal
-              v-model:show={state.showMusicSheetOwnerDialog}
-              preset="dialog"
-              showIcon={false}
-              maskClosable={false}
-              title="所属人"
-              style={{width: '800px'}}
-          >
-            <MusicSheetOwnerDialog
-                musicSheetExtend={forms.musicSheetExtend}
-                sourceType={forms.sourceType}
-                appData={state.appData}
-                onClose={() => {
-                  state.showMusicSheetOwnerDialog = false
-                }}
-                onChoseMusicSheetOwnerData={(musicSheetOwnerData) => {
-                  forms.musicSheetExtend = {
-                    ...musicSheetOwnerData
-                  }
-                  setOwnerName()
-                }}
-            />
-          </NModal>
-        </div>
+        <NModal
+          class={styles.productModal}
+          title="自动生成曲谱图片"
+          v-model:show={state.productOpen}
+          preset="dialog"
+          closeOnEsc={false}
+          maskClosable={false}
+          showIcon={false}
+        >
+          <MusicCreateImg
+            xmlFileUrl={forms.xmlFileUrl || ''}
+            onClose={() => (state.productOpen = false)}
+            onConfirm={async (item: any) => {
+              // 保存
+              try {
+                forms.musicImg = item.musicImg
+                forms.musicSvg = item.musicSvg
+                forms.musicJianSvg = item.musicJianSvg
+                onSubmit()
+              } catch (e: any) {
+                //
+                console.log(e, 'e')
+              }
+              setTimeout(() => {
+                state.isAutoSave = false
+              }, 50)
+            }}
+          />
+        </NModal>
+      </div>
     )
   }
 })

src/views/music-library/music-sheet/modal/use-project.tsx

@@ -1,9 +1,27 @@
-import {computed, defineComponent, onMounted, reactive, ref} from 'vue'
-import styles from "@views/music-library/music-sheet/modal/index.module.less";
-import {NButton, NCascader, NCheckbox, NCheckboxGroup, NForm, NFormItem, NInputNumber, NSelect, NSpace, NTabPane, NTabs, useMessage} from "naive-ui";
-import {appKey, musicSheetAvailableType, musicSheetPaymentType} from "@/utils/constant";
-import {musicSheetApplicationExtendCategoryApplicationExtendInfo, musicSheetApplicationExtendCategoryList, musicSheetApplicationExtendSave, musicSheetDetail,} from "@views/music-library/api";
-import {getSelectDataFromObj} from "@/utils/objectUtil";
+import { computed, defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import styles from '@views/music-library/music-sheet/modal/index.module.less'
+import {
+  NButton,
+  NCascader,
+  NCheckbox,
+  NCheckboxGroup,
+  NForm,
+  NFormItem,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NTabPane,
+  NTabs,
+  useMessage
+} from 'naive-ui'
+import { appKey, musicSheetAvailableType, musicSheetPaymentType } from '@/utils/constant'
+import {
+  musicSheetApplicationExtendCategoryApplicationExtendInfo,
+  musicSheetApplicationExtendCategoryList,
+  musicSheetApplicationExtendSave,
+  musicSheetDetail
+} from '@views/music-library/api'
+import { getSelectDataFromObj } from '@/utils/objectUtil'
 
 export default defineComponent({
   name: 'use-project',
@@ -20,89 +38,94 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
-  setup(props, {emit}) {
+  setup(props, { emit }) {
+    const tabsRef = ref()
     const forms = reactive({
       musicSheetId: null,
       useApplicationIds: [] as any,
 
-      useProjectParamConfig: {  //各个项目配置的参数
-        'GYM': {
+      useProjectParamConfig: {
+        //各个项目配置的参数
+        GYM: {
           musicSheetCategoryId: null as any,
           sortNo: null as any,
-          paymentType: null as any, // 是否收费
+          paymentType: null as any // 是否收费
         },
-        'GYT': {
+        GYT: {
           musicSheetCategoryId: null as any,
-          sortNo: null as any,
+          sortNo: null as any
         },
-        'KLX': {
+        KLX: {
           availableType: null as any, //可用途径 ORG 机构 PLATFORM 平台
           musicSheetCategoryId: null as any,
           paymentType: null as any, // 是否收费
           musicPrice: null as any, // 曲目价格
           topFlag: null as any, // 是否置顶(0:否;1:是)
           exquisiteFlag: null as any, // 精品标志
-          sortNo: null as any,
+          sortNo: null as any
         },
-        'KT': {
+        KT: {
           musicSheetCategoryId: null as any,
-          sortNo: null as any,
-        },
-      } as any,
+          sortNo: null as any
+        }
+      } as any
     })
 
     // 除了排序号，其他字段有一个有值，其他字段都必填
     const gymFileRequire = computed(() => {
-          const app = forms.useProjectParamConfig.GYM
-          const fieldList = ['musicSheetCategoryId', 'paymentType']
-          for (let i = 0; i < fieldList.length; i++) {
-            const fieldValue = app[fieldList[i]]
-            if (fieldValue) {
-              return true
-            }
-          }
-          return false;
+      const app = forms.useProjectParamConfig.GYM
+      const fieldList = ['musicSheetCategoryId', 'paymentType']
+      for (let i = 0; i < fieldList.length; i++) {
+        const fieldValue = app[fieldList[i]]
+        if (fieldValue) {
+          return true
         }
-    )
+      }
+      return false
+    })
 
     const klxFileRequire = computed(() => {
-          const app = forms.useProjectParamConfig['KLX']
-          const fieldList = ['availableType', 'musicSheetCategoryId', 'paymentType', 'musicPrice', 'topFlag', 'exquisiteFlag']
-          for (let i = 0; i < fieldList.length; i++) {
-            const fieldValue = app[fieldList[i]]
-            if (fieldValue) {
-              return true
-            }
-          }
-          return false;
+      const app = forms.useProjectParamConfig['KLX']
+      const fieldList = [
+        'availableType',
+        'musicSheetCategoryId',
+        'paymentType',
+        'musicPrice',
+        'topFlag',
+        'exquisiteFlag'
+      ]
+      for (let i = 0; i < fieldList.length; i++) {
+        const fieldValue = app[fieldList[i]]
+        if (fieldValue) {
+          return true
         }
-    )
+      }
+      return false
+    })
 
     const ktFileRequire = computed(() => {
-          const app = forms.useProjectParamConfig['KT']
-          const fieldList = ['musicSheetCategoryId']
-          for (let i = 0; i < fieldList.length; i++) {
-            const fieldValue = app[fieldList[i]]
-            if (fieldValue) {
-              return true
-            }
-          }
-          return false;
+      const app = forms.useProjectParamConfig['KT']
+      const fieldList = ['musicSheetCategoryId']
+      for (let i = 0; i < fieldList.length; i++) {
+        const fieldValue = app[fieldList[i]]
+        if (fieldValue) {
+          return true
         }
-    )
+      }
+      return false
+    })
 
     const gytFileRequire = computed(() => {
-          const app = forms.useProjectParamConfig['GYT']
-          const fieldList = ['musicSheetCategoryId']
-          for (let i = 0; i < fieldList.length; i++) {
-            const fieldValue = app[fieldList[i]]
-            if (fieldValue) {
-              return true
-            }
-          }
-          return false;
+      const app = forms.useProjectParamConfig['GYT']
+      const fieldList = ['musicSheetCategoryId']
+      for (let i = 0; i < fieldList.length; i++) {
+        const fieldValue = app[fieldList[i]]
+        if (fieldValue) {
+          return true
         }
-    )
+      }
+      return false
+    })
 
     const state = reactive({
       loading: false,
@@ -110,12 +133,11 @@ export default defineComponent({
       tabName: null as any,
       selectAppKey: [] as any, //选择的APP
       selectAppName: [] as any, //app key name映射
-      appKeyNameMap: null as any,//
+      appKeyNameMap: null as any, //
       userProjectList: [] as any, // 适用项目列表
-      musicSheetCategoryOptions: {} as any,//项目曲目分类选择
-
-      musicSheetCanBeUsedProjectKey: [] as any, //  曲目可以使用在哪些项目，通过声部配置过滤
+      musicSheetCategoryOptions: {} as any, //项目曲目分类选择
 
+      musicSheetCanBeUsedProjectKey: [] as any //  曲目可以使用在哪些项目，通过声部配置过滤
     })
 
     const btnLoading = ref(false)
@@ -125,7 +147,7 @@ export default defineComponent({
       state.loading = true
 
       // 加载已经配置的APP
-      const {data} = await musicSheetDetail({id: props.id})
+      const { data } = await musicSheetDetail({ id: props.id })
       state.musicSheetData = data
       if (data && data.musicSheetExtend) {
         forms.useApplicationIds = data.musicSheetExtend.useApplicationIds?.split(',') || []
@@ -143,15 +165,15 @@ export default defineComponent({
       // }
 
       // 加载所有的APP
-      const keys = Object.keys(appKey);
+      const keys = Object.keys(appKey)
       // state.userProjectList = props.useProject.filter((next: any) => {
       //   const indexOf = keys.indexOf(next.appKey);
       //   return indexOf > -1;
       // })
 
       props.useProject.forEach((next: any) => {
-        const indexOf = keys.indexOf(next.appKey);
-        let disabled = false;
+        const indexOf = keys.indexOf(next.appKey)
+        let disabled = false
         if (indexOf > -1) {
           // disabled = !state.musicSheetCanBeUsedProjectKey.includes(next.appKey);
           state.userProjectList.push({
@@ -161,7 +183,7 @@ export default defineComponent({
         }
       })
 
-      state.appKeyNameMap = new Map<string, string>
+      state.appKeyNameMap = new Map<String, String>()
       state.userProjectList.forEach((next: any) => {
         if (forms.useApplicationIds.includes(next.id)) {
           state.selectAppKey.push(next.appKey)
@@ -174,24 +196,28 @@ export default defineComponent({
 
       // 加载不同项目的曲目分类列表
       const projectIdArr = [] as any
-      const appIdCodeMap = new Map<number, string>;
+      const appIdCodeMap = new Map<number, string>()
       props.useProject.forEach((project: any) => {
         projectIdArr.push(project.id)
         appIdCodeMap.set(project.id, project.appKey)
       })
       if (projectIdArr.length > 0) {
-        const {data} = await musicSheetApplicationExtendCategoryList({applicationIds: projectIdArr.join(',')})
+        const { data } = await musicSheetApplicationExtendCategoryList({
+          applicationIds: projectIdArr.join(',')
+        })
         data.forEach((next: any) => {
-          const appCode = appIdCodeMap.get(next.applicationId);
+          const appCode = appIdCodeMap.get(next.applicationId)
           if (appCode) {
             state.musicSheetCategoryOptions[appCode] = next.musicSheetCategories
           }
         })
       }
       {
-        const {data} = await musicSheetApplicationExtendCategoryApplicationExtendInfo({musicSheetId: props.id}) as any
+        const { data } = (await musicSheetApplicationExtendCategoryApplicationExtendInfo({
+          musicSheetId: props.id
+        })) as any
         data.forEach((next: any) => {
-          const key = next.appKey;
+          const key = next.appKey
           if (key === 'GYM') {
             forms.useProjectParamConfig[key]['musicSheetCategoryId'] = next.musicSheetCategories
             forms.useProjectParamConfig[key]['sortNo'] = next.sortNo
@@ -215,18 +241,16 @@ export default defineComponent({
         })
       }
 
-
       state.loading = false
     })
 
-
     const formsRef = ref()
 
     const onSubmit = async () => {
       formsRef.value.validate(async (error: any) => {
         if (error) {
           if (Array.isArray(error) && error.length > 0) {
-            const app = error[0][0].field?.split('.')[1];
+            const app = error[0][0].field?.split('.')[1]
             if (app && state.selectAppKey.includes(app)) {
               state.tabName = app
             }
@@ -235,24 +259,23 @@ export default defineComponent({
         }
         btnLoading.value = true
         try {
-          const appKeyIdMap = new Map<string, string>;
+          const appKeyIdMap = new Map<string, string>()
           props.useProject.forEach((project: any) => {
             appKeyIdMap.set(project.appKey, project.id)
           })
           // 获取选择的应用项目
           const applicationExtends = [] as any
           state.selectAppKey.forEach((appKey: any) => {
-            Object.keys(forms.useProjectParamConfig).forEach(key => {
+            Object.keys(forms.useProjectParamConfig).forEach((key) => {
               if (appKey === key) {
-                const value = forms.useProjectParamConfig[key];
+                const value = forms.useProjectParamConfig[key]
                 if (!value['sortNo']) {
                   value['sortNo'] = 0
                 }
                 //除了排序号，其他字段都不为空时才保存数据
                 const every = Object.values(value).every((val: any) => {
-                  return !(val === null || val === undefined || val === '');
-
-                });
+                  return !(val === null || val === undefined || val === '')
+                })
                 if (every) {
                   applicationExtends.push({
                     ...value,
@@ -265,9 +288,9 @@ export default defineComponent({
           })
 
           const params = {
-            'musicSheetId': props.id,
-            'useApplicationIds': forms.useApplicationIds.join(','),
-            'applicationExtends': applicationExtends
+            musicSheetId: props.id,
+            useApplicationIds: forms.useApplicationIds.join(','),
+            applicationExtends: applicationExtends
           }
           await musicSheetApplicationExtendSave(params)
           message.success('修改成功')
@@ -280,369 +303,352 @@ export default defineComponent({
       })
     }
 
-
     return () => (
-        <div>
-          <NForm
-              class={styles.formContainer}
-              model={forms}
-              ref={formsRef}
-              label-placement="left"
-              label-width="85"
+      <div>
+        <NForm
+          class={styles.formContainer}
+          model={forms}
+          ref={formsRef}
+          label-placement="left"
+          label-width="85"
+        >
+          {/*<NText style={'color:red'}>*/}
+          {/*  注：应用无曲目声部时，适用应用不可选择*/}
+          {/*</NText>*/}
+          <NFormItem
+            label="适用应用"
+            path="useApplicationIds"
+            rule={[
+              {
+                required: true,
+                message: '请选择适用应用'
+              }
+            ]}
           >
-            {/*<NText style={'color:red'}>*/}
-            {/*  注：应用无曲目声部时，适用应用不可选择*/}
-            {/*</NText>*/}
-            <NFormItem
-                label="适用应用"
-                path="useApplicationIds"
-                rule={[
-                  {
-                    required: true,
-                    message: '请选择适用应用'
+            <NCheckboxGroup
+              v-model:value={forms.useApplicationIds}
+              onUpdateValue={(value) => {
+                state.selectAppKey = []
+                state.userProjectList.forEach((next: any) => {
+                  if (value.includes(next.id)) {
+                    state.selectAppKey.push(next.appKey)
                   }
-                ]}
-            >
-              <NCheckboxGroup
-                  v-model:value={forms.useApplicationIds}
-                  onUpdateValue={(value) => {
-                    state.selectAppKey = []
-                    state.userProjectList.forEach((next: any) => {
-                      if (value.includes(next.id)) {
-                        state.selectAppKey.push(next.appKey)
-                      }
-                    })
+                })
 
-                    // 反勾选时，更新选中的tab
-                    if (state.selectAppKey.length == 0) {
-                      state.tabName = '';
-                    } else {
-                      state.tabName = state.selectAppKey[0]
-                    }
-                  }}
-              >
-                {state.userProjectList.map((item: any) => (
-                    <NCheckbox value={item.value}>{item.label}</NCheckbox>
-                    // <NCheckbox value={item.value} disabled={item.disabled}>{item.label}</NCheckbox>
-                ))
+                // 反勾选时，更新选中的tab
+                if (state.selectAppKey.length == 0) {
+                  state.tabName = ''
+                } else {
+                  state.tabName = state.selectAppKey[0]
                 }
-              </NCheckboxGroup>
-            </NFormItem>
-            {state.selectAppKey.length > 0 && (
-                <NTabs
-                    type="line"
-                    v-model:value={state.tabName}
-
-                    onUpdate:value={(val: any) => {
-                      state.tabName = val
-                    }}
-                >
-                  {state.selectAppKey.map((item: any, index: number) => {
-                    return <NTabPane
-                        tab={state.appKeyNameMap.get(item)}
-                        name={item}
-                        displayDirective={"show"}
-                    >
-                      {item === 'GYM' &&
-                          <div>
-                              <NFormItem
-                                  label="曲目分类"
-                                  path="useProjectParamConfig.GYM.musicSheetCategoryId"
-                                  rule={[
-                                    {
-                                      required: gymFileRequire.value,
-                                      message: '请选择曲目分类',
-                                    }
-                                  ]}
-                              >
-                                  <NCascader
-                                      valueField="id"
-                                      labelField="name"
-                                      children-field="children"
-                                      placeholder="请选择分类"
-                                      v-model:value={forms.useProjectParamConfig.GYM.musicSheetCategoryId}
-                                      options={state.musicSheetCategoryOptions.GYM}
-                                      onChange={() => {
 
-                                      }}
-                                      clearable
-                                  />
-                              </NFormItem>
-                              <NFormItem
-                                  label="是否收费"
-                                  path="useProjectParamConfig.GYM.paymentType"
-                                  rule={[
-                                    {
-                                      required: gymFileRequire.value,
-                                      message: '请选择收费类型',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择收费类型"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.GYM.paymentType}
-                                      options={getSelectDataFromObj(musicSheetPaymentType)}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="排序值"
-                                  path="useProjectParamConfig.GYM.sortNo"
-                              >
-                                  <NInputNumber
-                                      v-model:value={forms.useProjectParamConfig.GYM.sortNo}
-                                      placeholder="请输入排序值"
-                                      clearable
-                                      min={0}
-                                      max={9999}
-                                      style={{width: '100%'}}
-                                  />
-                              </NFormItem>
-                          </div>
-                      }
-                      {item === 'GYT' &&
-                          <div>
-                              <NFormItem
-                                  label="分类"
-                                  path="useProjectParamConfig.GYT.musicSheetCategoryId"
-                                  rule={[
-                                    {
-                                      required: gytFileRequire.value,
-                                      message: '请选择分类',
-                                    }
-                                  ]}
-                              >
-                                  <NCascader
-                                      valueField="id"
-                                      labelField="name"
-                                      children-field="children"
-                                      placeholder="请选择分类"
-                                      v-model:value={forms.useProjectParamConfig.GYT.musicSheetCategoryId}
-                                      options={state.musicSheetCategoryOptions.GYT}
-                                      clearable
-                                  />
-                              </NFormItem>
-                              <NFormItem
-                                  label="排序值"
-                                  path="useProjectParamConfig.GYT.sortNo"
-                              >
-                                  <NInputNumber
-                                      v-model:value={forms.useProjectParamConfig.GYT.sortNo}
-                                      placeholder="请输入排序值"
-                                      clearable
-                                      min={0}
-                                      max={9999}
-                                      style={{width: '100%'}}
-                                  />
-                              </NFormItem>
-                          </div>
-                      }
-                      {item === 'KLX' &&
-                          <div>
-                              <NFormItem
-                                  label="可用途径"
-                                  path="useProjectParamConfig.KLX.availableType"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请选择可用途径',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择可用途径"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.KLX.availableType}
-                                      options={getSelectDataFromObj(musicSheetAvailableType)}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="曲目标签"
-                                  path="useProjectParamConfig.KLX.musicSheetCategoryId"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请选择曲目标签',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择曲目标签"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.KLX.musicSheetCategoryId}
-                                      options={[]}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="是否收费"
-                                  path="useProjectParamConfig.KLX.paymentType"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请选择是否收费',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择是否收费"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.KLX.paymentType}
-                                      options={[
-                                        {
-                                          label: '是',
-                                          value: 1
-                                        },
-                                        {
-                                          label: '否',
-                                          value: 0
-                                        }
-                                      ]}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="曲目价格"
-                                  path="useProjectParamConfig.KLX.musicPrice"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请输入曲目价格',
-                                    }
-                                  ]}
-                              >
-                                  <NInputNumber style={"width:100%"}
-                                                placeholder="请输入曲目价格"
-                                                v-model:value={forms.useProjectParamConfig.KLX.musicPrice}
-                                  />
-                              </NFormItem>
-                              <NFormItem
-                                  label="是否置顶"
-                                  path="useProjectParamConfig.KLX.topFlag"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请选择是否置顶',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择是否置顶"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.KLX.topFlag}
-                                      options={[
-                                        {
-                                          label: '是',
-                                          value: 1
-                                        },
-                                        {
-                                          label: '否',
-                                          value: 0
-                                        }
-                                      ]}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="精品乐谱"
-                                  path="useProjectParamConfig.KLX.exquisiteFlag"
-                                  rule={[
-                                    {
-                                      required: klxFileRequire.value,
-                                      message: '请选择是否精品乐谱',
-                                    }
-                                  ]}
-                              >
-                                  <NSelect
-                                      placeholder="请选择是否精品乐谱"
-                                      clearable
-                                      v-model:value={forms.useProjectParamConfig.KLX.exquisiteFlag}
-                                      options={[
-                                        {
-                                          label: '是',
-                                          value: 1
-                                        },
-                                        {
-                                          label: '否',
-                                          value: 0
-                                        }
-                                      ]}
-                                  >
-                                  </NSelect>
-                              </NFormItem>
-                              <NFormItem
-                                  label="排序值"
-                                  path="useProjectParamConfig.KLX.sortNo"
-                              >
-                                  <NInputNumber
-                                      v-model:value={forms.useProjectParamConfig.KLX.sortNo}
-                                      placeholder="请输入排序值"
-                                      clearable
-                                      min={0}
-                                      max={9999}
-                                      style={{width: '100%'}}
-                                  />
-                              </NFormItem>
-                          </div>
-                      }
-                      {item === 'KT' &&
-                          <div>
-                              <NFormItem
-                                  label="乐谱教材"
-                                  path="useProjectParamConfig.KT.musicSheetCategoryId"
-                                  rule={[
-                                    {
-                                      required: ktFileRequire.value,
-                                      message: '请选择乐谱教材'
-                                    }
-                                  ]}
-                              >
-                                  <NCascader
-                                      valueField="id"
-                                      labelField="name"
-                                      children-field="children"
-                                      placeholder="请选择乐谱教材"
-                                      v-model:value={forms.useProjectParamConfig.KT.musicSheetCategoryId}
-                                      options={state.musicSheetCategoryOptions.KT}
-                                      clearable
-                                  />
-                              </NFormItem>
-                              <NFormItem
-                                  label="排序值"
-                                  path="useProjectParamConfig.KT.sortNo"
-                              >
-                                  <NInputNumber
-                                      v-model:value={forms.useProjectParamConfig.KT.sortNo}
-                                      placeholder="请输入排序值"
-                                      clearable
-                                      min={0}
-                                      max={9999}
-                                      style={{width: '100%'}}
-                                  />
-                              </NFormItem>
-                          </div>
-                      }
-                    </NTabPane>
-                  })}
-                </NTabs>
-            )}
-          </NForm>
-          <NSpace justify="end" style={'margin-top: 10px'}>
-            <NButton type="default" onClick={() => emit('close')}>
-              取消
-            </NButton>
-            <NButton
-                type="primary"
-                onClick={() => onSubmit()}
-                loading={btnLoading.value}
-                disabled={btnLoading.value}
+                nextTick(() => tabsRef.value?.syncBarPosition())
+              }}
             >
-              确认
-            </NButton>
-          </NSpace>
-        </div>
+              {state.userProjectList.map((item: any) => (
+                <NCheckbox value={item.value}>{item.label}</NCheckbox>
+                // <NCheckbox value={item.value} disabled={item.disabled}>{item.label}</NCheckbox>
+              ))}
+            </NCheckboxGroup>
+          </NFormItem>
+          {state.selectAppKey.length > 0 && (
+            <NTabs
+              ref={tabsRef}
+              type="line"
+              v-model:value={state.tabName}
+              onUpdate:value={(val: any) => {
+                state.tabName = val
+              }}
+            >
+              {state.selectAppKey.map((item: any, index: number) => {
+                return (
+                  <NTabPane
+                    tab={state.appKeyNameMap.get(item)}
+                    name={item}
+                    displayDirective={'show'}
+                  >
+                    {item === 'GYM' && (
+                      <div>
+                        <NFormItem
+                          label="曲目分类"
+                          path="useProjectParamConfig.GYM.musicSheetCategoryId"
+                          rule={[
+                            {
+                              required: gymFileRequire.value,
+                              message: '请选择曲目分类'
+                            }
+                          ]}
+                        >
+                          <NCascader
+                            valueField="id"
+                            labelField="name"
+                            children-field="children"
+                            placeholder="请选择分类"
+                            v-model:value={forms.useProjectParamConfig.GYM.musicSheetCategoryId}
+                            options={state.musicSheetCategoryOptions.GYM}
+                            onChange={() => {}}
+                            clearable
+                          />
+                        </NFormItem>
+                        <NFormItem
+                          label="是否收费"
+                          path="useProjectParamConfig.GYM.paymentType"
+                          rule={[
+                            {
+                              required: gymFileRequire.value,
+                              message: '请选择收费类型'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择收费类型"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.GYM.paymentType}
+                            options={getSelectDataFromObj(musicSheetPaymentType)}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem label="排序值" path="useProjectParamConfig.GYM.sortNo">
+                          <NInputNumber
+                            v-model:value={forms.useProjectParamConfig.GYM.sortNo}
+                            placeholder="请输入排序值"
+                            clearable
+                            min={0}
+                            max={9999}
+                            style={{ width: '100%' }}
+                          />
+                        </NFormItem>
+                      </div>
+                    )}
+                    {item === 'GYT' && (
+                      <div>
+                        <NFormItem
+                          label="分类"
+                          path="useProjectParamConfig.GYT.musicSheetCategoryId"
+                          rule={[
+                            {
+                              required: gytFileRequire.value,
+                              message: '请选择分类'
+                            }
+                          ]}
+                        >
+                          <NCascader
+                            valueField="id"
+                            labelField="name"
+                            children-field="children"
+                            placeholder="请选择分类"
+                            v-model:value={forms.useProjectParamConfig.GYT.musicSheetCategoryId}
+                            options={state.musicSheetCategoryOptions.GYT}
+                            clearable
+                          />
+                        </NFormItem>
+                        <NFormItem label="排序值" path="useProjectParamConfig.GYT.sortNo">
+                          <NInputNumber
+                            v-model:value={forms.useProjectParamConfig.GYT.sortNo}
+                            placeholder="请输入排序值"
+                            clearable
+                            min={0}
+                            max={9999}
+                            style={{ width: '100%' }}
+                          />
+                        </NFormItem>
+                      </div>
+                    )}
+                    {item === 'KLX' && (
+                      <div>
+                        <NFormItem
+                          label="可用途径"
+                          path="useProjectParamConfig.KLX.availableType"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请选择可用途径'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择可用途径"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.KLX.availableType}
+                            options={getSelectDataFromObj(musicSheetAvailableType)}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem
+                          label="曲目标签"
+                          path="useProjectParamConfig.KLX.musicSheetCategoryId"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请选择曲目标签'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择曲目标签"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.KLX.musicSheetCategoryId}
+                            options={[]}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem
+                          label="是否收费"
+                          path="useProjectParamConfig.KLX.paymentType"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请选择是否收费'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择是否收费"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.KLX.paymentType}
+                            options={[
+                              {
+                                label: '是',
+                                value: 1
+                              },
+                              {
+                                label: '否',
+                                value: 0
+                              }
+                            ]}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem
+                          label="曲目价格"
+                          path="useProjectParamConfig.KLX.musicPrice"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请输入曲目价格'
+                            }
+                          ]}
+                        >
+                          <NInputNumber
+                            style={'width:100%'}
+                            placeholder="请输入曲目价格"
+                            v-model:value={forms.useProjectParamConfig.KLX.musicPrice}
+                          />
+                        </NFormItem>
+                        <NFormItem
+                          label="是否置顶"
+                          path="useProjectParamConfig.KLX.topFlag"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请选择是否置顶'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择是否置顶"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.KLX.topFlag}
+                            options={[
+                              {
+                                label: '是',
+                                value: 1
+                              },
+                              {
+                                label: '否',
+                                value: 0
+                              }
+                            ]}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem
+                          label="精品乐谱"
+                          path="useProjectParamConfig.KLX.exquisiteFlag"
+                          rule={[
+                            {
+                              required: klxFileRequire.value,
+                              message: '请选择是否精品乐谱'
+                            }
+                          ]}
+                        >
+                          <NSelect
+                            placeholder="请选择是否精品乐谱"
+                            clearable
+                            v-model:value={forms.useProjectParamConfig.KLX.exquisiteFlag}
+                            options={[
+                              {
+                                label: '是',
+                                value: 1
+                              },
+                              {
+                                label: '否',
+                                value: 0
+                              }
+                            ]}
+                          ></NSelect>
+                        </NFormItem>
+                        <NFormItem label="排序值" path="useProjectParamConfig.KLX.sortNo">
+                          <NInputNumber
+                            v-model:value={forms.useProjectParamConfig.KLX.sortNo}
+                            placeholder="请输入排序值"
+                            clearable
+                            min={0}
+                            max={9999}
+                            style={{ width: '100%' }}
+                          />
+                        </NFormItem>
+                      </div>
+                    )}
+                    {item === 'KT' && (
+                      <div>
+                        <NFormItem
+                          label="乐谱教材"
+                          path="useProjectParamConfig.KT.musicSheetCategoryId"
+                          rule={[
+                            {
+                              required: ktFileRequire.value,
+                              message: '请选择乐谱教材'
+                            }
+                          ]}
+                        >
+                          <NCascader
+                            valueField="id"
+                            labelField="name"
+                            children-field="children"
+                            placeholder="请选择乐谱教材"
+                            v-model:value={forms.useProjectParamConfig.KT.musicSheetCategoryId}
+                            options={state.musicSheetCategoryOptions.KT}
+                            clearable
+                          />
+                        </NFormItem>
+                        <NFormItem label="排序值" path="useProjectParamConfig.KT.sortNo">
+                          <NInputNumber
+                            v-model:value={forms.useProjectParamConfig.KT.sortNo}
+                            placeholder="请输入排序值"
+                            clearable
+                            min={0}
+                            max={9999}
+                            style={{ width: '100%' }}
+                          />
+                        </NFormItem>
+                      </div>
+                    )}
+                  </NTabPane>
+                )
+              })}
+            </NTabs>
+          )}
+        </NForm>
+        <NSpace justify="end" style={'margin-top: 10px'}>
+          <NButton type="default" onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            type="primary"
+            onClick={() => onSubmit()}
+            loading={btnLoading.value}
+            disabled={btnLoading.value}
+          >
+            确认
+          </NButton>
+        </NSpace>
+      </div>
     )
   }
 })

src/views/music-library/project-music-sheet/index.tsx

@@ -1,13 +1,13 @@
-import {NTabPane, NTabs} from 'naive-ui'
-import {defineComponent, h, onMounted, reactive} from 'vue'
-import {useRoute} from 'vue-router'
-import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
-import {appKey} from "@/utils/constant";
-import {sysApplicationPage} from "@views/menu-manage/api";
-import MusicSheetKt from "@views/music-library/project-music-sheet/module/kt/music-sheet-kt";
-import MusicSheetGym from "@views/music-library/project-music-sheet/module/gym/music-sheet-gym";
-import MusicSheetGyt from "@views/music-library/project-music-sheet/module/gyt/music-sheet-gyt";
-import MusicSheetKlx from "@views/music-library/project-music-sheet/module/klx/music-sheet-klx";
+import { NTabPane, NTabs } from 'naive-ui'
+import { defineComponent, h, nextTick, onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
+import { appKey } from '@/utils/constant'
+import { sysApplicationPage } from '@views/menu-manage/api'
+import MusicSheetKt from '@views/music-library/project-music-sheet/module/kt/music-sheet-kt'
+import MusicSheetGym from '@views/music-library/project-music-sheet/module/gym/music-sheet-gym'
+import MusicSheetGyt from '@views/music-library/project-music-sheet/module/gyt/music-sheet-gyt'
+import MusicSheetKlx from '@views/music-library/project-music-sheet/module/klx/music-sheet-klx'
 
 export default defineComponent({
   name: 'project-music-sheet',
@@ -15,12 +15,13 @@ export default defineComponent({
     const state = reactive({
       tabName: 'KT' as 'KT' | 'GYT' | 'KLX' | 'GYM',
       appKeyList: [] as any,
-      appNameList: [] as any,
+      appNameList: [] as any
     })
+    const tabsInstRef = ref()
     getTabsCache((val: any) => {
-      console.log(val)
       if (val.form.tabName) {
         state.tabName = val.form.tabName
+        nextTick(() => tabsInstRef.value?.syncBarPosition())
       }
     })
     const route = useRoute()
@@ -28,60 +29,42 @@ export default defineComponent({
       setTabsCaches(val, 'tabName', route)
     }
 
-
     onMounted(async () => {
       // 获取应用APP信息
-      {
-        const appKeys = Object.keys(appKey);
-        const {data} = await sysApplicationPage({page: 1, rows: 99, parentId: 0})
-        const tempList = data.rows || []
-        tempList.forEach((next: any) => {
-          if (appKeys.includes(next.appKey)) {
-            state.appKeyList.push(next.appKey)
-            state.appNameList.push(next.appName)
-          }
-        })
-      }
+      const appKeys = Object.keys(appKey)
+      const { data } = await sysApplicationPage({ page: 1, rows: 99, parentId: 0 })
+      const tempList = data.rows || []
+      tempList.forEach((next: any) => {
+        if (appKeys.includes(next.appKey)) {
+          state.appKeyList.push(next.appKey)
+          state.appNameList.push(next.appName)
+        }
+      })
+      nextTick(() => tabsInstRef.value?.syncBarPosition())
     })
 
-
     return () => {
       return (
-          <div class="system-menu-container">
-            <div class={['section-container']} style="padding-top: 0">
-              <NTabs
-                  type="line"
-                  size="large"
-                  v-model:value={state.tabName}
-                  onUpdate:value={(val: any) => setTabs(val)}
-              >
-                {state.appKeyList.map((app: any, index: number) => {
-                  return h(
-                      NTabPane,
-                      {
-                        name: app,
-                        tab: state.appNameList[index]
-                      },
-                      {
-                        default: () => {
-                          if (app == 'KT') {
-                            return h(MusicSheetKt, {'appKey': app})
-                          } else if (app == 'GYM') {
-                            return h(MusicSheetGym, {'appKey': app})
-                          } else if (app == 'KLX') {
-                            return h(MusicSheetKlx, {'appKey': app})
-                          } else if (app == 'GYT') {
-                            return h(MusicSheetGyt, {'appKey': app})
-                          } else {
-                            return h(MusicSheetKt)
-                          }
-                        }
-                      }
-                  )
-                })}
-              </NTabs>
-            </div>
+        <div class="system-menu-container">
+          <div class={['section-container']} style="padding-top: 0">
+            <NTabs
+              ref={tabsInstRef}
+              type="line"
+              size="large"
+              v-model:value={state.tabName}
+              onUpdate:value={(val: any) => setTabs(val)}
+            >
+              {state.appKeyList.map((app: any, index: number) => (
+                <NTabPane name={app} tab={state.appNameList[index]}>
+                  {app === 'KT' && <MusicSheetKt appKey={app} />}
+                  {app === 'GYM' && <MusicSheetGym appKey={app} />}
+                  {app === 'KLX' && <MusicSheetKlx appKey={app} />}
+                  {app === 'GYT' && <MusicSheetGyt appKey={app} />}
+                </NTabPane>
+              ))}
+            </NTabs>
           </div>
+        </div>
       )
     }
   }

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

@@ -1,12 +1,30 @@
-import {defineComponent, h, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
-import {DataTableColumns, DataTableRowKey, NButton, NCascader, NDataTable, NFormItem, NIcon, NImage, NInput, NInputNumber, NSelect, NSpace, NStep, NSteps, useDialog, useMessage} from "naive-ui";
-import Pagination from "@components/pagination";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {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";
+import { defineComponent, h, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
+import {
+  DataTableColumns,
+  DataTableRowKey,
+  NButton,
+  NCascader,
+  NDataTable,
+  NFormItem,
+  NIcon,
+  NImage,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NStep,
+  NSteps,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import Pagination from '@components/pagination'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { 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'
+import TheTooltip from '@/components/TheTooltip'
 
 export default defineComponent({
   name: 'gym-addMusic',
@@ -25,7 +43,7 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
-  setup(props, {slots, attrs, emit}) {
+  setup(props, { slots, attrs, emit }) {
     const dialogs = useDialog()
     const message = useMessage()
     const state = reactive({
@@ -44,18 +62,17 @@ export default defineComponent({
         keyword: null,
         musicSheetType: null,
         subjectId: null,
-        sourceType: null,
+        sourceType: null
       },
       subjectList: [] as any,
       showAdd: false,
       currentStep: 1,
       dataList: [],
-      selectRowData: [] as any,// 选择的数据列表
+      selectRowData: [] as any, // 选择的数据列表
       musicSheetCategories: [] as any,
-      startSortNum: null as any,// 排序起始值
-      projectMusicCategoryId: null as any,// 曲目分类ID
-      globalPaymentType: null as any, //收费方式
-
+      startSortNum: null as any, // 排序起始值
+      projectMusicCategoryId: null as any, // 曲目分类ID
+      globalPaymentType: null as any //收费方式
     })
 
     onMounted(() => {
@@ -67,15 +84,14 @@ export default defineComponent({
     const getList = async () => {
       try {
         state.loading = true
-        const {data} = await musicSheetPage({
+        const { data } = await musicSheetPage({
           ...state.pagination,
           ...state.searchForm,
           addAppId: props.appId
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -95,19 +111,19 @@ export default defineComponent({
 
     const onSave = async () => {
       if (state.selectRowData.length == 0) {
-        message.error('未选择曲目');
-        return;
+        message.error('未选择曲目')
+        return
       }
-      const params = [] as any[];
+      const params = [] as any[]
       for (let i = 0; i < state.selectRowData.length; i++) {
-        const item = state.selectRowData[i];
+        const item = state.selectRowData[i]
         if (!item.projectMusicCategoryId) {
           message.error('曲目分类不能为空')
-          return;
+          return
         }
         if (!item.sortNo || !item.projectMusicCategoryId) {
           message.error('排序号不能为空')
-          return;
+          return
         }
         params.push({
           ...item,
@@ -117,14 +133,12 @@ export default defineComponent({
           id: null
         })
       }
-      const res = await musicSheetApplicationExtendSaveBatch(params) as any
+      const res = (await musicSheetApplicationExtendSaveBatch(params)) as any
       if (res && res.code == '200') {
         message.success(`添加成功`)
         emit('getList')
         emit('close')
       }
-
-
     }
 
     const columnsField = [
@@ -133,39 +147,43 @@ export default defineComponent({
       },
       {
         title: '曲目编号',
-        key: 'id',
+        key: 'id'
       },
       {
         title: '封面图',
         key: 'titleImg',
         render(row: any) {
-          return <NImage width={40} height={40} src={row.musicCover}/>
+          return <NImage width={40} height={40} src={row.musicCover} />
         }
       },
       {
         title: '声部',
-        key: 'subjectNames',
+        key: 'subjectNames'
       },
       {
         title: '曲目名称',
-        key: 'name',
+        key: 'name'
       },
       {
         title: '音乐人',
-        key: 'composer',
+        key: 'composer'
       },
       {
         title: '曲目类型',
         key: 'musicSheetType',
         render: (row: any) => {
-          return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+          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)));
+          return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
         }
       },
       {
@@ -173,9 +191,9 @@ export default defineComponent({
         key: 'userName',
         width: 200,
         render: (row: any) => {
-          return <div>{getOwnerName(row.musicSheetExtend, row.sourceType)}</div>
+          return <TheTooltip content={getOwnerName(row.musicSheetExtend, row.sourceType)} />
         }
-      },
+      }
     ]
 
     const columns = (): any => {
@@ -183,206 +201,212 @@ export default defineComponent({
     }
 
     const stepColumns = (): DataTableColumns => {
-      const field = deepClone(columnsField);
+      const field = deepClone(columnsField)
       field.splice(0, 1)
       field.push({
         title(column: any) {
           return (
-              <NSpace>
-                曲目分类
-                <NButton type="primary"
-                         size="small"
-                         text
-                         onClick={() => {
-                           dialogs.create({
-                             title: "请选择曲目分类",
-                             showIcon: false,
-                             content: () => {
-                               return h(
-                                   "div",
-                                   {
-                                     class: "flex flex-col justify-center items-center text-14px",
-                                   },
-                                   [
-                                     // icon
-                                     h(NCascader, {
-                                       onUpdateValue(v) {
-                                         state.projectMusicCategoryId = v
-                                       },
-                                       valueField: 'id',
-                                       labelField: "name",
-                                       childrenField: 'children',
-                                       placeholderField: '请选择曲目分类',
-                                       options: state.musicSheetCategories
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               for (let i = 0; i < state.selectRowData.length; i++) {
-                                 const item = state.selectRowData[i];
-                                 item.projectMusicCategoryId = state.projectMusicCategoryId
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              曲目分类
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请选择曲目分类',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NCascader, {
+                            onUpdateValue(v) {
+                              state.projectMusicCategoryId = v
+                            },
+                            valueField: 'id',
+                            labelField: 'name',
+                            childrenField: 'children',
+                            placeholderField: '请选择曲目分类',
+                            options: state.musicSheetCategories
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      for (let i = 0; i < state.selectRowData.length; i++) {
+                        const item = state.selectRowData[i]
+                        item.projectMusicCategoryId = state.projectMusicCategoryId
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'projectMusicCategoryId',
         width: 200,
         render: (row: any) => {
           // })
           return (
-              <NCascader
-                  valueField="id"
-                  labelField="name"
-                  children-field="children"
-                  placeholder="请选择曲目分类"
-                  value={row.projectMusicCategoryId}
-                  options={state.musicSheetCategories}
-                  onUpdateValue={(value: any) => {
-                    row.projectMusicCategoryId = value
-                  }}
-                  clearable
-              />
+            <NCascader
+              valueField="id"
+              labelField="name"
+              children-field="children"
+              placeholder="请选择曲目分类"
+              value={row.projectMusicCategoryId}
+              options={state.musicSheetCategories}
+              onUpdateValue={(value: any) => {
+                row.projectMusicCategoryId = 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",
-                                   },
-                                   [
-                                     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>
+            <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',
         width: 200,
         render: (row: any) => {
           return (
-              <NSelect
-                  placeholder="请选择收费方式"
-                  value={row.paymentType}
-                  options={getSelectDataFromObj(musicSheetPaymentType)}
-                  clearable
-                  onUpdateValue={(value) => {
-                    row['paymentType'] = value
-                  }}
-              />
+            <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.startSortNum = v
-                                       },
-                                       min: 0,
-                                       max: 9999,
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               if (state.startSortNum) {
-                                 for (let i = 0; i < state.selectRowData.length; i++) {
-                                   const item = state.selectRowData[i];
-                                   item.sortNo = state.startSortNum + i
-                                 }
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              排序
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请输入排序起始值',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NInputNumber, {
+                            onUpdateValue(v) {
+                              state.startSortNum = v
+                            },
+                            min: 0,
+                            max: 9999
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      if (state.startSortNum) {
+                        for (let i = 0; i < state.selectRowData.length; i++) {
+                          const item = state.selectRowData[i]
+                          item.sortNo = state.startSortNum + i
+                        }
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'sortNo',
         width: 150,
@@ -403,49 +427,48 @@ export default defineComponent({
         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 {
+            <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)
                         }
-                      })
-                    }}
-                >
-                  移除
-                </NButton>
-              </NSpace>
+                      } catch {}
+                    }
+                  })
+                }}
+              >
+                移除
+              </NButton>
+            </NSpace>
           )
         }
       })
-      return field;
+      return field
     }
 
     const checkedRowKeysRef = ref<DataTableRowKey[]>([])
@@ -456,7 +479,7 @@ export default defineComponent({
         if (checkedRowKeysRef.value.includes(next.id)) {
           const find = state.selectRowData.find((row: any) => {
             return row.id === next.id
-          });
+          })
           if (!find) {
             state.selectRowData.push(next)
           }
@@ -471,143 +494,139 @@ export default defineComponent({
 
     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"}
+        <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)}
               >
-                <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={1800}
-                  ></NDataTable>
-                </div>
-            )}
-            <NSpace justify="end" style={"margin-top:10px"}>
-              <NButton type="default" onClick={() => {
+                <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={1800}
+              ></NDataTable>
+            </div>
+          )}
+          <NSpace justify="end" style={'margin-top:10px'}>
+            <NButton
+              type="default"
+              onClick={() => {
                 if (state.currentStep > 1) {
-                  state.currentStep = 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>
+              }}
+            >
+              {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>
       )
     }
   }
-})
+})

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

@@ -1,5 +1,5 @@
-import {defineComponent, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
 import {
   DataTableRowKey,
   NButton,
@@ -17,18 +17,28 @@ import {
   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 {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {musicSheetAudioType, musicSheetPaymentType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {musicSheetApplicationExtendCategoryList, musicSheetApplicationOwnerList, musicSheetPageByApplication, musicSheetStatusList} from "@views/music-library/api";
-import UpdateMusic from "@views/music-library/project-music-sheet/module/gym/updateMusic";
-import {subjectPage, sysApplicationPage} from "@views/system-manage/api";
-import {filterTimes} from "@/utils/dateUtil";
-import deepClone from "@/utils/deep.clone";
-import {getOwnerName} from "@views/music-library/musicUtil";
+} 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 { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import {
+  musicSheetAudioType,
+  musicSheetPaymentType,
+  musicSheetSourceType,
+  musicSheetType
+} from '@/utils/constant'
+import {
+  musicSheetApplicationExtendCategoryList,
+  musicSheetApplicationOwnerList,
+  musicSheetPageByApplication,
+  musicSheetStatusList
+} from '@views/music-library/api'
+import UpdateMusic from '@views/music-library/project-music-sheet/module/gym/updateMusic'
+import { subjectPage, sysApplicationPage } from '@views/system-manage/api'
+import { filterTimes } from '@/utils/dateUtil'
+import deepClone from '@/utils/deep.clone'
+import { getOwnerName } from '@views/music-library/musicUtil'
 
 export default defineComponent({
   name: 'project-music-sheet-mec',
@@ -67,7 +77,7 @@ export default defineComponent({
         topFlag: null, //是否置顶(0:否;1:是)
         availableType: null, //可用途径 ORG 机构 PLATFORM 平台
         appAuditFlag: null, //是否审核版本
-        detailFlag: null, //是否查询详情
+        detailFlag: null //是否查询详情
       },
       subjectList: [],
       dataList: [] as any[],
@@ -77,49 +87,51 @@ export default defineComponent({
       userIdDisable: true,
       userIdData: [] as any,
       updateRow: {} as any, // 修改选择的行
-      applicationId: null, //应用ID
+      applicationId: null //应用ID
     })
 
     onMounted(async () => {
       state.loading = true
       // 获取应用APP信息
-      {
-        const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: props.appKey})
+
+      try {
+        const { data } = await sysApplicationPage({ page: 1, rows: 1, appKey: props.appKey })
         const tempList = data.rows || []
         if (!tempList || tempList.length == 0) {
           state.loading = false
-          message.error("加载项目信息失败");
+          message.error('加载项目信息失败')
           return
         }
         state.appId = tempList[0].id
         state.applicationId = tempList[0].id
-      }
+      } catch {}
+
       // 加载声部
-      {
-        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 {data} = await musicSheetApplicationExtendCategoryList({applicationIds: state.appId})
-          if (data && data.length > 0) {
-            state.musicSheetCategories = data[0].musicSheetCategories
-          }
-        }
+      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 {}
 
-        // 加载表格数据
-        {
-          getList()
+      //加载曲目分类列表
+
+      try {
+        const { data } = await musicSheetApplicationExtendCategoryList({
+          applicationIds: state.appId
+        })
+        if (data && data.length > 0) {
+          state.musicSheetCategories = data[0].musicSheetCategories
         }
-      }
+      } catch {}
+
+      // 加载表格数据
+
+      getList()
     })
 
     const saveForm = ref()
@@ -145,13 +157,13 @@ export default defineComponent({
       try {
         state.loading = true
         const sourceType = state.searchForm.sourceType
-        let userId = state.searchForm.userId;
-        let organizationRoleId = null;
+        let userId = state.searchForm.userId
+        let organizationRoleId = null
         if (sourceType && sourceType === 'ORG') {
           organizationRoleId = deepClone(userId)
           userId = null
         }
-        const {data} = await musicSheetPageByApplication({
+        const { data } = await musicSheetPageByApplication({
           ...state.pagination,
           ...state.searchForm,
           userId: userId,
@@ -161,8 +173,7 @@ export default defineComponent({
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -181,17 +192,15 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
 
-
     const onBatchChangeStatus = (status: boolean) => {
-      const length = checkedRowKeysRef.value.length;
+      const length = checkedRowKeysRef.value.length
       if (length == 0) {
-        message.warning("未选择数据")
+        message.warning('未选择数据')
       }
       const statusStr = !status ? '停用' : '启用'
       dialog.warning({
@@ -207,8 +216,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -222,49 +230,59 @@ export default defineComponent({
           title: '曲目信息',
           key: 'id',
           render: (row: any) => (
-              <>
-                <NDescriptions labelPlacement="left" column={1}>
-                  <NDescriptionsItem label="曲目名称">
-                    <TheTooltip content={row.name}/>{' '}
-                  </NDescriptionsItem>
-                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
-                </NDescriptions>
-              </>
+            <>
+              <NDescriptions labelPlacement="left" column={1}>
+                <NDescriptionsItem label="曲目名称">
+                  <TheTooltip content={row.name} />{' '}
+                </NDescriptionsItem>
+                <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
+              </NDescriptions>
+            </>
           )
         },
         {
           title: '曲目来源',
           key: 'musicSheetCategoriesName',
           render: (row: any) => (
-              <>
-                <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>
-              </>
+            <>
+              <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: 'musicCover',
           render(row: any): JSX.Element {
-            return <NImage width={60} height={60} src={row.musicCover}/>
+            return <NImage width={60} height={60} src={row.musicCover} />
           }
         },
         {
           title: '曲目类型',
           key: 'musicSheetType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
+              </div>
+            )
           }
         },
         {
           title: '伴奏类型',
           key: 'audioType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}
+              </div>
+            )
           }
         },
         {
@@ -286,7 +304,11 @@ export default defineComponent({
           title: '收费方式',
           key: 'paymentType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}
+              </div>
+            )
           }
         },
         {
@@ -302,7 +324,7 @@ export default defineComponent({
           key: 'status',
           render(row: any) {
             return (
-                <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
+              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
             )
           }
         },
@@ -312,279 +334,276 @@ export default defineComponent({
           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.showEditDialog = true
-                        state.updateRow = row
-                      }}
-                  >
-                    修改
-                  </NButton>
-                </NSpace>
+              <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.showEditDialog = true
+                    state.updateRow = row
+                  }}
+                >
+                  修改
+                </NButton>
+              </NSpace>
             )
           }
         }
       ]
     }
 
-
     return () => {
       return (
-          <div class="system-menu-container">
-            <SaveForm
-                ref={saveForm}
-                model={state.searchForm}
-                onSubmit={onSubmit}
-                saveKey="music-sheet-gym"
-                onSetModel={(val: any) => (state.searchForm = val)}
-            >
-
-              <NFormItem label="关键词" path="keyword">
-                <NInput
-                    placeholder="请输入曲目名称/编号"
-                    v-model:value={state.searchForm.keyword}
-                    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') {
-                        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
-                        const temp = data.rows || []
-                        temp.forEach((next: any) => {
-                          state.userIdData.push({
-                            ...next,
-                            label: value === 'PERSON' ? next.userName : next.organizationRole,
-                            value: value === 'PERSON' ? next.userId : next.organizationRoleId
-                          })
-                        })
-                        state.userIdDisable = false
-                      } else {
-                        state.userIdDisable = true
-                      }
-                    }}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="所属人" path="userId">
-                <NSelect
-                    placeholder="请选择所属人"
-                    disabled={state.userIdDisable}
-                    v-model:value={state.searchForm.userId}
-                    options={state.userIdData}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="曲目类型" path="subjectType">
-                <NSelect
-                    placeholder="请选择曲目类型"
-                    v-model:value={state.searchForm.musicSheetType}
-                    options={getSelectDataFromObj(musicSheetType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="伴奏类型" path="audioType">
-                <NSelect
-                    placeholder="请选择伴奏类型"
-                    v-model:value={state.searchForm.audioType}
-                    options={getSelectDataFromObj(musicSheetAudioType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="可用声部" path="subjectId">
-                <NSelect
-                    placeholder="请选择可用声部"
-                    v-model:value={state.searchForm.subjectId}
-                    options={state.subjectList}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="曲目分类" path="musicCategoryId">
-                <NCascader
-                    valueField="id"
-                    labelField="name"
-                    children-field="children"
-                    placeholder="请选择曲目分类"
-                    v-model:value={state.searchForm.musicCategoryId}
-                    options={state.musicSheetCategories}
-                    clearable
-                />
-              </NFormItem>
-              {/*<NFormItem*/}
-              {/*    label="可用途径"*/}
-              {/*    path="availableType"*/}
-              {/*>*/}
-              {/*  <NSelect*/}
-              {/*      placeholder="请选择可用途径"*/}
-              {/*      v-model:value={state.searchForm.availableType}*/}
-              {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
-              {/*      clearable*/}
-              {/*  >*/}
-              {/*  </NSelect>*/}
-              {/*</NFormItem>*/}
-              <NFormItem
-                  label="收费方式"
-                  path="paymentType"
-              >
-                <NSelect
-                    placeholder="请选择收费方式"
-                    v-model:value={state.searchForm.paymentType}
-                    options={getSelectDataFromObj(musicSheetPaymentType)}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="状态" path="status">
-                <NSelect
-                    v-model:value={state.searchForm.status}
-                    placeholder="请选择状态"
-                    options={
-                      [
-                        {
-                          label: '启用',
-                          value: true
-                        },
-                        {
-                          label: '停用',
-                          value: false
-                        }
-                      ] as any
+        <div class="system-menu-container">
+          <SaveForm
+            ref={saveForm}
+            model={state.searchForm}
+            onSubmit={onSubmit}
+            saveKey="music-sheet-gym"
+            onSetModel={(val: any) => (state.searchForm = val)}
+          >
+            <NFormItem label="关键词" path="keyword">
+              <NInput
+                placeholder="请输入曲目名称/编号"
+                v-model:value={state.searchForm.keyword}
+                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') {
+                    const { data } = await musicSheetApplicationOwnerList({
+                      page: 1,
+                      rows: 9999,
+                      sourceType: value,
+                      applicationId: state.appId
+                    })
+                    const temp = data.rows || []
+                    temp.forEach((next: any) => {
+                      state.userIdData.push({
+                        ...next,
+                        label: value === 'PERSON' ? next.userName : next.organizationRole,
+                        value: value === 'PERSON' ? next.userId : next.organizationRoleId
+                      })
+                    })
+                    state.userIdDisable = false
+                  } else {
+                    state.userIdDisable = true
+                  }
+                }}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="所属人" path="userId">
+              <NSelect
+                placeholder="请选择所属人"
+                disabled={state.userIdDisable}
+                v-model:value={state.searchForm.userId}
+                options={state.userIdData}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="曲目类型" path="subjectType">
+              <NSelect
+                placeholder="请选择曲目类型"
+                v-model:value={state.searchForm.musicSheetType}
+                options={getSelectDataFromObj(musicSheetType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="伴奏类型" path="audioType">
+              <NSelect
+                placeholder="请选择伴奏类型"
+                v-model:value={state.searchForm.audioType}
+                options={getSelectDataFromObj(musicSheetAudioType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="可用声部" path="subjectId">
+              <NSelect
+                placeholder="请选择可用声部"
+                v-model:value={state.searchForm.subjectId}
+                options={state.subjectList}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="曲目分类" path="musicCategoryId">
+              <NCascader
+                valueField="id"
+                labelField="name"
+                children-field="children"
+                placeholder="请选择曲目分类"
+                v-model:value={state.searchForm.musicCategoryId}
+                options={state.musicSheetCategories}
+                clearable
+              />
+            </NFormItem>
+            {/*<NFormItem*/}
+            {/*    label="可用途径"*/}
+            {/*    path="availableType"*/}
+            {/*>*/}
+            {/*  <NSelect*/}
+            {/*      placeholder="请选择可用途径"*/}
+            {/*      v-model:value={state.searchForm.availableType}*/}
+            {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
+            {/*      clearable*/}
+            {/*  >*/}
+            {/*  </NSelect>*/}
+            {/*</NFormItem>*/}
+            <NFormItem label="收费方式" path="paymentType">
+              <NSelect
+                placeholder="请选择收费方式"
+                v-model:value={state.searchForm.paymentType}
+                options={getSelectDataFromObj(musicSheetPaymentType)}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="状态" path="status">
+              <NSelect
+                v-model:value={state.searchForm.status}
+                placeholder="请选择状态"
+                options={
+                  [
+                    {
+                      label: '启用',
+                      value: true
+                    },
+                    {
+                      label: '停用',
+                      value: false
                     }
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="上传时间" path="authorFrom">
-                <NDatePicker
-                    v-model:value={state.searchForm.times}
-                    type="daterange"
-                    clearable
-                    value-format="yyyy.MM.dd"
-                    startPlaceholder="开始时间"
-                    endPlaceholder="结束时间"
-                />
-              </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/save1602302550719426561"
-                    onClick={() => {
-                      state.showAddDialog = true
-                    }}
-                >
-                  添加曲目
-                </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(false)
-                    }}
-                >
-                  批量停用
+                  ] as any
+                }
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="上传时间" path="authorFrom">
+              <NDatePicker
+                v-model:value={state.searchForm.times}
+                type="daterange"
+                clearable
+                value-format="yyyy.MM.dd"
+                startPlaceholder="开始时间"
+                endPlaceholder="结束时间"
+              />
+            </NFormItem>
+            <NFormItem>
+              <NSpace>
+                <NButton type="primary" onClick={onSearch}>
+                  搜索
                 </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(true)
-                    }}
-                >
-                  批量启用
+                <NButton type="default" onClick={onBtnReset}>
+                  重置
                 </NButton>
               </NSpace>
+            </NFormItem>
+          </SaveForm>
 
-              <NDataTable
-                  loading={state.loading}
-                  columns={columns()}
-                  data={state.dataList}
-                  rowKey={(row: any) => row.applicationExtendId}
-                  onUpdateCheckedRowKeys={handleCheck}
-                  scrollX={'1600'}
-              ></NDataTable>
+          <div class={['section-container']}>
+            <NSpace style={{ paddingBottom: '12px' }}>
+              <NButton
+                type="primary"
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  state.showAddDialog = true
+                }}
+              >
+                添加曲目
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(false)
+                }}
+              >
+                批量停用
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(true)
+                }}
+              >
+                批量启用
+              </NButton>
+            </NSpace>
 
-              <Pagination
-                  v-model:page={state.pagination.page}
-                  v-model:pageSize={state.pagination.rows}
-                  v-model:pageTotal={state.pagination.pageTotal}
-                  onList={getList}
-                  sync
-                  saveKey="music-sheet-gym"
-              ></Pagination>
-            </div>
+            <NDataTable
+              loading={state.loading}
+              columns={columns()}
+              data={state.dataList}
+              rowKey={(row: any) => row.applicationExtendId}
+              onUpdateCheckedRowKeys={handleCheck}
+              scrollX={'1600'}
+            ></NDataTable>
 
-            <NModal
-                v-model:show={state.showAddDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'添加曲目'}
-                style={{width: '1200px'}}
-            >
-              <AddMusic
-                  onClose={() => (state.showAddDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  subjectList={state.subjectList}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
-            <NModal
-                v-model:show={state.showEditDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'修改曲目'}
-                style={{width: '500px'}}
-            >
-              <UpdateMusic
-                  onClose={() => (state.showEditDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  rowData={state.updateRow}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="music-sheet-gym"
+            ></Pagination>
           </div>
+
+          <NModal
+            v-model:show={state.showAddDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'添加曲目'}
+            style={{ width: '1200px' }}
+          >
+            <AddMusic
+              onClose={() => (state.showAddDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              subjectList={state.subjectList}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+          <NModal
+            v-model:show={state.showEditDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'修改曲目'}
+            style={{ width: '500px' }}
+          >
+            <UpdateMusic
+              onClose={() => (state.showEditDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              rowData={state.updateRow}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+        </div>
       )
     }
-
   }
-})
+})

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

@@ -1,12 +1,29 @@
-import {defineComponent, h, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
-import {DataTableColumns, DataTableRowKey, NButton, NCascader, NDataTable, NFormItem, NIcon, NImage, NInput, NInputNumber, NSelect, NSpace, NStep, NSteps, useDialog, useMessage} from "naive-ui";
-import Pagination from "@components/pagination";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {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";
+import { defineComponent, h, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
+import {
+  DataTableColumns,
+  DataTableRowKey,
+  NButton,
+  NCascader,
+  NDataTable,
+  NFormItem,
+  NIcon,
+  NImage,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NStep,
+  NSteps,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import Pagination from '@components/pagination'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { 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: 'gyt-addMusic',
@@ -25,7 +42,7 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
-  setup(props, {slots, attrs, emit}) {
+  setup(props, { slots, attrs, emit }) {
     const dialogs = useDialog()
     const message = useMessage()
     const state = reactive({
@@ -44,16 +61,16 @@ export default defineComponent({
         keyword: null,
         musicSheetType: null,
         subjectId: null,
-        sourceType: null,
+        sourceType: null
       },
       subjectList: [] as any,
       showAdd: false,
       currentStep: 1,
       dataList: [],
-      selectRowData: [] as any,// 选择的数据列表
+      selectRowData: [] as any, // 选择的数据列表
       musicSheetCategories: [] as any,
-      startSortNum: null as any,// 排序起始值
-      projectMusicCategoryId: null as any,// 曲目分类ID
+      startSortNum: null as any, // 排序起始值
+      projectMusicCategoryId: null as any // 曲目分类ID
     })
 
     onMounted(() => {
@@ -65,15 +82,14 @@ export default defineComponent({
     const getList = async () => {
       try {
         state.loading = true
-        const {data} = await musicSheetPage({
+        const { data } = await musicSheetPage({
           ...state.pagination,
           ...state.searchForm,
           addAppId: props.appId
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -93,19 +109,19 @@ export default defineComponent({
 
     const onSave = async () => {
       if (state.selectRowData.length == 0) {
-        message.error('未选择曲目');
-        return;
+        message.error('未选择曲目')
+        return
       }
-      const params = [] as any[];
+      const params = [] as any[]
       for (let i = 0; i < state.selectRowData.length; i++) {
-        const item = state.selectRowData[i];
+        const item = state.selectRowData[i]
         if (!item.projectMusicCategoryId) {
           message.error('曲目分类不能为空')
-          return;
+          return
         }
         if (!item.sortNo || !item.projectMusicCategoryId) {
           message.error('排序号不能为空')
-          return;
+          return
         }
         params.push({
           ...item,
@@ -115,14 +131,12 @@ export default defineComponent({
           id: null
         })
       }
-      const res = await musicSheetApplicationExtendSaveBatch(params) as any
+      const res = (await musicSheetApplicationExtendSaveBatch(params)) as any
       if (res && res.code == '200') {
         message.success(`添加成功`)
         emit('getList')
         emit('close')
       }
-
-
     }
 
     const columnsField = [
@@ -131,48 +145,52 @@ export default defineComponent({
       },
       {
         title: '曲目编号',
-        key: 'id',
+        key: 'id'
       },
       {
         title: '封面图',
         key: 'titleImg',
         render(row: any) {
-          return <NImage width={40} height={40} src={row.musicCover}/>
+          return <NImage width={40} height={40} src={row.musicCover} />
         }
       },
       {
         title: '声部',
-        key: 'subjectNames',
+        key: 'subjectNames'
       },
       {
         title: '曲目名称',
-        key: 'name',
+        key: 'name'
       },
       {
         title: '音乐人',
-        key: 'composer',
+        key: 'composer'
       },
       {
         title: '曲目类型',
         key: 'musicSheetType',
         render: (row: any) => {
-          return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+          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)));
+          return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
         }
       },
       {
         title: '所属人',
         key: 'userName',
         render: (row: any) => {
-          return <div>{getOwnerName(row.musicSheetExtend, row.sourceType)}</div>
+          return <TheTooltip content={getOwnerName(row.musicSheetExtend, row.sourceType)} />
         }
-      },
+      }
     ]
 
     const columns = (): any => {
@@ -180,63 +198,65 @@ export default defineComponent({
     }
 
     const stepColumns = (): DataTableColumns => {
-      const field = deepClone(columnsField);
+      const field = deepClone(columnsField)
       field.splice(0, 1)
       field.push({
         title(column: any) {
           return (
-              <NSpace>
-                曲目分类
-                <NButton type="primary"
-                         size="small"
-                         text
-                         onClick={() => {
-                           dialogs.create({
-                             title: "请选择曲目分类",
-                             showIcon: false,
-                             content: () => {
-                               return h(
-                                   "div",
-                                   {
-                                     class: "flex flex-col justify-center items-center text-14px",
-                                   },
-                                   [
-                                     // icon
-                                     h(NCascader, {
-                                       onUpdateValue(v) {
-                                         state.projectMusicCategoryId = v
-                                       },
-                                       valueField: 'id',
-                                       labelField: "name",
-                                       childrenField: 'children',
-                                       placeholderField: '请选择曲目分类',
-                                       options: state.musicSheetCategories
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               for (let i = 0; i < state.selectRowData.length; i++) {
-                                 const item = state.selectRowData[i];
-                                 item.projectMusicCategoryId = state.projectMusicCategoryId
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              曲目分类
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请选择曲目分类',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NCascader, {
+                            onUpdateValue(v) {
+                              state.projectMusicCategoryId = v
+                            },
+                            valueField: 'id',
+                            labelField: 'name',
+                            childrenField: 'children',
+                            placeholderField: '请选择曲目分类',
+                            options: state.musicSheetCategories
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      for (let i = 0; i < state.selectRowData.length; i++) {
+                        const item = state.selectRowData[i]
+                        item.projectMusicCategoryId = state.projectMusicCategoryId
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'projectMusicCategoryId',
         fixed: 'right',
@@ -244,75 +264,77 @@ export default defineComponent({
         render: (row: any) => {
           // })
           return (
-              <NCascader
-                  valueField="id"
-                  labelField="name"
-                  children-field="children"
-                  placeholder="请选择曲目分类"
-                  value={row.projectMusicCategoryId}
-                  options={state.musicSheetCategories}
-                  onUpdateValue={(value: any) => {
-                    row.projectMusicCategoryId = value
-                  }}
-                  clearable
-              />
+            <NCascader
+              valueField="id"
+              labelField="name"
+              children-field="children"
+              placeholder="请选择曲目分类"
+              value={row.projectMusicCategoryId}
+              options={state.musicSheetCategories}
+              onUpdateValue={(value: any) => {
+                row.projectMusicCategoryId = 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(NInputNumber, {
-                                       onUpdateValue(v) {
-                                         state.startSortNum = v
-                                       },
-                                       min: 0,
-                                       max: 9999,
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               if (state.startSortNum) {
-                                 for (let i = 0; i < state.selectRowData.length; i++) {
-                                   const item = state.selectRowData[i];
-                                   item.sortNo = state.startSortNum + i
-                                 }
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              排序
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请输入排序起始值',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NInputNumber, {
+                            onUpdateValue(v) {
+                              state.startSortNum = v
+                            },
+                            min: 0,
+                            max: 9999
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      if (state.startSortNum) {
+                        for (let i = 0; i < state.selectRowData.length; i++) {
+                          const item = state.selectRowData[i]
+                          item.sortNo = state.startSortNum + i
+                        }
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'sortNo',
         fixed: 'right',
@@ -334,49 +356,48 @@ export default defineComponent({
         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 {
+            <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)
                         }
-                      })
-                    }}
-                >
-                  移除
-                </NButton>
-              </NSpace>
+                      } catch {}
+                    }
+                  })
+                }}
+              >
+                移除
+              </NButton>
+            </NSpace>
           )
         }
       })
-      return field;
+      return field
     }
 
     const checkedRowKeysRef = ref<DataTableRowKey[]>([])
@@ -387,7 +408,7 @@ export default defineComponent({
         if (checkedRowKeysRef.value.includes(next.id)) {
           const find = state.selectRowData.find((row: any) => {
             return row.id === next.id
-          });
+          })
           if (!find) {
             state.selectRowData.push(next)
           }
@@ -402,142 +423,138 @@ export default defineComponent({
 
     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"}
+        <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)}
               >
-                <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}
-                  ></NDataTable>
-                </div>
-            )}
-            <NSpace justify="end" style={"margin-top:10px"}>
-              <NButton type="default" onClick={() => {
+                <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}
+              ></NDataTable>
+            </div>
+          )}
+          <NSpace justify="end" style={'margin-top:10px'}>
+            <NButton
+              type="default"
+              onClick={() => {
                 if (state.currentStep > 1) {
-                  state.currentStep = 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>
+              }}
+            >
+              {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>
       )
     }
   }
-})
+})

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

@@ -1,5 +1,5 @@
-import {defineComponent, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
 import {
   DataTableRowKey,
   NButton,
@@ -17,18 +17,28 @@ import {
   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 {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {musicSheetAudioType, musicSheetPaymentType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {musicSheetApplicationExtendCategoryList, musicSheetApplicationOwnerList, musicSheetPageByApplication, musicSheetStatusList} from "@views/music-library/api";
-import {subjectPage, sysApplicationPage} from "@views/system-manage/api";
-import {filterTimes} from "@/utils/dateUtil";
-import deepClone from "@/utils/deep.clone";
-import {getOwnerName} from "@views/music-library/musicUtil";
-import UpdateMusic from "@views/music-library/project-music-sheet/module/gyt/updateMusic";
+} 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 { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import {
+  musicSheetAudioType,
+  musicSheetPaymentType,
+  musicSheetSourceType,
+  musicSheetType
+} from '@/utils/constant'
+import {
+  musicSheetApplicationExtendCategoryList,
+  musicSheetApplicationOwnerList,
+  musicSheetPageByApplication,
+  musicSheetStatusList
+} from '@views/music-library/api'
+import { subjectPage, sysApplicationPage } from '@views/system-manage/api'
+import { filterTimes } from '@/utils/dateUtil'
+import deepClone from '@/utils/deep.clone'
+import { getOwnerName } from '@views/music-library/musicUtil'
+import UpdateMusic from '@views/music-library/project-music-sheet/module/gyt/updateMusic'
 
 export default defineComponent({
   name: 'project-music-sheet-gyt',
@@ -67,7 +77,7 @@ export default defineComponent({
         topFlag: null, //是否置顶(0:否;1:是)
         availableType: null, //可用途径 ORG 机构 PLATFORM 平台
         appAuditFlag: null, //是否审核版本
-        detailFlag: null, //是否查询详情
+        detailFlag: null //是否查询详情
       },
       subjectList: [],
       dataList: [] as any[],
@@ -77,49 +87,49 @@ export default defineComponent({
       userIdDisable: true,
       userIdData: [] as any,
       updateRow: {} as any, // 修改选择的行
-      applicationId: null, //应用ID
+      applicationId: null //应用ID
     })
 
     onMounted(async () => {
       state.loading = true
       // 获取应用APP信息
-      {
-        const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: props.appKey})
+      try {
+        const { data } = await sysApplicationPage({ page: 1, rows: 1, appKey: props.appKey })
         const tempList = data.rows || []
         if (!tempList || tempList.length == 0) {
           state.loading = false
-          message.error("加载项目信息失败");
+          message.error('加载项目信息失败')
           return
         }
         state.appId = tempList[0].id
         state.applicationId = tempList[0].id
-      }
+      } catch {}
+
       // 加载声部
-      {
-        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 {
-        }
 
+      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 {}
+
+      try {
         //加载曲目分类列表
-        {
-          const {data} = await musicSheetApplicationExtendCategoryList({applicationIds: state.appId})
-          if (data && data.length > 0) {
-            state.musicSheetCategories = data[0].musicSheetCategories
-          }
+        const { data } = await musicSheetApplicationExtendCategoryList({
+          applicationIds: state.appId
+        })
+        if (data && data.length > 0) {
+          state.musicSheetCategories = data[0].musicSheetCategories
         }
+      } catch {}
 
-        // 加载表格数据
-        {
-          getList()
-        }
-      }
+      // 加载表格数据
+
+      getList()
     })
 
     const saveForm = ref()
@@ -145,13 +155,13 @@ export default defineComponent({
       try {
         state.loading = true
         const sourceType = state.searchForm.sourceType
-        let userId = state.searchForm.userId;
-        let organizationRoleId = null;
+        let userId = state.searchForm.userId
+        let organizationRoleId = null
         if (sourceType && sourceType === 'ORG') {
           organizationRoleId = deepClone(userId)
           userId = null
         }
-        const {data} = await musicSheetPageByApplication({
+        const { data } = await musicSheetPageByApplication({
           ...state.pagination,
           ...state.searchForm,
           userId: userId,
@@ -161,8 +171,7 @@ export default defineComponent({
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -181,17 +190,15 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
 
-
     const onBatchChangeStatus = (status: boolean) => {
-      const length = checkedRowKeysRef.value.length;
+      const length = checkedRowKeysRef.value.length
       if (length == 0) {
-        message.warning("未选择数据")
+        message.warning('未选择数据')
       }
       const statusStr = !status ? '停用' : '启用'
       dialog.warning({
@@ -207,8 +214,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -222,49 +228,59 @@ export default defineComponent({
           title: '曲目信息',
           key: 'id',
           render: (row: any) => (
-              <>
-                <NDescriptions labelPlacement="left" column={1}>
-                  <NDescriptionsItem label="曲目名称">
-                    <TheTooltip content={row.name}/>{' '}
-                  </NDescriptionsItem>
-                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
-                </NDescriptions>
-              </>
+            <>
+              <NDescriptions labelPlacement="left" column={1}>
+                <NDescriptionsItem label="曲目名称">
+                  <TheTooltip content={row.name} />{' '}
+                </NDescriptionsItem>
+                <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
+              </NDescriptions>
+            </>
           )
         },
         {
           title: '曲目来源',
           key: 'musicSheetCategoriesName',
           render: (row: any) => (
-              <>
-                <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>
-              </>
+            <>
+              <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: 'musicCover',
           render(row: any): JSX.Element {
-            return <NImage width={60} height={60} src={row.musicCover}/>
+            return <NImage width={60} height={60} src={row.musicCover} />
           }
         },
         {
           title: '曲目类型',
           key: 'musicSheetType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
+              </div>
+            )
           }
         },
         {
           title: '伴奏类型',
           key: 'audioType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}
+              </div>
+            )
           }
         },
         {
@@ -286,7 +302,11 @@ export default defineComponent({
           title: '收费方式',
           key: 'paymentType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}
+              </div>
+            )
           }
         },
         {
@@ -302,7 +322,7 @@ export default defineComponent({
           key: 'status',
           render(row: any) {
             return (
-                <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
+              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
             )
           }
         },
@@ -312,279 +332,276 @@ export default defineComponent({
           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.showEditDialog = true
-                        state.updateRow = row
-                      }}
-                  >
-                    修改
-                  </NButton>
-                </NSpace>
+              <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.showEditDialog = true
+                    state.updateRow = row
+                  }}
+                >
+                  修改
+                </NButton>
+              </NSpace>
             )
           }
         }
       ]
     }
 
-
     return () => {
       return (
-          <div class="system-menu-container">
-            <SaveForm
-                ref={saveForm}
-                model={state.searchForm}
-                onSubmit={onSubmit}
-                saveKey="music-sheet-gyt"
-                onSetModel={(val: any) => (state.searchForm = val)}
-            >
-
-              <NFormItem label="关键词" path="keyword">
-                <NInput
-                    placeholder="请输入曲目名称/编号"
-                    v-model:value={state.searchForm.keyword}
-                    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') {
-                        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
-                        const temp = data.rows || []
-                        temp.forEach((next: any) => {
-                          state.userIdData.push({
-                            ...next,
-                            label: value === 'PERSON' ? next.userName : next.organizationRole,
-                            value: value === 'PERSON' ? next.userId : next.organizationRoleId
-                          })
-                        })
-                        state.userIdDisable = false
-                      } else {
-                        state.userIdDisable = true
-                      }
-                    }}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="所属人" path="userId">
-                <NSelect
-                    placeholder="请选择所属人"
-                    disabled={state.userIdDisable}
-                    v-model:value={state.searchForm.userId}
-                    options={state.userIdData}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="曲目类型" path="subjectType">
-                <NSelect
-                    placeholder="请选择曲目类型"
-                    v-model:value={state.searchForm.musicSheetType}
-                    options={getSelectDataFromObj(musicSheetType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="伴奏类型" path="audioType">
-                <NSelect
-                    placeholder="请选择伴奏类型"
-                    v-model:value={state.searchForm.audioType}
-                    options={getSelectDataFromObj(musicSheetAudioType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="可用声部" path="subjectId">
-                <NSelect
-                    placeholder="请选择可用声部"
-                    v-model:value={state.searchForm.subjectId}
-                    options={state.subjectList}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="曲目分类" path="musicCategoryId">
-                <NCascader
-                    valueField="id"
-                    labelField="name"
-                    children-field="children"
-                    placeholder="请选择曲目分类"
-                    v-model:value={state.searchForm.musicCategoryId}
-                    options={state.musicSheetCategories}
-                    clearable
-                />
-              </NFormItem>
-              {/*<NFormItem*/}
-              {/*    label="可用途径"*/}
-              {/*    path="availableType"*/}
-              {/*>*/}
-              {/*  <NSelect*/}
-              {/*      placeholder="请选择可用途径"*/}
-              {/*      v-model:value={state.searchForm.availableType}*/}
-              {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
-              {/*      clearable*/}
-              {/*  >*/}
-              {/*  </NSelect>*/}
-              {/*</NFormItem>*/}
-              <NFormItem
-                  label="收费方式"
-                  path="paymentType"
-              >
-                <NSelect
-                    placeholder="请选择收费方式"
-                    v-model:value={state.searchForm.paymentType}
-                    options={getSelectDataFromObj(musicSheetPaymentType)}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="状态" path="status">
-                <NSelect
-                    v-model:value={state.searchForm.status}
-                    placeholder="请选择状态"
-                    options={
-                      [
-                        {
-                          label: '启用',
-                          value: true
-                        },
-                        {
-                          label: '停用',
-                          value: false
-                        }
-                      ] as any
+        <div class="system-menu-container">
+          <SaveForm
+            ref={saveForm}
+            model={state.searchForm}
+            onSubmit={onSubmit}
+            saveKey="music-sheet-gyt"
+            onSetModel={(val: any) => (state.searchForm = val)}
+          >
+            <NFormItem label="关键词" path="keyword">
+              <NInput
+                placeholder="请输入曲目名称/编号"
+                v-model:value={state.searchForm.keyword}
+                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') {
+                    const { data } = await musicSheetApplicationOwnerList({
+                      page: 1,
+                      rows: 9999,
+                      sourceType: value,
+                      applicationId: state.appId
+                    })
+                    const temp = data.rows || []
+                    temp.forEach((next: any) => {
+                      state.userIdData.push({
+                        ...next,
+                        label: value === 'PERSON' ? next.userName : next.organizationRole,
+                        value: value === 'PERSON' ? next.userId : next.organizationRoleId
+                      })
+                    })
+                    state.userIdDisable = false
+                  } else {
+                    state.userIdDisable = true
+                  }
+                }}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="所属人" path="userId">
+              <NSelect
+                placeholder="请选择所属人"
+                disabled={state.userIdDisable}
+                v-model:value={state.searchForm.userId}
+                options={state.userIdData}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="曲目类型" path="subjectType">
+              <NSelect
+                placeholder="请选择曲目类型"
+                v-model:value={state.searchForm.musicSheetType}
+                options={getSelectDataFromObj(musicSheetType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="伴奏类型" path="audioType">
+              <NSelect
+                placeholder="请选择伴奏类型"
+                v-model:value={state.searchForm.audioType}
+                options={getSelectDataFromObj(musicSheetAudioType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="可用声部" path="subjectId">
+              <NSelect
+                placeholder="请选择可用声部"
+                v-model:value={state.searchForm.subjectId}
+                options={state.subjectList}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="曲目分类" path="musicCategoryId">
+              <NCascader
+                valueField="id"
+                labelField="name"
+                children-field="children"
+                placeholder="请选择曲目分类"
+                v-model:value={state.searchForm.musicCategoryId}
+                options={state.musicSheetCategories}
+                clearable
+              />
+            </NFormItem>
+            {/*<NFormItem*/}
+            {/*    label="可用途径"*/}
+            {/*    path="availableType"*/}
+            {/*>*/}
+            {/*  <NSelect*/}
+            {/*      placeholder="请选择可用途径"*/}
+            {/*      v-model:value={state.searchForm.availableType}*/}
+            {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
+            {/*      clearable*/}
+            {/*  >*/}
+            {/*  </NSelect>*/}
+            {/*</NFormItem>*/}
+            <NFormItem label="收费方式" path="paymentType">
+              <NSelect
+                placeholder="请选择收费方式"
+                v-model:value={state.searchForm.paymentType}
+                options={getSelectDataFromObj(musicSheetPaymentType)}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="状态" path="status">
+              <NSelect
+                v-model:value={state.searchForm.status}
+                placeholder="请选择状态"
+                options={
+                  [
+                    {
+                      label: '启用',
+                      value: true
+                    },
+                    {
+                      label: '停用',
+                      value: false
                     }
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="上传时间" path="authorFrom">
-                <NDatePicker
-                    v-model:value={state.searchForm.times}
-                    type="daterange"
-                    clearable
-                    value-format="yyyy.MM.dd"
-                    startPlaceholder="开始时间"
-                    endPlaceholder="结束时间"
-                />
-              </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/save1602302550719426561"
-                    onClick={() => {
-                      state.showAddDialog = true
-                    }}
-                >
-                  添加曲目
-                </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(false)
-                    }}
-                >
-                  批量停用
+                  ] as any
+                }
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="上传时间" path="authorFrom">
+              <NDatePicker
+                v-model:value={state.searchForm.times}
+                type="daterange"
+                clearable
+                value-format="yyyy.MM.dd"
+                startPlaceholder="开始时间"
+                endPlaceholder="结束时间"
+              />
+            </NFormItem>
+            <NFormItem>
+              <NSpace>
+                <NButton type="primary" onClick={onSearch}>
+                  搜索
                 </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(true)
-                    }}
-                >
-                  批量启用
+                <NButton type="default" onClick={onBtnReset}>
+                  重置
                 </NButton>
               </NSpace>
+            </NFormItem>
+          </SaveForm>
 
-              <NDataTable
-                  loading={state.loading}
-                  columns={columns()}
-                  data={state.dataList}
-                  rowKey={(row: any) => row.applicationExtendId}
-                  onUpdateCheckedRowKeys={handleCheck}
-                  scrollX={'1600'}
-              ></NDataTable>
+          <div class={['section-container']}>
+            <NSpace style={{ paddingBottom: '12px' }}>
+              <NButton
+                type="primary"
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  state.showAddDialog = true
+                }}
+              >
+                添加曲目
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(false)
+                }}
+              >
+                批量停用
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(true)
+                }}
+              >
+                批量启用
+              </NButton>
+            </NSpace>
 
-              <Pagination
-                  v-model:page={state.pagination.page}
-                  v-model:pageSize={state.pagination.rows}
-                  v-model:pageTotal={state.pagination.pageTotal}
-                  onList={getList}
-                  sync
-                  saveKey="music-sheet-gyt"
-              ></Pagination>
-            </div>
+            <NDataTable
+              loading={state.loading}
+              columns={columns()}
+              data={state.dataList}
+              rowKey={(row: any) => row.applicationExtendId}
+              onUpdateCheckedRowKeys={handleCheck}
+              scrollX={'1600'}
+            ></NDataTable>
 
-            <NModal
-                v-model:show={state.showAddDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'添加曲目'}
-                style={{width: '1200px'}}
-            >
-              <AddMusic
-                  onClose={() => (state.showAddDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  subjectList={state.subjectList}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
-            <NModal
-                v-model:show={state.showEditDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'修改曲目'}
-                style={{width: '500px'}}
-            >
-              <UpdateMusic
-                  onClose={() => (state.showEditDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  rowData={state.updateRow}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="music-sheet-gyt"
+            ></Pagination>
           </div>
+
+          <NModal
+            v-model:show={state.showAddDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'添加曲目'}
+            style={{ width: '1200px' }}
+          >
+            <AddMusic
+              onClose={() => (state.showAddDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              subjectList={state.subjectList}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+          <NModal
+            v-model:show={state.showEditDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'修改曲目'}
+            style={{ width: '500px' }}
+          >
+            <UpdateMusic
+              onClose={() => (state.showEditDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              rowData={state.updateRow}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+        </div>
       )
     }
-
   }
-})
+})

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

@@ -1,17 +1,44 @@
-import {defineComponent, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
-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/klx/addMusic";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {musicSheetAudioType, musicSheetAvailableType, musicSheetPaymentType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {musicSheetApplicationExtendStatus, musicSheetApplicationExtendTagList, musicSheetApplicationOwnerList, musicSheetPageByApplication} from "@views/music-library/api";
-import {subjectPage, sysApplicationPage} from "@views/system-manage/api";
-import {filterTimes} from "@/utils/dateUtil";
-import deepClone from "@/utils/deep.clone";
-import {getOwnerName} from "@views/music-library/musicUtil";
-import UpdateMusic from "@views/music-library/project-music-sheet/module/klx/updateMusic";
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
+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/klx/addMusic'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import {
+  musicSheetAudioType,
+  musicSheetAvailableType,
+  musicSheetPaymentType,
+  musicSheetSourceType,
+  musicSheetType
+} from '@/utils/constant'
+import {
+  musicSheetApplicationExtendStatus,
+  musicSheetApplicationExtendTagList,
+  musicSheetApplicationOwnerList,
+  musicSheetPageByApplication
+} from '@views/music-library/api'
+import { subjectPage, sysApplicationPage } from '@views/system-manage/api'
+import { filterTimes } from '@/utils/dateUtil'
+import deepClone from '@/utils/deep.clone'
+import { getOwnerName } from '@views/music-library/musicUtil'
+import UpdateMusic from '@views/music-library/project-music-sheet/module/klx/updateMusic'
 
 export default defineComponent({
   name: 'music-sheet-KLX',
@@ -50,7 +77,7 @@ export default defineComponent({
         availableType: null, //可用途径 ORG 机构 PLATFORM 平台
         appAuditFlag: null, //是否审核版本
         detailFlag: null, //是否查询详情
-        musicTagIds: [] as any, //曲目标签
+        musicTagIds: [] as any //曲目标签
       },
       subjectList: [],
       dataList: [] as any[],
@@ -59,60 +86,56 @@ export default defineComponent({
       userIdDisable: true,
       userIdData: [] as any,
       updateRow: {} as any, // 修改选择的行
-      musicTagList: [] as any,//曲目标签
-      applicationId: null, //应用ID
+      musicTagList: [] as any, //曲目标签
+      applicationId: null //应用ID
     })
 
     onMounted(async () => {
       state.loading = true
       // 获取应用APP信息
-      {
-        const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: props.appKey})
+
+      try {
+        const { data } = await sysApplicationPage({ page: 1, rows: 1, appKey: props.appKey })
         const tempList = data.rows || []
         if (!tempList || tempList.length == 0) {
           state.loading = false
-          message.error("加载项目信息失败");
+          message.error('加载项目信息失败')
           return
         }
         state.appId = tempList[0].id
         state.applicationId = tempList[0].id
-      }
+      } catch {}
+
       // 加载声部
-      {
-        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 {
-        }
 
-        // 加载曲目标签
-        {
-          try {
-            const {data} = await musicSheetApplicationExtendTagList({applicationId: state.appId})
-            if (data && data.length > 0) {
-              data.forEach((item: any) => {
-                state.musicTagList.push({
-                  ...item,
-                  label: item.name,
-                  value: item.id
-                })
-              })
-            }
-          } catch (err) {
-          }
-        }
+      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 {}
 
-        // 加载表格数据
-        {
-          getList()
+      // 加载曲目标签
+
+      try {
+        const { data } = await musicSheetApplicationExtendTagList({ applicationId: state.appId })
+        if (data && data.length > 0) {
+          data.forEach((item: any) => {
+            state.musicTagList.push({
+              ...item,
+              label: item.name,
+              value: item.id
+            })
+          })
         }
-      }
+      } catch (err) {}
+
+      // 加载表格数据
 
+      getList()
     })
 
     const saveForm = ref()
@@ -138,13 +161,13 @@ export default defineComponent({
       try {
         state.loading = true
         const sourceType = state.searchForm.sourceType
-        let userId = state.searchForm.userId;
-        let organizationRoleId = null;
+        let userId = state.searchForm.userId
+        let organizationRoleId = null
         if (sourceType && sourceType === 'ORG') {
           organizationRoleId = deepClone(userId)
           userId = null
         }
-        const {data} = await musicSheetPageByApplication({
+        const { data } = await musicSheetPageByApplication({
           ...state.pagination,
           ...state.searchForm,
           userId: userId,
@@ -155,8 +178,7 @@ export default defineComponent({
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -175,17 +197,15 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
 
-
     const onBatchChangeStatus = (status: boolean) => {
-      const length = checkedRowKeysRef.value.length;
+      const length = checkedRowKeysRef.value.length
       if (length == 0) {
-        message.warning("未选择数据")
+        message.warning('未选择数据')
       }
       const statusStr = !status ? '停用' : '启用'
       dialog.warning({
@@ -201,8 +221,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -216,49 +235,59 @@ export default defineComponent({
           title: '曲目信息',
           key: 'id',
           render: (row: any) => (
-              <>
-                <NDescriptions labelPlacement="left" column={1}>
-                  <NDescriptionsItem label="曲目名称">
-                    <TheTooltip content={row.name}/>{' '}
-                  </NDescriptionsItem>
-                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
-                </NDescriptions>
-              </>
+            <>
+              <NDescriptions labelPlacement="left" column={1}>
+                <NDescriptionsItem label="曲目名称">
+                  <TheTooltip content={row.name} />{' '}
+                </NDescriptionsItem>
+                <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
+              </NDescriptions>
+            </>
           )
         },
         {
           title: '曲目来源',
           key: 'musicSheetCategoriesName',
           render: (row: any) => (
-              <>
-                <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>
-              </>
+            <>
+              <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: 'musicCover',
           render(row: any): JSX.Element {
-            return <NImage width={60} height={60} src={row.musicCover}/>
+            return <NImage width={60} height={60} src={row.musicCover} />
           }
         },
         {
           title: '曲目类型',
           key: 'musicSheetType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
+              </div>
+            )
           }
         },
         {
           title: '伴奏类型',
           key: 'audioType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}
+              </div>
+            )
           }
         },
         {
@@ -273,7 +302,14 @@ export default defineComponent({
           title: '可用途径',
           key: 'applicationAvailableType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.applicationAvailableType, new Map(Object.entries(musicSheetAvailableType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(
+                  row.applicationAvailableType,
+                  new Map(Object.entries(musicSheetAvailableType))
+                )}
+              </div>
+            )
           }
         },
         {
@@ -294,12 +330,16 @@ export default defineComponent({
           title: '收费方式',
           key: 'paymentType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}
+              </div>
+            )
           }
         },
         {
           title: '曲目价格',
-          key: 'musicPrice',
+          key: 'musicPrice'
         },
         {
           title: '上传人',
@@ -314,7 +354,7 @@ export default defineComponent({
           key: 'status',
           render(row: any) {
             return (
-                <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
+              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
             )
           }
         },
@@ -324,275 +364,272 @@ export default defineComponent({
           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.showEditDialog = true
-                        state.updateRow = row
-                      }}
-                  >
-                    修改
-                  </NButton>
-                </NSpace>
+              <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.showEditDialog = true
+                    state.updateRow = row
+                  }}
+                >
+                  修改
+                </NButton>
+              </NSpace>
             )
           }
         }
       ]
     }
 
-
     return () => {
       return (
-          <div class="system-menu-container">
-            <SaveForm
-                ref={saveForm}
-                model={state.searchForm}
-                onSubmit={onSubmit}
-                saveKey="music-sheet-klx"
-                onSetModel={(val: any) => (state.searchForm = val)}
-            >
-
-              <NFormItem label="关键词" path="keyword">
-                <NInput
-                    placeholder="请输入曲目名称/编号"
-                    v-model:value={state.searchForm.keyword}
-                    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') {
-                        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
-                        const temp = data.rows || []
-                        temp.forEach((next: any) => {
-                          state.userIdData.push({
-                            ...next,
-                            label: value === 'PERSON' ? next.userName : next.organizationRole,
-                            value: value === 'PERSON' ? next.userId : next.organizationRoleId
-                          })
-                        })
-                        state.userIdDisable = false
-                      } else {
-                        state.userIdDisable = true
-                      }
-                    }}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="所属人" path="userId">
-                <NSelect
-                    placeholder="请选择所属人"
-                    disabled={state.userIdDisable}
-                    v-model:value={state.searchForm.userId}
-                    options={state.userIdData}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="曲目类型" path="subjectType">
-                <NSelect
-                    placeholder="请选择曲目类型"
-                    v-model:value={state.searchForm.musicSheetType}
-                    options={getSelectDataFromObj(musicSheetType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="伴奏类型" path="audioType">
-                <NSelect
-                    placeholder="请选择伴奏类型"
-                    v-model:value={state.searchForm.audioType}
-                    options={getSelectDataFromObj(musicSheetAudioType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="可用声部" path="subjectId">
-                <NSelect
-                    placeholder="请选择可用声部"
-                    v-model:value={state.searchForm.subjectId}
-                    options={state.subjectList}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="曲目标签" path="musicTagIds">
-                <NSelect
-                    placeholder="请选择曲目标签"
-                    v-model:value={state.searchForm.musicTagIds}
-                    options={state.musicTagList}
-                    multiple
-                    maxTagCount={2}
-                    clearable
-                />
-              </NFormItem>
-              {/*<NFormItem*/}
-              {/*    label="可用途径"*/}
-              {/*    path="availableType"*/}
-              {/*>*/}
-              {/*  <NSelect*/}
-              {/*      placeholder="请选择可用途径"*/}
-              {/*      v-model:value={state.searchForm.availableType}*/}
-              {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
-              {/*      clearable*/}
-              {/*  >*/}
-              {/*  </NSelect>*/}
-              {/*</NFormItem>*/}
-              <NFormItem
-                  label="收费方式"
-                  path="paymentType"
-              >
-                <NSelect
-                    placeholder="请选择收费方式"
-                    v-model:value={state.searchForm.paymentType}
-                    options={getSelectDataFromObj(musicSheetPaymentType)}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="状态" path="status">
-                <NSelect
-                    v-model:value={state.searchForm.status}
-                    placeholder="请选择状态"
-                    options={
-                      [
-                        {
-                          label: '启用',
-                          value: true
-                        },
-                        {
-                          label: '停用',
-                          value: false
-                        }
-                      ] as any
+        <div class="system-menu-container">
+          <SaveForm
+            ref={saveForm}
+            model={state.searchForm}
+            onSubmit={onSubmit}
+            saveKey="music-sheet-klx"
+            onSetModel={(val: any) => (state.searchForm = val)}
+          >
+            <NFormItem label="关键词" path="keyword">
+              <NInput
+                placeholder="请输入曲目名称/编号"
+                v-model:value={state.searchForm.keyword}
+                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') {
+                    const { data } = await musicSheetApplicationOwnerList({
+                      page: 1,
+                      rows: 9999,
+                      sourceType: value,
+                      applicationId: state.appId
+                    })
+                    const temp = data.rows || []
+                    temp.forEach((next: any) => {
+                      state.userIdData.push({
+                        ...next,
+                        label: value === 'PERSON' ? next.userName : next.organizationRole,
+                        value: value === 'PERSON' ? next.userId : next.organizationRoleId
+                      })
+                    })
+                    state.userIdDisable = false
+                  } else {
+                    state.userIdDisable = true
+                  }
+                }}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="所属人" path="userId">
+              <NSelect
+                placeholder="请选择所属人"
+                disabled={state.userIdDisable}
+                v-model:value={state.searchForm.userId}
+                options={state.userIdData}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="曲目类型" path="subjectType">
+              <NSelect
+                placeholder="请选择曲目类型"
+                v-model:value={state.searchForm.musicSheetType}
+                options={getSelectDataFromObj(musicSheetType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="伴奏类型" path="audioType">
+              <NSelect
+                placeholder="请选择伴奏类型"
+                v-model:value={state.searchForm.audioType}
+                options={getSelectDataFromObj(musicSheetAudioType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="可用声部" path="subjectId">
+              <NSelect
+                placeholder="请选择可用声部"
+                v-model:value={state.searchForm.subjectId}
+                options={state.subjectList}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="曲目标签" path="musicTagIds">
+              <NSelect
+                placeholder="请选择曲目标签"
+                v-model:value={state.searchForm.musicTagIds}
+                options={state.musicTagList}
+                multiple
+                maxTagCount={2}
+                clearable
+              />
+            </NFormItem>
+            {/*<NFormItem*/}
+            {/*    label="可用途径"*/}
+            {/*    path="availableType"*/}
+            {/*>*/}
+            {/*  <NSelect*/}
+            {/*      placeholder="请选择可用途径"*/}
+            {/*      v-model:value={state.searchForm.availableType}*/}
+            {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
+            {/*      clearable*/}
+            {/*  >*/}
+            {/*  </NSelect>*/}
+            {/*</NFormItem>*/}
+            <NFormItem label="收费方式" path="paymentType">
+              <NSelect
+                placeholder="请选择收费方式"
+                v-model:value={state.searchForm.paymentType}
+                options={getSelectDataFromObj(musicSheetPaymentType)}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="状态" path="status">
+              <NSelect
+                v-model:value={state.searchForm.status}
+                placeholder="请选择状态"
+                options={
+                  [
+                    {
+                      label: '启用',
+                      value: true
+                    },
+                    {
+                      label: '停用',
+                      value: false
                     }
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="上传时间" path="authorFrom">
-                <NDatePicker
-                    v-model:value={state.searchForm.times}
-                    type="daterange"
-                    clearable
-                    value-format="yyyy.MM.dd"
-                    startPlaceholder="开始时间"
-                    endPlaceholder="结束时间"
-                />
-              </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/save1602302550719426561"
-                    onClick={() => {
-                      state.showAddDialog = true
-                    }}
-                >
-                  添加曲目
-                </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(false)
-                    }}
-                >
-                  批量停用
+                  ] as any
+                }
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="上传时间" path="authorFrom">
+              <NDatePicker
+                v-model:value={state.searchForm.times}
+                type="daterange"
+                clearable
+                value-format="yyyy.MM.dd"
+                startPlaceholder="开始时间"
+                endPlaceholder="结束时间"
+              />
+            </NFormItem>
+            <NFormItem>
+              <NSpace>
+                <NButton type="primary" onClick={onSearch}>
+                  搜索
                 </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(true)
-                    }}
-                >
-                  批量启用
+                <NButton type="default" onClick={onBtnReset}>
+                  重置
                 </NButton>
               </NSpace>
+            </NFormItem>
+          </SaveForm>
 
-              <NDataTable
-                  loading={state.loading}
-                  columns={columns()}
-                  data={state.dataList}
-                  rowKey={(row: any) => row.applicationExtendId}
-                  onUpdateCheckedRowKeys={handleCheck}
-                  scrollX={'1600'}
-              ></NDataTable>
+          <div class={['section-container']}>
+            <NSpace style={{ paddingBottom: '12px' }}>
+              <NButton
+                type="primary"
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  state.showAddDialog = true
+                }}
+              >
+                添加曲目
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(false)
+                }}
+              >
+                批量停用
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(true)
+                }}
+              >
+                批量启用
+              </NButton>
+            </NSpace>
 
-              <Pagination
-                  v-model:page={state.pagination.page}
-                  v-model:pageSize={state.pagination.rows}
-                  v-model:pageTotal={state.pagination.pageTotal}
-                  onList={getList}
-                  sync
-                  saveKey="music-sheet-klx"
-              ></Pagination>
-            </div>
+            <NDataTable
+              loading={state.loading}
+              columns={columns()}
+              data={state.dataList}
+              rowKey={(row: any) => row.applicationExtendId}
+              onUpdateCheckedRowKeys={handleCheck}
+              scrollX={'1600'}
+            ></NDataTable>
 
-            <NModal
-                v-model:show={state.showAddDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'添加曲目'}
-                style={{width: '1200px'}}
-            >
-              <AddMusic
-                  onClose={() => (state.showAddDialog = false)}
-                  onGetList={onSubmit}
-                  subjectList={state.subjectList}
-                  appId={state.appId}
-                  musicSheetTagList={state.musicTagList}
-              />
-            </NModal>
-            <NModal
-                v-model:show={state.showEditDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'修改曲目'}
-                style={{width: '500px'}}
-            >
-              <UpdateMusic
-                  onClose={() => (state.showEditDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  rowData={state.updateRow}
-                  appId={state.appId}
-                  musicSheetTagList={state.musicTagList}
-              />
-            </NModal>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="music-sheet-klx"
+            ></Pagination>
           </div>
+
+          <NModal
+            v-model:show={state.showAddDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'添加曲目'}
+            style={{ width: '1200px' }}
+          >
+            <AddMusic
+              onClose={() => (state.showAddDialog = false)}
+              onGetList={onSubmit}
+              subjectList={state.subjectList}
+              appId={state.appId}
+              musicSheetTagList={state.musicTagList}
+            />
+          </NModal>
+          <NModal
+            v-model:show={state.showEditDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'修改曲目'}
+            style={{ width: '500px' }}
+          >
+            <UpdateMusic
+              onClose={() => (state.showEditDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              rowData={state.updateRow}
+              appId={state.appId}
+              musicSheetTagList={state.musicTagList}
+            />
+          </NModal>
+        </div>
       )
     }
-
   }
-})
+})

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

@@ -1,12 +1,30 @@
-import {defineComponent, h, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
-import {DataTableColumns, DataTableRowKey, NButton, NCascader, NDataTable, NFormItem, NIcon, NImage, NInput, NInputNumber, NSelect, NSpace, NStep, NSteps, useDialog, useMessage} from "naive-ui";
-import Pagination from "@components/pagination";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {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";
+import { defineComponent, h, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
+import {
+  DataTableColumns,
+  DataTableRowKey,
+  NButton,
+  NCascader,
+  NDataTable,
+  NFormItem,
+  NIcon,
+  NImage,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NStep,
+  NSteps,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import Pagination from '@components/pagination'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { 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'
+import TheTooltip from '@/components/TheTooltip'
 
 export default defineComponent({
   name: 'kt-addMusic',
@@ -25,7 +43,7 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
-  setup(props, {slots, attrs, emit}) {
+  setup(props, { slots, attrs, emit }) {
     const dialogs = useDialog()
     const message = useMessage()
     const btnLoading = ref(false)
@@ -45,16 +63,16 @@ export default defineComponent({
         keyword: null,
         musicSheetType: null,
         subjectId: null,
-        sourceType: null,
+        sourceType: null
       },
       subjectList: [] as any,
       showAdd: false,
       currentStep: 1,
       dataList: [],
-      selectRowData: [] as any,// 选择的数据列表
+      selectRowData: [] as any, // 选择的数据列表
       musicSheetCategories: [] as any,
-      startSortNum: null as any,// 排序起始值
-      projectMusicCategoryId: null as any,// 曲目分类ID
+      startSortNum: null as any, // 排序起始值
+      projectMusicCategoryId: null as any // 曲目分类ID
     })
 
     onMounted(() => {
@@ -66,15 +84,14 @@ export default defineComponent({
     const getList = async () => {
       try {
         state.loading = true
-        const {data} = await musicSheetPage({
+        const { data } = await musicSheetPage({
           ...state.pagination,
           ...state.searchForm,
           addAppId: props.appId
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -94,15 +111,15 @@ export default defineComponent({
 
     const onSave = async () => {
       if (state.selectRowData.length == 0) {
-        message.error('未选择曲目');
-        return;
+        message.error('未选择曲目')
+        return
       }
-      const params = [] as any[];
+      const params = [] as any[]
       for (let i = 0; i < state.selectRowData.length; i++) {
-        const item = state.selectRowData[i];
+        const item = state.selectRowData[i]
         if (!item.projectMusicCategoryId) {
           message.error('乐谱教材不能为空')
-          return;
+          return
         }
         if (!item.sortNo) {
           item.sortNo = 0
@@ -117,14 +134,13 @@ export default defineComponent({
       }
       btnLoading.value = true
       try {
-        const res = await musicSheetApplicationExtendSaveBatch(params) as any
+        const res = (await musicSheetApplicationExtendSaveBatch(params)) as any
         if (res && res.code == '200') {
           message.success(`添加成功`)
           emit('getList')
           emit('close')
         }
-      } catch (err) {
-      }
+      } catch (err) {}
       btnLoading.value = false
     }
 
@@ -134,48 +150,52 @@ export default defineComponent({
       },
       {
         title: '曲目编号',
-        key: 'id',
+        key: 'id'
       },
       {
         title: '封面图',
         key: 'titleImg',
         render(row: any) {
-          return <NImage width={40} height={40} src={row.musicCover}/>
+          return <NImage width={40} height={40} src={row.musicCover} />
         }
       },
       {
         title: '声部',
-        key: 'subjectNames',
+        key: 'subjectNames'
       },
       {
         title: '曲目名称',
-        key: 'name',
+        key: 'name'
       },
       {
         title: '音乐人',
-        key: 'composer',
+        key: 'composer'
       },
       {
         title: '曲目类型',
         key: 'musicSheetType',
         render: (row: any) => {
-          return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+          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)));
+          return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
         }
       },
       {
         title: '所属人',
         key: 'userName',
         render: (row: any) => {
-          return <div>{getOwnerName(row.musicSheetExtend, row.sourceType)}</div>
+          return <TheTooltip content={getOwnerName(row.musicSheetExtend, row.sourceType)} />
         }
-      },
+      }
     ]
 
     const columns = (): any => {
@@ -183,63 +203,65 @@ export default defineComponent({
     }
 
     const stepColumns = (): DataTableColumns => {
-      const field = deepClone(columnsField);
+      const field = deepClone(columnsField)
       field.splice(0, 1)
       field.push({
         title(column: any) {
           return (
-              <NSpace>
-                乐谱教材
-                <NButton type="primary"
-                         size="small"
-                         text
-                         onClick={() => {
-                           dialogs.create({
-                             title: "请选择乐谱教材",
-                             showIcon: false,
-                             content: () => {
-                               return h(
-                                   "div",
-                                   {
-                                     class: "flex flex-col justify-center items-center text-14px",
-                                   },
-                                   [
-                                     // icon
-                                     h(NCascader, {
-                                       onUpdateValue(v) {
-                                         state.projectMusicCategoryId = v
-                                       },
-                                       valueField: 'id',
-                                       labelField: "name",
-                                       childrenField: 'children',
-                                       placeholderField: '请选择乐谱教材',
-                                       options: state.musicSheetCategories
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               for (let i = 0; i < state.selectRowData.length; i++) {
-                                 const item = state.selectRowData[i];
-                                 item.projectMusicCategoryId = state.projectMusicCategoryId
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              乐谱教材
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请选择乐谱教材',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NCascader, {
+                            onUpdateValue(v) {
+                              state.projectMusicCategoryId = v
+                            },
+                            valueField: 'id',
+                            labelField: 'name',
+                            childrenField: 'children',
+                            placeholderField: '请选择乐谱教材',
+                            options: state.musicSheetCategories
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      for (let i = 0; i < state.selectRowData.length; i++) {
+                        const item = state.selectRowData[i]
+                        item.projectMusicCategoryId = state.projectMusicCategoryId
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'projectMusicCategoryId',
         fixed: 'right',
@@ -247,75 +269,77 @@ export default defineComponent({
         render: (row: any) => {
           // })
           return (
-              <NCascader
-                  valueField="id"
-                  labelField="name"
-                  children-field="children"
-                  placeholder="请选择曲目分类"
-                  value={row.projectMusicCategoryId}
-                  options={state.musicSheetCategories}
-                  onUpdateValue={(value: any) => {
-                    row.projectMusicCategoryId = value
-                  }}
-                  clearable
-              />
+            <NCascader
+              valueField="id"
+              labelField="name"
+              children-field="children"
+              placeholder="请选择曲目分类"
+              value={row.projectMusicCategoryId}
+              options={state.musicSheetCategories}
+              onUpdateValue={(value: any) => {
+                row.projectMusicCategoryId = 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(NInputNumber, {
-                                       onUpdateValue(v) {
-                                         state.startSortNum = v
-                                       },
-                                       min: 0,
-                                       max: 9999,
-                                     }),
-                                   ]
-                               )
-                             },
-                             positiveText: "确定",
-                             negativeText: '取消',
-                             onPositiveClick: () => {
-                               if (state.startSortNum) {
-                                 for (let i = 0; i < state.selectRowData.length; i++) {
-                                   const item = state.selectRowData[i];
-                                   item.sortNo = state.startSortNum + i
-                                 }
-                               }
-                             },
-                           })
-                         }
-                         }
-                >
-                  <NIcon size={15} style="padding-left: 5px;margin-top:4px">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                      <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </NButton>
-              </NSpace>
+            <NSpace>
+              排序
+              <NButton
+                type="primary"
+                size="small"
+                text
+                onClick={() => {
+                  dialogs.create({
+                    title: '请输入排序起始值',
+                    showIcon: false,
+                    content: () => {
+                      return h(
+                        'div',
+                        {
+                          class: 'flex flex-col justify-center items-center text-14px'
+                        },
+                        [
+                          // icon
+                          h(NInputNumber, {
+                            onUpdateValue(v) {
+                              state.startSortNum = v
+                            },
+                            min: 0,
+                            max: 9999
+                          })
+                        ]
+                      )
+                    },
+                    positiveText: '确定',
+                    negativeText: '取消',
+                    onPositiveClick: () => {
+                      if (state.startSortNum) {
+                        for (let i = 0; i < state.selectRowData.length; i++) {
+                          const item = state.selectRowData[i]
+                          item.sortNo = state.startSortNum + i
+                        }
+                      }
+                    }
+                  })
+                }}
+              >
+                <NIcon size={15} style="padding-left: 5px;margin-top:4px">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                    <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                    <path
+                      d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                      fill="currentColor"
+                    ></path>
+                  </svg>
+                </NIcon>
+              </NButton>
+            </NSpace>
           )
-
         },
         key: 'sortNo',
         fixed: 'right',
@@ -338,49 +362,48 @@ export default defineComponent({
         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 {
+            <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)
                         }
-                      })
-                    }}
-                >
-                  移除
-                </NButton>
-              </NSpace>
+                        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;
+      return field
     }
 
     const checkedRowKeysRef = ref<DataTableRowKey[]>([])
@@ -391,7 +414,7 @@ export default defineComponent({
         if (checkedRowKeysRef.value.includes(next.id)) {
           const find = state.selectRowData.find((row: any) => {
             return row.id === next.id
-          });
+          })
           if (!find) {
             state.selectRowData.push(next)
           }
@@ -406,142 +429,138 @@ export default defineComponent({
 
     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"}
+        <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)}
               >
-                <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}
-                  ></NDataTable>
-                </div>
-            )}
-            <NSpace justify="end" style={"margin-top:10px"}>
-              <NButton type="default" onClick={() => {
+                <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}
+              ></NDataTable>
+            </div>
+          )}
+          <NSpace justify="end" style={'margin-top:10px'}>
+            <NButton
+              type="default"
+              onClick={() => {
                 if (state.currentStep > 1) {
-                  state.currentStep = 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>
+              }}
+            >
+              {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>
       )
     }
   }
-})
+})

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

@@ -1,5 +1,5 @@
-import {defineComponent, onMounted, reactive, ref} from "vue";
-import SaveForm from "@components/save-form";
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import SaveForm from '@components/save-form'
 import {
   DataTableRowKey,
   NButton,
@@ -17,19 +17,24 @@ import {
   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/kt/addMusic";
-import UpdateMusic from "@views/music-library/project-music-sheet/module/kt/updateMusic";
-import {musicSheetApplicationExtendCategoryList, musicSheetApplicationExtendStatus, musicSheetApplicationOwnerList, musicSheetPageByApplication} from "@views/music-library/api";
-import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
-import {musicSheetAudioType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {sysApplicationPage} from "@views/menu-manage/api";
-import {musicSheetApplicationExtendSubjectList} from "@views/system-manage/api";
-import {filterTimes} from "@/utils/dateUtil";
-import deepClone from "@/utils/deep.clone";
-import {getOwnerName} from "@views/music-library/musicUtil";
+} from 'naive-ui'
+import Pagination from '@components/pagination'
+import TheTooltip from '@components/TheTooltip'
+import AddMusic from '@views/music-library/project-music-sheet/module/kt/addMusic'
+import UpdateMusic from '@views/music-library/project-music-sheet/module/kt/updateMusic'
+import {
+  musicSheetApplicationExtendCategoryList,
+  musicSheetApplicationExtendStatus,
+  musicSheetApplicationOwnerList,
+  musicSheetPageByApplication
+} from '@views/music-library/api'
+import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
+import { musicSheetAudioType, musicSheetSourceType, musicSheetType } from '@/utils/constant'
+import { sysApplicationPage } from '@views/menu-manage/api'
+import { musicSheetApplicationExtendSubjectList } from '@views/system-manage/api'
+import { filterTimes } from '@/utils/dateUtil'
+import deepClone from '@/utils/deep.clone'
+import { getOwnerName } from '@views/music-library/musicUtil'
 
 export default defineComponent({
   name: 'project-music-sheet-KT',
@@ -70,7 +75,7 @@ export default defineComponent({
         topFlag: null, //是否置顶(0:否;1:是)
         availableType: null, //可用途径 ORG 机构 PLATFORM 平台
         appAuditFlag: null, //是否审核版本
-        detailFlag: null, //是否查询详情
+        detailFlag: null //是否查询详情
       },
       subjectList: [],
       dataList: [] as any[],
@@ -80,50 +85,46 @@ export default defineComponent({
       userIdDisable: true,
       userIdData: [] as any,
       updateRow: {} as any, // 修改选择的行
-      applicationId: null, //应用ID
+      applicationId: null //应用ID
     })
 
     onMounted(async () => {
       state.loading = true
-      // 获取应用APP信息
-      {
-        const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: props.appKey})
-        const tempList = data.rows || []
-        if (!tempList || tempList.length == 0) {
+
+      // 加载声部
+
+      try {
+        // 获取应用APP信息
+        const appRes = await sysApplicationPage({ page: 1, rows: 1, appKey: props.appKey })
+        const appTempList = appRes.data.rows || []
+        if (!appTempList || appTempList.length == 0) {
           state.loading = false
-          message.error("加载项目信息失败");
+          message.error('加载项目信息失败')
           return
         }
-        state.appId = tempList[0].id
-        state.applicationId = tempList[0].id
-      }
+        state.appId = appTempList[0].id
+        state.applicationId = appTempList[0].id
+        const { data } = await musicSheetApplicationExtendSubjectList({
+          applicationId: state.applicationId
+        })
+        const tempList = data || []
+        tempList.forEach((item: any) => {
+          item.label = item.subjectName
+          item.value = item.subjectId
+        })
+        state.subjectList = tempList
 
-      // 加载声部
-      {
-        try {
-          const {data} = await musicSheetApplicationExtendSubjectList({applicationId: state.applicationId})
-          const tempList = data || []
-          tempList.forEach((item: any) => {
-            item.label = item.subjectName
-            item.value = item.subjectId
-          })
-          state.subjectList = tempList
-        } catch {
-        }
-      }
+        //加载曲目分类列表
 
-      //加载曲目分类列表
-      {
-        const {data} = await musicSheetApplicationExtendCategoryList({applicationIds: state.appId})
-        if (data && data.length > 0) {
-          state.musicSheetCategories = data[0].musicSheetCategories
+        const categoryRes = await musicSheetApplicationExtendCategoryList({
+          applicationIds: state.appId
+        })
+        if (categoryRes.data && categoryRes.data.length > 0) {
+          state.musicSheetCategories = categoryRes.data[0].musicSheetCategories
         }
-      }
-
+      } catch {}
       // 加载表格数据
-      {
-        getList()
-      }
+      getList()
     })
 
     const saveForm = ref()
@@ -146,16 +147,16 @@ export default defineComponent({
     }
 
     const getList = async () => {
+      state.loading = true
       try {
-        state.loading = true
         const sourceType = state.searchForm.sourceType
-        let userId = state.searchForm.userId;
-        let organizationRoleId = null;
+        let userId = state.searchForm.userId
+        let organizationRoleId = null
         if (sourceType && sourceType === 'ORG') {
           organizationRoleId = deepClone(userId)
           userId = null
         }
-        const {data} = await musicSheetPageByApplication({
+        const { data } = await musicSheetPageByApplication({
           ...state.pagination,
           ...state.searchForm,
           userId: userId,
@@ -165,8 +166,7 @@ export default defineComponent({
         })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
@@ -185,17 +185,15 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
 
-
     const onBatchChangeStatus = (status: boolean) => {
-      const length = checkedRowKeysRef.value.length;
+      const length = checkedRowKeysRef.value.length
       if (length == 0) {
-        message.warning("未选择数据")
+        message.warning('未选择数据')
       }
       const statusStr = !status ? '停用' : '启用'
       dialog.warning({
@@ -211,8 +209,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -226,49 +223,59 @@ export default defineComponent({
           title: '曲目信息',
           key: 'id',
           render: (row: any) => (
-              <>
-                <NDescriptions labelPlacement="left" column={1}>
-                  <NDescriptionsItem label="曲目名称">
-                    <TheTooltip content={row.name}/>{' '}
-                  </NDescriptionsItem>
-                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
-                </NDescriptions>
-              </>
+            <>
+              <NDescriptions labelPlacement="left" column={1}>
+                <NDescriptionsItem label="曲目名称">
+                  <TheTooltip content={row.name} />{' '}
+                </NDescriptionsItem>
+                <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
+              </NDescriptions>
+            </>
           )
         },
         {
           title: '曲目来源',
           key: 'musicSheetCategoriesName',
           render: (row: any) => (
-              <>
-                <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>
-              </>
+            <>
+              <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: 'musicCover',
           render(row: any): JSX.Element {
-            return <NImage width={60} height={60} src={row.musicCover}/>
+            return <NImage width={60} height={60} src={row.musicCover} />
           }
         },
         {
           title: '曲目类型',
           key: 'musicSheetType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}
+              </div>
+            )
           }
         },
         {
           title: '伴奏类型',
           key: 'audioType',
           render: (row: any) => {
-            return <div>{getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}</div>
+            return (
+              <div>
+                {getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}
+              </div>
+            )
           }
         },
         {
@@ -306,7 +313,7 @@ export default defineComponent({
           key: 'status',
           render(row: any) {
             return (
-                <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
+              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
             )
           }
         },
@@ -316,29 +323,29 @@ export default defineComponent({
           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.showEditDialog = true
-                        state.updateRow = row
-                      }}
-                  >
-                    修改
-                  </NButton>
-                </NSpace>
+              <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.showEditDialog = true
+                    state.updateRow = row
+                  }}
+                >
+                  修改
+                </NButton>
+              </NSpace>
             )
           }
         }
@@ -347,235 +354,238 @@ export default defineComponent({
 
     return () => {
       return (
-          <div class="system-menu-container">
-            <SaveForm
-                ref={saveForm}
-                model={state.searchForm}
-                onSubmit={onSubmit}
-                saveKey="music-sheet-kt"
-                onSetModel={(val: any) => (state.searchForm = val)}
-            >
-
-              <NFormItem label="关键词" path="keyword">
-                <NInput
-                    placeholder="请输入曲目名称/编号"
-                    v-model:value={state.searchForm.keyword}
-                    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') {
-                        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
-                        const temp = data.rows || []
-                        temp.forEach((next: any) => {
-                          state.userIdData.push({
-                            ...next,
-                            label: value === 'PERSON' ? next.userName : next.organizationRole,
-                            value: value === 'PERSON' ? next.userId : next.organizationRoleId
-                          })
-                        })
-                        state.userIdDisable = false
-                      } else {
-                        state.userIdDisable = true
-                      }
-                    }}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="所属人" path="userId">
-                <NSelect
-                    filterable={true}
-                    placeholder="请选择所属人"
-                    disabled={state.userIdDisable}
-                    v-model:value={state.searchForm.userId}
-                    options={state.userIdData}
-                    clearable
-                >
-                </NSelect>
-              </NFormItem>
-              <NFormItem label="曲目类型" path="subjectType">
-                <NSelect
-                    placeholder="请选择曲目类型"
-                    v-model:value={state.searchForm.musicSheetType}
-                    options={getSelectDataFromObj(musicSheetType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="伴奏类型" path="audioType">
-                <NSelect
-                    placeholder="请选择伴奏类型"
-                    v-model:value={state.searchForm.audioType}
-                    options={getSelectDataFromObj(musicSheetAudioType)}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="可用声部" path="subjectId">
-                <NSelect
-                    placeholder="请选择可用声部"
-                    v-model:value={state.searchForm.subjectId}
-                    options={state.subjectList}
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="乐谱教材" path="musicCategoryId">
-                <NCascader
-                    valueField="id"
-                    labelField="name"
-                    children-field="children"
-                    placeholder="请选择乐谱教材"
-                    v-model:value={state.searchForm.musicCategoryId}
-                    options={state.musicSheetCategories}
-                    clearable
-                />
-              </NFormItem>
-              {/*<NFormItem*/}
-              {/*    label="可用途径"*/}
-              {/*    path="availableType"*/}
-              {/*>*/}
-              {/*  <NSelect*/}
-              {/*      placeholder="请选择可用途径"*/}
-              {/*      v-model:value={state.searchForm.availableType}*/}
-              {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
-              {/*      clearable*/}
-              {/*  >*/}
-              {/*  </NSelect>*/}
-              {/*</NFormItem>*/}
-              <NFormItem label="状态" path="status">
-                <NSelect
-                    v-model:value={state.searchForm.status}
-                    placeholder="请选择状态"
-                    options={
-                      [
-                        {
-                          label: '启用',
-                          value: true
-                        },
-                        {
-                          label: '停用',
-                          value: false
-                        }
-                      ] as any
+        <div class="system-menu-container">
+          <SaveForm
+            ref={saveForm}
+            model={state.searchForm}
+            onSubmit={onSubmit}
+            saveKey="music-sheet-kt"
+            onSetModel={(val: any) => (state.searchForm = val)}
+          >
+            <NFormItem label="关键词" path="keyword">
+              <NInput
+                placeholder="请输入曲目名称/编号"
+                v-model:value={state.searchForm.keyword}
+                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') {
+                    const { data } = await musicSheetApplicationOwnerList({
+                      page: 1,
+                      rows: 9999,
+                      sourceType: value,
+                      applicationId: state.appId
+                    })
+                    const temp = data.rows || []
+                    temp.forEach((next: any) => {
+                      state.userIdData.push({
+                        ...next,
+                        label: value === 'PERSON' ? next.userName : next.organizationRole,
+                        value: value === 'PERSON' ? next.userId : next.organizationRoleId
+                      })
+                    })
+                    state.userIdDisable = false
+                  } else {
+                    state.userIdDisable = true
+                  }
+                }}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="所属人" path="userId">
+              <NSelect
+                filterable={true}
+                placeholder="请选择所属人"
+                disabled={state.userIdDisable}
+                v-model:value={state.searchForm.userId}
+                options={state.userIdData}
+                clearable
+              ></NSelect>
+            </NFormItem>
+            <NFormItem label="曲目类型" path="subjectType">
+              <NSelect
+                placeholder="请选择曲目类型"
+                v-model:value={state.searchForm.musicSheetType}
+                options={getSelectDataFromObj(musicSheetType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="伴奏类型" path="audioType">
+              <NSelect
+                placeholder="请选择伴奏类型"
+                v-model:value={state.searchForm.audioType}
+                options={getSelectDataFromObj(musicSheetAudioType)}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="可用声部" path="subjectId">
+              <NSelect
+                placeholder="请选择可用声部"
+                v-model:value={state.searchForm.subjectId}
+                options={state.subjectList}
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="乐谱教材" path="musicCategoryId">
+              <NCascader
+                valueField="id"
+                labelField="name"
+                children-field="children"
+                placeholder="请选择乐谱教材"
+                v-model:value={state.searchForm.musicCategoryId}
+                options={state.musicSheetCategories}
+                clearable
+              />
+            </NFormItem>
+            {/*<NFormItem*/}
+            {/*    label="可用途径"*/}
+            {/*    path="availableType"*/}
+            {/*>*/}
+            {/*  <NSelect*/}
+            {/*      placeholder="请选择可用途径"*/}
+            {/*      v-model:value={state.searchForm.availableType}*/}
+            {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
+            {/*      clearable*/}
+            {/*  >*/}
+            {/*  </NSelect>*/}
+            {/*</NFormItem>*/}
+            <NFormItem label="状态" path="status">
+              <NSelect
+                v-model:value={state.searchForm.status}
+                placeholder="请选择状态"
+                options={
+                  [
+                    {
+                      label: '启用',
+                      value: true
+                    },
+                    {
+                      label: '停用',
+                      value: false
                     }
-                    clearable
-                />
-              </NFormItem>
-              <NFormItem label="上传时间" path="authorFrom">
-                <NDatePicker
-                    v-model:value={state.searchForm.times}
-                    type="daterange"
-                    clearable
-                    value-format="yyyy.MM.dd"
-                    startPlaceholder="开始时间"
-                    endPlaceholder="结束时间"
-                />
-              </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/save1602302550719426561"
-                    onClick={() => {
-                      state.showAddDialog = true
-                    }}
-                >
-                  添加曲目
-                </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(false)
-                    }}
-                >
-                  批量停用
+                  ] as any
+                }
+                clearable
+              />
+            </NFormItem>
+            <NFormItem label="上传时间" path="authorFrom">
+              <NDatePicker
+                v-model:value={state.searchForm.times}
+                type="daterange"
+                clearable
+                value-format="yyyy.MM.dd"
+                startPlaceholder="开始时间"
+                endPlaceholder="结束时间"
+              />
+            </NFormItem>
+            <NFormItem>
+              <NSpace>
+                <NButton type="primary" onClick={onSearch}>
+                  搜索
                 </NButton>
-                <NButton
-                    disabled={checkedRowKeysRef.value.length == 0}
-                    //v-auth="musicSheet/save1602302550719426561"
-                    onClick={() => {
-                      onBatchChangeStatus(true)
-                    }}
-                >
-                  批量启用
+                <NButton type="default" onClick={onBtnReset}>
+                  重置
                 </NButton>
               </NSpace>
+            </NFormItem>
+          </SaveForm>
 
-              <NDataTable
-                  loading={state.loading}
-                  columns={columns()}
-                  data={state.dataList}
-                  rowKey={(row: any) => row.applicationExtendId}
-                  onUpdateCheckedRowKeys={handleCheck}
-                  scrollX={'1600'}
-              ></NDataTable>
+          <div class={['section-container']}>
+            <NSpace style={{ paddingBottom: '12px' }}>
+              <NButton
+                type="primary"
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  state.showAddDialog = true
+                }}
+              >
+                添加曲目
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(false)
+                }}
+              >
+                批量停用
+              </NButton>
+              <NButton
+                disabled={checkedRowKeysRef.value.length == 0}
+                //v-auth="musicSheet/save1602302550719426561"
+                onClick={() => {
+                  onBatchChangeStatus(true)
+                }}
+              >
+                批量启用
+              </NButton>
+            </NSpace>
 
-              <Pagination
-                  v-model:page={state.pagination.page}
-                  v-model:pageSize={state.pagination.rows}
-                  v-model:pageTotal={state.pagination.pageTotal}
-                  onList={getList}
-                  sync
-                  saveKey="music-sheet-kt"
-              ></Pagination>
-            </div>
+            <NDataTable
+              loading={state.loading}
+              columns={columns()}
+              data={state.dataList}
+              rowKey={(row: any) => row.applicationExtendId}
+              onUpdateCheckedRowKeys={handleCheck}
+              scrollX={'1600'}
+            ></NDataTable>
 
-            <NModal
-                v-model:show={state.showAddDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'添加曲目'}
-                style={{width: '1200px'}}
-            >
-              <AddMusic
-                  onClose={() => (state.showAddDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  subjectList={state.subjectList}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
-            <NModal
-                v-model:show={state.showEditDialog}
-                preset="dialog"
-                showIcon={false}
-                title={'修改曲目'}
-                style={{width: '500px'}}
-            >
-              <UpdateMusic
-                  onClose={() => (state.showEditDialog = false)}
-                  onGetList={() => {
-                    state.pagination.page = 1
-                    getList()
-                  }}
-                  rowData={state.updateRow}
-                  appId={state.appId}
-                  musicSheetCategories={state.musicSheetCategories}
-              />
-            </NModal>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="music-sheet-kt"
+            ></Pagination>
           </div>
+
+          <NModal
+            v-model:show={state.showAddDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'添加曲目'}
+            style={{ width: '1200px' }}
+          >
+            <AddMusic
+              onClose={() => (state.showAddDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              subjectList={state.subjectList}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+          <NModal
+            v-model:show={state.showEditDialog}
+            preset="dialog"
+            showIcon={false}
+            title={'修改曲目'}
+            style={{ width: '500px' }}
+          >
+            <UpdateMusic
+              onClose={() => (state.showEditDialog = false)}
+              onGetList={() => {
+                state.pagination.page = 1
+                getList()
+              }}
+              rowData={state.updateRow}
+              appId={state.appId}
+              musicSheetCategories={state.musicSheetCategories}
+            />
+          </NModal>
+        </div>
       )
     }
   }
-})
+})

src/views/system-manage/subject-manage/subject/modal/subject-save.tsx

@@ -1,8 +1,12 @@
-import {NButton, NForm, NFormItem, NInput, NSelect, NSpace, useMessage} from 'naive-ui'
-import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
-import {subjectUpdate, subjectSave, musicalInstrumentQueryNotRelated} from "@views/system-manage/subject-manage/api";
-import UploadFile from "@components/upload-file";
-import deepClone from "@/utils/deep.clone";
+import { NButton, NForm, NFormItem, NInput, NSelect, NSpace, useMessage } from 'naive-ui'
+import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
+import {
+  subjectUpdate,
+  subjectSave,
+  musicalInstrumentQueryNotRelated
+} from '@views/system-manage/subject-manage/api'
+import UploadFile from '@components/upload-file'
+import deepClone from '@/utils/deep.clone'
 
 export default defineComponent({
   name: 'role-operation',
@@ -13,8 +17,7 @@ export default defineComponent({
     },
     data: {
       type: Object as PropType<any>,
-      default: () => {
-      }
+      default: () => {}
     },
     categoryList: {
       type: Object as PropType<any>,
@@ -26,18 +29,18 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
-  setup(props, {slots, attrs, emit}) {
+  setup(props, { slots, attrs, emit }) {
     const state = reactive({
       forms: {
         categoryId: null,
         name: null,
         img: null,
         code: null,
-        musicalInstrumentIds: [] as any,
+        musicalInstrumentIds: [] as any
       },
       rowData: {},
       categoryList: [],
-      instrumentList: [] as any,
+      instrumentList: [] as any
     })
     const btnLoading = ref(false)
     const formsRef = ref()
@@ -68,8 +71,7 @@ export default defineComponent({
 
           emit('close')
           emit('getList')
-        } catch {
-        }
+        } catch {}
         btnLoading.value = false
       })
     }
@@ -88,7 +90,7 @@ export default defineComponent({
         state.forms.name = data.name
         state.forms.img = data.img
         state.forms.code = data.code
-        state.forms.musicalInstrumentIds = data.musicalInstrumentIds?.split(',') || [];
+        state.forms.musicalInstrumentIds = data.musicalInstrumentIds?.split(',') || []
         props.instrumentList.forEach((next: any) => {
           if (state.forms.musicalInstrumentIds.includes(next.value + '')) {
             state.instrumentList.push({
@@ -96,8 +98,7 @@ export default defineComponent({
               value: next.value
             })
           }
-
-        });
+        })
       } else {
         state.categoryList = state.categoryList.filter((next: any) => {
           return next.enableFlag == true
@@ -105,7 +106,7 @@ export default defineComponent({
       }
       // 查询未关联声部的乐器
       {
-        const {data} = await musicalInstrumentQueryNotRelated({});
+        const { data } = await musicalInstrumentQueryNotRelated({})
         data.forEach((next: any) => {
           state.instrumentList.push({
             label: next.name,
@@ -117,122 +118,120 @@ export default defineComponent({
     })
 
     return () => (
-        <div style="background: #fff; padding-top: 12px">
-          <NForm
-              model={state.forms}
-              ref={formsRef}
-              label-placement="left"
-              label-width="auto">
-            <NFormItem
-                label="声部分类"
-                path="categoryId"
-                rule={[
-                  {
-                    required: true,
-                    message: '请选择声部分类'
-                  }
-                ]}
-            >
-              <NSelect
-                  clearable
-                  v-model:value={state.forms.categoryId}
-                  placeholder="请选择声部分类"
-                  options={state.categoryList as any}
-                  filterable
-              />
-            </NFormItem>
-            <NFormItem
-                label="声部名称"
-                path="name"
-                rule={[
-                  {
-                    required: true,
-                    message: '请输入声部名称'
-                  }
-                ]}
-            >
-              <NInput
-                  v-model:value={state.forms.name}
-                  placeholder="请输入声部名称"
-                  clearable
-                  maxlength={10}
-                  showCount
-              ></NInput>
-            </NFormItem>
-            <NFormItem
-                label="声部编码"
-                path="code"
-                rule={[
-                  {
-                    required: true,
-                    message: '请输入声部编码'
-                  }
-                ]}
-            >
-              <NInput
-                  v-model:value={state.forms.code}
-                  placeholder="请输入声部名称"
-                  clearable
-                  maxlength={10}
-                  showCount
-              ></NInput>
-            </NFormItem>
-            <NFormItem
-                label="声部图片"
-                path="img"
-                rule={[
-                  {
-                    required: true,
-                    message: '请输入声部图片'
-                  }
-                ]}
-            >
-              <UploadFile
-                  accept=".jpg,.jpeg,.png"
-                  tips="请上传大小1M以内的JPG、PNG图片"
-                  v-model:fileList={state.forms.img}
-                  cropper
-                  bucketName="cbs"
-                  options={{
-                    autoCrop: true, //是否默认生成截图框
-                    enlarge: 2, //  图片放大倍数
-                    autoCropWidth: 200, //默框高度
-                    fixedBox: true, //是否固定截图框大认生成截图框宽度
-                    autoCropHeight: 200, //默认生成截图小 不允许改变
-                    previewsCircle: false, //预览图是否是原圆形
-                    title: '声部图片'
-                  }}
-              />
-            </NFormItem>
-            <NFormItem
-                label="关联乐器"
-                path="musicalInstrumentIds"
-                rule={[
-                  {
-                    required: false,
-                    message: '请选择关联乐器'
-                  }
-                ]}
-            >
-              <NSelect
-                  multiple
-                  clearable
-                  v-model:value={state.forms.musicalInstrumentIds}
-                  placeholder="请选择关联乐器"
-                  options={state.instrumentList as any}
-              />
-            </NFormItem>
-          </NForm>
+      <div style="background: #fff; padding-top: 12px">
+        <NForm model={state.forms} ref={formsRef} label-placement="left" label-width="auto">
+          <NFormItem
+            label="声部分类"
+            path="categoryId"
+            rule={[
+              {
+                required: true,
+                message: '请选择声部分类',
+                trigger: ['change'],
+                type: 'number'
+              }
+            ]}
+          >
+            <NSelect
+              clearable
+              v-model:value={state.forms.categoryId}
+              placeholder="请选择声部分类"
+              options={state.categoryList as any}
+              filterable
+            />
+          </NFormItem>
+          <NFormItem
+            label="声部名称"
+            path="name"
+            rule={[
+              {
+                required: true,
+                message: '请输入声部名称'
+              }
+            ]}
+          >
+            <NInput
+              v-model:value={state.forms.name}
+              placeholder="请输入声部名称"
+              clearable
+              maxlength={10}
+              showCount
+            ></NInput>
+          </NFormItem>
+          <NFormItem
+            label="声部编码"
+            path="code"
+            rule={[
+              {
+                required: true,
+                message: '请输入声部编码'
+              }
+            ]}
+          >
+            <NInput
+              v-model:value={state.forms.code}
+              placeholder="请输入声部名称"
+              clearable
+              maxlength={10}
+              showCount
+            ></NInput>
+          </NFormItem>
+          <NFormItem
+            label="声部图片"
+            path="img"
+            rule={[
+              {
+                required: true,
+                message: '请输入声部图片'
+              }
+            ]}
+          >
+            <UploadFile
+              accept=".jpg,.jpeg,.png"
+              tips="请上传大小1M以内的JPG、PNG图片"
+              v-model:fileList={state.forms.img}
+              cropper
+              bucketName="cbs"
+              options={{
+                autoCrop: true, //是否默认生成截图框
+                enlarge: 2, //  图片放大倍数
+                autoCropWidth: 200, //默框高度
+                fixedBox: true, //是否固定截图框大认生成截图框宽度
+                autoCropHeight: 200, //默认生成截图小 不允许改变
+                previewsCircle: false, //预览图是否是原圆形
+                title: '声部图片'
+              }}
+            />
+          </NFormItem>
+          <NFormItem
+            label="关联乐器"
+            path="musicalInstrumentIds"
+            rule={[
+              {
+                required: false,
+                message: '请选择关联乐器'
+              }
+            ]}
+          >
+            <NSelect
+              multiple
+              clearable
+              v-model:value={state.forms.musicalInstrumentIds}
+              placeholder="请选择关联乐器"
+              options={state.instrumentList as any}
+            />
+          </NFormItem>
+        </NForm>
 
-          <NSpace justify="end">
-            <NButton type="default" onClick={() => emit('close')}>
-              取消
-            </NButton>
-            <NButton type="primary" onClick={() => onSubmit()} loading={btnLoading.value}>
-              保存
-            </NButton>
-          </NSpace>
-        </div>
+        <NSpace justify="end">
+          <NButton type="default" onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton type="primary" onClick={() => onSubmit()} loading={btnLoading.value}>
+            保存
+          </NButton>
+        </NSpace>
+      </div>
     )
   }
 })

src/views/teaching-manage/unit-test/index.module.less

@@ -2,6 +2,7 @@
   .form {
     :global {
       .n-form-item-blank {
+
         .n-input,
         .n-select {
           width: 160px;
@@ -10,37 +11,45 @@
     }
   }
 }
+
 .kaodian {
   :global {
     .n-base-selection-input {
       color: #333 !important;
     }
+
     .n-base-loading.n-base-suffix {
       display: none;
     }
   }
 }
+
 .coustomBank {
   :global {
     .n-tabs-nav {
       display: none;
     }
+
     .n-tab-pane {
       padding-top: 0;
     }
   }
 }
+
 .answerItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
+
   &:hover {
     background-color: rgba(0, 0, 0, 0.1);
   }
+
   .handle {
     width: 50px;
   }
+
   .itemContent {
     flex: 1;
     padding: 0 50px 0 0;
@@ -48,35 +57,43 @@
     align-items: center;
   }
 }
+
 .juanWrap {
   margin-bottom: 20px;
 }
+
 .unit-test-index-editAndUpdate {
   .ramdomItem {
     position: relative;
     border-radius: 8px;
-    padding: 10px 10px 0 10px;
+    padding: 30px 10px 0px 10px;
+
     :global {
       .n-form-item-label {
         display: flex;
         flex-direction: row;
         align-items: center;
       }
+
       .n-form-item-label__asterisk {
         display: none;
       }
     }
+
     .kaoLabel {
       span {
         color: var(--n-asterisk-color);
       }
     }
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1);
+
       .delIcon {
         visibility: visible;
       }
     }
+
     .delIcon {
       position: absolute;
       right: 10px;
@@ -84,4 +101,4 @@
       visibility: hidden;
     }
   }
-}
+}

src/views/teaching-manage/unit-test/unit-test-index/editAndUpdate.tsx

@@ -86,7 +86,7 @@ export default defineComponent({
     const gotoBack = () => {
       tabsViewStore.closeCurrentTab(route)
       router.push({
-        path: '/unitTest'
+        path: '/educationalManage/unitExamination'
       })
     }
     /**获取考点类型 */
@@ -577,6 +577,7 @@ export default defineComponent({
                                 default: () => (
                                   <NSelect
                                     multiple
+                                    clearable
                                     options={questions}
                                     v-model:value={item.questionTypeCodes}
                                   />
@@ -602,7 +603,7 @@ export default defineComponent({
                       )
                     })}
                   </NForm>
-                  <NSpace style={{ padding: '0 10px 0 10px' }}>
+                  <NSpace style={{ padding: '10px 10px 0 10px' }}>
                     <NButton
                       type="warning"
                       style={{ width: '170px' }}