选择患者信息

src/components/PatientInfo/PatientAdd.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="d-flex flex-wrap pb-3">
+    <!-- 添加 -->
+    <a-modal :closable="false" footer title="新增病患" v-model="visible" width="700px">
+      <a-form :form="form" @submit="handleSubmit" ref="form">
+        <!-- 住院号 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="住院号"
+        >
+          <a-input
+            placeholder="住院号"
+            v-decorator="[
+                      'hospitalization',
+                      {
+                        rules: [
+                          { required: true, message: '住院号不能为空' },
+                          { whitespace: true, message: '住院号不能为空' },
+                          { max: 140, massage: '住院号最多140个字符' },
+                        ],
+                      },
+                    ]"
+          />
+        </a-form-item>
+        <!-- 对照组 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="对照组"
+        >
+          <a-select
+            placeholder="对照组"
+            v-decorator="['inpatientId',{rules: [{ required: true, message: '对照组不能为空' }]}]"
+          >
+            <a-select-option
+              :key="index"
+              :value="group.id"
+              v-for="(group, index) in controlGroups"
+            >{{ group.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item class="d-flex flex-row-reverse">
+          <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
+          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { savePatientMes } from 'config/api';
+
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};
+const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
+export default {
+  name: 'ActivityAdd',
+  props: { visible: { type: Boolean, default: false } },
+  data() {
+    return {
+      formItemLayout,
+      tailItemLayout,
+      form: this.$form.createForm(this, { name: 'r-d-add' }),
+    };
+  },
+
+  computed: mapState('home', ['controlGroups']),
+
+  methods: {
+    // 提交表单
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFieldsAndScroll(async (err, values) => {
+        if (!err) {
+          try {
+            const params = { param: values };
+            const res = await savePatientMes(params);
+            const { data, msg, code } = res.data;
+            this.$emit('closeModal');
+            if (code === 200) {
+              this.$message.success('添加成功');
+              this.$emit('searchMes');
+              // 清空表单
+              this.form.resetFields();
+            } else {
+              throw msg;
+            }
+          } catch (error) {
+            console.log('error: ', error);
+            this.$message.error(error || '添加失败');
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus"></style>

src/components/PatientInfo/PatientTable.vue

@@ -36,6 +36,8 @@
 </template>
 
 <script>
+import { mapMutations, mapState } from 'vuex';
+
 const columns = [
   {
     title: '序号',
@@ -53,8 +55,8 @@ const columns = [
   {
     title: '对照组',
     align: 'center',
-    dataIndex: 'inpatientId',
-    key: 'inpatientId',
+    dataIndex: 'name',
+    key: 'name',
   },
   {
     title: '状态',
@@ -97,41 +99,17 @@ export default {
   },
 
   methods: {
+    ...mapMutations('home', ['setPatientId']),
+
     // 选择病患
-    chooseItem() {
-      console.log();
+    chooseItem(id) {
+      this.setPatientId(id);
     },
 
     handleTableChange(pagination) {
       const { current } = pagination;
       this.$emit('handleSelPatientMes', current);
     },
-
-    // 查询患者基本信息
-    // async handleSelPatientMes(pageNum = 1) {
-    //   try {
-    //     const params = {
-    //       param: {
-    //         hospitalization: '',
-    //         id: 0,
-    //         inpatientId: '',
-    //         inputStatus: 0,
-    //         pageNum,
-    //         pageSize: 10,
-    //       },
-    //     };
-    //     const res = await selPatientMes(params);
-    //     const { code, msg, data } = res.data;
-    //     if (code === 200) {
-    //       this.lists = data;
-    //     } else {
-    //       this.$message.error(msg || '查询失败');
-    //       throw msg;
-    //     }
-    //   } catch (error) {
-    //     throw new Error(`CaseSearch.vue method selSearchCriteriaList: ${error}`);
-    //   }
-    // },
   },
 };
 </script>

src/components/PatientInfo/Search.vue

@@ -1,48 +1,57 @@
 <template>
   <!-- search -->
-  <a-form
-    :form="form"
-    @submit="handleSubmit"
-    class="d-flex flex-nowrap align-center"
-    layout="inline"
-  >
-    <a-form-item>
-      <a-input placeholder="住院号" style="width: 14em" v-decorator="['inpatientNumber']" />
-    </a-form-item>
-    <a-form-item>
-      <a-select
-        @change="handleGroupChange"
-        class="flex-1"
-        v-decorator="['groupValue',{ initialValue: groupValue }]"
+  <div>
+    <div class="d-flex flex-row flex-nowrap">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        class="d-flex flex-nowrap align-center"
+        layout="inline"
       >
-        <a-select-option :key="item.id" :value="item.value" v-for="item in groups">{{ item.name }}</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-button class="mr-4" html-type="submit" icon="search" type="primary">搜索</a-button>
-    <div class="flex-1"></div>
-    <a-button html-type="submit" icon="plus" type="primary">新增</a-button>
-  </a-form>
+        <a-form-item>
+          <a-input placeholder="住院号" style="width: 14em" v-decorator="['inpatientNumber']" />
+        </a-form-item>
+        <a-form-item>
+          <a-select placeholder="请选择对照组" style="min-width: 150px" v-decorator="['groupValue']">
+            <a-select-option
+              :key="item.id"
+              :value="item.id"
+              v-for="item in controlGroups"
+            >{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-button class="mr-4" html-type="submit" icon="search" type="primary">搜索</a-button>
+      </a-form>
+      <div class="flex-1"></div>
+      <a-button @click="showModal" html-type="submit" icon="plus" type="primary">新增</a-button>
+    </div>
+    <patient-add :visible="visible" @closeModal="closeModal" @searchMes="searchMes" />
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import PatientAdd from 'components/PatientInfo/PatientAdd.vue';
+
 export default {
   name: 'Search',
+  components: { PatientAdd },
   data() {
     return {
       form: this.$form.createForm(this, { name: 'search' }),
-      groups: [
-        { id: '1', value: '1', name: '对照组一' },
-        { id: '2', value: '2', name: '对照组二' },
-        { id: '3', value: '3', name: '对照组三' },
-      ],
-      groupValue: '对照组一',
+      visible: false,
     };
   },
 
+  computed: mapState('home', ['controlGroups']),
+
   methods: {
-    // 选择对照组
-    handleGroupChange(value) {
-      console.log('value: ', value);
+    showModal() {
+      this.visible = true;
+    },
+
+    closeModal() {
+      this.visible = false;
     },
 
     // 提交
@@ -50,10 +59,16 @@ export default {
       e.preventDefault();
       this.form.validateFields(async (err, values) => {
         if (!err) {
+          console.log('values: ', values);
           this.$emit('searchPatientMes', values);
         }
       });
     },
+
+    // 加入成功后再次查询
+    searchMes() {
+      this.$emit('searchPatientMes');
+    },
   },
 };
 </script>

src/config/api.js

@@ -3,6 +3,7 @@ let { proxyUrl, msgUrl } = require('@/config/setting');
 
 const tcm = `${proxyUrl}/tcm`;
 const patient = `${tcm}/patient`; // 患者相关接口
+const inpatient = `${tcm}/inpatient`; // 对照组接口
 
 // 保存患者病例信息
 export const saveCaseMes = params => axios.post(`${patient}/saveCaseMes`, params);
@@ -18,3 +19,6 @@ export const selPatientMesList = params => axios.post(`${patient}/selPatientMesL
 
 // 通过查询搜索条件
 export const selSearchCriteriaList = params => axios.post(`${patient}/selSearchCriteriaList`, params);
+
+// 查询所有对照组的信息
+export const getQuery = params => axios.post(`${inpatient}/query`, params);

src/store/modules/home/actions.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { message } from 'ant-design-vue';
 import { getUserId } from 'config/api-user';
+import { getQuery } from 'config/api';
 
 const actions = {
   /**
@@ -23,6 +24,25 @@ const actions = {
       throw error || '获取个人信息失败';
     }
   },
+
+  /**
+   * 查询所有对照组的信息
+   * @param {any} commit
+   * @param {object} params 提交的参数
+   */
+  async getControlGroups({ commit }) {
+    try {
+      const res = await getQuery();
+      const { code, msg, data } = res.data;
+      if (code === 200) {
+        commit('setControlGroups', data);
+      } else {
+        throw msg;
+      }
+    } catch (error) {
+      throw error || '获取对照组信息失败';
+    }
+  },
 };
 
 export default actions;

src/store/modules/home/mutations.js

@@ -19,6 +19,24 @@ const mutations = {
     state.user = { ...user };
     sessionStorage.setItem('user', JSON.stringify(user));
   },
+
+  /**
+   * 设置user用户信息
+   * @param {object} state
+   * @param {Array} data
+   */
+  setControlGroups(state, data) {
+    state.controlGroups = data;
+  },
+
+  /**
+   * 设置病患id
+   * @param {object} state
+   * @param {string} data
+   */
+  setPatientId(state, data) {
+    state.patientId = data;
+  },
 };
 
 export default mutations;

src/store/modules/home/state.js

@@ -1,6 +1,8 @@
 const state = {
   anyringToken: '',
   user: { id: '', phone: '', account: '' },
+  controlGroups: [], // 对照组
+  patientId: '', // 病患id
 };
 
 export default state;

src/views/SelectPatient/SelectPatient.vue

@@ -9,6 +9,7 @@
 import Search from 'components/PatientInfo/Search.vue';
 import PatientTable from 'components/PatientInfo/PatientTable.vue';
 import { selPatientMes } from 'config/api';
+import { mapState, mapActions } from 'vuex';
 
 export default {
   name: 'SelectPatient',
@@ -23,12 +24,17 @@ export default {
 
   created() {
     this.handleSelPatientMes();
+    this.getControlGroups();
   },
 
   methods: {
+    ...mapActions('home', ['getControlGroups']),
+
     searchPatientMes(value) {
-      this.hospitalization = value.inpatientNumber;
-      this.inpatientId = value.groupValue;
+      if (value) {
+        this.hospitalization = value.inpatientNumber;
+        this.inpatientId = value.groupValue;
+      }
       this.handleSelPatientMes();
     },