h5-colexiu/src/teacher/music/upload/index.tsx

import { defineComponent } from 'vue'
import {
  Button,
  Field,
  Sticky,
  Form,
  Tag,
  Radio,
  RadioGroup,
  Popup,
  Icon,
  Empty,
  Picker,
  Toast,
  NoticeBar
} from 'vant'
import ColFieldGroup from '@/components/col-field-group'
// import { MusicType } from 'src/teacher/music/list/item.d'
import SubjectModel from '@/business-components/subject-list'
import ColField from '@/components/col-field'
import {
  teachercanEvaluateType,
  teacherChargeType,
  teachershowAudiType,
  teachershowFingeringType,
  teachershowHasBeatType,
  teacherNotationType
} from '@/constant/music'
import { getXmlInfo, FormatXMLInfo } from '@/helpers/music-xml'
import Upload from './upload'
import styles from './index.module.less'
import SelectTag from '@/student/music/search/select-tag'
import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import { teacherState } from '@/teacher/teacher-cert/teacherState'
import request from '@/helpers/request'
import requestOrigin from 'umi-request'
import UploadIcon from './upload.svg'

export type BackgroundMp3 = {
  url?: string
  track?: string
}

export default defineComponent({
  name: 'MusicUpload',
  data() {
    return {
      reason: '',
      audioType: 'MP3',
      xmlFileUrl: '',
      xmlFileLoading: false,
      midiUrl: '',
      midiLoading: false,
      mp3Url: '',
      bgmp3Url: '',
      mp3Loading: false,
      bgmp3Loading: false,
      musicSheetName: '',
      composer: '',
      speed: '',
      hasBeat: 0,
      chargeType: 0,
      showFingering: 1,
      canEvaluate: 1,
      notation: 0,
      musicPrice: '',
      subJectIndex: 0,
      selectTagVisible: false,
      subJectVisible: false,
      tags: [] as string[],
      tagsNames: [] as Array<{ [id in string]: string }>,
      formated: {} as FormatXMLInfo,
      tagVisibility: false,
      subjectListres: [] as any[],
      subjectListNames: {} as any,
      selectedSubjectList: null as any,
      vlewSubjectList: null as any,
      submitLoading: false,
      showPicker: false,
      music_sheet_service_fee: 0,
      backgroundMp3s: [
        {
          url: '',
          track: ''
        }
      ] as BackgroundMp3[]
    }
  },
  watch: {
    formated() {
      this.mergeXmlData(this.formated)
    },
    chargeType() {
      if (this.chargeType === 0) {
        this.musicPrice = ''
      }
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = teacherState.teacherCert.subjectId
        ? teacherState.teacherCert.subjectId.split(',')
        : []
      ids = ids.map((item: any) => Number(item))
      return ids
    },
    subjectList() {
      // 学科列表
      const subjects: any = this.subjectListres || []
      return subjects
    },
    choiceSubject() {
      // 选择的科目
      const tempArr: any[] = []
      this.subjectList.forEach((parent: any) => {
        parent.subjects &&
          parent.subjects.forEach((sub: any) => {
            if (this.choiceSubjectIds.includes(sub.id)) {
              tempArr.push(sub as never)
            }
          })
      })
      return tempArr
    }
  },
  async mounted() {
    request
      .get('/api-teacher/sysConfig/queryByParamName', {
        params: {
          paramName: 'music_sheet_service_fee'
        }
      })
      .then(res => (this.music_sheet_service_fee = res.data.paramValue))
    // if (teacherState.subjectList.length <= 0) {
    await request.get('/api-teacher/subject/subjectSelect').then(res => {
      const list: any[] = []
      for (const item of res.data || []) {
        const slist: any[] = (item as any).subjects || []
        list.push(...slist)
      }
      this.subjectListres = list
      this.subjectListNames = this.getSubjectListNames(list)
    })

    if (this.$route.params.id) {
      this.setDetail(this.$route.params.id as string)
    }

    // }
  },
  methods: {
    async setDetail(id: string) {
      try {
        const res = await request.get('/api-teacher/music/sheet/detail/' + id)
        this.chargeType = res.data.chargeType === 'FREE' ? 0 : 2
        this.showFingering = res.data.showFingering
        this.canEvaluate = res.data.canEvaluate
        if (this.chargeType) {
          this.musicPrice = res.data.musicPrice
        }

        this.composer = res.data.composer
        this.musicSheetName = res.data.musicSheetName
        this.audioType = res.data.audioType
        this.notation = res.data.notation
        this.selectedSubjectList = {
          label: res.data.musicSubject,
          value: res.data.subjectNames
        }
        this.vlewSubjectList = {
          label: res.data.musicSubject,
          value: res.data.subjectNames
        }
        this.subJectIndex = Object.keys(this.subjectListNames).findIndex(
          key => key === res.data.musicSubject
        )
        const names = res.data.musicTagNames.split(',')
        this.tags = res.data.musicTag.split(',')

        for (let i = 0; i < names.length; i++) {
          this.tagsNames[this.tags[i]] = names[i]
        }

        this.xmlFileUrl = res.data.xmlFileUrl

        // this.audioType = res.data.mp3Type

        if (this.audioType === 'MP3') {
          this.hasBeat =
            (res.data.audioType === 'MP3' &&
              res.data.mp3Type === 'MP3_METRONOME') ||
            res.data.audioType === 'MIDI'
              ? 1
              : 0
          this.mp3Url = res.data.audioFileUrl //res.data.metronomeUrl || res.data.url
        } else {
          this.midiUrl = res.data.midiUrl
        }

        this.backgroundMp3s = (res.data.background || []).map((item, index) => {
          if (index === 0) {
            this.bgmp3Url = item.audioFileUrl
          }
          return {
            url: item.audioFileUrl,
            track: item.track
          }
        })
        this.reason = res.data.reason

        console.log(this.bgmp3Url)
      } catch (error) {
        console.log(error)
      }
    },
    createSubmitData() {
      const beatType = this.hasBeat ? 'MP3_METRONOME' : 'MP3'
      const mp3Type = this.audioType === 'MP3' ? beatType : 'MIDI'
      return {
        audioType: this.audioType,
        sourceType: 'TEACHER',
        mp3Type,
        hasBeat: this.hasBeat,
        // url: this.hasBeat ? '' : this.mp3Url,
        // metronomeUrl: this.hasBeat ? this.mp3Url : '',
        audioFileUrl: this.mp3Url,
        showFingering: Number(this.showFingering),
        musicTag: this.tags.join(','),
        musicSubject: Number(this.selectedSubjectList?.label) || undefined,
        musicSheetName: this.musicSheetName,
        midiUrl: this.midiUrl,
        notation: Number(this.notation),
        xmlFileUrl: this.xmlFileUrl,
        canEvaluate: Number(this.canEvaluate),
        chargeType: this.chargeType === 0 ? 'FREE' : 'CHARGE',
        composer: this.composer,
        musicPrice: this.musicPrice,
        background: this.backgroundMp3s.map(item => ({
          audioFileUrl: this.bgmp3Url,
          track: item.track
          // metronomeUrl: this.hasBeat ? this.bgmp3Url : ''
        }))
      }
    },
    async submit(vals: any) {
      this.submitLoading = true
      try {
        if (this.$route.params.id) {
          await request.post('/api-teacher/music/sheet/update', {
            data: {
              ...this.createSubmitData(),
              id: this.$route.params.id
            }
          })
        } else {
          await request.post('/api-teacher/music/sheet/create', {
            data: this.createSubmitData()
          })
        }
      } catch (error) {}
      this.submitLoading = false

      Toast('上传成功')
      setTimeout(() => {
        postMessage({
          api: 'back'
        })
      }, 800)
      console.log(vals)
    },
    getSubjectListNames(list) {
      const data = {}
      for (const item of list) {
        data[item.id] = item.name
        if (item.subjects) {
          for (const sub of item.subjects) {
            data[sub.id] = sub.name
          }
        }
      }
      return data
    },
    failed() {
      console.log('failed', this.backgroundMp3s)
    },
    mergeXmlData(data: FormatXMLInfo) {
      this.formated = data
      // this.backgroundMp3s = data.partNames.map((partName: string) => ({
      //   track: partName
      // }))
      if (!this.musicSheetName) {
        this.musicSheetName = data.title
      }
      if (!this.composer) {
        this.composer = data.composer
      }
      // if (!this.speed && data.speed) {
      //   this.speed = '' + data.speed
      // }
    },
    readerFile(file: File) {
      const reader = new FileReader()
      reader.onload = () => {
        const xml = reader.result as string
        this.formated = getXmlInfo(xml)
      }
      reader.readAsText(file)
    },
    onChoice(val: any) {
      this.subJectVisible = false
      this.selectedSubjectList = [val]
    },
    onComfirm(tags: any, names: any) {
      this.tagsNames = names
      this.tagVisibility = false
      const data = Object.values(tags).flat().filter(Boolean) as string[]
      console.log(data)
      this.tags = data
    },
    naiveXMLFile() {
      this.xmlFileLoading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'xml', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.xmlFileUrl = evt?.fileUrl || this.xmlFileUrl || ''
          this.xmlFileLoading = false
          if (this.xmlFileUrl) {
            requestOrigin(this.xmlFileUrl).then(
              res => (this.formated = getXmlInfo(res))
            )
          }
        }
      )
    },
    naiveMidFile() {
      this.midiLoading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'midi', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.midiUrl = evt?.fileUrl || this.midiUrl || ''
          this.midiLoading = false
          // this.midiUrl = path
        }
      )
    },
    naiveMp3File() {
      this.mp3Loading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'mp3', bucket: 'cloud-coach' } },
        evt => {
          // @ts-ignore
          this.mp3Url = evt?.fileUrl || this.mp3Url || ''
          this.mp3Loading = false
          // this.midiUrl = path
        }
      )
    },
    naiveBGMp3File() {
      this.bgmp3Loading = true
      postMessage(
        { api: 'chooseFile', content: { type: 'mp3', bucket: 'cloud-coach' } },
        evt => {
          this.bgmp3Url
          // @ts-ignore
          this.bgmp3Url = evt?.fileUrl || this.bgmp3Url || ''
          this.bgmp3Loading = false
          // this.midiUrl = path
        }
      )
    },
    fileName(name = '') {
      return name.split('/').pop()
    },
    removeBackground(index: number) {
      this.backgroundMp3s.splice(index, 1)
    }
  },
  render() {
    console.log(this.formated)
    const browserInfo = browser()
    return (
      <Form class={styles.form} onSubmit={this.submit} onFailed={this.failed}>
        {this.reason && (
          <NoticeBar wrapable scrollable={false} text={this.reason} />
        )}
        <div class={styles.container}>
          <ColFieldGroup class={styles.area}>
            <ColField border={false} required title="MusicXML文件">
              <Field
                name="xmlFileUrl"
                modelValue={this.xmlFileUrl}
                rules={[{ required: true, message: '请选择MusicXML文件' }]}
                // @ts-ignore
                vSlots={{
                  input: () =>
                    browserInfo.isApp ? (
                      <Button
                        icon={UploadIcon}
                        class={styles.upbtn}
                        onClick={this.naiveXMLFile}
                        loading={this.xmlFileLoading}
                      >
                        {this.xmlFileUrl
                          ? this.fileName(this.xmlFileUrl)
                          : '上传文件'}
                      </Button>
                    ) : (
                      <Upload
                        onUpdate:modelValue={val => (this.xmlFileUrl = val)}
                        accept=".xml"
                        formatFile={this.readerFile}
                      />
                    )
                }}
              />
            </ColField>
            {/* <ColField required title="播放类型" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.audioType}
                onUpdate:modelValue={val => (this.audioType = val)}
              >
                {Object.keys(teachershowAudiType).map((item: string) => {
                  const isActive = item === this.audioType
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachershowAudiType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField> */}
            {this.audioType === 'MP3' ? (
              <>
                <ColField required title="是否带节拍器" border={false}>
                  <RadioGroup
                    class={styles['radio-group']}
                    modelValue={this.hasBeat}
                    onUpdate:modelValue={val => (this.hasBeat = val)}
                  >
                    {Object.keys(teachershowHasBeatType).map((item: string) => {
                      const isActive = item === String(this.hasBeat)
                      const type = isActive ? 'primary' : 'default'
                      return (
                        <Radio class={styles.radio} name={item}>
                          <Tag size="large" plain={isActive} type={type}>
                            {teachershowHasBeatType[item]}
                          </Tag>
                        </Radio>
                      )
                    })}
                  </RadioGroup>
                </ColField>
                <ColField border={false} title="伴奏文件">
                  <Field
                    name="mp3Url"
                    modelValue={this.mp3Url}
                    // @ts-ignore
                    vSlots={{
                      input: () =>
                        browserInfo.isApp ? (
                          <Button
                            icon={UploadIcon}
                            class={styles.upbtn}
                            onClick={this.naiveMp3File}
                            loading={this.mp3Loading}
                          >
                            {this.mp3Url
                              ? this.fileName(this.mp3Url)
                              : '上传文件'}
                          </Button>
                        ) : (
                          <Upload
                            onUpdate:modelValue={val => (this.mp3Url = val)}
                            accept=".mp3"
                          />
                        )
                    }}
                  />
                </ColField>
              </>
            ) : (
              <ColField border={false} required title="MIDI文件">
                <Field
                  name="midiUrl"
                  modelValue={this.midiUrl}
                  rules={[{ required: true, message: '请选择MIDI文件' }]}
                  // @ts-ignore
                  vSlots={{
                    input: () =>
                      browserInfo.isApp ? (
                        <Button
                          icon={UploadIcon}
                          class={styles.upbtn}
                          onClick={this.naiveMidFile}
                          loading={this.midiLoading}
                        >
                          {this.midiUrl
                            ? this.fileName(this.midiUrl)
                            : '上传文件'}
                        </Button>
                      ) : (
                        <Upload
                          onUpdate:modelValue={val => (this.midiUrl = val)}
                          accept=".mid"
                        />
                      )
                  }}
                />
              </ColField>
            )}
            {this.backgroundMp3s.map((item, index) => (
              <ColField
                required
                border={false}
                title={(item.track || '') + '原音文件'}
                // @ts-ignore
                vSlots={{
                  right: () =>
                    this.backgroundMp3s.length > 1 ? (
                      <Button
                        onClick={() => this.removeBackground(index)}
                        style={{ border: 'none' }}
                        icon="cross"
                      ></Button>
                    ) : null
                }}
              >
                <Field
                  name="url"
                  modelValue={this.bgmp3Url}
                  // @ts-ignore
                  vSlots={{
                    input: () =>
                      browserInfo.isApp ? (
                        <Button
                          icon={UploadIcon}
                          class={styles.upbtn}
                          onClick={this.naiveBGMp3File}
                          loading={this.bgmp3Loading}
                        >
                          {this.bgmp3Url
                            ? this.fileName(this.bgmp3Url)
                            : '上传文件'}
                        </Button>
                      ) : (
                        <Upload
                          onUpdate:modelValue={val => (this.bgmp3Url = val)}
                          accept=".mp3"
                        />
                      )
                  }}
                />
              </ColField>
            ))}
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField required title="曲目名称">
              <Field
                clearable
                name="musicSheetName"
                modelValue={this.musicSheetName}
                rules={[{ required: true, message: '请输入曲目名称' }]}
                class={styles['clear-px']}
                placeholder="请输入曲目名称"
                onUpdate:modelValue={val => (this.musicSheetName = val)}
              />
            </ColField>
            <ColField required title="作曲人">
              <Field
                clearable
                class={styles['clear-px']}
                placeholder="请输入作曲人姓名"
                name="composer"
                modelValue={this.composer}
                rules={[{ required: true, message: '请输入作曲人姓名' }]}
                onUpdate:modelValue={val => (this.composer = val)}
              />
            </ColField>
            {/* <ColField required title="默认速度">
              <Field
                clearable
                name="playSpeed"
                modelValue={this.speed}
                rules={[{ required: true, message: '请输入默认速度' }]}
                onUpdate:modelValue={val => (this.speed = val)}
                class={styles['clear-px']}
                placeholder="请输入默认速度"
              />
            </ColField> */}
            <ColField required title="曲目声部">
              <Field
                is-link
                readonly
                class={styles['clear-px']}
                placeholder="请选择曲目声部"
                name="vlewSubjectList"
                modelValue={this.vlewSubjectList?.value}
                rules={[{ required: true, message: '请选择曲目声部' }]}
                // onUpdate:modelValue={val => (this.selectedSubjectList = )}
                onClick={() => (this.showPicker = true)}
              ></Field>
            </ColField>
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField
              border={false}
              required
              title="曲目标签"
              v-slots={{
                right: () => (
                  <Button
                    class={styles.select}
                    round
                    type="primary"
                    size="small"
                    onClick={() => (this.tagVisibility = true)}
                  >
                    选择
                  </Button>
                )
              }}
            >
              <Field
                name="tags"
                modelValue={this.tags.length ? 1 : undefined}
                rules={[{ required: true, message: '请选择曲目标签' }]}
                // @ts-ignore
                vSlots={{
                  input: () =>
                    this.tags.length > 0 ? (
                      this.tags.map((item: any) => (
                        <Tag type="primary" size="large" class={styles.tags}>
                          {this.tagsNames[item]}
                        </Tag>
                      ))
                    ) : (
                      <Empty
                        style={{ width: '100%' }}
                        description="请选择曲目标签"
                        imageSize={0}
                      />
                    )
                }}
              />
            </ColField>
          </ColFieldGroup>
          <ColFieldGroup class={styles.area}>
            <ColField required title="是否评测" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.canEvaluate}
                onUpdate:modelValue={val => (this.canEvaluate = val)}
              >
                {Object.keys(teachercanEvaluateType).map((item: string) => {
                  const isActive = item === String(this.canEvaluate)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachercanEvaluateType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            <ColField required title="指法展示" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.showFingering}
                onUpdate:modelValue={val => (this.showFingering = val)}
              >
                {Object.keys(teachershowFingeringType).map((item: string) => {
                  const isActive = item === String(this.showFingering)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teachershowFingeringType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            <ColField required title="是否收费" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.chargeType}
                onUpdate:modelValue={val => {
                  this.chargeType = Number(val)
                }}
              >
                {Object.keys(teacherChargeType).map((item: string) => {
                  const isActive = item === String(this.chargeType)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teacherChargeType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            <ColField required title="支持简谱" border={false}>
              <RadioGroup
                class={styles['radio-group']}
                modelValue={this.notation}
                onUpdate:modelValue={val => {
                  this.notation = Number(val)
                }}
              >
                {Object.keys(teacherNotationType).map((item: string) => {
                  const isActive = item === String(this.notation)
                  const type = isActive ? 'primary' : 'default'
                  return (
                    <Radio class={styles.radio} name={item}>
                      <Tag size="large" plain={isActive} type={type}>
                        {teacherNotationType[item]}
                      </Tag>
                    </Radio>
                  )
                })}
              </RadioGroup>
            </ColField>
            {this.chargeType === 2 && (
              <ColField required title="收费价格">
                <Field
                  clearable
                  class={styles['clear-px']}
                  placeholder="请输入收费价格"
                  v-slots={{ button: () => '元' }}
                  modelValue={this.musicPrice}
                  rules={[{ required: true, message: '请输入收费价格' }]}
                  onUpdate:modelValue={val => (this.musicPrice = val)}
                />
              </ColField>
            )}
          </ColFieldGroup>
          {this.chargeType === 2 && (
            <div class={styles.rule}>
              <p>扣除手续费后该曲目预计收入为：</p>
              <p>
                每人：
                <span>
                  {(
                    ((parseFloat(this.musicPrice || '0') || 0) *
                      (100 - this.music_sheet_service_fee)) /
                    100
                  ).toFixed(2)}
                </span>
                元/人
              </p>
              <p>您的乐谱收入将在学员购买后结算到您的账户中</p>
            </div>
          )}
        </div>
        <Sticky offsetBottom={0} position="bottom">
          <div class={styles['button-area']}>
            <Button
              type="primary"
              block
              round
              native-type="submit"
              loading={this.submitLoading}
            >
              确认
            </Button>
          </div>
        </Sticky>
        <Popup
          show={this.showPicker}
          round
          position="bottom"
          teleport="body"
          onUpdate:show={val => (this.showPicker = val)}
        >
          <Picker
            defaultIndex={this.subJectIndex}
            columnsFieldNames={{
              text: 'value'
            }}
            columns={Object.entries(this.subjectListNames).map(
              ([key, value]) => ({ label: key, value })
            )}
            onCancel={() => (this.showPicker = false)}
            onConfirm={val => {
              this.selectedSubjectList = val
              this.vlewSubjectList = val
              this.showPicker = false
            }}
          />
        </Popup>

        <Popup
          show={this.subJectVisible}
          round
          closeable
          position="bottom"
          style={{ height: '60%' }}
          teleport="body"
          onUpdate:show={val => (this.subJectVisible = val)}
        >
          <SubjectModel
            subjectList={this.subjectList}
            choiceSubjectIds={this.choiceSubjectIds}
            onChoice={this.onChoice}
            selectType="Radio"
          />
        </Popup>
        <Popup
          show={this.tagVisibility}
          round
          closeable
          position="bottom"
          style={{ height: '60%' }}
          teleport="body"
          onUpdate:show={val => (this.tagVisibility = val)}
        >
          <SelectTag
            onConfirm={this.onComfirm}
            onCancel={() => {}}
            rowSingle
            defaultValue={this.tags.join(',')}
            needAllButton={false}
          />
        </Popup>
      </Form>
    )
  }
})