ts-design-dragger
v0.0.1
Published
创星基础组件库
Downloads
1
Readme
vue
引用ts-element方式
import 'ts-element/packages/utils/btnPermission'
import 'ts-element/packages/utils/preventReClick'
import tsLibTest from 'ts-element';
Vue.use(tsLibTest);
import 'ts-element/lib/style/index.css'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
1，元素的权限控制，例：
<div v-has id="id"></div> 该元素，如果在设置了资源id会显示，如果没有该id则不会渲染
<div v-has></div> 该元素在渲染时不会渲染
2，单元格内按钮元素的权限控制，例：
在colModel中，buttons: [
{
title: '新增子应用',
icon: 'iconfont icon-Group-13 font16',
id: 'appManageAddChild',
restrict: true, // 必填，启动权限控制
event(e) {
}
},
3，组合按钮中子按钮都隐藏的权限控制，例：
<vxe-button
placement="bottom"
size="small"
class="more-btn mrgr5"
v-has
id="baseManageDeptImport,baseManageDeptExport,baseManageDeptTB,baseManageDeptDELALL" // 为子列表的全部权限集合，用逗号隔开
>
更多操作
<template #dropdowns>
<vxe-button
type="text"
content="批量导入"
@click="importFn('all')"
icon="iconfont icon-Group-7 font16"
id="baseManageDeptImport"
v-has
></vxe-button>
<vxe-button
type="text"
content="导出"
@click="exportFn()"
icon="iconfont icon-daochu font16"
id="baseManageDeptExport"
v-has
></vxe-button>
<vxe-button
type="text"
content="导出全部"
@click="exportFn('all')"
icon="iconfont icon-daochu font16"
id="baseManageDeptExport"
v-has
></vxe-button>
<vxe-button
type="text"
content="批量同步"
@click="tbList('all')"
icon="iconfont icon-bianyi font16"
id="baseManageDeptTB"
v-has
></vxe-button>
<vxe-button
type="text"
content="批量删除"
@click="deleteList()"
icon="iconfont icon-Group-17 font16"
v-if="showList"
id="baseManageDeptDELALL"
v-has
></vxe-button>
</template>
</vxe-button>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
window.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]])
//获取一个cookie
window.$cookies.get(keyName)
//删除一个cookie
window.$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
CheckboxConfig:{
checkMethod: ({ row })=>{ // 设置满足条件的复选框为禁用状态
return row.age > 26
}
},
tooltipConfig:{ // 自定义单元格tooltip功能
showAll: true, enterable: true, contentMethod: ({ type, column, row, items, _columnIndex })=>{
return ''
}
},
prmNames: { // 设置返回数据对应参数
page: 'page', // 设置返回数据分页参数名
rows: 'rows', // 设置返回数据列表参数名
pageCount: 'total', // 总页数参数名
totalCount: 'records' // 总条数参数名
},
pageEvent:(pageNo,pageSize,$tstable)=>{
this.$refs.table.loading = true
ajax.getFlow({pageNo,pageSize}).then(data => {
this.$refs.table.loading = false
if (data.statusCode == 200) {
this.listData = data.object.rows
this.total = data.object.totalCount
this.tableSource.totalCount = data.object.totalCount
this.$refs.table.data = data.object.rows
}
})
},// 响应分页按钮
totalCount:100,//静态数据的总数
// 可编辑配置项
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 // 判断按钮是否显示字段的值，当显示字段为设置值时，该按钮显示否则不显示按钮
type // rowDrop:拖拽 popover:浮窗
{popover: { // 浮窗配置
effect:'black',// 暗黑系列
style:{lineHeight:'25px',fontSize:'12px'},//内容样式
width:'auto',
field: 'textContent' // 字段名称
}}
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
tops // 右侧窗体打开时 距离顶部的距离，默认为‘40px’
title // 窗体名称
width // 窗体宽度 默认‘40%’ 可用百分号和px等单位
height // 窗体高度 默认 100%
方法：
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 }
target 点击时触发该事件 { 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 每一页条数
offPage 默认false，为true时关闭滚动分页加载
code 显示的code参数名，为下拉树时，该参数为唯一键值参数名，其值不可重复
text 下拉框显示的内容参数名
condition 动态数据时，检索的字段名
choice 是否多选 boolean 默认false，只针对于tree为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
loadSuccess 用于动态数据渲染之后的回调方法
rebackTreeSuccessed 用于树数据渲染之后的回调方法
为树时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.$utils.msg(_this, message, state)
state // 默认为warn 值：success, error, warn,info确认提示框
this.$mModal.confirm(parameter).then(type => {
console.log(type) // type=confirm 确认按钮点击 type= cancel 关闭按钮点击
})
parameter object/string
object: { message: '您确定要选中数据？', title: '测试', icon: '' }
如果为字符串，则为消息提示框中间内容锚点器
<tsAncher :ancherList="ancherList" ref="tsAncher" />
ancherList: [
{ name: '基本信息', target: 'baseInfo' },
{ name: '字段属性', target: 'columnTable' },
{ name: '索引信息', target: 'indexTable' }
],
name:// 锚点名称
target:// 指定的dom元素表单
<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-picker
placeholder="请选择日期"
width="250px"
type="daterange"
@change="selectDate"
value-format="yyyy-MM-dd"
v-model="rangeDate"
></ts-date-picker>删格
使用方法详见dmeo下grid
<ts-row type="flex">
<ts-col flex="280px"></ts-col>
<ts-col flex="auto"></ts-col>
</ts-row>
倍数
<ts-row type="flex">
<ts-col :flex="1"></ts-col>
<ts-col :flex="2"></ts-col>
</ts-row>
模块多条数据编辑
<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: ''
}
}
},
{
name: 'value',
type: 'component',
component: 'tsAutoComplete', // 输入建议
config: {
placeholder: '参数值',
source: {
code: 'value',
data: [],
initData: (_this2) => { // 初始化下拉数据
return []
}
},
clearable: false,
},
]
事件
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 点击标签执行事件 返回keysG2报表
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) {
```
},加载框loading
<tsLoading :loading="loading"></tsLoading>空数据页面
<ts-empty v-if="!loading&&showEmpty" description="-暂无权限访问-" />代码高亮编辑器
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 清除浮动