前端公共组件

# 1. 技术栈

Vue 3.x、Vuex、ElementUI 3.x、Bootstrap、ZTree、AMap、JQuery。

# 2. 目录说明

├── build               -- webpack build
├── config              -- webpack config
├── dist                -- 静态资源
│   └── static
│       ├── css
│       ├── fonts
│       ├── images
│       ├── img
│       └── js
├── public              -- 公共部分(JSON Server)
├── src                 -- 源代码
│   ├── api             -- API接口声明
│   ├── assets          -- 静态资源
│   │   ├── css
│   │   ├── fonts
│   │   └── images
│   ├── components      -- 自定义组件
│   │   ├── amap        -- 高德地图组件
│   │   ├── dropdown    -- 下拉组件
│   │   ├── form        -- 表单组件
│   │   ├── menu        -- 表格组件
│   │   ├── progressbar -- 进度条组件
│   │   ├── select      -- Select组件
│   │   ├── table       -- 表格组件
│   │   ├── tree        -- 树形组件(ZTree)
│   │   └── upload      -- 上传组件
│   ├── directives      -- 自定义指令
│   ├── mock            -- 测试
│   │   └── data
│   ├── router          -- 路由
│   ├── store           -- 存储(Vuex)
│   │   └── modules
│   ├── utils           -- 工具类
│   └── views           -- 视图(模块页面)
│       ├── alarm       -- 报警
│       ├── bashboard   -- 看板
│       ├── carmodel    -- 车型
│       ├── center      -- 监控中心
│       ├── device      -- 设备管理
│       ├── dictionary  -- 字典管理
│       ├── driverinfo  -- 驾驶员
│       ├── fence       -- 电子围栏
│       ├── generator   -- 代码生成
│       ├── global      -- 全局
│       ├── history     -- 历史轨迹
│       ├── home        -- 首页
│       ├── job         -- 定时调度
│       ├── labelpoint  -- 标注点
│       ├── layout      -- 页面布局
│       ├── line        -- 线路管理
│       ├── login       -- 登录
│       ├── menu        -- 菜单
│       ├── message     -- 消息
│       ├── monitoring  -- 监控
│       ├── organization-- 组织 
│       ├── permission  -- 权限
│       ├── protocol    -- 协议
│       ├── resource    -- 资源
│       ├── role        -- 角色
│       ├── serverresource -- 运维
│       ├── sim         -- SIM卡管理
│       ├── system      -- 系统管理
│       ├── terminal    -- 终端管理
│       ├── trace
│       ├── traditioncar
│       ├── user        -- 用户管理
│       └── usergroup   -- 用户组
├── static  -- 静态资源
├── theme   -- 主题(重写了Element-UI)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# 3. 常用组件

# 3.1 AsideLayout 侧边栏伸缩布局

组件截图

AsideLayout Attributes

参数 说明 类型 可选值 默认值
leftWidth 侧边栏宽度 Number -- 300

AsideLayout Slot

name 说明
left 左侧组件
right 右侧组件

# 3.2 BottomButtons 底部按钮

组件截图

BottomButtons Attributes

参数 说明 类型 可选值 默认值
data 生成按钮的数据 Array -- null
btnSize 按钮尺寸 String medium / small / mini null

data属性说明

    [
        {
            text: '取消',//按钮显示文字
            click: _ => this.$emit('close'),//按钮点击执行事件
            permission: 'base:vehicle:cancel',//按钮权限控制
            disabled: true,//按钮是否禁用
            title: '点击取消按钮将关闭该页面'//按钮title
        },
        {
            text: '保存',
            click: this.save
        }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.3 Dialog 弹出框组件

组件截图

Dialog Attibutes

参数 说明 类型 可选值 默认值
title 弹框标题 String -- null
appendToBody 是否渲染到body上 Boolean -- true
visible 弹出框是否显示 Boolean -- false
showClose 是否显示关闭按钮 Boolean -- true
bottomBtns 底部按钮 Array 参考BottomButtons组件data属性 null

Dialog Events

事件名称 说明 回调参数
closed 弹框关闭完 --

# 3.4 Drawer 抽屉组件

组件截图

Drawer Attibutes

参数 说明 类型 可选值 默认值
title 弹框标题 String -- null
appendToBody 是否渲染到body上 Boolean -- true
visible 弹出框是否显示 Boolean -- false
showClose 是否显示关闭按钮 Boolean -- true
bottomBtns 底部按钮 Array 参考BottomButtons组件data属性 null

Drawer Events

事件名称 说明 回调参数
closed 抽屉关闭完 --

# 3.5 DynamicColTable 动态表格组件

组件截图

DynamicColTable Attributes

参数 说明 类型 可选值 默认值
btnWidth rowBtns生成的列宽 String -- 160px
colConfig 表格列配置信息 Array -- --
tableData 表格数据 Array -- --
tableHeight 表格高度 Number -- 150
total 表格分页数据-总条数 Number -- 0
rowNo 表格是否显示行标 Boolean -- true
rowCheckbox 表格行是否显示复选框 Boolean -- false
rowBtns 表格行尾操作按钮列(已废弃,使用colConfig/contentType=btns代替) Boolean/Array -- false
loading 表格数据加载中动画是否显示 Boolean -- false
filterable 表格列是否支持用户过滤 Boolean -- true
isPagination 是否显示分页组件 Boolean -- false
cellClick 单元格点击事件回调函数 Function -- null
index 行号计算函数(可不传) Function -- null
pageTurning 翻页事件回调函数,组件加载完毕自动调用一次 Function -- --
pageNum 分页组件页码 Number -- --
pageSize 分页组件页容量 Number -- --
selectedRows 复选框被选中的表格行集合 Array -- []
currentRow 当前选中行 Object -- {}
treeConfig 属性表格配置项 Object -- null
title 标题,用于在表格顶部显示标题文字 String/Number -- null
autoHeight 表格高度自适应,为true时tableHeight失效 Boolean -- false

DynamicColTable Methods

方法名 说明 参数
setTableHeight 重新设置表格高度,autoHeight为true时生效 --
doLayout 重新调整表格高度、布局 --

colConfig属性说明

    [{
        name: 'createTime', //列对应的数据属性名称
        title: '创建时间', //列头显示的问文字
        formatter: row => row.id + row.name //格式化单元格回调函数
    },
    {
        name: 'state',
        title: '状态',
        minWidth: 60,
        formatter: row =>
            row.usedCount > 0 ? '已使用' : '未使用'
    },
    {
        contentType: 'btns',
        width: 130,
        data: [
            {
                type: 'detail',//按钮类型
                click: this.openDetail,//按钮点击事件
                permission: 'base:carmodel:detail',//按钮权限控制
                filter: row => row.confirm == 1,//按钮是否过滤回调函数
                disable: row => row.usedCount >  0//按钮是否禁用回调函数
            },
            {
                type: 'edit',
                text: '确认',
                click: this.openEdit,
                permission: 'base:carmodel:confirm',
                filter: row => row.confirm == 0
            },
            {
                type: 'edit',
                click: this.openEdit,
                permission: 'base:carmodel:edit'
            },
            {
                type: 'delete',
                click: row => this.delete([row.id]),
                permission: 'base:carmodel:delete'
            }
        ]
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 3.6 Form 表单组件

组件截图

Form Attibutes

参数 说明 类型 可选值 默认值
title 表单标题 String -- null
data 表单初始化配置 Array -- --
formModel 表单绑定数据对象,一般传入空对象,表单自动根据配置填充数据 Object -- {}
colsCount 表单布局一行显示几列 Number -- 2
labelWidth 表单label宽度 String auto/100px 80px
readonly 表单是否只读 Boolean -- false

Form Methods

方法名 说明 参数
resetFields 重置表单 --
validate 校验表单 success:校验成功回调函数,error:校验失败回调函数
clearValidate 清空表单校验结果 --

Form data属性示例

    [
        {
            prop: 'partsCode',//表单元素绑定的属性名
            label: '图号',//表单元素label
            dataType: 'varchar',//后台数据类型,组件内部会转换成对应的type
            required: true,//是否必填项
            readonly: this.row.usedCount > 0,//是否只读字段
            minlength: 5,//数据最小长度
            maxlength: 20,//数据最大长度
            rules: [{ trigger: 'blur', validator: this.validatePartsCode }]//自定义校验规则,同element-ui
        },
        {
            prop: 'partsName',
            label: '名称',
            dataType: 'varchar',
            required: true,
            maxlength: 20
        },
        {
            prop: 'supplierCode',
            label: '供应商',
            type: 'searchSelect',//表单元素需要生成的组件类型
            searchType: 'supplier',//查询搜索下拉框需要配置的搜索类型,同时需要在SearchSelect组件listConfig属性配置相关查询配置
            dataType: 'varchar',
            required: false,
            rules: []
        },
        {
            prop: 'remark',
            type: 'textarea',
            label: '备注信息',
            dataType: 'varchar',
            maxlength: 100,
            required: false,
            rules: []
        }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 3.7 IndexLayout 列表页面通用布局组件

组件截图

IndexLayout Attibutes

参数 说明 类型 可选值 默认值
searchTitle 查询组件标题 String -- null
statistics 头部统计组件配置数据 Array -- null
search 查询组件配置数据,同TableSearch Array -- null
searchExtension 查询组件高级搜索配置数据,同search Array -- null
searchParam 查询组件查询参数对象,一般传一个空对象 Object -- null
searchBtns 查询组件附加按钮配置,同TableButtons Array -- []
tableBtns 表格顶部按钮配置,同TableButtons Array -- null
table 表格配置,同DynamicColTable Object -- null
drawerData 抽屉组件配置 Object -- null
dialogData 弹框组件配置 Object -- null

IndexLayout Methods

方法名 说明 参数
tableDoLayout 重新调整表格布局 --
closeDrawer 关闭抽屉 --
closeDialog 关闭弹框 --

IndexLayout Events

事件名 说明 回调参数
updated 弹框或者抽屉组件内部组件的updated事件 --
search 表格数据查询事件,默认加载完毕或者点击查询按钮执行一次 查询组件参数对象或者分页参数对象

IndexLayout drawerData属性示例

    {
        activedIndex: null,//当前抽屉显示的内容,取contents数组中对应元素下标,为null时不显示
        contents: [modelForm],//抽屉中需要展示的组件,可以通过activedIndex设置切换
        prop: {
            id: null, scoreType: ''//为抽屉内部组件传入参数,支持动态修改。内部组件可以通过props接收该参数
        }
    }
1
2
3
4
5
6
7

IndexLayout dialogData属性示例

    {
        activedIndex: null,//当前弹框显示的内容,取contents数组中对应元素下标,为null时不显示
        contents: [modelForm],//弹框中需要展示的组件,可以通过activedIndex设置切换
        prop: {
            id: null, scoreType: ''//为弹框内部组件传入参数,支持动态修改。内部组件可以通过props接收该参数
        }
    }
1
2
3
4
5
6
7

# 3.8 SearchSelect 搜索下拉框组件

组件截图

SearchSelect Attibutes

参数 说明 类型 可选值 默认值
v-model 下拉框选中项的值,多选时为数组 Number/String/Array --
type 搜索组件类型 String user/role/... --
readonly 组件是否为只读状态 Boolean -- false
placeholder 占位符 String -- --
multiple 是否支持多选 Boolean -- false
delay 延迟查询(ms) Number -- 500
defaultSelect 如果查询结果只有一条时,是否默认选中 Boolean -- true
displayMember 下拉框选项显示值绑定的属性名,不传时取组件内部配置 String -- null
valueMember 下拉框选项实际值绑定的属性名 String -- null
useSearchMethodForDetail 使用查询列表的api初始化选中项详情 Boolean -- false
keywordMinLength 触发查询的最小关键字长度 Number -- 0

SearchSelect Events

事件名 说明 回调参数
change 选中项发生改变时的回调函数 选中项的值,多选时为数组

# 3.9 SelectInput 选择弹框组件

组件截图

SelectInput Attibutes

参数 说明 类型 可选值 默认值
label label属性 String -- --
placeholder 占位符 String -- --
width 组件宽度 Boolean -- false
placeholder 占位符 String -- --
clearable 是否可以清空内容 Boolean -- true

SelectInput Methods

方法名 说明 回调参数
showSlot 显示插槽弹框 --
hideSlot 隐藏插槽弹框 --

# 3.10 StateStatistics 状态统计组件

组件截图

StateStatistics Attibutes

参数 说明 类型 可选值 默认值
stateList 统计数据,最多显示5条数据,超出部分左右按钮点击滚动显示 Array -- --

StateStatistics stateList属性示例

    [
        {
            title: '升级总台次',
            text1: '1234'
        },
        {
            title: '升级成功总台次',
            text1: '343'
        },
        {
            title: '升级车辆数',
            text1: '345'
        },
        {
            title: '升级成功率',
            text1: '99%'
        },
        {
            title: '任务数',
            text1: '345'
        },
        {
            title: '未完结',
            text1: '23'
        }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 3.11 TableButtons 表格按钮组件

组件截图

TableButtons Attibutes

参数 说明 类型 可选值 默认值
btnsData 按钮初始化数据 Array -- --

TableButtons btnsData属性示例

    [
        {
            type: 'add',
            click: this.openCreate,
            permission: 'base:upgrade:add'
        }{
            type: 'delete',
            click: this.delete,
            permission: 'base:upgrade:delete'
        }{
            type: 'export',
            click: this.export,
            permission: 'base:upgrade:export'
        }{
            type: 'import',
            click: this.import,
            permission: 'base:upgrade:import'
        }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 3.12 TableSearch 表格查询组件

组件截图

TableSearch Attibutes

参数 说明 类型 可选值 默认值
data 查询表单初始化数据 Array -- --
searchParam 查询参数,一般传入空对象 Object -- --
btns 查询组件扩展按钮配置,同TableButtons Array -- []
extension 是否为扩展查询参数/高级搜索配置 Boolean -- false
labelWidth label宽度,auto时全部按最长文字宽度显示 String 100px/auto auto

TableSearch Methods

方法名 说明 参数
search 生成查询参数并触发父组件search事件 --
reset 重置查询参数 --

TableSearch Events

方法名 说明 回调参数
search 查询数据事件 查询参数

TableSearch data属性示例

    [
        {
            type: 'text',
            label: '计划名称',
            prop: 'planName',
            defaultValue: '',
            maxlength: 30
        },
        {
            type: 'list',
            label: '计划状态',
            prop: 'curSteps',
            placeholder: '全部',
            listData: [
                {
                  label:'状态1',
                  value:1
                },
                {
                  label:'状态2',
                  value:2
                }
            ]
        },
        {
            type: 'dateRange',
            label: '创建时间',
            prop: 'createTime',
            defaultValue: ''
        }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 4. 二次开发

# 4.1 页面开发

# 4.2 菜单配置

# 4.3 权限配置

更新时间: 1/9/2023, 5:35:51 PM