Hardware midrange project

One ToC Project , Mainly used element UI Component library to realize the basic data display function 、 Handle according to user operation .

One 、 Return order query interface

Different Tab The operation in is different

To be processed Tab Show exchange processing options , According to the type of business （ Return goods , refund A in A, refund A in B） Display relevant routes .

Treat business types as params Parameters , use push Route jump . After entering the page , Get this parameter , adopt v-if Show different content .

Two 、 Exchange details page  

Returns will not be processed for the time being

refund A in A It's shown as follows .

Show exchange details , The price remains the same .

         Click OK to display the confirmation box , Confirm exchange . 

refund A in B It's shown as follows .

         Click add material , Show optional items .

          After confirmation, the list of selected products will be displayed , And you can choose sku attribute . Enter the quantity and name of the product and verify it , If it is correct, the exchange amount and price difference amount will be displayed in real time . Click OK to verify whether the properties of the selected material are filled in completely , If it is complete, a confirmation box will pop up .

         （innovation point ） The design draft given is as follows ：

         goods （ materiel ） How to show and choose  、 materiel sku The timing of attribute selection is not explained . Finally, the logical result is ：

1. Click add material , Display item list pop-up box . The list shows the product name and price （ Because there is no product map in the background , So don't show ）; The confirm add button on the right adds this item to the selected item list
2. Confirm to close the pop-up window after adding , By user sku attribute 、 Number 、 Fill in the price .（ I have written the logic of adding failed for repeated products , But you may choose different products of the same product sku attribute , So this verification is finally removed .）
3. It is not fixed at the time of commodity selection sku Code is considered to be dynamically modifiable by users . And added “ deselect ” Button , Products can be deleted dynamically .
4. After the user has correctly filled in the commodity quantity and picking price , below “ Amount calculation result ” real-time display , So I took out “ Determine and calculate the price difference button ”.

To be optimized ：

1. Users can select more than one item in the item selection box , Avoid too many clicks .
2. sku You can set the default first , The user can reduce one step .

3、 ... and 、 Price difference sheet management page

After the user clicks OK to create the price difference sheet , Jump to the price difference sheet management interface , Display relevant data

To be optimized ：

Order details can be viewed in the price difference doc management interface . After returning to this page from the order details , You can do the operation of positioning to the previous position . use <keep-live> + $route.mate.keepLive Metaattribute .

Four 、 Order details page

  5、 ... and 、 Price difference document delivery management

---

6、 ... and 、 Activation code management related pages （ Content 、 The difficulties are almost the same , Only one is shown here ）

Download files ： Simulate one a label , Auto click

/**
 *   download blob File format 
 *   blob  File for , name  For the file name 
*/
function downloadBlob(data, name) {
  const link = document.createElement('a');
  const body = document.querySelector('body');
  const blob = new Blob([data], {
    type: 'application/vnd.ms-excel',
  });
  link.href = window.URL.createObjectURL(blob);
  link.download = name;

  // fix Firefox
  link.style.display = 'none';
  body.appendChild(link);

  link.click();
  body.removeChild(link);

  window.URL.revokeObjectURL(link.href);
}

The focus is on uploading files . Use post && Content-Type:multipart/form-data.

It is necessary to store the file in FormData example , Reuse axios To the back end .

The backend can be divided into three cases after verifying the file ：

• The header is not in the required format , Direct error .
• The file format meets the requirements , But the content is wrong （ There is no the SN code ）, Return the prompted file stream , Front end with {response-type:blob} Receive file stream , Then simulate a download process , Download the file . With the documents given above url The process of downloading files is different , File stream received here , So you need to stream the file through URL.createObjectURL(blob) Convert to url.( You should use the above method directly , I didn't see )
• The content is right , Prompt success

        const formData = new FormData();
        formData.append('file', this.snForm.file);
        formData.append('isClearUuid', parseInt(this.snForm.isClearUuid));
        formData.append('product', this.snForm.product);
        formData.append('channelNum', this.snForm.channelNum);
        formData.append('status', parseInt(this.snForm.status));
        service.clearMultiMacCodeSpacial(formData).then((res) => {
          if (res) {
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel',
            });
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);// This step is added , Convert file to url
            link.download = ' Upload failed SN code .xls';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            this.$message({
              type: 'error',
              message: ' Upload failed ！',
            });
          }else{
            this.$message({
              type: 'success',
              message: ' Clear successfully ',
            });
          }