记录一下我在做公司后台管理系统的难点与心得

公司的项目大致就长这个样子
刚进入页面的时候是两个请求，左侧的内容跟右侧的内容分别是两个不同的请求，这里我使用的是aioxs的并发请求，axios.all()

axios提供了两个并发请求 axios.all(iterable) axios.spread(callback) 两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。

因为我的想法是在两个请求都结束以后再关闭loading，显示出来，否在会出现白屏的情况，


我这里是这样使用的

async getOperatorinfo () {
   
	const res = await axios.all([this.$api.vipManage.operatorinfo({
   
	        params: {
   
	          oiid: this.$local.getList('userdata').data.oiid
	        }
	      }), this.$api.vipManage.dashboard({
   
	        params: {
   
	          type1: this.$store.state.Service.dictions,
	          oiid: this.$local.getList('userdata').data.oiid,
	          spid: this.$local.getList('userdata').spid,
	          days: this.value
	        },
	        showLoading: true
	      })
	 ])
	      // 一系列处理....
})

异步请求，返回的是一个数组，数组中第一项是第一个请求的值，第二个是第二个请求的。
整个管理系统使用的是element的标签页，使用keep-alive进行缓存，使用component来显示组件。所有的标签页都以组件的形式显示

component是一个占位符，:is属性可以用来指定要展示的组件名称 加v-if是因为我在写的过程中出现的问题，如果不加v-if的话，当我开了多个会员的详情，或者服务的详情情况下，刷新以后，所有的会员详情以及服务详情全部变成同一个人的了，加个v-if进行判断，会从新加载。每次点击以后都会从新请求

<el-tabs v-model="editableTabsValue"
         type="card"
         :closable='isClosable'
         @tab-remove="removeTab"
         @tab-click="handleClick"
         :lazy='true'>
  <el-tab-pane v-for="item in editableTabs"
               :key="item.name"
               :label="item.title"
               :name="checkName(item)">
      <keep-alive>
          <component :is="item.view"
                     v-if="item.flag"></component>
      </keep-alive>
  </el-tab-pane>
</el-tabs>

并且在做这个页面的时候，需要有的页面一次开多个，有的页面只能开一个，二级菜单都是只能打开一个，当前二级菜单下的所有三级标签，都是可以开多个的存在。所以在这里我使用了多层判断，

• 第一，判断是不是二级菜单，二级菜单跟三级标签页唯一的差别就是没有少一个id参数，（会员id或者服务id之类的），新增服务除外，因为他有两种可能
• 第二，如果不是二级菜单，那么那么就要判断它不是新增服务页面，并且他的id唯一的时候，这个时候就添加一个标签页，随后还要在进行判断，判断传进来的值中当id或者name其中一个不唯一的时候，比如我打开了一个会员的不同服务，（因为我有个服务前跟服务后。）这个时候如果还按唯一来判断就出只显示一个。在这个时候我还要在判断是不是新增服务页面，如果是的话，那就说明之前以及存在了一个新增服务页面，这个时候就是需要使用findindex获取name为新增服务的返回的值（i），将标签数组中的下标为i的值进行替换。如果不替换的话就会出现两个新增服务，如果不是新增服务，那么就是使用findindex获取id为当前传过来的值所返回的值（a），替换数组中下标为a的数。
• 第三，判断是否为新增服务，是的话就添加数组中进去。这个时候经过了第一步判断是不是二级菜单，万一是含有id的新增服务。那么就会到第二个判断，在判断name是不存在的，这个时候就到了第三个，添加了新增服务的页面。如果新增页面以及存在，那么就会在第二个判断那里进行替换。
• 第四，判断是否为二级菜单，如果是那么就直接添加到标签数组中
• 第五，因为刚进入页面的时候进入的是欢迎页这个页面只有在第一次进入页面的时候才有，当我单击左侧任何的标签的时候，他都会消失。
  if (this.editableTabs[0].title === '欢迎页') { this.editableTabs.splice(0, 1) }
• 第六，当我每次单击标签或者左侧二级标签的时候都要循环加判断，将当前点击的标签的flag值改为true，否则整个页面为空白。

for (var i = 0; i < this.editableTabs.length; i++) {
   
        if (tab.label === this.editableTabs[i].title) {
   
          this.editableTabs[i].flag = true
        }
      }

• 第七，在第一次进入页面的时候&#