liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

门类管理 门类字段管理

master
z_yu 3 years ago
parent
2a65ae47f7
commit
73f3d2a603
4 changed files with 382 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      src/views/category/baseInfo/index.vue
  2. 173
      src/views/category/fieldManage/index.vue
  3. 107
      src/views/category/fieldManage/module/form.vue
  4. 33
      src/views/category/index.vue

76
src/views/category/baseInfo/index.vue
View File

@ -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>

173
src/views/category/fieldManage/index.vue
View File

@ -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>

107
src/views/category/fieldManage/module/form.vue
View File

@ -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>

33
src/views/category/index.vue
View File

@ -44,15 +44,16 @@
<span class="right-top-line" />
<span class="left-bottom-line" />
<ul class="tab-nav">
<li :class="{'active-tab-nav': activeIndex == 0}">基本信息<i /></li>
<li :class="{'active-tab-nav': activeIndex == 1}">门类字段管理<i /></li>
<li :class="{'active-tab-nav': activeIndex == 2}">著录界面管理<i /></li>
<li :class="{'active-tab-nav': activeIndex == 3}">列表界面浏览设置<i /></li>
<li :class="{'active-tab-nav': activeIndex == 4}">浏览排序规则设置<i /></li>
<li :class="{'active-tab-nav': activeIndex == 5}">档号规则设置<i /></li>
<li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li>
<li :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">门类字段管理<i /></li>
<li :class="{'active-tab-nav': activeIndex == 2}" @click="changeActiveTab(2)">著录界面管理<i /></li>
<li :class="{'active-tab-nav': activeIndex == 3}" @click="changeActiveTab(3)">列表界面浏览设置<i /></li>
<li :class="{'active-tab-nav': activeIndex == 4}" @click="changeActiveTab(4)">浏览排序规则设置<i /></li>
<li :class="{'active-tab-nav': activeIndex == 5}" @click="changeActiveTab(5)">档号规则设置<i /></li>
<!-- 最右侧装饰img -->
<span class="tab-right-img" />
</ul>
<component :is="comName" />
</el-col>
</el-row>
</div>
@ -63,12 +64,15 @@ import crudDict from '@/api/archivesConfig/dict'
import CRUD, { presenter, header } from '@crud/crud'
import eForm from './form'
import sortDialog from './sortDialog'
import baseInfo from './baseInfo/index'
import fieldManage from './fieldManage/index'
import descriptionPreview from './descriptionPreview/index'
import crudOperation from '@crud/CRUD.operation'
import { findSubsetById } from '@/api/archivesConfig/dictDetail'
export default {
name: 'Category',
components: { crudOperation, eForm, sortDialog },
components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview },
cruds() {
return [
CRUD({
@ -114,6 +118,18 @@ export default {
// sortTableData: []
}
},
computed: {
comName: function() {
if (this.activeIndex === 0) {
return 'baseInfo'
} else if (this.activeIndex === 1) {
return 'fieldManage'
} else if (this.activeIndex === 2) {
return 'descriptionPreview'
}
return 'baseInfo'
}
},
methods: {
// 右边初始化数据是空
// [CRUD.HOOK.beforeRefresh]() {
@ -168,6 +184,9 @@ export default {
this.$refs.sort.sortVisible = true
// this.rowDrop()
})
},
changeActiveTab(data) {
this.activeIndex = data
}
}
}

Write Preview
Loading…
Cancel
Save