1.效果图
2.前端实现:
<el-form-item label="地址" prop="entrepriseAddress"><el-cascaderv-model="formData.entrepriseAddress"size="large":options="region"/></el-form-item>
//导入组件
import { regionData } from 'element-china-area-data'
需要再项目中安装一下地址组件:
安装命令:npm install element-china-area-data
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {// 校验表单await formRef.value.validate()// 提交请求formLoading.value = truetry {const data = formData.value as unknown as FleetEntrepriseVOif (formType.value === 'create') {await FleetEntrepriseApi.createFleetEntreprise(data)message.success(t('common.createSuccess'))} else {await FleetEntrepriseApi.updateFleetEntreprise(data)message.success(t('common.updateSuccess'))}dialogVisible.value = false// 发送操作成功的事件emit('success')} finally {formLoading.value = false}
}
相关api接口:
createFleetEntreprise: async (data: FleetEntrepriseVO) => {
return await request.post({ url: `/operate/fleet-entreprise/create`, data })
},
3.后端代码
@Schema(description = "地址", requiredMode = Schema.RequiredMode.REQUIRED)@NotEmpty(message = "地址不能为空")private List<String> entrepriseAddress;
需要以list集合的形式保存数据,因为前端传来的地址为数组形式;
而在数据表中是以char的字符类型存储:
/**
* 地址
*/
private String entrepriseAddress;
controller层:
@PostMapping("/create")@Operation(summary = "创建企业")@PreAuthorize("@ss.hasPermission('operate:fleet-entreprise:create')")public CommonResult<Long> createFleetEntreprise(@Valid @RequestBody FleetEntrepriseSaveReqVO createReqVO) {return success(fleetEntrepriseService.createFleetEntreprise(createReqVO));}
实现层:
@Overridepublic Long createFleetEntreprise(FleetEntrepriseSaveReqVO createReqVO) {// 插入FleetEntrepriseDO fleetEntreprise = BeanUtils.toBean(createReqVO, FleetEntrepriseDO.class);fleetEntrepriseMapper.insert(fleetEntreprise);// 返回return fleetEntreprise.getId();}
mapper层:
@Mapper
public interface FleetEntrepriseMapper extends BaseMapperX<FleetEntrepriseDO> {default PageResult<FleetEntrepriseDO> selectPage(FleetEntreprisePageReqVO reqVO) {return selectPage(reqVO, new LambdaQueryWrapperX<FleetEntrepriseDO>().likeIfPresent(FleetEntrepriseDO::getEntrepriseName, reqVO.getEntrepriseName()).eqIfPresent(FleetEntrepriseDO::getEntrepriseVenue, reqVO.getEntrepriseVenue()).orderByDesc(FleetEntrepriseDO::getId));}}
注意点:
前端把地址以数组的形式传到后端,所以要以list集合的形式保存,当用户编辑这条信息时,把值传给前端就会显示对应的地址;