添加上传图片功能

src/views/system-manage/subject-manage/instrument/instrument-list.tsx

@@ -4,6 +4,7 @@ import {
   NDataTable,
   NDatePicker,
   NFormItem,
+  NImage,
   NInput,
   NModal,
   NSelect,
@@ -93,6 +94,13 @@ export default defineComponent({
           key: 'name'
         },
         {
+          title: '乐器封面',
+          key: 'img',
+          render(row: any) {
+            return row.img && <NImage src={row.img} style={{ width: '80px', height: '80px' }} />
+          }
+        },
+        {
           title: '乐器编码',
           key: 'code'
         },

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

@@ -6,6 +6,7 @@ import {
   musicalInstrumentSave,
   musicalInstrumentUpdate
 } from '@views/system-manage/subject-manage/api'
+import UploadFile from '@/components/upload-file'
 
 export default defineComponent({
   name: 'role-operation',
@@ -25,7 +26,8 @@ export default defineComponent({
       name: null,
       defaultScore: null as any,
       code: null as any,
-      transferFlag: true
+      transferFlag: true,
+      img: null as any
     })
     const btnLoading = ref(false)
     const formsRef = ref()
@@ -38,7 +40,7 @@ export default defineComponent({
           btnLoading.value = true
           // 多编码支持
           if (forms.code) {
-            forms.code = forms.code.replace(/[，]/g, ",")
+            forms.code = forms.code.replace(/[，]/g, ',')
           }
 
           if (props.type === 'add') {
@@ -70,6 +72,7 @@ export default defineComponent({
         forms.defaultScore = data.defaultScore
         forms.code = data.code
         forms.transferFlag = data.transferFlag
+        forms.img = data.img
       }
     })
 
@@ -122,7 +125,8 @@ export default defineComponent({
               }
               placeholder="请选择是否支持转简谱"
               onUpdateValue={async (value: any) => {
-                if(!value){ //如果不支持，修改默认谱面
+                if (!value) {
+                  //如果不支持，修改默认谱面
                   forms.defaultScore = 'STAVE'
                 }
               }}
@@ -160,6 +164,31 @@ export default defineComponent({
           >
             <NInput v-model:value={forms.code} placeholder="请输入乐器编码" clearable></NInput>
           </NFormItem>
+          <NFormItem
+            label="乐器封面"
+            path="img"
+            rule={[
+              {
+                required: true,
+                message: '请上传乐器封面',
+                trigger: ['input', 'blur']
+              }
+            ]}
+          >
+            <UploadFile
+              v-model:fileList={forms.img}
+              accept=".jpg,.jpeg,.png"
+              cropper
+              size={5}
+              bucketName="news-info"
+              options={{
+                enlarge: 2,
+                autoCropWidth: 200, //默认生成截图框宽度
+                autoCropHeight: 200 //默认生成截图框高度
+              }}
+              tips="请上传比例为1:1，JPG、PNG图片"
+            />
+          </NFormItem>
         </NForm>
 
         <NSpace justify="end">