4 changed files with 382 additions and 7 deletions
-
76src/views/category/baseInfo/index.vue
-
173src/views/category/fieldManage/index.vue
-
107src/views/category/fieldManage/module/form.vue
-
33src/views/category/index.vue
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<div class="base-info"> |
||||
|
<el-form ref="form" :model="form" size="small" label-width="80px"> |
||||
|
<el-form-item label="门类名称" prop="fieldCnName"> |
||||
|
<el-input v-model="form.fieldCnName" class="input-width" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="门类类型" prop="isDataType"> |
||||
|
<el-select v-model="form.isDataType" placeholder="请选择" class="input-width" :disabled="true"> |
||||
|
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> --> |
||||
|
<el-option label="区域二" value="beijing" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="关联父级" prop="fieldName"> |
||||
|
<el-input v-model="form.fieldName" class="input-width" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="档号规则" prop="isColumnLength"> |
||||
|
<el-input v-model="form.isColumnLength" class="input-width" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="内容说明" prop="isDefaultValue"> |
||||
|
<el-input v-model="form.isDefaultValue" type="textarea" :rows="4" class="input-width" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'BaseInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
showFields: [], |
||||
|
form: { |
||||
|
fieldCnName: '', |
||||
|
isDataType: '', |
||||
|
fieldName: '', |
||||
|
isColumnLength: '', |
||||
|
isDefaultValue: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/variables.scss"; |
||||
|
::v-deep .el-form { |
||||
|
.el-form-item__label { |
||||
|
line-height: 36px; |
||||
|
color: $subMenuActiveText; |
||||
|
padding: 0px 20px 0 0; |
||||
|
} |
||||
|
.el-input__inner { |
||||
|
color: #fff; |
||||
|
border: 1px solid #339cff; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
.el-textarea__inner { |
||||
|
color: #fff; |
||||
|
border: 1px solid #339cff; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
.el-form-item--small.el-form-item { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
} |
||||
|
.base-info { |
||||
|
padding: 30px; |
||||
|
} |
||||
|
.input-width { |
||||
|
width: 360px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,173 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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 prop="isColumnLength" label="著录形式" /> |
||||
|
<el-table-column prop="isColumnLength" label="对应字典" /> |
||||
|
<el-table-column prop="isColumnLength" label="显示长度" /> |
||||
|
<el-table-column label="显示一整行"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="输入字段"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="必填字段"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="自动生成"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="自动加一"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="自动补零"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="isColumnLength" label="位数" /> |
||||
|
<el-table-column label="值不重复"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--表单渲染--> |
||||
|
<eForm /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { add, edit } from '@/api/archivesConfig/field' |
||||
|
import eForm from './module/form' |
||||
|
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 |
||||
|
}) |
||||
|
}, |
||||
|
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 |
||||
|
// } |
||||
|
// }, |
||||
|
// [CRUD.HOOK.beforeToEdit](crud, form, btn) { |
||||
|
// if (form.isColumnLength === null) { |
||||
|
// form.isColumnLength = undefined |
||||
|
// } |
||||
|
// }, |
||||
|
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,107 @@ |
|||||
|
<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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue