winowe-ui v1.4.0

安装

npm install winowe-ui --save

使用

• 全局注册使用全部组件

winoweui.nwInstall(Vue, { axios: request || axios })

• 全局注册使用单个组件 compTable 除外

Vue.component(winoweui.compSearch.name, winoweui.compSearch)
Vue.component(winoweui.compMenus.name, winoweui.compMenus)

• 全局注册使用 compTable 组件

使用 compTable 组件时候 vue 上面需要有$axios 存在

Vue.component(winoweui.compTable.name, winoweui.compTable)

• 局部注册使用单个组件 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>

• props

• 函数

• 事件

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>

• props

• 函数

• 事件