cd-work-flow-web/src/views/administrative-management/supplies-management/sup-receive/supRecAdd.vue

<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      :visible="visible"
      width="600"
      :maskClosable="false"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-row :gutter="24">

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="编码"
              prop="code"
              style="width:100%"
            >
              <a-input v-model="form.code" placeholder="请输入用品编码" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="用品名称"
              prop="supName"
              style="width:100%"
            >
              <a-select v-model="form.supName" show-search placeholder="请选择名称" style="width: 100%" >
                <a-select-option value="长尾文件夹">长尾文件夹</a-select-option>
                <a-select-option value="A4打印纸">A4打印纸</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="规格"
              prop="size"
              style="width:100%"
            >
              <a-input v-model="form.size" placeholder="请输入规格" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="库存数量"
              prop="inventoryNum"
              style="width:100%"
            >
              <a-input-number
                placeholder="请输入库存数量"
                :default-value="0"
                style="width: 100%"
                v-model="form.inventoryNum"
                :min="0"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="领用数量"
              prop="receiveNum"
              style="width:100%">
              <a-input v-model="form.receiveNum" placeholder="请输入领用数量" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="申请人"
              prop="proposer"
              style="width:100%">
              <a-input-number v-model="form.proposer" placeholder="请输入申请人" style="width: 100%" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="所属部门"
              prop="department"
              style="width:100%">
              <a-select v-model="form.department" show-search placeholder="所属选择部门" style="width: 100%">
                <a-select-option value="行政部">行政部</a-select-option>
                <a-select-option value="销售部">销售部</a-select-option>
                <a-select-option value="实施部">实施部</a-select-option>
                <a-select-option value="开发部">开发部</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <!-- 日期 -->
          <a-col :span="24">
            <a-form-model-item
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              label="申请日期"
              allowClear
              showTime
              prop="applicationDate"
              type="date"
              style="width:100%">

              <a-date-picker
                format="YYYY/MM/DD"
                v-model="form.applicationDate"
                placeholder="请选择申请日期"
                style="width: 100%"
                @change="onChange"
              >
              </a-date-picker></a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 底部按钮 -->
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="close">关闭</a-button>
        <a-button type="primary" @click="save">保存</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
    data () {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            visible: false,
            // 表单属性
            form: {
                id: '',
                code: '',
                supName: [],
                size: '',
                inventoryNum: '',
                receiveNum: '',
                proposer: '',
                department: [],
                applicationDate: null
                // 默认值必须是 moment 对象
            },
            // 表单校验
            rules: {
                supName: [{ required: true, message: '请用品名称', trigger: 'blur' }],
                size: [{ required: true, message: '请输入规格', trigger: 'blur' }],
                receiveNum: [{ required: true, message: '请输入领用数量', trigger: 'blur' }],
                proposer: [{ required: true, message: '请输入申请人', trigger: 'blur' }]
            },
            title: ''
        }
    },
    methods: {
    // 打开抽屉
        showDrawer () {
            this.visible = true
        },
        getInfo () {

        },
        // 拿到选择的日期
        onChange (value, dateString) {
            console.log('Selected Time: ', value)
            console.log('Formatted Selected Time: ', dateString)
        },
        // 保存按钮
        save () {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    // 校验成功
                    console.log(this.form)
                } else {
                    return false
                }
            })
        },
        // 关闭按钮
        close () {
            this.$refs.ruleForm.resetFields() // 清空
            this.visible = false
        }
    }
}
</script>