文件库/专题库字段管理

2 years ago · 30ea241b4c
12 changed files with 718 additions and 6 deletions
--- a/src/api/system/fileLibraryField.js
+++ b/src/api/system/fileLibraryField.js
@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/documentField/editField',
+    method: 'post',
+    data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/documentField/editField',
+    method: 'post',
+    data
+  })
+}
+
+export function verifyMaintenance(code) {
+  const params = {
+    code
+  }
+  return request({
+    url: 'api/dictionary/maintenanceVerification',
+    method: 'get',
+    params
+  })
+}
+export default { add, edit, verifyMaintenance }
--- a/src/api/system/subjectLibraryField.js
+++ b/src/api/system/subjectLibraryField.js
@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/special/editField',
+    method: 'post',
+    data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/special/editField',
+    method: 'post',
+    data
+  })
+}
+
+export function verifyMaintenance(code) {
+  const params = {
+    code
+  }
+  return request({
+    url: 'api/dictionary/maintenanceVerification',
+    method: 'get',
+    params
+  })
+}
+export default { add, edit, verifyMaintenance }
--- a/src/views/system/fileLibraryField/commonFields/index.vue
+++ b/src/views/system/fileLibraryField/commonFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'CommonFields',
--- a/src/views/system/fileLibraryField/electronicFields/index.vue
+++ b/src/views/system/fileLibraryField/electronicFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'ElectronicFields',
--- a/src/views/system/fileLibraryField/field/index.vue
+++ b/src/views/system/fileLibraryField/field/index.vue
@ -0,0 +1,210 @@
+<template>
+  <div>
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission">
+        <template v-slot:right>
+          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
+            <i class="iconfont icon-daochu" />
+            全部导出
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 286px)" @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.defaultValue === ''">-</span>
+          <span v-else>{{ scope.row.defaultValue }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--表单渲染-->
+    <eForm ref="eform" />
+    <el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="verifyDialogVisible" :before-close="handleClose">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">这里为技术人员维护系统时使用，普通用户无需设置</p>
+          <p class="delt-tip"><span>注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        </div>
+        <el-form :model="form" style="margin-top:30px;" @submit.native.prevent>
+          <el-form-item label="维护验证码" :label-width="formLabelWidth">
+            <el-input v-model="form.verifyCode" show-password style="width: 480px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="verifyDialogVisible=false">取消 </el-button>
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { add, edit, verifyMaintenance } from '@/api/system/fileLibraryField'
+import eForm from './module/form'
+import { encrypt } from '@/utils/rsaEncrypt'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import { mapGetters } from 'vuex'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
+export default {
+  name: 'Field',
+  components: { eForm, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/documentField/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
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  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
+      }
+    },
+    [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+      if (form.isColumnLength === null) {
+        form.isColumnLength = undefined
+      }
+    },
+    [CRUD.HOOK.beforeSubmit]() {
+      this.crud.form.isType = this.isType
+      if (this.crud.status.add > CRUD.STATUS.NORMAL) {
+        this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
+      }
+    },
+    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)
+      }
+    },
+    doExport(data) {
+      this.crud.downloadLoading = true
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const params = {
+          'isType': this.isType
+        }
+        exportFile(this.baseApi + '/api/documentField/download?' + qs.stringify(params, { indices: false }))
+        this.crud.downloadLoading = false
+      }).catch(() => {
+      })
+    }
+  }
+}
+</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>
--- a/src/views/system/fileLibraryField/field/module/form.vue
+++ b/src/views/system/fileLibraryField/field/module/form.vue
@ -0,0 +1,117 @@
+<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>
--- a/src/views/system/fileLibraryField/systemFields/index.vue
+++ b/src/views/system/fileLibraryField/systemFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'SystemFields',
--- a/src/views/system/subjectLibraryField/commonFields/index.vue
+++ b/src/views/system/subjectLibraryField/commonFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'CommonFields',
--- a/src/views/system/subjectLibraryField/electronicFields/index.vue
+++ b/src/views/system/subjectLibraryField/electronicFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'ElectronicFields',
--- a/src/views/system/subjectLibraryField/field/index.vue
+++ b/src/views/system/subjectLibraryField/field/index.vue
@ -0,0 +1,210 @@
+<template>
+  <div>
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission">
+        <template v-slot:right>
+          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
+            <i class="iconfont icon-daochu" />
+            全部导出
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 286px)" @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.defaultValue === ''">-</span>
+          <span v-else>{{ scope.row.defaultValue }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--表单渲染-->
+    <eForm ref="eform" />
+    <el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="verifyDialogVisible" :before-close="handleClose">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">这里为技术人员维护系统时使用，普通用户无需设置</p>
+          <p class="delt-tip"><span>注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        </div>
+        <el-form :model="form" style="margin-top:30px;" @submit.native.prevent>
+          <el-form-item label="维护验证码" :label-width="formLabelWidth">
+            <el-input v-model="form.verifyCode" show-password style="width: 480px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="verifyDialogVisible=false">取消 </el-button>
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { add, edit, verifyMaintenance } from '@/api/system/subjectLibraryField'
+import eForm from './module/form'
+import { encrypt } from '@/utils/rsaEncrypt'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import { mapGetters } from 'vuex'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
+export default {
+  name: 'Field',
+  components: { eForm, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/special/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
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  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
+      }
+    },
+    [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+      if (form.isColumnLength === null) {
+        form.isColumnLength = undefined
+      }
+    },
+    [CRUD.HOOK.beforeSubmit]() {
+      this.crud.form.isType = this.isType
+      if (this.crud.status.add > CRUD.STATUS.NORMAL) {
+        this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
+      }
+    },
+    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)
+      }
+    },
+    doExport(data) {
+      this.crud.downloadLoading = true
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const params = {
+          'isType': this.isType
+        }
+        exportFile(this.baseApi + '/api/documentField/download?' + qs.stringify(params, { indices: false }))
+        this.crud.downloadLoading = false
+      }).catch(() => {
+      })
+    }
+  }
+}
+</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>
--- a/src/views/system/subjectLibraryField/field/module/form.vue
+++ b/src/views/system/subjectLibraryField/field/module/form.vue
@ -0,0 +1,117 @@
+<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>
--- a/src/views/system/subjectLibraryField/systemFields/index.vue
+++ b/src/views/system/subjectLibraryField/systemFields/index.vue
@ -3,7 +3,7 @@
 </template>

 <script>
-import Field from '@/views/components/field'
+import Field from '../field/index'

 export default {
  name: 'SystemFields',