krd-srm-vue/src/views/main-content.vue

<template>
  <div>
    <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
      <!-- 主入口标签页 s -->
      <el-tabs
        v-if="$route.meta.isTab"
        v-model="mainTabsActiveName"
        :closable="true"
        @tab-click="selectedTabHandle"
        @tab-remove="removeTabHandle">
        <el-dropdown class="site-tabs__tools" :show-timeout="0">
          <i class="el-icon-arrow-down el-icon--right"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
            <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
            <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
            <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tab-pane
          v-for="item in mainTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name">
          <el-card :body-style="siteContentViewHeight">
            <iframe
              v-if="item.type === 'iframe'"
              :src="item.iframeUrl"
              width="100%" height="100%" frameborder="0" scrolling="yes">
            </iframe>
            <keep-alive v-else>
              <router-view v-if="item.name === mainTabsActiveName" />
            </keep-alive>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      <!-- 主入口标签页 e -->
      <el-card v-else :body-style="siteContentViewHeight">
        <keep-alive>
          <router-view />
        </keep-alive>
      </el-card>
    </main>

  </div>
</template>

<script>
import { isURL } from '@/utils/validate'
export default {
  inject: ['refresh'],
  data () {
    return {
      cloneSiftList:[],
      flag:false,
      settingFlag:false,
      selectionSiftList:[],
      recordList:[],
      selectData:{
        itemDesc:undefined,
      },
      querySavedVo:{
        menuId:this.$route.meta.menuId,
        userId:this.$store.state.user.id,
        itemNo:undefined,
        itemDesc:undefined,
        caseSensitiveFlag:'N'
      },
      saveQueryHeader:false,
    }
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight }
    },
    menuActiveName: {
      get () { return this.$store.state.common.menuActiveName },
      set (val) { this.$store.commit('common/updateMenuActiveName', val) }
    },
    mainTabs: {
      get () { return this.$store.state.common.mainTabs },
      set (val) { this.$store.commit('common/updateMainTabs', val) }
    },
    mainTabsActiveName: {
      get () { return this.$store.state.common.mainTabsActiveName },
      set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
    },
    siteContentViewHeight () {
      var height = this.documentClientHeight - 50 - 2
      if (this.$route.meta.isTab) {
        height -= 40
        return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
      }
      return { minHeight: height + 'px' }
    },
    siftList:{
      get(){
        return this.$store.state.sift.siftList.filter(e => e.visible === 'Y'|| this.settingFlag)
      },
    }
  },
  methods: {
    // tabs, 选中tab
    selectedTabHandle (tab) {
      tab = this.mainTabs.filter(item => item.name === tab.name)
      if (tab.length >= 1) {
        this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
      }
    },
    // tabs, 删除tab
    removeTabHandle (tabName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          var tab = this.mainTabs[this.mainTabs.length - 1]
          this.$router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
            this.mainTabsActiveName = this.$route.name
          })
        }
      } else {
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      }
    },
    // tabs, 关闭当前
    tabsCloseCurrentHandle () {
      console.log(this.$route.meta.menuId)
      this.removeTabHandle(this.mainTabsActiveName)
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle () {
      this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
    },
    // tabs, 关闭全部
    tabsCloseAllHandle () {
      this.mainTabs = []
      this.menuActiveName = ''
      this.$router.push({ name: 'home' })
    },



  },
  watch:{
    // 监听路由变化调用筛选查询
    // $route:'flushSift'
  },
  mounted() {
    // this.flushSift()
    console.log(this.$store.state.user.id)
  }
}
</script>

<style scoped>
/deep/ .el-table .cell{
  height: auto;
}
.box-div{
  width: 100%;
  margin-bottom: 5px;
  padding-bottom: 5px;
  //border-bottom: 1px solid #eee;
}
.box-div button{
  height: 32px;
  width: 80px;
  background: rgb(22,179,163);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.box-div button:hover{
  background: rgb(97, 217, 204);
}

/deep/ .el-input .el-input-group__prepend{
  background-color: #fff;
}

/deep/ .el-autocomplete .el-input .el-input-group__append{
  background-color: rgb(22,179,163);
  color: #fff;
  border: 1px solid rgb(22,179,163);
}

.el-input-number /deep/ .el-input__inner{
  text-align: right;
  padding-right: 5px !important;
}

/deep/ .el-input-number--medium{
  line-height: 20px;
}
</style>