yxk-electronic-archives/src/views/components/field/module/form.vue

<template>
  <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :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="96px">
        <el-form-item label="中文名称" prop="fieldCnName">
          <el-input v-model="form.fieldCnName" style="width: 560px;" />
        </el-form-item>
        <el-form-item label="字段标识" prop="fieldName">
          <el-input v-model="form.fieldName" style="width: 560px;" />
        </el-form-item>
        <el-row style="display:flex;">
          <el-form-item label="数据类型" prop="isDataType" class="field-form-item">
            <el-radio v-for="item in options" :key="item.value" v-model="form.isDataType" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="字段长度" prop="isColumnLength" class="field-form-item">
            <el-input v-model="form.isColumnLength" />
          </el-form-item>
        </el-row>
        <el-form-item label="默认值" prop="defaultValue">
          <el-input v-model="form.defaultValue" style="width: 560px;" />
        </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,
  defaultValue: '',
  isSystem: true
}
export default {
  mixins: [form(defaultForm)],
  data() {
    var checkMaxLength = (rule, value, callback) => {
      // || (!Number.isInteger(value))
      if (value !== undefined && 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])|([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: [
          { required: true, validator: checkMaxLength, trigger: 'blur' }
        ]
      },
      options: [
        {
          value: 1,
          label: '字符'
        },
        {
          value: 2,
          label: '数字'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__body {
    .el-form-item{
      margin-right: 5px;
      &.field-form-item{
        width: 334px;
        margin-right: 0;
      }
    }
  }
}
</style>