本文主要是介绍【关联字段如何在字典中生成】添加车间功能页面中，显示关联的公司（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-optionv-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);}}@Overridepublic AjaxResult put(String key, Object value){super.put(key, value);return this;}
可以看到，这两个方法的逻辑是一样的，区别在于，最后判断data是否为null，如果不为null，则put数据进去。
只不过我在中间增加了新的业务逻辑：ajax.put("companyOptions",companyService.selectCompanyAll());
service方法和mapper方法
代码如下：
@Autowiredprivate IDigCompanyService companyService;service接口方法/*** 查询全部公司信息* @return*/List<DigCompany> selectCompanyAll();service接口实现类的方法@Overridepublic 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;}
测试部署
成功！
这篇关于【关联字段如何在字典中生成】添加车间功能页面中，显示关联的公司（company）字段的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
