cd-work-flow-web/src/views/system/modules/AddCertificateManagement.vue

<template>
<div class="reply" ref = "replyModal">
  <a-modal
   :getContainer ='()=>$refs.replyModal'
    :title="(defult == 'add')?'新增':'编辑'"
    width="55%"
    :closable="true"
    @cancel="close"
    @ok="handleSubmit"
    :visible="visible"
  >
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
          <a-row :gutter="24">
            <a-col :md="8" :sm="8">
              <a-form-model-item label="证件名称" prop="name">
                <a-input   placeholder="请输入"  v-model="formState.name" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="证件所有人"  prop="userId">
                <a-input placeholder="请输入" v-model="formState.userId"/>
              </a-form-model-item>
           </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="证件编号"  prop="code">
                 <a-input placeholder="请输入" v-model="formState.code"/>
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="起始日期"  >
                <a-date-picker
                 style="width: 100%"
                 placeholder="请选择起始时间"
                v-model="beDate"
               />
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="到期时间"  >
                <a-date-picker
                 style="width: 100%"
                  placeholder="请选择到期时间"
                  v-model="enDate"
                 />
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="管理人"  >
                <a-input placeholder="请输入" v-model="formState.manageId"/>
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="提前通知时间/月"   prop="noticeMonth">
                <a-input placeholder="请输入" v-model="formState.noticeMonth"/>
               </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
              <a-col :md="24" :sm="8"> 
               <a-form-model-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume" style="height:100px !important">
                 <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
               </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
  </a-modal>
</div>
</template>

<script>
import {
    managementAdd,
    managementEdit
} from '@api/oa/cd-certificate-management'
import moment from 'moment'

export default {
    name: 'AddCertificateManagement',
    components: {
        moment
    },
    data () {
        return {
            visible:false,
            defult:'add',
            formState:{
              endDate:'',
              beginDate:''
            },
            confirmLoading: false,
            enDate:'',
            beDate:'',
            validatorRules: {
              name:[{required: true, message: '证件名称不能为空!'}],
              userId:[{required: true, message: '证件所有人不能为空!'}],
              noticeMonth:[ { pattern: new RegExp(/^([0-9]{1,2}|100)$/, "g"), message: '只能输入正整数!'}],
              code:[{required: true, message: '使用者不能为空!'}],
        },
        }
    },
    created () {
        
    },
    computed: {
       
    },
    methods: {
     close(){
       this.visible = false
       this.formState={}
       this.defult='add',
       this.enDate=''
       this.beDate=''
     },
    handleSubmit(){
       this.$refs.form.validate(valid => {
         if(valid){
          if(this.beDate == '' || !this.beDate){
            this.$message.error('请选择起始时间');
            return;
          }
          if(this.enDate == '' || !this.enDate){
            this.$message.error('请选择结束时间');
            return;
          }
          this.formState.beginDate = moment(this.beDate).format('YYYY-MM-DD');
          this.formState.endDate = moment(this.enDate).format('YYYY-MM-DD');
          if(this.defult == 'add'){
            managementAdd(this.formState).then(res => {
                    if (res.success) {
                       this.$message.success('新增成功');
                       this.close()
                       this.$emit('close')
                    }else{
                      this.$message.error(res.message);
                    }
            })
          }else {
            managementEdit(this.formState).then(res => {
                    if (res.success) {
                      this.$message.success('编辑成功');
                       this.close()
                       this.$emit('close')
                    }else{
                      this.$message.error(res.message);
                       this.$message.error(res.message);
                    }
            })
           }
         }
       })

                
               
    }
    }
}
</script>

<style scoped lang="less">
// /deep/.ant-form{
//     display: flex;
//     width: 100%;
//     flex-wrap: wrap;
//     justify-content: start;
// }

// /deep/ .ant-form-item{
//     display: flex;
//     width: 32%;
//     justify-content: start;
// }
// /deep/ .ant-form-item-label{
//   width: 37%;
// }
// .nresume{
//   width: 100% !important;
// }
// /deep/ .nresume .ant-form-item-label{
//   width: 12% !important;
// }
// /deep/ .nresume .ant-form-item-control-wrapper{
//   width: 82% !important;
// }
/deep/ .nresume .ant-input{
  height: 100px !important;
}

</style>