resource-admin/src/views/music-library/music-sheet/modal/save-categroy-dialog.tsx

import {NButton, NCascader, NForm, NFormItem, NInput, NSpace, useMessage} from 'naive-ui'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {filterPointCategory} from '@/views/teaching-manage/unit-test'
import {musicSheetCategoriesSave, musicSheetCategoriesUpdate} from "@views/music-library/api";

export default defineComponent({
  emits: ['close', 'getList'],
  props: ['actvieRow', 'saveMode', 'list'],
  name: 'save-categroy-dialog',
  setup(props, {emit}) {
    const message = useMessage()
    const formRef = ref()
    const parentList = ref([
      {name: '顶级分类', id: 0},
      ...filterPointCategory(props.list, 'musicSheetCategoriesList')
    ] as any)
    const state = reactive({
      loading: false,
      dataList: [] as any,
      btnLoading: false
    })
    const forms = reactive({
      id: '',
      name: '',
      enable: true,
      parentId: '0'
    } as any)

    const onSubmit = async () => {
      formRef.value?.validate(async (errors: any) => {
        if (errors) {
          return;
        }
        state.btnLoading = true
        try {
          if(props.saveMode==='add'){
            const {data} = await musicSheetCategoriesSave({...forms})
            emit('getList')
            message.success('添加成功')
          }else {
            const {data} = await musicSheetCategoriesUpdate({...forms})
            emit('getList')
            message.success('修改成功')
          }
        } catch (error) {
        }
        state.btnLoading = false
      })
    }

    onMounted(() => {
      if (props.saveMode === 'add') {
        // 添加子分类
        if (props.actvieRow && props.actvieRow.id) {
          forms.parentId = props?.actvieRow.id + ''
        }
      } else {
        for (let key in props?.actvieRow) {
          forms[key] = props?.actvieRow[key]
        }
      }
    })
    return () => (
        <div>
          <NForm ref={formRef} model={forms}>
            {props.saveMode === 'add' && props.actvieRow && (
                <NFormItem label="父级分类" path="parentId">
                  <NCascader
                      placeholder="请选择父级分类"
                      v-model:value={forms.parentId}
                      options={parentList.value}
                      checkStrategy="all"
                      expandTrigger="hover"
                      childrenField="musicSheetCategoriesList"
                      valueField="id"
                      labelField="name"
                      disabled={true}
                  />
                </NFormItem>
            )}

            <NFormItem
                label="分类名称"
                rule={[
                  {
                    required: true,
                    message: '请输入分类名称',
                    trigger: ['blur', 'input']
                  }
                ]}
                path="name"
            >
              <NInput
                  v-model:value={forms.name}
                  placeholder="请输入分类名称"
                  maxlength={25}
                  showCount
                  clearable
              ></NInput>
            </NFormItem>
          </NForm>
          <NSpace justify="end">
            <NButton type="default" onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
                type="primary"
                onClick={() => onSubmit()}
                loading={state.btnLoading}
                disabled={state.btnLoading}
            >
              确认
            </NButton>
          </NSpace>
        </div>
    )
  }
})