Problem requirements (Introduction description)

The supplier system of the company involves the delivery and delivery of the warehouse. The product requires that the data selected before can be pagination saved, and finally click OK to take it out to the outside table. It is definitely not possible to let the back-end write interface, so I have to do the front end myself

Solution (Introduction description)

You can use the map object features to match the data selected on the current page to the Map object, update the operation of the current page in real time in the monitoring multi-selection method, and store the corresponding operation in the Map object. Finally, click the popup to confirm the selection, and integrate the data in the Map object without talking about the code

1.HTML

2.JS

Initialize an object

Data (){return {newArr: new Map(), // select a Map object chooseLength: ", // select a number of cgDia:false, // control popover Boolean tableData: OmsGoodsCode: '', goodsName: 'commodity 002', value: 'LJW', barcode: Null, brandName: 'INIT', goodsType: 'INIT',}, {id: 8405, omsGoodsCode: '', goodsName: '', value: Barcode: null, brandName: 'Donginto ',}, {ID: 8394, omsGoodsCode: ', goodsName:' test ', value: 'z1C-FF03 -hh(26) 80/88 750W 7*40T 50 * 55', barcode: null, brandName:' standard wise ', goodsType: 'INIT',},],}}Copy the code

The initialization interface opens a popup window, where arR parameter is the data ID set selected previously. If selected for the first time, the commodity popup interface will be empty by default

// initModal(arr = []) {// If arR is not empty, you need to consolidate data into a map object const newMap = newMap (); // If arR is not empty, you need to consolidate data into a map object const newMap = newMap (); arr.forEach((ele) => { newMap.set(ele.id, ele); }); this.newArr = newMap; this.getChooseLength(); this.initPage(); this.cgDia = true; },Copy the code

Arr interface return table Data Data, switch pages and click OK to save the previous page selected Data

/** * @param {arr} interface returns table Data * toggle pages and save previously selected Data */ deploySelcect(arr) {// Integrate selected Data ids const idList = []; this.newArr.forEach((ele) => { idList.push(ele.id); }); Return arr.map((ele) => {ele._checked = idlist.id); if (ele) => {ele._checked = idlist.id); return ele; }); },Copy the code

Initialize commodity selection popup, also support query to obtain table data (is usually common business data)

/** async initPage(page = 1, pageSize = 10) {const pageOptions = {page, pageSize}; const data = this.$formatParams({ ... this.form, ... pageOptions }); / / get the backend data, here is according to your own business interface to let {total items, success} = await API. SupPurchaseOrder4SearchList (data); // Data processed here returns items = this.deployselcect (items); this.orderData = items || []; this.total = total; return items; },Copy the code

Retrieves the number of selected data, iterating through the map for each page of selected data

/** Get the number of selected data */ getChooseLength() {const list = []; this.newArr.forEach((ele) => { list.push(ele); }); this.chooseLength = list.length; }Copy the code

Table multiple operations, this step into the map values, corresponding to the current page stored

/** selectRow(arr) {arr. ForEach ((ele) => {this.newarr.set (ele. }); this.getChooseLength(); }Copy the code

Finally, click the popup ok button to integrate the data and send it to the parent to add the product page

/** click ok */ sure() {const list = []; this.newArr.forEach((ele) => { list.push(ele); }); this.$emit('sureChoose', list); this.cgDia = false; }Copy the code

2021/04/27 17:31 Update diary: Fixed an issue in the comments section that said queries could be corrupted

Express and write as standard as possible, so that everyone can understand, because it is a company project, if you need to provide a page to see the effect, you can talk to me privately, I will give you an account password, so that you can see the effect

Rarely write articles, I don’t know if I can express myself clearly, learn with an open mind, accept correction and criticism with an open mind, thank you for watching, (#^.^#) hee hee