repayFlowModal.vue 5.27 KB
<template>
  <a-modal
    :title="title"
    :width="800"
    :maskClosable="false"
    :centered='true'
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="用信流编号:" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show=" model.loanInfoNo ? true : false">
          <a-input placeholder="请输入用信流编号" :disabled="disabled" v-decorator="[ 'loanInfoNo', {'initialValue': model ? model.loanInfoNo : ''}]"/>
        </a-form-item>

        <a-form-item label="用信流名称:" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input  placeholder="请输入用信流名称" v-decorator="[ 'loanInfoName', { rules: [{ required: true, message: '请选择进件流名称' }] }]" />
        </a-form-item>

        <a-form-item label="进件流名称:" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-select placeholder="请选择进件流名称" v-decorator="['collectionNo',{ rules: [{ required: true, message: '请选择进件流名称' }] }]" :disabled="disabled">
            <a-select-option  v-for="(item,index) in processList" :key="index" :value="item.code">
              {{item.value}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="用信流模板:" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-select placeholder="请选择用信流模板" v-decorator="['collectionProcessNo',{ rules: [{ required: true, message: '请选择用信流模板' }] }]">
            <a-select-option  v-for="(item,index) in collectProcessListTemplate" :key="index" :value="item.code">
              {{item.value}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="客服电话:" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input  placeholder="请输入客服电话" v-decorator="[ 'servicePhone',{ rules: [{ required: true, message: '请输入客服电话' }] }]" />
        </a-form-item>
        <a-form-item label="自定义信息:" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input  placeholder="请输入自定义信息" v-decorator="[ 'customMessage']" />
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-textarea rows="4" placeholder="备注" v-decorator="['remark']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { saveLoanInfo, updateLoanInfo } from '@/api/insys'
  import {FeedFlowMixin} from '@/mixins/FeedFlowMixin'
  export default {
    name: "repayFlowModal",
    mixins: [FeedFlowMixin],
    data () {
      return {
        visible: false,
        confirmLoading: false,
        confirmDirty: false,
        title: '',
        validatorRules:{
          username: {
            rules:[{
              required: true,
              message: '请输入费用编号'
            }]
          },
          password:{
            rules: [{
              required: true,
              pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
              message: '密码由8位数字、大小写字母和特殊符号组成!'
            }, {
              validator: this.validateToNextPassword,
            }],
          }
        },

        model: {},

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form:this.$form.createForm(this),
        disabled: false
      }
    },
    
    methods: {
      edit (record) {
        this.form.resetFields();
        this.visible = true;
        this.model={
          id:record.id
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(record);
          this.disabled = true
        });
      },

      add (record) {
        this.form.resetFields();
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(record);
          this.disabled = false
        });
      },

      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
      },
      handleSubmit () {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            let promiseFn;
            let formData = Object.assign(this.model, values);
            if(!!this.model.id){ //编辑
              promiseFn = updateLoanInfo(formData);
            }else{
              promiseFn = saveLoanInfo(formData)
            }
            promiseFn.then((res)=>{
              if(res.status.statusCode == 0){
                this.$message.success(res.status.statusReason);
                this.$emit('ok');
              }else{
                this.$message.warning(res.status.statusReason);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            });
          }
        })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>