yxk-storeroom-system/src/views/components/field/module/form.vue

<template>
  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="中文名称" prop="fieldCnName">
          <el-input v-model="form.fieldCnName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="字段标识" prop="fieldName">
          <el-input v-model="form.fieldName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="数据类型" prop="isDataType">
          <el-select v-model="form.isDataType" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="字段长度" prop="isColumnLength">
          <el-input-number v-model="form.isColumnLength" controls-position="right" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="默认值" prop="isDefaultValue">
          <el-input v-model="form.isDefaultValue" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">
          取消
        </el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
          确认
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@crud/crud'

const defaultForm = {
  id: null,
  fieldCnName: '',
  fieldName: '',
  isDataType: 1,
  isColumnLength: 100,
  isDefaultValue: ''
}
export default {
  mixins: [form(defaultForm)],
  data() {
    var checkMaxLength = (rule, value, callback) => {
      if (value !== undefined && (!Number.isInteger(value) || value <= 0)) {
        callback(new Error('请输入正整数数字值'))
      } else {
        if (this.form.isDataType === 1 && value > 2000) {
          callback(new Error('字符最大长度不能超过2000位'))
        } else if (this.form.isDataType === 2 && value > 11) {
          callback(new Error('数字最大长度不能超过11位'))
        } else {
          callback()
        }
      }
    }
    var checkFieldName = (rule, value, callback) => {
      const reg = /^[A-Za-z][A-Za-z_]+[a-zA-Z]*$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('字段标识只能由字母、字符“_”组成，并且必须以字母开头和结尾'))
      }
    }
    return {
      rules: {
        fieldCnName: [
          { required: true, message: '请输入中文名称', trigger: 'blur' }
        ],
        fieldName: [
          { required: true, message: '请选择字段标识', trigger: 'blur' },
          { validator: checkFieldName, trigger: 'blur' }
        ],
        isDataType: [
          { required: true, message: '请选择数据类型', trigger: 'blur' }
        ],
        isColumnLength: [
          { validator: checkMaxLength, trigger: 'blur' }
        ]
      },
      options: [
        {
          value: 1,
          label: '字符'
        },
        {
          value: 2,
          label: '数字'
        }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>