安装
npm install winowe-ui --save
使用
winoweui.nwInstall(Vue, { axios: request || axios })
Vue.component(winoweui.compSearch.name, winoweui.compSearch)
Vue.component(winoweui.compMenus.name, winoweui.compMenus)
使用 compTable 组件时候 vue 上面需要有$axios 存在
Vue.component(winoweui.compTable.name, winoweui.compTable)
devideUpload
分片上传文件
file: input 获取到的文件信息，包含 file、content、message、status
action: 文件上传的地址， 默认'/basic-gateway/basic-minio/upload/base64'
processCb: 获取上传分片进度的回调函数
errorCb: 上传报错的回调
finallCb：所有分片上传完成的回调函数，包含每个分片返回的信息
headers：配置 headers 参数
size：分片的大小，以 B 为计算单位
application：存储桶，可以理解为业务模块
params: object{}对象，其他需要携带的上传参数
compMenus
基于 vue 和 elementUI 二次开发的菜单组件。
<template>
<comp-menus :menus="menus" :value.sync="defaultMenu"></comp-menus>
</template>
<script>
export default {
data() {
return {
defaultMenu: '/RoadProjectManagement/approvalTrafficOrganizationPlan',
menus: [
{
icon: 'icon-jifenguize',
id: 'zb2',
label: '一级菜单1',
labelCode: null,
menuType: '2',
menuUrl: '/dangerRoad',
parentId: null,
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
},
{
icon: 'icon-jiaotongshijianfenxi',
id: 'zb3',
label: '一级菜单2',
labelCode: null,
menuType: '1',
menuUrl: '/motorcycleMang1',
parentId: null,
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [
{
icon: 'icon-kapianmoshi',
id: 'zb31',
label: '二级菜单1',
labelCode: null,
menuType: '2',
menuUrl: '/roadIntegral',
parentId: 'zb3',
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
},
{
icon: 'icon-jinglingguanli',
id: 'zb32',
label: '二级菜单2',
labelCode: null,
menuType: '2',
menuUrl: '/tunnelIntegral',
parentId: 'zb3',
qxbs: 'ORDER:JCSB:MOTORCYCLE',
xtid: null,
children: [],
}
],
}
],
}
},
created() {},
methods: {},
}
</script>
compTable
基于 vue 和 elementUI 二次开发的表格组件，支持 el-table 基础功能，扩展分页查询，可支持动态和静态数据，目的是提高开发效率，减少代码量。
由于组件数据是通过组件内部请求发起，故需要将 axios 挂在到组件上；原因：分页时需要重新拉取数据，一般项目会对请求和返回头进行封装，例如设置 token，故将 axios 对象传入。
注：组件已与后端约定好数据返回格式
<template>
<div class="app-table">
<p>动态数据</p>
<comp-table :rowKey="'lsh'" :cols="cols" :opts="opts" ref="comTable" class="mt16"></comp-table>
<p>静态数据</p>
<comp-table
:rowKey="'lsh'"
style="margin-top: 10px"
:cols="cols"
:opts="opts1"
ref="comTable"
class="mt16"
></comp-table>
</div>
</template>
<script>
export default {
data() {
return {
opts: {
url: '/api/login',
},
opts1: {
dataType: 'static',
tableList: [
{
lsh: '123',
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
},
{
lsh: '124',
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
},
],
},
cols: [
{ isSelect: true,reserveSelection: true },
{ title: '序号',isIndex: true },
{ title: '流水号', key: 'lsh',sortable: true },
{ title: '检验流水号', key: 'jylsh' },
{ title: '检测线代号', key: 'jcxdh' },
{ title: '安检机构编码', key: 'jyjgbh' },
{
title: '操作',
render: (h, p) => {
console.log(h)
return h(
'el-button',
{
props: {
type: 'text',
},
},
['编辑']
)
},
},
],
}
},
created() {
for (let index = 0; index < 10; index++) {
this.opts1.tableList.push({
lsh: '124' + index,
jylsh: '4234',
jcxdh: '153423',
jyjgbh: '1122413',
})
}
},
methods: {
getRowKey(row) {
console.log(row)
return row.lsh
},
},
}
</script>
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| size |
Table 的尺寸 |
String |
medium / small / mini |
medium |
| exportName |
导出文件的名称 |
excel 文件 |
- |
- |
| showHeader |
是否展示表头 |
Boolean |
- |
|
| rowStyle |
{row, rowIndex}行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style |
Object / function |
- |
|
| rowKey |
row key |
String / function |
- |
'id' |
| pagination |
分页配置，是否展示 show,分页大小:pageSize,页码按钮的数量，当总页数超过该值时会折叠 pagerCount |
Object |
{show:true,pageSize:0,pagerCount:5} |
-- |
| border |
是否带有纵向边框 |
Boolean |
- |
true |
| opts |
数据请求配置，必填 dataType 静态或动态数据类型,type 请求类型,url 请求地址,params 默认请求参数,tableList 静态数据 dataType 为 static 时生效 |
Object |
{dataType: 'remote',type: 'get',url: '',params: '',tableList:[]} |
-- |
| showIndex |
是否显示序号 |
Boolean |
- |
false |
| cols |
表格列设置；reserveSelection 在 isSelect 为 true 时生效,一般情况设置首列为{isSelect: true,reserveSelection: true},checkSelectable 设置当前列是否可选,sortable 设置是否排序 |
Array |
[{title: '列名',key: '字段',isSelect:false,reserveSelection:true,checkSelectable:true,sortable: true,width:'宽度',expand:'是否展开',fixed:'浮动',renderHeader:'',render:(h,row)=>{}}] |
|
| maxHeight |
Table 的最大高度。合法的值为数字或者单位为 px 的高度 |
string/number |
-- |
-- |
| stripe |
是否为斑马纹 table |
Boolean |
- |
true |
| showOverflowTooltip |
表格列超出是否显示 tooltip |
Boolean |
- |
true |
| summaryConf |
合计行相关配置 |
Object |
{summary: false, sumText: '',showSummary: '',objectSpanMethod: () => {},summaryMethod: () => {},} |
|
| highlightCurrentRow |
是否要高亮当前行 |
Boolean |
- |
false |
| 方法名 |
说明 |
参数 |
| refresh |
刷新 |
params:Object,可传入附加参数或覆盖已有参数 |
| 事件名 |
说明 |
参数 |
| selectOne |
当用户手动勾选数据行的 Checkbox 时触发的事件 |
selection, row |
| selectAll |
当用户手动勾选全选 Checkbox 时触发的事件 |
selection |
| selection-change |
当选择项发生变化时会触发该事件 |
selection |
| pagenum-change |
当页码发生变化时会触发该事件 |
val |
| pagesize-change |
当每页数据条数发生变化时会触发该事件 |
val |
| getData |
dataType 为 remote 时，数据获取成功事件 |
dataList,total,pageNum,pageSize |
| cellClick |
当某个单元格被点击时会触发该事件 |
row, column, cell, event |
compSearch
基于 vue 和 elementUI 二次开发的搜索组件。
<template>
<comp-search
:searchs="searchs"
:labelWidth="labelWidth"
:labelPosition="labelPosition"
@search="search"
@reset="reset"
@changeSelect="change"
></comp-search>
</template>
<script>
export default {
data() {
return {
queryForm: {},
labelWidth: '130px',
labelPosition: 'right',
searchs: [
{
name: '阿斯顿撒多撒大撒大阿',
type: 'input',
key: 'name',
spacing: -1.2,
placeholder: '请输入名称',
},
{
name: '位置',
type: 'select',
list: [
{
name: '北京',
value: '1',
label: '北京',
},
{
name: '天津',
value: '4',
label: '天津',
},
],
key: 'address',
placeholder: '请选择位置',
},
{
name: '单选',
type: 'radio',
list: [
{
name: '北京',
value: '1',
label: '北京',
},
{
name: '上海',
value: '2',
label: '上海',
},
],
key: 'address',
placeholder: '请选择位置',
},
{
name: '日期时间',
type: 'datePicker',
key: 'datePicker1',
},
{
name: '数量',
type: 'inputNumber',
key: 'number',
min: 0,
max: 100,
placeholder: '请输入数量',
},
{
name: '状态',
type: 'cascader',
list: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航',
},
{
value: 'dingbudaohang',
label: '顶部导航',
},
],
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
}
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'rate',
label: 'Rate 评分',
},
{
value: 'form',
label: 'Form 表单',
},
],
},
]
},
{
value: 'ziyuan',
label: '资源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '组件交互文档',
},
],
},
],
key: 'state',
isShowAllLevels: false,
props: { multiple: true, checkStrictly: true },
clearable: true,
collapseTags: true,
filterable: true,
},
{
name: '日期范围',
type: 'daterange',
key: 'daterange',
},
],
}
},
created() {},
methods: {
search2(val) {
console.log(22222, val)
},
reset2() {
console.log(10000)
},
search(val) {
const params = {
...val,
startTime: val.daterange ? val.daterange[0] : '',
endTime: val.daterange ? val.daterange[1] : '',
}
delete params.daterange
console.log(params)
},
reset(val) {
const params = {
...val,
startTime: '',
endTime: '',
}
delete params.daterange
console.log('搜索表单', params)
},
change(key, val) {
console.log(key, val)
console.log(this.queryForm)
},
},
}
</script>
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| searchs |
搜索列表渲染的元素数组。每个数组对象包含{必填项 name:label 名称,type:元素类型,key:唯一的字段名;可配置项 spacing:配置 label 字间距;placeholder:框内提示文字,list:如果是下拉选择或级联选择需要传入数组,min:计数器允许的最小值数字,max:计数器允许的最大值数字,isShowAllLevels:级联选择框中是否显示选中值的完整路径,clearable:是否可以清空,collapseTags:多选模式下是否折叠 Tag,filterable:是否可搜索选项,props:级联选择器{ multiple: 是否多选, checkStrictly: 是否严格的遵守父子节点不互相关联 },multiple:下拉框是否多选,} |
Array |
-- |
[] |
| showBtn |
是否显示按钮 |
Boolean |
true/false |
true |
| widths |
单元素总宽度 |
Number |
所有数字 |
360 |
| searchForm |
可设置搜索组件的默认值 |
Object |
-- |
{} |
| labelWidth |
label 的宽度 |
String |
所有数字需要带单位 px |
80px |
| labelPosition |
label 的位置 |
String |
left/right |
left |
| 方法名 |
说明 |
参数 |
| search |
点击搜索按钮 |
请求的form 表单数据 |
| reset |
点击重置按钮 |
返回请求的 form 表单值清空 |
| changeSelect |
change 事件对应的函数 |
key:对应的键，value:选中的值 |
| 事件名 |
说明 |
参数 |
| change |
下拉列表、时间选择、级联选择器等选择时触发的事件 |
key:对应的键，value:选中的值 |