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

import {NButton, NForm, NFormItem, NInput, NSelect, NSpace, useMessage} from 'naive-ui'
import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
import {getSelectDataFromObj} from "@/utils/objectUtil";
import {defaultScore} from "@/utils/constant";
import {musicalInstrumentSave, musicalInstrumentUpdate} from "@views/system-manage/subject-manage/api";

export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {
      }
    }
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const forms = reactive({
      name: null,
      defaultScore: null,
      code: null,
      hz: null,
      transferFlag: true,
    })
    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        try {
          btnLoading.value = true

          if (props.type === 'add') {
            await musicalInstrumentSave({...forms})
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await musicalInstrumentUpdate({
              ...forms,
              id: props.data.id
            })
            message.success('修改成功')
          }

          emit('close')
          emit('getList')
        } catch {
        }
        btnLoading.value = false
      })
    }

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.name = data.name
        forms.defaultScore = data.defaultScore
        forms.code = data.code
        forms.transferFlag = data.transferFlag
      }
    })

    return () => (
        <div style="background: #fff; padding-top: 12px">
          <NForm model={forms} ref={formsRef} label-placement="left" label-width="100px">
            <NFormItem
                label="乐器名称"
                path="name"
                rule={[
                  {
                    required: true,
                    message: '请输入乐器名称'
                  }
                ]}
            >
              <NInput
                  v-model:value={forms.name}
                  placeholder="请输入乐器名称"
                  clearable
                  maxlength={10}
                  showCount
              ></NInput>
            </NFormItem>
            <NFormItem
                label="支持转简谱"
                path="transferFlag"
                rule={[
                  {
                    required: true,
                    message: '请选择是否支持转简谱'
                  }
                ]}
            >
              <NSelect
                  v-model:value={forms.transferFlag}
                  options={
                    [
                      {
                        label: '是',
                        value: true
                      },
                      {
                        label: '否',
                        value: false
                      }
                    ] as any
                  }
                  placeholder="请选择是否支持转简谱"
                  clearable
              ></NSelect>
            </NFormItem>
            {(forms.transferFlag && (
                <NFormItem
                    label="默认谱面"
                    path="defaultScore"
                    rule={[
                      {
                        required: true,
                        message: '请选择默认谱面'
                      }
                    ]}
                >
                  <NSelect
                      clearable
                      v-model:value={forms.defaultScore}
                      placeholder="请选择默认谱面"
                      options={getSelectDataFromObj(defaultScore)}
                  />
                </NFormItem>
            ))}
            <NFormItem
                label="乐器编码"
                path="code"
                rule={[
                  {
                    required: true,
                    message: '请输入乐器编码'
                  }
                ]}
            >
              <NInput v-model:value={forms.code} placeholder="请输入乐器编码" clearable></NInput>
            </NFormItem>
          </NForm>

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