添加

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,45 @@
 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,
+  musicSheetSave,
+  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'
 
 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 +59,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 +76,9 @@ export default defineComponent({
       detailReadonly: false, // 新增、修改、详情是否可编辑
       userIdDisable: true, // 所属人
       userIdData: [] as any, // 所属人数据列表
+      productOpen: false,
+      isAutoSave: false,
+      productIfameSrc: ''
     })
 
     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,69 @@ 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={() => 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 +278,7 @@ export default defineComponent({
                 >
                   {row.topFlag ? '取消置顶' : '置顶'}
                 </NButton> */}
-                </NSpace>
+              </NSpace>
             )
           }
         }
@@ -279,16 +305,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 +329,7 @@ export default defineComponent({
             })
             getList()
             message.success(`${statusStr}成功`)
-          } catch {
-          }
+          } catch {}
         }
       })
     }
@@ -317,7 +341,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 +365,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 +376,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 +408,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 +435,7 @@ export default defineComponent({
             value: item.id
           })
         })
-      } catch {
-      }
+      } catch {}
     }
 
     const saveForm = ref()
@@ -420,10 +444,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()
@@ -443,251 +467,360 @@ export default defineComponent({
       initUseAppList()
       getList()
       // getMusicSheetCategorieList()
+
+      window.addEventListener('message', handleProductResult)
     })
 
+    onUnmounted(() => {
+      window.removeEventListener('message', handleProductResult)
+    })
+
+    /** 自动生成图片 */
+    const forms = reactive({
+      id: '',
+      xmlFileUrl: '',
+      musicImg: '', // 五线谱图片
+      musicSvg: '', //首调图片
+      musicJianSvg: '' // 简谱固定调
+    })
+    const handleAutoProduct = (row: any) => {
+      if (!row.xmlFileUrl) {
+        message.error('请先上传XML')
+        return
+      }
+      forms.xmlFileUrl = row.xmlFileUrl
+      forms.id = row.id
+      const apiUrls = {
+        dev: 'https://dev.kt.colexiu.com',
+        test: 'https://test.lexiaoya.cn',
+        online: 'https://kt.colexiu.com'
+      }
+
+      const environment = location.origin.includes('//dev')
+        ? 'dev'
+        : location.origin.includes('//test')
+        ? 'test'
+        : location.origin.includes('//online')
+        ? 'online'
+        : 'dev'
+      const apiUrl = apiUrls[environment]
+      const prefix = /(localhost|192)/.test(location.host) ? 'https://dev.kt.colexiu.com' : apiUrl
+      state.productIfameSrc =
+        prefix + `/instrument/#/product-img?xmlUrl=${forms.xmlFileUrl}&isCreateImg=true&isCbs=true`
+      console.log(state.productIfameSrc, '12')
+      state.productOpen = true
+    }
+    const handleProductResult = (res: MessageEvent) => {
+      const data = res.data
+      if (data?.api === 'webApi_renderSvg') {
+        let imgs: any = []
+        try {
+          imgs = JSON.parse(data.product)
+        } catch (error) {
+          console.log('🚀 ~ error:', error)
+        }
+        imgs = imgs.filter((item: any) => item.base64)
+        if (imgs.length === 3) {
+          message.success('生成成功')
+          handleUploadImg(imgs)
+        } else {
+          message.error('生成失败')
+        }
+        console.log('🚀 ~ 上传之前', [...imgs])
+      }
+    }
+    const handleUploadImg = async (imgs: any[]) => {
+      for (let i = 0; i < imgs.length; i++) {
+        const file = dataURLtoFile(imgs[i].base64, `${Date.now()}p${i}.png`)
+        imgs[i].url = await api_uploadFile(file, () => {})
+      }
+      forms.musicImg = imgs[0]?.url || ''
+      forms.musicSvg = imgs[1]?.url || ''
+      forms.musicJianSvg = imgs[2]?.url || ''
+      state.productOpen = false
+      imgs = []
+      // onSubmit()
+      console.log(forms, '12')
+      // 保存
+      try {
+        await musicSheetSave({ ...forms })
+      } catch {
+        //
+      }
+      state.isAutoSave = false
+    }
+    /** base64转file */
+    const dataURLtoFile = (dataurl: string, filename: string) => {
+      let arr = dataurl.split(',') || [],
+        mime = arr[0].match(/:(.*?);/)?.[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], filename, { type: mime })
+    }
     return () => (
-        <div class="system-menu-container">
-          <SaveForm
-              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
-                  }}
-              >
-                新增曲目
+                ] as any
+              }
+            />
+          </NFormItem>
+          <NFormItem>
+            <NSpace>
+              <NButton type="primary" onClick={onSearch}>
+                搜索
               </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 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}
+          onClose={() => {
+            console.log('关闭')
+            state.isAutoSave = false
+          }}
+        >
+          <iframe class={styles.productIframe} src={state.productIfameSrc}></iframe>
+        </NModal>
+      </div>
     )
   }
 })

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()