ldap-clients/doc/ResMain备份.vue

<template>
  <div class='flex-row' id="box">
    <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top">
      <h3>资源管理</h3>
      <div class="span" style="max-height: calc(100% - 262px)">
        <resource-tree :functions='functions' :userid='userid' is-click="false" v-if="treeOrIcon"></resource-tree>
      </div>

      <div class="tree-flex-footer">
        <!-- <a @click="refresh()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">刷新菜单</span></a> -->
        <a @click="refresh(1)"><span><img :src="imgs.open" alt="">刷新菜单</span></a>
        <dropdown>
          <button type="button" data-toggle="dropdown">
            <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
          </button>
          <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
            <li>系统信息及设置</li>
            <li>2017年4月6日 15:32:54</li>
            <li>修改密码</li>
            <li>系统版本:1.0.0</li>
          </ul>
        </dropdown>
        <!-- <a href="home.html" onclick="return confirm('您确定要退出系统吗？');"> -->
        <a @click='$back()'>
          <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">返回上级</span>
        </a>
      </div>
    </div>

    <div class="line" id="line" v-show="treeOrIcon"></div>

    <div class="flex right-bg" id="bottom">
      <!-- <header class="right-header" v-if="headerHint">
        <span>当前总收费:
          <h4>{{ value }}</h4>
          元</span>
        <span>{{functions.name}}</span>
      </header> -->
      <div class="span">
        <!--  <dynamic :comps='[]' name='resmain'></dynamic>-->
        <dynamic-ldap v-ref:paged :comps='[]' name='resmain'></dynamic-ldap>
      </div>

    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'

  export default {
    title: '主界面',
    props: ['data'],
    data () {
      return {
        // 左侧树下部三个小图标
        imgs: {
          open: './static/refresh.png',
          set: './static/treeset.png',
          out: './static/treeout.png'
        },
        treeOrIcon: true,
        treeWidth: 300,
        headerHint: true, // 右侧顶部提示信息
        routeName: 'resmain',
        value: 25645.26,
        selcttabs:[],
        functions: Util.f
      }
    },
    ready () {
      this.userid = this.$login.f.id
      // 获取刷新数据
      this.refresh()

      let oBox = this.getElement("box")
      let	oTop = this.getElement("top")
      let	oBottom = this.getElement("bottom")
      let oLine = this.getElement("line")
      let that = this
      oLine.onmousedown = function(e) {
        let disX = (e || event).clientX
        oLine.left = oLine.offsetLeft
        document.onmousemove = function(e) {
          let iT = oLine.left + ((e || event).clientX - disX)
          var e = e || window.event
          let tarnameb = e.target || e.srcElement
          let maxT = oBox.clientWight - oLine.offsetWidth
          oLine.style.margin = 0
          iT < 0 && (iT = 0)
          iT > maxT && (iT = maxT)
          oLine.style.left = oTop.style.width = iT + "px"
          oBottom.style.width = oBox.clientWidth - iT + "px"
          console.log(iT)
          that.$set('treeWidth', iT)
          console.log("that.treeWidth-->"+that.treeWidth)
          return false
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
          oLine.releaseCapture && oLine.releaseCapture()
        }
        oLine.setCapture && oLine.setCapture()
        return false
      }
    },
    methods: {
      async refresh (ret) {
        await Util.loadRightResource(this)
        await Util.loadlicensepolicy(this)
        await Util.loadFuntionResource(this)
        await Util.loadLdapRes(this)
        if(ret == 1){
          this.$refs.paged.removeAll()
        }
      },
      getElement(id) {
        return document.getElementById(id)
      },
      changeShow () {
        this.treeOrIcon = !this.treeOrIcon
        let oBox = this.getElement("box")
        let	oTop = this.getElement("top")
        let	oBottom = this.getElement("bottom")
        let oLine = this.getElement("line")
        if (this.treeOrIcon) {
          // oLine.style.left = oTop.style.width = 300 + "px"
          oTop.style.width = this.treeWidth + "px"
          oBottom.style.width = oBox.clientWidth - this.treeWidth + "px"
        }else {
          oLine.style.left = oTop.style.width = 60 + "px"
          oBottom.style.width = oBox.clientWidth - 60 + "px"
        }

      }
    },
    computed: {
      nowDate () {
        return Util.getNowDate()
      }
    }
  }
</script>
<style scoped>
  /*右侧区域的背景*/
  .right-bg {
    width: 100%;
    flex: 1;
    /*border-radius: 5px 5px 5px 5px;*/
    /*padding:0px 15px 15px 0px;*/
    /*margin-right: 15px;*/
    padding: 10px 15px;
    font-size: 1em;
    font-family: 微软雅黑;
  }
  /*.right-bg section {
    flex: 1;
  }*/
  .right-header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    height: 40px;
    background: #E3EAF3;
    width: 100%;
    border-radius: 3px;
    padding: 0px 30px;
  }
  .right-header h4 {
    color: #67BA2F;
    display: inline-block;
  }
  .tree-flex {
    height: 100%;
    width: 300px;
    /*width: 60px;*/
    background: #4a7cae;
    color: #fff;

  }
  .tree-flex-icon {
    width: 60px;
    /*transition: 0.5s;*/
  }
  .tree-flex h3 {
    text-align: center;
    line-height: 80px;
    margin: 0px;
    border-bottom: 1px solid #e5e5e5;
  }

  .tree-flex-footer {
    height: 180px;
    display: flex;
    flex-direction:column;
    color: #fff;
    border-top: 1px solid #e5e5e5;
  }
  .tree-flex-footer a,.tree-flex-footer button{
    height: 60px;
    padding: 15px;
    font-size: 1.2em;
    border-top: 1px solid #4a7cae;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  .tree-flex-footer button {
    width: 100%;
    border-radius: 0px;
    background-color: rgba(255,255,255,0);
    border: none;
    border-top: 1px solid #4a7cae;
    text-align: left;
  }
  .tree-flex-footer button:hover{
    outline: none;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex-footer button:focus {
    outline: none;
    background-color: rgba(255,255,255,0.5);
  }
  .tree-flex-footer a:hover {
    color: #FFF;
    background-color: rgba(255,255,255,0.2);
  }
  .btn-group {
    height: 60px!important;
  }

  .tree-flex .dropdown-menu {
    /* 控制显示列表的样式 */
    background: #4C637B;
    border-radius: 0px;
    color: #fff;
    width: auto;
    margin: 0px;
    padding: 0px;
  }
  .tree-flex .tree-flex.dropdown-menu-up {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: auto!important;
    bottom: 0;
  }
  .tree-flex .dropdown-menu-down {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: 0!important;
  }
  .tree-flex .dropdown-menu li{
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #697D93;
    font-size: 1.3em;
    width: auto;
    white-space: nowrap;
    cursor: default;

  }
  .tree-flex .dropdown-menu li + li {
    text-align: left;
    border: 0;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1em;
    cursor: pointer;
  }
  .tree-flex .dropdown-menu li + li:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex .dropdown-menu li a {
    border: none;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    padding: 0px;
  }
  .tree-flex .dropdown-menu li a:hover {
    color: #fff;
    background-color: rgba(255,255,255,0);
  }
  .tree-flex img{
    height: 1.2em;
    width: 1.2em;
    margin-right: 15px;
    margin-left: 5px;
  }
  .line {
    height: 100%;
    width: 0px;
    background: #4C637B;
    cursor: e-resize;
  }
  /*为树（tree）组件写的样式*/
  .tree-img {
    font-size: 1.3em;
  }

  /* 滚动条样式 */
  /*---滚动条默认显示样式--*/
  ::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0.2);
    height:50px;
    outline-offset:-2px;
    /*outline:2px solid #fff;*/
    -webkit-border-radius:4px;
    /*border: 2px solid #fff;*/
  }

  /*---鼠标点击滚动条显示样式--*/
  ::-webkit-scrollbar-thumb:hover{
    background-color:rgba(0,0,0,0.4);
    height:50px;
    -webkit-border-radius:4px;
  }
  /*---滚动条大小--*/
  ::-webkit-scrollbar{
    width:8px;
    height:8px;
  }
  /*---滚动框背景样式--*/
  ::-webkit-scrollbar-track-piece{
    /* 全透明，不显示 */
    background-color:rgba(255,255,255,0);
    -webkit-border-radius:0;
  }
  /*为所有输入框配置一个背景颜色,当获取焦点后颜色变白*/
  input.form-control { height: auto;background: #d7e7f6; }
  input:focus { background:#fff; border: solid 1px #9cb9da; }
  textarea.form-control { height: auto;background: #d7e7f6; }
  textarea:focus { background:#fff; border: solid 1px #9cb9da; }
  select.form-control { height: auto;background: #d7e7f6; }
  select:focus { background:#fff; border: solid 1px #9cb9da; }

  /*表格扩充元素*/
  /*表体的背景颜色*/
  .table-hover {background-color: #bdcde3;}
  /*表头颜色*/
  .table-hover thead tr th {background-color: #93a8cc; padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none; text-align:center; color:white;}
  /*将td元素放大一点*/
  .table-hover > tbody > tr > td{ padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none;}
  /*当鼠标移动到这一行上时的背景颜色，bootstrap也有这个效果，不过颜色不好看*/
  .table-hover > tbody > tr:hover {
    background-color: #a8bad4;
  }
  .btn-group>.btn {
    margin-right: 20px;
  }
  .list-group {
    margin-bottom: 0px!important;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    border-radius:15px;
  }
  .txtline {
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:#4a7cae;
  }
  .form-fix-width{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
  }
  .form-fix-width>:first-child{
    width: 100px;
    -webkit-box-flex:none;
    -webkit-flex:none;
    -ms-flexbox-flex:none;
    flex:none;
  }
  .form-fix-width>:last-child{
    flex:1;
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flexbox-flex:1;
  }
</style>