## 一、概述 在自动生成的代码基础上，如何做一些微调，是这个章节要讨论的话题； 比如，在新增的时候，增加一些字典项，而并非一张白纸开始新增； 这里，将通过从零开始的实例，假如该实体字段中包含了一个字典类型，需要在实体的新增、修改、查询等场景中，都需要给该字典赋值或显示值，那么如何简单快速实现这种需求呢； 这里以PC端来举例，实际上，H5端一样，因为他们是采用相同的技术路线； ## 二、实战演练 ### **（1）新增页面** 首先、需要将字段控件，调整为需要的，比如这里，需要一个选择框； ``` <a-select v-model="form.testSample.sampleType" class="w100"> <a-select-option v-for="item in metafieldtype" :key="item.dictId"> {{ item.dictVal}} </a-select-option> </a-select> ``` 然后，在提供数据的定义和方法部分（toAddTestSample），提供数据源，如： 定义部分： ``` data() { return { minHeight: window.innerHeight - 100, loading: false, routerPath: '', saveLoading: false, form, metafieldtype: [], //新增的部分 }; ``` 方法部分： ``` toAddTestSample() { toAddTestSampleRequest().then((res) => { if (res.data.code == rayframework_http_success_code) { //进入新增页面的数据项 this.metafieldtype = res.data.result.staticDictMap.stafftype.staticDictList;//新增的部分 } }); }, ``` ### **（2）修改页面** 与新增一样，直接参考上面的部分，不同点是事件所属的方法不一样而已； ``` toModifyTestSampleRequest(this.$route.query.entityId).then((res) => { if (res.data.code == rayframework_http_success_code) { //进入修改页面的数据项 this.form.testSample = res.data.result.testSample; this.metafieldtype = res.data.result.staticDictMap.stafftype.staticDictList;//新增的部分 } }); ``` ### **（3）列表页面** 其实跟新增和修改也是一样的； 首先、需要将字段控件，调整为需要的，比如这里，需要一个选择框； ``` <a-select v-model="form.testSample.sampleType" class="w100"> <a-select-option v-for="item in metafieldtype" :key="item.dictId"> {{ item.dictVal}} </a-select-option> </a-select> ``` 然后，在提供数据的定义和方法部分（listTestSample），提供数据源，如： 定义部分： ``` data() { return { taHeight: window.innerHeight - 430, minHeight: window.innerHeight - 100, loading: false, visible: false, labelCol: labelCol4, wrapperCol: wrapperCol14, columns, orderFieldName: '', orderDirection: '', search, btnLoading: false, tableData: [], metafieldtype: [],//新增的部分 detailForm: {}, tableTitle, pagination: BASE_PAGINATION, }; ``` 方法部分： ``` listTestSampleRequest( current, pageSize, sampleName, sampleLength, sampleType, sampleWeight, descCnt, orderDirection, orderFieldName ) .then((res) => { if (res.data.code == rayframework_http_success_code) { const pageobject = res.data.result.pageobject; this.metafieldtype = res.data.result.staticDictMap.stafftype.staticDictList;;//新增的部分 this.tableData = pageobject.content; this.pagination.total = pageobject.totalElements; this.loading = false; } else { this.loading = false; } }) .catch(() => { this.loading = false; }); }, ``` ## 三、总结 基本上，无论是新增、修改或列表查询，引入预置数据控件都是一样的步骤如下； 1. 引入控件 2. 控件数据结构定义 3. 方法请求数据