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="75%"
    :closable="true"
    @cancel="close"
    @ok="handleSubmit"
    :visible="visible"
    destroyOnClose
  >
      <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" >
                <j-search-select-tag v-model="formState.userId" placeholder="请选择用户名称" 
                   dict="sys_user,realname,username" @search="searchName" />
              </a-form-model-item>
              <!-- <a-form-model-item label="证件所有人"  prop="userId" >
                <j-search-select-tag v-model="formState.userId" placeholder="请选择用户名称" 
                   dict="sys_user,realname,username" @search="searchName" style="width:71%" v-if="inputMethod =='select'"/>
                   <a-input   placeholder="请输入"  v-model="formState.name" style="width:71%" v-if="inputMethod =='input'"/>
                <a-button type="primary" style="margin-left: 8%;" v-model="formState.name" @click="changeInputMethod">切换</a-button>
              </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="起始日期" prop="beginDate" >
                <a-date-picker
                 style="width: 100%"
                 placeholder="请选择起始时间"
                v-model="formState.beginDate"
               />
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="到期时间"  prop="endDate">
                <a-date-picker
                 style="width: 100%"
                  placeholder="请选择到期时间"
                  v-model="formState.endDate"
                 />
               </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="管理人"  prop="manageId">
                <j-search-select-tag v-model="formState.manageId" placeholder="请选择用户名称" 
                   dict="sys_user,realname,username"/>
                <!-- <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-col :md="8" :sm="8">
              <a-form-model-item label="是否邮件通知" prop="isMessage">
                 <a-select v-model="formState.isMessage">
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="0">否</a-select-option>
                 </a-select>
               </a-form-model-item>
            </a-col> -->
          </a-row>
          <a-row :gutter="24">
             <a-col :md="24" :sm="8">
              <a-form-item label="附件上传"  class="upload">
               <a-upload :action="url.fileUpload" @change="aaa" :default-file-list="fileList" list-type="picture"  :beforeUpload="beforeFileUpload">
                 <a-button>
                   <a-icon type="upload"/>上传
                 </a-button>
                  <div v-if="defult == 'edit'">
                   <a @click="downloadFile">{{formState.enclosure}}</a>
                   </div>
               </a-upload>
              </a-form-item>
              <!-- <a-form-model-item label="附件上传">
                <j-upload v-model="formState.enclosure">上传</j-upload>
               </a-form-model-item> -->
            </a-col>
          </a-row>
         <a-row :gutter="24">
              <a-col :md="24" :sm="8"> 
               <a-form-model-item label="备注信息"  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 JUpload from '@/components/jeecg/JUpload'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import moment from 'moment'
import { downFile } from '@/api/manage'

export default {
    name: 'AddCertificateManagement',
    components: {
        moment,
        JUpload,
        JSearchSelectTag
    },
    data () {
        return {
            visible:false,
            defult:'add',
            formState:{
              endDate:'',
              beginDate:'',
              isMessage:'1'
            },
            inputMethod:'select',
            fileList:[],
            confirmLoading: false,
            validatorRules: {
              name:[{required: true, message: '证件名称不能为空!'}],
              userId:[{required: true, message: '证件所有人不能为空!'}],
              noticeMonth:[{required: true, message: '提前通知时间不能为空!'},{ pattern: new RegExp(/^([0-9]{1,2}|100)$/, "g"), message: '只能输入正整数!'}],
              code:[{required: true, message: '证件编号不能为空!'}],
              manageId:[{required: true, message: '管理人不能为空!'}],
              isMessage:[{required: true, message: '是否邮件通知不能为空!'}],
              beginDate:[{required: true, message: '起始日期不能为空!'}],
              endDate:[{required: true, message: '到期时间不能为空!'}],
            },
            url: {
                fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
                dowfile:window._CONFIG['domianURL'] +"/sys/common/static/"
            }
      }
    },
    created () {
        
    },
    computed: {
       
    },
    methods: {
      //下载
      downloadFile(){
        window.location.href =this.url.dowfile + this.formState.enclosure;
      },
      beforeFileUpload(file, fileList){
        if(fileList.lenght >1 || this.fileList.length>=1){
           this.$message.error('只可上传一个文件');
        }
      },
      aaa(info) {
        if(info.file.status !=='error'){
          this.formState.enclosure = info.file.response.message
          this.fileList.push(info.file.response.message)
        }else{
          this.formState.enclosure = ''
        }
      },
     close(){
       this.visible = false
       this.formState={}
       this.defult='add',
       this.enDate=''
       this.beDate=''
       this.fileList =[]
     },
     changeInputMethod(){
      if(this.inputMethod == 'select'){
        this.inputMethod = 'input'
      }else{
        this.inputMethod = 'select'
      }
     },
    handleSubmit(){
       this.$refs.form.validate(valid => {
         if(valid){
          // this.formState.isMessage = '是'
          var newobj = this.formState
          newobj.beginDate = moment(this.formState.beginDate).format('YYYY-MM-DD');
          newobj.endDate = moment(this.formState.endDate).format('YYYY-MM-DD');
          if(this.defult == 'add'){
            managementAdd(newobj).then(res => {
                    if (res.success) {
                       this.$message.success('新增成功');
                       this.close()
                       this.$emit('close')
                    }else{
                      this.$message.error(res.message);
                    }
            })
          }else {
            managementEdit(newobj).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;
}
/deep/ .upload .ant-form-item-control{
  display: contents !important;
}

</style>