uni-uadmin后台管理系統|uniapp+uView跨端后台框架實例

基於uniapp+uview+uni-ui跨平台手機端后台管理系統UniappUAdmin。

uniapp-uadmin 基於uni-app+uView+uniUI研發的跨端手機后台管理系統項目。全新的毛玻璃視覺UI界面，內置了圖表、自定義表格、表單、瀑布流及圖文編輯器等業務模塊，動態權限管理，錯誤頁處理，支持編譯至H5+小程序+APP端。

如上圖：編譯到H5+APP+小程序端效果

◆ 技術棧

• 編碼器：HbuilderX3.3.5
• 框架技術：vue.js+uniapp+vuex+mockjs
• UI組件庫：uView-ui+uni-ui
• 彈窗組件：ua-popup（基於uni-app跨端彈框組件）
• 表格組件：ua-table（基於uni-app封裝的多功能表格）
• 自定義組件：uaDock全新的dock風格tabbar組件
• 圖表組件：u-charts圖表庫
• 模擬數據：mock.js

◆ 功能特色

✅ 全新替代tabbar動態毛玻璃菜單Dock
✅ 支持動態權限管理、錯誤頁處理
✅ 內置多圖表組件、表格、表單、瀑布流列表及富文本編輯器
✅ 支持編譯h5+APP+小程序端

◆ 目錄結構

整個項目采用標准的模糊化結構開發方式，所有表格數據使用mock.js模擬。

◆ 公共模板UAPage

<!-- 公共頁面模板 -->
<template>
    <view class="ua__pageview flexbox flex-col" :style="{'--SKIN': $store.state.skin, 'background': bgcolor, 'color': color}">
        <slot name="header" />
        
        <!-- //主容器 -->
        <view class="ua__scrollview flex1">
            <slot />
        </view>
        
        <!-- //底部 -->
        <slot name="footer" />
        
        <!-- //dock菜單 -->
        <ua-dock v-if="dock && dock != 'false'" @click="handleDockClick" />
        
        <!-- //函數式彈框 -->
        <ua-popup ref="uapopup" />
        
        <!-- //換膚彈框模板 -->
        <ua-popup v-model="isVisibleSkin" position="right">
            <Skin />
        </ua-popup>
    </view>
</template>

項目中頂部導航條及彈窗組件，使用自定義組件實現，之前有分享過相關的介紹文章。

https://www.cnblogs.com/xiaoyan2017/p/14978408.html

https://www.cnblogs.com/xiaoyan2017/p/14993445.html

◆ uniapp毛玻璃模糊視覺Dock

項目中的底部dock菜單采用了背景模糊化效果，替代了系統tabbar組件。可左右絲滑滾動，圖標支持iconfont和圖片，另外還支持badge圓點數字提示。選項支持切換tabbar頁面，跳轉新頁面，可定制化選項。

<!-- //底部dock菜單 -->
<template>
    <view class="ua__dockbar">
        <scroll-view class="ua__dock-scroll ua__filter" :class="platform" scroll-x :style="{'background': bgcolor}">
            <view class="ua__dock-wrap">
                <!-- Tab菜單項 -->
                <block v-for="(item, index) in menu" :key="index">
                    <view v-if="item.type == 'divider'" class="ua__dock-divider"></view>
                    <view v-else class="ua__dock-item" :class="currentTabIndex == index ? 'cur' : ''" @click="switchTab(index, item)">
                        <text v-if="item.icon" class="iconfont nvuefont" :class="item.icon">{{item.icon}}</text>
                        <image v-if="item.img" :src="item.img" class="iconimg" :style="{'font-size': item.iconSize}" />
                        <text v-if="item.badge" class="ua__badge ua__dock-badge">{{item.badge}}</text>
                        <text v-if="item.dot" class="ua__badge-dot ua__dock-badgeDot"></text>
                    </view>
                </block>
            </view>
        </scroll-view>
    </view>
</template>

組件props支持如下參數配置

props: {
    // 當前索引
    current: { type: [Number, String], default: 0 },
    // 背景色
    bgcolor: { type: String, default: null },
    /**
     * [ 菜單選項 ]
        type　　　　菜單類型 type: 'tab'支持uni.switchTab切換 type: 'divider'分割線
        path　　　　菜單頁面地址
        icon　　　　菜單圖標-iconfont圖標
        img　　　　 菜單圖片
        color　　　 菜單圖標顏色
        title　　　 標題
        badge　　　 圓點數字
        dot        小紅點
     */
    menu: {
        type: Array,
        default: () => [
            /* Tab菜單 */
            {
                type: 'tab',
                path: '/pages/index/index',
                icon: `\ue619`,
                color: '#2979ff',
                title: '首頁',
            },
            {
                type: 'tab',
                path: '/pages/component/index',
                icon: 'icon-component',
                color: '#17c956',
                title: '組件',
                badge: 5,
            },
            {
                type: 'tab',
                path: '/pages/permission/index',
                icon: 'icon-auth',
                color: '#f44336',
                title: '權限管理',
            },
            {
                type: 'tab',
                path: '/pages/setting/index',
                icon: 'icon-wo',
                color: '#8d1cff',
                title: '設置',
                dot: true,
            },
            {
                path: '/pages/error/404',
                img: require('@/static/mac/keychain.png'),
                title: '錯誤頁面',
            },
            
            { type: 'divider' },
            
            /* Nav菜單 */
            {
                img: require('@/static/logo.png'),
                title: 'github',
            },
            {
                img: 'https://www.uviewui.com/common/logo.png',
                title: 'gitee',
            },
            {
                img: require('@/static/mac/colorsync.png'),
                title: '皮膚',
            },
            {
                img: require('@/static/mac/info.png'),
                title: '關於',
            },
            
            { type: 'divider' },
            
            {
                img: require('@/static/mac/bin.png'),
                title: '回收站',
                badge: 12,
            },
        ]
    },
},

點擊每一個選項切換頁面

// Tab切換
switchTab(index, item) {
    if(item.path) {
        let type = item.type == 'tab' ? 'switchTab' : 'navigateTo'
        uni[type]({
            url: item.path,
        })
    }else {
        if(item.type == 'tab') {
            this.currentTabIndex = index
        }
    }
    this.$emit('click', index)
}

◆ uniapp自定義表格組件

這一次項目一大亮點，uniapp多功能自定義表格組件。網上也有很多uniapp表格組件，比較簡陋、功能性並不好。於是就自研了這款ua-table表格組件。

ua-table 一款支持全選、單選，列寬/居中及可左右、上下滑動固定表頭及列，支持點擊行返回行數據，返回單選及多選行列數據，自定義slot插槽等功能。

使用非常之簡單，只需如下方式調用即可。

<ua-table 
    :columns="columns" 
    headerBgColor="#eee" 
    :headerBold="true" 
    stripe
    padding="5px 0"
    :data="data.list" 
    height="450rpx"
>
</ua-table>

<script>
import Mock from 'mockjs'

export default {
    data() {
        return {
            columns: [
                {type: 'index', align: 'center', width: 100, fixed: true}, // 索引序號
                {prop: 'title', label: '標題', align: 'left', width: '350'},
                {prop: 'num', label: '搜索量', align: 'center', width: 120},
            ],
            data: Mock.mock({
                total: 100,
                page: 1,
                pagesize: 10,
                'list|10': [
                    {
                        id: '@id()',
                        title: '@ctitle(10, 20)',
                        num: '@integer(1000,10000)'
                    }
                ]
            }),
        }
    }
}
</script>

支持自定義插槽，則可通過如下方式使用。

<ua-table 
    :columns="columns" 
    headerBgColor="#eee" 
    :headerBold="true" 
    :stripe="true"
    :data="data.list" 
    @row-click="handleRowClick"
    @select="handleCheck" 
    height="750rpx"
    style="border:1px solid #eee"
>
    <template #default="{row, col, index}">
        <block v-if="col.slot == 'image'">
            <u-image :src="row.image" :lazy-load="true" height="100rpx" width="100rpx" @click="previewImage(row.image)" />
        </block>
        <block v-if="col.slot == 'switch'">
            <u-switch v-model="row.switch" inactive-color="#fff" :size="36"></u-switch>
        </block>
        <block v-if="col.slot == 'tags'">
            <u-tag :text="row.tags" bg-color="#607d8b" color="#fff" mode="dark" size="mini" />
        </block>
        <block v-if="col.slot == 'progress'">
            <u-line-progress active-color="#1fb925" :percent="row.progress" :show-percent="false" :height="16"></u-line-progress>
        </block>
        <block v-if="col.slot == 'btns'">
            <view class="ua__link success" @click.stop="handleFormEdit(row)">編輯</view>
            <view class="ua__link error" @click.stop="handleDel(row, index)">刪除</view>
        </block>
    </template>
</ua-table>

<script>
import Mock from 'mockjs'

export default {
    data() {
        return {
            columns: [
                {type: 'selection', align: 'center', width: 80, fixed: true}, // 多選
                {type: 'index', align: 'center', width: 80, fixed: true}, // 索引序號
                {prop: 'author', label: '作者', align: 'center', width: 120},
                {prop: 'title', label: '標題', align: 'left', width: 350},
                {slot: 'image', label: '圖片', align: 'center', width: 120},
                {slot: 'switch', label: '推薦', align: 'center', width: 100},
                {slot: 'tags', label: '標簽', align: 'center', width: 100},
                {slot: 'progress', label: '熱度', align: 'center', width: 150},
                {prop: 'date', label: '發布時間', align: 'left', width: 300}, // 時間
                {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作
            ],
            data: Mock.mock({
                total: 100,
                page: 1,
                pagesize: 10,
                'list|30': [
                    {
                        id: '@id()',
                        author: '@cname()',
                        title: '@ctitle(10, 20)',
                        image: 'https://picsum.photos/400/400?random=' + '@guid()',
                        switch: '@boolean()',
                        'tags|1': ['admin', 'test', 'dev'],
                        progress: '@integer(30, 90)',
                        date: '@datetime()'
                    }
                ]
            }),
        }
    }
}
</script>

注意：自定義插槽，需要將字段屬性改為slot: xxx

當初開發這款表格組件遇到最大的一個問題就是，在小程序端slot不支持動態:name，明明這樣就可以完美實現動態slot功能

 <slot :name="col.slot" :row="row" :col="col" :index="rIndex" /> 

在小程序端怎么都沒反應，還報錯一大推。萬般無奈，最后只能采用這種兼容寫法。

 <block v-if="col.slot"><slot :row="row" :col="col" :index="rIndex" /></block> 

如果大家有更好的解決方法，歡迎留言一起交流學習。

 

Okay，以上就是今天的分享，后續還會分享一些最新實例項目，希望可以喜歡哈~~

最后附上一個uniapp短視頻直播項目

uni-app+uviewUI仿抖音小視頻：https://www.cnblogs.com/xiaoyan2017/p/15312146.html