Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/main.less

@@ -43,7 +43,6 @@
 
         margin: 5px @padding-md;
         .ant-input {
-          width: 180px;
           height: 34px;
           padding: 5px 30px 5px 11px;
 
@@ -362,6 +361,8 @@
       }
       .ant-menu-horizontal {
         line-height: @layout-header-height;
+
+        border-bottom: 0;
         >.ant-menu-submenu {
           top: 0;
 

Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js

@@ -5,7 +5,7 @@ export default {
       type: Number,
     },
     pageSize: {
-      default: 20,
+      default: 10,
       type: Number,
     },
     loadData: {

Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js

@@ -1,3 +1,5 @@
+import { template } from "lodash"
+
 export default {
   props: {
     loadData: {
@@ -126,6 +128,17 @@ export default {
       mousewheel: true,
     }
 
+    const props = {
+      treeData: this.data,
+      expandedKeys: this.expandedKeys,
+      autoExpandParent: this.autoExpandParent,
+    }
+
+    const on = {
+      expand: this.onExpand,
+      select: this.onSelect
+    }
+
     const scopedSlots = {
       title: ({ title }) => {
         return (
@@ -155,17 +168,13 @@ export default {
             </div>
           </a-layout-header>
           <swiper options={swiperOptions}>
+            <a-alert banner type="error">
+              <template slot="message">顶部菜单-深色模式下搜索背景随头部变为深色</template>
+            </a-alert>
             <a-spin style={{ height: '100%' }} spinning={this.loading}>
               <a-icon slot="indicator" type="loading" spin />
               <swiper-slide>
-                <a-tree
-                  treeData={this.data}
-                  expandedKeys={this.expandedKeys}
-                  autoExpandParent={this.autoExpandParent}
-                  onExpand={this.onExpand}
-                  onSelect={this.onSelect}
-                  {...{ scopedSlots }}
-                />
+                <a-tree {...{ props, on, scopedSlots }} />
               </swiper-slide>
             </a-spin>
           </swiper>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/dict/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <container>
+    <br />
+    <a-alert banner closable type="error">
+      <template slot="message">当前页面无法满足多层字典,设置后端接口目前也无法支持</template>
+    </a-alert>
+  </container>
+</template>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/org/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue

@@ -14,14 +14,7 @@
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+                <a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
               </a-button-group>
             </a-form-model-item>
           </a-form-model>
@@ -40,34 +33,28 @@
             <Auth auth="sysApp:edit">
               <a @click="onOpen('edit-form', record)">编辑</a>
             </Auth>
-            <Auth auth="[sysApp:grantMenu],[sysApp:grantData],[sysRole:delete]">
+            <Auth auth="sysApp:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <Auth :auth="{ sysApp: [['grantMenu'], ['grantData']] }">
               <a-dropdown>
-                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+                <a class="ant-dropdown-link">
+                  授权
+                  <a-icon type="down" />
+                </a>
                 <a-menu slot="overlay">
                   <Auth auth="sysApp:grantMenu">
                     <a-menu-item>
-                      <a style="color:#005cb1;" @click="$refs.roleMenuForm.roleMenu(record)"
-                        >授权菜单</a
-                      >
+                      <a @click="$refs.roleMenuForm.roleMenu(record)">授权菜单</a>
                     </a-menu-item>
                   </Auth>
                   <Auth auth="sysApp:grantData">
                     <a-menu-item>
-                      <a style="color:#005cb1;" @click="$refs.roleOrgForm.roleOrg(record)">授权数据</a>
+                      <a @click="$refs.roleOrgForm.roleOrg(record)">授权数据</a>
                     </a-menu-item>
                   </Auth>
-                  <Auth auth="sysApp:delete">
-                    </a-menu-item>
-                    <a-menu-item>
-                    <a-popconfirm
-                      @confirm="onDelete(record)"
-                      placement="topRight"
-                      title="是否确认删除"
-                    >
-                      <a style="color:#005cb1;">删除</a>
-                    </a-popconfirm>
-                     </a-menu-item>
-                  </Auth>
                 </a-menu>
               </a-dropdown>
             </Auth>
@@ -76,17 +63,17 @@
       </yo-table>
     </a-card>
     <br />
-     <add-form @ok="onReloadData" ref="add-form" />
-     <edit-form @ok="onReloadData" ref="edit-form" />
-      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
-      <role-org-form ref="roleOrgForm" @ok="onReloadData"/>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+    <role-menu-form @ok="onReloadData" ref="roleMenuForm" />
+    <role-org-form @ok="onReloadData" ref="roleOrgForm" />
   </container>
 </template>
 <script>
 import AddForm from './addForm';
-import editForm from "./editForm";
-import roleMenuForm from "./roleMenuForm";
-import roleOrgForm from "./roleOrgForm";
+import editForm from './editForm';
+import roleMenuForm from './roleMenuForm';
+import roleOrgForm from './roleOrgForm';
 export default {
   components: {
     AddForm,
@@ -99,23 +86,23 @@ export default {
       query: {},
       columns: [
         {
-          title: "角色名",
-          dataIndex: "name",
+          title: '角色名',
+          dataIndex: 'name',
         },
         {
-          title: "唯一编码",
-          dataIndex: "code",
+          title: '唯一编码',
+          dataIndex: 'code',
         },
         {
-          title: "排序",
-          dataIndex: "sort",
+          title: '排序',
+          dataIndex: 'sort',
         },
         {
-          title: "操作",
-          width: "200px",
-          dataIndex: "action",
+          title: '操作',
+          width: '200px',
+          dataIndex: 'action',
           scopedSlots: {
-            customRender: "action",
+            customRender: 'action',
           },
         },
       ],
@@ -172,9 +159,7 @@ export default {
     //     });
     // },
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -201,17 +186,15 @@ export default {
 
     onSetDefault(record) {
       this.$refs.table.onLoading();
-      this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
+      this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success, message }) => {
+        this.onResult(success, message, '设置成功');
+      });
     },
 
     onDelete(record) {
       this.$refs.table.onLoading();
       this.$api.sysRoleDel(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
+        this.onResult(success, message, '删除成功');
       });
     },
   },

Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/header/index.vue

@@ -10,29 +10,7 @@
         >
           <a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
         </a>
-        <!-- <a-input-search placeholder="请输入检索关键字" /> -->
-        <a-auto-complete
-          :dropdown-match-select-width="false"
-          @search="onSearch"
-          @select="onSearchSelect"
-          option-label-prop="value"
-          placeholder="请输入检索关键字"
-          v-model="searchText"
-        >
-          <template slot="dataSource">
-            <a-select-opt-group :key="menu.id" v-for="menu in searchResult">
-              <span slot="label">{{ menu.meta.title }}</span>
-              <a-select-option
-                :key="opt.id"
-                :value="opt.id"
-                v-for="opt in menu.children"
-              >{{ opt.meta.title }}</a-select-option>
-            </a-select-opt-group>
-          </template>
-          <a-input>
-            <a-icon class="certain-category-icon" slot="suffix" type="search" />
-          </a-input>
-        </a-auto-complete>
+        <search :menus="nav.menus" />
       </div>
       <div class="header-actions">
         <a @click="$emit('reload')" class="header-action">
@@ -54,29 +32,7 @@
         <Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
       </div>
       <div class="header-actions">
-        <!-- <a-input-search placeholder="请输入检索关键字" /> -->
-        <a-auto-complete
-          :dropdown-match-select-width="false"
-          @search="onSearch"
-          @select="onSearchSelect"
-          option-label-prop="value"
-          placeholder="请输入检索关键字"
-          v-model="searchText"
-        >
-          <template slot="dataSource">
-            <a-select-opt-group :key="menu.id" v-for="menu in searchResult">
-              <span slot="label">{{ menu.meta.title }}</span>
-              <a-select-option
-                :key="opt.id"
-                :value="opt.component"
-                v-for="opt in menu.children"
-              >{{ opt.meta.title }}</a-select-option>
-            </a-select-opt-group>
-          </template>
-          <a-input>
-            <a-icon class="certain-category-icon" slot="suffix" type="search" />
-          </a-input>
-        </a-auto-complete>
+        <search :menus="nav.menus" />
         <a @click="$emit('reload')" class="header-action">
           <a-icon type="reload" />
         </a>
@@ -93,13 +49,17 @@
   </a-layout-header>
 </template>
 <script>
-import Logo from './logo';
-import Sider from './sider';
+import Logo from '../logo';
+import Sider from '../sider';
+
+import Search from './search';
 
 export default {
   components: {
     Logo,
     Sider,
+
+    Search,
   },
   props: {
     nav: {
@@ -118,9 +78,6 @@ export default {
       searchResult: [],
     };
   },
-  created() {
-    window._ = this.$_;
-  },
   methods: {
     onSearch(value) {
       const menus = this.$_.cloneDeep(this.nav.menus);

Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/header/search.js

@@ -0,0 +1,134 @@
+export default {
+    props: {
+        menus: {
+            type: Array,
+            require: true
+        }
+    },
+
+    data() {
+        return {
+            searchText: '',
+            searchResult: [],
+        };
+    },
+
+    methods: {
+
+        renderSelect(menu) {
+            return menu.map((p) => {
+                return p.children ? this.renderSelectGroup(p) : this.renderSelectOption(p)
+            })
+        },
+
+        renderSelectGroup(menu) {
+            return (
+                <a-select-opt-group key={menu.parents}>
+                    <span slot="label">{menu.parents}</span>
+                    {this.renderSelect(menu.children)}
+                </a-select-opt-group>
+            )
+        },
+
+        renderSelectOption(menu) {
+            return (<a-select-option key={menu.id} value={
+                JSON.stringify(menu)
+            }>
+                {menu.meta.title}
+                <small style={{ display: 'block', color: '#aaa' }}>{menu.component}</small>
+            </a-select-option>)
+        },
+
+
+        onSearch(value) {
+            this.searchText = value
+
+            const menus = this.$_.cloneDeep(this.menus)
+
+            const search = (m) => {
+                if (!value) return []
+                return m.filter((p) => {
+                    if (p.children) {
+                        p.children = search(p.children)
+                    } else {
+                        return p.meta.title.indexOf(value) > -1 || (p.component || '').toLowerCase().indexOf(value.toLowerCase()) > -1
+                    }
+                    return p.children.length
+                })
+            }
+
+            /**
+             * 拆分层级,只留下 [父级-父级-...] [子级]
+             * *******在更为复杂的目录下会出现父级联动错误的问题
+             */
+            const unzip = (m) => {
+                const getSeed = (parent, seed) => {
+                    if (parent.children) {
+                        seed.parents.push(parent.meta.title)
+                        seed.children = parent.children
+                        parent.children.forEach(p => {
+                            getSeed(p, seed)
+                        })
+                    }
+                    return seed
+                }
+                const result = []
+                m.forEach(p => {
+                    const r = { parents: [], children: [] }
+                    result.push(getSeed(p, r))
+                })
+                return result
+            }
+
+            this.searchResult = unzip(search(menus)).map(p => {
+                return {
+                    parents: p.parents.join('-'),
+                    children: p.children
+                }
+            })
+        },
+
+        onSearchSelect(value, node) {
+            this.searchText = '';
+            this.onSearch(this.searchText);
+
+            const menu = JSON.parse(node.componentOptions.propsData.value)
+
+            this.openContentWindow({
+                key: menu.id,
+                title: menu.meta.title,
+                icon: menu.meta.icon,
+                path: menu.component,
+            });
+        },
+
+    },
+
+    render() {
+
+        const props = {
+            dropdownMatchSelectWidth: false,
+            dropdownStyle: { width: '300px' },
+            optionLabelProp: 'value',
+            placeholder: '请输入检索关键字',
+            value: this.searchText
+        }
+
+        const on = {
+            search: this.onSearch,
+            select: this.onSearchSelect
+        }
+
+        return (
+            <a-auto-complete {...{ props, on }}>
+                <template slot="dataSource">
+                    {this.renderSelect(this.searchResult)}
+                </template>
+                <a-input>
+                    <a-icon slot="suffix" type="search" class="certain-category-icon" />
+                </a-input>
+            </a-auto-complete>
+        )
+
+    }
+}