【功能完善】公司管理界面--是否归属集团字段,显示是或者否
需求
公司管理界面–是否归属集团字段,在数据库中存储的字段是 belong字段,记录如下:
这里不想让它显示1或者0,而是让它显示 是或者否
这里提供三个解决方案
解决方案A
在数据库中使用case when进行判断.
原SQL语句如下:
SELECT
company_id,
company_name,
company_shortname,
belong,
create_by,
create_time,
STATUS,
del_flag,
update_by,
update_time
FROM
dig_company
修改后的SQL语句如下:
SELECT
company_id,
company_name,
company_shortname,
CASE
WHEN belong = 1 THEN
'是'
WHEN belong = 0 THEN
'否'
ELSE
'其他'
END AS belong,
create_by,
create_time,
STATUS,
del_flag,
update_by,
update_time
FROM
dig_company
查询后结果集如下:
优缺点分析
原本数据库的belong字段是tinyint
类型,在后端java的实体类中是Integer类型
使用case when进行SQL判断后,就把它变成了String类型,前台实体类需要进行把该字段变为String类型,然后重写getter和setter方法。
这样既要重写xml中的SQL语句,又要修改实体类,还是比较麻烦的。
解决方案B
我们看到账号状态这个字段,在页面上显示的是个类似图标的样式,而这个字段在数据库中这样存储的:
为什么它存储的是0,显示的却是正常呢?
我们看前台是如何实现的。
它定义了一个statusOptions
,来看下它是如何初始化的。
它是在created方法中,去查询了一个名为sys_normal_disable
的字典数据。
这个sys_normal_disable
数据在字典中是如何定义的呢?
看一下数据是如何匹配到标签。
它定义的status中,如果数据键值为0
(dictValue),则数据标签显示正常
(dict_label),回显样式显示 主要
(listClass)
如果数据键值为1
,则数据标签显示停用
,回显样式显示 危险
那我仿照上面定义的样式,也来定义一个字典数据,取名为is_blog_group
INSERT INTO `ry-cloud`.`sys_dict_type` (`dict_id`, `dict_name`, `dict_type`, `status`, `create_by`, `create_time`, `update_by`, `update_time`, `remark`) VALUES ('101', '归属集团', 'is_blog_group', '0', 'admin', '2021-11-12 08:52:29', '', NULL, '公司是否归属集团');
INSERT INTO `ry-cloud`.`sys_dict_data` (`dict_code`, `dict_sort`, `dict_label`, `dict_value`, `dict_type`, `css_class`, `list_class`, `is_default`, `status`, `create_by`, `create_time`, `update_by`, `update_time`, `remark`) VALUES ('101', '1', '是', '1', 'is_blog_group', NULL, 'primary', 'N', '0', 'admin', '2021-11-12 09:31:15', '', NULL, '是否归属集团');
INSERT INTO `ry-cloud`.`sys_dict_data` (`dict_code`, `dict_sort`, `dict_label`, `dict_value`, `dict_type`, `css_class`, `list_class`, `is_default`, `status`, `create_by`, `create_time`, `update_by`, `update_time`, `remark`) VALUES ('102', '2', '否', '0', 'is_blog_group', NULL, 'danger', 'N', '0', 'admin', '2021-11-12 09:31:51', '', NULL, '是否归属集团');
is_blog_group
定义好了,怎么初始化呢。
字典数据定义好之后,还要进行前端页面的改造,如下:
因为this.getDicts()方法后端已经定义好了,它先取缓存,如果没有再查询数据库,因此后端的代码无需改造。
因此改动以上三处,就可以在前端页面使用该字典数据了。
部署测试
优缺点分析
- 优点:只改动前端,无需改动后端
- 缺点:首先要定义字典数据,然后再前端页面进行改造,改动地方比较大
解决方案C
这个方案,是我在写解决方案B的时候,查看代码时,无意中看到的。
请注意一下 回显样式(listClass)
在前端页面是如何显示的?
它是一个下拉框,但是跟我之前写的下拉框是不一样的。
我之前的下拉框,是要先去数据库查询数据,然后在前台页面展示。
以修改车间
的隶属公司
字段进行展示
我为什么要去数据库中查询?
首先,公司这个信息是在后台维护的,它不是固定值,它是动态变化的,可能需要添加,修改,删除等功能。
如果写到字典里,那么每添加一个公司,就需要在字典表里新增一条记录,还需要关联公司表的company_id,这样数据库耦合度太高,而且功能太繁琐了。
因此,我写在了后端,单表增删改即可。
有点扯远了,还是回到回显样式这个字段上。
这个字段是如何展示的,让我们看一下前端的 代码。
可以看到,它的初始化方法是写在前端页面上,而且是写死的,是固定值,不会在变动。
我灵机一动,我的是否归属集团,也是固定值,只有0和1,我是不是也可以写死在页面上呢?
仿照一下这个回显样式的代码,修改前端代码,如下:
// 帐号状态字典
statusOptions: [],
belongOptions: [
{
value: "1",
label: "是"
},
{
value: "0",
label: "否"
}
],
测试部署1
我了个大草,怎么啥也不显示呢
我不禁陷入了沉思,回显样式是个下拉框,而我要做的是在列表中显示。
这两个似乎是不同的功能。
我察觉到了一些不同的地方:
一个是el-option 标签,一个是dict-tag标签
dict-tag标签 这个标签是字典标签,本来的数据是通过getDits
方法进行获取,这个方法获取的值是个对象,里面有固定的属性值。
既然这样,仿一个代码,如下:
// 帐号状态字典
statusOptions: [],
belongOptions: [
{
dictLabel: "是",
dictValue: "1"
},
{
dictLabel: "否",
dictValue: "0"
}
],
- 补充内容
dictLabel:前端页面显示的值
dictValue: 是数据库中的值
部署测试2
虽然显示是和否,但是它们的样式是一样的,既然这样给它添加个样式先。
// 帐号状态字典
belongOptions: [
{
dictLabel: "是",
dictValue: "1",
listClass: "primary"
},
{
dictLabel: "否",
dictValue: "0",
listClass: "danger"
}
],
- 补充说明
dictLabel:前端页面显示的值
dictValue: 是数据库中的值
listClass:前端页面展示的样式
以上三个数据不是胡乱添加的,它是SysDictData
实体类中的属性名。
测试部署3
优缺点分析
这个方案更加方便,只需要改动一个前端页面,只需要改动两处功能即可。