vue

49版本chrome使用flex布局的注意事项

    // 纵向flex布局，子元素需向下面这样写才能继承父级百分比，给felex下面先放置一个绝对定位的元素包住下面所有的，或者用绝对定位去布局，看个人喜好
    <div class="flexYbox" style="height: 100%;">
        <div class="content">上面内容</div>
        <div class="flex">
            <div style="width: 100%; height: 100%; position: absolute;">
                下面内容
            </div>
        </div>
    </div>

    <div style="height: 100%; display:flex; flex-direction: column;">
        <div class="content">上面内容</div>
        <div style="flex: 1;">
            <div style="width: 100%; height: 100%; position: absolute;">
                下面内容
            </div>
        </div>
    </div>

    // 纵向flex布局，另外写法，如果display: flex; 元素的子元素只有一个flex
    <div class="flexYbox" style="height: 100%;">
        <div class="flex" style="height: 100%;">
            内容
        </div>
    </div>

    <div style="height: 100%; display:flex; flex-direction: column;">
        <div style="flex: 1; height: 100%;">
            内容
        </div>
    </div>

    // 横向flex布局，这个里面需要这样写子集才能继承父级百分比
    <div class="flexbox" style="height: 100%;">
        <div class="content">左侧内容</div>
        <div class="flex" style="height: 100%;">
            右侧内容
        </div>
    </div>

    <div style="height: 100%; display:flex;">
        <div class="content">左侧内容</div>
        <div style="flex: 1; height: 100%;">
            右侧内容
        </div>
    </div>

模版name设置

    每个模版皆放到views目录，模版路径对应模版路由，该模版name设置则是把路由的第一个‘/’删除，后面的‘/’改为‘_’
    例：
    路由：/sysManage/system/menu
    模版路径：views/sysManage/system/menu.vue
    name：sysManage_system_menu

权限配置

    在需要设置权限的按钮上面添加属性v-has，同时还需要设置一个资源id名称，id名称为在资源管理平台设置的资源id
    例：
        <div v-has id="id"></div>  该元素，如果在设置了资源id会显示，如果没有该id则不会渲染
        <div v-has></div>  该元素在渲染时不会渲染

ajax

axios插件使用方法，已全局定义 调用方法：

    this.$api({
        url: '',
        method: 'post',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        },
        headers: {
            'Content-Type': 'application/json'
        },
        loading:true,// 加载框，默认为true
        timeout: 10000, // 指定请求超时的毫秒数
        responseType: 'json', // 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',
        // 允许为上传处理进度事件
        onUploadProgress: function(progressEvent){

        },
        // 允许为下载处理进度事件
        onDownloadProgress: function(progressEvent){

        }
    }).then(function (response) {
        // 请求成功
        console.log(response)
    }).catch(function (error) {
        // 请求失败
        console.log(error)
    })

加密、解密

    this.$utils.encrypt(str) // 加密 str：需加密字符串
    this.$utils.decrypt(str) // 解密  str:加密后的字符串

cookie

    //设置一个cookie
    this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) 
    //获取一个cookie
    this.$cookies.get(keyName)
    //删除一个cookie
    this.$cookies.remove(keyName [, path [, domain]])
    //注意：cookie是加密存储和解密获取，无需用加密方法加密后再进行存储和获取后再进行解密

table

    <ts-table :source="source" :row-id="" @onSelectRow="onSelectRow" width="100%" height="100%" ref="tstable"></ts-table>
    row-id // 自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）
    childTable // 子表参数，其配置跟source一致
    childLazy // 子表格懒加载 boolean 默认false 
    source // 表格基本配置
        {
            url: '', // 数据接口地址
            dataType: 'json', // 数据状态  值：json, local  默认json  json：动态数据  local：静态数据
            data: [], // dataType为local时的静态数据
            method: 'get', // 接口请求方式
            postData: {}, // 接口传参配置
            colModel: [], // 表头及行列配置
            pageSize: 20, // 非必须，每页条数 默认值 20
            sord: 'desc', // 非必须，排序  默认值： desc
            rownumbers, true, // 打开左侧序号列
            sortname: 'create_date', // 初始化排序字段，非必须，默认值： create_date
            contentType: 'application/json; charset=utf-8', // 非必须，请求头contentType设置  默认值：application/x-www-form-urlencoded
            responseType: 'json', // 表示服务器响应的数据类型，非必须，默认值为json，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            totalSet: ['timeCount', 'timeCountError'], // 非必须，合计设置，填写需要合计的列, 无合计时不填写/不设置改参数
            totalSetCfg:{title:'合计',color:'red',isTop:false},//尾部合计配置
            treeNode: false, // 打开树配置
            treeChild: 'children', // 树子级参数名字
            offPage: false, // 是否关闭分页，默认false（打开分页）
            isPrint: true, // 是否打印,boolean 默认：false
            isExport: true, // 是否启用导出，boolean 默认：false
            filtrate: [], // 左侧筛选区域
            buttons: [], // 右侧操作按钮
            cellSlider: { maxField:'maxValue',showValue:true,color:'red',isThousands:true } // 单元格进度条 maxField(最大值的字段)，showValue（是否显示原值），color(进度条激活颜色)，isThousands(是否进行千分位规范)
            editor: true, // 是否打开编辑，boolean 默认：false
            show-overflow: true, 当内容过长时显示为省略号 boolean 默认true
            checkbox: false,  // 打开复选框 boolean  默认fasle
            isHasResObj:false,// 返回数据内存在object层
            noloading:false,// 是否没有加载框，默认false
            prmNames: { // 设置返回数据对应参数
                page: 'page', // 设置返回数据分页参数名
                rows: 'rows', // 设置返回数据列表参数名
                pageCount: 'total', // 总页数参数名
                totalCount: 'records' // 总条数参数名
            },
            // 可编辑配置项
            editConfig: {
                trigger: '', // 触发方式 string  值：manual（手动触发方式，只能用于 mode=row）,click（点击触发编辑）,dblclick（双击触发编辑）; 默认click
                mode: '', // 编辑模式 string  值：cell（单元格编辑模式）,row（行编辑模式）; 默认cell
                showIcon: true, // 是否显示列头编辑图标 boolean  默认true
                showStatus: '', // 只对 keep-source 开启有效，是否显示单元格值的修改状态  boolean  默认false
                showAsterisk: '', // 是否显示必填字段的红色星号  boolean  默认true
                icon: '', // 自定义可编辑列的状态图标 string
                activeMethod: function () {} // 该方法 Function({row, rowIndex, column, columnIndex}) 的返回值用来决定该单元格是否允许编辑
            }, 
            // 复选框单选时触发
            checkboxChange (rowid, data, checked) {
            // rowid：行id  data：选中行数据  checked: 是否选中  true/false
            },
            // 全选时触发
            checkboxAll (selection, checked) {
            // selection：选中行数据  checked: 是否选中  true/false
            }
        }
        colModel // 参数配置说明：
            type// 列的类型  seq：序号  checkbox：复选框 expand：展开行  html：HTML 标签（动态渲染任意 HTML 是非常危险的，很容易导致 XSS 攻击，请确保内容是可信的）
            title // 表头名称
            field // 数据参数名
            width // 列宽
            sortable // 是否开启排序  boolean 默认：true
            align // 对齐  值: left, center, right
            frozen // 冻结列，值为布尔值，true/false  冻结列的请配置到colModel的最前面
            formatter({ cellValue, row, column }) // 数据显示格式化，为函数，返回值有 cellValue: 当前单元格对应的值  row: 当前行数据   当设置formatter时，如需返回html代码渲染，设置type值为html
            class-name / 给单元格附加样式
            visible // 列是否显示 boolean 默认true
            switch // 显示开关按钮 object
                switch: {
                    onValue: 1, // 打开值
                    offValue: 0, // 关闭值
                    disabled: false, // 禁用 boolean 默认false
                    event: function (colValue, row) {} // 回调 row:当前行数据  colValue当前点击单元格数据
                }
            buttons // 列放置点击按钮
                title // 按钮名称
                text // 按钮提示名称
                color // 按钮字体颜色
                event // 按钮点击时执行的方法  
                    function (row, index) {}
                    row // 行数据
                    index // 当前第几行
                icon // 按钮图标，如不配置显示默认图标
                isValName // 判断按钮是否显示的字段名，该字段名需为该列表返回数据里面的其中一个字段
                isVal // 判断按钮是否显示字段的值，当显示字段为设置值时，该按钮显示否则不显示按钮
            editConfig: // 可编辑渲染器配置项
                editConfig // 参数
                    name // 渲染器名称 string  值：input, textarea, select, $input, $select, $switch
                    props // 渲染的参数（请查看目标渲染的 Props) any
                    attrs // 渲染的属性（请查看目标渲染的 Attribute） any
                    options // 只对 name=select 有效，下拉选项列表  any[]
                    optionProps // 只对 name=select 有效，下拉选项属性参数配置  any
                    optionGroups // 只对 name=select 有效，下拉分组选项列表  any[]
                    optionGroupProps // 只对 name=select 有效，下拉分组选项属性参数配置  any
                    events // 渲染组件的事件（请查看目标渲染的 Events)
                    nativeEvents // 渲染组件的原生事件（请查看目标渲染的 Events）
                    content // 渲染组件的内容（仅用于特殊组件）
                    autofocus // 如果是自定义渲染可以指定聚焦的选择器，例如 .my-input
                    autoselect // 是否在激活编辑之后自动选中输入框内容  boolean  默认false
                    defaultValue // 默认值（插入数据时列的默认值）   默认null
                    immediate // 输入值实时同步更新（默认情况下单元格编辑的值只会在被触发时同步，如果需要实时同步可以设置为 true）  boolean  默认false
        buttons // 参数配置说明
            buttons: [
                { title: '', type: '', icon: '', event: function,disabledEvent:function},
            ]
            title // 按钮名称
            event // 按钮点击时执行的方法
            icon // 按钮图标，如不配置显示默认图标
            type // 按钮类型 值：add,editor,delete   设置时，按钮图标显示对应预设好的图标
            id // 按钮的id名称
            restrict // 是否资源控制  boolean  默认false 
            disabledEvent // 返回disable的值
            
        filtrate // 参数说明
            title // 标题
            name // 筛选参数名
            type // 类型  值：text,select,date,radioGroup,checkbox
                text // 文本输入
                select // 下拉框
                date // 日期选择
                onlydate // 单选日期
                onlydatetime // 单选日期时间
                range // 日期区间
                rangetime // 时间区间
                radioGroup // radio单选组
            inputType // 输入框类型 text,search  默认search  文本输入框类型
            width // 宽度
            isbutton // 是否在如输入框右侧添加筛选触发按钮，仅type值为text时添加，如过都没配置，会在筛选最后添加一个搜索按钮
            deploy // 下拉框配置参数，参考下拉框的配置
            value // 类型为radioGroup时的初始值
            data // 类型为radioGroup时的组件数据
            startName // 开始日期  仅type为date时需设置
            endName // 结束日期  仅type为date时需设置
            value // 初始值  仅type为date时需设置
            trueLabel //选中值 仅type为checkbox时需设置
            falseLabel //取消值  仅type为checkbox时需设置
            event // 日期、下拉框回调，下拉框返回 选中行数据(row)，日期是返回开始时间（s）、结束时间（e）
                下拉框：function (row) {}
                日期：function (s, e) {}
                单选组: function (value) {}
                复选框组: function (val) {} //选中值
        注：buttons，filtrate同时都不设置时，筛选区域和按钮区域才不会留出位置
    width // 表格宽度
    height // 表格高度

    事件：
        onSelectRow // 选中行返回参数为选中行数据
            回调 function (row){}
            row // 当前行数据
        cellClick // 单元格被点击时会触发该事件
            回调 function (row, column){}
            row // 当前行数据
            column // 当前单元格数据
        childLazyFn // 该方法 Function(resolve, row) 用于异步加载展开后的内容（必须以resolve()结尾）
        // 复选框单选时触发
        checkboxChange (rowid, data, checked) {
        // rowid：行id  data：选中行数据  checked: 是否选中  true/false
        },
        // 全选时触发
        checkboxAll (selection, checked) {
        // selection：选中行数据  checked: 是否选中  true/false
        }
        // 数据加载完成
        loadSuccess (data) {
        // data 当前页数据
        }

    方法：
        this.$refs.tstable.getCurrentRecord() // 获取高亮行的数据
        this.$refs.tstable.getTableData() // 获取当前表格的数据（完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据）
        this.$refs.tstable.getData(rowIndex) // 获取数据，和 data 的行为一致，也可以指定索引获取数据
        this.$refs.tstable.getInsertRecords() // 获取插入的临时数据
        this.$refs.tstable.getRowById() // 根据行的唯一主键获取行
        this.$refs.tstable.getRowid() // 根据行获取行的唯一主键
        this.$refs.tstable._getRowIndex(row) // 根据 row 获取相对于当前数据中的索引
        this.$refs.tstable.getRowIndex(row) // 根据 row 获取相对于 data 中的索引
        this.$refs.tstable.removeCheckboxRow() // 删除复选框选中的行数据（不支持深层结构）
        this.$refs.tstable.remove(rows) // 删除指定行数据（不支持深层结构），指定 row 或 [row, ...] 删除多条数据，如果为空则删除所有数据
        this.$refs.tstable.getCheckboxRecords() // 用于 type=checkbox，获取已选中的行数据
        this.$refs.tstree.reloadRow(rows, record, field) // 局部加载行数据并恢复到初始状态（对于行数据需要局部更改的场景中可能会用到） rows: Row | Row[], record: object, field?: string
        this.$refs.tstree.reloadExpandContent(rows) // 用于懒加载展开行，重新加载展开行的内容  rows: Row | Row[]
        this.$refs.tstree.reloadTreeChilds(rows) // 用于懒加载树表格，重新加载子节点  rows: Row | Row[]
        this.$refs.tstable.setActiveCell(row, field) // 用于 edit-config，激活单元格编辑  row: Row(行ID), field: string(列名)
        this.$refs.tstable.setActiveRow(row) // 用于 edit-config，激活行编辑，如果是 mode=cell 则默认激活第一个单元格  row: Row(行ID)
        this.$refs.tstable.clearCurrentRow() // 手动清除行选中
        this.$refs.tstable.clearActived() // 手动清除单元格激活状态
        this.$refs.tstable.clearSelected() // 手动清除单元格选中状态
        this.$refs.tstable.clearAll() // 手动清除表格所有条件，还原到初始状态（对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存）
        this.$refs.tstable.clearCheckboxRow() // 用于 type=checkbox，手动清空用户的选择
        this.$refs.tstable.clearCheckboxReserve() // 用于 checkbox-config.reserve，手动清空用户保留选中的行数据
        this.$refs.tstable.openExport(obj) // 导出当前页
            obj: {
                filename: '', // 文件名
                type: '' // 文件类型 csv, html, xml, txt
            }

树

    <ts-tree title="" :emphasize="true" :is-border="true" row-id="" source="" searchWords="" type="" checkRows=""></ts-tree>
    属性
    title  标题
    emphasize 重点标柱 * boolean 默认：false
    is-border  是否需要边框  boolean 默认：false
    expandAll  展开全部  boolean 默认：false
    search-words  树检索内容 string
    row-id  数据唯一键值参数名，如不设置默认为id
    checkRows 初始化选中项  Array  每项的id值组合的对象，例：['1', '2', '3']
    is-editor 是否开启编辑
    source 数据参数配置
        {
            dataType: '',  数据模式  默认 json   值： json, local(静态数据)
            url: '',  接口地址
            method: 'get',  请求方式
            data: {}, 请求参数 静态数据时为初始化数据
            textName: 'name',  树显示字段名
            childName: 'children',  子级字段名
            type 下拉树状态，设置是否打开复选框   值：checkbox, normal   默认值: normal
        }
    
    事件
    beforeExpand 展开前
        回调 function(id, node){}
        id：对应 zTree 的 treeId，便于用户操控
        node：要展开的父节点 JSON 数据对象
    beforeCollapse 折叠前
        回调 function(id, node){}
        id：对应 zTree 的 treeId，便于用户操控
        node：要折叠的父节点 JSON 数据对象
    change 复选框单选时触发 
        回调：function (row, selection){}
            row: 当前勾选行数据，其中参数checked为是否选中状态，true：选中；false：未选中
            selection: 当前选中的所有对象

    radioChange  单选框激活时触发
        回调 function (row){}
            row: 当前勾选行数据
    onSelectRow  选中行返回参数为选中行数据，非单选或复选框状态
        回调 function (row){}
            row: 当前勾选行数据

    方法：
        this.$refs.ztree.expandNode(index,expandBloon,sanExpand) 展开某一个节点 index 是第几个从0开始,第二个参数展开为true 关闭节点为false, 第三个参数 是否展开该子节点下的所有子节点
        this.$refs.ztree.getData()  获取当前树的数据
        this.$refs.ztree.getCheckboxRecords() 获取已选中的行数据
        this.$refs.ztree.getCheckboxIndeterminateRecords() 获取半选状态的行数据
        this.$refs.ztree.refresh()  刷新树
        this.$refs.ztree.clearCurrentRow()  手动清空选择的状态
        this.$refs.ztree.setAllTreeExpand(true)  展开所有子节点
        this.$refs.ztree.setSelected([])  // 设置选中，其中参数值与行数据里面rowId参数对应值一样

弹窗

    <diaLog :source="source" @close="close" @open="open" ref="d1"></diaLog>
    source : 基本配置
        {
            title: '弹窗', // 标题
            width: '400px', // 宽
            height: '300px', // 高
            closeBtn: false, // 关闭按钮区域，boolean 默认：false
            // 按钮
            buttons: [
                { text: '确认', event: function() {} }
            ]
        }
    open // 打开弹窗回调
    close // 关闭弹窗回调
    show // 在窗口显示时会触发该事件
    hide // 在窗口关闭时会触发该事件
    type // 显示方式，值：normal, right  默认值normal
    cover // 右边打开时，是否打开遮罩背景，boolean 默认：true
    offCloseBtn // 是否关闭底部关闭按钮，boolean 默认：false
    方法：
        this.$refs.d1.open() // 打开弹窗
        this.$refs.d1.close() // 关闭弹窗

布局

文本输入

    <ts-input title="" v-model="" name="" type=""></ts-input>
    属性
    title  标题
    value  值
    v-model  绑定值
    placeholder  当值为空时，显示的占位符
    name  原生 name 属性
    disabled  是否禁用  boolean  默认false
    readonly  是否只读  boolean  默认false
    maxlength 最大字符数
    type  渲染类型 text, search, number, integer, float, password, date, datetime, week, month, year   默认  text
    prefix-icon 头部图标
    suffix-icon 尾部图标
    emphasize 重点标柱 *  boolean  默认false
    max：最大值 （只对 type=number|integer|float 有效，最小值：string | number ）
    min:最小值 （只对 type=number|integer|float 有效，最小值：string | number ）

    事件
    prefixClick  在点击头部图标时触发该事件
    search-click type=search时，点击搜索图标触发事件
    change 内容改变时触发
    blur 失去光标时触发
    focuse 聚焦时触发
    keyEnter 回车触发
    插槽
    

单选框

    <ts-radio title="" v-model="" name="" data="" type=""></ts-radio>
    属性
    title  标题
    value  值
    v-model  绑定值
    name  原生 name 属性
    disabled  是否禁用  boolean  默认false
    emphasize 重点标柱 *
    isDefaultFirst 是否默认第一个被选中
    data  单选按钮属性  数组  
        格式：[{ value: 1, text: '名称' }]
    type  显示样式，默认：text   值：goup（按钮组单选） text（单选按钮样式）
    
    事件
    change 值改变时触发该事件  { label, $event }

switch

    <ts-switch title="" v-model=""></ts-switch>
    属性
    title  标题
    value  值
    v-model  绑定值
    disabled  是否禁用  boolean  默认false
    emphasize 重点标柱 *
    on-label  打开时显示的文字
    off-label  	关闭时显示的文字
    on-value  打开时的值
    off-value  关闭时的值
    
    事件
    change 值改变时触发该事件  { value, $event }

复选

    <ts-checkbox v-model="" title=""><ts-checkbox>
    属性
    title  标题
    value  值
    v-model  绑定值  string/object  
        值为字符串时格式：name:value;name2:value2;
        值为对象时格式：
        [
            { name:'name', value: 'value' },
            { name:'name2', value: 'value2' }
        ]
    emphasize 重点标柱 *
    data  单选按钮属性  数组  
        格式：[
            { name: 'name', value: 1, text: '名称', disabled: true },
            { name: 'name1', value: 1, text: '名称1' }
        ]
        name  复选框字段名称
        value  复选框值
        text  复选框显示文案
        disabled  当前复选框是否禁用
    
    事件
    change 值改变时触发该事件 
        回调： function (obj) {}
        obj 为当前已勾选的项

下拉框

    <ts-select v-model="" title="" placeholder="" source="" ref="select"></ts-select>
    属性
    title  标题
    value  值
    v-model  绑定值 对应source属性里面设置的code的参数名返回值
    placeholder  当值为空时，显示的占位符
    disabled  是否禁用  boolean  默认false
    emphasize 重点标柱 *
    width 宽度
    checkRows 下拉树时，初始化选中项  Array  每项的id值组合的对象，例：['1', '2', '3']
    source  数据配置  object
        source属性
            dataType  数据来源方式  值：local（静态数据）, json（动态数据）   默认json
            headers 请求头设置
            url  动态数据时接口地址
            method  动态数据接口请求方式
            data  动态数据时接口传参，数据格式为object；如果静态数据时，该参数为list数据，数据格式为array
            page  动态数据时，分页的参数名
            pageSizeName 每一页条数参数名，如不设置，默认为'pageSize'
            pageSize 每一页条数
            code  显示的code参数名，为下拉树时，该参数为唯一键值参数名，其值不可重复
            text  下拉框显示的内容参数名
            condition  动态数据时，检索的字段名
            choice  是否多选 boolean  默认false
            tree  是否下拉树 boolean  默认false  和chioce同时存在时为下拉框，非下拉框树
            treeType  下拉树类型  checkbox, normal   默认值: checkbox
            treeExpand  树是否默认全部展开  boolean   默认 true
            children 下拉树状态时，子节点参数名
            isReq  是否初始化请求数据进行数据渲染，查询通过v-model值和source.code参数名进行查询，如果
            value  初始值 object { code: '', name: '' }
            grid 是否是网格型的展现方式
            gridLiWidth 网格内子类的宽度，默认值为“25%”

    事件
    change 内容改变时触发 返回当前选中code，如果是多选，返回选中项的code的字符串，逗号隔开
    selected 选中项时回调，返回选中项的数据row
    为树时selected的回调：
        function (row, selection){}
            row: 当前勾选行数据，其中参数checked为是否选中状态，true：选中；false：未选中
            selection: 当前选中的所有对象
    方法
    this.$ref.select.clear()  清空选中

文本域

    <ts-textarea v-model="" title="" placeholder=""></ts-textarea>
    属性
    title  标题
    value  值
    v-model  绑定值
    placeholder  当值为空时，显示的占位符
    name  原生 name 属性
    disabled  是否禁用  boolean  默认false
    readonly  是否只读  boolean  默认false
    maxlength 最大字符数
    emphasize 重点标柱 *
    width 宽度
    height 高度
    
    事件
    change 内容改变时触发
    blur 失去光标时触发
    focuse 聚焦时触发

上传

    <ts-upload v-model="" title="" placeholder=""></ts-upload>
    属性
    action  上传地址
    type  类型 默认缩略图模式，  image：单图上传   images:多图上传    file:文件上传
    title  标题
    value  值
    v-model  绑定值
        类型为image，直接给图片地址即可
        非image类型，值为数组
            [
                { name: '', size: '', url: '' }
            ]
            name 文件名称
            size 文件大小，单位字节
            url 文件地址
    emphasize 重点标柱 *
    width 宽度
    base64 选择的本地图片是否返回base64格式，仅用于单图上传  boolean  默认false
    size  上传文件大小限制 单位：kb
    config 上传接口的配置
        config 参数
            data 上传接口需要上传的参数即值，列
                { name: 'nnn', id: 'skdjfl1231' }
            fileName 上传接口文件的参数名
    
    事件
    success 上传/选择后回调  返回参数为选择图片对象
        type=image, 未设置上传地址，回调：
            function (obj, url){}
            obj为选择文件的对象, url是选择图片的值
        type=images、file, 未设置上传地址，回调：
            function (obj){}
            obj为选择文件的对象
        设置上传地址，回调：
            function (obj){} obj上传成功文件返回对象, 数组，值：
                name 文件名称
                size 文件大小，单位字节
                url 文件地址
                

message

    this.$mModal.message({ message: '', type: '' })
    message：提示框内容
    type： 状态，不设置则提示无图标，值：success, error, warn

确认提示框

    this.$mModal.confirm(parameter).then(type => {
      console.log(type) // type=confirm  确认按钮点击 type= cancel 关闭按钮点击
    })
    parameter object/string
        object: { message: '您确定要选中数据？', title: '测试', icon: '' }
    如果为字符串，则为消息提示框中间内容

表单

    <ts-form></ts-form>
    属性
    data  表单数据
    rules  表单验证规则 

    rules 属性
        {
            name: [
                { required: true, message: '请输入名称' }
            ]
        }
        required  是否必填  boolean  默认false
        min  校验值最小长度（如果 type=number 则比较值大小）  number
        max  校验值最大长度（如果 type=number 则比较值大小）  number
        type  数据校验的类型  string   number|string  默认string
        pattern  正则校验  RegExp|string
        message  校验提示内容
    
    注：如果需要输入内容后就校验需要调用相关事件，然后触发下面函数
    $refs.xForm.updateStatus(data.scope)
    其中data.scope是 slot-scope 这个属性设置的data
    例： <ts-form-item field="pidid" title-width="60">
            <template slot="verify" slot-scope="data">
                <ts-select v-model="editorData.pidid" title="所属部门" title-width="60" :emphasize="true" :source="parentName" @selected="managercodeFn" @input="$refs.xForm.updateStatus(data.scope)"></ts-select>
            </template>
        </ts-form-item>

    方法
    submit 提交方法

    <ts-form-item></ts-form-item>
    属性
    field  字段名

button

    <ts-button></<ts-button>
    type 类型 text,submit,reset,button  默认 button
    icon 前缀图标 string
    status 按钮的图标 值:perfect, primary, success, info, warning, danger
    disabled  是否禁用 boolean 默认false

日期区间选择

    <ts-date></ts-date>
    v-model  绑定值
    emphasize 重点标柱 *
    title  标题
    type  类型  值：range（开始结束区间日期选择）,rangetime（开始结束区间日期选择，带时分秒）, date（日期选择）, datetime(单日期时间)
    symbol 区间时，中间连接符号 默认：‘ ~ ’
    disabled  是否禁用 boolean 默认false
    width 宽度
    placeholder  当值为空时，显示的占位符

    事件
    done 点击确定时触发 返回 { s: , e:  }  s: 开始时间  e: 结束时间

删格

    使用方法详见dmeo下grid

模块多条数据编辑

    <ts-multi-mdl title="业务模块" width="50%" type="text" @change="multi"></ts-multi-mdl>
    v-model  // 绑定值，如需设置初始值，把值绑定一个数组即可，其格式和变化事件返回的数据格式一致
        // 设置回显时，如果有下拉框，在每一行值里面需设置一个rows: []，fields里面有多少条数据设置，rows就有多少数据，如果该键位对应的fields键位的数据为非下拉框，rows的改键位的值需设置为空或者空对象（row[key] = {}）
        // 数据除rows以外的其他参数名皆为fields里面设置的每一条数据里面对应的name，其参数对应的值为当前fields里配置的组件的v-model值，如果时下拉框，该值为选中数据中对应source里面设置的code设置的参数名的值
        例：
        [
            { source: '5f8e4024a31d82681bdf7bc9', params: '5f8e3ff5a31d82681bdf7bc8', value: 123,
                rows: [
                    {},
                    { id: '5f8e4024a31d82681bdf7bc9', queryName: '测试1' },
                    { id: '5f8e3ff5a31d82681bdf7bc8', name: '测试2' }
                ]
            }
        ]
    emphasize // 重点标柱 *
    title  // 标题
    fields // 数组  设置可添加字段名，默认 [{title: '值', name: 'value', type: 'text'}]
        id // 当前项配置id，在fields里面为唯一兼职，下拉框联动时需要
        title // 显示名称
        name // 返回数据值字段名称,该参数不设置时，期名称为：value + fields的键值
        type // 类型text(文本输入框), select（下拉框）, groupRadio(单选按钮), tsMultiMdl(自增组件的递归), switch(开关按钮)
        source // 为下拉框时，下拉框的参数配置（参考ts-select的source配置）  object
        isGanged // 是否联动  默认false boolean
        gangedId // 联动项id 可多选用,隔开 如“
        gangedKey // 当被联动的为text时，该值为联动下拉框的健值
        flex // 宽度所占比例
        radioData // type为radio专用
        onLabel // 打开文案(switch时生效)
        onValue // 打开值， 默认true(switch时生效)
        offLabel // 关闭文案(switch时生效)
        offValue // 关闭值， 默认false(switch时生效)
        fields // 用于type为tsMultiMdl，子组件项
        formatter // 联动时，自定义配置联动对象联动参数，需return返回下拉框配置参数，及source配置，该配置会自动匹配到source，目前只对下拉框有效
            例：
            formatter: row => {
                let arr = []
                return {
                    data: arr // 关联数据
                    isHide:row.id === 'xxx' // 所关联的id值被选择时，隐藏
                    xxx(为绑定text框的name值):xxxx
                }
            }
            // 其中data为source里面的data属性
    placeholder // 当值为空时，显示的占位符

    // fields样例
    [
        { title: '值', name: 'value' },
        { title: '数据源', name: 'source', type: 'select', isGanged: true, gangedId: 'params', source: {
            dataType: 'local',
            data: this.dataSource,
            code: 'id',
            text: 'queryName',
            value: {
              name: '',
              code: ''
            }
          },
          formatter: (row) => {
            let arr = []
            return {
              data: arr
            }
          }
        },
        { title: '参数', name: 'params', id: 'params', type: 'select', source: {
            dataType: 'local',
            data: [],
            code: 'id',
            text: 'name',
            value: {
              name: '',
              code: ''
            }
          }
        }
    ]
    

    事件
    change // 输入框数据变化时触发
        function: (obj) {} 
        obj: [
            { source: '5f8e4024a31d82681bdf7bc9', params: '5f8e3ff5a31d82681bdf7bc8', value: 123,
                rows: [
                    {},
                    { id: '5f8e4024a31d82681bdf7bc9', queryName: '测试1' },
                    { id: '5f8e3ff5a31d82681bdf7bc8', name: '测试2' }
                ]
            }
        ]

tab选项卡

    <mTabs right-icon="icon-close iconfont" @right-icon-button="rightIconFn" @tagClick="tagClick">
      <mTabPane label="用户管理" :keys="1">1</mTabPane>
      <mTabPane label="配置管理" :keys="2">2</mTabPane>
      <mTabPane label="角色管理" :keys="3">3</mTabPane>
      <mTabPane label="定时任务补偿" :keys="4">4</mTabPane>
    </mTabs>
    label  标签名
    keys 当前排序位置
    right-icon 标签右侧图标按钮

    事件
    right-icon-button 右侧按钮点击执行事件 返回keys
    tagClick 点击标签执行事件  返回keys

G2报表

    import tsG2Chart from '@/components/tsG2Chart.vue'
    export default {
        name: 'monitor_serviceMonitor',
        components: {
            tsG2Chart
        }
    }
    <ts-g2-chart :title="" :chartType="" :maintitle="" :subtitle=""></ts-g2-chart>
    title  标题名
    maintitle 主标题
    subtitle 副标题
    chartType 图表类型  //如：饼图为3
        //1:折线图；2:柱状图；3:饼图；4:仪表盘；5:条形图;6:嵌套饼图;7:环形图表;8:梯形图表;9:漏斗图表;10:面积图表;11:雷达图;12:水波图;13:环形分布图表;14:线柱组合图;15:堆叠柱状图16.堆叠条形图;17.刻度仪表盘,18文字仪表盘,19.仪表盘(多色)20.镜像分组条形图21.柱形趋势图
    width  //默认为父窗体的宽度（可为固定数：如400；可为百分比：80%）
    height //默认为父窗体的高度（可为固定数：如400；可为百分比：80%）
    emptyText 空数据提示
    maxNumber 最大的数字
    annotation 是否显示提示文字
    isSlider 是否显示进度条
    axis 是否显示坐标轴
    legend 是否显示图例
    showBorder 是否显示边框
    showPercent 是否显示百分比
    secondLineCfg 柱形加折线 //值为：{xKey:X轴的key值；yKey:Y轴的key；color：折线颜色；legend：图例显示名}
    meanLineCfg 平均线或其他线 //值为：{num：线的值大小；color：线的颜色;position：线上文字的方位（end/start）；fontColor：文字颜色;text:线上文字（如“平均线”）}
    smooth //是否是折线平滑
    point //是否有折线点
    data //图表数据 
        [
            { column: 'London', category: 'Jan.', value: 18.9 }
        ]
        column:类别
        category:X轴
       // value：Y轴
    

标题面板

    import tsTitlePanel from '@/components/tsTitlePanel.vue'
    export default {
        name: 'monitor_serviceMonitor',
        components: {
            tsTitlePanel
        }
    }
    <ts-title-panel
            :title="item.controlTitle"
            :id="item.id"
            ref="tsPanel"
          >
    </ts-title-panel>
    title  标题名

筛选日期

    import tsScreenDate from '@/components/tsScreenDate.vue'
    export default {
        name: 'monitor_serviceMonitor',
        components: {
            tsScreenDate
        }
    }
    <ts-screen-date @refreshData="refreshData"></ts-screen-date>
    refreshData  刷新方法
    //刷新整个页面数据
    refreshData(dateRangeVal) {
      ```
    },

代码高亮编辑器

    import mCodeMirror from '@/components/bases/mCodeMirror.vue'
    <ts-code-mirror v-model="" type="htmlmixed"></ts-code-mirror>
    v-model  显示代码
    type 高亮类型  htmlmixed, xml, javascript, sql, vue

近期任务组件

    import mRecentTask from '@/components/bases/mRecentTask.vue'
    <m-recent-task title=""></m-recent-task>
    title  显示标题

css样式

###### 字体大小
    font12  12号字
    font13  13号字
    font14  14号字
    font15  15号字
    font16  16号字
    font18  18号字
    font20  20号字
    font22  22号字
    font24  24号字
    font26  26号字
    font28  28号字
    font30  30号字
###### 文本控制
    aling__left  文字水平靠左
    aling__center  文字水平居中
    aling__right  文字水平靠右
    ellipsis  文字溢出省略号显示（配合hidden、nowrap使用）
    nowrap  强制不换行
    bold 文字加粗
    bolder 文字加粗
###### 文字颜色
    base__color 主题色
    co333  灰色 333333
    co666  灰色 666666
    co999  灰色 999999
    coccc  灰色 cccccc
    coeee  灰色 eeeeee
    cof1f1f1  灰色 f1f1f1
    coblue  蓝色
    white  白色
    black  黑色
    green  绿色
    red  红色
###### 内边距
    左：padding-left
    右：padding-right
    上：padding-top
    下：padding-bottom
    pdt5  内上边距5px
    pdb5  内下边距5px
    pdl5  内左边距5px
    pdr5  内右边距5px
    pdt10  内上边距10px
    pdb10  内下边距10px
    pdl10  内左边距10px
    pdr10  内右边距10px
###### 外边距
    左：margin-left
    右：margin-right
    上：margin-top
    下：margin-bottom
    mrgt5  外上边距5px
    mrgb5  外下边距5px
    mrgl5  外左边距5px
    mrgr5  外右边距5px
    mrgt10  外上边距10px
    mrgb10  外下边距10px
    mrgl10  外左边距10px
    mrgr10  外右边距10px
###### 其他
    hidden  禁止溢出
    scroll_y  纵向滚动
    scroll_x  横向滚动
    height100  高100%（基于父级框架）
    none  隐藏元素
    fl  左浮动
    fr  右浮动
    row  清除浮动