tooyu-ui v0.0.1

atooyu-ui

图域前端基础框架（WEB 端）

概述

• PC 端框架，开箱即用，快速集成。
• 集成 vuex、router、axios、element-plus 等组件，提供丰富的布局和组件。

集成介绍

• 路由配置，默认配置文件地址 src/router/index.js

//src/router/index.js
let router = {
    //空布局路由
    getRootRoutes: () => {
        return []
    },
    //包含CommonLayout布局的路由
    getRoutes: () => {
        return [
            {
                path: '/home',
                name: '首页',
                component: () => import('../pages/home/index.vue'),
            },
            {
                path: '/detail/:id',
                name: '详情页',
                meta: {
                    isTab: false, //不是菜单，要显示的Tab，一般用于部分有详情页的列表
                    parentPath: '', //父级菜单信息
                    login: false, //页面无须登录
                    keepAlive: false, //是否保持页面缓存状态
                },
                component: () => import('../pages/home/detail.vue'),
            },
        ]
    },
}
export default router

• vuex 配置，默认配置文件地址 src/store/index.js

//src/store/index.js
let modules = {}
export default modules

• 统一配置(系统默认支持的统一配置 demo)，默认配置文件地址 src/config/index.js，会以 public/config/config.json 覆盖

//src/config/index.js
let config = {
    //应用名称，用于菜单上的名称，不填默认用VUE_APP_NAME变量的值
    webTitle: '测试后台',
    //默认请求地址，一般配置网关地址
    baseUrl: 'http://localhost:10001',
    //转发url配置，和devServer配置类似
    forwardUrl: {
        '^/test-api': {
            //转发地址
            target: 'http://localhost:10001',
            //重写uri
            rewrite: {
                '^/test-api': '/test-api',
            },
        },
    },
    //头像下菜单列表（页面跳转）
    avatarMenuList: [
        {
            name: '系统设置',
            path: '/system/setting',
        },
    ],
    //神策配置
    sensors: {
        enabled: false, //是否开启
        debugger: false, //是否调试
        collectUrl: 'https://xxxx/sensorsdata/ADMIN', //收集地址
    },
    //水印配置
    waterMarkContent: '开发环境',
}
export default config

public/config/config.json, 不用配置，由运维统一覆盖

{
    "baseUrl": "http://localhost:10001"
}

• 应用个性化配置

app.use(TooyuUI, {
    userVuex: require('@/store/index'), //用户自定义vuex地址
    userRouter: require('@/router/index'), //用户自定义路由地址
    userConfig: require('@/config/index'), //用户自定义默认统一配置地址
    topSlotComponent: require('@/components/TopSlotComponent/index'), //顶部功能菜单插槽组件，默认无
})

快速开始

打开控制台，执行以下命令以快速创建项目

vue init -c direct:http://gitlab.frp.jinxcjg.top:88/FRONT/tooyu-web-front.git projectName

进入创建好的项目文件夹，执行命令

yarn install

启动开发服务，开发服务采用 devProxy 代理模式（非 http 开头的 url 地址，默认会走该模式），具体接口配置在 vue.config.js 文件

yarn dev

启动正式服务，正式服务走项目统一配置（非 http 开头的 url 地址，会自动拼接 baseUrl）

yarn serve

组件介绍

• TooyuTable

<template>
    <tooyu-table
        :config="config"
        :table-columns="tableColumns"
        :query-columns="queryColumns"
    ></tooyu-table>
</template>
<script>
export default {
    data() {
        return {
            //配置
            config: {
                idField: 'id', //数据唯一ID字段
                selection: true, //是否显示表格数据选择项
                supportRowSelect: false, //是否支持行选中，自动回调@select-row(row)
                defaultPageNo: 1, //默认页码
                defaultPageSize: 10, //默认每页条数
                defaultPageSizes: [10, 20, 50, 100], //默认页码选择
                defaultPaginationLayout: 'total, sizes, prev, pager, next, jumper',
                //链接地址
                url: {
                    list: 'https://ip/list', //列表url, post请求
                    delete: 'https://ip/delete', //通过ids删除的url, post请求
                },
                rules: {}, //表格条件全局规则
            },
            //查询列配置
            queryColumns: [
                {
                    label: '姓名',
                    prop: 'name',
                    type: 'el-input',
                    rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                },
                {
                    label: '日期',
                    prop: 'date',
                    type: 'el-date-picker',
                    options: {
                        type: 'datetimerange',
                    },
                },
                {
                    label: '状态',
                    prop: 'status',
                    type: 'el-select',
                    options: {
                        values: [
                            {
                                value: 0,
                                label: '冻结',
                            },
                            {
                                value: 1,
                                label: '正常',
                            },
                        ],
                    },
                },
            ],
            //表格列配置
            tableColumns: [
                {
                    prop: 'name',
                    label: '姓名',
                    width: 180,
                    sortable: false,
                    formatter: (row, column, cellValue) => {
                        return '模板处理' + cellValue
                    },
                },
                {
                    prop: 'address',
                    label: '地址',
                },
            ],
        }
    },
}
</script>

• TooyuFileUpload

<tooyu-file-upload
    repository="test"
    type="picture"
    tip="只能上传jpg/png文件，且不超过500kb"
    @file-validate="avatarFormatValidate"
    :limit="1"
    v-model:file="avatar"
></tooyu-file-upload>
<script>
export default {
    data() {
        return {
            avatar: '',
        }
    },
    methods: {
        //头像格式验证
        avatarFormatValidate(file, callback) {
            const isJPG = file.type === 'image/jpeg'
            const isLte500K = file.size / 1024 <= 500
            if (!isJPG) {
                this.$notify({
                    title: '提示',
                    type: 'error',
                    message: '上传头像图片只能是JPG格式!',
                })
            }
            if (!isLte500K) {
                this.$notify({
                    title: '提示',
                    type: 'error',
                    message: '上传头像图片大小不能超过500KB!',
                })
            }
            callback(isJPG && isLte500K)
        },
    },
}
</script>

指令

• 按钮权限指令

<div v-permission="'btnCode'"></div>

API

• 日期格式化

let dateStr = this.dateFormat('yyyy-MM-dd HH:mm:ss', 1640142303753)
console.log(dateStr)

• 全局加载进度条，开启和关闭

this.openLoading()
this.closeLoading()

• 关闭当前 Tab 页

//href可选参数，代表关闭后定位到哪个页面
this.closeTab(href)

• 获取是否有按钮权限

//code:按钮编码
let has = this.hasBtnPrivileges(code)
console.log(has ? '有权限' : '无权限')

• 获取当前用户

let user = this.getCurrentUser()
console.log(user)

• 统一配置获取 api

//方式1
this.appGlobalConfig
//方式2
process.APP_GLOBAL_CONFIG

升级 Tips

1.2.3

1. 新增keep-alive-iframe

1.2.2

1. core-js升级到3.25.3

1.2.1

1.无菜单权限无法访问页面，前端控制

1.2.0

1.element-plus@2.1.4 -> 2.2.17

1.1.0

1.路由增加保持页面缓存状态

1.0.9

1.文件上传修复，第一次文件上传失败的问题

1.0.8

1.支持是否开启站内信配置showMessage

1.0.7

1.文件上传优化，多文件上传bug修复，绑定关系失效问题处理
2.修复internalExtendsElTable导致的无法启动的问题

1.0.6

1.TooyuTable增加获取引用的方法

1.0.5

1.TooyuTable增加导出功能
2.tooyu-table继承el-table的所有参数和方法

1.0.4

1.登录页循环跳转问题
2.上传组件增加监听数据变更属性

1.0.3

1.登录页样式优化
2.原具名排序插槽逻辑新增内容插槽

1.0.2

1.页面无须登录逻辑
2.水印太深修复

1.0.1

1.详情页如果配置了parentPath默认选中父级页面

1.0.0

1.包含1.0.0-beta1+的所有功能，正式第一版发布

1.0.0-beta1+

1.框架引入babel打包
2.部分组件js抽离
3.详情页按钮权限取父级的权限信息
4.警告问题修复

0.9.1

1.移除dayjs包
2.分页添加总条数显示和细节调整

0.9.0

1. 新增站内信功能

0.8.1

1.文件上传组件新增file-button类型
2.文件上传组件file和file-button类型，上传的信息支持点击弹出

0.8.0

1.文件上传支持自定义url上传
2.通用表单Term项抽取，新增组件TooyuDynamicFormTerm
3.动态表单中el-date-picker新增变更重新加载表格的功能
4.package.json依赖结构变更
5.第三方组件库版本固定

v0.7.2

1.新增iframe路由模式${token}占位符替换

v0.7.1

1.TooyuTable新增@before-load-table(condition)用于处理表格加载前的事件

v0.7.0

1.TooyuTable 具名插槽支持排序功能
2.TooyuTable el-select查询类型支持远程字典项获取
3.新增TooyuDialogForm组件
4.按钮权限同步支持表格上的按钮权限
5.支持用户自定义配置portalUrl地址

0.6.2

1.首页Home icon显示优化
2.水印根据配置自动初始化

v0.6.1

1.字典项处理无accessToken问题修复
2.上传问题处理

v0.6.0

1.添加水印功能

v0.5.7

1.element表格样式问题修复

v0.5.6

1.auto-login页面新增页面path参数，传参登录成功后跳转

v0.5.5

1.上传组件优化

v0.5.4

1.字典项偶现无字典项的问题

v0.5.3

1.表格新增选中回调校验事件@checkSelectable(row, callback)

v0.5.2

1.代码优化，包结构优化，组件实例导出

v0.5.1

1.新增字典项对接basic模式，可以通过atooyu-ui/common/dictionary引入

v0.5.0

1.新增文件上传组件

v0.4.1

1.适应portal优化登录跳转问题

v0.4.0

1.新增神策采集数据对接功能（配置参照统一配置demo）
2.修复登录跳转外网域名报错的问题

v0.3.1

1.框架参数提取, 具体参照集成介绍
2.框架顶部header中心空白区域插槽组件, 具体参照集成介绍
3.头像下菜单开放配置，具体参照统一配置src/config/index.js文件配置信息
4.多次跳转portal问题修复

v0.3.0

1.新增统一配置forwardUrl配置，类型devServer的proxy功能，用于多服务状态下，自动拼接url请求前缀，避免用户每次拼url地址的情况
2.element-plus升级2.0.1【重要】
  (1)：vue.config.js中configureWebpack配置新增config.module.rules.push({test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto'})
  (2)：通用布局对新版element-plus框架进行兼容
  (3)：原组件上size的medium, small, mini改为对应的large, default, small
  (4)：保留原<i class="el-icon-*"></i>的自定义icon写法，具体icon参照老的element-ui文档
  (5)：取消el-button中icon写入icon-class的方式，改为使用@element-plus/icons-vue，具体参照最新的element-plus官方文档
  (6)：默认引入@element-plus/icons-vue包，使用时自行import即可

v0.2.4

1.优化atooyu-ui表格组件内置删除功能的一个问题
2.处理框架覆盖element-ui el-tabs的样式问题

v0.2.3

1.优化axios组件，去除不必要的代码
2.优化axios组件，对返回的非json数据格式直接resolve

v0.2.2

1.支持页面主框架上的logo点击跳转到系统portal页面
2.支持按钮权限指令

v0.2.1

1.TooyuTable组件翻页问题优化
2.框架Tab支持详情页模式
3.新增关闭Tab的公共方法

v0.2.0

1.登录页进入自动清除上一次的登录信息优化
2.iconfont彩色图标Unicode模式支持,同时支持element-icon图标
3.整体框架样式优化

v1.2.4

1.user中保存工号workNo