数据字典使用
- 一、新增数据字典
- 1、新增【图书状态】和【图书类型】数据字典
- 2、编辑字典值
- 二、代码生成配置
- 1、表单设置
- 2、关联字典
- 3、验证关联数据字典
- 三、查询操作
- 1、模糊查询
- 2、按类别查询(下拉框)
- 四、数据校验
一、新增数据字典
1、新增【图书状态】和【图书类型】数据字典
2、编辑字典值
二、代码生成配置
1、表单设置
表单对应新增功能
2、关联字典
保存并生成,如果你是新使用这个框架,可以选下面的覆盖提交,因为本来也没有什么功能
3、验证关联数据字典
新增数据看分类代码和状态代码是否关联数据字典
三、查询操作
1、模糊查询
还是在代码生辰里面配置
2、按类别查询(下拉框)
这个需要修改一下book/index.vue文件
代码生成器生成的是文本框,我们需要改成下拉框
<el-select v-model="query.categoryCode" filterable placeholder="请选择" class="filter-item" @keyup.enter.native="crud.toQuery" >
<el-option
v-for="item in dict.book_type"
:key="item.id"
:label="item.label"
:value="item.value" />
</el-select>
这个下拉框的样式可以在下面表单组件里面找到
修改完之后的样式
四、数据校验
以图书ISBN号为例,我的数据都是13位纯数字
这个部分可以仿照system/user模块的手机号校验制作
所有验证方法都在这个js里面
我们可以复制其中一个方法让AI帮我们仿写一个校验ISBN号的方法
/* 是否ISBN-13号码(13位纯数字)*/
export function validateISBN(rule, value, callback) {
const reg = /^\d{13}$/// 精确匹配13位数字
if (value === '' || value === undefined || value === null) {
callback()// 空值处理,根据需要调整
} else {
if (!reg.test(value)) {
callback(new Error('请输入正确的ISBN-13号码(13位纯数字)'))
} else {
callback() // 验证通过
}
}
}
写好校验方法之后回到system/book/index.vue
1)import校验方法
2)修改rules,新增一条规则
此时刷新前端,ISBN号校验生效
通过这个实例,可以再对图书价格,图书库存进行校验(输入非负)