management/src/views/home/components/credit_add.vue

<template>
  <div>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <div slot="title" class="dialog-title">{{ form.id?'编辑':'创建' }}挂账人</div>
      <div class="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
          <el-form-item label="状态" prop="status" style="width: 100%;">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="挂账人" prop="debtor" style="width: 100%;">
            <el-input v-model="form.debtor" placeholder="请输入挂账人名称" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" style="width: 100%;">
            <el-input v-model="form.mobile" placeholder="请输入手机号" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" />
          </el-form-item>
          <el-form-item label="职位" prop="position" style="width: 100%;">
            <el-input v-model="form.position" placeholder="请输入职位" />
          </el-form-item>
          <el-form-item label="挂账额度" prop="creditAmount" style="width: 100%;">
            <el-input v-model="form.creditAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
              <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
          <el-form-item label="还款方式" style="width: 100%;">
            <el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
              <el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
            <div style="font-size: 12px;color: #999;">一经创建无法更改还款方式</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addCreditBuyer, editCreditBuyer } from '@/api/credit'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['couponId'],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      repaymentMethodList: [
        { label: '按总金额还款', value: 'total' },
        { label: '按订单还款', value: 'order' }
      ],
      form: {
        id: '',
        shopId: '',
        status: 0,
        debtor: '',
        mobile: '',
        position: '',
        creditAmount: '',
        repaymentMethod: 'total'
      },
      rules: {
        debtor: [
          {
            required: true,
            message: '请输入挂账人名称',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        position: [
          {
            required: true,
            message: '请输入职位',
            trigger: 'blur'
          }
        ],
        creditAmount: [
          {
            required: true,
            message: '请输入挂账额度',
            trigger: 'blur'
          }
        ]
      },
      resetForm: null

    }
  },
  mounted() {
    this.resetForm = { ...this.form }
  },
  methods: {
    /**
     * 校验是否存在
     */
    isExist(val) {
      if (val) {
        return true
      } else {
        return false
      }
    },

    /**
     * 确定
     */
    async onSubmitHandle() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true
            if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
            let res
            if (!this.form.id) {
              res = await addCreditBuyer(this.form)
            } else {
              res = await editCreditBuyer(this.form)
            }
            this.$notify({
              title: '成功',
              message: `${this.form.id ? '编辑' : '添加'}成功`,
              type: 'success'
            })
            this.dialogVisible = false
            this.loading = false
            this.$emit('success', res)
          } catch (error) {
            this.loading = false
          }
        }
      })
    },

    /**
     * 打开详情
     * @param row
     */
    show(row) {
      if (row && row.id) {
        this.form = row
      } else {
        this.form = this.resetForm
      }
      this.form.status = Number(this.form.status)
      this.dialogVisible = true
      this.$refs.form.resetFields()
    },

    /**
     * 关闭
     */
    close() {
      this.dialogVisible = false
    }

  }
}
</script>

<style scoped lang="scss">
.dialog-title{
  text-align: left;
}
</style>