<template>
 <Layout style=" margin:-8px;" :border="false"  >
  <LayoutPanel region="north" style="background: #1e282c;background: linear-gradient(to right, #3859e5, #23268e);height:50px;">

      <h2 style="padding-left:20px; font-size:14px;">easy ui vue 后台管理系统</h2>

  </LayoutPanel>
 <LayoutPanel  region="west" :title="'管理导航'"  :collapsible="true" :style="{width:width+'px',height:setHeight+'px'}">
   <Accordion ref="acc"   :border="false">
            <AccordionPanel v-for="p in menus" :title="p.text" :key="p.text" >
               <Tree :data="p.children" @selectionChange="addTopMenus($event)"></Tree>
            </AccordionPanel>
        </Accordion>
    </LayoutPanel>
  <LayoutPanel region="center" :style="{height:setHeight+'px'}" >
    <Tabs ref="tabs" :scrollable="true"  :border="false"  @tabClose ="onTabClose($event)">
      <TabPanel v-for="(item, index) in tabsItem"
                :key="index"
                :title="item.text"
                :closable="item.closable"
                :ref="item.ref">
        <component :is="item.content"></component>
         
      </TabPanel>
    </Tabs>
 </LayoutPanel>
  </Layout>
</template>

<script>
import sideMenu from '../json/menus.json'
import welcome from '../Welcome/index'
export default {
  data () {
    return {
      title: '后台管理',
      width: 200,
      collapsed: false,
      selectedMenu: null,
      menus: sideMenu.data,
      closePanel: null,
      tabsItem: [ {
            id: '1',
            text: '首页',
            closable: false,
            ref: 'tabs',
            content: welcome
          }],
      currentIndex:0
    }
  },
   computed: {
      setHeight() {
        return (document.documentElement.clientHeight || document.body.clientHeight) - 65
      }
    },
  methods: {
   addTopMenus(menu) {
            let topMenus = this.tabsItem;
            if (topMenus.length < 1) {
                this.currentIndex++;
                topMenus.push({
                    "id": menu.id,
                    "text": menu.text,
                    "closable": menu.closable,
                    "index": this.currentIndex,
                    "ref": "tab" + this.currentIndex,
                    "content": () => import('../admin/' +menu.path+'.vue')
                });
                this.$nextTick(() => { this.$refs.tabs.select(this.currentIndex); })
            } else 
            {
                var find = false;
                var Selectindex = 0;
                for (var i in topMenus) {
                    var id = topMenus[i].id;
                    if (menu.id == id) {
                        Selectindex = topMenus[i].index;
                        find = true;
                        break;
                    }
                }
                if (!find) {
                    this.currentIndex++;
                    topMenus.push({
                        "id": menu.id,
                        "text": menu.text,
                        "closable": menu.closable,
                        "index": this.currentIndex,
                        "ref": "tab" + this.currentIndex,
                        "content": () => import('../admin/' +menu.path+'.vue')
                    });
                    this.$nextTick(() => { this.$refs.tabs.select(this.currentIndex);})
                } else {
                this.$nextTick(() => {this.$refs.tabs.select(Selectindex);})
                }

            }
   },
    onTabClose (panel) {
      this.tabsItem = this.tabsItem.filter(p => p.text !== panel.title);
    }  
  }
}
</script>

{"data":[{
  "id":1,
  "text": "业务工作",
  "iconCls": "fa fa-wpforms",
  "state": "open",
  "children": [
    {
      "id":2,
      "closable":true,
      "text": "数据管理",
      "path": "pat"
    },
    {
      "id":3,
      "closable":true,
      "text": "合同管理",
      "path": "office"
    },
    {
      "id":4,
      "closable":true,
      "text": "签单管理",
      "path": "../admin/pat"
    },
    {
      "id":5,
      "closable":true,
      "text": "回访管理",
      "path": "../admin/index"
    }
  ]
},
{
  "id":6,
  "text": "数据挖掘管理",
  "state": "closed",
  "children": [
    {
      "id":7,
      "closable":true,
      "text": "客户管理"
    },
    {
      "id":8,
      "closable":true,
      "text": "合同管理"
    }
  ]
},
{
  "id":9,
  "text": "系统管理",
  "state": "closed",
  "children": [
    {
      "id":10,
      "closable":true,
      "text": "用户管理"
    },
    {
      "id":11,
      "closable":true,
      "text": "角色管理"
    }
  ]
}]
}

<template>
  <div style=" background:#F4F4F4;">
    

  
     <table width="100%" cellpadding="0" cellspacing="15" >
    <tr>
      <td>
        
        所属分了：<ComboBox inputId="c1" v-model="value" :data="{bigclass}"  placeholder="请选择"></ComboBox>
        关键字：<TextBox inputId="t1" v-model="fname"  placeholder="请输入关键字"></TextBox>
      <LinkButton iconCls="icon-search" :toggle="true">搜索</LinkButton>
      
      </td>
      <td></td>
    </tr>
  </table>

     <DataGrid :title="ddd"
             :border="false"
              :pagination="true"
              :lazy="true"
              :data="data"
              :total="total"
              :loading="loading"
              :pageNumber="pageNumber"
              :pageSize="pageSize"
              :pagePosition="pagePosition"
        @pageChange="onPageChange($event)">
            <GridColumn field="inv" title="Inv No"></GridColumn>
            <GridColumn field="name" title="Name"></GridColumn>
            <GridColumn field="amount" title="Amount" align="right"></GridColumn>
            <GridColumn field="price" title="Price" align="right"></GridColumn>
            <GridColumn field="cost" title="Cost" align="right"></GridColumn>
            <GridColumn field="note" title="Note"></GridColumn>
        </DataGrid>

  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      bigclass:["国家"],
      loading: false,
      pagePosition: "bottom",
      pageOptions: [
        { value: "bottom", text: "Bottom" },
        { value: "top", text: "Top" },
        { value: "both", text: "Both" }
      ]
    };
  },
  created() {
    this.loadPage(this.pageNumber, this.pageSize);
  },
  methods: {
    onPageChange(event) {
      this.loadPage(event.pageNumber, event.pageSize);
    },
    loadPage(pageNumber, pageSize) {
      this.loading = true;
      setTimeout(() => {
        let result = this.getData(pageNumber, pageSize);
        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.data = result.rows;
        this.loading = false;
      }, 1000);
    },
    getData(pageNumber, pageSize) {
      let total = 100000;
      let data = [];
      let start = (pageNumber - 1) * pageSize;
      for (let i = start + 1; i <= start + pageSize; i++) {
        let amount = Math.floor(Math.random() * 1000);
        let price = Math.floor(Math.random() * 1000);
        data.push({
          inv: "Inv No " + i,
          name: "Name " + i,
          amount: amount,
          price: price,
          cost: amount * price,
          note: "Note " + i
        });
      }
      return {
        total: total,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: data
      };
    }
  }
};
</script>