This is the 29th day of my participation in the December Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Have a problem

The above mentioned development of dynamic button permissions, mainly encountered two problems:

  1. Buttons use different labels, such as span, button, and div.

  2. There are as many as 40 or 50 pages involved, and binding custom components one by one according to the page ID is a heavy workload and error-prone.

To solve the problem

So how did I solve this problem?

solution

In fact, the different solutions for button labels have been mentioned above:

  • The buttons are wrapped in the table list page<el-table-column label=" operation "></el-table-column>Tag, just bind the custom component to the parent component and useel.childrenTraverse the sub-component, compare all button types on the current page with the type of permission button from the server side.

To bind a custom component to forty or fifty pages, and need to pass the current page ID in, which involves reading and writing files. About reading and writing files, I first thought of Node.js, then how do I use Node.js to solve this problem? Directly on the code:

Const fs = require('fs') let pageBtnLimit = [] let routerData = [ fs.readFile('./src/router/dynamic-router.js', 'utf-8', function (err, Data) {if (err) {console.log(' file read error ')} else {routerData = /[\s\ s]*export const allPermissionsRouter =([\s\S]*)/i.exec(data) let result1 = routerData[1] result1 = result1 .replace(/Layout/g, '"Layout"') .replace(/\(\) => import\('@(.*)'\)/g, (match, r1) => `'./src${r1}'`) result1 = 'module.exports=' + result1 fs.writeFile('./demo.js', result1, Function (error) {if (error) {console.log(' write failed ')} else {pageBtnLimit = recursiveRouterData(require('./demo.js')) Console. log(' write succeeded ', pagebtnlimite.length) pagebtnlimite.foreach ((item) => {console.log('item.path', Item. path) fs.readfile (item.path, 'utF-8 ', function (err, data) {if (err) {console.log(' file read error ', (err)} else {let HTML = / [\ s \ s] * label = "operation" [\ s \ s] * < template slot - scope = "scope" >) ([\ s \ s] *?) (<\/template>[\s\S]*)/i.exec( data ) html = html ? `${html[1]}<span v-btnlimit="'${item.code}'">${html[2]}</span>${html[3]}` : data fs.writeFile(item.path, html, {{function (error) if (error). The console log (' write failure ')} else {the console. The log (' write success ')}})}}) / / / /}}}}) console.log(routerData) } }) const resultData = [] function recursiveRouterData(arr) { arr.forEach((item) => { if (item.code && item.component ! = 'Layout') { resultData.push({ code: item.code, path: item.component.indexOf('.vue') > -1 ? item.component : `${item.component}.vue` }) } if (item.children) { resultData.concat(recursiveRouterData(item.children)) } }) return resultData }Copy the code