修改布局细节问题

2022-02-28 13:44:05 +08:00
parent ed4ce0bcb1
commit 516f98a922
9 changed files with 322 additions and 201 deletions
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div class="box-title-text">
-      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="$t('PleaseEnterOrSelect')+query.db_field_name"/>
+      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="$t('PleaseEnterOrSelect')+query.db_field_txt"/>
      <a-button type="primary" class="button-box" @click="standardClick">
        人员选择
      </a-button>
@@ -6,7 +6,7 @@
      <!--        <span :class="{'title-text-text':false}">{{query.enName}}</span><br>-->
      <!--        <span :class="{'title-text-text':false}">{{query.name}}</span>-->
      <!--      </div>-->
-      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="$t('PleaseEnterOrSelect')+query.db_field_name"/>
+      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="$t('PleaseEnterOrSelect')+query.db_field_txt"/>
      <a-button type="primary" class="button-box" @click="standardClick">
        标准选择
      </a-button>
@@ -3,24 +3,24 @@
    <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
    <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-<!--    <a-tabs-->
-<!--      @contextmenu.native="e => onContextmenu(e)"-->
-<!--      v-if="multipage"-->
-<!--      :active-key="activePage"-->
-<!--      class="tab-layout-tabs"-->
-<!--      style="height:52px"-->
-<!--      :hide-add="true"-->
-<!--      type="editable-card"-->
-<!--      @change="changePage"-->
-<!--      @tabClick="tabCallBack"-->
-<!--      @edit="editPage">-->
-<!--      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"-->
-<!--                  :closable="!(page.meta.title=='首页')">-->
-<!--        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>-->
-<!--      </a-tab-pane>-->
-<!--    </a-tabs>-->
-<!--    style="margin: 12px 12px 0;"-->
-    <Tabcrumbs v-if="isTrue"/>
+    <!--    <a-tabs-->
+    <!--      @contextmenu.native="e => onContextmenu(e)"-->
+    <!--      v-if="multipage"-->
+    <!--      :active-key="activePage"-->
+    <!--      class="tab-layout-tabs"-->
+    <!--      style="height:52px"-->
+    <!--      :hide-add="true"-->
+    <!--      type="editable-card"-->
+    <!--      @change="changePage"-->
+    <!--      @tabClick="tabCallBack"-->
+    <!--      @edit="editPage">-->
+    <!--      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"-->
+    <!--                  :closable="!(page.meta.title=='首页')">-->
+    <!--        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>-->
+    <!--      </a-tab-pane>-->
+    <!--    </a-tabs>-->
+    <!--    style="margin: 12px 12px 0;"-->
+    <Tabcrumbs v-if="isTrue" :menuTitle="menuTitle"/>
    <div>
      <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
      <keep-alive v-if="multipage">
@@ -65,7 +65,8 @@
          { key: '2', icon: 'arrow-right', text: '关闭右侧' },
          { key: '3', icon: 'close', text: '关闭其它' }
        ],
-        reloadFlag: true
+        reloadFlag: true,
+        menuTitle: {},
      }
    },
    /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用 ->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
@@ -84,13 +85,13 @@
          return this.$store.state.app.multipage
        }
      },
-      isTrue(){
-          if (this.$route.path == '/docManage/library/detail'){
-            return false
-          }else{
-            return true
-          }
-      },
+      isTrue() {
+        if (this.$route.path == '/docManage/library/detail') {
+          return false
+        } else {
+          return true
+        }
+      }
    },
    created() {
      if (this.$route.path != indexKey) {
@@ -447,15 +448,18 @@

  .ant-card {
    z-index: 999;
-    background: transparent!important;
-  }
-  .ant-input{
    background: transparent !important;
  }
-  .ant-select-selection{
+
+  .ant-input {
    background: transparent !important;
  }
-  .ant-table-placeholder{
+
+  .ant-select-selection {
+    background: transparent !important;
+  }
+
+  .ant-table-placeholder {
    background: transparent !important;
  }
 </style>
@@ -15,10 +15,13 @@
 <script>
  export default {
    name: 'Tabcrumbs',
+    props: ['menuTitle'],
    data() {
      return {
        Navigation: '文档管理',
-        subNavigation: null
+        subNavigation: null,
+        selectedKeys: [],
+        openKeys:[],
      }
    },
    watch: {
@@ -27,7 +30,7 @@
          this.Navigation = val.meta.title
          this.subNavigation = null
        } else {
-          this.subNavigation = val.meta.title
+          this.updateMenu()
        }
      }
    },
@@ -36,11 +39,27 @@
        this.Navigation = this.$route.meta.title
        this.subNavigation = null
      } else {
+        this.updateMenu()
+      }
+    },
+    methods: {
+      updateMenu() {
+        const routes = this.$route.matched.concat()
+        const { hidden } = this.$route.meta
+        if (routes.length >= 3 && hidden) {
+          routes.pop()
+          this.selectedKeys = [routes[routes.length - 1].path]
+        } else {
+          this.selectedKeys = [routes.pop().path]
+        }
+        this.openKeys = []
+        routes.forEach(item => {
+          this.openKeys.push(item)
+        })
+        this.Navigation =this.openKeys[1].meta.title
        this.subNavigation = this.$route.meta.title
      }
-
-    },
-    methods: {}
+    }
  }
 </script>

@@ -69,7 +69,7 @@
    methods: {
      onSelect(obj) {
        this.$emit('menuSelect', obj)
-      }
+      },
    }
  }
 </script>
@@ -26,7 +26,7 @@ export default {
      default: false
    }
  },
-  data () {
+  data() {
    return {
      openKeys: [],
      selectedKeys: [],
@@ -40,11 +40,11 @@ export default {
      return keys
    }
  },
-  mounted () {
+  mounted() {
    this.updateMenu()
  },
  watch: {
-    collapsed (val) {
+    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
@@ -52,14 +52,13 @@ export default {
        this.openKeys = this.cachedOpenKeys
      }
    },
-    $route: function () {
+    $route: function() {
      this.updateMenu()
    }
  },
  methods: {
    // select menu item
-    onOpenChange (openKeys) {
-
+    onOpenChange(openKeys) {
      // 在水平模式下时执行，并且不再执行后续
      if (this.mode === 'horizontal') {
        this.openKeys = openKeys
@@ -73,7 +72,7 @@ export default {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
-    updateMenu () {
+    updateMenu() {
      const routes = this.$route.matched.concat()
      const { hidden } = this.$route.meta
      if (routes.length >= 3 && hidden) {
@@ -89,24 +88,24 @@ export default {
        })
      }
      //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-      if(!this.selectedKeys || this.selectedKeys[0].indexOf(":")<0){
+      if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
      }
      //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
    },

    // render
-    renderItem (menu) {
+    renderItem(menu) {
      if (!menu.hidden) {
        return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
      }
      return null
    },
-    renderMenuItem (menu) {
+    renderMenuItem(menu) {
      const target = menu.meta.target || null
      const tag = target && 'a' || 'router-link'
      let props = { to: { name: menu.name } }
-      if(menu.route && menu.route === '0'){
+      if (menu.route && menu.route === '0') {
        props = { to: { path: menu.path } }
      }

@@ -122,42 +121,75 @@ export default {
      }

      return (
-        <Item {...{ key: menu.path }}>
-          <tag {...{ props, attrs }}>
-            {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
-          </tag>
-        </Item>
-      )
+        < Item
+      {...
+        {
+          key: menu.path
+        }
+      }
+    >
+    <
+      tag
+      {...
+        {
+          props, attrs
+        }
+      }
+    >
+      {
+        this.renderIcon(menu.meta.icon)
+      }
+    <
+      span > { menu.meta.title } < /span>
+      < /tag>
+      < /Item>
+    )
    },
-    renderSubMenu (menu) {
+    renderSubMenu(menu) {
      const itemArr = []
      if (!menu.alwaysShow) {
        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
      }
      return (
-        <SubMenu {...{ key: menu.path }}>
-          <span slot="title">
-            {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
-          </span>
-          {itemArr}
-        </SubMenu>
-      )
+        < SubMenu
+      {...
+        {
+          key: menu.path
+        }
+      }
+    >
+    <
+      span
+      slot = 'title' >
+        { this.renderIcon(menu.meta.icon) }
+        < span > { menu.meta.title } < /span>
+        < /span>
+      {
+        itemArr
+      }
+    <
+      /SubMenu>
+    )
    },
-    renderIcon (icon) {
+    renderIcon(icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }
      const props = {}
      typeof (icon) === 'object' ? props.component = icon : props.type = icon
      return (
-        <Icon {... { props } }/>
-      )
+        < Icon
+      {...
+        {
+          props
+        }
+      }
+      />
+    )
    }
  },

-  render () {
+  render() {
    const { mode, theme, menu } = this
    const props = {
      mode: mode,
@@ -180,9 +212,21 @@ export default {
    })
    // {...{ props, on: on }}
    return (
-      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
-        {menuTree}
-      </Menu>
-    )
+      < Menu
+    vModel = { this.selectedKeys }
+    {...
+      {
+        props, on
+      :
+        on
+      }
+    }
+  >
+    {
+      menuTree
+    }
+  <
+    /Menu>
+  )
  }
 }
@@ -111,7 +111,7 @@
      return {
        collapsed: false,
        activeMenu: {},
-        menus: []
+        menus: [],
      }
    },
    computed: {
@@ -131,7 +131,6 @@
      //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
      //this.menus = this.mainRouters.find((item) => item.path === '/').children;
      this.menus = this.permissionMenuList
-
      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
      this.collapsed = !this.sidebarOpened
      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
@@ -157,6 +156,7 @@
      },
      //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
      myMenuSelect(value) {
+        console.log(value)
        //此处触发动态路由被点击事件
        this.findMenuBykey(this.menus, value.key)
        this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)