---

前言

增刪改查相關操作代碼由若依框架生成，這部分主要介紹入庫和領用功能，可能業務邏輯沒那么清晰，主要是實現相關代碼，以及在學習的過程中，自己遇到一些問題。（僅個人學習記錄）

---

一、工器具管理

項目總覽

在這部分，目前主要編寫了包括工器具信息展示，以及工器具的入庫和領用功能。入庫和領用兩個按鈕是對原來的修改和刪除按鈕進行了修改，完成入庫和領用操作后，入庫記錄和領用記錄部分也會發生變化（其實就是涉及到對入庫表和領用表插入）。

二、入庫功能

1. 前端

1.1 界面展示

1.1.1 首先是要定義“入庫”這個按鈕，代碼如下：

 <el-buttonsize="mini"type="text"@click="handleStorage(scope.row)" v-hasPermi="['toolManagement:tool:storage']"  <!--這個是訪問權限，要和后端匹配-->>入庫</el-button>

1.1.2 點擊按鈕后，彈窗按鈕展示。（因為這個頁面有幾個不同的彈窗–新增和修改、入庫以及領用，所以還需要對參數:visible.sync="libraryDialogVisible進行設置）

<!-- 入庫記錄對話框 --><el-dialog :title="title" :visible.sync="libraryDialogVisible" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="工器型號" prop="toolModel"><el-input v-model="form.toolModel" placeholder="請輸入工器型號" /></el-form-item><el-form-item label="工器類型" prop="toolType"><el-input v-model="form.toolType" placeholder="請輸入工器類型" /></el-form-item><el-form-item label="工器名稱" prop="toolName"><el-input v-model="form.toolName" placeholder="請輸入工器名稱" /></el-form-item><el-form-item label="入庫數" prop="stockInQuantity"><el-input-number :min="0" v-model="form.stockInQuantity" placeholder="請輸入入庫數" /></el-form-item><el-form-item label="入庫時間" prop="warehousingTime"><el-date-picker clearablev-model="form.warehousingTime"type="date"value-format="yyyy-MM-dd"placeholder="請選擇入庫時間"></el-date-picker></el-form-item><el-form-item label="備注信息" prop="remarkInformation"><el-input v-model="form.remarkInformation" placeholder="請輸入備注信息" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm2">確 定</el-button><el-button @click="cancel2">取 消</el-button></div></el-dialog>

1.2 具體操作實現

實現入庫按鈕操作handleStorage，并且導入js文件中的getRecord方法，在方法中提供訪問url以及訪問方式，在后端實現點擊“入庫”按鈕后的彈窗中信息回顯
實現入庫提交按鈕submitForm2，并且導入storage方法，在后端實現插入入庫信息到入庫記錄表中
在前面兩個方法中都需要把libraryDialogVisible設置為true，代表顯示彈框
點擊取消按鈕，需要把libraryDialogVisible設置為false

data() {return {...// 是否顯示彈出層open: false,     //用于修改和新增的彈框libraryDialogVisible:false,   //用于入庫彈框requisitionVisible:false,    //用于領用彈框....
}
//入庫按鈕操作handleStorage(row) {this.reset();this.libraryDialogVisible=true;const toolManagementId = row.toolManagementId || this.idsgetRecord(toolManagementId).then(response => {this.form = response.data;this.libraryDialogVisible = true;this.title = "入庫";});}/** 入庫提交按鈕 */submitForm2() {this.$refs["form"].validate(valid => {if (valid) {storage(this.form).then(response => {this.$modal.msgSuccess("入庫成功");this.libraryDialogVisible = false;this.getList();});}});},
// 取消按鈕cancel2() {this.libraryDialogVisible = false;this.reset();},

1.3 js文件

在對應的js文件中寫個getRecord方法和storage方法

//獲取工器具記錄信息
export function getRecord(toolManagementId) {return request({url: '/toolManagement/tool/storage/' + toolManagementId,method: 'get'})
}//工器具入庫
export function storage(data) {return request({url: '/toolManagement/tool/storage',method: 'put',data: data})
}

2. 后端

2.1 工器具信息回顯

2.1.1 Controller層編寫getStorageInfo方法實現信息回顯，根據工器具id查詢相關工器具信息，設置訪問方式GetMapping，url以及訪問權限一定要和前端的一樣。

/*** 獲取工器具信息(入庫)*/
@PreAuthorize("@ss.hasPermi('toolManagement:tool:queryId')")
@GetMapping(value = "/storage/{toolManagementId}")
public AjaxResult getStorageInfo(@PathVariable("toolManagementId") Long toolManagementId)
{StorageVO storageVO = sysToolService.getStorageInfo(toolManagementId);return success(storageVO);
}

2.2.2 具體的業務邏輯service-serviceImpl-mapper-mapper.xml，這部分用于信息回顯，

  /**service* 根據id獲得入庫信息* @param toolManagementId* @return*/StorageVO getStorageInfo(Long toolManagementId);//serviceImp：@Overridepublic StorageVO getStorageInfo(Long toolManagementId) {return sysToolMapper.getStorageInfo(toolManagementId);}//mapper
StorageVO getStorageInfo(Long id);

 <select id="getStorageInfo" parameterType="Long" resultMap="BaseResultMap">select tool_model,tool_type,tool_name  from sys_tool where tool_management_id=#{id}</select>

2.2 工器具入庫

2.2.1 前端填寫好信息，點擊提交按鈕會有入庫記錄。在Controller層編寫方法，StorageDTO根據前端頁面展示的信息寫的一個實體類

 /*** 工器具入庫* @param storageDTO* @return*/@PreAuthorize("@ss.hasPermi('toolManagement:tool:storage')")@Log(title = "工器具入庫", businessType = BusinessType.UPDATE)@PutMapping("/storage")public AjaxResult storage(@RequestBody StorageDTO storageDTO) {sysToolService.storage(storageDTO);return success();}

2.2.2 具體的業務邏輯service-serviceImpl-mapper-mapper.xml，主要業務邏輯包括工器具庫存的增加，工器具入庫表記錄插入數據

/**service* 工器具入庫以及修改庫存信息* @param storageDTO*/void storage(StorageDTO storageDTO);//serviceImpl
//在這里涉及到兩張表的操作要加入事務處理@Override@Transactionalpublic void storage(StorageDTO storageDTO) {int num = storageDTO.getStockInQuantity();String toolModel = storageDTO.getToolModel();//查詢工器具已有庫存數int stock = sysToolMapper.selectSysToolNumById(toolModel);stock = num+stock;//根據工器具型號工器具表sys_tool修改庫存sysToolMapper.updateSysToolByMode(stock,toolModel);//在sys_warehousing_record入庫表中添加記錄WarehousingRecord warehousingRecord = new WarehousingRecord();BeanUtils.copyProperties(storageDTO,warehousingRecord);warehousingRecord.setStockInQuantity(Long.valueOf(num));warehousingRecord.setRecommend(0L);warehousingRecordService.insertWarehousingRecord(warehousingRecord);}

mapper文件

 /*** 查詢表中庫存信息* @param toolModel* @return*/@Select("select stock from sys_tool where tool_model=#{toolModel}")int selectSysToolNumById(String toolModel);/*** 根據工器具類型修改庫存數量* @param num* @param toolModel*/@Update("update sys_tool set stock=#{num} where tool_model like #{toolModel}")void updateSysToolByMode(@Param("num") int num, @Param("toolModel") String toolModel);/*** 新增入庫記錄(若依代碼生成)* @param warehousingRecord 入庫記錄*/public int insertWarehousingRecord(WarehousingRecord warehousingRecord);

三、領用功能

這部分和入庫不同的點在于，領用人是一個下拉框，要展示的是一個列表信息，而且領用人的信息存于用戶表中，所以要怎么在后端定義一個實體類用于返回給前端數據是我之前不知道怎么搞的，而且這個下拉框怎么去遍歷列表，需要哪些信息也是要考慮的。在實現這個功能的時候，我還出現了循環依賴問題（這個最后給出解決辦法）

1. 前端

1.1 界面展示

1.1.1 定義“領用”這個按鈕，代碼如下：

 <el-buttonsize="mini"type="text"@click="handlerequisition(scope.row)"v-hasPermi="['toolManagement:tool:requisition']">領用</el-button>

1.1.2 點擊按鈕后，彈窗按鈕展示。（重新設置了:visible.sync="requisitionVisible，由于定義了一個“領用人”下拉框信息回顯，在前端代碼做了修改，后端響應給前端的數據也與之對應）

<!-- 領用記錄對話框 --><el-dialog :title="title" :visible.sync="requisitionVisible" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="工器型號" prop="toolModel"><el-input v-model="form.toolModel" placeholder="請輸入工器型號" /></el-form-item><el-form-item label="工器類型" prop="toolType"><el-input v-model="form.toolType" placeholder="請輸入工器類型" /></el-form-item><el-form-item label="工器名稱" prop="toolName"><el-input v-model="form.toolName" placeholder="請輸入工器名稱" /></el-form-item><el-form-item label="數量" prop="number"><el-input-number :min="0" v-model="form.number" placeholder="請輸入數量" /></el-form-item><el-form-item label="領用時間" prop="collectionTime"><el-date-picker clearablev-model="form.collectionTime"type="date"value-format="yyyy-MM-dd"placeholder="請選擇領用時間"></el-date-picker></el-form-item><el-form-item label="領用人" prop="receiver"><el-select v-model="form.receiver" placeholder="請選擇領用人" ><el-optionv-for="item in form.users"  <!--這個users對應的后端返回的RequisitionVO中List<UserDTO> users -->:key="item.userId"    <!--users.userId和users.userName是從用戶表中查到的信息，用于信息回顯 -->:label="item.userName":value="item.userName"></el-option></el-select></el-form-item><el-form-item label="備注信息" prop="remarkInformation"><el-input v-model="form.remarkInformation" placeholder="請輸入備注信息" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm3">確 定</el-button><el-button @click="cancel3">取 消</el-button></div></el-dialog>

1.2 具體實現操作

實現領用按鈕操作handlerequisition，并且導入js文件中的getrequisitionInfo方法，實現點擊“領用”按鈕后的彈窗中信息回顯。
實現領用提交按鈕操作，主要是把填入的信息插入到領用表中，在前端定義requisition方法提供接口。
領用取消按鈕要把requisitionVisible置為false。

/** 領用按鈕操作 */handlerequisition(row) {this.reset();this.requisitionVisible=true;const toolManagementId = row.toolManagementId || this.idsgetrequisitionInfo(toolManagementId).then(response => {this.form = response.data;this.requisitionVisible = true;   //開啟彈窗this.title = "領用";});},/** 領用提交按鈕 */submitForm3() {this.$refs["form"].validate(valid => {if (valid) {requisition(this.form).then(response => {this.$modal.msgSuccess("領用成功");this.requisitionVisible = false;  //點擊提交按鈕后關閉彈窗this.getList();});}});},// 領用取消按鈕cancel3() {this.requisitionVisible = false;   //點擊取消按鈕關閉彈窗this.reset();},

1.3 js文件

在對應的js文件中寫個getrequisitionInfo方法和requisition方法

//獲取工器具領用信息
export function getrequisitionInfo(toolManagementId) {return request({url: '/toolManagement/tool/requisition/' + toolManagementId,method: 'get'})
}
//工器具領用
export function requisition(data) {return request({url: '/toolManagement/tool/requisition',method: 'put',data: data})
}

2. 后端

2.1 工器具信息回顯

2.1.1 Controller層編寫getrequisitionInfo方法實現信息回顯，根據工器具id查詢相關工器具信息，此外還要從用戶表中查詢所有用戶信息，用于領用人下拉框列表的信息回顯。

  /*** 獲取工器具信息(領用)*/@PreAuthorize("@ss.hasPermi('toolManagement:tool:queryrequisition')")@GetMapping(value = "/requisition/{toolManagementId}")public AjaxResult getrequisitionInfo(@PathVariable("toolManagementId") Long toolManagementId){RequisitionVO requisitionVO = sysToolService.getrequisitionInfo(toolManagementId);return success(requisitionVO);}

2.2.2 具體的業務邏輯service-serviceImpl-mapper-mapper.xml，這部分用于信息回顯，

    //獲取領用信息RequisitionVO getrequisitionInfo(Long toolManagementId);
//serviceImp：/*** 領用信息回顯* @param toolManagementId* @return*/@Overridepublic RequisitionVO getrequisitionInfo(Long toolManagementId) {
//查詢所有用戶信息，定義了一個UserDTO用于保存返回給前端信息，包括用戶id（主要是在前端遍歷的時候使用）和用戶賬號    List<UserDTO> userDTOS = userService.selectUserName(); 
//獲取工器具的詳細信息，這和入庫中信息回顯是一樣的 StorageVO storageInfo = sysToolMapper.getStorageInfo(toolManagementId);
//RequisitionVO用于返回給前端所需的數據RequisitionVO requisitionVO = new RequisitionVO();BeanUtils.copyProperties(storageInfo,requisitionVO);requisitionVO.setUsers(userDTOS);return requisitionVO;}  
//mapper/*** 查詢所有用戶名稱* @return*/List<UserDTO> selectUserName();

	<select id="selectUserName" resultMap="UserDTOResult">select user_id, user_name from sys_user</select>

2.2 工器具領用

1、 前端填寫好信息，點擊提交按鈕會有入庫記錄。在Controller層編寫requisition方法，RequisitionDTO根據前端頁面展示的信息寫的一個實體類

public class RequisitionDTO {/** 工器型號 */private String toolModel;/** 工器類型 */private String toolType;/** 工器名稱 */private String toolName;/** 數量 */private Integer number;/** 領用時間 */@JsonFormat(pattern = "yyyy-MM-dd")private Date collectionTime;/** 領用人 */private String receiver;/** 備注信息 */private String remarkInformation;
}/*** 工器具領用* @param requisitionDTO* @return*/@PreAuthorize("@ss.hasPermi('toolManagement:tool:requisition')")@Log(title = "工器具領用", businessType = BusinessType.UPDATE)@PutMapping("/requisition")public AjaxResult requisition(@RequestBody RequisitionDTO requisitionDTO) {//工器具領用sysToolService.requisition(requisitionDTO);return success();}

2、具體的業務邏輯service-serviceImpl-mapper-mapper.xml，主要業務邏輯包括工器具庫存的減少，工器具領用表記錄插入數據

    @Transactional@Overridepublic void requisition(RequisitionDTO requisitionDTO) {int num = requisitionDTO.getNumber();String toolModel = requisitionDTO.getToolModel();//查詢工器具已有庫存數int stock = sysToolMapper.selectSysToolNumById(toolModel);//判斷庫存數是否不足if(stock<=0){throw new RuntimeException("庫存不足");}stock = stock-num;//根據工器具型號工器具表sys_tool修改庫存sysToolMapper.updateSysToolByMode(stock,toolModel);//在sys_requisition_record領用表中添加記錄RequisitionRecord requisitionRecord = new RequisitionRecord();BeanUtils.copyProperties(requisitionDTO,requisitionRecord);requisitionRecord.setNumber(Long.valueOf(num));requisitionRecord.setRecommend(0L);//若依框架代碼生成requisitionRecordService.insertRequisitionRecord(requisitionRecord);}

---

遇到的問題

1. 同一頁面展示不同彈框

因為沒有接觸過前端，所以一開始不知道怎么處理，這里簡單的描述一下吧，前面的前端代碼有展示。
1、首先就是定義不同的彈框，<el-dialog …/>，設置不同的:visible.sync=xxx
2、在export default {data(){xxx:false }}定義好數據
3、在具體的操作中設置，比如我點擊入庫按鈕有彈窗，那么就要把xxx設置為true,點擊取消按鈕，彈框消失就要把它設置為false。

2. 動態獲取數據下拉框信息回顯

從后端數據庫獲取的信息全部用下拉框展示。在這部分，我需要回顯的信息設置兩個表的操作，所以我定義了一個VO實體類，具體如下：

public class RequisitionVO {//工器型號private String toolModel;/** 工器類型 */private String toolType;/** 工器名稱 */private String toolName;//領用人//這部分是用于下拉框信息回顯的數據，用的是一個列表private List<UserDTO> users;
}//用戶信息
public class UserDTO {//用戶idprivate Long userId;//用戶賬號private String userName;
}

雖然我只需要下拉框展示用戶賬號，但是在這里還需要有個id與之對應，用于前端代碼v-for。

 <el-form-item label="領用人" prop="receiver"><el-select v-model="form.receiver" placeholder="請選擇領用人" ><el-optionv-for="item in form.users":key="item.userId":label="item.userName":value="item.userName"></el-option></el-select></el-form-item>

3. 循環依賴

我用的若依系統，直接用的系統原有的用戶表，因為領用需要獲取領用人信息，剛開始操作的時候就直接在ruo-system中的文件夾中使用了，而我之前在自己的模塊中導入了ruo-system依賴，又在ruo-system導入了ruoyi-toolManagement中的類，結果造成了循環依賴的問題，具體解決辦法參考以下鏈接https://blog.csdn.net/m0_53979927/article/details/132954989

4. 數據庫查詢結果為空

Mapper接口方法傳兩個參數要加Param注解，以及返回多個結果要用resultMap。