消息增加折叠功能

查询表格抽取
SearchForm组件改为依据父节点宽度
Empty组件增加padding
destroyed生命周期改为beforeDestroy

vue/src/components/AbstractTable/index.vue

@@ -0,0 +1,23 @@
+<script type="text/jsx">
+    import Empty from '@/components/Empty'
+
+    export default {
+        name: "AbstractTable",
+        functional: true,
+        render(h, context) {
+            const {data, children} = context
+            return (
+                <el-table
+                    ref="table"
+                    current-row-key="id"
+                    row-key="id"
+                    highlight-current-row
+                    {...data}
+                >
+                    {children}
+                    <Empty slot="empty"/>
+                </el-table>
+            )
+        }
+    }
+</script>

vue/src/components/Empty/index.vue

@@ -34,6 +34,7 @@
 
 <style lang="scss">
     .ant-empty {
+        padding: 20px;
         margin: 0 8px;
         font-size: 14px;
         line-height: 22px;

vue/src/components/SearchForm/SearchFormItem.vue

@@ -3,14 +3,14 @@
         name: "SearchFormItem",
         inject: {
             searchForm: {
-                default: () => ({sm: 12, lg: 8, xl: 6})
+                default: () => ({width: 'auto'})
             }
         },
         props: {label: String},
         render() {
-            const {sm, lg, xl} = this.searchForm
+            const {width} = this.searchForm
             return (
-                <el-col {...{attrs: {sm, lg, xl}}}>
+                <el-col style={{width}} span={100}>
                     <el-form-item label={this.label}>
                         {this.$slots.default}
                     </el-form-item>

vue/src/components/SearchForm/index.vue

@@ -1,4 +1,6 @@
 <script type="text/jsx">
+    import {getElementInnerWidth} from '@/utils/browser'
+
     export default {
         name: "SearchForm",
         provide() {
@@ -8,15 +10,17 @@
         },
         props: {
             labelWidth: {type: String, default: '120px'},
+            xs: {type: Number, default: 24},// <768px
             sm: {type: Number, default: 12},// >=768px
-            lg: {type: Number, default: 8}, // >=1200px
+            md: {type: Number, default: 8}, // >=998px
-            xl: {type: Number, default: 6}  // >=1920px
+            lg: {type: Number, default: 6}  // >=1200px
         },
         data() {
             return {
                 showCollapse: false,
                 collapse: true,
-                num: 0
+                num: 0,
+                width: 'auto'
             }
         },
         methods: {
@@ -24,14 +28,20 @@
                 this.collapse = !this.collapse
             },
             getElementNumInRow() {
-                const vw = document.body.clientWidth
+                const vw = getElementInnerWidth(this.$el.parentNode)
-                if (vw < 1200) return Math.floor(24 / this.sm)
+
-                else if (vw < 1920) return Math.floor(24 / this.lg)
+                let lineNum = this.lg
-                return Math.floor(24 / this.xl)
+
+                if (vw < 768) lineNum = this.xs
+                else if (vw < 998) lineNum = this.sm
+                else if (vw < 1200) lineNum = this.md
+
+                return Math.floor(24 / lineNum)
             },
             resize() {
                 const num = this.getElementNumInRow()
                 this.num = num
+                this.width = `${100 / num}%`
                 this.showCollapse = num < this.$slots.default.length
             }
         },
@@ -46,6 +56,7 @@
             const slots = this.$slots.default
             const collapseChildren = []
             if (this.showCollapse) {
+                //此处直接对el-row使用v-show会无效
                 collapseChildren.push(
                     <el-collapse-transition>
                         <div v-show={!this.collapse}>
@@ -77,7 +88,7 @@
                     <el-row gutter={20}>
                         {this.num > slots.length ? slots : slots.slice(0, this.num)}
                     </el-row>
-                    {this.showCollapse ? collapseChildren : ''}
+                    {this.showCollapse && collapseChildren}
                 </el-form>
             )
         }

vue/src/components/SignautreBoard/main.vue

@@ -128,7 +128,7 @@
         mounted() {
             window.addEventListener('resize', this.resize)
         },
-        destroyed() {
+        beforeDestroy() {
             this.clear()
             window.removeEventListener('resize', this.resize)
         }

vue/src/components/TinymceEditor/index.vue

@@ -98,7 +98,7 @@
         mounted() {
             !this.readonly && this.init()
         },
-        destroyed() {
+        beforeDestroy() {
             this.destroy()
         },
     }

vue/src/mixins/tablePageMixin.js

@@ -2,6 +2,8 @@
 * 列表页通用混入
 * 引用者必须要有search方法
 * */
+import AbstractTable from '@/components/AbstractTable'
+
 const mixin = {
     data() {
         return {
@@ -19,6 +21,7 @@ const mixin = {
             type: 'see'
         }
     },
+    components: {AbstractTable},
     watch: {
         row(v) {
             !v && this.$refs.table && this.$refs.table.setCurrentRow()

vue/src/utils/browser.js

@@ -5,3 +5,34 @@ export function isMobile() {
     const rect = body.getBoundingClientRect()
     return rect.width - 1 < WIDTH
 }
+
+//获取元素的内宽度
+export function getElementInnerWidth(ele) {
+    if (!ele) return 0
+
+    const style = window.getComputedStyle(ele)
+    return parseFloat(style.width) - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight))
+}
+
+//获取元素的高度
+export function getElementHeight(ele, style) {
+    if (!ele) return 0
+
+    let node = ele.cloneNode(true)
+    node.style.visibility = 'hidden'
+
+    if (style) {
+        Object.keys(style).forEach(item => {
+            node.style[item] = style[item]
+        })
+    }
+
+    const id = 'temp-id-' + Date.now()
+    node.setAttribute('id', id)
+    document.body.append(node)
+
+    const height = node.offsetHeight
+    document.body.removeChild(node)
+
+    return height
+}

vue/src/views/app/login.vue

@@ -19,7 +19,6 @@
                             ref="username"
                             v-model="form.username"
                             :maxlength="20"
-                            autocomplete="off"
                             name="username"
                             placeholder="请输入用户名"
                             type="text"
@@ -37,7 +36,6 @@
                             :key="passwordType"
                             :type="passwordType"
                             :maxlength="20"
-                            autocomplete="off"
                             name="password"
                             placeholder="请输入密码"
                             @keyup.enter.native="login"

vue/src/views/app/register.vue

@@ -15,13 +15,7 @@
                     <span class="svg-container">
                         <svg-icon icon="user"/>
                     </span>
-                    <el-input
+                    <el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
-                            ref="username"
-                            v-model="form.username"
-                            :maxlength="20"
-                            placeholder="请输入用户名"
-                            autocomplete="off"
-                    />
                 </el-form-item>
                 <el-form-item prop="pwd">
                     <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">

vue/src/views/example/stylePage.vue

@@ -33,12 +33,12 @@
             </el-row>
             <el-row class="table-container">
                 <liner-progress show/>
-                <el-table :data="tableData" highlight-current-row>
+                <abstract-table :data="tableData">
                     <el-table-column label="姓名" prop="name"/>
                     <el-table-column label="住址" prop="address"/>
                     <el-table-column label="电话" prop="tel"/>
                     <el-table-column label="年龄" prop="age"/>
-                </el-table>
+                </abstract-table>
             </el-row>
             <el-row style="min-height: 50px">
                 <el-tree
@@ -60,12 +60,13 @@
 </template>
 
 <script>
+    import AbstractTable from '@/components/AbstractTable'
     import LinerProgress from '@/components/LinerProgress'
     import DialogForm from "@/components/DialogForm"
 
     export default {
         name: "stylePage",
-        components: {LinerProgress, DialogForm},
+        components: {AbstractTable, LinerProgress, DialogForm},
         data() {
             return {
                 dialog: false,

vue/src/views/message/manage/index.vue

@@ -1,16 +1,16 @@
 <template>
     <el-card v-loading="config.operating">
         <search-form>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="标 题：">
+            <search-form-item label="标 题：">
                 <el-input v-model="searchForm.title" clearable maxlength="100"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="消息类型：">
+            <search-form-item label="消息类型：">
                 <el-select v-model="searchForm.type" clearable @clear="searchForm.type=null">
                     <el-option :value="0" label="通知提醒"/>
                     <el-option :value="1" label="系统公告"/>
                 </el-select>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="状 态：">
+            <search-form-item label="状 态：">
                 <el-select v-model="searchForm.status" clearable @clear="searchForm.status=null">
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="已发布"/>
@@ -26,14 +26,7 @@
             <el-button v-if="canDel" icon="el-icon-delete" size="small" type="danger" @click="del">删 除</el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-            >
                 <el-table-column align="center" label="#" type="index" width="80"/>
                 <el-table-column align="center" label="标 题" prop="title" show-overflow-tooltip/>
                 <el-table-column align="center" label="类 型" show-overflow-tooltip>
@@ -49,7 +42,7 @@
                 <el-table-column align="center" label="发布时间" width="150" show-overflow-tooltip>
                     <template v-slot="{row}">{{row.ptime | timestamp2Date}}</template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/message/user/AutoHidden.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="auto-hidden">
+        <div ref="content" v-html="html" class="auto-hidden__content" :style="contentStyle"/>
+        <div v-if="showCollapse" class="auto-hidden__collapse">
+            <el-button
+                    type="text"
+                    size="mini"
+                    :icon="collapseIcon"
+                    @click="handleCollapse"
+            >
+                {{collapse ? '展开' : '收起'}}
+            </el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getElementHeight} from "@/utils/browser"
+
+    export default {
+        name: "AutoHidden",
+        props: {
+            html: String,
+            height: {type: String, default: '100px'}
+        },
+        data() {
+            return {
+                showCollapse: false,
+                collapse: true
+            }
+        },
+        computed: {
+            contentStyle() {
+                if (!this.showCollapse || !this.collapse) return {}
+                return {'max-height': this.height}
+            },
+            collapseIcon() {
+                return this.collapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
+            }
+        },
+        methods: {
+            handleCollapse() {
+                this.collapse = !this.collapse
+            },
+            isOverHeight() {
+                const height = getElementHeight(this.$refs['content'])
+                return height > parseFloat(this.height)
+            }
+        },
+        mounted() {
+            this.showCollapse = this.isOverHeight()
+        }
+    }
+</script>
+
+<style lang="scss">
+    .auto-hidden {
+        position: relative;
+
+        &__content {
+            overflow: hidden;
+        }
+
+        &__collapse {
+            margin: 0 auto;
+            text-align: center;
+        }
+    }
+</style>

vue/src/views/message/user/MessageStream.vue

@@ -21,16 +21,16 @@
                     <el-card
                             v-for="child in msg.children"
                             :key="child.id"
-                            :class="{'message-stream__item':true,viewed:child.read}"
+                            :class="{'message-stream__item':true,viewed:child.__read}"
                             @click.native="read(child)"
                     >
                         <div class="message-stream__item__title">
-                            <span v-if="!child.read" class="dot success"/>
+                            <span v-if="!child.__read" class="dot success"/>
                             <b>【{{transformType(child.type)}}】</b>
                             {{child.title}}
                         </div>
-                        <div v-html="child.content"/>
+                        <auto-hidden :html="child.content"/>
-                        <div class="message-stream__item__footer">by: {{child.pname}}</div>
+                        <div class="message-stream__item__footer"><b>By:</b> {{child.pname}}</div>
                     </el-card>
                 </el-timeline-item>
             </el-timeline>
@@ -51,13 +51,14 @@
 <script>
     import tablePageMixin from '@/mixins/tablePageMixin'
     import Empty from '@/components/Empty'
+    import AutoHidden from "./AutoHidden"
     import {search, read, readAll} from "@/api/message/user"
     import {isEmpty} from "@/utils"
 
     export default {
         name: "MessageStream",
         mixins: [tablePageMixin],
-        components: {Empty},
+        components: {Empty, AutoHidden},
         props: {
             mode: String,
         },
@@ -84,6 +85,7 @@
         methods: {
             search() {
                 if (this.config.loading) return
+                this.tableData = []
                 this.config.loading = true
                 search({...this.searchForm, unread: this.mode === 'unread'})
                     .then(({list, total, data}) => {
@@ -105,7 +107,8 @@
                         year = time.getFullYear(),
                         month = time.getMonth() + 1,
                         day = time.getDate()
-                    item.read = this.mode === 'read'
+                    //根据模式判断是未读还是已读
+                    item.__read = this.mode === 'read'
                     time = (year === thisYear ? '' : `${year}年`) + `${month}月${day}日`
                     const already = map[time]
                     if (!already) {
@@ -135,9 +138,9 @@
             transformType(type) {
                 switch (type) {
                     case 0:
-                        return '通知提醒'
+                        return '提醒'
                     case 1:
-                        return '系统公告'
+                        return '公告'
                 }
             },
         }

vue/src/views/purchase/inbound/components/OrderSelector.vue

@@ -14,12 +14,8 @@
                 <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
                 <el-button plain size="small" @click="closeDialog">取 消</el-button>
             </el-row>
-            <el-table
+            <el-row v-loading="config.loading" class="table-container">
-                    v-loading="config.loading"
+                <abstract-table :data="tableData" @expand-change="getSubList">
-                    :data="tableData"
-                    class="table-container"
-                    @expand-change="getSubList"
-            >
                     <el-table-column align="center" type="expand">
                         <template v-slot="{row}">
                             <liner-progress :show="row._loading"/>
@@ -62,7 +58,8 @@
                     <el-table-column align="center" label="审核时间" show-overflow-tooltip>
                         <template v-slot="{row}">{{row.vtime | timestamp2Date}}</template>
                     </el-table-column>
-            </el-table>
+                </abstract-table>
+            </el-row>
         </el-scrollbar>
     </el-dialog>
 </template>

vue/src/views/purchase/inbound/index.vue

@@ -49,12 +49,8 @@
             </el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table
-                    ref="table"
                     :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
                     @row-click="row=$event"
                     @expand-change="getSubList"
             >
@@ -84,7 +80,7 @@
                         {{getStatus(row.status)}}
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/purchase/order/components/EditDialog.vue

@@ -57,7 +57,7 @@
                 </dialog-form-item>
             </el-row>
         </el-form>
-        <el-table :data="form.data" ref="table">
+        <el-table ref="table" :data="form.data">
             <el-table-column align="center" label="#" type="index" width="80"/>
             <el-table-column align="center" label="商 品">
                 <template v-slot="{row}">

vue/src/views/purchase/order/index.vue

@@ -65,12 +65,8 @@
             </el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table
-                    ref="table"
                     :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
                     @row-click="row=$event"
                     @expand-change="getSubList"
             >
@@ -112,7 +108,7 @@
                 <el-table-column align="center" label="完成时间" width="150" show-overflow-tooltip>
                     <template v-slot="{row}">{{row.ftime | timestamp2Date}}</template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/sell/order/components/CustomerSelector.vue

@@ -26,15 +26,7 @@
         <el-scrollbar>
             <el-row class="table-container">
                 <liner-progress :show="config.loading"/>
-                <el-table
+                <abstract-table :data="tableData" @row-click="row=$event" @row-dblclick="dbclick">
-                        ref="table"
-                        :data="tableData"
-                        current-row-key="id"
-                        highlight-current-row
-                        row-key="id"
-                        @row-click="row=$event"
-                        @row-dblclick="dbclick"
-                >
                     <el-table-column align="center" label="#" type="index" width="80"/>
                     <el-table-column align="center" label="客 户" prop="name" show-overflow-tooltip/>
                     <el-table-column align="center" label="行政区域" prop="region_name" show-overflow-tooltip/>
@@ -50,7 +42,7 @@
                             <span>{{row.status===1?'启用':'禁用'}}</span>
                         </template>
                     </el-table-column>
-                </el-table>
+                </abstract-table>
                 <el-pagination
                         background
                         :current-page="searchForm.page"

vue/src/views/sell/order/components/EditDialog.vue

@@ -57,7 +57,7 @@
                 </dialog-form-item>
             </el-row>
         </el-form>
-        <el-table :data="form.data" ref="table">
+        <el-table ref="table" :data="form.data">
             <el-table-column align="center" label="#" type="index" width="80"/>
             <el-table-column align="center">
                 <template slot="header">

vue/src/views/sell/order/index.vue

@@ -65,15 +65,7 @@
             </el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event" @expand-change="getSubList">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-                    @expand-change="getSubList"
-            >
                 <el-table-column align="center" type="expand">
                     <template v-slot="{row}">
                         <liner-progress :show="row._loading"/>
@@ -112,7 +104,7 @@
                 <el-table-column align="center" label="完成时间" width="150" show-overflow-tooltip>
                     <template v-slot="{row}">{{row.ftime | timestamp2Date}}</template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/sell/outbound/components/OrderSelector.vue

@@ -14,12 +14,8 @@
                 <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
                 <el-button plain size="small" @click="closeDialog">取 消</el-button>
             </el-row>
-            <el-table
+            <el-row v-loading="config.loading" class="table-container">
-                    v-loading="config.loading"
+                <abstract-table :data="tableData" @expand-change="getSubList">
-                    :data="tableData"
-                    class="table-container"
-                    @expand-change="getSubList"
-            >
                     <el-table-column align="center" type="expand">
                         <template v-slot="{row}">
                             <liner-progress :show="row._loading"/>
@@ -62,7 +58,8 @@
                     <el-table-column align="center" label="审核时间" show-overflow-tooltip>
                         <template v-slot="{row}">{{row.vtime | timestamp2Date}}</template>
                     </el-table-column>
-            </el-table>
+                </abstract-table>
+            </el-row>
         </el-scrollbar>
     </el-dialog>
 </template>

vue/src/views/sell/outbound/index.vue

@@ -49,15 +49,7 @@
             </el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event" @expand-change="getSubList">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-                    @expand-change="getSubList"
-            >
                 <el-table-column align="center" type="expand">
                     <template v-slot="{row}">
                         <liner-progress :show="row._loading"/>
@@ -84,7 +76,7 @@
                         {{getStatus(row.status)}}
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/stock/current/DetailDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <dialog-form :value="value" :loading="false" :title="title" width="70%" @close="cancel" @open="search">
         <liner-progress :show="loading"/>
-        <el-table :data="tableData" border show-summary :summary-method="summary" :span-method="span">
+        <abstract-table :data="tableData" border show-summary :summary-method="summary" :span-method="span">
             <el-table-column align="center" label="采购订单" show-overflow-tooltip>
                 <router-link
                         slot-scope="{row}"
@@ -26,11 +26,12 @@
             </el-table-column>
             <el-table-column align="center" label="库存数量" prop="num" show-overflow-tooltip/>
             <el-table-column align="center" label="总 值" prop="total" show-overflow-tooltip/>
-        </el-table>
+        </abstract-table>
     </dialog-form>
 </template>
 
 <script>
+    import AbstractTable from '@/components/AbstractTable'
     import LinerProgress from '@/components/LinerProgress'
     import DialogForm from "@/components/DialogForm"
     import dialogMixin from "@/mixins/dialogMixin"
@@ -40,7 +41,7 @@
     export default {
         name: "DetailDialog",
         mixins: [dialogMixin],
-        components: {LinerProgress, DialogForm},
+        components: {AbstractTable, LinerProgress, DialogForm},
         props: {value: Boolean, title: String, cid: Number},
         data() {
             return {

vue/src/views/stock/current/index.vue

@@ -14,16 +14,16 @@
 
         <el-card>
             <search-form>
-                <search-form-item :sm="24" :lg="12" :xl="8" label="商品分类：">
+                <search-form-item label="商品分类：">
                     <el-input :value="temp.cname" maxlength="100" clearable @clear="clearCidSearch"/>
                 </search-form-item>
-                <search-form-item :sm="24" :lg="12" :xl="8" label="采购订单：">
+                <search-form-item label="采购订单：">
                     <el-input v-model="searchForm.cgddid" maxlength="100" clearable/>
                 </search-form-item>
-                <search-form-item :sm="24" :lg="12" :xl="8" label="采购入库单：">
+                <search-form-item label="采购入库单：">
                     <el-input v-model="searchForm.cgrkid" maxlength="100" clearable/>
                 </search-form-item>
-                <search-form-item :sm="24" :lg="12" :xl="8" label="入库时间：">
+                <search-form-item label="入库时间：">
                     <el-date-picker
                             v-model="temp.ctime"
                             format="yyyy-MM-dd"
@@ -38,14 +38,7 @@
                 <el-button icon="el-icon-download" size="small" type="info" @click="downloadExcel">导 出</el-button>
             </el-row>
             <el-row v-loading="config.loading" class="table-container">
-                <el-table
+                <abstract-table :data="tableData" show-summary :summary-method="summary">
-                        ref="table"
-                        :data="tableData"
-                        current-row-key="id"
-                        row-key="id"
-                        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="库存数量" prop="total_num" show-overflow-tooltip/>
@@ -55,7 +48,7 @@
                             <el-button size="small" type="primary" @click="more(row)">详细</el-button>
                         </template>
                     </el-table-column>
-                </el-table>
+                </abstract-table>
                 <el-pagination
                         background
                         :current-page="searchForm.page"

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

@@ -1,28 +1,28 @@
 <template>
     <el-card v-loading="config.operating">
         <search-form>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="客 户：">
+            <search-form-item label="客 户：">
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="行政区域：">
+            <search-form-item label="行政区域：">
                 <el-input :value="temp.region_name" clearable @clear="clearSidSearch" @focus="regionDialog=true"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="地 址：">
+            <search-form-item label="地 址：">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="联系人：">
+            <search-form-item label="联系人：">
                 <el-input v-model="searchForm.linkman" clearable maxlength="50"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="联系电话：">
+            <search-form-item label="联系电话：">
                 <el-input v-model="searchForm.linkphone" clearable maxlength="20"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="状 态：">
+            <search-form-item label="状 态：">
                 <el-select v-model="searchForm.status" clearable @clear="searchForm.status=null">
                     <el-option :value="1" label="启用"/>
                     <el-option :value="0" label="禁用"/>
                 </el-select>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="创建时间：">
+            <search-form-item label="创建时间：">
                 <el-date-picker
                         v-model="temp.ctime"
                         format="yyyy-MM-dd"
@@ -39,14 +39,7 @@
             <el-button v-if="canDel" size="small" type="danger" @click="del">删 除</el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-            >
                 <el-table-column align="center" label="#" type="index" width="80"/>
                 <el-table-column align="center" label="客 户" prop="name" show-overflow-tooltip/>
                 <el-table-column align="center" label="行政区域" prop="region_name" show-overflow-tooltip/>
@@ -62,7 +55,7 @@
                         <span>{{row.status===1?'启用':'禁用'}}</span>
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/system/resource/index.vue

@@ -5,19 +5,12 @@
             <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-            >
                 <el-table-column label="名称" prop="fullName" show-overflow-tooltip/>
                 <el-table-column label="访问路径" prop="url" show-overflow-tooltip/>
                 <el-table-column label="总频率" prop="total_rate" show-overflow-tooltip/>
                 <el-table-column label="单个IP频率" prop="ip_rate" show-overflow-tooltip/>
-            </el-table>
+            </abstract-table>
         </el-row>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>

vue/src/views/system/role/index.vue

@@ -30,12 +30,8 @@
             <el-button v-if="canDel" icon="el-icon-delete" size="small" type="danger" @click="del">删 除</el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table
-                    ref="table"
                     :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
                     @row-click="row=$event"
             >
                 <el-table-column align="center" type="expand">
@@ -53,7 +49,7 @@
                         <span>{{row.status===1?'启用':'禁用'}}</span>
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

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

@@ -1,28 +1,28 @@
 <template>
     <el-card v-loading="config.operating">
         <search-form>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="供应商：">
+            <search-form-item label="供应商：">
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="行政区域：">
+            <search-form-item label="行政区域：">
                 <el-input :value="temp.region_name" clearable @clear="clearSidSearch" @focus="regionDialog=true"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="地 址：">
+            <search-form-item label="地 址：">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="联系人：">
+            <search-form-item label="联系人：">
                 <el-input v-model="searchForm.linkman" clearable maxlength="50"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="联系电话：">
+            <search-form-item label="联系电话：">
                 <el-input v-model="searchForm.linkphone" clearable maxlength="20"/>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="状 态：">
+            <search-form-item label="状 态：">
                 <el-select v-model="searchForm.status" clearable @clear="searchForm.status=null">
                     <el-option :value="1" label="启用"/>
                     <el-option :value="0" label="禁用"/>
                 </el-select>
             </search-form-item>
-            <search-form-item :sm="24" :lg="12" :xl="8" label="创建时间：">
+            <search-form-item label="创建时间：">
                 <el-date-picker
                         v-model="temp.ctime"
                         format="yyyy-MM-dd"
@@ -39,14 +39,7 @@
             <el-button v-if="canDel" size="small" type="danger" @click="del">删 除</el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-            >
                 <el-table-column align="center" label="#" type="index" width="80"/>
                 <el-table-column align="center" label="供应商" prop="name" show-overflow-tooltip/>
                 <el-table-column align="center" label="行政区域" prop="region_name" show-overflow-tooltip/>
@@ -62,7 +55,7 @@
                         <span>{{row.status===1?'启用':'禁用'}}</span>
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/system/user/index.vue

@@ -34,14 +34,7 @@
             </el-button>
         </el-row>
         <el-row v-loading="config.loading" class="table-container">
-            <el-table
+            <abstract-table :data="tableData" @row-click="row=$event">
-                    ref="table"
-                    :data="tableData"
-                    current-row-key="id"
-                    highlight-current-row
-                    row-key="id"
-                    @row-click="row=$event"
-            >
                 <el-table-column align="center" label="#" type="index" width="80"/>
                 <el-table-column align="center" label="头像" width="100">
                     <img
@@ -69,7 +62,7 @@
                         <span>{{row.status===1?'启用':'禁用'}}</span>
                     </template>
                 </el-table-column>
-            </el-table>
+            </abstract-table>
             <el-pagination
                     background
                     :current-page="searchForm.page"

vue/src/views/userCenter/components/LoginHistory.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-loading="config.loading">
-        <el-table :data="tableData">
+        <abstract-table :data="tableData" :highlight-current-row="false">
             <el-table-column align="center" type="index" width="60">
                 <el-button icon="el-icon-refresh-right" slot="header" style="padding: 0" type="text" @click="search"/>
             </el-table-column>
@@ -16,7 +16,7 @@
                     </el-tag>
                 </template>
             </el-table-column>
-        </el-table>
+        </abstract-table>
         <el-pagination
                 background
                 :current-page="searchForm.page"

vue/src/views/userCenter/components/UserAction.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-loading="config.loading">
-        <el-table :data="tableData">
+        <abstract-table :data="tableData" :highlight-current-row="false">
             <el-table-column align="center" label="#" type="index" width="60">
                 <el-button icon="el-icon-refresh-right" slot="header" style="padding: 0" type="text" @click="search"/>
             </el-table-column>
@@ -23,7 +23,7 @@
                     </el-tooltip>
                 </template>
             </el-table-column>
-        </el-table>
+        </abstract-table>
         <el-pagination
                 background
                 :current-page="searchForm.page"