# Form 表单

<template>
  <w-form :model="form" ref="form" label-width="85px" :rules="rules">
    <w-form-item label="医院名称" prop="hosName.name" required>
      <w-input v-model="form.hosName.name" :maxlength="20" showCounter
        placeholder="如：上海华山附属医院"></w-input>
    </w-form-item>
    <w-form-item label="区域" prop="region">
      <w-select v-model="form.region" placeholder="请选择">
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </w-option>
      </w-select>
    </w-form-item>
    <w-form-item label="地址" prop="place">
      <w-cascader
        :options="placeOptions"
        v-model="form.place"
        clearable
      ></w-cascader>
    </w-form-item>
    <w-form-item label="类型" prop="type">
      <w-tree-select
        v-model="form.type"
        v-bind="treeSelectParams">
      </w-tree-select>
    </w-form-item>
    <w-form-item label="时间选择" prop="range">
      <w-date-picker v-model="form.range"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </w-date-picker>
    </w-form-item>
    <w-form-item label="常用项目" prop="project">
      <w-checkbox-group v-model="form.project">
        <w-checkbox :label="1">阶段小结</w-checkbox>
        <w-checkbox :label="2">查房纪录</w-checkbox><br />
        <w-checkbox :label="3">就诊记录</w-checkbox>
        <w-checkbox :label="4">文件汇总</w-checkbox>
      </w-checkbox-group>
    </w-form-item>
    <w-form-item label="显示病史" prop="isShow">
      <w-radio-group v-model="form.isShow">
        <w-radio :label="true">显示</w-radio>
        <w-radio :label="false">不显示</w-radio>
      </w-radio-group>
    </w-form-item>
    <w-form-item label="加急" prop="urgent">
      <w-switch v-model="form.urgent"
        active-color="#0F49ED"
        inactive-color="#C5D0D9">
      </w-switch>
    </w-form-item>
    <w-form-item label="医嘱补录" prop="note">
      <w-input
        v-model="form.note"
        type="textarea"
        placeholder="请对病人医嘱进行补录"
        :rows="6">
      </w-input>
    </w-form-item>
    <w-form-item style="text-align: right;">
      <w-button @click="reset">重 置</w-button>
      <w-button type="primary" @click="submit">发 送</w-button>
    </w-form-item>
  </w-form>
</template>
<script>
export default {
  data () {
    return {
      rules: {
        'hosName.name': [{
          required: true, message: '请输入医院名称', trigger: ['blur']
        }],
        region: [{
          required: true, message: '请选择区域', trigger: 'change'
        }],
        place: [{
          required: true, type: 'array', message: '请选择地址', trigger: 'change'
        }],
        type: [{
          required: true, type: 'array', message: '请选择医院类型', trigger: 'change'
        }],
        range: [{
          required: true, type: 'array', message: '请选择时间范围', trigger: 'change'
        }],
        project: [{
          required: true, type: 'array', message: '请选择常用项目', trigger: 'change'
        }],
        isShow: [{
          required: true, type: 'boolean', message: '请选择是否显示病历', trigger: 'change'
        }],
        note: [{
          required: true, message: '请补录医嘱内容', trigger: 'blur'
        }]
      },
      form: {
        zoom: '',
        type: ['1', '2-2'],
        place: ['110000', '110100', '110101'],
        range: [],
        project: [],
        hosName: {
          name: '省立医院'
        },
        urgent: '',
        isShow: '',
        note: '',
        region: '',
      },
      treeSelectParams: {
        multiple: true,
        clearable: true,
        placeholder: '请选择类型',
        treeClickParent: true,
        filterable: false,
        'check-strictly': true,
        'default-expand-all': true,
        'expand-on-click-node': false,
        treeData: [
          {
            testId: '1',
            name: '综合医院',
            disabled: true,
            child: [
              {
                testId: '1-1',
                name: '省立医院'
              }
            ]
          },
          {
            testId: '2',
            name: '肿瘤医院',
            child: [
              {
                testId: '2-2',
                disabled: true,
                name: '省立肿瘤医院'
              }
            ]
          },
          {
            testId: '3',
            name: '妇幼医院'
          },
        ],
        treeProps: {
          children: 'child',
          label: 'name',
          disabled: 'disabled',
          value: 'testId'
        }
      },
      options: [
        {
          value: '选项1',
          label: '安徽'
        }, {
          value: '选项2',
          label: '上海'
        }, {
          value: '选项3',
          label: '北京'
        }, {
          value: '选项4',
          label: '南京'
        }, {
          value: '选项5',
          label: '深圳'
        }
      ],
      placeOptions: regionData,
    }
  },
  methods: {
    submit () {
      this.$refs.form.validateForm((valid) => {
        if (valid) {
          // 通过验证
          console.log('submit !')
        } else {
          // 未通过
          console.log('invalid form !')
        }
      })
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<template>
  <w-form :model="form" ref="form" label-width="85px">
    <template v-for="(item, index) of form.dynamicArr">
      <w-form-item
        :key="index"
        :label="item.label" :prop="`dynamicArr.${index}.value`"
        :rules="[{
          required: true, message: '该项为必填项', trigger: ['blur']
        }]">
        <w-input v-model="form.dynamicArr[index].value"></w-input>
      </w-form-item>
    </template>
    <w-form-item style="text-align: right;">
      <w-button @click="reset">重 置</w-button>
      <w-button type="primary" @click="submit">发 送</w-button>
    </w-form-item>
  </w-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        dynamicArr: [{
          label: '医院名称',
          value: ''
        }, {
          label: '患者姓名',
          value: ''
        }]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validateForm((valid) => {
        if (valid) {
          // 通过验证
          console.log('submit !')
        } else {
          // 未通过
          console.log('invalid form !')
        }
      })
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>