loan-pricing/ruoyi-ui/src/views/loanPricing/workflow/components/WorkflowCreateDialog.vue

<template>
  <el-dialog title="新增利率定价流程" :visible.sync="dialogVisible" width="900px" append-to-body @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" class="workflow-create-form">
      <!-- 基本信息 -->
      <el-divider content-position="left">基本信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户内码" prop="custIsn">
            <el-input v-model="form.custIsn" placeholder="请输入客户内码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="custName">
            <el-input v-model="form.custName" placeholder="请输入客户名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户类型" prop="custType">
            <el-select v-model="form.custType" placeholder="请选择客户类型" style="width: 100%">
              <el-option label="个人" value="个人" />
              <el-option label="企业" value="企业" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="idType">
            <el-select v-model="form.idType" placeholder="请选择证件类型" style="width: 100%">
              <el-option label="身份证" value="身份证" />
              <el-option label="统一社会信用代码" value="统一社会信用代码" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 贷款信息 -->
      <el-divider content-position="left">贷款信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请金额(元)" prop="applyAmt">
            <el-input v-model="form.applyAmt" placeholder="请输入申请金额" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="贷款利率(%)" prop="loanRate">
            <el-input v-model="form.loanRate" placeholder="请输入贷款利率" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="担保方式" prop="guarType">
            <el-select v-model="form.guarType" placeholder="请选择担保方式" style="width: 100%">
              <el-option label="信用" value="信用" />
              <el-option label="保证" value="保证" />
              <el-option label="抵押" value="抵押" />
              <el-option label="质押" value="质押" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="贷款用途" prop="loanPurpose">
            <el-select v-model="form.loanPurpose" placeholder="请选择贷款用途" style="width: 100%">
              <el-option label="消费贷款" value="consumer" />
              <el-option label="经营贷款" value="business" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="抵质押类型" prop="collType">
            <el-select v-model="form.collType" placeholder="请选择抵质押类型" style="width: 100%">
              <el-option label="一线" value="一线" />
              <el-option label="一类" value="一类" />
              <el-option label="二类" value="二类" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否有经营佐证">
            <el-switch v-model="form.bizProofActive" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="抵质押物三方所有">
            <el-switch v-model="form.collThirdPartyActive" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 中间业务标识 -->
      <el-divider content-position="left">中间业务标识</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="个人快捷支付">
            <el-switch v-model="form.midPerQuickPayActive" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人电费代扣">
            <el-switch v-model="form.midPerEleDdcActive" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业电费代扣">
            <el-switch v-model="form.midEntEleDdcActive" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业水费代扣">
            <el-switch v-model="form.midEntWaterDdcActive" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 企业标识 -->
      <el-divider content-position="left">企业标识</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="净身企业">
            <el-switch v-model="form.isCleanEntActive" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开立基本结算账户">
            <el-switch v-model="form.hasSettleAcctActive" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="制造业企业">
            <el-switch v-model="form.isManufacturingActive" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省农担担保贷款">
            <el-switch v-model="form.isAgriGuarActive" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="纳税信用等级A级">
            <el-switch v-model="form.isTaxAActive" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="县级及以上农业龙头企业">
            <el-switch v-model="form.isAgriLeadingActive" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="普惠小微借款人">
            <el-switch v-model="form.isInclusiveFinanceActive" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createWorkflow } from "@/api/loanPricing/workflow"

export default {
  name: "WorkflowCreateDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      rules: {
        custIsn: [
          { required: true, message: "客户内码不能为空", trigger: "blur" }
        ],
        custType: [
          { required: true, message: "请选择客户类型", trigger: "change" }
        ],
        guarType: [
          { required: true, message: "请选择担保方式", trigger: "change" }
        ],
        applyAmt: [
          { required: true, message: "申请金额不能为空", trigger: "blur" }
        ],
        loanRate: [
          { required: true, message: "贷款利率不能为空", trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.reset()
      }
    }
  },
  methods: {
    /** 表单重置 */
    reset() {
      this.form = {
        orgCode: '',
        runType: '1',
        custIsn: undefined,
        custName: undefined,
        custType: undefined,
        idType: undefined,
        applyAmt: undefined,
        loanRate: undefined,
        guarType: undefined,
        loanPurpose: undefined,
        collType: undefined,
        // 开关状态
        bizProofActive: false,
        collThirdPartyActive: false,
        midPerQuickPayActive: false,
        midPerEleDdcActive: false,
        midEntEleDdcActive: false,
        midEntWaterDdcActive: false,
        isCleanEntActive: false,
        hasSettleAcctActive: false,
        isManufacturingActive: false,
        isAgriGuarActive: false,
        isTaxAActive: false,
        isAgriLeadingActive: false,
        isInclusiveFinanceActive: false
      }
      this.resetForm("form")
    },
    /** 对话框关闭处理 */
    handleClose() {
      this.reset()
    },
    /** 取消按钮 */
    cancel() {
      this.dialogVisible = false
      this.reset()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 转换开关值为字符串
          const data = {
            ...this.form,
            bizProof: this.form.bizProofActive ? 'true' : 'false',
            collThirdParty: this.form.collThirdPartyActive ? 'true' : 'false',
            midPerQuickPay: this.form.midPerQuickPayActive ? 'true' : 'false',
            midPerEleDdc: this.form.midPerEleDdcActive ? 'true' : 'false',
            midEntEleDdc: this.form.midEntEleDdcActive ? 'true' : 'false',
            midEntWaterDdc: this.form.midEntWaterDdcActive ? 'true' : 'false',
            isCleanEnt: this.form.isCleanEntActive ? 'true' : 'false',
            hasSettleAcct: this.form.hasSettleAcctActive ? 'true' : 'false',
            isManufacturing: this.form.isManufacturingActive ? 'true' : 'false',
            isAgriGuar: this.form.isAgriGuarActive ? 'true' : 'false',
            isTaxA: this.form.isTaxAActive ? 'true' : 'false',
            isAgriLeading: this.form.isAgriLeadingActive ? 'true' : 'false',
            isInclusiveFinance: this.form.isInclusiveFinanceActive ? 'true' : 'false'
          }
          // 删除开关状态字段
          delete data.bizProofActive
          delete data.collThirdPartyActive
          delete data.midPerQuickPayActive
          delete data.midPerEleDdcActive
          delete data.midEntEleDdcActive
          delete data.midEntWaterDdcActive
          delete data.isCleanEntActive
          delete data.hasSettleAcctActive
          delete data.isManufacturingActive
          delete data.isAgriGuarActive
          delete data.isTaxAActive
          delete data.isAgriLeadingActive
          delete data.isInclusiveFinanceActive

          createWorkflow(data).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.dialogVisible = false
            this.$emit('success')
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.workflow-create-form .el-divider {
  margin: 8px 0 16px 0;
  font-weight: 500;
  font-size: 14px;
}
</style>