chinese-medicine/src/components/BiologicalSampleSearch/Search.vue

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-02-22 09:20:03
 * @LastEditors: aBin
 * @LastEditTime: 2021-05-31 16:01:39
-->
<template>
  <!-- search -->
  <div>
    <div class="d-flex flex-row flex-nowrap">
      <a-form :form="form" @submit="handleSubmit" class="d-flex flex-wrap align-center" layout="inline">
        <div class="fill-width d-flex">
          <a-form-item>
            <a-select placeholder="请选择医院" style="min-width: 200px" v-decorator="['hospital']" allow-clear>
              <a-select-option :key="item.id" :value="item.id" v-for="item in hospitals">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input placeholder="住院号" style="width: 200px" v-decorator="['inpatientNumber']" />
          </a-form-item>
          <a-form-item>
            <a-input placeholder="研究编号" style="width: 200px" v-decorator="['code']" />
          </a-form-item>
        </div>
        <div class="fill-width d-flex">
          <a-form-item>
            <a-select placeholder="请选择采集时间" style="min-width: 200px" v-decorator="['acquisitionTime']" allow-clear>
              <a-select-option :key="t.id" :value="t.id" v-for="t in acquisitionTime">{{ t.title }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <!-- <a-select placeholder="请选择样本类型" style="min-width: 150px" v-decorator="['sampleType']" allow-clear>
            <a-select-option :key="item.id" :value="item.id" v-for="item in types">{{ item.title }}</a-select-option>
          </a-select> -->
            <span> 样本类型: </span>
            <a-checkbox-group @change="changeType">
              <a-checkbox v-for="item in types" :key="item.id" :value="item.id">{{ item.title }}</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
          <a-button class="mr-4" html-type="submit" icon="search" type="primary">搜索</a-button>
        </div>
      </a-form>
      <div class="flex-1"></div>
    </div>
  </div>
</template>

<script>
import { getHList } from 'config/api';
export default {
  name: 'Search',
  data() {
    return {
      form: this.$form.createForm(this, { name: 'search' }),
      hospitals: [],
      types: [
        {
          id: 0,
          title: '尿标本',
        },
        {
          id: 1,
          title: '抗凝血标本',
        },
      ],
      sampleType: [],
      acquisitionTime: [
        {
          id: 0,
          title: '0天',
        },
        {
          id: 14,
          title: '14天',
        },
        {
          id: 90,
          title: '90天',
        },
      ],
    };
  },
  async created() {
    try {
      const res = await getHList();
      const { code, msg, data } = res.data;
      if (code === 200) {
        this.hospitals = data;
      } else {
        this.$message.error('查询医院列表失败');
      }
    } catch (error) {
      this.$message.error('查询医院列表失败');
    }
  },
  methods: {
    changeType(e) {
      this.sampleType = e;
    },
    // 提交
    handleSubmit(e) {
      e.preventDefault();
      const { sampleType } = this;
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.$emit('searchPatientMes', values, sampleType);
        }
      });
    },
  },
};
</script>