增加停用多页签的功能

省市地区数据更新

vue/src/assets/styles/index.scss

@@ -89,7 +89,11 @@ a:hover {
 
 .has-header {
     .max-view-height {
-        height: calc(100vh - #{$headerHeight} - #{$pageViewMargin * 2});
+        height: calc(100vh - #{$navHeight} - #{$pageViewMargin * 2});
+    }
+
+    &.has-tags-view .max-view-height {
+        height: calc(100vh - #{$navHeight} - #{$tagsViewHeight} - #{$pageViewMargin * 2});
     }
 }
 

vue/src/assets/styles/sidebar.scss

@@ -37,8 +37,8 @@ $iconSize: 17px;
     .sidebar-logo-container {
         position: relative;
         width: 100%;
-        height: 50px;
+        height: $navHeight;
-        line-height: 50px;
+        line-height: $navHeight;
         text-align: center;
 
         & .sidebar-logo-link {
@@ -57,7 +57,7 @@ $iconSize: 17px;
                 margin: 0;
                 color: #fff;
                 font-weight: 600;
-                line-height: 50px;
+                line-height: $navHeight;
                 font-size: 14px;
                 font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
                 vertical-align: middle;
@@ -126,6 +126,7 @@ $iconSize: 17px;
         max-height: 88vh;
         margin-bottom: 0.5vh;
         overflow-y: auto;
+        overflow-y: overlay;
     }
 
     .el-submenu__title i {

vue/src/assets/styles/tagsView.scss

@@ -1,5 +1,5 @@
 .tags-view-container {
-    height: 40px;
+    height: $tagsViewHeight;
     background: #f0f0f0;
     border-bottom: 1px solid #d8dce5;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);

vue/src/assets/styles/variables.scss

@@ -44,8 +44,12 @@ $menuHover: #263445;
 $subMenuBg: #1f2d3d;
 $subMenuHover: #001528;
 
+//侧边栏宽度
 $sideBarWidth: 210px;
-$headerHeight: 90px;
+//头部导航栏高度
+$navHeight: 50px;
+//头部多页签栏高度
+$tagsViewHeight: 40px;
 
 //路由页面的margin
 $pageViewMargin: 15px;

vue/src/components/DialogForm/index.vue

@@ -2,11 +2,9 @@
     <el-dialog
             v-drag-dialog
             custom-class="dialog-form"
-            :top="top"
+            v-bind="$props"
             :visible="value"
-            :width="width"
+            v-on="$listeners"
-            @close="$emit('close')"
-            @open="$emit('open')"
     >
         <slot slot="title" name="title">{{title}}</slot>
         <div class="dialog-form-container">
@@ -29,11 +27,12 @@
         name: "DialogForm",
         components: {LoadingMask},
         props: {
-            value: {type: Boolean, default: false},
+            value: Boolean,
+            appendToBody: Boolean,
             top: {type: String, default: '50px'},
             width: {type: String, default: '30%'},
             loading: {type: Boolean, default: true},
-            title: {type: String, default: ''},
+            title: String,
         }
     }
 </script>

vue/src/components/RegionSelector/Tree.vue

@@ -1,62 +1,79 @@
 <template>
-    <el-dialog
+    <div>
+        <el-input :value="value" :readonly="readonly" clearable @clear="$emit('clear')" @focus="dialogVisible=true"/>
+        <dialog-form
                 v-drag-dialog
-            :visible="value"
+                v-model="dialogVisible"
+                :loading="loading"
                 append-to-body
                 title="选择行政区域"
-            width="30%"
-            top="50px"
                 @close="closeDialog"
         >
-        <el-scrollbar>
             <el-tree
                     ref="tree"
-                    v-loading="loading"
                     :data="limit ? limitTree : regionTree"
                     :expand-on-click-node="false"
                     node-key="id"
                     @node-click="nodeClick"
             >
                 <span slot-scope="{data}" class="el-tree-node__label">
-                    {{data.name}}
+                    {{limit ? data.name + `(${data.value})` : data.name}}
-                    <template v-if="limit">({{data.value}})</template>
                 </span>
             </el-tree>
-        </el-scrollbar>
+        </dialog-form>
-    </el-dialog>
+    </div>
 </template>
 
 <script>
     import {mapState} from 'vuex'
-    import dialogMixin from "@/mixins/dialogMixin"
+    import DialogForm from '@/components/DialogForm'
     import {createLimitTree, getNodeId} from "@/utils/tree"
 
     export default {
-        name: "RegionSelector",
+        name: "RegionTreeSelector",
-        mixins: [dialogMixin],
+
+        components: {DialogForm},
+
         props: {
-            value: Boolean,
+            value: String,
+            readonly: Boolean,
+            getChildrenOnClick: Boolean,
             limit: Boolean,
             limitApi: Function
         },
+
         data() {
             return {
                 loading: false,
+                dialogVisible: false,
                 limitTree: []
             }
         },
+
         computed: {
             ...mapState('dataCache', {
                 regionTree: state => state.regionTree
             })
         },
+
         methods: {
+            closeDialog() {
+                this.dialogVisible = false
+            },
+
             nodeClick(obj) {
+                const payload = [obj]
+                if (this.getChildrenOnClick) {
                     let ids = getNodeId(obj.children)
                     ids.unshift(obj.id)
-                this.$emit('select', obj, ids)
+                    payload.push(ids)
+                }
+
+                this.$emit('select', ...payload)
+
                 this.closeDialog()
             },
+
             init() {
                 this.loading = true
                 const hasInit = this.regionTree.length > 0
@@ -67,6 +84,7 @@
                     .finally(() => this.loading = false)
             }
         },
+
         mounted() {
             this.init()
         }

vue/src/config/index.js

@@ -31,5 +31,5 @@ module.exports = {
     attachmentPrefix: 'https://static.toesbieya.cn/',
 
     //省市地区json数据请求地址
-    regionDataUrl: '/static/json/region-pca.json'
+    regionDataUrl: '/static/json/region-pcas.json'
 }

vue/src/layout/components/Header.vue

@@ -6,7 +6,7 @@
             @mouseleave="mouseOutside=true"
     >
         <v-navbar @menu-show="navbarMenuShow=$event"/>
-        <tags-view @menu-show="tagsViewMenuShow=$event"/>
+        <tags-view v-if="useTagsView" @menu-show="tagsViewMenuShow=$event"/>
     </header>
 </template>
 
@@ -28,7 +28,8 @@
         },
         computed: {
             ...mapState('setting', {
-                headerAutoHidden: state => state.headerAutoHidden,
+                useTagsView: state => state.useTagsView,
+                headerAutoHidden: state => state.headerAutoHidden
             }),
             hideHeader() {
                 return this.mouseOutside
@@ -38,6 +39,9 @@
             },
         },
         watch: {
+            useTagsView(v) {
+                !v && this.$store.dispatch('tagsView/delAllViews')
+            },
             hideHeader(v) {
                 this.$store.commit('app/hasHeader', !v)
                 v ? this.addEvent() : this.removeEvent()
@@ -64,20 +68,16 @@
     }
 </script>
 <style lang="scss">
+    .has-tags-view .header-container {
+        height: calc(#{$navHeight} + #{$tagsViewHeight});
+    }
+
     .header-container {
         position: relative;
-        height: $headerHeight;
+        height: $navHeight;
         transition: height .3s ease-in-out;
         flex-shrink: 0;
 
-        .awake-area {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            height: 15px;
-            opacity: 0;
-        }
-
         &.hide-header {
             height: 0;
         }

vue/src/layout/components/Navbar/components/SettingDrawer.vue

@@ -2,67 +2,41 @@
     <el-drawer :visible="value" :with-header="false" append-to-body size="300px" @close="$emit('input', false)">
         <div class="drawer-container">
             <el-divider><h3>个性化设置</h3></el-divider>
-            <div class="drawer-item">
+            <div v-for="{name,key} in settings" :key="key" class="drawer-item">
-                <span>显示Logo</span>
+                <span>{{name}}</span>
-                <el-switch v-model="showLogo" class="drawer-switch"/>
+                <el-switch :value="getValue(key)" @input="setValue($event,key)" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>显示面包屑</span>
-                <el-switch v-model="showBreadcrumb" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>左侧菜单手风琴效果</span>
-                <el-switch v-model="sidebarUniqueOpen" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>左侧菜单折叠</span>
-                <el-switch v-model="sidebarCollapse" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>折叠菜单显示上级</span>
-                <el-switch v-model="sidebarShowParent" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>左侧菜单自动隐藏</span>
-                <el-switch v-model="sidebarAutoHidden" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>头部自动隐藏</span>
-                <el-switch v-model="headerAutoHidden" class="drawer-switch"/>
-            </div>
-            <div class="drawer-item">
-                <span>显示返回顶部按钮</span>
-                <el-switch v-model="showBackToTop" class="drawer-switch"/>
             </div>
         </div>
     </el-drawer>
 </template>
 
 <script>
-    const states = ['showLogo', 'showBreadcrumb', 'sidebarUniqueOpen', 'sidebarCollapse',
+    const settings = [
-        'sidebarAutoHidden', 'sidebarShowParent', 'headerAutoHidden', 'showBackToTop']
+        {name: '显示logo', key: 'showLogo'},
-
+        {name: '显示面包屑', key: 'showBreadcrumb'},
-    function createStateComputed() {
+        {name: '使用多页签', key: 'useTagsView'},
-        const obj = {}
+        {name: '侧边栏手风琴效果', key: 'sidebarUniqueOpen'},
-        states.forEach(key => {
+        {name: '侧边栏折叠', key: 'sidebarCollapse'},
-            obj[key] = {
+        {name: '折叠菜单显示上级', key: 'sidebarShowParent'},
-                get() {
+        {name: '侧边栏自动隐藏', key: 'sidebarAutoHidden'},
-                    return this.$store.state.setting[key]
+        {name: '头部自动隐藏', key: 'headerAutoHidden'},
-                },
+        {name: '显示返回顶部按钮', key: 'showBackToTop'}
-                set(v) {
+    ]
-                    this.$store.commit(`setting/${key}`, v)
-                }
-            }
-        })
-        return obj
-    }
 
     export default {
         name: "SettingDrawer",
         props: {
             value: Boolean
         },
-        computed: createStateComputed()
+        data: () => ({settings}),
+        methods: {
+            getValue(key) {
+                return this.$store.state.setting[key]
+            },
+            setValue(value, key) {
+                this.$store.commit(`setting/${key}`, value)
+            }
+        }
     }
 </script>
 

vue/src/layout/components/Navbar/index.vue

@@ -99,7 +99,7 @@
 
 <style lang="scss">
     .navbar {
-        height: 50px;
+        height: $navHeight;
         overflow: hidden;
         position: relative;
         background: #fff;
@@ -114,7 +114,7 @@
         .right-menu {
             float: right;
             height: 100%;
-            line-height: 50px;
+            line-height: $navHeight;
 
             &:focus {
                 outline: none;

vue/src/layout/components/Sidebar/components/SidebarItemContent.vue

@@ -20,7 +20,7 @@
 
             vnodes.push(iconComponent)
 
-            if (title) vnodes.push(<span slot="title" class="sidebar-item-content">{(title)}</span>)
+            if (title) vnodes.push(<span slot="title" class="sidebar-item-content">{title}</span>)
 
             return vnodes
         }

vue/src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
     <section class="el-container app-wrapper">
         <v-sidebar/>
-        <section class="el-container main-container" :class="{'has-header':hasHeader}">
+        <section class="el-container main-container" :class="{'has-header':hasHeader,'has-tags-view':useTagsView}">
             <v-header/>
             <v-main/>
         </section>
@@ -32,6 +32,7 @@
                 hasHeader: state => state.hasHeader
             }),
             ...mapState('setting', {
+                useTagsView: state => state.useTagsView,
                 sidebarCollapse: state => state.sidebarCollapse
             }),
             ...mapState('socket', {

vue/src/store/modules/setting.js

@@ -7,31 +7,31 @@ import {getLocalPersonalSettings, setLocalPersonalSettings} from "@/utils/localS
 
 const localSettings = getLocalPersonalSettings()
 
-function createMutations(state) {
-    return Object.keys(state).reduce((mutations, key) => {
-        mutations[key] = (ref, data) => {
-            ref[key] = data
-            setLocalPersonalSettings(ref)
-        }
-        return mutations
-    }, {})
-}
-
 const state = {
     //是否显示logo
     showLogo: true,
+
     //是否显示面包屑
     showBreadcrumb: true,
+
+    //是否使用多页签
+    useTagsView: true,
+
     //左侧菜单手风琴效果
     sidebarUniqueOpen: true,
+
     //左侧菜单是否折叠
     sidebarCollapse: false,
+
     //左侧菜单折叠时，弹出菜单是否显示上级
     sidebarShowParent: false,
+
     //是否自动隐藏左侧菜单
     sidebarAutoHidden: false,
+
     //是否自动隐藏头部
     headerAutoHidden: false,
+
     //是否显示返回顶部按钮
     showBackToTop: true,
 }
@@ -59,6 +59,16 @@ const mutations = {
     }
 }
 
+function createMutations(state) {
+    return Object.keys(state).reduce((mutations, key) => {
+        mutations[key] = (ref, data) => {
+            ref[key] = data
+            setLocalPersonalSettings(ref)
+        }
+        return mutations
+    }, {})
+}
+
 export default {
     namespaced: true,
     state,

vue/src/store/modules/tagsView.js

@@ -53,13 +53,9 @@ const actions = {
 
     delOthersViews({state, commit}, view) {
         const visitedViews = state.visitedViews.filter(v => v.meta.affix || v.path === view.path)
-        let cachedViews = []
+        const name = state.cachedViews.find(name => name === view.name)
-        const index = state.cachedViews.indexOf(view.name)
-        if (index > -1) {
-            cachedViews = state.cachedViews.slice(index, index + 1)
-        }
         commit('visitedViews', visitedViews)
-        commit('cachedViews', cachedViews)
+        commit('cachedViews', name ? [name] : [])
     },
     delAllViews({state, commit}) {
         commit('visitedViews', state.visitedViews.filter(tag => tag.meta.affix))

vue/src/views/app/login/LoginForm.vue

@@ -33,7 +33,14 @@
                 <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"/>
             </span>
         </el-form-item>
-        <el-button :loading="loading" class="submit-btn" type="primary" @click="login">登 录</el-button>
+        <el-button
+                :loading="loading"
+                class="submit-btn"
+                type="primary"
+                @click="login"
+        >
+            {{loading ? '登 录 中...' : '登 录'}}
+        </el-button>
         <div class="flex" style="margin-top: 20px">
             <p class="other-ways">
                 其他方式登录

vue/src/views/app/login/RegisterForm.vue

@@ -26,7 +26,14 @@
                     @keyup.enter.native="register"
             />
         </el-form-item>
-        <el-button :loading="loading" class="submit-btn" type="primary" @click="register">注 册</el-button>
+        <el-button
+                :loading="loading"
+                class="submit-btn"
+                type="primary"
+                @click="register"
+        >
+            {{loading ? '注 册 中...' : '注 册'}}
+        </el-button>
         <div class="flex" style="margin-top: 20px">
             <p/>
             <el-button type="text" @click="login">已有账户登陆</el-button>

vue/src/views/system/customer/EditDialog.vue

@@ -12,7 +12,12 @@
                 <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
             </el-form-item>
             <el-form-item label="行政区域：" prop="region_name">
-                <el-input :value="form.region_name" readonly @focus="regionDialog=true"/>
+                <region-selector
+                        :value="form.region_name"
+                        get-children-on-click
+                        readonly
+                        @select="selectRegion"
+                />
             </el-form-item>
             <el-form-item label="地 址：" prop="address">
                 <el-input v-model="form.address" :readonly="!canEdit" maxlength="100"/>
@@ -44,14 +49,12 @@
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
             <el-button v-if="canEdit" size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
-
-        <region-selector v-model="regionDialog" @select="selectRegion"/>
     </dialog-form>
 </template>
 
 <script>
     import DialogForm from '@/components/DialogForm'
-    import RegionSelector from '@/bizComponents/RegionSelector'
+    import RegionSelector from '@/components/RegionSelector/Tree'
     import dialogMixin from "@/mixins/dialogMixin"
     import {addCustomer, updateCustomer} from "@/api/system/customer"
     import {isEmpty, mergeObj, resetObj} from '@/utils'
@@ -72,7 +75,6 @@
         data() {
             return {
                 loading: false,
-                regionDialog: false,
                 form: {
                     id: null,
                     name: null,

vue/src/views/system/customer/index.vue

@@ -5,7 +5,14 @@
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
             </search-form-item>
             <search-form-item label="行政区域：">
-                <el-input :value="temp.region_name" clearable @clear="clearSidSearch" @focus="regionDialog=true"/>
+                <region-selector
+                        :value="temp.region_name"
+                        limit
+                        :limit-api="getLimitRegion"
+                        get-children-on-click
+                        @clear="clearSidSearch"
+                        @select="selectRegion"
+                />
             </search-form-item>
             <search-form-item label="地 址：">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
@@ -66,14 +73,13 @@
             />
         </el-row>
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-        <region-selector v-model="regionDialog" limit :limit-api="getLimitRegion" @select="selectRegion"/>
     </el-card>
 </template>
 
 <script>
     import SearchForm from "@/components/SearchForm"
     import SearchFormItem from "@/components/SearchForm/SearchFormItem"
-    import RegionSelector from "@/bizComponents/RegionSelector"
+    import RegionSelector from "@/components/RegionSelector/Tree"
     import EditDialog from './EditDialog'
     import {delCustomer, getCustomers, getLimitRegion} from "@/api/system/customer"
     import {isEmpty} from '@/utils'
@@ -101,8 +107,7 @@
                     region_name: null,
                     ctime: []
                 },
-                editDialog: false,
+                editDialog: false
-                regionDialog: false
             }
         },
         computed: {

vue/src/views/system/supplier/EditDialog.vue

@@ -12,7 +12,12 @@
                 <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
             </el-form-item>
             <el-form-item label="行政区域：" prop="region_name">
-                <el-input :value="form.region_name" readonly @focus="regionDialog=true"/>
+                <region-selector
+                        :value="form.region_name"
+                        get-children-on-click
+                        readonly
+                        @select="selectRegion"
+                />
             </el-form-item>
             <el-form-item label="地 址：" prop="address">
                 <el-input v-model="form.address" :readonly="!canEdit" maxlength="100"/>
@@ -44,14 +49,12 @@
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
             <el-button v-if="canEdit" size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
-
-        <region-selector v-model="regionDialog" @select="selectRegion"/>
     </dialog-form>
 </template>
 
 <script>
     import DialogForm from '@/components/DialogForm'
-    import RegionSelector from '@/bizComponents/RegionSelector'
+    import RegionSelector from '@/components/RegionSelector/Tree'
     import dialogMixin from "@/mixins/dialogMixin"
     import {addSupplier, updateSupplier} from "@/api/system/supplier"
     import {isEmpty, mergeObj, resetObj} from '@/utils'
@@ -72,7 +75,6 @@
         data() {
             return {
                 loading: false,
-                regionDialog: false,
                 form: {
                     id: null,
                     name: null,

vue/src/views/system/supplier/index.vue

@@ -5,7 +5,14 @@
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
             </search-form-item>
             <search-form-item label="行政区域：">
-                <el-input :value="temp.region_name" clearable @clear="clearSidSearch" @focus="regionDialog=true"/>
+                <region-selector
+                        :value="temp.region_name"
+                        limit
+                        :limit-api="getLimitRegion"
+                        get-children-on-click
+                        @clear="clearSidSearch"
+                        @select="selectRegion"
+                />
             </search-form-item>
             <search-form-item label="地 址：">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
@@ -66,14 +73,13 @@
             />
         </el-row>
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-        <region-selector v-model="regionDialog" limit :limit-api="getLimitRegion" @select="selectRegion"/>
     </el-card>
 </template>
 
 <script>
     import SearchForm from "@/components/SearchForm"
     import SearchFormItem from "@/components/SearchForm/SearchFormItem"
-    import RegionSelector from "@/bizComponents/RegionSelector"
+    import RegionSelector from "@/components/RegionSelector/Tree"
     import EditDialog from './EditDialog'
     import {delSupplier, getLimitRegion, getSuppliers} from "@/api/system/supplier"
     import {isEmpty} from '@/utils'
@@ -101,8 +107,7 @@
                     region_name: null,
                     ctime: []
                 },
-                editDialog: false,
+                editDialog: false
-                regionDialog: false
             }
         },
         computed: {