irc_web/src/views/reviewers/components/Pay.vue

<template>
  <div class="form-container basic-form">
    <el-card class="box-card">
      <div style="width: 1000px">
        <!-- v-loading="loading" -->
        <el-form
          ref="payForm"
          v-loading="loading"
          :inline="true"
          :rules="rules"
          :model="form"
          class="demo-ruleForm"
          label-width="120px"
          size="small"
        >
          <div>{{ $t('system:reviewer:title:pay') }}</div>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:BankNum')"
                prop="BankNum"
              >
                <el-input v-model="form.BankNum" clearable size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:BankName')"
                prop="BankName"
              >
                <el-input v-model="form.BankName" clearable size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:OpeningBank')"
                prop="OpeningBank"
              >
                <el-input v-model="form.OpeningBank" clearable size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:IdCard')"
                prop="IdCard"
              >
                <el-input v-model="form.IdCard" clearable size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('system:reviewer:label:BankPhoneNum')"
                prop="BankPhoneNum"
              >
                <el-input v-model="form.BankPhoneNum" clearable size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item style="margin-left: 120px">
              <el-button
                :disabled="$route.query.ReviewStatus === '1'"
                type="primary"
                :loading="loading"
                size="small"
                @click="handleSave"
              >
                {{ $t('common:button:save') }}</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getDetail, updatePaymentMode } from '@/api/reviewers'
export default {
  props: {
    reviewerId: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        BankNum: '',
        BankName: '',
        OpeningBank: '',
        IdCard: '',
        BankPhoneNum: '',
      },
      rules: {
        BankNum: [
          {
            validator: (rule, value, callback) => {
              let reg = new RegExp(/^[A-Za-z0-9]+$/, 'ig')
              if (value && !reg.test(value)) {
                callback(new Error(this.$t('common:ruleMessage:pattern')))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        IdCard: [
          {
            validator: (rule, value, callback) => {
              let reg = new RegExp(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/, 'ig')
              if (value && !reg.test(value)) {
                callback(new Error(this.$t('common:ruleMessage:pattern')))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        BankPhoneNum: [
          {
            validator: (rule, value, callback) => {
              let reg = new RegExp(/^\d{11}$/, 'i')
              if (value && !reg.test(value)) {
                callback(new Error(this.$t('common:ruleMessage:pattern')))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async handleSave() {
      try {
        let validate = await this.$refs.payForm.validate()
        if (!validate) return false
        this.form.Id = this.$route.query.Id || this.reviewerId
        this.loading = true
        let res = await updatePaymentMode(this.form)
        this.loading = false
        if (res.IsSuccess) {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    // 获取详情
    async getDetail() {
      try {
        let id = this.$route.query.Id || this.reviewerId
        if (!id) return false
        this.loading = true
        let res = await getDetail(id)
        this.loading = false
        if (res.IsSuccess) {
          Object.keys(this.form).forEach((key) => {
            this.form[key] = res.Result.PaymentModeInfo[key]
          })
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
  },
}
</script>