health.admin/src/components/PatientEdit.vue

<script setup lang="ts">
import type { VxeFormInstance, VxeFormListeners, VxeFormProps } from 'vxe-pc-ui';

import { useForm } from 'alova/client';
import { pageDiagnoseSymptomMethod, pageDiagnoseTypeMethod, pageMedicineMethod } from '@/request/api/care.api';
import { appendPatientMethod } from '@/request/api/patient.api';
import { message as Message } from 'ant-design-vue/es/components';
import RemoteSelect from '@/libs/v-select-page/RemoteSelect.vue';

interface FormModel {}

const emits = defineEmits<{
  destroy: [refresh?: boolean];
}>();

const {
  form,
  loading: submitting,
  send: submit,
  reset,
} = useForm(appendPatientMethod, {
  initialForm: {},
}).onSuccess(() => {
  Message.success(`新增患者成功`);
  emits('destroy', true);
});

const formRef = ref<VxeFormInstance<FormModel>>();
const formProps = reactive<VxeFormProps<FormModel>>({
  titleWidth: 100,
  titleAlign: 'right',
  titleColon: true,
  items: [
    { field: 'name', title: '姓名', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'phone', title: '手机号码', span: 24, itemRender: { name: 'VxeInput', props: { maxLength: 11 } } },
    {
      field: 'cardno',
      title: '身份证号',
      span: 24,
      itemRender: { name: 'VxeInput', props: { minLength: 18, maxLength: 18 } },
    },
    /*{
      field: 'gender', title: '性别', span: 24, itemRender: {
        name: 'VxeRadioGroup',
        options: [
          { label: '男', value: '0' },
          { label: '女', value: '1' },
        ],
      },
    },*/
    // { field: 'age', title: '年龄', span: 24, itemRender: { name: 'VxeNumberInput', props: { min: 0, controls: false }, } },
    { field: 'disease', title: '疾病', span: 24, slots: { default: 'disease-remote-select' } },
    { field: 'symptom', title: '证型', span: 24, slots: { default: 'symptom-remote-select' } },
    { field: 'syndrome', title: '症状', span: 24, slots: { default: 'syndrome-remote-select' } },
    {
      field: 'date',
      title: '就诊日期',
      span: 24,
      itemRender: { name: 'VxeDatePicker', props: { type: 'date', endDate: Date.now() } },
    },
    { field: 'department', title: '就诊科室', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'doctor', title: '就诊医生', span: 24, itemRender: { name: 'VxeInput' } },
    { align: 'center', span: 24, slots: { default: 'active' } },
  ],
  rules: {
    name: [{ required: true, message: '请输入姓名' }],
    phone: [{ required: true, message: '请输入手机号码' }, { validator: 'ValidMobile' }],
    cardno: [{ required: true, message: '请输入身份证号' }, { validator: 'ValidIdentityCard' }],
    /*gender: [
      { required: true, message: '请选择性别' },
    ],
    age: [
      { required: true, message: '请输入年龄' },
    ],*/
    disease: [{ required: true, message: '请选择疾病' }],
    date: [{ required: true, message: '请选择就诊日期' }],
  },
});
const formEmits: VxeFormListeners<FormModel> = {
  submit({ data }) {
    submit(data);
  },
  reset() {
    reset();
  },
};
</script>

<template>
  <vxe-form ref="formRef" :data="form" v-bind="formProps" v-on="formEmits">
    <template #active>
      <vxe-button type="submit" status="primary" content="提交" :loading="submitting"></vxe-button>
      <vxe-button type="reset" content="重置" :disabled="submitting"></vxe-button>
    </template>
    <template #disease-remote-select="{ data, field }">
      <RemoteSelect v-model:value="data[field]" :load="pageMedicineMethod" :multiple="true" key-prop="name" @blur="formRef?.validateField(field)" @update:value="formRef?.validateField(field)" />
    </template>
    <template #symptom-remote-select="{ data, field }">
      <RemoteSelect v-model:value="data[field]" :load="pageDiagnoseTypeMethod" :multiple="true" key-prop="name" @blur="formRef?.validateField(field)" @update:value="formRef?.validateField(field)" />
    </template>
    <template #syndrome-remote-select="{ data, field }">
      <RemoteSelect v-model:value="data[field]" :load="pageDiagnoseSymptomMethod" :multiple="true" key-prop="name" @blur="formRef?.validateField(field)" @update:value="formRef?.validateField(field)" />
    </template>
  </vxe-form>
</template>

<style scoped lang="scss"></style>