图一.png

图二.png

大致效果.gif

根据上面的图片可以看到，左侧的十三个页面大体上结构都是相同的，除了右侧的不同的按钮以及不同的按钮个数，这种情况下，就可以考虑使用动态路由传参以及slot具名插槽等技术去处理简化达到最优解。

1、使用到的技术方向

• 动态路由传参
• slot具名插槽
• watch侦听器
• 组件的封装
  ..等

2、开始对路由进行处理

体系建设是我这个项目的一个大的模块，下面13个页面结构类似，因此，直接写一个主入口targetManagement组件，这个模块所有的页面都跳转到这个页面，通过不同的页面的id实现获取不同的接口数据，由于我这个项目还有个打开文件夹的功能，因此，需要使用/targetManagement/:id/:fid将id以及fid拼接到后面作为参数传入路由。

      // 体系建设
      {
        path: '/targetManagement/:id',
        name: 'targetManagement',
        component: () => import('@/views/pages/systemConstruction/targetManagement.vue'),
        meta: {
          title: [{
            name: '体系建设',
            url: ''
          }]
        }
      },
      // 文件夹查看
      {
        path: '/targetManagement/:id/:fid',
        name: 'targetManagement',
        component: () => import('@/views/pages/systemConstruction/components/foldersView.vue'),
        meta: {
          title: [{
            name: '体系建设',
            url: ''
          }, {
            name: '目标管理',
            url: ''
          }]
        }
      },

3、对页面进行唯一性处理

router-view是指的页面内容占位区域，也就是显示的部分，这里将路由路径进行唯一的key值绑定

<template>
  <div class="box">
    <navTop />
    <div class="content">
      <transition name="myfade" mode="out-in">
        <router-view :key="key" />
      </transition>
    </div>
  </div>
</template>
<script>
import navTop from "./navTop";

export default {
  name: "viewBox",
  components: {
    navTop,
  },
  computed: {
    key() {
      return this.$route.fullPath;
    },
  },
};
</script>

4、左侧导航栏菜单根据后台接口返回动态渲染

这部分获取接口返回过来的左侧菜单栏进行渲染操作

        <!-- 左侧菜单 -->
        <div class="menu-box">
          <div class="menu-wrap" :style="styleProps">
            <div class="logo-img">
              <!-- <img src="../assets/logo.png" alt /> -->
              <span>******平台</span>
            </div>
            <Menu
              :style="styleProps"
              :active-name="$route.menuUrl"
              :open-names="['home']"
              :theme="menuTheme"
              width="auto"
              :class="menuitemClasses"
              accordion
            >
              <template v-for="(item, componentIndex) in menu">
                <!-- 展开并且有子菜单 -->
                <Submenu
                  v-if="!isCollapsed && item.children && item.children.length"
                  v-bind:key="componentIndex"
                  :name="componentIndex"
                >
                  <template slot="title">
                    <Icon :type="item.menuIcon" />
                    <span>{{ item.menuName }}</span>
                  </template>
                  <MenuItem
                    v-for="children in item.children"
                    :key="children.menuUrl"
                    :name="children.menuUrl"
                    @click="handleRouter(children)"
                    :to="children.menuUrl"
                  >
                    {{ children.menuName }}
                  </MenuItem>
                </Submenu>

                <!-- 展开但没有子菜单 -->
                <MenuItem
                  v-else-if="!isCollapsed"
                  :name="item.menuUrl"
                  :to="item.menuUrl"
                  v-bind:key="componentIndex"
                >
                  <Icon :type="item.menuIcon" />
                  <span>{{ item.menuName }}</span>
                </MenuItem>

                <!-- 不展开有子菜单 -->
                <Dropdown
                  v-else-if="
                    isCollapsed && item.children && item.children.length
                  "
                  v-bind:key="componentIndex"
                  placement="right-start"
                  class="menu-dropdown"
                >
                  <MenuItem :name="item.menuUrl" :to="item.menuUrl">
                    <Icon :type="item.menuIcon" />
                    <span>{{ item.menuName }}</span>
                  </MenuItem>
                  <DropdownMenu slot="list">
                    <DropdownItem
                      v-for="(children, index) in item.children"
                      :key="index"
                      style="padding: 0 0; background-color: #515a6e"
                    >
                      <MenuItem :name="children.menuUrl" :to="children.menuUrl">
                        {{ children.menuName }}
                      </MenuItem>
                    </DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <!-- 不展开无子菜单 -->
                <Tooltip
                  v-else-if="isCollapsed"
                  :content="item.name"
                  placement="right"
                  v-bind:key="componentIndex"
                >
                  <MenuItem :name="item.menuUrl" :to="item.menuUrl">
                    <Icon :type="item.menuIcon" />
                    <span>{{ item.menuName }}</span>
                  </MenuItem>
                </Tooltip>
              </template>
            </Menu>
          </div>
        </div>

图三.png

5、模块处理过程

创建一个主入口页面.png

5.1、公共页面组件的搭建

创建一个BasicSystem组件为一个子组件，也就是去负责一些公共的部分，而右侧的不同内容的按钮需要根据item.btnId == key.split('/')[2]判断对应的内容去显示出来，uniId也就是监听到的拼接在路径末尾不同的id值。

    <transition-group name="fade" mode="out-in">
      <BasicSystem
        :key="uniId"
        :ps="ps"
        :pn="pn"
        :total="total"
        @handleSearch="handleSearch"
        @changePage="changePage"
        @handleSuccess="handleSuccess"
        @handleUpload="handleUpload"
        :dataList="dataList"
      >
        <template v-for="item in btns">
          <Button
            v-if="item.btnId == key.split('/')[2]"
            :key="item.id"
            type="primary"
            slot="fn-btn"
            @click="handleAll(item.handleName, item.row)"
            >{{ item.text }}
          </Button>
        </template>
      </BasicSystem>
    </transition-group>

5.2、主入口监听路由以及存储

监听路由获取uniId存储在会话中有一个好处，就是在这个页面下去频繁使用到uniId处理逻辑的时候可以去直接获取而不用频繁的使用params或者query去传参。
存储btnsLength是因为按钮的个数是不确定的，因此页面的 header布局也是动态的，无法固定死，需要去计算。

  computed: {
    key() {
      this.handleSession();
      this.handleTypeList();
      return this.$route.fullPath;
    },
  },
  watch: {
    $route: {
      handler(to, from) {
        this.btnsLength = 0;
        this.uniId = to.params.id;
        btns.forEach((item) => {
          if (item.btnId == this.uniId) {
            this.btnsLength++;
          }
        });
        sessionStorage.setItem("uniId", this.uniId);
        sessionStorage.setItem("btnsLength", this.btnsLength);
      },
      immediate: true,
    },
  },

5.3、子组件的头部动态布局处理

子组件中因为头部的按钮可以是一个也可以是三个，因此需要btnsLength=sessionStorage.getItem("btnsLength")?sessionStorage.getItem("btnsLength"): 0去处理头部的占位问题。

      <div class="basic-header">
        <Row class="row">
          <Col span="12">
            <Input
              v-model="keyWord"
              clearable
              placeholder="请输入文件名称查询"
              style="width: 300px"
            ></Input>
            <Button class="basic-btn" type="primary" @click="handleSearch"
              >查询</Button
            >

            <Button
              class="basic-btn secondary"
              type="success"
              @click="handleDown"
              >批量下载</Button
            >
          </Col>
          <Col :span="12 - 2 * btnsLength" class="basic-btn-upload right-btn">
            <Button type="success" @click="handleUpload">文档上传</Button>
          </Col>
          <Col :span="2 * btnsLength" class="basic-btn-operator">
            <slot name="fn-btn"></slot>
          </Col>
        </Row>
      </div>

5.4、右侧按钮的统一化处理

在处理右侧按钮时，也就是在targetManagement组件的过程中，使用：

        <template v-for="item in btns">
          <Button
            v-if="item.btnId == key.split('/')[2]"
            :key="item.id"
            type="primary"
            slot="fn-btn"
            @click="handleAll(item.handleName, item.row)"
            >{{ item.text }}
          </Button>
        </template>

图四.png

将所有的按钮放在一个js文件中，然后用上述的方法去遍历，获取的到方法的第一个参数就是按钮的事件名，第二个参数就是按钮的一些id等数据用于去判断。

5.5、右侧按钮的统一化处理（二）

将事件写出去，但是当点击主入口上的不同的按钮时，依旧是可以执行方法的。

 // 右侧的操作按钮
    handleAll(handleName, row) {
      switch (handleName) {
        // 目标管理签署列表
        case "handleSignListManage":
          this.handleSignListManage();
          break;
        // 组织结构文件签署
        case "handleSignListOrigin":
          this.handleSignListOrigin();
          break;
        // 安全生产费用
        case "handleSafetyCost":
          this.handleSafetyCost();
          break;
        // 年产总值
        case "handleTotalProduction":
          this.handleTotalProduction();
          break;
        // 培训列表
        case "handleTrainList":
          this.handleTrainList();
          break;
        // 演练列表
        case "handleDrillList":
          this.handleDrillList();
          break;
        // 设备清单
        case "handleEquipment":
          this.handleEquipment();
          break;
        default:
          break;
      }
    },

这样，大概总共几十甚至近百的页面，简单的优化处理，至少省去了几十个页面的重复绘制以及写一些重复的逻辑过程，在后期项目维护中，也是大大节省了成本，只需修改一个主入口即可。