系统管理

pages/basicData/menu/index.vue

 <template>
-  <div>
-    <TreeGrid :columns="columns" ref="grid" :items="list">
-      <template slot="buttons">
-        <Button type="primary" @click="add()">新增系统</Button>
-        <!-- <Button type="primary" @click="importModal=true">导入菜单</Button> -->
-      </template>
-    </TreeGrid>
-    <Modal v-model="addModal" title="新增" width="1000" footer-hide>
-      <Add @on-close="cancel" :v="curModel" @on-ok="addOk" />
-    </Modal>
-    <Modal v-model="apiModal" title="设置接口" width="1000" footer-hide>
-      <AddApi @on-close="cancel" :v="curModel" @on-ok="apiOk" />
-    </Modal>
-    <Modal v-model="editModal" title="编辑" width="1000" footer-hide>
-      <Edit :eid="curId" :v="curModel" @on-close="cancel" @on-ok="addOk" />
-    </Modal>
-    <Modal v-model="detailModal" title="详情">
-      <Detail :eid="curId" />
-    </Modal>
-    <Modal v-model="importModal" title="导入系统菜单" width="800" @on-ok="importOk">
-      <h1 v-if="systemList.length==0">请先创建系统</h1>
-      <div v-else>
-        <Select placeholder="请选择系统" v-model="systemId" :data="systemList">
-          <Option v-for="(li,i) in systemList" :value="li.id" :key="li.id">{{li.name}}</Option>
-        </Select>
-        <!-- <div class="h400">
+  <Layout class="full">
+    <Sider
+      hide-trigger
+      :style="{ background: '#fff' }"
+      class="menu"
+      width="240"
+    >
+      <h3 class="title">
+        新增系统
+        <ButtonGroup class="fr" size="small">
+          <Button icon="md-add" title="新增顶级" @click="add()"></Button>
+        </ButtonGroup>
+      </h3>
+      <Menu :theme="theme3" active-name="0" @on-select="clickSelect">
+        <MenuItem :name="index" v-for="(item, index) in list" :key="index">
+          {{ item.name }}
+        </MenuItem>
+      </Menu>
+
+      <!-- <ul>
+        <li
+          v-for="(item, index) in list"
+          :key="index"
+          :class="{ active: index == isActive }"
+          @click="itemClick(index)"
+        >
+          {{ item.name }}
+        </li>
+      </ul> -->
+    </Sider>
+    <Content class="content">
+      <TreeGrid :columns="columns" ref="grid" :items="newList">
+        <template slot="buttons">
+          <!-- <Button type="primary" @click="add()">新增系统</Button> -->
+          <!-- <Button type="primary" @click="importModal=true">导入菜单</Button> -->
+        </template>
+      </TreeGrid>
+      <Modal v-model="addModal" title="新增" width="1000" footer-hide>
+        <Add @on-close="cancel" :v="curModel" @on-ok="addOk" />
+      </Modal>
+      <Modal v-model="apiModal" title="设置接口" width="1000" footer-hide>
+        <AddApi @on-close="cancel" :v="curModel" @on-ok="apiOk" />
+      </Modal>
+      <Modal v-model="editModal" title="编辑" width="1000" footer-hide>
+        <Edit :eid="curId" :v="curModel" @on-close="cancel" @on-ok="addOk" />
+      </Modal>
+      <Modal v-model="detailModal" title="详情">
+        <Detail :eid="curId" />
+      </Modal>
+      <Modal
+        v-model="importModal"
+        title="导入系统菜单"
+        width="800"
+        @on-ok="importOk"
+      >
+        <h1 v-if="systemList.length == 0">请先创建系统</h1>
+        <div v-else>
+          <Select
+            placeholder="请选择系统"
+            v-model="systemId"
+            :data="systemList"
+          >
+            <Option v-for="(li, i) in systemList" :value="li.id" :key="li.id">{{
+              li.name
+            }}</Option>
+          </Select>
+          <!-- <div class="h400">
           <json-viewer :value="systemRouters" :expand-depth="5"></json-viewer>
         </div> -->
-      </div>
-    </Modal>
-  </div>
+        </div>
+      </Modal>
+    </Content>
+  </Layout>
 </template>
 <script>
-import Api from './api'
-import Add from './add'
-import AddApi from './addApi'
-import Edit from './edit'
-import Detail from './detail'
-import Search from './search'
+import Api from "./api";
+import Add from "./add";
+import AddApi from "./addApi";
+import Edit from "./edit";
+import Detail from "./detail";
+import Search from "./search";
 // import { appRouter } from '@/router/router.js'
-import JsonViewer from 'vue-json-viewer'
+import JsonViewer from "vue-json-viewer";
 export default {
-  name: 'list',
+  name: "list",
   components: {
     Add,
     AddApi,
     Edit,
     Detail,
     Search,
-    JsonViewer
+    JsonViewer,
   },
   data() {
     return {
       action: Api.index,
       easySearch: {
-        keys: { op: 'name,code,icon,url,description,app', value: null }
+        keys: { op: "name,code,icon,url,description,app", value: null },
       },
+      newList: [],
+      name: 0,
       curModel: {
         id: 0,
         type: 0,
-        name: '根级'
+        name: "根级",
       },
+      theme3: "light",
       testModal: true,
       addModal: false,
       apiModal: false,
@@ -75,67 +120,67 @@ export default {
       curId: 0,
       columns: [
         {
-          key: 'name',
-          title: this.l('name'),
-          align: 'left',
+          key: "name",
+          title: this.l("name"),
+          align: "left",
           easy: true,
-          high: true
+          high: true,
         },
         // { key: 'upId', title: this.l('upId'), align: 'left', high: true ,hide:true},
         {
-          key: 'type',
+          key: "type",
           width: 60,
-          title: this.l('type'),
-          align: 'center',
+          title: this.l("type"),
+          align: "center",
           high: true,
-          code: 'mes_xingchi_system.menu.type'
+          code: "mes_xingchi_system.menu.type",
         },
         {
-          key: 'code',
-          title: this.l('code'),
-          align: 'left',
+          key: "code",
+          title: this.l("code"),
+          align: "left",
           easy: true,
-          high: true
+          high: true,
         },
         {
-          key: 'icon',
-          title: this.l('icon'),
-          align: 'center',
-          type: 'icons',
+          key: "icon",
+          title: this.l("icon"),
+          align: "center",
+          type: "icons",
           easy: true,
-          high: true
+          high: true,
         },
         {
-          key: 'target',
-          title: this.l('target'),
-          align: 'center',
+          key: "target",
+          title: this.l("target"),
+          align: "center",
           high: true,
-          code: 'mes_xingchi_system.menu.target'
+          code: "mes_xingchi_system.menu.target",
         },
         {
-          key: 'url',
-          title: this.l('url'),
-          align: 'left',
+          key: "url",
+          title: this.l("url"),
+          align: "left",
           easy: true,
-          width:200,
+          width: 200,
           high: true,
-          render(h,params) {
-            return h('Ellipsis',{
-              attrs:{
-                text:params.row.url,
-                length:50,
-                tooltip:true
-              }
-            })
+          render(h, params) {
+            return h("Ellipsis", {
+              attrs: {
+                text: params.row.url,
+                length: 50,
+                tooltip: true,
+              },
+            });
           },
         },
         {
-          key: 'status',
-          title: this.l('status'),
-          align: 'center',
-          width:100,
+          key: "status",
+          title: this.l("status"),
+          align: "center",
+          width: 100,
           high: true,
-          code: 'mes_xingchi_system.menu.status'
+          code: "mes_xingchi_system.menu.status",
         },
         // {
         //   key: 'description',
@@ -145,172 +190,183 @@ export default {
         //   high: true
         // },
         {
-          key: 'source',
-          title: this.l('source'),
-          align: 'left',
+          key: "source",
+          title: this.l("source"),
+          align: "left",
           high: true,
-            width:150,
-          code: 'mes_xingchi_system.menu.source'
+          width: 150,
+          code: "mes_xingchi_system.menu.source",
         },
         {
-          key: 'app',
-          title: this.l('app'),
-          align: 'left',
+          key: "app",
+          title: this.l("app"),
+          align: "left",
           easy: true,
-          high: true
+          high: true,
         },
         {
-          key: 'priority',
-          title: this.l('priority'),
-          align: 'left',
-          high: true
+          key: "priority",
+          title: this.l("priority"),
+          align: "left",
+          high: true,
         },
         {
-          title: '操作',
-          key: 'id',
+          title: "操作",
+          key: "id",
           width: 120,
-          align: 'center',
+          align: "center",
           render: (h, params) => {
-            return h('div', { class: 'action' }, [
+            return h("div", { class: "action" }, [
               h(
-                'op',
+                "op",
                 {
                   attrs: {
-                    oprate: 'add'
+                    oprate: "add",
                   },
-                  on: { click: () => this.add(params.row) }
+                  on: { click: () => this.add(params.row) },
                 },
-                '新增'
+                "新增"
               ),
               h(
-                'op',
+                "op",
                 {
                   attrs: {
-                    oprate: 'edit'
+                    oprate: "edit",
                   },
-                  on: { click: () => this.edit(params.row) }
+                  on: { click: () => this.edit(params.row) },
                 },
-                '编辑'
+                "编辑"
               ),
               h(
-                'op',
+                "op",
                 {
                   attrs: {
-                    oprate: 'delete'
+                    oprate: "delete",
                   },
-                  on: { click: () => this.removeOk(params.row) }
+                  on: { click: () => this.removeOk(params.row) },
                 },
-                '删除'
-              )
-            ])
-          }
-        }
-      ]
-    }
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+    };
   },
   mounted() {
-    this.init()
+    this.init();
   },
   async fetch({ store, params }) {
-    await store.dispatch('loadDictionary') // 加载数据字典
+    await store.dispatch("loadDictionary"); // 加载数据字典
   },
   methods: {
+    clickSelect(name) {
+      // console.log(name);
+      this.newList = [];
+      this.name = name;
+      this.list.map((e, index) => {
+        if (index == this.name) {
+          this.newList.push(e);
+        }
+      });
+    },
     init() {
       Api.getSystem().then((r) => {
-        this.systemList = r.result
-      })
+        this.systemList = r.result;
+      });
       Api.getTree().then((r) => {
-        this.list = r.result
-      })
+        this.list = r.result;
+        this.newList=r.result;
+      });
     },
     add(row) {
       if (row) {
         if (row.type == 2) {
-          this.apiModal = true
+          this.apiModal = true;
           this.curModel = {
             id: row.id,
             name: row.name,
             type: row.type,
-            app: row.app
-          }
-          return
+            app: row.app,
+          };
+          return;
         } else {
-          this.addModal = true
+          this.addModal = true;
           this.curModel = {
             id: row.id,
             name: row.name,
             type: row.type,
-            app: row.app
-          }
+            app: row.app,
+          };
         }
       } else {
-        this.addModal = true
+        this.addModal = true;
         this.curModel = {
           id: 0,
-          name: '根级',
+          name: "根级",
           type: -1,
-          app: ''
-        }
+          app: "",
+        };
       }
     },
     addOk() {
-      this.init()
-      this.addModal = false
-      this.detailModal = false
-      this.editModal = false
-      this.curId = 0
+      this.init();
+      this.addModal = false;
+      this.detailModal = false;
+      this.editModal = false;
+      this.curId = 0;
     },
     apiOk() {
-      this.apiModal = false
-      this.init()
+      this.apiModal = false;
+      this.init();
     },
     importMenu() {
-      this.importModal = true
+      this.importModal = true;
     },
     importOk() {
       Api.importRouters({
         id: this.systemId,
-        routers: appRouter
+        routers: appRouter,
       }).then((r) => {
-        console.warn(r)
-        this.importModal = false
-      })
+        console.warn(r);
+        this.importModal = false;
+      });
     },
     search() {
-      this.$refs.grid.reload(this.easySearch)
+      this.$refs.grid.reload(this.easySearch);
     },
     detail(id) {
-      this.detailModal = true
-      this.curId = id
+      this.detailModal = true;
+      this.curId = id;
     },
     edit(row) {
-      this.editModal = true
-      this.curId = row.id
-      this.curModel = row
+      this.editModal = true;
+      this.curId = row.id;
+      this.curModel = row;
     },
 
     remove(id) {
-      this.deletelModal = true
-      this.curId = id
+      this.deletelModal = true;
+      this.curId = id;
     },
     removeOk(row) {
       Api.delete({ id: row.id }).then((r) => {
         if (r.success) {
-          this.init()
-          this.deletelModal = false
-          this.$Message.success('删除成功')
+          this.init();
+          this.deletelModal = false;
+          this.$Message.success("删除成功");
         }
-      })
+      });
     },
     removeCancel() {
-      this.deletelModal = false
+      this.deletelModal = false;
     },
     cancel() {
-      this.curId = 0
-      this.addModal = false
-      this.detailModal = false
-      this.editModal = false
-      this.deletedlModal = false
+      this.curId = 0;
+      this.addModal = false;
+      this.detailModal = false;
+      this.editModal = false;
+      this.deletedlModal = false;
     },
     l(key) {
       /*
@@ -337,11 +393,32 @@ export default {
       priority:'排序',
            }
            */
-      let vkey = 'menu' + '.' + key
-      return this.$t(vkey) || key
-    }
+      let vkey = "menu" + "." + key;
+      return this.$t(vkey) || key;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.full {
+  margin-top: 0;
+  .menu {
+    overflow-x: hidden;
+    height: 86vh;
   }
 }
-</script>
-<style lang="less">
+.content {
+  height: 86vh;
+  overflow: auto;
+}
+// .ivu-color-picker-confirm {
+//   .ivu-input {
+//     width: 130px;
+//     height: 30px;
+//     float: left;
+//   }
+//   .ivu-btn-small {
+//     height: 30px !important;
+//   }
+// }
 </style>
\ No newline at end of file

pages/basicData/systemUser/index.vue

 <template>
 <Layout class="full">
-    <Sider hide-trigger :style="{background: '#fff'}" width="260" class="menu" style=" flex:0;border:none">
+    <Sider hide-trigger :style="{background: '#fff'}" width="260" class="menu">
         <div class="zh-tree" :style="{height:treeHeight+'px'}">
             <h3 class="zh-title">部门结构</h3>
             <div class="zh-box">