chinese-medicine/src/components/CaseTable/CaseTable.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="setData"
        bordered
        class="white pa-3"
      >
        <template slot="hospitalId" slot-scope="text, record">
          <span>{{ record.hospitalId }}</span>
        </template>
        <template slot="inputStatus" slot-scope="text, record">
          <span v-if="record.inputStatus === 0">新建</span>
          <span v-else-if="record.inputStatus === 1">数据收集中</span>
          <span v-else-if="record.inputStatus === 2">数据收集按时完成</span>
          <span v-else-if="record.inputStatus === 3">数据收集超时中</span>
          <span v-else-if="record.inputStatus === 4">废弃</span>
        </template>
        <template slot="id" slot-scope="text, record">
          <a-icon @click="showEditModal(record.id, record.inputStatus)" class="pointer pointerEdit" theme="twoTone" type="edit" />
          <a-button type="primary" @click="details(record.id, record.hospitalization)">查看详情</a-button>
        </template>
      </a-table>
    </div>
    <a-empty v-else />
    <a-modal title="修改状态" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-select :default-value="defaultValue" :key="defaultValue" style="width: 200px" @change="handleChange">
        <a-select-option v-for="(item, index) in statusList" :value="index" :key="index"> {{ item }} </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { upPatientMes } from 'config/api';
const columns = [
  {
    title: '住院号',
    align: 'center',
    dataIndex: 'hospitalization',
    key: 'hospitalization',
  },
  {
    title: '医院',
    align: 'center',
    dataIndex: 'hosName',
    key: 'hosName',
    scopedSlots: { customRender: 'hosName' },
  },
  {
    title: '对照组',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '录入状态',
    align: 'center',
    dataIndex: 'inputStatus',
    key: 'inputStatus',
    scopedSlots: { customRender: 'inputStatus' },
  },
  {
    title: '修改时间',
    align: 'center',
    dataIndex: 'updateAt',
    key: 'updateAt',
    scopedSlots: { customRender: 'updateAt' },
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
];

export default {
  name: 'CaseTable',

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

  data() {
    return {
      columns,
      loading: false,
      visible: false,
      confirmLoading: false,
      recordId: '',
      recordType: '',
      defaultValue: '',
      statusList: ['新建', '数据收集中', '数据收集按时完成', '数据收集超时中', '废弃'],
    };
  },

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

  methods: {
    ...mapMutations('home', ['setPatientId', 'setHospitalization']),

    // 选择病患
    chooseItem(id) {
      this.setPatientId(id);
    },
    setData(pagination) {
      const { current } = pagination;
      this.$emit('setData', current);
    },
    details(Id, hospitalization) {
      console.log(Id, hospitalization);
      this.setPatientId(Id);
      this.setHospitalization(hospitalization);
      this.$router.push('/patientInfo');
    },
    showEditModal(id, inputStatus) {
      this.recordId = id;
      this.recordType = inputStatus;
      this.defaultValue = this.statusList[inputStatus];
      this.visible = true;
      console.log(this.recordType);
    },
    async handleOk() {
      try {
        const params = {
          param: {
            id: this.recordId,
            inputStatus: this.recordType,
          },
        };
        const res = await upPatientMes(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.$emit('setData');
          this.visible = false;
          this.$message.success('修改成功');
        } else {
          this.$message.error('修改失败');
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleChange(e) {
      this.recordType = e;
    },
  },
};
</script>