5 changed files with 279 additions and 402 deletions
-
170src/components/field/index.vue
-
100src/components/field/module/form.vue
-
137src/views/archivesConfig/commonFields/index.vue
-
137src/views/archivesConfig/electronicFields/index.vue
-
137src/views/archivesConfig/systemFields/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> |
||||
@ -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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue