需求
查询车间功能页面中，显示关联的公司（company）字段
这个字典功能，在之前的添加页面已经初始化好了，现在只要拿过来用就可以了。
账号状态(status)这个字段，在初始的查询页面中，就可以使用，我们看下它是如何加载的。
隶属公司和账号状态，都应当在页面加载的时候，初始化加载进来。
所以只要寻找账号状态字段是如何添加的，就可以明白隶属公司字段应当如何添加。
查询前台页面
<el-form-item label="隶属公司" prop="companyId">
<el-select v-model="queryParams.companyId" placeholder="请选择隶属公司" clearable size="small">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="帐号状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择帐号状态" clearable size="small">
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
查看帐号状态字段是如何加载的。
created() {
this.getList();
this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data;
});
},
我们只需要照样画葫芦，把隶属公司字段，也这样写就可以了。
因为companyOptions字段，在之前添加页面中，已经完成了。
所以这里就比较省事了，只要引用方法就可以了。
改造如下：
<el-form-item label="隶属公司" prop="companyId">
<el-select v-model="queryParams.companyId" placeholder="请选择隶属公司" clearable size="small">
<el-option
v-for="dict in companyOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
created() {
this.getList();
this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data;
});
this.getWorkshop().then(response => {
this.companyOptions = response.companyOptions;
});
},
测试部署
可以，至少不显示 选择字典生成了。
但是它为什么没有加载数据呢。
我在后台方法体里，打上断点，看它究竟是如何运行的。
BUG分析
启动测试，发现虽然断点生效，但是代码根本没有进来。
也就是说，页面加载的时候，并没有运行。
为什么呢。
created() {
this.getList();
this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data;
});
this.getWorkshop().then(response => {
this.companyOptions = response.companyOptions;
});
},
getDicts和getWorkshop唯一的区别是，getDicts是全局加载进来的，而getWorkshop不是。
我想，create初始化页面时，运行了this.getList()方法，可以试试把companyOptions 扔到这个方法里进行初始化。
代码改造
this.getList()方法如下：
methods: {
/** 查询车间管理列表 */
getList() {
this.loading = true;
listWorkshop(this.queryParams).then(response => {
this.workshopList = response.rows;
this.total = response.total;
this.loading = false;
});
},
改造后：
methods: {
/** 查询车间管理列表 */
getList() {
this.loading = true;
listWorkshop(this.queryParams).then(response => {
this.companyOptions = response.companyOptions;
this.workshopList = response.rows;
this.total = response.total;
this.loading = false;
});
},
对应的request请求路径如下：
// 查询车间列表
export function listWorkshop(query) {
return request({
url: '/digital/workshop/list',
method: 'get',
params: query
})
}
在对应的controller添加方法。
原方法如下：
@PreAuthorize(hasPermi = "digital:workshop:list")
@GetMapping("/list")
public TableDataInfo list(DigWorkshop digWorkshop)
{
startPage();
List<DigWorkshop> list = workshopService.selectDigWorkshopList(digWorkshop);
return getDataTable(list);
}
/**
* 响应请求分页数据
*/
@SuppressWarnings({
"rawtypes", "unchecked" })
protected TableDataInfo getDataTable(List<?> list)
{
TableDataInfo rspData = new TableDataInfo();
rspData.setCode(HttpStatus.SUCCESS);
rspData.setRows(list);
rspData.setMsg("查询成功");
rspData.setTotal(new PageInfo(list).getTotal());
return rspData;
}
改造了半天，成了这个样子。
我突然发现，这个TableDataInfo是个表格数据对象，并不是之前定义的map对象ajaxResult。
这…没法往里面扔数据啊。
改造失败，换个思路
我想，create初始化页面时，加载了getDicts全局方法，可不可以我也写个全局方法