resource-admin/src/views/music-library/project-music-sheet/module/kt/updateMusic.tsx

import {defineComponent, onMounted, reactive, ref} from "vue";
import {NButton, NCascader, NForm, NFormItem, NInputNumber, NSelect, NSpace, useMessage} from "naive-ui";
import {musicSheetApplicationExtendCategoryApplicationExtendInfo, musicSheetApplicationExtendTagList, musicSheetApplicationExtendUpdate} from "@views/music-library/api";
import {getSelectDataFromObj} from "@/utils/objectUtil";
import {scoreType} from "@/utils/constant";
import {formatTree} from "@views/music-library/musicUtil";

export default defineComponent({
  name: 'project-music-cooleshow-edu-updateMusic',
  props: {
    appId: {
      type: String,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    },
    musicSheetCategories: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const message = useMessage()
    const btnLoading = ref(false)
    const forms = reactive({
      musicSheetCategoryId: null as any,
      sortNo: null as any,
      paymentType: null as any,
      isConvertibleScore: null as any,//是否支持转简谱
      status: null as any, // 是否启用
      scoreType: null as any,//默认谱面
      musicTagIds: [] as any, //标签
      recommendFlag: false, // 是否推荐
    })
    const formsRef = ref()

    const state = reactive({
      rowData: null as any,
      musicSheetTagListKt: [] as any,
      musicSheetCategories: [] as any,
    })

    const getTagList = async () => {
      try {
        const { data } = await musicSheetApplicationExtendTagList({
          applicationId: props.appId,
        })
        if (data && data.length > 0) {
          data.forEach((item: any) => {
            state.musicSheetTagListKt.push({
                ...item,
                label: item.name,
                value: item.id
            })
        })
        }
      } catch {}
    }

    onMounted(async () => {
      state.rowData = props.rowData
      formatTree(props.musicSheetCategories)
      state.musicSheetCategories = props.musicSheetCategories
      await getTagList()
      const {data} = await musicSheetApplicationExtendCategoryApplicationExtendInfo({musicSheetId: state.rowData.id, applicationId: props.appId}) as any
      if (!data) {
        message.error("加载应用失败")
        return
      }
      forms.musicTagIds = data[0].musicTagIds ? data[0].musicTagIds.split(',') : []
      forms.recommendFlag = data[0].recommendFlag
      forms.musicSheetCategoryId = data[0].musicSheetCategoryId
      forms.sortNo = data[0].sortNo
      forms.paymentType = data[0].paymentType
      forms.isConvertibleScore = data[0].isConvertibleScore
      forms.scoreType = data[0].scoreType
      forms.status = data[0].status
    })

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        btnLoading.value = true
        try {
          const res = await musicSheetApplicationExtendUpdate(
              {
                ...forms,
                musicTagIds: forms.musicTagIds ? forms.musicTagIds.join(',') : '',
                musicSheetId: state.rowData.id,
                applicationId: props.appId
              }
          ) as any;
          if (res && res.code === 200) {
            emit('close')
            emit('getList')
          }
        } catch (error) {
        }
        btnLoading.value = false
      })
    }

    return () => {
      return (
          <div style="background: #fff; padding-top: 12px">
            <NForm
                ref={formsRef}
                labelPlacement="top"
                model={forms}
                label-placement="left"
                label-width="auto"
            >
              <NFormItem
                  label="曲目标签"
                  path="musicTagIds"
                  rule={[
                    {
                      required: true,
                      message: '请选择曲目标签'
                    }
                  ]}
              >
                <NSelect
                  placeholder="请选择曲目标签"
                  value={forms.musicTagIds}
                  options={state.musicSheetTagListKt}
                  clearable
                  multiple
                  maxTagCount={2}
                  onUpdate:show={(value: any) => {
                      state.musicSheetTagListKt.forEach((item: any) => {
                        if(forms['musicTagIds']?.length >= 3) {
                            if(forms['musicTagIds']?.includes(item.id)) {
                                item.disabled = false
                            } else {
                                item.disabled = true
                            }
                        } else {
                            item.disabled = false
                        }
                    })
                  }}
                  onUpdate:value={(value) => {
                    forms['musicTagIds'] = value
                    state.musicSheetTagListKt.forEach((item: any) => {
                        if(forms['musicTagIds']?.length >= 3) {
                            if(forms['musicTagIds']?.includes(item.id)) {
                                item.disabled = false
                            } else {
                                item.disabled = true
                            }
                        } else {
                            item.disabled = false
                        }
                    })
                    
                  }} 
                />
              </NFormItem>
              <NFormItem
                  label="是否推荐"
                  path="recommendFlag"
                  rule={[
                    {
                      required: true,
                      message: '请选择是否推荐',
                      type: "boolean"
                    }
                  ]}
              >
              <NSelect
                placeholder="请选择是否推荐"
                value={forms.recommendFlag as any}
                options={[{  label: '是',  value: true },
                  { label: '否',  value: false } as any]}
                clearable
                onUpdateValue={(value) => {
                  forms['recommendFlag'] = value
                }}
              />
          </NFormItem>
              <NFormItem
                  label="乐谱教材"
                  path="musicSheetCategoryId"
                  rule={[
                    {
                      required: true,
                      message: '请选择乐谱教材'
                    }
                  ]}
              >
                <NCascader
                    valueField="id"
                    labelField="name"
                    children-field="children"
                    placeholder="请选择乐谱教材"
                    value={forms.musicSheetCategoryId}
                    options={state.musicSheetCategories}
                    checkStrategy={"child"}
                    onUpdateValue={(value: any) => {
                      forms.musicSheetCategoryId = value
                    }}
                    clearable
                />
              </NFormItem>
              <NFormItem
                  label="收费方式"
                  path="paymentType"
                  rule={[
                    {
                      required: true,
                      message: '请选择收费方式'
                    }
                  ]}
              >
                <NSelect
                    placeholder="请选择收费方式"
                    options={[
                      {
                        label:'免费',
                        value:'FREE'
                      },
                      {
                        label:'会员',
                        value:'VIP'
                      }
                    ]}
                    v-model:value={forms.paymentType}
                    clearable
                />
              </NFormItem>
              <NFormItem
                  label="默认谱面"
                  path="scoreType"
                  rule={[
                    {
                      required: true,
                      message: '请选择默认谱面'
                    }
                  ]}
              >
                <NSelect
                    v-model:value={forms.scoreType}
                    placeholder="请选择默认谱面"
                    options={getSelectDataFromObj(scoreType)}
                    clearable
                />
              </NFormItem>
              <NFormItem
                  label="支持转谱"
                  path="isConvertibleScore"
                  rule={[
                    {
                      required: true,
                      message: '请选择是否支持转谱',
                      trigger: ['input', 'blur'],
                      type: 'boolean'
                    }
                  ]}
              >
                <NSelect
                    v-model:value={forms.isConvertibleScore}
                    options={
                      [
                        {
                          label: '是',
                          value: true
                        },
                        {
                          label: '否',
                          value: false
                        }
                      ] as any
                    }
                    placeholder="请选择是否支持转谱"
                    onUpdateValue={async (value: any) => {
                      if (!value) {
                        //如果不支持，修改默认谱面
                        // forms.scoreType = 'STAVE'
                      }
                    }}
                    clearable
                ></NSelect>
              </NFormItem>
              <NFormItem
                  label="是否启用"
                  path="status"
                  rule={[
                    {
                      required: true,
                      message: '请选择是否启用'
                    }
                  ]}
              >
                <NSelect
                    placeholder="请选择是否启用"
                    options={[
                      {
                        label: '是',
                        value: true
                      },
                      {
                        label: '否',
                        value: false
                      }
                    ] as any}
                    v-model:value={forms.status}
                    clearable
                />
              </NFormItem>
              <NFormItem
                  label="排序值"
                  path="sortNo"
              >
                <NInputNumber
                    v-model:value={forms.sortNo}
                    placeholder="请输入排序值"
                    clearable
                    precision={0}
                    min={0}
                    max={9999}
                    style={{width: '100%'}}
                />
              </NFormItem>
            </NForm>

            <NSpace justify="end">
              <NButton onClick={() => emit('close')}>取消</NButton>
              <NButton type="primary" onClick={onSubmit}
                       loading={btnLoading.value}
                       disabled={btnLoading.value}
              >
                保存
              </NButton>
            </NSpace>
          </div>
      )
    }
  }
})