diff --git a/src/components/field/index.vue b/src/components/field/index.vue
new file mode 100644
index 0000000..a3a8f0f
--- /dev/null
+++ b/src/components/field/index.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="app-container  container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+      <el-table-column type="selection" width="55" />
+      <el-table-column type="index" label="序号" width="55" />
+      <el-table-column prop="fieldCnName" label="中文名称" />
+      <el-table-column prop="fieldName" label="字段标识" />
+      <el-table-column label="数据类型">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isDataType === 1">字符</span>
+          <span v-if="scope.row.isDataType === 2">数字</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isColumnLength" label="字段长度" />
+      <el-table-column label="默认值">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isDefaultValue === ''">-</span>
+          <span v-else>{{ scope.row.isDefaultValue }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--表单渲染-->
+    <eForm />
+    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
+        <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        <el-form :model="form">
+          <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
+            <el-input v-model="form.verifyCode" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { add, edit, verifyMaintenance } from '@/api/archivesConfig/field'
+import eForm from './module/form'
+import { encrypt } from '@/utils/rsaEncrypt'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+
+export default {
+
+  components: { eForm, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/field/findGroupType',
+      crudMethod: { add, edit },
+      optShow: {
+        add: true,
+        edit: true,
+        del: false,
+        download: false,
+        group: false
+      },
+      queryOnPresenterCreated: false
+    })
+  },
+  props: {
+    isType: {
+      type: Number,
+      default: 1
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    permissionStr: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', this.permissionStr + ':add'],
+        edit: ['admin', this.permissionStr + ':edit']
+      },
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      formLabelWidth: '110px',
+      btn: '',
+      showVerifyDialog: true
+    }
+  },
+  created() {
+    this.crud.title = this.title
+    this.crud.query = {
+      isType: this.isType
+    }
+    this.crud.toQuery()
+  },
+  methods: {
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+        this.verifyDialogVisible = true
+        this.btn = btn
+        return false
+      }
+    },
+    handleConfirm() {
+      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
+        if (res) {
+          // 关闭输入验证码对话框
+          this.verifyDialogVisible = false
+          this.form.verifyCode = ''
+          this.showVerifyDialog = false
+          if (this.btn === 'add') {
+            this.crud.toAdd()
+          } else if (this.btn === 'edit') {
+            this.crud.toEdit(this.crud.selections[0])
+          }
+          this.showVerifyDialog = true
+        } else {
+          this.$message.error('验证码错误！')
+        }
+      })
+    },
+    handleClose(done) {
+      this.form.verifyCode = ''
+      done()
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      if (val.length > 1) {
+        // 取出最后val的最后一个返回出来
+        const finalVal = val.pop()
+        // 清除所有选中
+        this.$refs.table.clearSelection()
+        // 给最后一个加上选中
+        this.$refs.table.toggleRowSelection(finalVal)
+        this.crud.selectionChangeHandler([finalVal])
+      } else {
+        this.crud.selectionChangeHandler(val)
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep thead .el-table-column--selection .cell {
+  display: none;
+}
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+</style>
diff --git a/src/components/field/module/form.vue b/src/components/field/module/form.vue
new file mode 100644
index 0000000..fa2cc6c
--- /dev/null
+++ b/src/components/field/module/form.vue
@@ -0,0 +1,100 @@
+<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 (!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()
+        }
+      }
+    }
+    return {
+      rules: {
+        fieldCnName: [
+          { required: true, message: '请输入中文名称', trigger: 'blur' }
+        ],
+        fieldName: [
+          { required: true, message: '请输入字段标识', trigger: 'blur' }
+        ],
+        isDataType: [
+          { required: true, message: '请选择数据类型', trigger: 'blur' }
+        ],
+        isColumnLength: [
+          { validator: checkMaxLength, trigger: 'blur' }
+        ]
+      },
+      options: [
+        {
+          value: 1,
+          label: '字符',
+          maxlength: 2000
+        },
+        {
+          value: 2,
+          label: '数字',
+          maxlength: 11
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+</style>
diff --git a/src/views/archivesConfig/commonFields/index.vue b/src/views/archivesConfig/commonFields/index.vue
index 659d123..b126d3f 100644
--- a/src/views/archivesConfig/commonFields/index.vue
+++ b/src/views/archivesConfig/commonFields/index.vue
@@ -1,144 +1,13 @@
 <template>
-  <div class="app-container  container-wrap">
-    <span class="right-top-line" />
-    <span class="left-bottom-line" />
-    <!--工具栏-->
-    <div class="head-container">
-      <crudOperation :permission="permission" />
-    </div>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
-      <el-table-column type="selection" width="55" />
-      <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="fieldCnName" label="中文名称" />
-      <el-table-column prop="fieldName" label="字段标识" />
-      <el-table-column label="数据类型">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDataType === 1">字符</span>
-          <span v-if="scope.row.isDataType === 2">数字</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="isColumnLength" label="字段长度" />
-      <el-table-column label="默认值">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDefaultValue === ''">-</span>
-          <span v-else>{{ scope.row.isDefaultValue }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--表单渲染-->
-    <eForm />
-    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
-        <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
-        <el-form :model="form">
-          <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
-            <el-input v-model="form.verifyCode" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
+  <field title="常用字段" :is-type="2" permission-str="commonFields" />
 </template>
 
 <script>
-import { add, edit, verifyMaintenance } from '@/api/archivesConfig/field'
-import eForm from './module/form'
-import { encrypt } from '@/utils/rsaEncrypt'
-import CRUD, { presenter } from '@crud/crud'
-import crudOperation from '@crud/CRUD.operation'
+import Field from '@/components/Field'
 
 export default {
   name: 'CommonFields',
-  components: { eForm, crudOperation },
-  cruds() {
-    return CRUD({
-      title: '常用字段',
-      url: 'api/field/findGroupType',
-      crudMethod: { add, edit },
-      optShow: {
-        add: true,
-        edit: true,
-        del: false,
-        download: false,
-        group: false
-      },
-      query: {
-        isType: 2
-      }
-    })
-  },
-  mixins: [presenter()],
-  data() {
-    return {
-      permission: {
-        add: ['admin', 'commonFields:add'],
-        edit: ['admin', 'commonFields:edit']
-      },
-      verifyDialogVisible: false,
-      form: {
-        verifyCode: ''
-      },
-      formLabelWidth: '110px',
-      btn: '',
-      showVerifyDialog: true
-    }
-  },
-  methods: {
-    [CRUD.HOOK.beforeToCU](crud, form, btn) {
-      if (this.showVerifyDialog) {
-        // 打开输入验证码对话框
-        this.verifyDialogVisible = true
-        this.btn = btn
-        return false
-      }
-    },
-    handleConfirm() {
-      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
-        if (res) {
-          // 关闭输入验证码对话框
-          this.verifyDialogVisible = false
-          this.form.verifyCode = ''
-          this.showVerifyDialog = false
-          if (this.btn === 'add') {
-            this.crud.toAdd()
-          } else if (this.btn === 'edit') {
-            this.crud.toEdit(this.crud.selections[0])
-          }
-          this.showVerifyDialog = true
-        } else {
-          this.$message.error('验证码错误！')
-        }
-      })
-    },
-    handleClose(done) {
-      this.form.verifyCode = ''
-      done()
-    },
-    clickRowHandler(row) {
-      this.$refs.table.clearSelection()
-      this.$refs.table.toggleRowSelection(row)
-    },
-    selectionChangeHandler(val) {
-      if (val.length > 1) {
-        // 取出最后val的最后一个返回出来
-        const finalVal = val.pop()
-        // 清除所有选中
-        this.$refs.table.clearSelection()
-        // 给最后一个加上选中
-        this.$refs.table.toggleRowSelection(finalVal)
-        this.crud.selectionChangeHandler([finalVal])
-      } else {
-        this.crud.selectionChangeHandler(val)
-      }
-    }
-  }
+  components: { Field }
 }
 </script>
 
diff --git a/src/views/archivesConfig/electronicFields/index.vue b/src/views/archivesConfig/electronicFields/index.vue
index a731455..bbf6e2f 100644
--- a/src/views/archivesConfig/electronicFields/index.vue
+++ b/src/views/archivesConfig/electronicFields/index.vue
@@ -1,144 +1,13 @@
 <template>
-  <div class="app-container  container-wrap">
-    <span class="right-top-line" />
-    <span class="left-bottom-line" />
-    <!--工具栏-->
-    <div class="head-container">
-      <crudOperation :permission="permission" />
-    </div>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
-      <el-table-column type="selection" width="55" />
-      <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="fieldCnName" label="中文名称" />
-      <el-table-column prop="fieldName" label="字段标识" />
-      <el-table-column label="数据类型">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDataType === 1">字符</span>
-          <span v-if="scope.row.isDataType === 2">数字</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="isColumnLength" label="字段长度" />
-      <el-table-column label="默认值">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDefaultValue === ''">-</span>
-          <span v-else>{{ scope.row.isDefaultValue }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--表单渲染-->
-    <eForm />
-    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
-        <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
-        <el-form :model="form">
-          <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
-            <el-input v-model="form.verifyCode" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
+  <field title="电子文件字段" :is-type="3" permission-str="electronicFields" />
 </template>
 
 <script>
-import { add, edit, verifyMaintenance } from '@/api/archivesConfig/field'
-import eForm from './module/form'
-import { encrypt } from '@/utils/rsaEncrypt'
-import CRUD, { presenter } from '@crud/crud'
-import crudOperation from '@crud/CRUD.operation'
+import Field from '@/components/Field'
 
 export default {
   name: 'ElectronicFields',
-  components: { eForm, crudOperation },
-  cruds() {
-    return CRUD({
-      title: '电子文件字段',
-      url: 'api/field/findGroupType',
-      crudMethod: { add, edit },
-      optShow: {
-        add: true,
-        edit: true,
-        del: false,
-        download: false,
-        group: false
-      },
-      query: {
-        isType: 3
-      }
-    })
-  },
-  mixins: [presenter()],
-  data() {
-    return {
-      permission: {
-        add: ['admin', 'electronicFields:add'],
-        edit: ['admin', 'electronicFields:edit']
-      },
-      verifyDialogVisible: false,
-      form: {
-        verifyCode: ''
-      },
-      formLabelWidth: '110px',
-      btn: '',
-      showVerifyDialog: true
-    }
-  },
-  methods: {
-    [CRUD.HOOK.beforeToCU](crud, form, btn) {
-      if (this.showVerifyDialog) {
-        // 打开输入验证码对话框
-        this.verifyDialogVisible = true
-        this.btn = btn
-        return false
-      }
-    },
-    handleConfirm() {
-      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
-        if (res) {
-          // 关闭输入验证码对话框
-          this.verifyDialogVisible = false
-          this.form.verifyCode = ''
-          this.showVerifyDialog = false
-          if (this.btn === 'add') {
-            this.crud.toAdd()
-          } else if (this.btn === 'edit') {
-            this.crud.toEdit(this.crud.selections[0])
-          }
-          this.showVerifyDialog = true
-        } else {
-          this.$message.error('验证码错误！')
-        }
-      })
-    },
-    handleClose(done) {
-      this.form.verifyCode = ''
-      done()
-    },
-    clickRowHandler(row) {
-      this.$refs.table.clearSelection()
-      this.$refs.table.toggleRowSelection(row)
-    },
-    selectionChangeHandler(val) {
-      if (val.length > 1) {
-        // 取出最后val的最后一个返回出来
-        const finalVal = val.pop()
-        // 清除所有选中
-        this.$refs.table.clearSelection()
-        // 给最后一个加上选中
-        this.$refs.table.toggleRowSelection(finalVal)
-        this.crud.selectionChangeHandler([finalVal])
-      } else {
-        this.crud.selectionChangeHandler(val)
-      }
-    }
-  }
+  components: { Field }
 }
 </script>
 
diff --git a/src/views/archivesConfig/systemFields/index.vue b/src/views/archivesConfig/systemFields/index.vue
index 715189c..f1777a5 100644
--- a/src/views/archivesConfig/systemFields/index.vue
+++ b/src/views/archivesConfig/systemFields/index.vue
@@ -1,144 +1,13 @@
 <template>
-  <div class="app-container  container-wrap">
-    <span class="right-top-line" />
-    <span class="left-bottom-line" />
-    <!--工具栏-->
-    <div class="head-container">
-      <crudOperation :permission="permission" />
-    </div>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
-      <el-table-column type="selection" width="55" />
-      <el-table-column type="index" label="序号" width="55" />
-      <el-table-column prop="fieldCnName" label="中文名称" />
-      <el-table-column prop="fieldName" label="字段标识" />
-      <el-table-column label="数据类型">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDataType === 1">字符</span>
-          <span v-if="scope.row.isDataType === 2">数字</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="isColumnLength" label="字段长度" />
-      <el-table-column label="默认值">
-        <template slot-scope="scope">
-          <span v-if="scope.row.isDefaultValue === ''">-</span>
-          <span v-else>{{ scope.row.isDefaultValue }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--表单渲染-->
-    <eForm />
-    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
-        <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
-        <el-form :model="form">
-          <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
-            <el-input v-model="form.verifyCode" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
+  <field title="系统字段" :is-type="1" permission-str="systemFields" />
 </template>
 
 <script>
-import { add, edit, verifyMaintenance } from '@/api/archivesConfig/field'
-import eForm from './module/form'
-import { encrypt } from '@/utils/rsaEncrypt'
-import CRUD, { presenter } from '@crud/crud'
-import crudOperation from '@crud/CRUD.operation'
+import Field from '@/components/Field'
 
 export default {
   name: 'SystemFields',
-  components: { eForm, crudOperation },
-  cruds() {
-    return CRUD({
-      title: '系统字段',
-      url: 'api/field/findGroupType',
-      crudMethod: { add, edit },
-      optShow: {
-        add: true,
-        edit: true,
-        del: false,
-        download: false,
-        group: false
-      },
-      query: {
-        isType: 1
-      }
-    })
-  },
-  mixins: [presenter()],
-  data() {
-    return {
-      permission: {
-        add: ['admin', 'systemFields:add'],
-        edit: ['admin', 'systemFields:edit']
-      },
-      verifyDialogVisible: false,
-      form: {
-        verifyCode: ''
-      },
-      formLabelWidth: '110px',
-      btn: '',
-      showVerifyDialog: true
-    }
-  },
-  methods: {
-    [CRUD.HOOK.beforeToCU](crud, form, btn) {
-      if (this.showVerifyDialog) {
-        // 打开输入验证码对话框
-        this.verifyDialogVisible = true
-        this.btn = btn
-        return false
-      }
-    },
-    handleConfirm() {
-      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
-        if (res) {
-          // 关闭输入验证码对话框
-          this.verifyDialogVisible = false
-          this.form.verifyCode = ''
-          this.showVerifyDialog = false
-          if (this.btn === 'add') {
-            this.crud.toAdd()
-          } else if (this.btn === 'edit') {
-            this.crud.toEdit(this.crud.selections[0])
-          }
-          this.showVerifyDialog = true
-        } else {
-          this.$message.error('验证码错误！')
-        }
-      })
-    },
-    handleClose(done) {
-      this.form.verifyCode = ''
-      done()
-    },
-    clickRowHandler(row) {
-      this.$refs.table.clearSelection()
-      this.$refs.table.toggleRowSelection(row)
-    },
-    selectionChangeHandler(val) {
-      if (val.length > 1) {
-        // 取出最后val的最后一个返回出来
-        const finalVal = val.pop()
-        // 清除所有选中
-        this.$refs.table.clearSelection()
-        // 给最后一个加上选中
-        this.$refs.table.toggleRowSelection(finalVal)
-        this.crud.selectionChangeHandler([finalVal])
-      } else {
-        this.crud.selectionChangeHandler(val)
-      }
-    }
-  }
+  components: { Field }
 }
 </script>