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

import {NButton, NForm, NFormItem, NInput, NSpace, useMessage} from 'naive-ui'
import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
import {subjectCategorySave, subjectCategoryUpdate} from "@views/system-manage/subject-manage/api";

export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    applyList: {
      type: Array as PropType<any>,
      default: () => []
    },
    data: {
      type: Object as PropType<any>,
      default: () => {
      }
    }
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const forms = reactive({
      name: null,
      defaultScore: null,
      code: null,
      img: null,
      hz: null,
      parentId: 0
    })
    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 subjectCategorySave({...forms})
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await subjectCategoryUpdate({
              ...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.img = data.img
        forms.name = data.name
        forms.code = data.code
      }
    })

    return () => (
        <div style="background: #fff; padding-top: 12px">
          <NForm model={forms} ref={formsRef} label-placement="left" label-width="auto">
            <NFormItem
                label="分类名称"
                path="name"
                rule={[
                  {
                    required: true,
                    message: '请输入分类名称'
                  }
                ]}
            >
              <NInput
                  v-model:value={forms.name}
                  placeholder="请输入声部名称"
                  clearable
                  maxlength={10}
                  showCount
              ></NInput>
            </NFormItem>
          </NForm>

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