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

<template>
  <a-modal
    :title="(defult == 'add')?'新增':'编辑'"
    width="55%"
    :closable="true"
    @cancel="close"
    @ok="handleSubmit"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState"  >
        <a-form-item label="证件名称" >
          <a-input
            placeholder="请输入"
           v-model="formState.name"
          />
        </a-form-item>

        <a-form-item label="证件所有人"  >
          <a-input placeholder="请输入" v-model="formState.userId"/>
        </a-form-item>

        <a-form-item label="证件编号"  >
          <a-input placeholder="请输入" v-model="formState.code"/>
        </a-form-item>
        <a-form-item label="起始日期"  >
            <a-date-picker
            style="width: 100%"
            placeholder="请选择起始时间"
            v-model="beDate"
          />
        </a-form-item>
        <a-form-item label="到期时间"  >
            <a-date-picker
            style="width: 100%"
            placeholder="请选择到期时间"
            v-model="enDate"
          />
        </a-form-item>
        <a-form-item label="管理人"  >
          <a-input placeholder="请输入" v-model="formState.manageId"/>
        </a-form-item>
        <a-form-item label="提前通知时间/月"  >
          <a-input placeholder="请输入" v-model="formState.noticeMonth"/>
        </a-form-item>
         <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
          <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
        </a-form-item>
      </a-form>
    </a-spin>

  </a-modal>
</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:''
        }
    },
    created () {
        
    },
    computed: {
       
    },
    methods: {
     close(){
       this.visible = false
       this.formState={}
       this.defult='add',
       this.enDate=''
       this.beDate=''
     },
    handleSubmit(){
      this.$nextTick(() => {
        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>