PointsMall_Admin/src/views/distribution/interBank/interBankOutAdd.vue

<template>
  <div style="padding:30px 75px 50px;">
    <div style="width:100%;position: absolute;top: 15px;left: 0;">
      <div style="display: flex;
    align-items: center;padding-left: 20px;">
        <svg-icon
        icon-class="iconsiji2"
        style="font-size: 30px;margin-right: 10px;"
      />
      <span>{{importData.id?'修改支行联行号信息':'添加支行联行号信息'}}</span>
      </div>
      <el-divider style="width:100%"></el-divider>
    </div>
    <el-row>
      <el-form ref="form" :rules="rules" :model="importData" label-width="80px" size="mini">
        <el-row :gutter="gridNum.row.gutter">
          
          <el-col :span="24">
            <el-form-item label="id" prop="id">
              <el-input @blur="phonejy"  disabled v-model="importData.id" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联行号" prop="cnaps">
              <el-input v-model="importData.cnaps" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="支行名称" prop="bankName">
              <el-input v-model="importData.bankName" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <div :span="24" style="margin-top:20px;text-align:right;width:100%;position: absolute;bottom: 15px;left: 0;">
      <el-divider style="width:100%"></el-divider>
      <el-button @click="close">取消</el-button>
      <el-button
        type="primary"
        @click="submit"
        style="margin-right:20px;"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import interBank from '@/api/dict/interBank'
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'
// import oilDicMarkApi from '@/api/dict/oilDicMark'
import oilOmsRoleApi from '@/api/auth/oilOmsRole'
import { imgCompress } from '@/utils'
import utils from '@/utils/encode'
const JSESSIONID = utils.uuid()
export default {
  props:{
    importData:{
      type:Object,
      default:()=> {
        return {
          id:'',
          cnaps:'',
          bankName:''
        }
      }
    }
  },
  data() {
    // var timeNO =0
    // const chekPhone = (rule, value, callback) => { // 检查手机号是否存在
    //   // timeNO+=1
    //   console.log()
      
    // }
    return {
      imgCompress,
      companyList: [],
      roleList: [],
      roleTypeList: [],
      gridNum: {
        row: {
          gutter: 50
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      updateFileUrl: process.env.VUE_APP_UPLOAD_URL,
      rules: {
        // phone: [
        //   { required: true, message: '请输入手机号', trigger: 'blur' },
        //   { pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[0-9]|17[0135678]|18[0-9]|19[0-9])\d{8}$/, message: '目前只支持中国大陆的手机号码' },
        //   // { validator: chekPhone,}
        // ],
        phone: [{ required: true, message: '数据不能为空', trigger: 'blur' }, { pattern: /^1[3|5|7|8|9|6]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        companyIds: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        roleIds: [
          { required: true, message: '请分配权限', trigger: 'change' }
        ],
        // roleId: [
        //   { required: true, message: '请选择角色', trigger: 'change' }
        // ],
      },
    }
  },
  created() {
    console.log("aaaa",this.importData)
  },
  methods: {
    phonejy(){
      this.$refs.form.validateField('phone', (errMsg) => {
    if (errMsg) {
        console.log('校验失败')
    }else{
      //...
    console.log('成功')
    var data ={
      phone :this.importData.phone
    }
    oilCompanyInfoApi.validatePhoneUserRolePermissions(data).then(res => {
      if (res.data!==null && res.data!=='') {
        this.importData.userName = res.data.userName
        this.importData.companyIds = res.data.companyIds
        this.importData.roleIds = res.data.roleIds
      }else{
        this.importData.userName = null
        this.importData.companyIds = []
        this.importData.roleIds = []
      }
    })
            }
        })
      // if (this.importData.phone.length === 11) {
      //   var data ={
      //     phone :this.importData.phone
      //   }
      //   oilCompanyInfoApi.validatePhoneUserRolePermissions(data).then(res => {
      //     //  if(timeNO!==0){
      //     //   timeNO=0
      //     //   return
      //     // }
      //     // if(timeNO===0){
      //       this.importData.companyIds = res.data.companyIds
      //     this.importData.roleIds = res.data.roleIds
      //     // timeNO+=1
      //     // console.log('666666666666')
      //     // }
       
          
      //     // if (res.data) {
      //     //   return callback()
      //     // } else {
      //     //   return callback()
      //     // }
      //   })
      // }
    },
    systemSourceChange(system) { // 系统发送改变
    console.log(system,'打印系统')
      oilOmsRoleApi.getByRoleType(system).then(res => {
        this.roleList = res.data
      })
    },
    submit() {
      
      this.$refs['form'].validate((valid) => {
        
        if (valid) {
          this.save(this.importData)
          console.log(this.importData,'999999')
        }
      })
    },
    save() {
      const importData = { ...this.importData }

      // importData.nickName = md5(this.importData.nickName)
      // 保存
      console.log(this.importData,'9999')

      interBank.save(importData).then(res => {
        console.log(res.data,'保存数据')
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style>
 #uurll .el-upload-list__item, #uurll .el-upload--picture-card{
    width: 100px !important;
  height: 100px !important;
}    
#uurll .el-upload--picture-card{
  line-height: 110px;
}
#uurll .el-dialog{
  width: 500px;
}
</style>
<style scoped>
.el-divider--horizontal{
  margin: 10px 0;
  }
.el-form-item__content >>> .el-date-editor.el-input{
  width: 100%;
}
.clocdiv{
  line-height: 20px;
  display: block;
  background: #aab2bc13;
  border-radius: 5px;
  padding: 10px;
  font-size: 12px;
}
.addra{
  color: #1BCE50;
}
.addra1{
  color: #E60F0F;
}
.el-upload-list--picture-card >>> .el-upload-list__item{
  width: 100px;
  height: 100px;
}
.el-form-item__content >>> .el-upload--picture-card{
  width: 100px;
  height: 100px;
}
.el-divider--horizontal{
  margin: 10px 0;
}
.addborder{
  box-shadow: 0px 0px 3px 0px #c1c1c1;
  padding: 20px 15px;
  margin-bottom: 30px;
}
.remark{
  margin: 0 0px 10px;
}
.remark span{
  display: block;
  padding-left: 50px;
  font-size: 12px;
  margin: 5px;
}
</style>