## 一、概述 在自動生成的代碼基礎上，如何做一些微調，是這個章節要討論的話題； 比如，在新增的時候，增加一些字典項，而并非一張白紙開始新增； 這里，將通過從零開始的實例，假如該實體字段中包含了一個字典類型，需要在實體的新增、修改、查詢等場景中，都需要給該字典賦值或顯示值，那么如何簡單快速實現這種需求呢； 這里以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. 方法請求數據