患者信息录入界面

src/views/PatientInfo/PatientInfo.vue

@@ -1,15 +1,104 @@
 <template>
-  <div>患者信息录入</div>
+  <div class="flex-column">
+    <a-form :form="form" @submit="handleSubmit">
+      <!-- 会议时间 -->
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <h2>凝血系列：</h2>
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-input />
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-textarea style="height: 100px" />
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-radio-group v-model="value" @change="onChange">
+          <a-radio :style="radioStyle" :value="1"> 高血压 </a-radio>
+          <a-radio :style="radioStyle" :value="2"> 高血脂 </a-radio>
+          <a-radio :style="radioStyle" :value="3"> 高血糖 </a-radio>
+          <a-radio :style="radioStyle" :value="4">
+            其它
+            <a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
+          </a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <h2>血常规：</h2>
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-input />
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-textarea style="height: 100px" />
+      </a-form-item>
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="XXXX">
+        <a-radio-group v-model="value" @change="onChange">
+          <a-radio :style="radioStyle" :value="1"> 高血压 </a-radio>
+          <a-radio :style="radioStyle" :value="2"> 高血脂 </a-radio>
+          <a-radio :style="radioStyle" :value="3"> 高血糖 </a-radio>
+          <a-radio :style="radioStyle" :value="4">
+            其它
+            <a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
+          </a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item class="d-flex flex-row-reverse">
+        <a-button class="white--text px-10" html-type="submit" type="primary">提交</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>
 
 <script>
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 18 },
+};
+const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
 export default {
   name: 'PatientInfo',
   data() {
-    return {};
+    return {
+      formItemLayout,
+      tailItemLayout,
+      form: this.$form.createForm(this, { name: 'page-add' }),
+      value: 1,
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+      },
+    };
   },
 
-  methods: {},
+  methods: {
+    onChange(e) {
+      console.log('radio checked', e.target.value);
+    },
+    // 提交表单
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFieldsAndScroll(async (err, values) => {
+        if (!err) {
+          try {
+            // const param = values;
+            // const params = { param };
+            // console.log('params: ', params);
+            // const res = await addPage(params);
+            // const { data, msg, code } = res.data;
+            // this.$emit('closeModal');
+            // if (code === 200) {
+            //   this.$message.success('添加成功');
+            // } else {
+            //   throw msg;
+            // }
+          } catch (error) {
+            // this.$message.error(error || '添加失败');
+          }
+        }
+      });
+    },
+  },
 };
 </script>