From bb98c5ad7ba16a1ca0fc873a66ea5c32242ebd10 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sat, 25 Jul 2020 13:48:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=BA=93=E5=AD=98=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=97=A0=E7=94=A8=E7=BB=84=E4=BB=B6=20=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/bizComponents/CategoryTree/index.vue  |  7 ++
 vue/src/components/DropDownMenu/index.vue     | 46 -------------
 vue/src/components/DropDownMenu/style.scss    | 66 -------------------
 vue/src/components/ExtraArea/index.vue        | 43 ++++++++++++
 vue/src/components/FormDialog/index.vue       | 12 ++--
 vue/src/components/ImageViewer/index.js       |  3 +-
 vue/src/components/Link/index.vue             | 23 -------
 vue/src/components/LoadingMask/index.vue      | 21 +++---
 vue/src/components/SvgIcon/index.vue          | 10 +--
 vue/src/components/TinymceEditor/index.vue    | 10 +--
 vue/src/components/ZoomControl/index.vue      | 65 ++++++++----------
 vue/src/layout/components/Header.vue          | 16 ++---
 vue/src/layout/index.vue                      | 22 +------
 vue/src/layout/mixin/offline.js               | 17 +++++
 .../mixin/{ResizeHandler.js => resize.js}     |  0
 vue/src/views/stock/current/index.vue         | 54 +++++++--------
 16 files changed, 154 insertions(+), 261 deletions(-)
 delete mode 100644 vue/src/components/DropDownMenu/index.vue
 delete mode 100644 vue/src/components/DropDownMenu/style.scss
 create mode 100644 vue/src/components/ExtraArea/index.vue
 delete mode 100644 vue/src/components/Link/index.vue
 create mode 100644 vue/src/layout/mixin/offline.js
 rename vue/src/layout/mixin/{ResizeHandler.js => resize.js} (100%)

diff --git a/vue/src/bizComponents/CategoryTree/index.vue b/vue/src/bizComponents/CategoryTree/index.vue
index 7d67641..b0fea71 100644
--- a/vue/src/bizComponents/CategoryTree/index.vue
+++ b/vue/src/bizComponents/CategoryTree/index.vue
@@ -25,7 +25,14 @@
             }
         },
 
+        methods: {
+            filter(v){
+                this.$refs.tree.filter(v)
+            }
+        },
+
         mounted() {
+            if (this.data.length > 0) return
             getAll()
                 .then(data => this.$store.commit('dataCache/categories', data))
                 .finally(() => this.loading = false)
diff --git a/vue/src/components/DropDownMenu/index.vue b/vue/src/components/DropDownMenu/index.vue
deleted file mode 100644
index 23406a8..0000000
--- a/vue/src/components/DropDownMenu/index.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <div :class="{active:isActive}" class="share-dropdown-menu">
-        <div class="share-dropdown-menu-wrapper">
-            <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
-
-            <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
-                <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
-                <span v-else>{{ item.title }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    //参考drop.js
-    export default {
-        name: 'DropdownMenu',
-
-        props: {
-            items: {
-                type: Array,
-                default: function () {
-                    return []
-                }
-            },
-            title: {
-                type: String,
-                default: 'vue'
-            }
-        },
-
-        data() {
-            return {
-                isActive: false
-            }
-        },
-
-        methods: {
-            clickTitle() {
-                this.isActive = !this.isActive
-            }
-        }
-    }
-</script>
-
-<style lang="scss" src="./style.scss"></style>
diff --git a/vue/src/components/DropDownMenu/style.scss b/vue/src/components/DropDownMenu/style.scss
deleted file mode 100644
index a6b853b..0000000
--- a/vue/src/components/DropDownMenu/style.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-$n: 9; //和items.length 相同
-$t: .1s;
-.share-dropdown-menu {
-    width: 250px;
-    position: relative;
-    z-index: 1;
-
-    &-title {
-        width: 100%;
-        display: block;
-        cursor: pointer;
-        background: black;
-        color: white;
-        height: 60px;
-        line-height: 60px;
-        font-size: 20px;
-        text-align: center;
-        z-index: 2;
-        transform: translate3d(0, 0, 0);
-    }
-
-    &-wrapper {
-        position: relative;
-    }
-
-    &-item {
-        text-align: center;
-        position: absolute;
-        width: 100%;
-        background: #e0e0e0;
-        line-height: 60px;
-        height: 60px;
-        cursor: pointer;
-        font-size: 20px;
-        opacity: 1;
-        transition: transform 0.28s ease;
-
-        &:hover {
-            background: black;
-            color: white;
-        }
-
-        @for $i from 1 through $n {
-            &:nth-of-type(#{$i}) {
-                z-index: -1;
-                transition-delay: $i*$t;
-                transform: translate3d(0, -60px, 0);
-            }
-        }
-    }
-
-    &.active {
-        .share-dropdown-menu-wrapper {
-            z-index: 1;
-        }
-
-        .share-dropdown-menu-item {
-            @for $i from 1 through $n {
-                &:nth-of-type(#{$i}) {
-                    transition-delay: ($n - $i)*$t;
-                    transform: translate3d(0, ($i - 1)*60px, 0);
-                }
-            }
-        }
-    }
-}
diff --git a/vue/src/components/ExtraArea/index.vue b/vue/src/components/ExtraArea/index.vue
new file mode 100644
index 0000000..3dfa025
--- /dev/null
+++ b/vue/src/components/ExtraArea/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <el-row type="flex" justify="space-between">
+        <el-col v-show="!expanded" :span="extraSpan">
+            <slot name="extra"/>
+        </el-col>
+        <div style="display: flex;justify-content: center;align-items: center">
+            <el-link :icon="iconClass" :underline="false" style="font-size: 16px" @click="expanded=!expanded"/>
+        </div>
+        <el-col :span="defaultSpan">
+            <slot/>
+        </el-col>
+    </el-row>
+</template>
+
+<script type="text/jsx">
+    export default {
+        name: "ExtraArea",
+
+        props: {
+            extra: {type: Number, default: 5}
+        },
+
+        data() {
+            return {
+                expanded: false
+            }
+        },
+
+        computed: {
+            extraSpan() {
+                return this.expanded ? 0 : this.extra
+            },
+            defaultSpan() {
+                return 23 - this.extraSpan
+            },
+            iconClass() {
+                return `el-icon-arrow-${this.expanded ? 'right' : 'left'}`
+            }
+        }
+    }
+</script>
+
+
diff --git a/vue/src/components/FormDialog/index.vue b/vue/src/components/FormDialog/index.vue
index 387fb17..089853e 100644
--- a/vue/src/components/FormDialog/index.vue
+++ b/vue/src/components/FormDialog/index.vue
@@ -4,14 +4,14 @@
             v-bind="$props"
             v-on="$listeners"
             :visible="value"
-            custom-class="dialog-form"
+            custom-class="form-dialog"
     >
         <slot slot="title" name="title">{{title}}</slot>
 
-        <div class="dialog-form-container">
+        <div class="form-dialog-container">
             <loading-mask :show="loading"/>
             <el-scrollbar>
-                <div class="dialog-form-body">
+                <div class="form-dialog-body">
                     <slot/>
                 </div>
                 <div style="margin-bottom: 17px"/>
@@ -42,16 +42,16 @@
 </script>
 
 <style lang="scss">
-    .dialog-form {
+    .form-dialog {
         .el-dialog__body {
             padding: 0;
         }
 
-        .dialog-form-container {
+        .form-dialog-container {
             position: relative;
             width: 100%;
 
-            .dialog-form-body {
+            .form-dialog-body {
                 padding: 24px 24px 0
             }
 
diff --git a/vue/src/components/ImageViewer/index.js b/vue/src/components/ImageViewer/index.js
index 37d58e4..7c35630 100644
--- a/vue/src/components/ImageViewer/index.js
+++ b/vue/src/components/ImageViewer/index.js
@@ -27,7 +27,8 @@ const image = function ({index = 0, urlList}) {
 }
 
 image.close = function () {
-
+    if (!insertEl) return
+    window.lgData[insertEl.getAttribute('lg-uid')].destroy(true)
 }
 
 export default image
diff --git a/vue/src/components/Link/index.vue b/vue/src/components/Link/index.vue
deleted file mode 100644
index 00d032b..0000000
--- a/vue/src/components/Link/index.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script type="text/jsx">
-    import {isExternal} from "@/utils/validate"
-
-    export default {
-        name: 'Link',
-
-        functional: true,
-
-        render(h, context) {
-            let to = context.props.to
-            if (isExternal(to)) return (
-                <a href={to} target="_blank" rel="nofollow">
-                    {context.children}
-                </a>
-            )
-            else return (
-                <router-link to={to}>
-                    {context.children}
-                </router-link>
-            )
-        }
-    }
-</script>
diff --git a/vue/src/components/LoadingMask/index.vue b/vue/src/components/LoadingMask/index.vue
index 7d3323d..f7679b2 100644
--- a/vue/src/components/LoadingMask/index.vue
+++ b/vue/src/components/LoadingMask/index.vue
@@ -7,17 +7,18 @@
         props: {show: Boolean},
 
         render(h, context) {
-            if (context.props.show === false) return ''
-            return (
-                <div class="el-loading-mask">
-                    <div class="el-loading-spinner">
-                        <svg viewBox="25 25 50 50" class="circular">
-                            <circle cx="50" cy="50" r="20" fill="none" class="path"/>
-                        </svg>
-                        <p>加载中...</p>
+            if (context.props.show) {
+                return (
+                    <div class="el-loading-mask">
+                        <div class="el-loading-spinner">
+                            <svg viewBox="25 25 50 50" class="circular">
+                                <circle cx="50" cy="50" r="20" fill="none" class="path"/>
+                            </svg>
+                            <p>加载中...</p>
+                        </div>
                     </div>
-                </div>
-            )
+                )
+            }
         }
     }
 </script>
diff --git a/vue/src/components/SvgIcon/index.vue b/vue/src/components/SvgIcon/index.vue
index 6ef8a26..8e267fe 100644
--- a/vue/src/components/SvgIcon/index.vue
+++ b/vue/src/components/SvgIcon/index.vue
@@ -7,14 +7,8 @@
         functional: true,
 
         props: {
-            icon: {
-                type: String,
-                required: true
-            },
-            className: {
-                type: String,
-                default: ''
-            }
+            icon: String,
+            className: String
         },
 
         render(h, context) {
diff --git a/vue/src/components/TinymceEditor/index.vue b/vue/src/components/TinymceEditor/index.vue
index 5b46707..b201d9c 100644
--- a/vue/src/components/TinymceEditor/index.vue
+++ b/vue/src/components/TinymceEditor/index.vue
@@ -25,14 +25,8 @@
         props: {
             value: String,
             readonly: Boolean,
-            height: {
-                type: String,
-                default: '400px'
-            },
-            width: {
-                type: String,
-                default: '100%'
-            }
+            height: {type: String, default: '400px'},
+            width: {type: String, default: '100%'}
         },
 
         data() {
diff --git a/vue/src/components/ZoomControl/index.vue b/vue/src/components/ZoomControl/index.vue
index 8e26b91..385483f 100644
--- a/vue/src/components/ZoomControl/index.vue
+++ b/vue/src/components/ZoomControl/index.vue
@@ -1,52 +1,43 @@
-<template>
-    <div class="zoom-wrapper">
-        <el-button circle icon="el-icon-minus" size="small" title="缩小" type="info" @click="zoomOut"/>
-
-        <span class="zoom-number">{{ value }}%</span>
-
-        <el-button circle icon="el-icon-plus" size="small" title="放大" type="info" @click="zoomIn"/>
-    </div>
-</template>
-
-<script>
+<script type="text/jsx">
     export default {
         name: "ZoomControl",
 
+        functional: true,
+
         props: {
-            value: {
-                type: Number,
-                default: 100
-            },
-            step: {
-                type: Number,
-                default: 20
-            },
-            min: {
-                type: Number,
-                default: 10
-            },
-            max: {
-                type: Number,
-                default: 200
-            }
+            value: {type: Number, default: 100},
+            step: {type: Number, default: 20},
+            min: {type: Number, default: 10},
+            max: {type: Number, default: 200}
         },
 
-        methods: {
-            zoomIn() {
-                const zoom = this.value + this.step
-                if (zoom <= this.max) this.$emit('input', zoom)
-            },
+        render(h, context) {
+            const {value, step, max, min} = context.props
+            const input = context.listeners.input
+
+            function zoomIn() {
+                const zoom = value + step
+                if (zoom <= max) input(zoom)
+            }
 
-            zoomOut() {
-                const zoom = this.value - this.step
-                if (zoom >= this.min) this.$emit('input', zoom)
+            function zoomOut() {
+                const zoom = value - step
+                if (zoom >= min) input(zoom)
             }
+
+            return (
+                <div class="zoom-wrapper">
+                    <el-button circle icon="el-icon-minus" size="small" title="缩小" type="info" on-click={zoomOut}/>
+                    <span class="zoom-number">{value}%</span>
+                    <el-button circle icon="el-icon-plus" size="small" title="放大" type="info" on-click={zoomIn}/>
+                </div>
+            )
         }
     }
 </script>
 
-<style lang="scss">
-    .zoom-number {
+<style>
+    .zoom-wrapper .zoom-number {
         color: #657180;
         padding: 0 10px;
         display: inline-block;
diff --git a/vue/src/layout/components/Header.vue b/vue/src/layout/components/Header.vue
index a4ad1cd..456f29c 100644
--- a/vue/src/layout/components/Header.vue
+++ b/vue/src/layout/components/Header.vue
@@ -1,13 +1,12 @@
 <template>
     <header
-            :class="{'hide-header':hideHeader}"
-            class="header-container"
-            @mouseenter="() => valueCtrl('mouseOutside',false)"
-            @mouseleave="() => valueCtrl('mouseOutside',true)"
+            :class="{'header-container':true,'hide-header':hideHeader}"
+            @mouseenter="() => this.mouseOutside = false"
+            @mouseleave="() => this.mouseOutside = true"
     >
-        <v-navbar @menu-show="e => valueCtrl('navbarMenuShow',e)"/>
+        <v-navbar @menu-show="e => this.navbarMenuShow = e"/>
 
-        <tags-view v-if="useTagsView" @menu-show="e => valueCtrl('tagsViewMenuShow',e)"/>
+        <tags-view v-if="useTagsView" @menu-show="e => this.tagsViewMenuShow = e"/>
     </header>
 </template>
 
@@ -42,6 +41,7 @@
         },
 
         watch: {
+            //多页签停用时清除所有页面缓存
             useTagsView(v) {
                 !v && this.$store.dispatch('tagsView/delAllViews')
             },
@@ -53,10 +53,6 @@
         },
 
         methods: {
-            valueCtrl(key, value) {
-                this[key] = value
-            },
-
             moveEvent(e) {
                 if (e.clientY <= 15) this.mouseOutside = false
             },
diff --git a/vue/src/layout/index.vue b/vue/src/layout/index.vue
index 342d6df..de26c99 100644
--- a/vue/src/layout/index.vue
+++ b/vue/src/layout/index.vue
@@ -19,13 +19,13 @@
     import VMain from './components/Main'
     import VHeader from './components/Header'
     import VSidebar from './components/Sidebar'
-    import ResizeHandler from './mixin/ResizeHandler'
-    import {isEmpty} from "@/utils"
+    import offlineMixin from "@/layout/mixin/offline"
+    import resizeMixin from './mixin/resize'
 
     export default {
         name: 'Layout',
 
-        mixins: [ResizeHandler],
+        mixins: [offlineMixin, resizeMixin],
 
         components: {VMain, VSidebar, VHeader},
 
@@ -34,12 +34,6 @@
 
             ...mapState('setting', ['useTagsView', 'sidebarCollapse']),
 
-            ...mapState('socket', ['online']),
-
-            ...mapState('user', {
-                isLogin: state => !isEmpty(state.id, state.token)
-            }),
-
             containerClass() {
                 return {
                     'el-container': true,
@@ -49,21 +43,11 @@
                 }
             },
 
-            showOfflineTip() {
-                return !this.online && this.isLogin
-            },
-
             showSidebarMask() {
                 return !this.sidebarCollapse && this.device === 'mobile'
             }
         },
 
-        watch: {
-            showOfflineTip(v) {
-                v ? this.$bottomTip('与服务器失去连接') : this.$bottomTip.close()
-            }
-        },
-
         methods: {
             collapseSidebar() {
                 this.$store.commit('setting/sidebarCollapse', true)
diff --git a/vue/src/layout/mixin/offline.js b/vue/src/layout/mixin/offline.js
new file mode 100644
index 0000000..8e8b5f5
--- /dev/null
+++ b/vue/src/layout/mixin/offline.js
@@ -0,0 +1,17 @@
+import {isEmpty} from "@/utils"
+
+export default {
+    computed: {
+        showOfflineTip() {
+            const state = this.$store.state
+            const isLogin = !isEmpty(state.user.id, state.user.token)
+            return !state.socket.online && isLogin
+        },
+    },
+
+    watch: {
+        showOfflineTip(v) {
+            v ? this.$bottomTip('与服务器失去连接') : this.$bottomTip.close()
+        }
+    }
+}
diff --git a/vue/src/layout/mixin/ResizeHandler.js b/vue/src/layout/mixin/resize.js
similarity index 100%
rename from vue/src/layout/mixin/ResizeHandler.js
rename to vue/src/layout/mixin/resize.js
diff --git a/vue/src/views/stock/current/index.vue b/vue/src/views/stock/current/index.vue
index a86af78..74f0c8f 100644
--- a/vue/src/views/stock/current/index.vue
+++ b/vue/src/views/stock/current/index.vue
@@ -1,18 +1,19 @@
 <template>
-    <el-row type="flex">
-        <el-card class="card-container max-view-height" style="width: 250px;margin-right: 15px">
-            <el-input
-                    v-model="temp.filter"
-                    size="small"
-                    placeholder="筛选分类"
-                    clearable
-                    style="margin-bottom: 10px"
-                    @input="filter"
-            />
-            <category-tree ref="tree" :filter-node-method="filterNode" @node-click="nodeClick"/>
-        </el-card>
-
-        <el-card style="width: calc(100% - 250px)">
+    <el-card>
+        <extra-area>
+            <template v-slot:extra>
+                <el-input
+                        v-model="temp.filter"
+                        size="small"
+                        placeholder="筛选分类"
+                        clearable
+                        suffix-icon="el-icon-search"
+                        style="margin-bottom: 10px"
+                        @input="filter"
+                />
+                <category-tree ref="tree" :filter-node-method="filterNode" @node-click="nodeClick"/>
+            </template>
+
             <search-form>
                 <search-form-item label="商品分类：">
                     <el-input :value="temp.cname" maxlength="100" clearable @clear="clearCidSearch"/>
@@ -40,16 +41,14 @@
             </el-row>
 
             <el-row v-loading="config.loading" class="table-container">
-                <abstract-table :data="tableData" :highlight-current-row="false" show-summary :summary-method="summary">
+                <abstract-table :data="tableData" :highlight-current-row="false" show-summary
+                                :summary-method="summary">
                     <el-table-column align="center" label="#" type="index" width="80"/>
-                    <el-table-column align="center" label="商品分类" prop="cname" show-overflow-tooltip/>
+                    <el-table-column align="center" label="商品分类">
+                        <el-link slot-scope="{row}" @click="more(row)">{{row.cname}}</el-link>
+                    </el-table-column>
                     <el-table-column align="center" label="库存数量" prop="total_num" show-overflow-tooltip/>
                     <el-table-column align="center" label="总 值" prop="total_price" show-overflow-tooltip/>
-                    <el-table-column align="center" label="操作">
-                        <template v-slot="{row}">
-                            <el-button size="small" type="primary" @click="more(row)">详细</el-button>
-                        </template>
-                    </el-table-column>
                 </abstract-table>
 
                 <el-pagination
@@ -61,17 +60,18 @@
                         @current-change="pageChange"
                 />
             </el-row>
-        </el-card>
+        </extra-area>
 
         <detail-dialog v-model="detailDialog" :title="title" :cid="cid"/>
-    </el-row>
+    </el-card>
 </template>
 
 <script>
-    import SearchForm from "@/components/SearchForm"
-    import SearchFormItem from "@/components/SearchForm/SearchFormItem"
     import CategoryTree from '@/bizComponents/CategoryTree'
     import DetailDialog from "./DetailDialog"
+    import ExtraArea from '@/components/ExtraArea'
+    import SearchForm from "@/components/SearchForm"
+    import SearchFormItem from "@/components/SearchForm/SearchFormItem"
     import {baseUrl, search} from "@/api/stock/current"
     import {isEmpty, debounce} from "@/utils"
     import {plus} from "@/utils/math"
@@ -84,7 +84,7 @@
 
         mixins: [tableMixin],
 
-        components: {SearchForm, SearchFormItem, CategoryTree, DetailDialog},
+        components: {CategoryTree, DetailDialog, ExtraArea, SearchForm, SearchFormItem},
 
         data() {
             return {
@@ -143,7 +143,7 @@
             },
 
             filter(v) {
-                this.$refs.tree.$refs.tree.filter(v)
+                this.$refs.tree.filter(v)
             },
 
             mergeSearchForm() {