修改患者管理 新增患者表单字段

src/components/PatientEdit.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import type { VxeFormListeners, VxeFormProps } from 'vxe-pc-ui';
+import type { VxeFormInstance, VxeFormListeners, VxeFormProps } from 'vxe-pc-ui';
+
 import { useForm } from 'alova/client';
+import { 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 {}
 
@@ -22,6 +25,7 @@ const {
   emits('destroy', true);
 });
 
+const formRef = ref<VxeFormInstance<FormModel>>();
 const formProps = reactive<VxeFormProps<FormModel>>({
   titleWidth: 100,
   titleAlign: 'right',
@@ -45,17 +49,22 @@ const formProps = reactive<VxeFormProps<FormModel>>({
       },
     },*/
     // { field: 'age', title: '年龄', span: 24, itemRender: { name: 'VxeNumberInput', props: { min: 0, controls: false }, } },
-    { field: 'disease', title: '疾病', span: 24, itemRender: { name: 'VxeInput' } },
-    { field: 'symptom', title: '证型', span: 24, itemRender: { name: 'VxeInput' } },
-    { field: 'date', title: '就诊日期', span: 24, itemRender: { name: 'VxeDatePicker', props: { type: 'datetime' } } },
+    { field: 'disease', title: '疾病', span: 24, slots: { default: 'disease-remote-select' } },
+    { field: 'symptom', title: '证型', span: 24, slots: { default: 'symptom-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: '请输入手机号码' }],
-    cardno: [{ required: true, message: '请输入身份证号' }],
+    phone: [{ required: true, message: '请输入手机号码' }, { validator: 'ValidMobile' }],
+    cardno: [{ required: true, message: '请输入身份证号' }, { validator: 'ValidIdentityCard' }],
     /*gender: [
       { required: true, message: '请选择性别' },
     ],
@@ -77,11 +86,17 @@ const formEmits: VxeFormListeners<FormModel> = {
 </script>
 
 <template>
-  <vxe-form :data="form" v-bind="formProps" v-on="formEmits">
+  <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" 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" key-prop="name" @blur="formRef?.validateField(field)" @update:value="formRef?.validateField(field)" />
+    </template>
   </vxe-form>
 </template>
 

src/components/UserEdit.vue

@@ -85,7 +85,8 @@ const formProps = reactive<VxeFormProps<FormModel>>({
       { required: true, message: '请输入工号' },
     ],
     phonenumber: [
-      { required: true, validator: 'ValidMobile' },
+      { required: true, message: '请输入手机号码' },
+      { validator: 'ValidMobile' },
     ],
   },
 });

src/libs/v-select-page/RemoteSelect.vue

@@ -18,10 +18,13 @@ const props = withDefaults(
 
 const emits = defineEmits<{
   update: [value: any];
+  focus: [];
+  blur: [];
 }>();
 
 const attrs = useAttrs() as {
   multiple?: boolean;
+  debounce?: number;
 };
 
 
@@ -79,8 +82,9 @@ function onSelect(items: Record<string, unknown>[]) {
 }
 </script>
 <template>
-  <SelectPageList
+  <SelectPageList ref="el"
     language="zh-chs"
+    :debounce="attrs.debounce ?? 300"
     :multiple="attrs.multiple"
     :key-prop="props.keyProp"
     :label-prop="props.labelProp"
@@ -88,6 +92,7 @@ function onSelect(items: Record<string, unknown>[]) {
     @fetch-data="fetchData"
     @fetch-selected-data="fetchSelectedData"
     @selection-change="onSelect"
+    @visible-change="$event ? emits('focus') : emits('blur')"
   />
 </template>
 <style lang="scss">

src/libs/vxe/validator.ts

@@ -3,9 +3,21 @@ import { VxeUI } from 'vxe-pc-ui';
 // 手机号校验
 VxeUI.validators.add('ValidMobile', {
   itemValidatorMethod({ itemValue, rule }) {
-    if ( !rule.required ) return;
-    if ( !itemValue ) return new Error(`请输入手机号码`);
-    if ( !/^1[3-9]\d{9}$/.test(itemValue) ) return new Error('手机号码格式不正确');
+    if ( itemValue && !/^1[3-9]\d{9}$/.test(itemValue) ) return new Error('手机号码格式不正确');
+  },
+});
+// 身份证号
+VxeUI.validators.add('ValidIdentityCard', {
+  itemValidatorMethod({ itemValue, rule }) {
+    if (!itemValue || typeof itemValue !== 'string') return;
+    if (!/^[1-9]\d{5}(1[8-9]|2\d)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X|x)$/.test(itemValue)) return new Error('身份证号格式不正确');
+    // 加权因子
+    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+    // 校验码
+    const check = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
+    const char = itemValue.split('');
+    const value = char.slice(0, 17).reduce((c, v, i) => c + (+v * weights[i]), 0);
+    if (check[value % 11] !== char[17].toUpperCase()) return new Error('身份证号校验不通过');
   },
 });
 VxeUI.validators.add('ValidPassword', {