chinese-medicine/src/components/PatientInfo/PatientTable.vue

<template>
  <div>
    <!-- search -->
    <div style="width: 100%" v-if="lists && lists.list && lists.list.length > 0">
      <a-table
        :columns="columns"
        :data-source="lists.list"
        :loading="loading"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
        bordered
        class="white pa-3"
      >
        <template slot="id" slot-scope="text, record, index">
          <span>{{ index + 1 }}</span>
        </template>

        <template slot="inputStatus" slot-scope="text, record">
          <span>
            {{
              record.inputStatus === 0
                ? '新建'
                : record.inputStatus === 1
                ? '数据收集中'
                : record.inputStatus === 2
                ? '数据收集按时完成'
                : record.inputStatus === 3
                ? '数据收集超时中'
                : '废弃'
            }}
          </span>
        </template>

        <template slot="edit" slot-scope="text, record">
          <a-button @click="showModal(record.id, record.hospitalization, record.code)" class="ml-4" size="small" type="primary">
            选择
          </a-button>
        </template>
      </a-table>
    </div>
    <a-empty v-else />
    <a-modal title="选择患者" width="600px" v-model="visible" @ok="handleOk" @cancel="handleCancel">
      是否要录入住院号为：
      <span style="color: green">{{ hospitalization }}</span>
      , 研究编号为:
      <span style="color: green">{{ recordCode }}</span>
      , 的患者的相关数据
    </a-modal>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { generatePatientReport } from 'config/api';
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '研究编号',
    align: 'center',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '住院号',
    align: 'center',
    dataIndex: 'hospitalization',
    key: 'hospitalization',
  },
  {
    title: '对照组',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'inputStatus',
    key: 'inputStatus',
    scopedSlots: { customRender: 'inputStatus' },
  },
  {
    title: '编辑',
    align: 'center',
    dataIndex: 'edit',
    key: 'edit',
    width: 200,
    scopedSlots: { customRender: 'edit' },
  },
];

export default {
  name: 'PatientTable',

  props: { lists: { type: Object, default: null } },

  data() {
    return {
      columns,
      loading: false,
      visible: false,
      hasPatientId: false,
      patientId: '', // 患者Id
      hospitalization: '', // 患者住院号
      recordCode: '', // 患者研究编号
    };
  },

  computed: {
    pagination() {
      const { pageNum, pageSize, total } = this.lists;
      return {
        current: pageNum,
        pageSize,
        total: +total,
      };
    },
  },

  methods: {
    ...mapMutations('home', ['setPatientId', 'setHospitalization', 'setRecordCode']),
    showModal(id, hospitalization, recordCode) {
      this.patientId = id;
      this.hospitalization = hospitalization;
      this.recordCode = recordCode;
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
      this.visible1 = false;
    },
    handleOk() {
      this.chooseItem(this.patientId, this.hospitalization, this.recordCode);
      this.visible1 = true;
    },
    // 选择病患
    async chooseItem(id, hospitalization, recordCode) {
      try {
        this.setPatientId(id);
        this.setHospitalization(hospitalization);
        this.setRecordCode(recordCode);
        localStorage.setItem('patientId', id);
        localStorage.setItem('hospitalization', hospitalization);
        localStorage.setItem('recordCode', recordCode);
        const params = { param: { patientId: id } };
        const res = await generatePatientReport(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          console.log(data);
          localStorage.setItem('reportId', data.id);
        }
        if (localStorage.getItem('patientId') && localStorage.getItem('hospitalization')) {
          this.visible = false;
          this.$message.success('选择成功');
        }
      } catch (error) {
        console.log(error);
      }
    },

    handleTableChange(pagination) {
      const { current } = pagination;
      this.$emit('handleSelPatientMes', current);
    },
  },
};
</script>