resource-admin/src/views/system-manage/param-settings/component/payment-operation.tsx

import { getMenus } from '@/api/system/menu'
import { clientTypeArray, openTypeArray } from '@/utils/searchArray'
import { SearchOutline } from '@vicons/ionicons5'
import {
  NForm,
  NFormItem,
  NInput,
  NSpace,
  NButton,
  useMessage,
  NRadioGroup,
  NRadio,
  NSelect
} from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { sysPaymentConfigSave, sysPaymentConfigUpdate } from '../../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({
      paramName: null,
      paramValue: null,
      clientType: null,
      openType: null,
      description: null
    })
    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 sysPaymentConfigSave({ ...forms })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await sysPaymentConfigUpdate({ ...forms, id: props.data.id })
            message.success('修改成功')
          }

          emit('close')
          emit('getList')
        } catch (e: any) {
          console.log(e, 'e')
        }
        btnLoading.value = false
      })
    }

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.paramName = data.paramName
        forms.paramValue = data.paramValue
        forms.clientType = data.clientType
        forms.openType = data.openType
        forms.description = data.description
      }
    })

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100">
          <NFormItem
            label="提供方"
            path="openType"
            rule={[
              {
                required: true,
                message: '请输入提供方'
              }
            ]}
          >
            <NSelect
              placeholder="请输入提供方"
              v-model:value={forms.openType}
              options={openTypeArray}
            />
          </NFormItem>
          <NFormItem
            label="客户端类型"
            path="clientType"
            rule={[
              {
                required: true,
                message: '请输入客户端类型'
              }
            ]}
          >
            <NSelect
              placeholder="请输入客户端类型"
              v-model:value={forms.clientType}
              options={clientTypeArray}
            />
          </NFormItem>
          <NFormItem
            label="参数名称"
            path="paramName"
            rule={[
              {
                required: true,
                message: '请输入参数名称'
              }
            ]}
          >
            <NInput
              v-model:value={forms.paramName}
              placeholder="请输入参数名称"
              clearable
              maxlength={100}
            ></NInput>
          </NFormItem>
          <NFormItem
            label="参数值"
            path="paramValue"
            rule={[
              {
                required: true,
                message: '请输入参数值'
              }
            ]}
          >
            <NInput
              v-model:value={forms.paramValue}
              placeholder="请输入参数值"
              clearable
              maxlength={100}
            ></NInput>
          </NFormItem>
          <NFormItem label="备注" path="description">
            <NInput
              v-model:value={forms.description}
              maxlength={180}
              type="textarea"
              rows={2}
              placeholder="请输入备注"
              clearable
            />
          </NFormItem>
        </NForm>

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