From 5030e3db57043c43234a95281a22cb7cdb625f4c Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@126.com>
Date: Sat, 10 Oct 2020 18:02:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/asset/style/element-ui.scss           |   5 +-
 vue/src/asset/style/index.scss                |   5 +-
 .../component/abstract/Pagination/index.vue   |   1 -
 vue/src/component/form/Search/index.vue       | 126 ++++++++------
 vue/src/component/form/Search/item.vue        |  24 ---
 vue/src/component/form/ValidateInfo/index.vue |   7 +-
 vue/src/config/index.js                       |   3 -
 vue/src/globalMethod/Guide/main.vue           |   6 +-
 vue/src/globalMethod/Verify/main.vue          |   4 +-
 vue/src/main.js                               |   4 +-
 vue/src/mixin/chart/logic.js                  |   3 +-
 vue/src/mixin/docTableMixin.js                |  31 ++--
 vue/src/util/element-ui/elForm.js             |   0
 vue/src/util/element-ui/elTree.js             |  21 +++
 vue/src/util/errorLog.js                      |  15 --
 vue/src/util/file.js                          |   2 +-
 vue/src/util/secret.js                        |   3 +
 vue/src/util/tree.js                          |  14 --
 vue/src/view/app/common/ListPage/index.vue    |  38 +++--
 vue/src/view/app/login/LoginForm.vue          |   6 +-
 vue/src/view/app/login/RegisterForm.vue       |   2 +-
 vue/src/view/message/manage/EditDialog.vue    |   2 +-
 vue/src/view/message/manage/indexPage.vue     | 108 ++++++------
 vue/src/view/message/user/MessageStream.vue   |   2 +-
 vue/src/view/purchase/inbound/indexPage.vue   |  30 ++--
 vue/src/view/purchase/order/indexPage.vue     |  38 ++---
 vue/src/view/sell/order/indexPage.vue         |  38 ++---
 vue/src/view/sell/outbound/indexPage.vue      |  30 ++--
 vue/src/view/stock/current/indexPage.vue      |  19 +--
 vue/src/view/system/customer/EditDialog.vue   |   4 +-
 vue/src/view/system/customer/indexPage.vue    | 123 ++++++++------
 .../department/component/EditDialog.vue       |  18 +-
 vue/src/view/system/department/indexPage.vue  |  20 ++-
 vue/src/view/system/menu/indexPage.vue        |   6 +-
 vue/src/view/system/role/EditDialog.vue       |  17 +-
 vue/src/view/system/role/indexPage.vue        | 105 +++++++-----
 vue/src/view/system/supplier/EditDialog.vue   |   4 +-
 vue/src/view/system/supplier/indexPage.vue    | 123 ++++++++------
 .../view/system/user/component/EditDialog.vue |  13 +-
 vue/src/view/system/user/indexPage.vue        | 157 ++++++++++--------
 vue/src/view/userCenter/component/Account.vue |   2 +-
 41 files changed, 637 insertions(+), 542 deletions(-)
 delete mode 100644 vue/src/component/form/Search/item.vue
 create mode 100644 vue/src/util/element-ui/elForm.js
 create mode 100644 vue/src/util/element-ui/elTree.js
 delete mode 100644 vue/src/util/errorLog.js

diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index d7a7d70..1844cb2 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -181,12 +181,15 @@
 }
 
 .el-pagination {
-    padding-top: 20px;
     text-align: right;
 
     .el-pagination__editor.el-input {
         margin: 0 5px;
     }
+
+    .el-table + & {
+        padding-top: 20px;
+    }
 }
 
 .el-scrollbar {
diff --git a/vue/src/asset/style/index.scss b/vue/src/asset/style/index.scss
index 88cf8b1..9404486 100644
--- a/vue/src/asset/style/index.scss
+++ b/vue/src/asset/style/index.scss
@@ -1,3 +1,4 @@
+@import "~normalize.css/normalize.css";
 @import "./variables";
 @import "~element-ui/packages/theme-chalk/src/index";
 @import "~@ele/style/index.scss";
@@ -54,7 +55,7 @@ a:hover {
 
         &-thumb {
             width: 6px;
-            border-radius: 5px;
+            //border-radius: 5px;
             background-color: rgba($--color-primary, 0.8);
 
             &:hover {
@@ -79,6 +80,7 @@ a:hover {
     align-content: space-between;
 }
 
+
 /*----------路由页面的最大高度开始----------*/
 $page-header-offsetHeight: $page-header-line-height + #{$page-view-margin * 2};
 
@@ -112,6 +114,7 @@ $page-header-offsetHeight: $page-header-line-height + #{$page-view-margin * 2};
 
 /*----------路由页面的最大高度结束----------*/
 
+
 .table-container {
     margin-top: 10px;
 }
diff --git a/vue/src/component/abstract/Pagination/index.vue b/vue/src/component/abstract/Pagination/index.vue
index 265ef8c..d33d97e 100644
--- a/vue/src/component/abstract/Pagination/index.vue
+++ b/vue/src/component/abstract/Pagination/index.vue
@@ -19,7 +19,6 @@ export default {
                 current-page={page}
                 page-size={pageSize}
                 total={total}
-                hide-on-single-page
                 layout="total, prev, pager, next, jumper"
                 {...context.data}
             />
diff --git a/vue/src/component/form/Search/index.vue b/vue/src/component/form/Search/index.vue
index b7ed5af..7668d7a 100644
--- a/vue/src/component/form/Search/index.vue
+++ b/vue/src/component/form/Search/index.vue
@@ -4,14 +4,11 @@ import {getElementInnerWidth} from '@/util/browser'
 export default {
     name: "SearchForm",
 
-    provide() {
-        return {
-            searchForm: this
-        }
-    },
-
     props: {
+        model: Object,
         labelWidth: {type: String, default: '120px'},
+
+        /*每个宽度下，一行能有多少个控件，需要是24的因数*/
         xs: {type: Number, default: 1}, // <768px
         sm: {type: Number, default: 2}, // >=768px
         md: {type: Number, default: 3}, // >=998px
@@ -20,10 +17,10 @@ export default {
 
     data() {
         return {
-            showCollapse: false,
-            collapse: true,
-            num: 0,
-            width: 'auto'
+            showCollapse: false, //是否需要折叠控制
+            collapse: true,      //是否处于折叠状态，默认折叠
+            num: 0,              //从第几个控件开始需要隐藏
+            span: 8              //24等分下，每个栅格的宽度
         }
     },
 
@@ -32,6 +29,18 @@ export default {
             this.collapse = !this.collapse
         },
 
+        handleSearch() {
+            this.$emit('search')
+        },
+
+        handleReset() {
+            if (!this.initialModel || !this.model) {
+                return
+            }
+
+            this.$emit('reset')
+        },
+
         getElementNumInRow() {
             const vw = getElementInnerWidth(this.$el.parentNode)
 
@@ -43,13 +52,49 @@ export default {
 
         resize() {
             const num = this.getElementNumInRow()
-            this.num = num
-            this.width = `${100 / num}%`
-            this.showCollapse = num < this.$slots.default.length
+
+            this.span = 24 / num
+
+            //考虑后面的按钮组的占位
+            this.num = num === 1 ? num : num - 1
+            this.showCollapse = this.num < this.$slots.default.length
+        },
+
+        renderChildren(children, hide) {
+            return children.map(child => (
+                <el-col span={this.span} class={{hide}}>{child}</el-col>
+            ))
+        },
+
+        renderAction() {
+            const ctrl = this.collapse
+                ? {i: 'el-icon-arrow-down', t: '展开'}
+                : {i: 'el-icon-arrow-up', t: '收起'}
+
+            return (
+                <div class="search-form-action">
+                    <el-button type="primary" size="small" on-click={this.handleSearch}>查 询</el-button>
+                    <el-button type="dashed" size="small" plain on-click={this.handleReset}>重 置</el-button>
+                    {this.showCollapse && (
+                        <el-button
+                            type="text"
+                            size="small"
+                            style="padding-left: 0"
+                            on-click={this.handleCollapse}
+                        >
+                            {ctrl.t}
+                            <v-icon icon={ctrl.i} style="margin-left: 0.5em"/>
+                        </el-button>
+                    )}
+                </div>
+            )
         }
     },
 
     mounted() {
+        //记录初始条件
+        this.initialModel = this.model
+
         this.resize()
         this.resizeObserver = new ResizeObserver(() => this.resize())
         this.resizeObserver.observe(this.$el.parentNode)
@@ -63,50 +108,24 @@ export default {
     },
 
     render() {
-        const slots = this.$slots.default
-        const collapseChildren = []
-        if (this.showCollapse) {
-            //此处直接对el-row使用v-show会无效
-            collapseChildren.push(
-                <el-collapse-transition>
-                    <div v-show={!this.collapse}>
-                        <el-row gutter={20}>
-                            {slots.slice(this.num)}
-                        </el-row>
-                    </div>
-                </el-collapse-transition>
-            )
-            const collapseSlot = this.$scopedSlots.collapse
+        const slots = this.$slots.default, collapse = this.showCollapse && this.collapse
 
-            collapseChildren.push(
-                collapseSlot ?
-                    collapseSlot({collapse: this.collapse, handle: this.handleCollapse})
-                    :
-                    <div class="searchForm__collapse">
-                        <el-button
-                            type="text"
-                            size="mini"
-                            icon={this.collapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'}
-                            on-click={this.handleCollapse}
-                        >
-                            {this.collapse ? '展开' : '收起'}
-                        </el-button>
-                    </div>
-            )
-        }
+        const display = collapse ? slots.slice(0, this.num) : slots
+        const hidden = collapse ? slots.slice(this.num) : []
 
         return (
             <el-form
-                class="searchForm"
+                class="search-form"
                 label-position="right"
                 label-width={this.labelWidth}
-                label-suffix="："
+                label-suffix=":"
                 size="small"
             >
                 <el-row gutter={20}>
-                    {this.num > slots.length ? slots : slots.slice(0, this.num)}
+                    {this.renderChildren(display)}
+                    {this.renderChildren(hidden, true)}
+                    {this.renderAction()}
                 </el-row>
-                {this.showCollapse && collapseChildren}
             </el-form>
         )
     }
@@ -114,8 +133,10 @@ export default {
 </script>
 
 <style lang="scss">
-.searchForm {
-    margin-bottom: -15px;
+.search-form {
+    &-action {
+        margin-left: auto;
+    }
 
     > .el-row {
         display: flex;
@@ -123,11 +144,8 @@ export default {
         flex-wrap: wrap;
     }
 
-    .searchForm__collapse {
-        position: relative;
-        bottom: 20px;
-        margin: 0 auto;
-        text-align: center;
+    .hide {
+        display: none;
     }
 }
 </style>
diff --git a/vue/src/component/form/Search/item.vue b/vue/src/component/form/Search/item.vue
deleted file mode 100644
index 730bf5f..0000000
--- a/vue/src/component/form/Search/item.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script type="text/jsx">
-export default {
-    name: "SearchFormItem",
-
-    inject: {
-        searchForm: {
-            default: () => ({width: 'auto'})
-        }
-    },
-
-    props: {label: String},
-
-    render() {
-        const {width} = this.searchForm
-        return (
-            <el-col style={{width}} span={100}>
-                <el-form-item label={this.label}>
-                    {this.$slots.default}
-                </el-form-item>
-            </el-col>
-        )
-    }
-}
-</script>
diff --git a/vue/src/component/form/ValidateInfo/index.vue b/vue/src/component/form/ValidateInfo/index.vue
index df9690b..78fae81 100644
--- a/vue/src/component/form/ValidateInfo/index.vue
+++ b/vue/src/component/form/ValidateInfo/index.vue
@@ -58,12 +58,7 @@ export default {
         },
 
         getFormRef() {
-            let ref = this.form
-            if (!ref) return
-            if (typeof ref === 'function') {
-                ref = ref()
-            }
-            return ref
+            return typeof this.form === 'function' ? this.form() : this.form
         },
 
         findFormItem(prop) {
diff --git a/vue/src/config/index.js b/vue/src/config/index.js
index fc0a809..a2689e1 100644
--- a/vue/src/config/index.js
+++ b/vue/src/config/index.js
@@ -23,9 +23,6 @@ module.exports = {
     //侧边栏顶上的logo地址
     sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
 
-    //是否使用错误日志捕捉，暂时没啥用
-    errorLog: true,
-
     //路由配置
     route: {
         //路由模式，['hash','history']
diff --git a/vue/src/globalMethod/Guide/main.vue b/vue/src/globalMethod/Guide/main.vue
index 6a8804d..25deb3b 100644
--- a/vue/src/globalMethod/Guide/main.vue
+++ b/vue/src/globalMethod/Guide/main.vue
@@ -122,7 +122,7 @@ export default {
             if (this.beforeExit) {
                 const result = this.beforeExit(this.hasDone)
                 if (result && result.then) {
-                    result.then(() => this.$_clear())
+                    result.then(this.$_clear)
                 }
                 else result !== false && this.$_clear()
                 return
@@ -138,7 +138,7 @@ export default {
             if (this.step.onPrevious) {
                 const result = this.step.onPrevious()
                 if (result && result.then) {
-                    result.then(() => this.$_movePrevious())
+                    result.then(this.$_movePrevious)
                 }
                 else result !== false && this.$_movePrevious()
             }
@@ -152,7 +152,7 @@ export default {
             if (this.step.onNext) {
                 const result = this.step.onNext()
                 if (result && result.then) {
-                    result.then(() => this.$_moveNext())
+                    result.then(this.$_moveNext)
                 }
                 else result !== false && this.$_moveNext()
             }
diff --git a/vue/src/globalMethod/Verify/main.vue b/vue/src/globalMethod/Verify/main.vue
index 3e82a14..8d75215 100644
--- a/vue/src/globalMethod/Verify/main.vue
+++ b/vue/src/globalMethod/Verify/main.vue
@@ -140,7 +140,7 @@ export default {
         },
 
         refresh() {
-            this.initImage().then(() => this.initCanvas())
+            this.initImage().then(this.initCanvas)
         },
 
         initCanvas() {
@@ -322,7 +322,7 @@ export default {
     },
 
     mounted() {
-        this.initImage().then(() => this.initCanvas())
+        this.refresh()
     },
 }
 </script>
diff --git a/vue/src/main.js b/vue/src/main.js
index ed7cab4..ce8e863 100644
--- a/vue/src/main.js
+++ b/vue/src/main.js
@@ -1,13 +1,11 @@
 import Vue from 'vue'
-import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
 import ElementPersonal from '@ele'
-import '@/asset/style/index.scss' // global css
+import '@/asset/style/index.scss'
 import App from '@/App'
 import store from '@/store'
 import router from '@/router'
 import '@/asset/icon'
-import '@/util/errorLog'
 import '@/directive'
 import filters from './filter'
 import globalMethod from '@/globalMethod'
diff --git a/vue/src/mixin/chart/logic.js b/vue/src/mixin/chart/logic.js
index d75ab6f..9b4e147 100644
--- a/vue/src/mixin/chart/logic.js
+++ b/vue/src/mixin/chart/logic.js
@@ -14,8 +14,7 @@ export default {
 
     data() {
         return {
-            loading: false,
-            chart: null
+            loading: false
         }
     },
 
diff --git a/vue/src/mixin/docTableMixin.js b/vue/src/mixin/docTableMixin.js
index ab0bce3..ea450ac 100644
--- a/vue/src/mixin/docTableMixin.js
+++ b/vue/src/mixin/docTableMixin.js
@@ -1,5 +1,4 @@
 import tableMixin from '@/mixin/tablePageMixin'
-import SearchFormItem from "@/component/form/Search/item"
 import LinerProgress from '@/component/LinerProgress'
 import ListPage from '@/view/app/common/ListPage'
 import {isEmpty} from "@/util"
@@ -35,7 +34,7 @@ export const commonMethods = {
 export default {
     mixins: [tableMixin],
 
-    components: {SearchFormItem, LinerProgress, ListPage},
+    components: {LinerProgress, ListPage},
 
     data() {
         return {
@@ -69,24 +68,26 @@ export default {
             return auth(this.api.exportExcel.url)
         },
 
-        buttonGroup() {
-            return [
-                {icon: 'el-icon-search', type: 'primary', e: this.search, content: '查 询'},
-                this.canAdd && {icon: 'el-icon-plus', type: 'primary', e: this.add, content: '添 加'},
-                {icon: 'el-icon-view', type: 'primary', e: this.see, content: '查 看'},
-                this.canUpdate && {icon: 'el-icon-edit', type: 'primary', e: this.edit, content: '编 辑'},
-                this.canDel && {icon: 'el-icon-delete', type: 'danger', e: this.del, content: '删 除'},
-                this.canExport && {icon: 'el-icon-download', type: 'info', e: this.downloadExcel, content: '导 出'}
-            ]
-        },
         listPageConfig() {
             return {
-                loading: this.config.loading,
-                tableConfig: {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'},
+                    this.canExport && {icon: 'el-icon-download', e: this.downloadExcel, content: '导 出'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
                     props: {data: this.tableData},
                     on: {'row-click': this.rowClick, 'expand-change': this.getSubList}
                 },
-                paginationConfig: {
+                pagination: {
                     props: {model: this.searchForm},
                     on: {'current-change': this.pageChange}
                 }
diff --git a/vue/src/util/element-ui/elForm.js b/vue/src/util/element-ui/elForm.js
new file mode 100644
index 0000000..e69de29
diff --git a/vue/src/util/element-ui/elTree.js b/vue/src/util/element-ui/elTree.js
new file mode 100644
index 0000000..13346ae
--- /dev/null
+++ b/vue/src/util/element-ui/elTree.js
@@ -0,0 +1,21 @@
+/**
+ * @desc el-tree展开折叠控制
+ * @param ref      el-tree实例
+ * @param action  'expand' | 'collapse'
+ * @param level   展开的节点最大深度，为0时匹配全部节点
+ * @param func    自定义展开的函数，传入一个node，优先使用
+ */
+export function expandControl(ref, action = 'expand', level = 1, func) {
+    const handler = function () {
+        if (typeof func === 'function') {
+            return node => func(node)
+        }
+
+        const expand = action === 'expand'
+        const forAll = level === 0
+
+        return node => node.expanded = forAll || node.level <= level ? expand : !expand
+    }()
+
+    ref.store._getAllNodes().forEach(handler)
+}
diff --git a/vue/src/util/errorLog.js b/vue/src/util/errorLog.js
deleted file mode 100644
index 598766b..0000000
--- a/vue/src/util/errorLog.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import {errorLog} from '@/config'
-
-if (errorLog) {
-    Vue.config.errorHandler = function (err, vm, info, a) {
-        //忽略image-viewer错误
-        if (err.message === `Cannot read property 'complete' of undefined`) return
-        /*store.commit('errorLog/ADD_ERROR_LOG', {
-            err,
-            info,
-            url: window.location.href
-        })*/
-        console.error('这是vue捕捉到的异常', err, info)
-    }
-}
diff --git a/vue/src/util/file.js b/vue/src/util/file.js
index d5edcd4..f24ab4a 100644
--- a/vue/src/util/file.js
+++ b/vue/src/util/file.js
@@ -63,6 +63,6 @@ export function upload(blob, filename, options = {}) {
 //自动补全附件链接前缀
 export function autoCompleteUrl(url) {
     if (isEmpty(url)) return ''
-    if (['http', 'https'].some(i => url.startsWith(i))) return url
+    if (url.startsWith('http')) return url
     return fileConfig.storePrefix + url
 }
diff --git a/vue/src/util/secret.js b/vue/src/util/secret.js
index ada8f32..73da95b 100644
--- a/vue/src/util/secret.js
+++ b/vue/src/util/secret.js
@@ -1,4 +1,7 @@
 import pako from 'pako'
+import md5 from 'js-md5'
+
+export {md5}
 
 export function unzip(b64Data) {
     let strData = atob(b64Data)
diff --git a/vue/src/util/tree.js b/vue/src/util/tree.js
index aded145..ec3861a 100644
--- a/vue/src/util/tree.js
+++ b/vue/src/util/tree.js
@@ -132,20 +132,6 @@ export function calc(node, valueKey = 'value', childrenKey = 'children') {
     return value
 }
 
-/**
- * el-tree展开收缩
- * 有兴趣的可以研究下怎么平滑展开收缩
- * @param ref el-tree实例
- * @param action expand | collapse
- * @param level 展开的节点最大深度，为0时匹配全部节点
- */
-export function elTreeControl(ref, action = 'expand', level = 1) {
-    ref.store._getAllNodes().forEach(node => {
-        const value = action === 'expand'
-        node.expanded = level === 0 || node.level <= level ? value : !value
-    })
-}
-
 export function getNodeId(arr) {
     if (!arr) return []
 
diff --git a/vue/src/view/app/common/ListPage/index.vue b/vue/src/view/app/common/ListPage/index.vue
index fd33622..9225339 100644
--- a/vue/src/view/app/common/ListPage/index.vue
+++ b/vue/src/view/app/common/ListPage/index.vue
@@ -2,18 +2,32 @@
 import AbstractTable from "@/component/abstract/Table"
 import AbstractPagination from "@/component/abstract/Pagination"
 import SearchForm from "@/component/form/Search"
+import {isEmpty} from "@/util"
 
-const renderSearchForm = (h, slot) => {
-    return slot && <SearchForm>{slot()}</SearchForm>
+const renderSearchForm = (h, config, slot) => {
+    return slot && <SearchForm {...config}>{slot()}</SearchForm>
 }
 
 const renderButtons = (h, buttons) => {
+    if (buttons.length > 0 && isEmpty(buttons[0].type)) {
+        buttons[0].type = 'primary'
+    }
     return (
         <el-row class="button-group">
             {buttons.map(button => {
                 if (!button) return
                 const {icon, type, content, e} = button
-                return <el-button icon={icon} size="small" type={type} on-click={e}>{content}</el-button>
+                return (
+                    <el-button
+                        icon={icon}
+                        size="small"
+                        plain={isEmpty(type)}
+                        type={type || 'dashed'}
+                        on-click={e}
+                    >
+                        {content}
+                    </el-button>
+                )
             })}
         </el-row>
     )
@@ -34,19 +48,23 @@ export default {
     functional: true,
 
     props: {
-        loading: Boolean,
-        buttons: {type: Array, default: () => []},
-        list: Object
+        data: Object
     },
 
     render(h, context) {
-        const {props: {loading, buttons, list}, scopedSlots} = context
+        const {props: {data: {pageLoading, buttons, dataLoading, search, table, pagination}}, scopedSlots} = context
 
         return (
-            <el-card v-loading={loading}>
-                {renderSearchForm(h, scopedSlots.searchForm)}
+            <el-card v-loading={pageLoading}>
+                {renderSearchForm(h, search, scopedSlots.searchForm)}
                 {renderButtons(h, buttons)}
-                {renderList(h, {...list, tableColumn: scopedSlots.tableColumn})}
+                {renderList(h, {
+                    loading: dataLoading,
+                    tableConfig: table,
+                    tableColumn: scopedSlots.tableColumn,
+                    paginationConfig: pagination
+                })}
+                {scopedSlots.default && scopedSlots.default()}
             </el-card>
         )
     }
diff --git a/vue/src/view/app/login/LoginForm.vue b/vue/src/view/app/login/LoginForm.vue
index a1d176a..b4e5cf7 100644
--- a/vue/src/view/app/login/LoginForm.vue
+++ b/vue/src/view/app/login/LoginForm.vue
@@ -54,9 +54,9 @@
 </template>
 
 <script>
-import md5 from "js-md5"
-import {elSuccess} from "@/util/message"
 import {isEmpty} from "@/util"
+import {elSuccess} from "@/util/message"
+import {md5} from "@/util/secret"
 
 export default {
     name: "LoginForm",
@@ -94,7 +94,7 @@ export default {
                         ...this.form,
                         password: md5(this.form.password)
                     }))
-                    .then(() => this.success())
+                    .then(this.success)
                     .catch(() => this.loading = false)
             })
         },
diff --git a/vue/src/view/app/login/RegisterForm.vue b/vue/src/view/app/login/RegisterForm.vue
index 3429f67..d9b4ef3 100644
--- a/vue/src/view/app/login/RegisterForm.vue
+++ b/vue/src/view/app/login/RegisterForm.vue
@@ -53,10 +53,10 @@
 </template>
 
 <script>
-import md5 from "js-md5"
 import {register, checkLoginName, checkNickName} from "@/api/account"
 import {debounce} from "@/util"
 import {elSuccess} from "@/util/message"
+import {md5} from "@/util/secret"
 
 export default {
     name: "RegisterForm",
diff --git a/vue/src/view/message/manage/EditDialog.vue b/vue/src/view/message/manage/EditDialog.vue
index ea14ba4..1c3a925 100644
--- a/vue/src/view/message/manage/EditDialog.vue
+++ b/vue/src/view/message/manage/EditDialog.vue
@@ -71,7 +71,7 @@ export default {
     components: {AbstractForm, AbstractFormItem, AbstractDialog, RichTextEditor, UserSelector},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'see'},
         data: {type: Object, default: () => ({})}
     },
diff --git a/vue/src/view/message/manage/indexPage.vue b/vue/src/view/message/manage/indexPage.vue
index 69395fd..743116d 100644
--- a/vue/src/view/message/manage/indexPage.vue
+++ b/vue/src/view/message/manage/indexPage.vue
@@ -1,66 +1,53 @@
 <template>
-    <el-card v-loading="config.operating">
-        <search-form>
-            <search-form-item label="标 题">
+    <list-page :data="listPageConfig">
+        <template v-slot:searchForm>
+            <el-form-item label="标 题">
                 <el-input v-model="searchForm.title" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="消息类型">
+            </el-form-item>
+            <el-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 label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="searchForm.status" clearable @clear="searchForm.status=null">
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="已发布"/>
                     <el-option :value="2" label="已撤回"/>
                 </el-select>
-            </search-form-item>
-        </search-form>
-
-        <el-row class="button-group">
-            <el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button>
-            <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
-            <el-button icon="el-icon-view" size="small" type="primary" @click="see">查 看</el-button>
-            <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
-            <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">
-            <abstract-table :data="tableData" @row-click="rowClick">
-                <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>
-                    <template v-slot="{row}">{{ row.type === 0 ? '通知提醒' : '系统公告' }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="通知对象" show-overflow-tooltip>
-                    <template v-slot="{row}">{{ row.broadcast ? '全体用户' : '指定用户' }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="状 态" show-overflow-tooltip>
-                    <template v-slot="{row}">{{ transformStatus(row.status) }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="发布人" prop="pname" show-overflow-tooltip/>
-                <el-table-column align="center" label="发布时间" width="150">
-                    <template v-slot="{row}">{{ row.ptime | timestamp2Date }}</template>
-                </el-table-column>
-            </abstract-table>
-
-            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
-        </el-row>
+            </el-form-item>
+        </template>
+
+        <template v-slot:tableColumn>
+            <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>
+                <template v-slot="{row}">{{ row.type === 0 ? '通知提醒' : '系统公告' }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="通知对象" show-overflow-tooltip>
+                <template v-slot="{row}">{{ row.broadcast ? '全体用户' : '指定用户' }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="状 态" show-overflow-tooltip>
+                <template v-slot="{row}">{{ transformStatus(row.status) }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="发布人" prop="pname" show-overflow-tooltip/>
+            <el-table-column align="center" label="发布时间" width="150">
+                <template v-slot="{row}">{{ row.ptime | timestamp2Date }}</template>
+            </el-table-column>
+        </template>
 
         <edit-dialog v-model="editDialog" :data="row" :type.sync="type" @search="search"/>
-    </el-card>
+    </list-page>
 </template>
 
 <script>
 import tableMixin from '@/mixin/tablePageMixin'
 import EditDialog from './EditDialog'
-import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
+import ListPage from '@/view/app/common/ListPage'
 import {search, add, update, del} from "@/api/message/manage"
 import {isEmpty} from '@/util'
-import {auth} from "@/util/auth"
+import {wic} from "@/util/auth"
 import {elConfirm, elError, elSuccess} from "@/util/message"
 
 export default {
@@ -68,7 +55,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {EditDialog, SearchForm, SearchFormItem},
+    components: {EditDialog, ListPage},
 
     data() {
         return {
@@ -84,14 +71,31 @@ export default {
     },
 
     computed: {
-        canAdd() {
-            return auth(add.url)
-        },
-        canUpdate() {
-            return auth(update.url)
-        },
-        canDel() {
-            return auth(del.url)
+        ...wic({add, update, del}),
+
+        listPageConfig() {
+            return {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
+                    props: {data: this.tableData},
+                    on: {'row-click': this.rowClick}
+                },
+                pagination: {
+                    props: {model: this.searchForm},
+                    on: {'current-change': this.pageChange}
+                }
+            }
         }
     },
 
diff --git a/vue/src/view/message/user/MessageStream.vue b/vue/src/view/message/user/MessageStream.vue
index 1682f05..fa14ef4 100644
--- a/vue/src/view/message/user/MessageStream.vue
+++ b/vue/src/view/message/user/MessageStream.vue
@@ -132,7 +132,7 @@ export default {
         },
 
         readAll() {
-            readAll.request().then(() => this.search())
+            readAll.request().then(this.search)
         },
 
         transformType(type) {
diff --git a/vue/src/view/purchase/inbound/indexPage.vue b/vue/src/view/purchase/inbound/indexPage.vue
index ddeb280..fe714e8 100644
--- a/vue/src/view/purchase/inbound/indexPage.vue
+++ b/vue/src/view/purchase/inbound/indexPage.vue
@@ -1,16 +1,16 @@
 <template>
-    <list-page :loading="config.operating" :buttons="buttonGroup" :list="listPageConfig">
+    <list-page :data="listPageConfig">
         <template v-slot:searchForm>
-            <search-form-item label="单 号">
+            <el-form-item label="单 号">
                 <el-input v-model="searchForm.idFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="采购订单">
+            </el-form-item>
+            <el-form-item label="采购订单">
                 <el-input v-model="searchForm.pidFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建人">
+            </el-form-item>
+            <el-form-item label="创建人">
                 <el-input v-model="searchForm.cname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -18,11 +18,11 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="审核人">
+            </el-form-item>
+            <el-form-item label="审核人">
                 <el-input v-model="searchForm.vname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="审核时间">
+            </el-form-item>
+            <el-form-item label="审核时间">
                 <el-date-picker
                     v-model="temp.vtime"
                     format="yyyy-MM-dd"
@@ -30,14 +30,14 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="temp.status" clearable multiple>
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="待审核"/>
                     <el-option :value="2" label="已审核"/>
                 </el-select>
-            </search-form-item>
+            </el-form-item>
         </template>
         <template v-slot:tableColumn>
             <el-table-column align="center" type="expand">
diff --git a/vue/src/view/purchase/order/indexPage.vue b/vue/src/view/purchase/order/indexPage.vue
index 37a5bec..2fb2766 100644
--- a/vue/src/view/purchase/order/indexPage.vue
+++ b/vue/src/view/purchase/order/indexPage.vue
@@ -1,16 +1,16 @@
 <template>
-    <list-page :loading="config.operating" :buttons="buttonGroup" :list="listPageConfig">
+    <list-page :data="listPageConfig">
         <template v-slot:searchForm>
-            <search-form-item label="单 号">
+            <el-form-item label="单 号">
                 <el-input v-model="searchForm.idFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="供应商">
+            </el-form-item>
+            <el-form-item label="供应商">
                 <el-input v-model="searchForm.sname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建人">
+            </el-form-item>
+            <el-form-item label="创建人">
                 <el-input v-model="searchForm.cname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -18,11 +18,11 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="审核人">
+            </el-form-item>
+            <el-form-item label="审核人">
                 <el-input v-model="searchForm.vname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="审核时间">
+            </el-form-item>
+            <el-form-item label="审核时间">
                 <el-date-picker
                     v-model="temp.vtime"
                     format="yyyy-MM-dd"
@@ -30,22 +30,22 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="temp.status" clearable multiple>
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="待审核"/>
                     <el-option :value="2" label="已审核"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="完成情况">
+            </el-form-item>
+            <el-form-item label="完成情况">
                 <el-select v-model="temp.finish" clearable multiple>
                     <el-option :value="0" label="未开始"/>
                     <el-option :value="1" label="进行中"/>
                     <el-option :value="2" label="已完成"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="结束时间">
+            </el-form-item>
+            <el-form-item label="结束时间">
                 <el-date-picker
                     v-model="temp.ftime"
                     format="yyyy-MM-dd"
@@ -53,7 +53,7 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
+            </el-form-item>
         </template>
         <template v-slot:tableColumn>
             <el-table-column align="center" type="expand">
diff --git a/vue/src/view/sell/order/indexPage.vue b/vue/src/view/sell/order/indexPage.vue
index c9a1b69..92bd747 100644
--- a/vue/src/view/sell/order/indexPage.vue
+++ b/vue/src/view/sell/order/indexPage.vue
@@ -1,16 +1,16 @@
 <template>
-    <list-page :loading="config.operating" :buttons="buttonGroup" :list="listPageConfig">
+    <list-page :data="listPageConfig">
         <template v-slot:searchForm>
-            <search-form-item label="单 号">
+            <el-form-item label="单 号">
                 <el-input v-model="searchForm.idFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="客 户">
+            </el-form-item>
+            <el-form-item label="客 户">
                 <el-input v-model="searchForm.customerName" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建人">
+            </el-form-item>
+            <el-form-item label="创建人">
                 <el-input v-model="searchForm.cname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -18,11 +18,11 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="审核人">
+            </el-form-item>
+            <el-form-item label="审核人">
                 <el-input v-model="searchForm.vname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="审核时间">
+            </el-form-item>
+            <el-form-item label="审核时间">
                 <el-date-picker
                     v-model="temp.vtime"
                     format="yyyy-MM-dd"
@@ -30,22 +30,22 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="temp.status" clearable multiple>
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="待审核"/>
                     <el-option :value="2" label="已审核"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="完成情况">
+            </el-form-item>
+            <el-form-item label="完成情况">
                 <el-select v-model="temp.finish" clearable multiple>
                     <el-option :value="0" label="未开始"/>
                     <el-option :value="1" label="进行中"/>
                     <el-option :value="2" label="已完成"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="结束时间">
+            </el-form-item>
+            <el-form-item label="结束时间">
                 <el-date-picker
                     v-model="temp.ftime"
                     format="yyyy-MM-dd"
@@ -53,7 +53,7 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
+            </el-form-item>
         </template>
         <template v-slot:tableColumn>
             <el-table-column align="center" type="expand">
diff --git a/vue/src/view/sell/outbound/indexPage.vue b/vue/src/view/sell/outbound/indexPage.vue
index 5f42d1e..db05c64 100644
--- a/vue/src/view/sell/outbound/indexPage.vue
+++ b/vue/src/view/sell/outbound/indexPage.vue
@@ -1,16 +1,16 @@
 <template>
-    <list-page :loading="config.operating" :buttons="buttonGroup" :list="listPageConfig">
+    <list-page :data="listPageConfig">
         <template v-slot:searchForm>
-            <search-form-item label="单 号">
+            <el-form-item label="单 号">
                 <el-input v-model="searchForm.idFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="销售订单">
+            </el-form-item>
+            <el-form-item label="销售订单">
                 <el-input v-model="searchForm.pidFuzzy" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建人">
+            </el-form-item>
+            <el-form-item label="创建人">
                 <el-input v-model="searchForm.cname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -18,11 +18,11 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="审核人">
+            </el-form-item>
+            <el-form-item label="审核人">
                 <el-input v-model="searchForm.vname" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="审核时间">
+            </el-form-item>
+            <el-form-item label="审核时间">
                 <el-date-picker
                     v-model="temp.vtime"
                     format="yyyy-MM-dd"
@@ -30,14 +30,14 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="temp.status" clearable multiple>
                     <el-option :value="0" label="拟定"/>
                     <el-option :value="1" label="待审核"/>
                     <el-option :value="2" label="已审核"/>
                 </el-select>
-            </search-form-item>
+            </el-form-item>
         </template>
         <template v-slot:tableColumn>
             <el-table-column align="center" type="expand">
diff --git a/vue/src/view/stock/current/indexPage.vue b/vue/src/view/stock/current/indexPage.vue
index 79b1242..3da73d4 100644
--- a/vue/src/view/stock/current/indexPage.vue
+++ b/vue/src/view/stock/current/indexPage.vue
@@ -15,16 +15,16 @@
             </template>
 
             <search-form>
-                <search-form-item label="商品分类">
+                <el-form-item label="商品分类">
                     <el-input :value="temp.cname" maxlength="100" clearable @clear="clearCidSearch"/>
-                </search-form-item>
-                <search-form-item label="采购订单">
+                </el-form-item>
+                <el-form-item label="采购订单">
                     <el-input v-model="searchForm.cgddid" maxlength="100" clearable/>
-                </search-form-item>
-                <search-form-item label="采购入库单">
+                </el-form-item>
+                <el-form-item label="采购入库单">
                     <el-input v-model="searchForm.cgrkid" maxlength="100" clearable/>
-                </search-form-item>
-                <search-form-item label="入库时间">
+                </el-form-item>
+                <el-form-item label="入库时间">
                     <el-date-picker
                         v-model="temp.ctime"
                         format="yyyy-MM-dd"
@@ -32,7 +32,7 @@
                         type="daterange"
                         value-format="timestamp"
                     />
-                </search-form-item>
+                </el-form-item>
             </search-form>
 
             <el-row class="button-group">
@@ -69,7 +69,6 @@ import CategoryTree from '@/component/biz/CategoryTree'
 import DetailDialog from "./DetailDialog"
 import ExtraArea from '@/component/ExtraArea'
 import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
 import {search} from "@/api/stock/current"
 import {isEmpty, debounce} from "@/util"
 import {exportExcel} from "@/util/excel"
@@ -81,7 +80,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {CategoryTree, DetailDialog, ExtraArea, SearchForm, SearchFormItem},
+    components: {CategoryTree, DetailDialog, ExtraArea, SearchForm},
 
     data() {
         return {
diff --git a/vue/src/view/system/customer/EditDialog.vue b/vue/src/view/system/customer/EditDialog.vue
index ef8e9d2..2632c3e 100644
--- a/vue/src/view/system/customer/EditDialog.vue
+++ b/vue/src/view/system/customer/EditDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
-        <abstract-form :model="form" :rules="rules" size="">
+        <abstract-form :model="form" :rules="rules">
             <el-form-item label="名 称" prop="name">
                 <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
             </el-form-item>
@@ -63,7 +63,7 @@ export default {
     components: {AbstractForm, AbstractDialog, RegionSelector},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'see'},
         data: {
             type: Object,
diff --git a/vue/src/view/system/customer/indexPage.vue b/vue/src/view/system/customer/indexPage.vue
index 43251a5..38aa210 100644
--- a/vue/src/view/system/customer/indexPage.vue
+++ b/vue/src/view/system/customer/indexPage.vue
@@ -1,10 +1,10 @@
 <template>
-    <el-card v-loading="config.operating">
-        <search-form>
-            <search-form-item label="客 户">
+    <list-page :data="listPageConfig">
+        <template v-slot:searchForm>
+            <el-form-item label="客 户">
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="行政区域">
+            </el-form-item>
+            <el-form-item label="行政区域">
                 <region-selector
                     :value="temp.regionName"
                     limit
@@ -13,23 +13,23 @@
                     @clear="clearSidSearch"
                     @select="selectRegion"
                 />
-            </search-form-item>
-            <search-form-item label="地 址">
+            </el-form-item>
+            <el-form-item label="地 址">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="联系人">
+            </el-form-item>
+            <el-form-item label="联系人">
                 <el-input v-model="searchForm.linkman" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="联系电话">
+            </el-form-item>
+            <el-form-item label="联系电话">
                 <el-input v-model="searchForm.linkphone" clearable maxlength="20"/>
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null">
                     <el-option :value="true" label="启用"/>
                     <el-option :value="false" label="禁用"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -37,48 +37,36 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-        </search-form>
-
-        <el-row class="button-group">
-            <el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button>
-            <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
-            <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
-            <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">
-            <abstract-table :data="tableData" @row-click="rowClick">
-                <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="regionName" show-overflow-tooltip/>
-                <el-table-column align="center" label="地 址" prop="address" show-overflow-tooltip/>
-                <el-table-column align="center" label="联系人" prop="linkman" show-overflow-tooltip/>
-                <el-table-column align="center" label="联系电话" prop="linkphone" show-overflow-tooltip/>
-                <el-table-column align="center" label="创建时间" width="150">
-                    <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="状 态" width="120">
-                    <template v-slot="{row}">
-                        <span :class="row.enable ? 'success' : 'error'" class="dot"/>
-                        <span>{{ row.enable ? '启用' : '禁用' }}</span>
-                    </template>
-                </el-table-column>
-            </abstract-table>
-
-            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
-        </el-row>
+            </el-form-item>
+        </template>
+
+        <template v-slot:tableColumn>
+            <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="regionName" show-overflow-tooltip/>
+            <el-table-column align="center" label="地 址" prop="address" show-overflow-tooltip/>
+            <el-table-column align="center" label="联系人" prop="linkman" show-overflow-tooltip/>
+            <el-table-column align="center" label="联系电话" prop="linkphone" show-overflow-tooltip/>
+            <el-table-column align="center" label="创建时间" width="150">
+                <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="状 态" width="120">
+                <template v-slot="{row}">
+                    <span :class="row.enable ? 'success' : 'error'" class="dot"/>
+                    <span>{{ row.enable ? '启用' : '禁用' }}</span>
+                </template>
+            </el-table-column>
+        </template>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-    </el-card>
+    </list-page>
 </template>
 
 <script>
 import tableMixin from '@/mixin/tablePageMixin'
+import ListPage from '@/view/app/common/ListPage'
 import EditDialog from './EditDialog'
 import RegionSelector from "@/component/RegionSelector"
-import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
 import {add, update, del, search, getLimitRegion} from "@/api/system/customer"
 import {isEmpty} from '@/util'
 import {wic} from "@/util/auth"
@@ -89,7 +77,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {EditDialog, RegionSelector, SearchForm, SearchFormItem},
+    components: {ListPage, EditDialog, RegionSelector},
 
     data() {
         return {
@@ -109,7 +97,34 @@ export default {
         }
     },
 
-    computed: wic({add, update, del}),
+    computed: {
+        ...wic({add, update, del}),
+
+        listPageConfig() {
+            return {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
+                    props: {data: this.tableData},
+                    on: {'row-click': this.rowClick}
+                },
+                pagination: {
+                    props: {model: this.searchForm},
+                    on: {'current-change': this.pageChange}
+                }
+            }
+        }
+    },
 
     methods: {
         getLimitRegion() {
@@ -153,6 +168,12 @@ export default {
             this.editDialog = true
         },
 
+        see() {
+            if (isEmpty(this.row)) return elError('请选择要查看的客户')
+            this.type = 'see'
+            this.editDialog = true
+        },
+
         edit() {
             if (isEmpty(this.row)) return elError('请选择要编辑的客户')
             this.type = 'edit'
diff --git a/vue/src/view/system/department/component/EditDialog.vue b/vue/src/view/system/department/component/EditDialog.vue
index 8b6b2a2..df0c85d 100644
--- a/vue/src/view/system/department/component/EditDialog.vue
+++ b/vue/src/view/system/department/component/EditDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
-        <abstract-form :model="form" :rules="rules" size="">
+        <abstract-form :model="form" :rules="rules">
             <el-form-item v-show="parentName" label="上级部门">
                 <el-input :value="parentName" readonly/>
             </el-form-item>
@@ -17,7 +17,7 @@
 
         <template v-slot:footer>
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
-            <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+            <el-button v-if="canEdit" size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
     </abstract-dialog>
 </template>
@@ -27,7 +27,7 @@ import dialogMixin from "@/mixin/dialogMixin"
 import AbstractForm from "@/component/abstract/Form"
 import AbstractDialog from '@/component/abstract/Dialog'
 import {add, update} from "@/api/system/department"
-import {isEmpty} from '@/util'
+import {isEmpty, mergeObj} from '@/util'
 import {elConfirm, elSuccess} from "@/util/message"
 
 export default {
@@ -38,7 +38,7 @@ export default {
     components: {AbstractForm, AbstractDialog},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'add'},
         data: {type: Object, default: () => ({})},
     },
@@ -81,6 +81,10 @@ export default {
             }
         },
 
+        canEdit() {
+            return ['add', 'edit'].includes(this.type)
+        },
+
         parentName() {
             if (!this.data) return ''
             if (this.type === 'add') return this.data.fullname
@@ -91,10 +95,8 @@ export default {
     methods: {
         open() {
             this.$nextTick(() => {
-                if (this.type === 'edit') {
-                    Object
-                        .keys(this.data)
-                        .forEach(key => key in this.form && (this.form[key] = this.data[key]))
+                if (this.type !== 'add') {
+                    mergeObj(this.form, this.data)
                 }
                 else this.form.pid = this.data.id
             })
diff --git a/vue/src/view/system/department/indexPage.vue b/vue/src/view/system/department/indexPage.vue
index e486865..f4d1278 100644
--- a/vue/src/view/system/department/indexPage.vue
+++ b/vue/src/view/system/department/indexPage.vue
@@ -83,13 +83,12 @@ export default {
         ...wic({add, update, del}),
 
         contextMenuItems() {
-            const items=[]
-
-            this.canAdd&&items.push({content:'添加部门',click:this.add})
-            this.canUpdate&&items.push({content:'编辑部门',click:this.update})
-            this.canDel&&items.push({content:'删除部门',click:this.del})
-
-            return items
+            return [
+                this.canAdd && {content: '添 加', click: this.add},
+                {content: '查 看', click: this.see},
+                this.canUpdate && {content: '编 辑', click: this.edit},
+                this.canDel && {content: '删 除', click: this.del}
+            ]
         },
 
         realZoom() {
@@ -131,7 +130,12 @@ export default {
             this.editDialog = true
         },
 
-        update() {
+        see() {
+            this.type = 'see'
+            this.editDialog = true
+        },
+
+        edit() {
             this.type = 'edit'
             this.editDialog = true
         },
diff --git a/vue/src/view/system/menu/indexPage.vue b/vue/src/view/system/menu/indexPage.vue
index b472796..48c2342 100644
--- a/vue/src/view/system/menu/indexPage.vue
+++ b/vue/src/view/system/menu/indexPage.vue
@@ -150,9 +150,9 @@ import AbstractForm from "@/component/abstract/Form"
 import JsonEditor from "@/component/editor/JsonEditor"
 import {add, update, del} from '@/api/system/resource'
 import {isEmpty, mergeObj, resetObj} from "@/util"
-import {elSuccess, elError, elConfirm} from "@/util/message"
-import {elTreeControl} from "@/util/tree"
 import {wic} from "@/util/auth"
+import {expandControl} from "@/util/element-ui/elTree"
+import {elSuccess, elError, elConfirm} from "@/util/message"
 import {nodeType, getNodeInfo, getNodeTitle} from "./common"
 
 export default {
@@ -312,7 +312,7 @@ export default {
         },
         more({action, level}) {
             if (this.loading) return
-            elTreeControl(this.$refs.tree, action, level)
+            expandControl(this.$refs.tree, action, level)
         },
 
         init() {
diff --git a/vue/src/view/system/role/EditDialog.vue b/vue/src/view/system/role/EditDialog.vue
index 509f786..af4ce42 100644
--- a/vue/src/view/system/role/EditDialog.vue
+++ b/vue/src/view/system/role/EditDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <abstract-dialog :loading="loading" :title="title" :value="value" width="40%" @close="cancel" @open="open">
-        <abstract-form :model="form" :rules="rules" size="">
+        <abstract-form :model="form" :rules="rules">
             <el-form-item label="名 称" prop="name">
                 <el-input v-model="form.name" maxlength="20"/>
             </el-form-item>
@@ -56,7 +56,7 @@
                 </el-dropdown-menu>
             </el-dropdown>
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
-            <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+            <el-button v-if="canEdit" size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
     </abstract-dialog>
 </template>
@@ -68,7 +68,8 @@ import AbstractDialog from '@/component/abstract/Dialog'
 import {get as getDepartments} from "@/api/system/department"
 import {add, update} from "@/api/system/role"
 import {isEmpty, mergeObj} from '@/util'
-import {createTreeByWorker, elTreeControl} from '@/util/tree'
+import {expandControl} from "@/util/element-ui/elTree"
+import {createTreeByWorker} from '@/util/tree'
 import {getNodeTitle, getNodeInfo} from "@/view/system/menu/common"
 
 export default {
@@ -79,7 +80,7 @@ export default {
     components: {AbstractForm, AbstractDialog},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'add'},
         data: {type: Object, default: () => ({})},
     },
@@ -127,6 +128,10 @@ export default {
 
         resourceTree() {
             return this.$store.state.resource.resourceTree
+        },
+
+        canEdit() {
+            return ['add', 'edit'].includes(this.type)
         }
     },
 
@@ -134,10 +139,10 @@ export default {
         getNodeInfo,
         getNodeTitle,
         treeCommand({action, level}) {
-            elTreeControl(this.$refs.perm, action, level)
+            expandControl(this.$refs.perm, action, level)
         },
         open() {
-            if (this.type !== 'edit') return
+            if (this.type === 'add') return
             this.$nextTick(() => {
                 mergeObj(this.form, this.data)
                 this.$refs.perm.setCheckedKeys(this.form.resourceId)
diff --git a/vue/src/view/system/role/indexPage.vue b/vue/src/view/system/role/indexPage.vue
index bb93d55..0c03ba0 100644
--- a/vue/src/view/system/role/indexPage.vue
+++ b/vue/src/view/system/role/indexPage.vue
@@ -1,19 +1,19 @@
 <template>
-    <el-card v-loading="config.operating">
-        <search-form>
-            <search-form-item label="角色名">
+    <list-page :data="listPageConfig">
+        <template v-slot:searchForm>
+            <el-form-item label="角色名">
                 <el-input v-model="searchForm.name" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="创建人">
+            </el-form-item>
+            <el-form-item label="创建人">
                 <el-input v-model="searchForm.cname" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null">
                     <el-option :value="true" label="启用"/>
                     <el-option :value="false" label="禁用"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -21,44 +21,32 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-        </search-form>
-
-        <el-row class="button-group">
-            <el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button>
-            <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
-            <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
-            <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">
-            <abstract-table :data="tableData" @row-click="rowClick">
-                <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="cname" show-overflow-tooltip/>
-                <el-table-column align="center" label="创建时间" width="150">
-                    <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="状 态" width="120">
-                    <template v-slot="{row}">
-                        <span :class="row.enable ? 'success' : 'error'" class="dot"/>
-                        <span>{{ row.enable ? '启用' : '禁用' }}</span>
-                    </template>
-                </el-table-column>
-            </abstract-table>
-
-            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
-        </el-row>
+            </el-form-item>
+        </template>
+
+        <template v-slot:tableColumn>
+            <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="cname" show-overflow-tooltip/>
+            <el-table-column align="center" label="创建时间" width="150">
+                <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="状 态" width="120">
+                <template v-slot="{row}">
+                    <span :class="row.enable ? 'success' : 'error'" class="dot"/>
+                    <span>{{ row.enable ? '启用' : '禁用' }}</span>
+                </template>
+            </el-table-column>
+        </template>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-    </el-card>
+    </list-page>
 </template>
 
 <script>
 import tableMixin from '@/mixin/tablePageMixin'
+import ListPage from '@/view/app/common/ListPage'
 import EditDialog from './EditDialog'
-import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
 import {add, update, del, search} from "@/api/system/role"
 import {isEmpty} from '@/util'
 import {wic} from "@/util/auth"
@@ -69,7 +57,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {EditDialog, SearchForm, SearchFormItem},
+    components: {ListPage, EditDialog},
 
     data() {
         return {
@@ -85,7 +73,34 @@ export default {
         }
     },
 
-    computed: wic({add, update, del}),
+    computed: {
+        ...wic({add, update, del}),
+
+        listPageConfig() {
+            return {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
+                    props: {data: this.tableData},
+                    on: {'row-click': this.rowClick}
+                },
+                pagination: {
+                    props: {model: this.searchForm},
+                    on: {'current-change': this.pageChange}
+                }
+            }
+        }
+    },
 
     methods: {
         mergeSearchForm() {
@@ -125,6 +140,12 @@ export default {
             this.editDialog = true
         },
 
+        see() {
+            if (isEmpty(this.row)) return elError('请选择要查看的角色')
+            this.type = 'see'
+            this.editDialog = true
+        },
+
         edit() {
             if (!this.row) return elError('请选择要编辑的角色')
             this.type = 'edit'
diff --git a/vue/src/view/system/supplier/EditDialog.vue b/vue/src/view/system/supplier/EditDialog.vue
index a9858a1..b2a0d77 100644
--- a/vue/src/view/system/supplier/EditDialog.vue
+++ b/vue/src/view/system/supplier/EditDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
-        <abstract-form :model="form" :rules="rules" size="">
+        <abstract-form :model="form" :rules="rules">
             <el-form-item label="名 称" prop="name">
                 <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
             </el-form-item>
@@ -63,7 +63,7 @@ export default {
     components: {AbstractForm, AbstractDialog, RegionSelector},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'see'},
         data: {
             type: Object,
diff --git a/vue/src/view/system/supplier/indexPage.vue b/vue/src/view/system/supplier/indexPage.vue
index 4359de3..290bee2 100644
--- a/vue/src/view/system/supplier/indexPage.vue
+++ b/vue/src/view/system/supplier/indexPage.vue
@@ -1,10 +1,10 @@
 <template>
-    <el-card v-loading="config.operating">
-        <search-form>
-            <search-form-item label="供应商">
+    <list-page :data="listPageConfig">
+        <template v-slot:searchForm>
+            <el-form-item label="供应商">
                 <el-input v-model="searchForm.name" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="行政区域">
+            </el-form-item>
+            <el-form-item label="行政区域">
                 <region-selector
                     :value="temp.regionName"
                     limit
@@ -13,23 +13,23 @@
                     @clear="clearSidSearch"
                     @select="selectRegion"
                 />
-            </search-form-item>
-            <search-form-item label="地 址">
+            </el-form-item>
+            <el-form-item label="地 址">
                 <el-input v-model="searchForm.address" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="联系人">
+            </el-form-item>
+            <el-form-item label="联系人">
                 <el-input v-model="searchForm.linkman" clearable maxlength="50"/>
-            </search-form-item>
-            <search-form-item label="联系电话">
+            </el-form-item>
+            <el-form-item label="联系电话">
                 <el-input v-model="searchForm.linkphone" clearable maxlength="20"/>
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null">
                     <el-option :value="true" label="启用"/>
                     <el-option :value="false" label="禁用"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -37,48 +37,36 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-        </search-form>
-
-        <el-row class="button-group">
-            <el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button>
-            <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
-            <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
-            <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">
-            <abstract-table :data="tableData" @row-click="rowClick">
-                <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="regionName" show-overflow-tooltip/>
-                <el-table-column align="center" label="地 址" prop="address" show-overflow-tooltip/>
-                <el-table-column align="center" label="联系人" prop="linkman" show-overflow-tooltip/>
-                <el-table-column align="center" label="联系电话" prop="linkphone" show-overflow-tooltip/>
-                <el-table-column align="center" label="创建时间" width="150">
-                    <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="状 态" width="120">
-                    <template v-slot="{row}">
-                        <span :class="row.enable ? 'success' : 'error'" class="dot"/>
-                        <span>{{ row.enable ? '启用' : '禁用' }}</span>
-                    </template>
-                </el-table-column>
-            </abstract-table>
-
-            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
-        </el-row>
+            </el-form-item>
+        </template>
+
+        <template v-slot:tableColumn>
+            <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="regionName" show-overflow-tooltip/>
+            <el-table-column align="center" label="地 址" prop="address" show-overflow-tooltip/>
+            <el-table-column align="center" label="联系人" prop="linkman" show-overflow-tooltip/>
+            <el-table-column align="center" label="联系电话" prop="linkphone" show-overflow-tooltip/>
+            <el-table-column align="center" label="创建时间" width="150">
+                <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="状 态" width="120">
+                <template v-slot="{row}">
+                    <span :class="row.enable ? 'success' : 'error'" class="dot"/>
+                    <span>{{ row.enable ? '启用' : '禁用' }}</span>
+                </template>
+            </el-table-column>
+        </template>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-    </el-card>
+    </list-page>
 </template>
 
 <script>
 import tableMixin from '@/mixin/tablePageMixin'
+import ListPage from '@/view/app/common/ListPage'
 import EditDialog from './EditDialog'
 import RegionSelector from "@/component/RegionSelector"
-import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
 import {add, update, del, getLimitRegion, search} from "@/api/system/supplier"
 import {isEmpty} from '@/util'
 import {wic} from "@/util/auth"
@@ -89,7 +77,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {EditDialog, RegionSelector, SearchForm, SearchFormItem},
+    components: {ListPage,EditDialog, RegionSelector},
 
     data() {
         return {
@@ -109,7 +97,34 @@ export default {
         }
     },
 
-    computed: wic({add, update, del}),
+    computed: {
+        ...wic({add, update, del}),
+
+        listPageConfig() {
+            return {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
+                    props: {data: this.tableData},
+                    on: {'row-click': this.rowClick}
+                },
+                pagination: {
+                    props: {model: this.searchForm},
+                    on: {'current-change': this.pageChange}
+                }
+            }
+        }
+    },
 
     methods: {
         getLimitRegion() {
@@ -153,6 +168,12 @@ export default {
             this.editDialog = true
         },
 
+        see() {
+            if (isEmpty(this.row)) return elError('请选择要查看的供应商')
+            this.type = 'see'
+            this.editDialog = true
+        },
+
         edit() {
             if (isEmpty(this.row)) return elError('请选择要编辑的供应商')
             this.type = 'edit'
diff --git a/vue/src/view/system/user/component/EditDialog.vue b/vue/src/view/system/user/component/EditDialog.vue
index 1297d1f..da34911 100644
--- a/vue/src/view/system/user/component/EditDialog.vue
+++ b/vue/src/view/system/user/component/EditDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
-        <abstract-form :model="form" :rules="rules" label-width="90px" size="">
+        <abstract-form :model="form" :rules="rules" label-width="90px">
             <el-form-item label="登录名" prop="loginName">
                 <el-input v-model="form.loginName" :readonly="!!form.id || !canEdit" maxlength="20"/>
             </el-form-item>
@@ -46,8 +46,7 @@ import AbstractDialog from '@/component/abstract/Dialog'
 import RoleSelector from './RoleSelector'
 import {checkLoginName, checkNickName} from "@/api/account"
 import {add, update} from "@/api/system/user"
-import {isEmpty, debounce} from '@/util'
-import {elConfirm} from "@/util/message"
+import {isEmpty, debounce, mergeObj} from '@/util'
 
 export default {
     name: "EditDialog",
@@ -57,7 +56,7 @@ export default {
     components: {AbstractForm, DepartmentSelector, AbstractDialog, RoleSelector},
 
     props: {
-        value: {type: Boolean, default: false},
+        value: Boolean,
         type: {type: String, default: 'see'},
         data: {type: Object, default: () => ({})},
     },
@@ -134,10 +133,8 @@ export default {
     methods: {
         open() {
             this.$nextTick(() => {
-                if (this.type === 'edit') {
-                    Object
-                        .keys(this.data)
-                        .forEach(key => key in this.form && (this.form[key] = this.data[key]))
+                if (this.type !== 'add') {
+                    mergeObj(this.form,this.data)
                 }
             })
         },
diff --git a/vue/src/view/system/user/indexPage.vue b/vue/src/view/system/user/indexPage.vue
index e9c99fc..3511435 100644
--- a/vue/src/view/system/user/indexPage.vue
+++ b/vue/src/view/system/user/indexPage.vue
@@ -1,22 +1,22 @@
 <template>
-    <el-card v-loading="config.operating">
-        <search-form>
-            <search-form-item label="用户名">
+    <list-page :data="listPageConfig">
+        <template v-slot:searchForm>
+            <el-form-item label="用户名">
                 <el-input v-model="searchForm.loginName" clearable maxlength="20"/>
-            </search-form-item>
-            <search-form-item label="昵 称">
+            </el-form-item>
+            <el-form-item label="昵 称">
                 <el-input v-model="searchForm.nickName" clearable maxlength="100"/>
-            </search-form-item>
-            <search-form-item label="角 色">
+            </el-form-item>
+            <el-form-item label="角 色">
                 <role-selector v-model="searchForm.role"/>
-            </search-form-item>
-            <search-form-item label="状 态">
+            </el-form-item>
+            <el-form-item label="状 态">
                 <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null">
                     <el-option :value="true" label="启用"/>
                     <el-option :value="false" label="禁用"/>
                 </el-select>
-            </search-form-item>
-            <search-form-item label="创建时间">
+            </el-form-item>
+            <el-form-item label="创建时间">
                 <el-date-picker
                     v-model="temp.ctime"
                     format="yyyy-MM-dd"
@@ -24,70 +24,54 @@
                     type="daterange"
                     value-format="timestamp"
                 />
-            </search-form-item>
-        </search-form>
-
-        <el-row class="button-group">
-            <el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button>
-            <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
-            <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>
-            <el-button v-if="canResetPwd" icon="el-icon-edit" size="small" type="dashed" plain @click="resetPwd">重置密码
-            </el-button>
-            <el-button v-if="canDel" icon="el-icon-delete" size="small" type="danger" @click="del">删 除</el-button>
-            <el-button v-if="canKick" icon="el-icon-warning-outline" size="small" type="danger" @click="kick">踢 出
-            </el-button>
-        </el-row>
-
-        <el-row v-loading="config.loading" class="table-container">
-            <abstract-table :data="tableData" @row-click="rowClick">
-                <el-table-column align="center" label="#" type="index" width="80"/>
-                <el-table-column align="center" label="头像" width="100">
-                    <img
-                        slot-scope="{row}"
-                        v-if="row.avatar"
-                        :src="row.avatar"
-                        class="table-image"
-                        @click.stop="() => previewAvatar(row.avatar)"
-                    >
-                </el-table-column>
-                <el-table-column align="center" label="登录名" prop="loginName" show-overflow-tooltip/>
-                <el-table-column align="center" label="昵称" prop="nickName" show-overflow-tooltip/>
-                <el-table-column align="center" label="角 色" show-overflow-tooltip>
-                    <template v-slot="{row}">
-                        {{ row.admin === true ? '超级管理员' : row.roleName }}
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" label="部 门" prop="deptName" show-overflow-tooltip/>
-                <el-table-column align="center" label="创建时间" width="150">
-                    <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="在线情况" width="120">
-                    <template v-slot="{row}">
-                        <span :class="row.online ? 'success' : 'error'" class="dot"/>
-                        <span>{{ row.online ? '在线' : '离线' }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" label="状 态" width="120">
-                    <template v-slot="{row}">
-                        <span :class="row.enable ? 'success' : 'error'" class="dot"/>
-                        <span>{{ row.enable ? '启用' : '禁用' }}</span>
-                    </template>
-                </el-table-column>
-            </abstract-table>
-
-            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
-        </el-row>
+            </el-form-item>
+        </template>
+
+        <template v-slot:tableColumn>
+            <el-table-column align="center" label="#" type="index" width="80"/>
+            <el-table-column align="center" label="头像" width="100">
+                <img
+                    slot-scope="{row}"
+                    v-if="row.avatar"
+                    :src="row.avatar"
+                    class="table-image"
+                    @click.stop="() => previewAvatar(row.avatar)"
+                >
+            </el-table-column>
+            <el-table-column align="center" label="登录名" prop="loginName" show-overflow-tooltip/>
+            <el-table-column align="center" label="昵称" prop="nickName" show-overflow-tooltip/>
+            <el-table-column align="center" label="角 色" show-overflow-tooltip>
+                <template v-slot="{row}">
+                    {{ row.admin === true ? '超级管理员' : row.roleName }}
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="部 门" prop="deptName" show-overflow-tooltip/>
+            <el-table-column align="center" label="创建时间" width="150">
+                <template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template>
+            </el-table-column>
+            <el-table-column align="center" label="在线情况" width="120">
+                <template v-slot="{row}">
+                    <span :class="row.online ? 'success' : 'error'" class="dot"/>
+                    <span>{{ row.online ? '在线' : '离线' }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="状 态" width="120">
+                <template v-slot="{row}">
+                    <span :class="row.enable ? 'success' : 'error'" class="dot"/>
+                    <span>{{ row.enable ? '启用' : '禁用' }}</span>
+                </template>
+            </el-table-column>
+        </template>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
-    </el-card>
+    </list-page>
 </template>
 
 <script>
 import tableMixin from '@/mixin/tablePageMixin'
+import ListPage from '@/view/app/common/ListPage'
 import EditDialog from './component/EditDialog'
 import RoleSelector from './component/RoleSelector'
-import SearchForm from "@/component/form/Search"
-import SearchFormItem from "@/component/form/Search/item"
 import {search, add, update, del, kick, resetPwd} from "@/api/system/user"
 import {isEmpty} from '@/util'
 import {wic} from "@/util/auth"
@@ -99,7 +83,7 @@ export default {
 
     mixins: [tableMixin],
 
-    components: {EditDialog, RoleSelector, SearchForm, SearchFormItem},
+    components: {ListPage, EditDialog, RoleSelector},
 
     data() {
         return {
@@ -114,7 +98,36 @@ export default {
         }
     },
 
-    computed: wic({add, update, del, kick, resetPwd}),
+    computed: {
+        ...wic({add, update, del, kick, resetPwd}),
+
+        listPageConfig() {
+            return {
+                pageLoading: this.config.operating,
+                buttons: [
+                    this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+                    {icon: 'el-icon-view', e: this.see, content: '查 看'},
+                    this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+                    this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'},
+                    this.canResetPwd && {icon: 'el-icon-delete', e: this.resetPwd, content: '重置密码'},
+                    this.canKick && {icon: 'el-icon-delete', e: this.kick, content: '踢 出'}
+                ],
+                dataLoading: this.config.loading,
+                search: {
+                    props: {model: this.searchForm},
+                    on: {search: this.search}
+                },
+                table: {
+                    props: {data: this.tableData},
+                    on: {'row-click': this.rowClick}
+                },
+                pagination: {
+                    props: {model: this.searchForm},
+                    on: {'current-change': this.pageChange}
+                }
+            }
+        }
+    },
 
     methods: {
         mergeSearchForm() {
@@ -145,6 +158,12 @@ export default {
             this.editDialog = true
         },
 
+        see() {
+            if (isEmpty(this.row)) return elError('请选择要查看的用户')
+            this.type = 'see'
+            this.editDialog = true
+        },
+
         edit() {
             if (isEmpty(this.row)) return elError('请选择要编辑的用户')
             this.type = 'edit'
diff --git a/vue/src/view/userCenter/component/Account.vue b/vue/src/view/userCenter/component/Account.vue
index 7d27835..4a36e3e 100644
--- a/vue/src/view/userCenter/component/Account.vue
+++ b/vue/src/view/userCenter/component/Account.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import md5 from "js-md5"
 import dialogMixin from "@/mixin/dialogMixin"
 import AbstractForm from "@/component/abstract/Form"
 import AbstractDialog from '@/component/abstract/Dialog'
 import {updateUserPwd} from "@/api/account"
 import {elSuccess} from "@/util/message"
+import {md5} from "@/util/secret"
 
 export default {
     mixins: [dialogMixin],