Article directory
-
- Project business functions:
-
- 1 Complete the department management module (roughly including pharmacy department, diagnosis and treatment department, nursing department, and logistics department),
- 2. In the drug search module, according to business needs, I encapsulated regular expressions to implement fuzzy search and anti-shake tool functions, reducing requests and optimizing the project.
- 3. Import and export of excel
- 4. Login module
- 5 Implementation of senseless refresh
- 6Permission management
- 7 button permissions
- 8 module split
- 9. How to process the second file stream data returned by the backend
- 10 el-table renders large amounts of data causing lag problems
Project business functions:
- This system mainly includes 7 major sections. The functional modules mainly include outpatient doctor workstation, department management, medical equipment, medical technology department, hospitalization management, drug library pharmacy, financial accounting and other modules. In the outpatient department, on-site registration, charging, and refunding can be carried out. After the registration and payment are completed, the doctor can conduct consultations and prescribe medicines. At the same time, the outpatient doctor can issue inspection items. Only after issuing the inspection items can the medical technician perform the inspection. He or she can also decide whether to perform the inspection according to the patient's condition. Hospitalized and waiting, I
主要负责部门管理，药库药房，系统管理的研发，参与项目v1.0到v2.0的迭代
1 Complete the department management module (roughly including pharmacy department, diagnosis and treatment department, nursing department, and logistics department),
- I encapsulated the Data-tree function, converted the list data into a tree structure through recursion, and used it with the Tree component of element-UI to implement department management.
let data = [
{
id: 0, pId: null, name: '生物' },
{
id: 1, pId: 0, name: '动物' },
{
id: 2, pId: 0, name: '植物' },
{
id: 3, pId: 0, name: '微生物' },
{
id: 4, pId: 1, name: '哺乳动物' },
{
id: 5, pId: 1, name: '卵生动物' },
{
id: 6, pId: 2, name: '种子植物' },
{
id: 7, pId: 2, name: '蕨类植物' },
]
- The id is unique in each object, but the pId of different objects can be the same, and its parent element can be found based on the pId.
export const arrayTwotree = (data, pid = '') => {
// filter 过滤，查找子对象
const tree = data.filter(item => item. === pid)
tree.forEach(item => {
//如果id与pid相同说明带有pid的对象是id这个对象的children 进行递归处理
item.children = arrayTwotree(data, item.id)
})
return tree
}
2. In the drug search module, according to business needs, I encapsulated regular expressions to implement fuzzy search and anti-shake tool functions, reducing requests and optimizing the project.
- Detailed explanation of anti-shake
_.debounce(getUsername(),1000), - handwriting anti-shake
// 防抖的关键在于定时器的开始与清零
function debounce(callback,delaytime){
// 定义计时器
let timer=null
return function(){
//如果定时器不是null 则需要重新计时
if (timer!=null) {
clearTimeout(timer)
}
//如果定时器还是空 ,则开始倒计时
timer=setTimeout(()=>{
callback&&callback()
}, delaytime)
}
}
- Throttle
_.throttle(getusername(),1000)
// 节流固定的时间进行触发
inputEl.oninput = throttle(inputChange, 2000)
// 封装节流 :关键在于: 节流阀 以及时间间隔
//1 如果不触发函数则节流阀关闭状态
// 当你触发这个函数时先把节流阀关闭 然后在默认的时间间隔中打开
function throttle(callback, delaytime) {
let state=true //节流阀打开
return function(){
if (!state) {
//当节流阀关闭,则直接退出该函数
return; //callback不执行
}else{
//如果节流阀打开先把节流阀关闭
//然后设置时间间隔后在自动打开
state = false
setTimeout(() => {
callback && callback()
state = true
}, delaytime)
}
}
3. Import and export of excel
- Import: It is to
fileReaderconvert the file intoArrayBuffer, before callingxlsx第三方包read()方法转成workbook, since fileReader is an asynchronous function, use promise.all for processing and read multiple files.
Import detailed answers
- I encapsulated a global component
uploadExcelcomponent - In this component, I combine
el-uploadthe upload file component in the element-ui component library for secondary processing.
<el-upload
action=‘’
accept=“xlsx/.xls” // 指定文件类型
on-change //文件状态的改变
</el-upload>
- When the file status changes and is to be imported,
fileReadera method is called to convert the file into binary data (a Promise asynchronous function is encapsulated here, and the file will be read only when resolve (successful)) - Call the built-in xlsx
read方法and specify the type to read file data - Use the built-in
sheet_to_jsonmethod in xlsx to convert data format (convert to JSON data format)
Export function,
1. Call the event in the table @selection-changeto get the selected data, 2. Switch
the selected data between Chinese and English 3. Call the built-in method to convert the data into format 4. Create a new table to use Method creation 5. Use methods to insert data into the table 6. Call methods to write data to the current filemapxlsxsheetxlsx里面内置的utils。book_new()book_append_sheetwriteFile
4. Login module
- Including data collection and verification before login,
-
- Click the login button to call the actions in vuex through dispatch to send an aixos request to the server. The background returns a response status code to determine whether it is successful. If it fails, the user will be prompted.
-
- If successful, the token in the returned data will be persisted and synchronized to Vuex;
-
- The subsequent interfaces that need to carry tokens are processed uniformly at the request interceptor; in the case of token expiration, I cooperated with the backend to create a non-sensitive refresh processing mechanism to improve the user experience of using the website; combined with the routing and navigation guard, I combined the routing and navigation guards to handle the cases that can only be accessed after logging in. The inner page implements the function of interface access control
5 Implementation of senseless refresh
- Get two tokens, one responsible for authentication
token：access_tokenand one responsible for refreshingtoken:refresh_token. - These two tokens are brought with each request, and then the back-end interceptor determines whether the authentication token is valid.
- If it is valid, access it. If it is invalid, it will judge whether the refresh token is valid. If it is valid, it will return the specified status code.
- Then let me call the refresh token interface based on the status code. If the refresh token fails, I will be prompted to try again.
6Permission management
- First, there will be a super administrator to assign role permissions.
- When the user logs in and jumps to the home page, in the routing pre-guard, determine whether the token is carried, and call dispatch to send the user information request in actions and save it in vuex.
- Get the array of user permission information in vuex and filter the name identifier in the routing configuration.
- Whether it is in the current user information array, and then dynamically add routes through add-router to display the accessible menu pages
7 button permissions
-
Solution one:
- 1. Define a global method and implement it with v-if
- Idea: After the user successfully logs in, obtain the user's button permissions (array format), store them in the store, then define a public function in the tool class, call the function in the button, and combine the incoming keywords with the store's
hasIsEditbuttonhasIsEdit()permissions Compare to see if it exists, display it if it exists, hide it if it does not exist
-
Solution 2
① Define a global custom instruction: button-level permissions only need to encapsulate a global instruction or method in main.js. This method only does one thing, receiving the identification returned by the backend, which is the button level owned by the user. Array of permissions.
② After getting the logo, internally determine whether the logo is in the array, and if not, hide the button's style setting.
③ Called where button permissions are required: the value is the permission identifier agreed with the backend.
// 控制页面中按钮的级别
Vue.directive('allow', {
// binding是个形参，接收调用自定义指令的标识进行判断
inserted: function(el, binding) {
// 1. 首先需要获取到vuex中用户按钮级别的权限信息
console.log(binding, 'bindingbinding')
const points = store.state.user.userInfo.roles.points
// 2. 根据使用指令传过来的权限标识, 判断用户拥有按钮级别的权限
if (!points.includes(binding.value)) {
el.style.display = 'none'
}
}
})
<button v-allow="'import_excel'">删除用户信息</button>
//import_excel 是和后端约定的按钮权限标识
8 module split
- Module split is mainly divided into
production：生产环境 - development：
开发环境 - Public resource
3. 公共资源 主要放置loader与resolve: {
4. extensions: ['.js', '.vue', '.json'],
5. alias: {
6. 'vue$': 'vue/dist/vue.esm.js',
7. '@': path.join(__dirname, '../src')
8. }
9. },
- Development environment: mainly places deverserve cross-domain agents
- Production environment: Mainly place css compression, JS compression
// css压缩
optimize-css-assets-webpack-plugin
//dist压缩包
"zip-webpack-plugin": "^4.0.1"
//生产环境 copy静态资源
"copy-webpack-plugin": "^11.0.0"
9. How to process the second file stream data returned by the backend
- First create and pay money for a
10 el-table renders large amounts of data causing lag problems
1. Solution 1: Use pl-table to solve the problem that the amount of data in el-tree and el-table is too large (long list method)
2. Use u-table to solve the problem