• Element表格和表单字典转换（静态和动态）

    Element表格和表单字典转换（静态和动态）

    使用vue、element对form和table做字典映射。非常简单方便。还附带了和springboot集成的接口动态方式

    一、定义静态字典

    1. 新建字典文件

    首先在util文件夹新建一个dict.js

    const dictList={
  statusList: [
    {id:0,name:'未使用'},
    {id:1,name:'已绑定'},
    {id:2,name:'已使用'},
    {id:3,name:'禁用'},
    {id:4,name:'作废'},
  ],
   boolList: [
    {id:0,name:'禁用'},
    {id:1,name:'启用'}
  ]
}
export default dictList

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    2. 新建字典工具类

    在util文件夹新建getDict.js文件

    import dictList from '@/utils/dict'

/**获取静态字典值 **/
export function getDict(data, element, dictName) {
  const col = element.property
  const dictArr = dictList[dictName]
  if (!dictArr) return
  for (let item of dictArr) {
    if (item.id === data[col]) {
      return item.name
    }
  }
}
/**获取静态字典列表 **/
export function getDictList (dictName) {
  return  dictList[dictName]
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3. 挂载到Vue上

    找到项目main.js，新增如下代码

    import {getDict,getDictList} from '@/utils/getDict'
Vue.prototype.$getDict=getDict
Vue.prototype.$getDictList=getDictList

    • 1
    • 2
    • 3

    4. 页面使用

    1. 表格中使用

    表格中根据字典的key获取字典的name

      <el-table>
        <el-table-column label="状态" prop="status"  :formatter="(row, column) => $getDict(row, column, 'statusList')" />
  </el-table>

    • 1
    • 2
    • 3

    2. 表单中使用

    表单中要通过下拉框的形式让用户选择字典

    首先在data中声明变量

     data() {
      return {
        statusList:this.$getDictList('statusList')
      }
 }

    • 1
    • 2
    • 3
    • 4
    • 5

    然后在form中使用下拉框

         <el-form>         
		<el-form-item label="状态" prop="status">
           <el-select v-model="form.status" style="width: 100%" placeholder="请选择状态">
             <el-option
               v-for="item in statusList"
               :key="item.id"
               :label="item.name"
               :value="item.id"
             />
           </el-select>
         </el-form-item>
      </el-form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    二、定义动态字典

    ​ 这里使用springboot、mysql生成字典后台接口

    1. 新建数据库

    字段类型长度注释
    idint11主键
    parent_idint11父主键
    dict_codevarchar255字典码
    dict_keyint255字典值
    dict_valuevarchar255字典名称
    remarkvarchar255字典备注
    is_deletedint2是否已删除,0:正常,1:已删除
    CREATE TABLE `dict`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `parent_id` int(11) NULL DEFAULT 0 COMMENT '父主键',
  `dict_code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '字典码',
  `dict_key` int(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT '0' COMMENT '字典值',
  `dict_value` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '字典名称',
  `remark` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT '' COMMENT '字典备注',
  `is_deleted` int(2) NULL DEFAULT 0 COMMENT '是否已删除,0:正常,1:已删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1174 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '系统字典表' ROW_FORMAT = DYNAMIC;
SET FOREIGN_KEY_CHECKS = 1;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2. 生成Springboot接口

    实体类Dict.java

    @Entity
@Table(name = "dict")
@Data
public class Dict{

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @ApiModelProperty(value = "主键" , example = "1")
    private Integer id;
    @ApiModelProperty(value = "父主键" , example = "1")
    private Integer pid;
    @ApiModelProperty(value = "字典码" , example = "1")
    private String code;
    @ApiModelProperty(value = "字典值" , example = "1")
    private Integer skey;
    @ApiModelProperty(value = "字典名称" , example = "1")
    private String svalue;
    @ApiModelProperty(value = "备注" , example = "1")
    private String remark;
    @ApiModelProperty(value = "是否删除" , example = "1")
    private Integer isdelete;

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    dao层

    public interface DictDao extends JpaRepository<Dict, Integer> , JpaSpecificationExecutor<Dict>{

    List<Dict> findAllByPid(Integer pid);

    void deleteByPid(Integer pid);

    @Query(value="select * from dict where code=:code and isdelete=0 and pid!=0"
            ,nativeQuery=true)
    List<Dict> getDictByCode(@Param("code") String code);

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    service层

    @Service
public class DictService{
    @Autowired
	private DictDao dictDao;

	public ResponseModel<Page<Dict>> page(String keywords, Pageable page) {
	    Page<Dict> result = dictDao.findAll(new Specification<Dict>() {
            @Override
            public Predicate toPredicate(Root<Dict> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
                List<Predicate> list = new ArrayList<Predicate>();
				list.add(cb.equal(root.get("pid").as(Integer.class), 0));
                if (!StringUtils.isEmpty(keywords)) {
                    //字典码
                    list.add(cb.like(root.get("code").as(String.class), "%" + keywords + "%"));
                    //字典名称
                    list.add(cb.like(root.get("svalue").as(String.class), "%" + keywords + "%"));
                    //备注
                    list.add(cb.like(root.get("remark").as(String.class), "%" + keywords + "%"));
                }
				Predicate[] p = new Predicate[list.size()];
				return cb.or(list.toArray(p));
            }
        }, page);
        return ResponseModel.success(result);
	}

	public ResponseModel<Dict> get(Integer id) {
		return ResponseModel.success(dictDao.findById(id).get());
	}

    public ResponseModel<List<Dict>> findList() {
		return ResponseModel.success(dictDao.findAll());
	}

	@Transactional
	public ResponseModel<Dict> save(Dict dict) {
	    if(dict.getId()!=null){
	        Dict dictOld = dictDao.findById(dict.getId()).orElse(null);
	        if(dictOld!=null){
	            UpdateUtil.copyNullProperties(dict,dictOld);
                return ResponseModel.success(dictDao.save(dictOld));
	        }
	    }
	    return ResponseModel.success(dictDao.save(dict));
	}

	@Transactional
	public ResponseModel delete(String ids) {
		dictDao.deleteAllById(ConvertUtil.strToIntList(ids));
		return ResponseModel.success("删除成功");
	}

	@Transactional
	public ResponseModel saveBatch(List<Dict> dicts){
		if(dicts.size()>0){
			dictDao.deleteByPid(dicts.get(0).getPid());
			dictDao.flush();
			dictDao.saveAll(dicts);
		}
		return ResponseModel.success("保存成功");
	}
	public ResponseModel<List<Dict>> findAllByPid(Integer pid){
		return ResponseModel.success(dictDao.findAllByPid(pid));
	}

	public ResponseModel<Map<String,List<Dict>>> getDictByCode(String codes){
		String[] codeArr = codes.split(",");
		Map<String,List<Dict>> result = new HashMap<>();
		for(int i=0;i<codeArr.length;i++){
			result.put(codeArr[i],dictDao.getDictByCode(codeArr[i]));
		}
		return ResponseModel.success(result);
	}

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    Controller层

    @RequestMapping(value = "/dict")
@RestController
@Api(value="接口",tags={"Dict()-增删改查;导入导出"})
public class DictController extends CommonController{

	@Autowired
	private DictService dictService;

	@ApiOperation(value = "获取分页数据" ,notes = "获取分页数据" )
	@ApiImplicitParams({
        @ApiImplicitParam(name = "keywords" ,value = "搜索关键字" , required = false, dataType = "String")
    })
    @PostMapping("/page")
    public ResponseModel<Page<Dict>> page(String keywords, Pageable page) {
        return dictService.page(keywords, page);
    }

    @ApiOperation(value = "获取列表数据" ,notes = "获取列表数据" )
	@GetMapping("/findAll")
	public ResponseModel<List<Dict>> findAll(){
		return dictService.findList();
	}

    @ApiOperation(value = "获取单条数据对象" ,notes = "获取单条数据对象")
	@ApiImplicitParams({
		@ApiImplicitParam(paramType = "query",name = "dictid" ,value = "dictID" , required = true, dataType = "Integer")
	})
	@GetMapping("/{id}")
    public ResponseModel<Dict> get(@PathVariable Integer id) {
		return dictService.get(id);
    }

    @ApiOperation(value = "保存单条数据", notes = "保存单条数据,id列为空则为新增,不为空则为修改")
    @ApiImplicitParams({
        @ApiImplicitParam(name = "Dict",value = "dict",required = false,dataType = "Dict")
    })
    @PostMapping("/save")
    public ResponseModel<Dict> save(Dict dict) {
		return dictService.save(dict);
    }

    @ApiOperation(value = "删除", notes = "删除" )
        @ApiImplicitParams({ @ApiImplicitParam(name = "dictids", value = "DictID", required = true, dataType = "String")
    })
    @RequestMapping(value = "/delete" ,method = { RequestMethod.DELETE})
    public ResponseModel delete(String dictids) {
       return dictService.delete(dictids);
    }

    @ApiOperation(value = "批量保存数据", notes = "批量保存数据，先删除，再保存")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "Dict",value = "dict",required = false,dataType = "Arrays")
    })
    @PostMapping("/saveBatch")
    public ResponseModel<Dict> saveBatch(@RequestBody List<Dict> dicts) {
        return dictService.saveBatch(dicts);
    }

    @ApiOperation(value = "根据Pid查询字典", notes = "根据Pid查询字典")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "pid",value = "pid",required = true,dataType = "Integer")
    })
    @PostMapping("/dictDetail")
    public ResponseModel<List<Dict>> findByPid(Integer pid) {
        return dictService.findAllByPid(pid);
    }

    @ApiOperation(value = "根据code获取字典列表", notes = "根据code获取字典列表，入参为多个code字符串")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "csode",value = "csode",required = true,dataType = "String")
    })
    @PostMapping("/getDictCode")
    public ResponseModel<Map<String,List<Dict>>> findByCode(String codes) {
	    return dictService.getDictByCode(codes);
    }

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    3. vue字典管理页面

    api接口dictapi.js

    import request from '@/utils/request'
//查询分页
export function getPage(page) {
  return request({
    url: '/dict/page',
    method: 'post',
    data: page
  })
}
//根据ID查找
export function find(id) {
  return request({
    url: '/dict/'+id,
    method: 'get',
  })
}
//批量删除
export function deleteModles(ids) {
  return request({
    url: '/dict/delete?dictids='+ ids,
    method: 'delete',
  })
}
//保存或更新
export function save(data) {
  return request({
    url: '/dict/save',
    method: 'post',
    data: data
  })
}

export function saveAll(data) {
  return request({
    url: '/dict/saveBatch',
    method: 'post',
    data: data,
    notForm: true
  })
}
export function dictDetail(data) {
  return request({
    url: '/dict/dictDetail',
    method: 'post',
    data: data,
  })
}
export function getDictCode(code) {
  return request({
    url: '/dict/getDictCode',
    method: 'post',
    data: {codes:code},
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    vue页面dictManage.vue

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363

    4. 页面效果

    这样一个字典的增删改查就完成了
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    5. vue前端中的处理

    5.1 完善获取字典的工具类

    geDict.js最终版如下：

    import dictList from '@/utils/dict'

/**获取静态字典值 **/
export function getDict(data, element, dictName) {
  const col = element.property
  const dictArr = dictList[dictName]
  if (!dictArr) return
  for (let item of dictArr) {
    if (item.id === data[col]) {
      return item.name
    }
  }
}
/**获取静态字典列表 **/
export function getDictList (dictName) {
  return  dictList[dictName]
}
/**获取静态字典值 **/
export function getDictDb(val,dictArr){
  if(val>=0 && dictArr && dictArr.length>0){
    let temp = dictArr.filter(item => item.skey == val)
    if(temp.length==1){
      return temp[0].svalue
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    5.2 vue挂载方法

    找到main.js添加如下代码

    import {getDict,getDictList,getDictDb} from '@/utils/getDict'
Vue.prototype.$getDict=getDict
Vue.prototype.$getDictList=getDictList
Vue.prototype.$getDictDb=getDictDb

    • 1
    • 2
    • 3
    • 4

    5.3 页面使用

    首先引入api，然后在method中调用后端api接口获取字典列表。