【关联字段如何在字典中生成】添加车间功能页面中，显示关联的公司（company）字段
新增了一个新功能，隶属公司需要从另一张表中获取。
下拉框中需要展示的是 company_id 和 company_name
前端改造
前端改造分为Vue页面和js文件
修改Vue页面
前端页面展示：
<el-form-item label="隶属公司" prop="companyId">
<el-select v-model="form.companyId" placeholder="请选择隶属公司">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
修改为：
<el-form-item label="隶属公司">
<el-select v-model="form.companyId" placeholder="请选择隶属公司">
<el-option
v-for="item in companyOptions"
:key="item.companyId"
:label="item.companyName"
:value="item.companyId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
它有个 companyOptions的字段，因此要在添加页面进行数据初始化。
handleAdd()
找到添加按钮对应的方法：
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加车间";
},
修改为：
/** 新增按钮操作 */
handleAdd() {
this.reset();
getWorkshop().then(response => {
//this.companyOptions = response.companyOptions;
this.open = true;
this.title = "添加车间";
});
},
getWorkshop()
getWorkshop()的方法如下：
// 查询车间详细
export function getWorkshop(workshopId) {
return request({
url: '/digital/workshop/' + workshopId,
method: 'get'
})
}
可以看到，这个方法里有个参数 workshopId，这个参数只有在修改页面有，添加页面是没有的，
如果不传参数，进行调用，是会直接报错的。
因此，要先判断这个参数是否为空。
getWorkshop()修改如下：
import { praseStrEmpty } from "@/utils/ruoyi";
// 查询车间详细
export function getWorkshop(workshopId) {
return request({
url: '/digital/workshop/' + praseStrEmpty(workshopId),
method: 'get'
})
}
praseStrEmpty方法需要额外导入
前端改造就完成了，接下来进行后端改造
后端改造
后端改造需要添加对应的方法。
controller方法
原先的方法如下：
/**
* 获取车间详细信息
*/
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
return AjaxResult.success(workshopService.selectWorkshopById(workshopId));
}
它这个方法直接返回根据workshopId查询的数据，因为是添加页面，没有workshopId，因此不返回任何数据，所以前台隶属公司的字段什么都不会显示。
改造后的代码如下：
/**
* 获取车间详细信息
*/
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
先说下 AjaxResult.success(workshopService.selectWorkshopById(workshopId));这个代码的逻辑。
/**
* 返回成功数据
* @return 成功消息
*/
public static AjaxResult success(Object data){
return AjaxResult.success("操作成功", data);
}
public static AjaxResult success(String msg, Object data){
return new AjaxResult(HttpStatus.SUCCESS, msg, data);
}
public AjaxResult(int code, String msg, Object data){
super.put(CODE_TAG, code);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data)){
super.put(DATA_TAG, data);
}
}
它等同于，改造后的代码：AjaxResult ajax = AjaxResult.success(); ajax.put("data",workshop);
public static AjaxResult success(){
return AjaxResult.success("操作成功");
}
public static AjaxResult success(String msg){
return AjaxResult.success(msg, null);
}
public static AjaxResult success(String msg, Object data){
return new AjaxResult(HttpStatus.SUCCESS, msg, data);
}
public AjaxResult(int code, String msg, Object data){
super.put(CODE_TAG, code);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data))
{
super.put(DATA_TAG, data);
}
}
@Override
public AjaxResult put(String key, Object value)
{
super.put(key, value);
return this;
}
可以看到，这两个方法的逻辑是一样的，区别在于，最后判断data是否为null，如果不为null，则put数据进去。
只不过我在中间增加了新的业务逻辑：ajax.put("companyOptions",companyService.selectCompanyAll());
service方法和mapper方法
代码如下：
@Autowired
private IDigCompanyService companyService;
service接口方法
/**
* 查询全部公司信息
* @return
*/
List<DigCompany> selectCompanyAll();
service接口实现类的方法
@Override
public List<DigCompany> selectCompanyAll() {
return digCompanyMapper.selectCompanyAll();
}
mapper映射类中的方法
/**
* 查询全部公司信息
* @return List<DigCompany>
*/
List<DigCompany> selectCompanyAll();
xml文件方法
最后找到对应的xml文件，SQL语句如下：
<sql id="selectDigCompanyVo">
select company_id, company_name, company_shortname, belong, create_by, create_time, status, del_flag, update_by, update_time from dig_company
</sql>
<select id="selectCompanyAll" resultMap="DigCompanyResult">
<include refid="selectDigCompanyVo"/> where status = '0'
</select>
而这个语句查询的页面，正是开头给的company页面。
到这里，这个功能就开发完成了。
部署测试
简单部署并启动，测试一下，结果报错了
Request method ‘Get’ not supported
修正BUG
这个报错信息是说，请求的方法无法匹配GET请求
这个原因是什么导致的呢？
首先看一下 controller 方法头的注解
@GetMapping(value = "/{workshopId}")
value = "/{workshopId}" 是说workshopId是可变参数(并非没有)，例如 /3，/5，/567
并不说workshopId不需要.
而在新增页面，我们是不传workshopId的，也就是说我们的请求路径实际上是 /
这样的请求路径，肯定没有对应的方法去处理，自然就报错了。
那么我们让该方法可以匹配 / 请求,修改如下：
@GetMapping(value = { "/", "/{workshopId}" })
部署测试一下，结果再次报错：
Required URI template variable ‘workshopId’ for method parameter type Long is not present
（URL中需要传入方法参数为Long类型的workshopId，该参数不存在）
看下后台报错：
org.springframework.web.bind.MissingPathVariableException:
Required URI template variable 'workshopId' for method parameter type Long is not present
----以下略----
这个workshopId是必须的，但是我们不提供，因此无法匹配，那我们修改下参数变量，让它变成不是必须的，修改如下
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = { "/", "/{workshopId}" })
public AjaxResult getInfo(@PathVariable(value = "workshopId", required = false) Long workshopId){
...代码略...
}
总结
修改前的代码：
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
总的修改过后的代码，如下：
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = { "/", "/{workshopId}" })
public AjaxResult getInfo(@PathVariable("workshopId", required = false) Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
测试部署
成功！
