colexiu-project/src/views/user-info/music-operation/index.tsx

import ColUpload from '@/components/col-upload'
import request from '@/helpers/request'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElOptionGroup,
  ElRadioButton,
  ElRadioGroup,
  ElSelect
} from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'music-operation',
  data() {
    const query = this.$route.query
    return {
      type: query.type || 'create',
      subjectList: [],
      form: {
        xmlFileUrl: '',
        hasBeat: 0,
        mp3Url: '',
        bgmp3Url: '',
        musicSheetName: '',
        composer: '',
        vlewSubjectList: null as any,
        tags: [] as string[],
        canEvaluate: 1,
        showFingering: 1,
        chargeType: 0
      }
    }
  },
  async mounted() {
    try {
      await request.get('/api-website/open/subject/subjectSelect').then(res => {
        this.subjectList = res.data || []
        // console.log(this.subjectList)
        // this.subjectListNames = this.getSubjectListNames(teacherState.subjectList)
      })
    } catch {}
  },
  methods: {
    onSubmit() {
      ;(this as any).$refs.form.validate((valid: any) => {
        if (valid) {
          console.log(true)
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName('is-error')
            isError[0].scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            })
          })
          return false
        }
      })
    }
  },
  render() {
    return (
      <div class={styles.form}>
        <div class="text-base text-[#333] leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
          {this.type === 'create' ? '新建乐谱' : '编辑乐谱'}
        </div>

        <ElForm
          size="large"
          labelPosition="left"
          labelWidth={'120px'}
          model={this.form}
          ref="form"
          class="px-52 py-5"
        >
          <ElFormItem
            label="MusicXML文件"
            prop="xmlFileUrl"
            rules={[{ required: true, message: '请选择MusicXML文件' }]}
          >
            <ColUpload
              v-model:modelValue={this.form.xmlFileUrl}
              bucket={'cloud-coach'}
              accept={'application/xml'}
              uploadType={'file'}
              extraTips="文件最大不能超过5MB"
            />
          </ElFormItem>
          <ElFormItem
            label="是否带节拍器"
            prop="hasBeat"
            rules={[{ required: true, message: '请选择是否带节拍器' }]}
          >
            <ElRadioGroup v-model={this.form.hasBeat}>
              <ElRadioButton label={0} class="mr-3 w-24">
                否
              </ElRadioButton>
              <ElRadioButton label={1} class="w-24">
                是
              </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="伴奏文件" prop="mp3Url">
            <ColUpload
              v-model:modelValue={this.form.mp3Url}
              bucket={'cloud-coach'}
              accept={'.mp3'}
              uploadType={'file'}
              extraTips="文件最大不能超过5MB"
            />
          </ElFormItem>
          <ElFormItem
            label="原音文件"
            prop="bgmp3Url"
            rules={[{ required: true, message: '请选择原音文件' }]}
          >
            <ColUpload
              v-model:modelValue={this.form.bgmp3Url}
              bucket={'cloud-coach'}
              accept={'.mp3'}
              uploadType={'file'}
              extraTips="文件最大不能超过5MB"
            />
          </ElFormItem>
          <ElFormItem
            label="曲目名称"
            prop="musicSheetName"
            rules={[{ required: true, message: '请输入曲目名称' }]}
          >
            <ElInput
              v-model={this.form.musicSheetName}
              placeholder="请选择曲目名称"
            />
          </ElFormItem>
          <ElFormItem
            label="作曲人"
            prop="composer"
            rules={[{ required: true, message: '请输入作曲人' }]}
          >
            <ElInput v-model={this.form.composer} placeholder="请输入作曲人" />
          </ElFormItem>
          <ElFormItem
            label="曲目声部"
            prop="vlewSubjectList"
            rules={[
              { required: true, message: '请选择曲目声部', trigger: 'change' }
            ]}
          >
            <ElSelect
              filterable
              v-model={this.form.vlewSubjectList}
              placeholder="请选择曲目声部"
              class="w-full"
            >
              {this.subjectList.map((group: any) => (
                <ElOptionGroup key={group.id} label={group.name}>
                  {group.subjects &&
                    group.subjects.map((item: any) => (
                      <ElOption
                        key={item.id}
                        value={item.id}
                        label={item.name}
                      />
                    ))}
                </ElOptionGroup>
              ))}
            </ElSelect>
          </ElFormItem>
          <ElFormItem
            label="曲目标签"
            prop="tags"
            rules={[{ required: true, message: '请选择曲目标签' }]}
          >
            <ElInput v-model={this.form.tags} placeholder="请输入乐谱名称" />
          </ElFormItem>
          <ElFormItem
            label="是否评测"
            prop="canEvaluate"
            rules={[{ required: true, message: '请选择是否评测' }]}
          >
            <ElRadioGroup v-model={this.form.canEvaluate}>
              <ElRadioButton label={0} class="mr-3 w-24">
                否
              </ElRadioButton>
              <ElRadioButton label={1} class="w-24">
                是
              </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem
            label="指法展示"
            prop="showFingering"
            rules={[{ required: true, message: '请选择指法展示' }]}
          >
            <ElRadioGroup v-model={this.form.showFingering}>
              <ElRadioButton label={0} class="mr-3 w-24">
                否
              </ElRadioButton>
              <ElRadioButton label={1} class="w-24">
                是
              </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem
            label="是否收费"
            prop="chargeType"
            rules={[{ required: true, message: '请选择是否收费' }]}
          >
            <ElRadioGroup v-model={this.form.chargeType}>
              <ElRadioButton label={0} class="mr-3 w-24">
                否
              </ElRadioButton>
              <ElRadioButton label={1} class="w-24">
                是
              </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
        </ElForm>
        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
          <ElButton
            class="!w-40 !h-[38px]"
            onClick={() => {
              this.$router.back()
            }}
          >
            取消
          </ElButton>
          <ElButton
            type="primary"
            class="!w-40 !h-[38px]"
            onClick={this.onSubmit}
          >
            提交审核
          </ElButton>
        </div>
      </div>
    )
  }
})