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

import {NButton, NForm, NFormItem, NInput, NSelect, NSpace, useMessage} from 'naive-ui'
import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
import {subjectUpdate, subjectSave} from "@views/system-manage/subject-manage/api";
import UploadFile from "@components/upload-file";

export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {
      }
    },
    categoryList: {
      type: Object as PropType<any>,
      default: () => []
    },
    instrumentList: {
      type: Object as PropType<any>,
      default: () => []
    }
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const state = reactive({
      forms: {
        categoryId: null,
        name: null,
        img: null,
        musicalInstrumentIds: [],
      },
      rowData: {},
      categoryList: [],
      instrumentList: [],
    })
    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') {
            const params: any = {
              ...state.forms,
              musicalInstrumentIds: state.forms.musicalInstrumentIds?.join(',') || ''
            }
            await subjectSave(params)
            message.success('添加成功')
          } else if (props.type === 'edit') {
            const params: any = {
              ...state.forms,
              musicalInstrumentIds: state.forms.musicalInstrumentIds?.join(',') || '',
              id: props.data.id
            }
            await subjectUpdate(params)
            message.success('修改成功')
          }

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

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        state.forms.categoryId = data.categoryId
        state.forms.name = data.name
        state.forms.img = data.img
        state.forms.musicalInstrumentIds = data.musicalInstrumentIds?.split(',') || [];
      }
      console.log("pca", props.categoryList)
      props.categoryList.forEach((next: any) => {
        next.disabled = !next.enableFlag
      })
      props.instrumentList.forEach((next: any) => {
        next.disabled = !next.enableFlag
      })
    })

    return () => (
        <div style="background: #fff; padding-top: 12px">
          <NForm
              model={state.forms}
              ref={formsRef}
              label-placement="left"
              label-width="auto">
            <NFormItem
                label="声部分类"
                path="categoryId"
                rule={[
                  {
                    required: true,
                    message: '请选择声部分类'
                  }
                ]}
            >
              <NSelect
                  clearable
                  v-model:value={state.forms.categoryId}
                  placeholder="请选择声部分类"
                  options={props.categoryList as any}
                  filterable
              />
            </NFormItem>
            <NFormItem
                label="声部名称"
                path="name"
                rule={[
                  {
                    required: true,
                    message: '请输入声部名称'
                  }
                ]}
            >
              <NInput
                  v-model:value={state.forms.name}
                  placeholder="请输入声部名称"
                  clearable
                  maxlength={10}
                  showCount
              ></NInput>
            </NFormItem>
            <NFormItem
                label="声部图片"
                path="img"
                rule={[
                  {
                    required: true,
                    message: '请输入声部图片'
                  }
                ]}
            >
              <UploadFile
                  accept=".jpg,.jpeg,.png"
                  tips="请上传大小1M以内的JPG、PNG图片"
                  v-model:fileList={state.forms.img}
                  cropper
                  bucketName="cbs"
                  options={{
                    autoCrop: true, //是否默认生成截图框
                    enlarge: 2, //  图片放大倍数
                    autoCropWidth: 200, //默框高度
                    fixedBox: true, //是否固定截图框大认生成截图框宽度
                    autoCropHeight: 200, //默认生成截图小 不允许改变
                    previewsCircle: false, //预览图是否是原圆形
                    title: '声部图片'
                  }}
              />
            </NFormItem>
            <NFormItem
                label="关联乐器"
                path="musicalInstrumentIds"
                rule={[
                  {
                    required: false,
                    message: '请选择关联乐器'
                  }
                ]}
            >
              <NSelect
                  multiple
                  clearable
                  v-model:value={state.forms.musicalInstrumentIds}
                  placeholder="请选择关联乐器"
                  options={props.instrumentList as any}
              />
            </NFormItem>
          </NForm>

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