增加LDAP/E-Directory页面

src/components/menu.vue

@@ -67,7 +67,7 @@ export default {
                 {name: "DNS", link: '/index/dns', isDisabel: false},
                 {name: "事件日志", link: '/index/event_log', isDisabel: false},
                 {name:"Images重定向", link:'/index/images_redirection', isDisabel: false},
-                {name:"LDAP/E-Directory", link:'index/', isDisabel: false},
+                {name:"LDAP/E-Directory", link:'/index/LDAP', isDisabel: false},
                 {name:"证书", link:'index/', isDisabel: false},
                 {name:"鼠标的模式", link:'index/', isDisabel: false},
                 {name:"NCSI", link:'index/', isDisabel: false},

src/router/index.js

@@ -58,6 +58,13 @@ const router = new Router({
                     },
                     component: r => require.ensure([], () => r(require('../views/configuration/ImagesRedirection')), 'configuration'),
                 },
+                {
+                    path: 'ldap',
+                    meta: {
+                        title: 'LDAP/E-Directory'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/LDAP')), 'configuration'),
+                },
             ]
         },
         {

src/views/configuration/LDAP.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="active-directory">
+        <div class="configuration-title">LDAP/E-Directory Settings</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
+        </div>
+        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
+        <div class="configuration-table">
+            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
+            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
+            <Button type="primary">Delete Role Group</Button>
+        </div>
+        <Modal
+                v-model="modalSettings"
+                title="Advanced Settings"
+                width="660"
+                :loading="loading"
+                @on-ok="save"
+                @on-cancel="cancel">
+            <Form :model="formSettings" label-position="left" :label-width="260">
+                <FormItem label="LDAP/E-Directory Authentication">
+                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Server Address">
+                    <Input v-model="formSettings.address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Port">
+                    <Input v-model="formSettings.port" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Bind DN">
+                    <Input v-model="formSettings.bindDn" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Password">
+                    <Input v-model="formSettings.password" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Search Base">
+                    <Input v-model="formSettings.searchBase" style="width: 300px;"/>
+                </FormItem>
+            </Form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "LDAP",
+        data () {
+            return {
+                columnsDirectory: [
+                    {
+                        "title": "Role Group ID",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Name",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Search Base",
+                        "key": "Base",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Privilege",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataDirectory: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Base: 'Group Search Base',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Base: 'Group Search Base',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                modalSettings: false,
+                loading: true,
+                formSettings: {
+                    authentication: true,
+                    address: '',
+                    password:  '',
+                    port: '',
+                    bindDn: '',
+                    searchBase: '',
+                }
+            }
+        },
+        methods: {
+            save() {
+                setTimeout(() => {
+                    this.modalSettings = false;
+                }, 2000);
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
+