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

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-02-22 09:20:03
 * @LastEditors: wally
 * @LastEditTime: 2021-04-20 17:20:18
-->
<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>