字典表的使用

字典表使用

1.数据库设计

1.字典表就是,对我们项目中的静态下拉框中的数据进行统一的管理,在使用时,需要在字典表中创建四个字段,id、name、parentTop、parentId.
Name:存放的我们的一个名称。
parentTop:判断是否是父级,一般通过1,0判断,如果为1,则为父级。
parentId:判断是属于哪个父级下的。放的是父级的id值。
在这里插入图片描述
2.然后查询所有的数据,在service层进行判断。创建两个list集合,第一次for循环通过parentTop查询出所有的父级数据,存放到一个list集合中,第二次for循环通过遍历第一个集合中的内容与数据库查询的所有数据进行对比,将parentId与当前的父级id相同的放到第二个集合中,循环结束后,此集合添加到第一个集合中。进行一个返回,这就我的理解。

1.具体代码

1.controller层

/**
 *公共接口
 */
@RestController
@RequestMapping("/metadata")
@Api(value="SwaggerController" ,description="公共接口模块")
@CrossOrigin
public class CommenController {
//    注入
    @Autowired
    private InquirySheetService inquirySheetService;
    //    各种下拉框
    @ApiOperation("各种下拉框")
    @PostMapping("/getPullDownList")
    public ResultVo<SelectDropdownVo> getPullDownList(@RequestBody List<String> lists){

        return inquirySheetService.getPullDownList(lists);
    }
    }

2.service层 --接口实现类

@Service
public class InquirySheetServiceImpl implements InquirySheetService {
    @Autowired
    private InquirySheetDao inquirySheetDao;
//    各种下拉
    @Override
    public ResultVo<SelectDropdownVo> getPullDownList(List<String> lists) {

        查询所有信息
        List<Dictionarie> dicList=inquirySheetDao.queryList();

//        //        定义集合
        ArrayList<DictionVo> dicVolist=new ArrayList<>();
        ArrayList<DictionVo> dicVolist2=new ArrayList<>();
        所有父类
        for (Dictionarie fatherList:dicList) {
            DictionVo dic=new DictionVo();
            if (fatherList.getParentTop()==1){
                dic.setId(fatherList.getId());
                dic.setName(fatherList.getName());

                dicVolist.add(dic);
            }
        }
//
//        父类的子类
        for (DictionVo dic2:dicVolist) {
//            存放子级
            List<Dictionarie> dicLists=new ArrayList<>();
            for (Dictionarie dic3:dicList) {
                if (dic2.getId()==dic3.getParentId()){
                    dicLists.add(dic3);
                }
            }
            dic2.setDicList(dicLists);
            dicVolist2.add(dic2);
        }

        SelectDropdownVo sd=new SelectDropdownVo();//内部放了各种下拉框
        for (DictionVo ss:dicVolist2) {
            if (ss.getName().equals("type")){
                sd.setXjTypeVos(ss);
            }
            if (ss.getName().equals("inquiryStatus")){
                sd.setXjStatusVos(ss);
            }
            if (ss.getName().equals("isTax")){
                sd.setIsTax(ss);
            }
            if (ss.getName().equals("currencyCode")){
                sd.setCurrencyCode(ss);
            }
        }
        return ResultPlsVo.success(sd);
    }
    }

3.dao层

@Mapper
public interface InquirySheetDao {
//    各种下拉
    List<Dictionarie> queryList();
    }

4.xml中的sql语句

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xyh.inquiry.dao.InquirySheetDao">
<!-- 
namespace:接口的包路径名称
id:接口中对应的方法名称
resultType:返回的数据类型
parameterType:接收的数据类型
 -->
    <!--    各种下拉-->
    <select id="queryList" resultType="com.xyh.inquiry.domain.InquirySheet.Dictionarie">
        select * from zidian
    </select>
    
</mapper>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在一个 el-input 中使用字典,可以考虑使用 el-autocomplete 组件来实现。具体步骤如下: 1. 准备字典数据 假设你的字典数据如下: ```javascript const dict = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }, { value: 'grape', label: '葡萄' }, // ... ]; ``` 其中,`value` 字典中的值,`label` 字典中的显示文本。 2. 使用 el-autocomplete 组件 在模板中使用 el-autocomplete 组件,并将字典数据传递给它: ```html <template> <el-autocomplete v-model="selected" :fetch-suggestions="querySearch" placeholder="请输入关键词" :trigger-on-focus="false" :select-when-unmatched="true" ></el-autocomplete> </template> ``` 在这里,我们将 `selected` 绑定到 el-autocomplete 组件的 `v-model` 属性上,示选中的值;将 `querySearch` 方法绑定到 `fetch-suggestions` 属性上,示查询建议列的方法;将 `placeholder` 属性设置为一个提示文字;将 `trigger-on-focus` 属性设置为 `false`,示不在聚焦时触发查询建议列;将 `select-when-unmatched` 属性设置为 `true`,示在输入的值不在字典中时,也可以选中输入的值。 3. 实现 querySearch 方法 在组件的 `methods` 中实现 `querySearch` 方法,用于查询建议列: ```javascript methods: { querySearch(queryString, cb) { const results = queryString ? this.dict.filter(this.createFilter(queryString)) : this.dict; cb(results); }, createFilter(queryString) { return (item) => { return item.label.indexOf(queryString) !== -1 || item.value.indexOf(queryString) !== -1; }; }, }, ``` 在这里,我们使用 `filter` 方法从字典中筛选出符合条件的项,并将结果传递给 `cb` 回调函数。同时,我们实现了一个 `createFilter` 方法,用于创建一个筛选函数,该函数会判断一个项的 `label` 或 `value` 是否包含查询字符串 `queryString`,如果包含,则返回 `true`,否则返回 `false`。 最终,你就可以在 el-input 中使用字典了。当你输入一个值时,el-autocomplete 会根据字典中的数据进行查询,并提供符合条件的建议列,你可以从中选择一个值作为 el-input 的输入值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值