【功能完善】公司管理界面--是否归属集团字段，显示是或者否

需求

公司管理界面–是否归属集团字段，在数据库中存储的字段是 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

优缺点分析

这个方案更加方便，只需要改动一个前端页面，只需要改动两处功能即可。