Merge branch 'develop'

# Conflicts:
#	src/views/music-library/music-sheet/modal/music-operation.tsx

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.module.less

@@ -0,0 +1,17 @@
+.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/component/music-list.tsx

@@ -1,22 +1,46 @@
 import SaveForm from '@/components/save-form'
 import Pagination from '@/components/pagination'
-import {DataTableRowKey, NButton, NDataTable, NFormItem, NIcon, NImage, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage} from 'naive-ui'
-import {defineComponent, onMounted, reactive, ref, watch} from 'vue'
-import {musicSheetApplicationOwnerList, musicSheetPage, musicSheetRemove, musicSheetStatusList, musicTagPage} from '../../api'
+import {
+  DataTableRowKey,
+  NButton,
+  NDataTable,
+  NFormItem,
+  NIcon,
+  NImage,
+  NInput,
+  NModal,
+  NSelect,
+  NSpace,
+  NTag,
+  useDialog,
+  useMessage
+} from 'naive-ui'
+import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import {
+  musicSheetApplicationOwnerList,
+  musicSheetPage,
+  musicSheetRemove,
+  musicSheetImg,
+  musicSheetStatusList,
+  musicTagPage
+} from '../../api'
 import MusicOperation from '../modal/music-operation'
-import {subjectPage} from '@/views/system-manage/api'
+import { subjectPage } from '@/views/system-manage/api'
 import MusicPreView from '../modal/musicPreView'
-import UseProject from "@views/music-library/music-sheet/modal/use-project";
-import {getMapValueByKey} from "@/utils/filters";
-import {appKey, musicSheetSourceType, musicSheetType} from "@/utils/constant";
-import {getSelectDataFromObj} from "@/utils/objectUtil";
-import {sysApplicationPage} from "@views/menu-manage/api";
-import {getOwnerName} from "@views/music-library/musicUtil";
+import UseProject from '@views/music-library/music-sheet/modal/use-project'
+import { getMapValueByKey } from '@/utils/filters'
+import { appKey, musicSheetSourceType, musicSheetType } from '@/utils/constant'
+import { getSelectDataFromObj } from '@/utils/objectUtil'
+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',
   props: ['searchId'],
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const dialog = useDialog()
     const message = useMessage()
     const state = reactive({
@@ -36,7 +60,7 @@ export default defineComponent({
         useAppId: null, //适用项目ID
         status: null, //曲目状态（0：停用，1：启用）
         appAuditFlag: null, //是否审核版本
-        categoriesId: null, //是否审核版本
+        categoriesId: null //是否审核版本
       },
       dataList: [] as any,
       subjectList: [] as any,
@@ -53,6 +77,8 @@ export default defineComponent({
       detailReadonly: false, // 新增、修改、详情是否可编辑
       userIdDisable: true, // 所属人
       userIdData: [] as any, // 所属人数据列表
+      productOpen: false,
+      productItem: {} as any
     })
 
     const columns = (): any => {
@@ -74,7 +100,7 @@ export default defineComponent({
           title: '封面图',
           key: 'titleImg',
           render(row: any): JSX.Element {
-            return <NImage width={60} height={60} src={row.musicCover}/>
+            return <NImage width={60} height={60} src={row.musicCover} />
           }
         },
         {
@@ -87,21 +113,21 @@ export default defineComponent({
           minWidth: '100px',
           key: 'musicSheetType',
           render(row: any) {
-            return getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)));
+            return getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))
           }
         },
         {
           title: '可用声部',
           minWidth: '100px',
           maxWidth: '300px',
-          key: 'subjectNames',
+          key: 'subjectNames'
         },
         {
           title: '作者属性',
           minWidth: '100px',
           key: 'sourceType',
           render(row: any) {
-            return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)));
+            return getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))
           }
         },
         {
@@ -136,25 +162,31 @@ export default defineComponent({
           key: 'projectName',
           render(row: any) {
             return (
-                <NSpace>
-                  <NButton type="primary"
-                           size="small"
-                           text
-                           onClick={() => {
-                             state.showUseProject = true
-                             state.showUseProjectId = row.id
-                           }}
-                  >
-                    {row.musicSheetExtend && row.musicSheetExtend.useApplicationNames ? row.musicSheetExtend.useApplicationNames : ""}
+              <NSpace>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.showUseProject = true
+                    state.showUseProjectId = row.id
+                  }}
+                >
+                  {row.musicSheetExtend && row.musicSheetExtend.useApplicationNames
+                    ? row.musicSheetExtend.useApplicationNames
+                    : ''}
 
-                    <NIcon size={15} style="padding-left: 9px">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                        <path d="M2 26h28v2H2z" fill="currentColor"></path>
-                        <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
-                      </svg>
-                    </NIcon>
-                  </NButton>
-                </NSpace>
+                  <NIcon size={15} style="padding-left: 9px">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                      <path d="M2 26h28v2H2z" fill="currentColor"></path>
+                      <path
+                        d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </NIcon>
+                </NButton>
+              </NSpace>
             )
           }
         },
@@ -164,7 +196,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>
             )
           }
         },
@@ -175,75 +207,78 @@ export default defineComponent({
           width: '300px',
           render(row: any) {
             return (
-                <NSpace>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      onClick={() => {
-                        state.musicPreview = true
-                        state.musicScore = row
-                      }}
-                  >
-                    预览
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      //v-auth="musicSheet/update1602302618558099458"
-                      onClick={() => {
-                        state.visiableMusic = true
-                        state.musicOperation = 'preview'
-                        state.musicData = row
-                        state.detailReadonly = true
-                      }}
-                  >
-                    查看
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      //v-auth="musicSheet/update1602302618558099458"
-                      onClick={() => {
-                        state.visiableMusic = true
-                        state.musicOperation = 'edit'
-                        state.musicData = row
-                        state.detailReadonly = true
-                      }}
-                  >
-                    修改
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      //v-auth="musicSheet/status1612431726029942786"
-                      onClick={() => onChangeStatus(row)}
-                  >
-                    {row.status ? '停用' : '启用'}
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      onClick={() => {
-                      }}
-                  >
-                    生成图片
-                  </NButton>
-                  <NButton
-                      type="primary"
-                      size="small"
-                      text
-                      disabled={!!row.status}
-                      onClick={() => onRmove(row)}
-                      //v-auth="musicSheet/remove1602302689404088321"
-                  >
-                    删除
-                  </NButton>
-                  {/* <NButton
+              <NSpace>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.musicPreview = true
+                    state.musicScore = row
+                  }}
+                >
+                  预览
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  //v-auth="musicSheet/update1602302618558099458"
+                  onClick={() => {
+                    state.visiableMusic = true
+                    state.musicOperation = 'preview'
+                    state.musicData = row
+                    state.detailReadonly = true
+                  }}
+                >
+                  查看
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  //v-auth="musicSheet/update1602302618558099458"
+                  onClick={() => {
+                    state.visiableMusic = true
+                    state.musicOperation = 'edit'
+                    state.musicData = row
+                    state.detailReadonly = true
+                  }}
+                >
+                  修改
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  //v-auth="musicSheet/status1612431726029942786"
+                  onClick={() => onChangeStatus(row)}
+                >
+                  {row.status ? '停用' : '启用'}
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  onClick={() => {
+                    state.productOpen = true
+                    state.productItem = row
+                    // handleAutoProduct(row)
+                  }}
+                >
+                  生成图片
+                </NButton>
+                <NButton
+                  type="primary"
+                  size="small"
+                  text
+                  disabled={!!row.status}
+                  onClick={() => onRmove(row)}
+                  //v-auth="musicSheet/remove1602302689404088321"
+                >
+                  删除
+                </NButton>
+                {/* <NButton
                   type="primary"
                   size="small"
                   text
@@ -252,7 +287,7 @@ export default defineComponent({
                 >
                   {row.topFlag ? '取消置顶' : '置顶'}
                 </NButton> */}
-                </NSpace>
+              </NSpace>
             )
           }
         }
@@ -279,16 +314,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({
@@ -304,8 +338,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -317,7 +350,12 @@ export default defineComponent({
       state.userIdData = []
       state.searchForm.userId = null
       if (sourceType && sourceType !== 'PLATFORM') {
-        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: sourceType, applicationId: state.searchForm.useAppId})
+        const { data } = await musicSheetApplicationOwnerList({
+          page: 1,
+          rows: 9999,
+          sourceType: sourceType,
+          applicationId: state.searchForm.useAppId
+        })
         const temp = data.rows || []
         temp.forEach((next: any) => {
           state.userIdData.push({
@@ -336,11 +374,10 @@ export default defineComponent({
         negativeText: '取消',
         onPositiveClick: async () => {
           try {
-            await musicSheetRemove({id: row.id})
+            await musicSheetRemove({ id: row.id })
             getList()
             message.success('删除成功')
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -348,26 +385,24 @@ export default defineComponent({
     const getList = async () => {
       try {
         state.loading = true
-        const {data} = await musicSheetPage({...state.pagination, ...state.searchForm})
+        const { data } = await musicSheetPage({ ...state.pagination, ...state.searchForm })
         state.pagination.pageTotal = Number(data.total)
         state.dataList = data.rows || []
-      } catch {
-      }
+      } catch {}
       state.loading = false
     }
 
     // 获取标签
     const getTagList = async () => {
       try {
-        const {data} = await musicTagPage({page: 1, rows: 999})
+        const { data } = await musicTagPage({ page: 1, rows: 999 })
         const tempList = data.rows || []
         tempList.forEach((item: any) => {
           item.label = item.name
           item.value = item.id
         })
         state.tagList = tempList
-      } catch {
-      }
+      } catch {}
     }
 
     // 获取分类
@@ -382,27 +417,26 @@ export default defineComponent({
     // 获取声部
     const initSubjectList = async () => {
       try {
-        const {data} = await subjectPage({page: 1, rows: 999})
+        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 {
-      }
+      } catch {}
     }
 
     // app列表
     const initUseAppList = async () => {
       try {
-        const appKeys = Object.keys(appKey);
-        const {data} = await sysApplicationPage({page: 1, rows: 999})
+        const appKeys = Object.keys(appKey)
+        const { data } = await sysApplicationPage({ page: 1, rows: 999 })
         const tempList = data.rows || []
         state.useProjectData = []
         const filter = tempList.filter((next: any) => {
           return appKeys.includes(next.appKey)
-        });
+        })
         filter.forEach((item: any) => {
           state.useProjectData.push({
             ...item,
@@ -410,8 +444,7 @@ export default defineComponent({
             value: item.id
           })
         })
-      } catch {
-      }
+      } catch {}
     }
 
     const saveForm = ref()
@@ -420,10 +453,10 @@ export default defineComponent({
       getList()
     }
     watch(
-        () => props.searchId,
-        (val) => {
-          console.log(val, 'searchId')
-        }
+      () => props.searchId,
+      (val) => {
+        console.log(val, 'searchId')
+      }
     )
     const onSearch = () => {
       saveForm.value?.submit()
@@ -446,248 +479,272 @@ export default defineComponent({
     })
 
     return () => (
-        <div class="system-menu-container">
-          <SaveForm
-              ref={saveForm}
-              model={state.searchForm}
-              onSubmit={onSubmit}
-              saveKey="music-list"
-              onSetModel={(val: any) => (state.searchForm = val)}
-          >
-            <NFormItem label="关键词" path="keyword">
-              <NInput
-                  placeholder="曲目编号/名称"
-                  v-model:value={state.searchForm.keyword}
-                  clearable
-              />
-            </NFormItem>
-            <NFormItem label="曲目类型" path="musicSheetType">
-              <NSelect
-                  placeholder="请选择曲目类型"
-                  v-model:value={state.searchForm.musicSheetType}
-                  options={getSelectDataFromObj(musicSheetType)}
-                  clearable
-              />
-            </NFormItem>
-            <NFormItem label="可用声部" path="musicSubject">
-              <NSelect
-                  placeholder="请选择可用声部"
-                  v-model:value={state.searchForm.subjectId}
-                  options={state.subjectList}
-                  clearable
-              />
-            </NFormItem>
-            <NFormItem label="音乐人" path="composer">
-              <NInput
-                  placeholder="请选择音乐人"
-                  v-model:value={state.searchForm.composer}
-                  clearable
-              />
-            </NFormItem>
-            <NFormItem label="作者属性" path="sourceType">
-              <NSelect
-                  placeholder="请选择作者属性"
-                  v-model:value={state.searchForm.sourceType}
-                  options={getSelectDataFromObj(musicSheetSourceType)}
-                  onUpdateValue={async (value: any) => {
-                    state.userIdData = []
-                    state.searchForm.userId = null
-                    if (value && value !== 'PLATFORM') {
-                      await updateUserIdData(value);
-                      state.userIdDisable = !state.searchForm.useAppId;
-                    } else {
-                      state.userIdDisable = true
-                    }
-                  }}
-                  clearable
-              />
-            </NFormItem>
-            <NFormItem label="适用项目" path="app">
-              <NSelect
-                  placeholder="请选择适用项目"
-                  v-model:value={state.searchForm.useAppId}
-                  options={state.useProjectData}
-                  clearable
-                  onUpdateValue={async (value: any) => {
-                    state.searchForm.useAppId = value
-                    if (value) {
-                      await updateUserIdData(state.searchForm.sourceType);
-                      state.userIdDisable = !(state.searchForm.sourceType && state.searchForm.sourceType !=='PLATFORM');
-                    } else {
-                      state.searchForm.userId = null
-                      state.userIdDisable = true
-                      state.userIdData = []
-                    }
-                  }}
-              />
-            </NFormItem>
-            <NFormItem label="所属人" path="author">
-              <NSelect
-                  filterable
-                  placeholder="请选择所属人"
-                  disabled={state.userIdDisable}
-                  v-model:value={state.searchForm.userId}
-                  options={state.userIdData}
-                  clearable
-              >
-              </NSelect>
-            </NFormItem>
-            <NFormItem label="状态" path="status">
-              <NSelect
-                  v-model={[state.searchForm.status, 'value']}
-                  placeholder="请选择状态"
-                  clearable
-                  options={
-                    [
-                      {
-                        label: '启用',
-                        value: true
-                      },
-                      {
-                        label: '停用',
-                        value: false
-                      }
-                    ] as any
+      <div class="system-menu-container">
+        <SaveForm
+          ref={saveForm}
+          model={state.searchForm}
+          onSubmit={onSubmit}
+          saveKey="music-list"
+          onSetModel={(val: any) => (state.searchForm = val)}
+        >
+          <NFormItem label="关键词" path="keyword">
+            <NInput
+              placeholder="曲目编号/名称"
+              v-model:value={state.searchForm.keyword}
+              clearable
+            />
+          </NFormItem>
+          <NFormItem label="曲目类型" path="musicSheetType">
+            <NSelect
+              placeholder="请选择曲目类型"
+              v-model:value={state.searchForm.musicSheetType}
+              options={getSelectDataFromObj(musicSheetType)}
+              clearable
+            />
+          </NFormItem>
+          <NFormItem label="可用声部" path="musicSubject">
+            <NSelect
+              placeholder="请选择可用声部"
+              v-model:value={state.searchForm.subjectId}
+              options={state.subjectList}
+              clearable
+            />
+          </NFormItem>
+          <NFormItem label="音乐人" path="composer">
+            <NInput
+              placeholder="请选择音乐人"
+              v-model:value={state.searchForm.composer}
+              clearable
+            />
+          </NFormItem>
+          <NFormItem label="作者属性" path="sourceType">
+            <NSelect
+              placeholder="请选择作者属性"
+              v-model:value={state.searchForm.sourceType}
+              options={getSelectDataFromObj(musicSheetSourceType)}
+              onUpdateValue={async (value: any) => {
+                state.userIdData = []
+                state.searchForm.userId = null
+                if (value && value !== 'PLATFORM') {
+                  await updateUserIdData(value)
+                  state.userIdDisable = !state.searchForm.useAppId
+                } else {
+                  state.userIdDisable = true
+                }
+              }}
+              clearable
+            />
+          </NFormItem>
+          <NFormItem label="适用项目" path="app">
+            <NSelect
+              placeholder="请选择适用项目"
+              v-model:value={state.searchForm.useAppId}
+              options={state.useProjectData}
+              clearable
+              onUpdateValue={async (value: any) => {
+                state.searchForm.useAppId = value
+                if (value) {
+                  await updateUserIdData(state.searchForm.sourceType)
+                  state.userIdDisable = !(
+                    state.searchForm.sourceType && state.searchForm.sourceType !== 'PLATFORM'
+                  )
+                } else {
+                  state.searchForm.userId = null
+                  state.userIdDisable = true
+                  state.userIdData = []
+                }
+              }}
+            />
+          </NFormItem>
+          <NFormItem label="所属人" path="author">
+            <NSelect
+              filterable
+              placeholder="请选择所属人"
+              disabled={state.userIdDisable}
+              v-model:value={state.searchForm.userId}
+              options={state.userIdData}
+              clearable
+            ></NSelect>
+          </NFormItem>
+          <NFormItem label="状态" path="status">
+            <NSelect
+              v-model={[state.searchForm.status, 'value']}
+              placeholder="请选择状态"
+              clearable
+              options={
+                [
+                  {
+                    label: '启用',
+                    value: true
+                  },
+                  {
+                    label: '停用',
+                    value: false
                   }
-              />
-            </NFormItem>
-            <NFormItem label="审核版本" path="appAuditFlag">
-              <NSelect
-                  v-model={[state.searchForm.appAuditFlag, 'value']}
-                  placeholder="请选择审核版本"
-                  clearable
-                  options={
-                    [
-                      {
-                        label: '是',
-                        value: 1
-                      },
-                      {
-                        label: '否',
-                        value: 0
-                      }
-                    ] as any
+                ] as any
+              }
+            />
+          </NFormItem>
+          <NFormItem label="审核版本" path="appAuditFlag">
+            <NSelect
+              v-model={[state.searchForm.appAuditFlag, 'value']}
+              placeholder="请选择审核版本"
+              clearable
+              options={
+                [
+                  {
+                    label: '是',
+                    value: 1
+                  },
+                  {
+                    label: '否',
+                    value: 0
                   }
-              />
-            </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.visiableMusic = true
-                    state.musicOperation = 'add'
-                    state.musicData = {}
-                    state.detailReadonly = true
-                  }}
-              >
-                新增曲目
-              </NButton>
-              <NButton
-                  disabled={checkedRowKeysRef.value.length == 0}
-                  //v-auth="musicSheet/save1602302550719426561"
-                  onClick={() => {
-                    // state.musicOperation = 'unable'
-                    // state.musicData = {}
-                    onBatchChangeStatus(false)
-                  }}
-              >
-                批量停用
+                ] as any
+              }
+            />
+          </NFormItem>
+          <NFormItem>
+            <NSpace>
+              <NButton type="primary" onClick={onSearch}>
+                搜索
               </NButton>
-              <NButton
-                  disabled={checkedRowKeysRef.value.length == 0}
-                  //v-auth="musicSheet/save1602302550719426561"
-                  onClick={() => {
-                    onBatchChangeStatus(true)
-                    // state.musicOperation = 'enable'
-                    // state.musicData = {}
-                  }}
-              >
-                批量启用
+              <NButton type="default" onClick={onBtnReset}>
+                重置
               </NButton>
             </NSpace>
-
-            <NDataTable
-                loading={state.loading}
-                columns={columns()}
-                data={state.dataList}
-                rowKey={(row: any) => row.id}
-                onUpdateCheckedRowKeys={handleCheck}
-                scrollX={'2000'}
-            ></NDataTable>
-            <Pagination
-                v-model:page={state.pagination.page}
-                v-model:pageSize={state.pagination.rows}
-                v-model:pageTotal={state.pagination.pageTotal}
-                onList={getList}
-                sync
-                saveKey="music-list"
-            ></Pagination>
-          </div>
-          <NModal
-              v-model:show={state.visiableMusic}
-              preset="dialog"
-              showIcon={false}
-              maskClosable={false}
-              title={() => {
-                if (state.musicOperation === 'add') {
-                  return '添加曲目';
-                } else if (state.musicOperation === 'preview') {
-                  return '曲目详情';
-                }
-                return '修改曲目';
+          </NFormItem>
+        </SaveForm>
+        <div class={['section-container']}>
+          <NSpace style={{ paddingBottom: '12px' }}>
+            <NButton
+              type="primary"
+              //v-auth="musicSheet/save1602302550719426561"
+              onClick={() => {
+                state.visiableMusic = true
+                state.musicOperation = 'add'
+                state.musicData = {}
+                state.detailReadonly = true
               }}
-              style={{width: '980px'}}
-          >
-            <MusicOperation
-                type={state.musicOperation}
-                data={state.musicData}
-                subjectList={state.subjectList}
-                // musicSheetCategories={state.musicSheetCategories}
-                // tagList={state.tagList}
-                onClose={() => (state.visiableMusic = false)}
-                onGetList={getList}
-            />
-          </NModal>
-          <NModal
-              blockScroll={true}
-              v-model:show={state.musicPreview}
-              preset="dialog"
-              showIcon={false}
-              title={'曲目预览'}
-              style={{width: 'auto'}}
-          >
-            <MusicPreView item={state.musicScore}/>
-          </NModal>
+            >
+              新增曲目
+            </NButton>
+            <NButton
+              disabled={checkedRowKeysRef.value.length == 0}
+              //v-auth="musicSheet/save1602302550719426561"
+              onClick={() => {
+                // state.musicOperation = 'unable'
+                // state.musicData = {}
+                onBatchChangeStatus(false)
+              }}
+            >
+              批量停用
+            </NButton>
+            <NButton
+              disabled={checkedRowKeysRef.value.length == 0}
+              //v-auth="musicSheet/save1602302550719426561"
+              onClick={() => {
+                onBatchChangeStatus(true)
+                // state.musicOperation = 'enable'
+                // state.musicData = {}
+              }}
+            >
+              批量启用
+            </NButton>
+          </NSpace>
 
-          <NModal
-              blockScroll={true}
-              v-model:show={state.showUseProject}
-              preset="dialog"
-              showIcon={false}
-              title={'适用项目'}
-              style={{width: '500px'}}
-          >
-            <UseProject
-                id={state.showUseProjectId}
-                useProject={state.useProjectData}
-                onClose={() => (state.showUseProject = false)}
-                onGetList={getList}
-            />
-          </NModal>
+          <NDataTable
+            loading={state.loading}
+            columns={columns()}
+            data={state.dataList}
+            rowKey={(row: any) => row.id}
+            onUpdateCheckedRowKeys={handleCheck}
+            scrollX={'2000'}
+          ></NDataTable>
+          <Pagination
+            v-model:page={state.pagination.page}
+            v-model:pageSize={state.pagination.rows}
+            v-model:pageTotal={state.pagination.pageTotal}
+            onList={getList}
+            sync
+            saveKey="music-list"
+          ></Pagination>
         </div>
+        <NModal
+          v-model:show={state.visiableMusic}
+          preset="dialog"
+          showIcon={false}
+          maskClosable={false}
+          title={() => {
+            if (state.musicOperation === 'add') {
+              return '添加曲目'
+            } else if (state.musicOperation === 'preview') {
+              return '曲目详情'
+            }
+            return '修改曲目'
+          }}
+          style={{ width: '980px' }}
+        >
+          <MusicOperation
+            type={state.musicOperation}
+            data={state.musicData}
+            subjectList={state.subjectList}
+            // musicSheetCategories={state.musicSheetCategories}
+            // tagList={state.tagList}
+            onClose={() => (state.visiableMusic = false)}
+            onGetList={getList}
+          />
+        </NModal>
+        <NModal
+          blockScroll={true}
+          v-model:show={state.musicPreview}
+          preset="dialog"
+          showIcon={false}
+          title={'曲目预览'}
+          style={{ width: 'auto' }}
+        >
+          <MusicPreView item={state.musicScore} />
+        </NModal>
+
+        <NModal
+          blockScroll={true}
+          v-model:show={state.showUseProject}
+          preset="dialog"
+          showIcon={false}
+          title={'适用项目'}
+          style={{ width: '500px' }}
+        >
+          <UseProject
+            id={state.showUseProjectId}
+            useProject={state.useProjectData}
+            onClose={() => (state.showUseProject = false)}
+            onGetList={getList}
+          />
+        </NModal>
+
+        <NModal
+          class={styles.productModal}
+          title="自动生成曲谱图片"
+          v-model:show={state.productOpen}
+          preset="dialog"
+          closeOnEsc={false}
+          maskClosable={false}
+          showIcon={false}
+        >
+          <MusicCreateImg
+            xmlFileUrl={state.productItem.xmlFileUrl}
+            onClose={() => (state.productOpen = false)}
+            onConfirm={async (item: any) => {
+              try {
+                await musicSheetImg({
+                  ...item,
+                  id: state.productItem.id
+                })
+              } catch {}
+            }}
+          />
+        </NModal>
+      </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/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,376 +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: '请选择曲目分类',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请选择收费类型',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请选择分类',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请选择曲目标签',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请输入曲目价格',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请选择是否精品乐谱',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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: '请选择乐谱教材',
-                                      trigger: ['input', 'blur']
-                                    }
-                                  ]}
-                              >
-                                  <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,289 +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)}
-                    options={[
-                      {
-                        label: '免费',
-                        value: 'FREE',
-                      },
-                      {
-                        label: '收费',
-                        value: 'CHARGE',
-                      }
-                    ]}
-                    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,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: 'gyt-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,16 +62,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 +83,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 +110,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 +132,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 +146,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 +199,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 +265,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 +357,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 +409,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 +424,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,125 +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: '请输入声部名称',
-                    trigger: ['input', 'blur']
-                  }
-                ]}
-            >
-              <NInput
-                  v-model:value={state.forms.name}
-                  placeholder="请输入声部名称"
-                  clearable
-                  maxlength={10}
-                  showCount
-              ></NInput>
-            </NFormItem>
-            <NFormItem
-                label="声部编码"
-                path="code"
-                rule={[
-                  {
-                    required: true,
-                    message: '请输入声部编码',
-                    trigger: ['input', 'blur']
-                  }
-                ]}
-            >
-              <NInput
-                  v-model:value={state.forms.code}
-                  placeholder="请输入声部名称"
-                  clearable
-                  maxlength={10}
-                  showCount
-              ></NInput>
-            </NFormItem>
-            <NFormItem
-                label="声部图片"
-                path="img"
-                rule={[
-                  {
-                    required: true,
-                    message: '请上传声部图片',
-                    trigger: ['input', 'blur']
-                  }
-                ]}
-            >
-              <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' }}

vite.config.ts

@@ -19,8 +19,8 @@ function pathResolve(dir: string) {
 }
 
 // const proxyUrl = 'https://dev.lexiaoya.cn/'
-const proxyUrl = 'http://127.0.0.1:7293/'
-// const proxyUrl = 'https://test.lexiaoya.cn'
+// const proxyUrl = 'http://127.0.0.1:7293/'
+const proxyUrl = 'https://dev.resource.colexiu.com'
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd()