uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

原创自研uniapp+vue3+pinia2+uni-ui仿ios手机后台管理系统模板UniVue3Oadmin。

使用技术

  • 编辑器:HbuilderX 4.15
  • 技术框架:uniapp+vue3+pinia2+vite5.x
  • UI组件库:uni-ui+uv-ui(uniapp vue3组件库)
  • 弹框组件:uv3-popup(基于uniapp+vue3自定义弹框组件)
  • 表格组件:uv3-table(基于uniapp+vue3增强版表格)
  • 图表组件:qiun-data-charts
  • 模拟数据:mockjs(用于自定义表格模拟数据)
  • 缓存技术:pinia-plugin-unistorage
  • 支持编译:h5+小程序端+app端

项目结构目录

实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端。

uniapp+vue3手机端后台OA系统

uniapp+vue3自定义增强版表格

uv3-table全新自研vue3+uniapp多功能综合增强版表格组件。

支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端

  • 基础用法
<uv3-table :columns="columns" :dataSource="data.list" />
  • 条纹表格
<uv3-table
    :columns="columns"
    :dataSource="data.list"
    stripe
    stripeColor="#eee"
    padding="5px"
    height="450rpx"
/>
  • 综合表格
<uv3-table
    :dataSource="data.list"
    :columns="columns"
    :headerBold="true"
    headerBackground="#ecf5ff"
    stripe
    border
    padding="5px"
    maxHeight="650rpx"
    @rowClick="handleRowClick"
    @select="handleSelect"
>
    <!-- 自定义header插槽内容 -->
    <template #headerCell="{ key, col, index }">
        <template v-if="key == 'title'">
            <view class="flex-c">{{col.label}} <input placeholder="搜索" size="small" /></view>
        </template>
        <template v-else-if="key == 'date'">
            <uni-icons type="calendar"></uni-icons> {{col.label}}
        </template>
        <template v-else>{{col.label}}</template>
    </template>

    <!-- 自定义body插槽内容(由于小程序不支持动态:name插槽,通过key标识来自定义表格内容) -->
    <template #default="{ key, value, row, col, index }">
        <template v-if="key == 'image'">
            <uv-image :src="value" lazyLoad observeLazyLoad @click="previewImage(value)" />
        </template>
        <template v-else-if="key == 'switch'">
            <switch :checked="value" style="transform:scale(0.6);" />
        </template>
        <template v-else-if="key == 'tags'">
            <uv-tags :text="value" :color="row.color" :borderColor="row.color" plain size="mini" />
        </template>
        <template v-else-if="key == 'rate'">
            <uni-rate :value="value" size="14" readonly />
        </template>
        <template v-else-if="key == 'action'">
            <uni-icons type="compose" color="#00aa7f" @click="handleEdit(row)" />
            <uni-icons type="trash" color="#ff007f" style="margin-left: 5px;" @click="handleDel(row)" />
        </template>
        <template v-else>{{value}}</template>
    </template>
</uv3-table>

支持如下参数配置

const props = defineProps({
    // 表格数据
    dataSource: {
        type: Array,
        default() {
            return []
        }
    },
    /**
     * @params {string} background 对应列背景色
     * @params {string} type 对应列类型(多选selection 索引index)
     * @params {string} label 显示的列标题
     * @params {string} prop 对应的列字段名
     * @params {string} align 列水平对齐方式(left center right)
     * @params {number|string} width 对应列宽度
     * @params {boolean|string} fixed 该列固定到左侧(fixed:true|'left')或右侧(fixed:'right')
     * @params {string} columnStyle 对应列自定义样式
     * @params {string} className/class 表格列的类名className
     */
    columns: {
        type: Array,
        default() {
            return []
        }
    },
    // 表格宽度
    width: { type: [Number, String] },
    // 表格高度
    height: { type: [Number, String] },
    // 表格最大高度
    maxHeight: { type: [Number, String] },
    // 是否为斑马纹
    stripe: { type: [Boolean, String] },
    // 斑马纹背景
    stripeColor: { type: String, default: '#fafafa' },
    // 是否带有边框
    border: { type: [Boolean, String] },
    // 列宽度(推荐默认rpx)
    columnWidth: { type: [Number, String], default: 200 },
    // 单元格间距
    padding: { type: String, default: '5rpx 10rpx' },
    // 是否显示表头
    showHeader: { type: [Boolean, String], default: true },
    // 表头背景色
    headerBackground: { type: String, default: '#ebeef5' },
    // 表头颜色
    headerColor: { type: String, default: '#333' },
    // 表头字体加粗
    headerBold: { type: [Boolean, String], default: true },
    // 表格背景色
    background: { type: String, default: '#fff' },
    // 表格颜色
    color: { type: String, default: '#606266' },
    // 空数据时显示的文本内容,也可以通过 #empty 设置
    emptyText: { type: String, default: '暂无数据' }
})

采用全新的数字解锁模式。全新的登录验证解锁体验。

公共模板

<script setup>
    import { ref } from 'vue'
    import { appStore } from '@/pinia/modules/app'

    const appState = appStore()

    // #ifdef MP-WEIXIN
    defineOptions({
        /**
         * 解决小程序class、id透传问题(vue3写法)
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    })
    // #endif
    const props = defineProps({
        showBackground: { type: [Boolean, String], default: true },
    })

    // 自定义变量(桌面图标)
    const deskVariable = ref({
        '--icon-radius': '15px', // 圆角
        '--icon-size': '118rpx', // 图标尺寸
        '--icon-gap-col': '25px', // 水平间距
        '--icon-gap-row': '45px', // 垂直间距
        '--icon-labelSize': '12px', // 标签文字大小
        '--icon-labelColor': '#fff', // 标签颜色
        '--icon-fit': 'contain', // 图标自适应模式
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
        <!-- 顶部插槽 -->
        <slot name="header" />

        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>

        <!-- 底部插槽 -->
        <slot name="footer" />

        <!-- 背景图(修复小程序不支持background背景图) -->
        <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />
    </view>
</template>

桌面模板

<!-- 桌面模板 -->
<script setup>
    import { ref } from 'vue'

    import Desk from './components/desk.vue'
    import Dock from './components/dock.vue'
    import Touch from './components/touch.vue'
</script>

<template>
    <uv3-layout>
        <!-- 桌面菜单 -->
        <Desk />

        <template #footer>
            <!-- 底部导航 -->
            <Dock />
        </template>
        <!-- 悬浮球(辅助触控) -->
        <Touch />
    </uv3-layout>
</template>

桌面磁贴布局

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

桌面图标菜单配置项

/**
 * label 图标标题
 * imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名,当type: 'widget'则为自定义小部件标识名
 * type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件
 * path 跳转路由页面
 * link 跳转外部链接
 * hideLabel 是否隐藏图标标题
 * background 自定义图标背景色
 * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
 * onClick 点击图标回调函数 * children 二级菜单
 */

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)

<template>
    <swiper
        class="uv3__deskmenu"
        :indicator-dots="true"
        indicator-color="rgba(255,255,255,.5)"
        indicator-active-color="#fff"
    >
        <swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">
            <view class="uv3__gridwrap">
                <view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">
                    <!-- 图标 -->
                    <view class="ico" :style="{'background': item.background}">
                        <!-- 二级菜单 -->
                        <template v-if="Array.isArray(item.children)">
                            <view class="uv3__gridwrap-thumb">
                                ...
                            </view>
                        </template>
                        <template v-else>
                            <template v-if="item.type == 'widget'">
                                <!-- 自定义部件 -->
                                <component :is="item.imgico" />
                            </template>
                            <template v-else>
                                <!-- 自定义图标 -->
                                ...
                            </template>
                        </template>
                    </view>
                    <!-- 标签 -->
                    <view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>
                </view>
            </view>
        </swiper-item>
    </swiper>

    <!-- 桌面二级菜单弹窗 -->
    <Popup v-model="deskPopupVisible">
        <view class="uv3__deskpopup">
            ...
        </view>
    </Popup>

    ...
</template>

Okey,以上就是uniapp+vue3实战手机端后台OA系统的一些知识分享,希望对大家有所帮助~

博客:uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端...
博客:flutter-dylive:基于flutter3.x+getx短视频直播|Flutter3仿抖音app

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
50
粉丝
46
喜欢
101
收藏
56
排名:367
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
3
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
flutter3-macos
1
flutter3-osx
2
flutter3桌面os
2
flutter3仿macOS
1
uniapp+vue3聊天
1
uniapp+vue3仿微信
1
uniapp+vue3聊天app
1
uniapp-vue3-wchat
1
uni-vue3-os
1
uniapp+vue3手机后台
1
uniapp-admin
1
uniapp+vue3仿ios桌面
1
uniapp+vite5后台管理
1
flutter3-osadmin
1
flutter3手机后台
1
社区赞助商